/**
 * Contact page chrome: not a `bd/*` block — this styles the raw
 * `wp:html`/`wp:shortcode` content authored into the Contact page's own
 * `post_content` (Contact Form 7's generated markup plus the "Get in
 * touch" info block). Lives here rather than in a block-slug file because
 * `first_block_stylesheets()` globs every file in this directory
 * regardless of slug (see functions.php), and site-chrome.css is shared
 * theme chrome, not page-specific content.
 *
 * Ported from `sample/FIRST Metrology website design/contact.dc.html`'s
 * "Get in touch" section: two-column layout (info left, enquiry card
 * right), card-style form with a 2-up field grid.
 */

/*
 * This is a plain `wp:group` in the page's own content, not a `bd/*` block, so
 * nothing gave it the theme's container — it stretched the full 1440px
 * viewport and "Get in touch" started hard against the browser's left edge.
 * `wp:post-content` is an unconstrained flow layout, so the group has to
 * bring its own measure.
 */
.bd-contact-columns {
	max-width: var(--container-xl);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	/* 0.85fr / 1.15fr in contact.dc.html — the info column is the narrower one. */
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--space-12);
	align-items: start;
	/* `padding: 80px 0` on the section in contact.dc.html; --space-16 (64px)
	   was a step short at both ends. */
	padding-top: var(--space-20);
	padding-bottom: var(--space-20);
}

/*
 * "What happens after you contact us?" — also raw page content, and it had no
 * rule anywhere in the theme, so it rendered as unstyled full-bleed text with
 * no vertical padding and a single 1440px-wide line of body copy.
 */
.bd-contact-next {
	max-width: 820px;
	margin-inline: auto;
	padding: 72px var(--gutter);
}

/*
 * CNT-003. The design opens this band with a brand-blue eyebrow ("What
 * happens next") above the heading — it was missing entirely, so the section
 * started on the h2 and read as a stray paragraph rather than a titled band.
 * The eyebrow is authored into the page's own content; these are its styles.
 */
.bd-contact-next__eyebrow {
	display: block;
	font-size: var(--type-eyebrow-size);
	font-weight: var(--type-eyebrow-weight);
	letter-spacing: var(--type-eyebrow-ls);
	text-transform: uppercase;
	color: var(--color-primary);
	/* The export's `.eyebrow` inherits the body's 1.65 rather than sitting at
	   `normal`; see card-grid.css for the same correction. */
	line-height: var(--lh-relaxed);
}

.bd-contact-next h2 {
	font-size: var(--fs-3xl);
	font-weight: var(--fw-extrabold);
	/* -0.02em literal: --ls-tight is -0.015em and is a step off. */
	letter-spacing: var(--ls-snug);
	color: var(--ink);
	/* `margin: 14px 0 16px` in the export — the 14px is the gap under the
	   eyebrow, which is why it is carried here rather than on the eyebrow. */
	margin: 14px 0 var(--space-4);
}

.bd-contact-next p {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--text-secondary);
	margin: 0 0 var(--space-4);
}

.bd-contact-next p:last-child {
	margin-bottom: 0;
}

.bd-contact-info h2 {
	font-size: var(--fs-xl);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-snug);
	color: var(--ink);
	/* 8px in the export, not --space-3 (12px). */
	margin: 0 0 var(--space-2);
}

.bd-contact-info > p:first-of-type {
	font-size: var(--fs-base);
	color: var(--text-secondary);
	line-height: var(--lh-relaxed);
	/* 28px — the gap between the intro and the first labelled block. */
	margin: 0 0 28px;
}

/*
 * The labelled blocks (Headquarters / Email / Phone / Business hours) are a
 * 22px stack in the export, and their copy is ink at 15px/1.6 — not the
 * secondary grey the intro above uses. --space-4 (16px) was 6px tight on
 * every gap, which is most of what made this column read as cramped.
 */
.bd-contact-info p {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--ink);
	margin: 0 0 22px;
}

