/*
 * lead-form.css
 *
 * Colors come from the theme's existing --primary / --secondary custom properties
 * (set by main-css.php) with accessible fallbacks: the audit measured the brand
 * #1b93d2 at 3.41:1 on white, which fails AA, so this form uses a darkened variant
 * for text and focus rings rather than inheriting the failing value.
 */

/*
 * Vendored byte-for-byte from the harvest:
 *
 *   assets/wp-content/themes/general-remodeler1/inc/lead-form/lead-form.css
 *
 * Nothing above this comment or below the end of the file is ours, and nothing
 * in between has been edited. The rules this project adds — the form starting
 * hidden until the script that can drive it has run, and the no-JavaScript
 * notice — are in site.css, which loads after this, so a future re-vendor is a
 * copy rather than a merge.
 */

.hiusa-lead {
	--hiusa-ink: #1c2128;
	--hiusa-muted: #5a6472;
	--hiusa-line: #c2cbd6;
	--hiusa-accent: #0b5c86;   /* AA on white: 6.4:1 */
	--hiusa-error: #b3261e;    /* AA on white: 5.9:1 */
	--hiusa-ok: #12703f;

	container-type: inline-size;
	font-family: inherit;
	color: inherit;
}

.hiusa-lead-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ------------------------------------------------------------- progress */

.hiusa-lead-progress {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 0.25rem;
	padding: 0;
	font-size: 0.78rem;
}

.hiusa-lead-progress li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: 1;
	opacity: 0.5;
}

.hiusa-lead-progress li span {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-weight: 700;
	flex: none;
}

.hiusa-lead-progress li.is-current,
.hiusa-lead-progress li.is-done { opacity: 1; }

.hiusa-lead-progress li.is-done span {
	background: var(--hiusa-ok);
	border-color: var(--hiusa-ok);
	color: #fff;
}

.hiusa-lead-stepcount {
	margin: 0;
	font-size: 0.78rem;
	opacity: 0.7;
}

/* ------------------------------------------------------------- steps */

.hiusa-lead-step {
	border: 0;
	margin: 0;
	padding: 0;
	display: none;
	flex-direction: column;
	gap: 0.85rem;
	min-inline-size: 0; /* fieldset defaults to min-content and breaks flex children */
}

.hiusa-lead-step.is-active { display: flex; }

.hiusa-lead-legend {
	padding: 0;
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

/* The legend is focused on step change; it is a heading, not a control, so the ring
   should read as "here is where you are" rather than "this is interactive". */
.hiusa-lead-legend:focus { outline: none; }
.hiusa-lead-legend:focus-visible {
	outline: 2px dashed var(--hiusa-accent);
	outline-offset: 4px;
}

/* ------------------------------------------------------------- fields */

.hiusa-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-inline-size: 0;
}

.hiusa-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
}

@container (min-width: 420px) {
	.hiusa-row { grid-template-columns: 1fr 1fr; }
	.hiusa-row:has(.hiusa-field-zip) { grid-template-columns: 2fr 1fr; }
}

.hiusa-field label {
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.3;
}

.hiusa-req { color: var(--hiusa-error); margin-inline-start: 0.15rem; }
.hiusa-optional { font-weight: 400; opacity: 0.65; margin-inline-start: 0.25rem; }

.hiusa-field input,
.hiusa-field select,
.hiusa-field textarea {
	inline-size: 100%;
	min-height: 44px;              /* tap target */
	padding: 0.55rem 0.7rem;
	border: 1.5px solid var(--hiusa-line);
	border-radius: 6px;
	background: #fff;
	color: var(--hiusa-ink);
	font: inherit;
	font-size: 16px;               /* < 16px makes iOS Safari zoom on focus */
	line-height: 1.35;
}

.hiusa-field textarea { min-height: 88px; resize: vertical; }

.hiusa-field input:focus-visible,
.hiusa-field select:focus-visible,
.hiusa-field textarea:focus-visible {
	outline: 3px solid var(--hiusa-accent);
	outline-offset: 1px;
	border-color: var(--hiusa-accent);
}

/*
 * :user-invalid, not :invalid — a required field is :invalid from first paint, so
 * :invalid would paint every field red before the visitor has typed anything.
 * :user-invalid only matches after the user has interacted and left it wrong.
 * .is-touched is the JS-set equivalent for browsers without :user-invalid.
 */
