/**
 * Hawk Line contact form — front-end styles.
 *
 * Tokens only, zero hex literals. That is what makes the form work across all three
 * brand variations without a fork: the accent arrives through the variation, so nothing
 * here needs to know which brand it is running on.
 *
 * Observes the accent colour contract documented in style.css: the accent is used only
 * as a decorative fill — the rule under the areas heading and the selected-card marker.
 * It never colours text, borders or focus rings, because it measures 1.45:1 against the
 * purple surface on the ITAD variation.
 */

/* Every custom property below carries a literal fallback. Without them the whole
   stylesheet collapses if theme.json's presets are missing — padding, radii, gaps and
   fonts all silently drop, which looks like no CSS at all rather than a broken token. */
.hl-cf {
	max-width: 640px;
	font-family: var(--wp--preset--font-family--inter, Inter, system-ui, -apple-system, sans-serif);
}

/* The glass panel holds ONLY the form. Enquiry-area cards sit outside it, on the
   page background, which is what the design shows. */
.hl-cf__panel {
	padding: var(--wp--preset--spacing--40, 40px);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white, #FFFFFF) 55%, transparent);
	border-radius: var(--wp--custom--border-radius--lg, 12px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

/* The panel's 40px inset costs 80px of a 390px screen, on top of the page gutter, which
   leaves the fields squeezed. Tighter on small screens; desktop is unchanged. */
@media (max-width: 600px) {
	.hl-cf__panel {
		padding: var(--wp--preset--spacing--20, 20px);
	}
}

/* Panel surface. `default` is exactly what the block has rendered since 0.4.0 and is
   what every existing instance keeps; `glass` is the added option — white at 20%, so
   the brand surface reads through. Adding an option must not move the default. */
.hl-cf--bg-glass .hl-cf__panel {
	background: var(--wp--custom--surface--glass, rgba(255, 255, 255, 0.2));
}

.hl-cf--bg-default .hl-cf__panel {
	background: color-mix(in srgb, var(--wp--preset--color--white, #FFFFFF) 82%, var(--wp--preset--color--purple-300, #B79BF0));
}

/* Older engines without color-mix() get a flat light surface rather than nothing. */
@supports not (background: color-mix(in srgb, #fff 50%, #000)) {
	.hl-cf--bg-default .hl-cf__panel {
		background: var(--wp--preset--color--purple-100, #EFE8FC);
	}
}

/* Older engines without color-mix() get a flat light surface rather than nothing. */


/* On the light panel the type flips to the dark end of the ramp.
   NOTE: #441899 comes from the design and is not in the theme's closed palette —
   it sits between purple-700 (#4E27A0) and purple-800 (#34186E). Flagged rather than
   silently rounded to a token, since the palette is meant to be closed. */
.hl-cf__panel .hl-cf__heading {
	color: #441899;
}

.hl-cf__panel .hl-cf__description {
	color: var(--wp--preset--color--purple-900, #1F0E45);
}

.hl-cf__panel .hl-cf__input {
	border-color: var(--wp--preset--color--gray-300, #CCCCD4);
}

.hl-cf__panel .hl-cf__error {
	color: var(--wp--preset--color--purple-900, #1F0E45);
}

.hl-cf__panel .hl-cf__summary {
	color: var(--wp--preset--color--white, #FFFFFF);
	background: var(--wp--preset--color--purple-800, #34186E);
}

/* Focus rings flip dark inside the panel. teal-400 was chosen for the purple page
   surface (4.41:1); against this near-white panel it measures 1.11:1 — invisible,
   and below the 3:1 a focus indicator needs. purple-900 is 14.93:1 here. */
.hl-cf--focus-ring .hl-cf__panel .hl-cf__input:focus-visible,
.hl-cf--focus-ring .hl-cf__panel .hl-cf__select:focus-visible,
.hl-cf--focus-ring .hl-cf__panel .hl-cf__submit:focus-visible,
.hl-cf--focus-ring .hl-cf__panel .hl-cf__summary:focus-visible,
.hl-cf--focus-ring .hl-cf__panel .hl-cf__success:focus-visible {
	outline-color: var(--wp--preset--color--purple-900, #1F0E45);
}

.hl-cf__form,
.hl-cf__success {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 20px);
}

/* The UA sheet's `[hidden] { display: none }` loses to any author `display` rule, so
   the success panel above rendered on every page load. The attribute selector raises
   specificity just enough to win it back — no !important needed. */
.hl-cf [hidden],
.hl-cf__success[hidden],
.hl-cf__summary[hidden],
.hl-cf__error[hidden],
.hl-cf__busy[hidden] {
	display: none;
}

.hl-cf__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-sm, 32px);
}

.hl-cf__description {
	margin: 0;
	color: var(--wp--preset--color--purple-100, #EFE8FC);
}

/* ── Fields ───────────────────────────────────────────────────────────── */

.hl-cf__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--20, 20px);
}

@media (max-width: 600px) {
	.hl-cf__row {
		grid-template-columns: 1fr;
	}
}

.hl-cf__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8, 8px);
}

/* The design labels fields with placeholders only. The <label> stays in the markup —
   removing it would break screen readers, autofill and the error announcements — but
   it is taken out of the visual flow. */
.hl-cf__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hl-cf__input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--12, 12px) var(--wp--preset--spacing--16, 16px);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md, 16px);
	line-height: 1.5;
	color: var(--wp--preset--color--gray-900, #0D0D12);
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid var(--wp--preset--color--purple-200, #D6C5F7);
	border-radius: var(--wp--custom--border-radius--md, 8px);
}

.hl-cf__textarea {
	resize: vertical;
	min-height: 8em;
}

.hl-cf__input::placeholder {
	color: var(--wp--preset--color--gray-500, #6E6E7A);
	opacity: 1;
}

/* Focus ring uses teal-400, never the accent — it is the one token that clears the
   3:1 non-text threshold on all three brands. */
.hl-cf--focus-ring .hl-cf__input:focus-visible,
.hl-cf--focus-ring .hl-cf__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal-400, #00FFD5);
	outline-offset: 3px;
}

/* Emphasis without reflow: a second pixel drawn inside the existing 1px border,
   rather than widening it — widening shifts every child by a pixel. */
.hl-cf__input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--itad-magenta-300, #FF5CA6);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--itad-magenta-300, #FF5CA6);
}

/* Focus ring is on by default ("Show focus ring" in the inspector) — the brief lists
   visible focus states as an acceptance criterion. These rules only apply when an
   editor has deliberately turned it OFF, and they also have to beat the theme's global
   `input/select/textarea:focus-visible` rule or that teal outline would still show.

   ⚠️ Turning it off leaves no visible focus indicator, which fails WCAG 2.4.7. The
   inspector says so at the point of the decision. */
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__input:focus,
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__input:focus-visible,
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__select:focus,
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__select:focus-visible,
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__submit:focus,
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__submit:focus-visible,
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__summary:focus,
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__success:focus,
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__card-input:focus,
.hl-cf:not(.hl-cf--focus-ring) .hl-cf__card-input:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ── Errors ───────────────────────────────────────────────────────────── */

.hl-cf__error,
.hl-cf__summary {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 14px);
	font-weight: 600;
}

/* On the purple surface, error text must stay legible — white with a magenta rule
   beside it rather than magenta text, which would fail contrast. */
.hl-cf__error {
	color: var(--wp--preset--color--white, #FFFFFF);
	padding-left: var(--wp--preset--spacing--12, 12px);
	border-left: 3px solid var(--wp--preset--color--itad-magenta-300, #FF5CA6);
}

.hl-cf__summary {
	color: var(--wp--preset--color--white, #FFFFFF);
	padding: var(--wp--preset--spacing--12, 12px) var(--wp--preset--spacing--16, 16px);
	background: var(--wp--preset--color--purple-700, #4E27A0);
	border-left: 4px solid var(--wp--preset--color--itad-magenta-300, #FF5CA6);
	border-radius: var(--wp--custom--border-radius--sm, 4px);
}

.hl-cf--focus-ring .hl-cf__summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal-400, #00FFD5);
	outline-offset: 2px;
}

/* ── Actions ──────────────────────────────────────────────────────────── */

/* Right-aligned, per the design. */
.hl-cf__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--16, 16px);
}

/* Matches the Figma button: dark navy pill, teal label, Inter Medium.
   teal-400 on purple-900 measures 13.48:1, and both are fixed tokens rather than the
   brand accent. It was a fixed dark pill until 0.7.0, on the reading that the button
   looked identical on all three brands — but the designs disagree: the parent draws a
   dark pill with a teal label and Resellers an accent pill with a purple one. It now
   uses the same pair as the hl-cta button style, so the primary action is one treatment
   across the system rather than two. NOTE: the design specifies 18px; the type scale has no 18px step
   (md is 16, lg is 20), so this is the one literal size in the stylesheet. */
.hl-cf__submit {
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1;
	padding: var(--wp--preset--spacing--12, 12px) var(--wp--preset--spacing--20, 20px);
	color: var(--wp--custom--brand--on-accent, var(--wp--preset--color--purple-600, #6433C9));
	background: var(--wp--custom--brand--accent, #00FFD5);
	border: 0;
	border-radius: var(--wp--custom--border-radius--pill, 9999px);
	cursor: pointer;
	transition: background-color .15s ease;
}

.hl-cf__submit:hover {
	filter: brightness(1.08);
}

/* The focus ring must clear the pill itself, not the panel behind it. */
.hl-cf--focus-ring .hl-cf__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal-400, #00FFD5);
	outline-offset: 3px;
}

.hl-cf__submit[disabled] {
	opacity: 0.65;
	cursor: default;
}

.hl-cf__busy::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid var(--wp--preset--color--purple-300, #B79BF0);
	border-top-color: var(--wp--preset--color--purple-900, #1F0E45);
	border-radius: var(--wp--custom--border-radius--pill, 9999px);
	animation: hl-cf-spin 0.7s linear infinite;
}

@keyframes hl-cf-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hl-cf__busy::after {
		animation: none;
	}
}

.hl-cf__noscript {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--wp--preset--color--purple-100, #EFE8FC);
}

/* ── Success ──────────────────────────────────────────────────────────── */

.hl-cf__success {
	padding: var(--wp--preset--spacing--32, 32px);
	font-size: var(--wp--preset--font-size--lg, 20px);
	color: var(--wp--preset--color--white, #FFFFFF);
	background: var(--wp--preset--color--purple-600, #6433C9);
	border-radius: var(--wp--custom--border-radius--lg, 12px);
}

.hl-cf--focus-ring .hl-cf__success:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal-400, #00FFD5);
	outline-offset: 3px;
}

/* ── Honeypot ─────────────────────────────────────────────────────────── */

/* Off-screen rather than display:none, which bots detect and skip. Also aria-hidden
   and tabindex="-1" in the markup, so it never reaches a real visitor. */
.hl-cf__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ── Routed variant: enquiry areas ────────────────────────────────────────
   The same options render two ways. Cards are the visible control from 782px
   up; below that the native <select> inside the form takes over, which is
   what the design asks for and what mobile users expect from a picker.
   view.js keeps the two in sync and the <select> holds the canonical value. */

.hl-cf--routed {
	max-width: 100%;
}

/* The panel is narrower than the card row above it, and centred, matching the design. */
.hl-cf--routed .hl-cf__panel {
	max-width: 560px;
	margin-inline: auto;
}

/* Teal, matching the design and the submit label. Deliberately the fixed teal-400
   token rather than the brand accent: as a fixed value it renders identically on all
   three brands at 4.41:1, which clears the 3:1 large-text threshold. Using the accent
   here would put ITAD magenta at 1.45:1 and make the heading unreadable. */
.hl-cf__areas-heading {
	margin: 0 0 var(--wp--preset--spacing--24, 24px);
	font-size: var(--wp--preset--font-size--heading-sm, 32px);
	font-weight: 700;
	text-align: center;
	color: var(--wp--preset--color--teal-400, #00FFD5);
}

.hl-cf__areas {
	margin: 0 0 var(--wp--preset--spacing--32, 32px);
	padding: 0;
	border: 0;
}

/* The legend duplicates the select's label, so keep it for structure but out
   of sight — the cards carry their own visible titles. */
.hl-cf__areas-legend {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* One row, whatever the count. auto-fit with a 200px floor wrapped the fourth card
   as soon as the container was narrower than ~880px — which it is at the theme's
   720px content width. Column flow keeps every area on a single line and shares the
   width equally, so adding or removing an area in the editor still works. */
.hl-cf__cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--wp--preset--spacing--20, 20px);
	align-items: stretch;
}

.hl-cf__card {
	position: relative;
	display: block;
	padding: var(--wp--preset--spacing--24, 24px);
	background: transparent;
	border: 1px solid var(--wp--preset--color--purple-200, #D6C5F7);
	border-radius: var(--wp--custom--border-radius--lg, 12px);
	cursor: pointer;
}

/* The radio itself is the accessible control; it sits behind the card face
   rather than being removed, so focus and checked state still work. */
.hl-cf__card-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.hl-cf__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8, 8px);
}

.hl-cf__card-title {
	font-size: var(--wp--preset--font-size--lg, 20px);
	font-weight: 700;
	color: var(--wp--preset--color--white, #FFFFFF);
}

.hl-cf__card-desc {
	font-size: var(--wp--preset--font-size--sm, 14px);
	line-height: 1.5;
	color: var(--wp--preset--color--purple-100, #EFE8FC);
}

.hl-cf__card:hover {
	border-color: var(--wp--preset--color--white, #FFFFFF);
}

.hl-cf__card:has( .hl-cf__card-input:checked ) {
	border-color: var(--wp--preset--color--white, #FFFFFF);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--white, #FFFFFF);
	background: var(--wp--preset--color--purple-600, #6433C9);
}

/* Focus lands on the visually-hidden radio, so surface it on the card face.
   teal-400 per the colour contract — never the accent. */
.hl-cf--focus-ring .hl-cf__card:has( .hl-cf__card-input:focus-visible ) {
	outline: 2px solid var(--wp--preset--color--teal-400, #00FFD5);
	outline-offset: 3px;
}

/* Fallback for engines without :has() — the checked card simply keeps the
   default border, which is legible if less emphatic. */
@supports not selector(:has(*)) {
	.hl-cf__card-input:checked + .hl-cf__card-body .hl-cf__card-title {
		text-decoration: underline;
		text-underline-offset: 0.3em;
	}
}

/* Once the message is away, the picker goes with the form — leaving the cards up
   invites a second submission that can no longer happen. */
.hl-cf--sent .hl-cf__areas-heading,
.hl-cf--sent .hl-cf__areas {
	display: none;
}

/* Missing-area state: mark every card, not just one, since the group is what is
   unanswered. Magenta border on the purple surface is 3.4:1 against the card's own
   background, and the message below spells out what is wrong. */
.hl-cf__areas.is-error .hl-cf__card {
	border-color: var(--wp--preset--color--itad-magenta-300, #FF5CA6);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--itad-magenta-300, #FF5CA6);
}

.hl-cf__areas-error {
	margin-top: var(--wp--preset--spacing--16, 16px);
}

/* ── Responsive swap ──────────────────────────────────────────────────── */

.hl-cf__field--select {
	display: none;
}

@media (max-width: 781px) {
	.hl-cf__areas {
		display: none;
	}

	.hl-cf__field--select {
		display: flex;
	}
}

.hl-cf__select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--gray-700, #2E2E38) 50%),
		linear-gradient(135deg, var(--wp--preset--color--gray-700, #2E2E38) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--wp--preset--spacing--40, 40px);
}