/* Lead form. Scoped to .didit-form* so it cannot leak into SAM or page styles. */

.didit-form-wrap { width: 100%; }

.didit-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
}
.didit-field { margin: 0; display: flex; flex-direction: column; }
.didit-field--wide { grid-column: 1 / -1; }

/* An author `display: flex` beats the UA stylesheet's `[hidden] { display: none }`,
   so the conditional Company Name field rendered even while hidden="". Specificity
   (0,2,0) here outranks .didit-field (0,1,0) without needing !important.
   main.js toggles the attribute; this makes the attribute actually mean something. */
.didit-field[hidden] { display: none; }

.didit-field input,
.didit-field select,
.didit-field textarea {
	font: inherit;
	font-size: .95rem;
	padding: .6rem .7rem;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	color: #222;
	width: 100%;
}
.didit-field input:focus,
.didit-field select:focus,
.didit-field textarea:focus {
	outline: 2px solid var(--brand-primary, #da1921);
	outline-offset: 1px;
	border-color: var(--brand-primary, #da1921);
}
.didit-field input[aria-invalid="true"],
.didit-field textarea[aria-invalid="true"] { border-color: #c0141a; }
.didit-field__error { color: #c0141a; font-size: .8rem; margin-top: .3rem; }

/* Honeypot: hidden from users but NOT display:none — some bots skip fields that
   are display:none, and screen readers are handled by aria-hidden + tabindex. */
.didit-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

.didit-form__actions {
	display: flex; align-items: center; gap: 1rem;
	margin: 1.25rem 0 0;
}
.didit-form__submit[disabled] { opacity: .6; cursor: progress; }
.didit-form__status { font-size: .88rem; color: #444; }

.didit-form-success,
.didit-form-error {
	padding: 1rem 1.15rem;
	border-radius: 3px;
	margin: 0 0 1rem;
	font-size: .95rem;
}
.didit-form-success { background: #eef7ee; border-left: 4px solid #2e7d32; color: #1b4d1f; }
.didit-form-error   { background: #fdecec; border-left: 4px solid #c0141a; color: #7f1013; }
.didit-form-success p, .didit-form-error p { margin: 0; }

@media (max-width: 700px) {
	.didit-form__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Floating labels, carried over from the finished build's contact-form-band
   (.cfb__field--float). The label sits inside the control until it is focused
   or filled, then rises to notch the top border.

   Requires, and silently breaks without:
     - the label placed AFTER its control in the markup (adjacent/sibling
       combinators below)
     - placeholder=" " on inputs/textareas, so :not(:placeholder-shown) can
       detect "filled"
   --------------------------------------------------------------------------- */
.didit-field--float { position: relative; }

.didit-field--float label {
	position: absolute;
	left: .9rem;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 .3rem;
	font: 1rem/1 'Open Sans', sans-serif;
	/* #888 measured ~3.5:1 on white and fails WCAG AA; #656565 clears 4.5:1 */
	color: #656565;
	background: transparent;
	pointer-events: none;
	transition: top .15s ease, font-size .15s ease, color .15s ease, background .15s ease;
}
.didit-field--float textarea ~ label { top: 1.5rem; }

.didit-field--float input:focus + label,
.didit-field--float input:not(:placeholder-shown) + label,
.didit-field--float textarea:focus ~ label,
.didit-field--float textarea:not(:placeholder-shown) ~ label {
	top: 0;
	transform: translateY(-50%);
	font-size: .78rem;
	color: var(--brand-primary, #da1921);
	background: #fff;
}

.didit-field--float input:focus,
.didit-field--float select:focus,
.didit-field--float textarea:focus {
	outline: none;
	border-color: var(--brand-primary, #da1921);
	box-shadow: 0 0 0 1px var(--brand-primary, #da1921);
}

/* Selects carry their prompt as the first <option>, matching the reference, so
   their label is visually redundant — it stays for screen readers only. */
.didit-field--float select ~ .screen-reader-text,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

.didit-field textarea { min-height: 140px; resize: vertical; }
.didit-field select { color: #444; }