.hiusa-field input:user-invalid,
.hiusa-field select:user-invalid,
.hiusa-field textarea:user-invalid,
.hiusa-field input.is-touched[aria-invalid="true"],
.hiusa-field select.is-touched[aria-invalid="true"],
.hiusa-field textarea.is-touched[aria-invalid="true"] {
	border-color: var(--hiusa-error);
	background: #fff6f5;
}

.hiusa-err {
	margin: 0;
	min-height: 1em;
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--hiusa-error);
	font-weight: 600;
}
.hiusa-err:empty { min-height: 0; }

/* ------------------------------------------------------------- consent */

.hiusa-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.6rem;
	align-items: start;
}

.hiusa-consent input {
	inline-size: 22px;
	min-height: 22px;
	block-size: 22px;
	margin-top: 0.15rem;
	accent-color: var(--hiusa-accent);
}

.hiusa-consent label {
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.45;
}

.hiusa-consent .hiusa-err { grid-column: 2; }

/* ------------------------------------------------------------- honeypot */

/*
 * Positioned off-screen rather than display:none / hidden: a fair number of bots skip
 * inputs that are not rendered, and a genuinely hidden field catches fewer of them.
 * aria-hidden + tabindex=-1 keep it away from real users and screen readers.
 */
.hiusa-hp {
	position: absolute !important;
	left: -9999px !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------- nav */

.hiusa-lead-nav {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.hiusa-lead-nav button {
	min-height: 46px;
	padding: 0.6rem 1.4rem;
	border-radius: 6px;
	font-weight: 700;
	cursor: pointer;
	border: 1.5px solid transparent;
	flex: 1 1 auto;
}

.hiusa-next,
.hiusa-submit {
	background: var(--hiusa-accent);
	color: #fff;
	border-color: var(--hiusa-accent);
}

.hiusa-back {
	background: transparent;
	color: inherit;
	border-color: var(--hiusa-line);
	flex: 0 0 auto;
}

.hiusa-lead-nav button:focus-visible {
	outline: 3px solid var(--hiusa-accent);
	outline-offset: 3px;
}

.hiusa-lead-nav button[disabled] { opacity: 0.65; cursor: progress; }
.hiusa-lead-nav button[hidden] { display: none; }

.hiusa-lead-error {
	margin: 0;
	color: var(--hiusa-error);
	font-size: 0.86rem;
	font-weight: 600;
}
.hiusa-lead-error:empty { display: none; }

.hiusa-lead-privacy {
	margin: 0;
	font-size: 0.75rem;
	opacity: 0.75;
}

/* ------------------------------------------------------------- dark host */

/*
 * The form is embedded on the dark quote-form panel as well as on white page sections.
 * On the dark panel the inputs stay white (contrast is better and it reads as an input),
 * but labels and helper text must flip.
 */
.bg-secondary .hiusa-lead,
.bg-primary .hiusa-lead,
.txt-white .hiusa-lead {
	--hiusa-muted: #cbd5e1;
	--hiusa-line: #7c8b9c;
	--hiusa-accent: #ffffff;
	--hiusa-error: #ffb4ab;
}

.bg-secondary .hiusa-lead .hiusa-field input,
.bg-primary .hiusa-lead .hiusa-field input,
.txt-white .hiusa-lead .hiusa-field input,
.bg-secondary .hiusa-lead .hiusa-field select,
.bg-primary .hiusa-lead .hiusa-field select,
.txt-white .hiusa-lead .hiusa-field select,
.bg-secondary .hiusa-lead .hiusa-field textarea,
.bg-primary .hiusa-lead .hiusa-field textarea,
.txt-white .hiusa-lead .hiusa-field textarea {
	color: #1c2128;
}

.bg-secondary .hiusa-lead .hiusa-next,
.bg-primary .hiusa-lead .hiusa-next,
.txt-white .hiusa-lead .hiusa-next,
.bg-secondary .hiusa-lead .hiusa-submit,
.bg-primary .hiusa-lead .hiusa-submit,
.txt-white .hiusa-lead .hiusa-submit {
	background: #ffffff;
	color: #0b3d57;
	border-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.hiusa-lead * { transition: none !important; animation: none !important; }
}