.bd-contact-info p:last-child {
	margin-bottom: 0;
}

.bd-contact-label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-primary);
	/* 6px in the export. --space-1 is 4px. */
	margin-bottom: 6px;
}

/* "*Closed on public holidays" — a muted footnote under the opening hours. */
.bd-contact-note {
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

/* Brand blue, as in the design — these were rendering as plain ink text. */
.bd-contact-info a {
	color: var(--color-primary);
	text-decoration: none;
}

.bd-contact-info a:hover {
	color: var(--color-primary);
}

/*
 * The action row: "WhatsApp us" plus the two square directions buttons. The
 * directions buttons were missing from the page entirely — the design puts
 * the same Google Maps / Waze pair here that the "Find us" cards below carry,
 * so the HQ is reachable without scrolling past the form.
 */
.bd-contact-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: var(--space-1);
}

.bd-contact-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px, matching the directions buttons beside it — at 42px it sat 2px
	   short of them and the row looked misaligned. */
	height: 44px;
	padding: 0 18px;
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--white) !important;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.bd-contact-whatsapp:hover {
	background: var(--first-blue-700);
	color: var(--white) !important;
}

/*
 * Icon-only buttons. The mark is a background image rather than an `<img>`
 * so the URL resolves against this stylesheet — the markup lives in the
 * page's own `post_content`, where a theme-relative path could not be built.
 */
.bd-contact-dir {
	display: inline-flex;
	flex: none;
	width: 44px;
	height: 44px;
	border: var(--border-width) solid var(--border-strong);
	border-radius: var(--radius-md);
	background-color: var(--surface-page);
	background-repeat: no-repeat;
	background-position: center;
	transition: border-color 150ms var(--ease-standard), background-color 150ms var(--ease-standard), background-size 160ms var(--ease-standard);
}

.bd-contact-dir--map {
	background-image: url("../../icons/gmap.svg");
	background-size: 22px 22px;
}

.bd-contact-dir--waze {
	background-image: url("../../icons/waze.svg");
	background-size: 24px 24px;
}

.bd-contact-dir:hover {
	border-color: var(--color-primary);
	background-color: var(--first-blue-050);
}

.bd-contact-dir--map:hover {
	background-size: 24px 24px;
}

.bd-contact-dir--waze:hover {
	background-size: 26px 26px;
}

.bd-contact-card {
	background: var(--surface-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	/* 34px in the export; --space-8 (32px) was 2px short on all four sides. */
	padding: 34px;
}

.bd-contact-card h2 {
	/* 22px. --fs-lg is 20px and --fs-xl is 24px, so neither token lands on it. */
	font-size: var(--fs-xl);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-snug);
	color: var(--ink);
	/* 6px, not --space-2 (8px) — the heading and its sub-line are a tight pair. */
	margin: 0 0 6px;
}

.bd-contact-card__intro {
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	/* 24px between the card's own header and the first field. */
	margin: 0 0 var(--space-6);
}

/*
 * CNT-001 — form spacing.
 *
 * Contact Form 7 emits one `<p>` per field, in the order Name, Company,
 * Email, Phone, Industry, Interest, Message, Submit. Laid out two-up that is
 * exactly the export's three `fm-field-row` pairs, with Message and Submit
 * spanning. What was wrong was the rhythm: the row gap came from a 16px
 * bottom margin on each `<p>` (the export's is 18px), and the gap between a
 * label and its control came from CF7's `<br>` — a full line box, roughly
 * 21px, where the design has 7px. Every field was ~14px taller than it
 * should be, which compounded down the card.
 */
.bd-contact-card .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* 18px between rows, 16px between the two columns. */
	gap: 18px var(--space-4);
	align-items: start;
}

.bd-contact-card .wpcf7-form p {
	margin: 0;
}

/* The submit is a `<button>`, not CF7's default `<input type="submit">` (see
   the note on `.wpcf7-submit.bd-btn` below) — matching only `input` here left
   the button in one grid column at half width. */
.bd-contact-card .wpcf7-form p:has(textarea),
.bd-contact-card .wpcf7-form p:has(.wpcf7-submit) {
	grid-column: 1 / -1;
}

/* CF7's Turnstile integration injects its widget as the form's first child,
   so it took the first grid cell (0px tall while idle) and pushed every field
   one cell along — Name landed in the right column. Span it full width and
   move it down to sit just above Submit, where a challenge belongs. */
.bd-contact-card .wpcf7-form > .wpcf7-turnstile {
	grid-column: 1 / -1;
	order: 1;
}

.bd-contact-card .wpcf7-form > p:has(.wpcf7-submit),
.bd-contact-card .wpcf7-form > .wpcf7-response-output {
	order: 2;
}

.bd-contact-card .wpcf7-form label {
	display: block;
	/* 13.5px/600/ink — CF7 nests the control inside its label, so this styles
	   the label *text* and each control resets its own size below. */
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	color: var(--ink);
}

/* CF7's own line break between label text and control. The 7px gap is the
   wrap's margin instead, so the pair is not a whole line box apart. */
.bd-contact-card .wpcf7-form label br {
	display: none;
}

.bd-contact-card .wpcf7-form-control-wrap {
	display: block;
	margin-top: 7px;
}

.bd-contact-card .wpcf7-form-control:not(.wpcf7-submit) {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--border-strong);
	/* 8px on form controls specifically — --radius-md (6px) is the button
	   radius, and the export does distinguish the two here. */
	border-radius: 8px;
	font-size: var(--fs-base);
	font-family: var(--font-sans);
	/* CF7 nests the control inside the `<label>`, so without this every input,
	   select and textarea inherited the label's 600 and rendered semi-bold —
	   the export's controls are regular weight. */
	font-weight: var(--fw-regular);
	color: var(--ink);
	background: var(--white);
	transition: border-color 150ms var(--ease-standard), box-shadow 150ms var(--ease-standard);
}

/* Single-line controls are a fixed 46px with horizontal-only padding, so the
   text inputs and the two selects agree on height. */
.bd-contact-card input.wpcf7-form-control:not(.wpcf7-submit),
.bd-contact-card select.wpcf7-form-control {
	height: 46px;
	padding: 0 14px;
}

/* The native select drew its own arrow hard against the right border and
   indented its text a few px further than the inputs. Replace it with a
   chevron inset to match the 14px padding (stroke = --text-secondary; a data
   URI cannot read a custom property). `:not(.wpcf7-submit)` only to outrank
   the shared control rule's `background` shorthand. */
.bd-contact-card select.wpcf7-form-control:not(.wpcf7-submit) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566372' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	cursor: pointer;
}

/* Unchosen select reads as a placeholder, like the inputs' placeholder text. */
.bd-contact-card select.wpcf7-form-control:has(option[value=""]:checked) {
	color: var(--text-muted);
}

.bd-contact-card select.wpcf7-form-control option {
	color: var(--ink);
}

.bd-contact-card .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: var(--focus-ring);
}

.bd-contact-card textarea.wpcf7-form-control {
	padding: 12px 14px;
	resize: vertical;
	/*
	 * CF7 emits `rows="10"`, which rendered a 216px box against the design's
	 * 118px — on its own that pushed the submit button ~100px down and made
	 * the card taller than the info column beside it. `height` (not just
	 * `min-height`) is what overrides the attribute; `resize: vertical` still
	 * lets the visitor drag it larger.
	 */
	height: 118px;
	min-height: 118px;
	/* Its own height, not the grid row's — the row was stretching it to 196px. */
	align-self: start;
}

/*
 * The submit is a real `<button>`, not CF7's default `<input type="submit">`
 * — which is what contact.dc.html uses, and the only way to get the trailing
 * arrow, since `input` cannot carry the `::after` that `.bd-btn--primary`
 * draws it with. CF7 binds its handler to the form's `submit` event and reads
 * `event.submitter`, so a button submits and validates exactly as the input
 * did; `has-spinner` still gets CF7's spinner inserted after it.
 */
.bd-contact-card .wpcf7-submit.bd-btn {
	width: 100%;
	/* The export's submit is 52px, taller than the 48px `.bd-btn` default. */
	--bd-btn-height: 52px;
	font-size: var(--fs-base);
	border: 0;
	cursor: pointer;
	background: var(--color-primary);
	color: var(--white);
}

.bd-contact-card .wpcf7-submit.bd-btn:hover {
	background: var(--first-blue-700);
}

.bd-contact-card .wpcf7-submit.bd-btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* CF7 inlines its spinner after the full-width button with `margin: 0 24px`,
 * so it wrapped flush under the button's left edge, and its `visibility:
 * hidden` kept reserving that space when idle. The loading state lives in
 * the button itself (below), so CF7's own spinner never shows. */
.bd-contact-card .wpcf7-spinner {
	display: none;
}

/* Submitting: the arrow becomes a spinning ring and the button stops taking
 * clicks — CF7 does not disable it, so a second click sent a second enquiry. */
.bd-contact-card .wpcf7-form.submitting .wpcf7-submit.bd-btn {
	pointer-events: none;
	cursor: progress;
	opacity: 0.85;
}

.bd-contact-card .wpcf7-form.submitting .wpcf7-submit.bd-btn::after {
	box-sizing: border-box;
	-webkit-mask: none;
	mask: none;
	background: transparent;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	transform: none;
	animation: bd-contact-spin 700ms linear infinite;
}

@keyframes bd-contact-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bd-contact-card .wpcf7-form.submitting .wpcf7-submit.bd-btn::after {
		animation-duration: 2s;
	}
}

/* Invalid field: CF7 only colours the tip text (#dc3232 at 1em), so the field
 * itself gave no signal. Red border on the control, smaller tip in the theme
 * danger colour. */
.bd-contact-card .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--danger);
}

.bd-contact-card .wpcf7-form-control.wpcf7-not-valid:focus {
	border-color: var(--danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent);
}

.bd-contact-card .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--danger);
}

/* Browser autofill paints its own pale-blue fill over the white control. */
.bd-contact-card .wpcf7-form-control:-webkit-autofill {
	-webkit-text-fill-color: var(--ink);
	box-shadow: 0 0 0 1000px var(--white) inset;
}

/* Status message. CF7's own rule (`.wpcf7 form .wpcf7-response-output`) out-
 * specifies a plain `.bd-contact-card` selector and drew a 2px outline box
 * inset 8px from the button with a 32px gap above; its per-state rules
 * (`form.invalid` …) tie with `form.wpcf7-form`, hence `[data-status]`.
 * Tinted panel with a coloured left rule; text stays ink for contrast (amber
 * on white is unreadable). */
.bd-contact-card form.wpcf7-form[data-status] .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-left: 3px solid var(--warning);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--warning) 12%, var(--white));
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--ink);
}

.bd-contact-card form.wpcf7-form[data-status].sent .wpcf7-response-output {
	border-left-color: var(--success);
	background: color-mix(in srgb, var(--success) 10%, var(--white));
}

.bd-contact-card form.wpcf7-form[data-status].failed .wpcf7-response-output,
.bd-contact-card form.wpcf7-form[data-status].aborted .wpcf7-response-output,
.bd-contact-card form.wpcf7-form[data-status].spam .wpcf7-response-output {
	border-left-color: var(--danger);
	background: color-mix(in srgb, var(--danger) 8%, var(--white));
}

@media (max-width: 900px) {
	.bd-contact-columns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.bd-contact-card .wpcf7-form {
		grid-template-columns: 1fr;
	}
	.bd-contact-card .wpcf7-form p:has(textarea),
	.bd-contact-card .wpcf7-form p:has(.wpcf7-submit) {
		grid-column: auto;
	}
}