/**
 * P14 Contact (Figma Contact 190:4481): the Horizon band under the page hero, form column on the
 * left, three stacked info cards on the right.
 *
 * NEW partial, not an extension of the parent's `.kd-form-band`: that band is a single centred
 * ~595px column with a right-aligned submit, and the Figma band is a two-column layout with a
 * left-aligned button. Re-using it would mean undoing its measure, centring and submit rules.
 * The form column holds the Gravity Forms form: its skin is the "Gravity Forms skin (P14b)" block
 * below (Orbital `--gf-*` overrides + a few real rules, all scoped to `.lts-contact__form`).
 *
 * 1440 geometry (Figma, page y from the band top 630): band 667 tall; content x112..1328 (1216,
 * the theme's 76rem column); form column 618 wide (x112), 83 gap, cards 515 wide (x813); first
 * field label and first card both start 71 below the band top; band bottom 65 below the submit
 * button. Cards: 98 / 160 / 154 tall, 18 radius, Clear, shadow 0 4 8.7 -2 Deep 27%, text at x+39,
 * 24px Medium Deep title, 18/24 body, 18-23 between cards (20 here).
 * Derived (no tablet / mobile frames): below 960 the columns stack, form first, then the cards;
 * card padding tightens on phones. Not drawn: the empty-form state (visitors, GF missing).
 *
 * Specificity: the parent's owl (`.entry-content > * + *`, 0,1,0) gives the band a 120px top margin;
 * `.lts-contact.alignfull` (0,2,0) zeroes it. Under an interior hero the parent adds a margin to the
 * FIRST child (`main:has(.kd-hero-interior) .entry-content > :first-child`, 0,3,1), which (0,2,0) does
 * not beat: the `:first-child` rule below mirrors form-band.css (0,4,1).
 * Prose links come from lts-global.css (underline 1px, offset 0.2em); this file only sets wrapping.
 */

main:has(.kd-hero-interior) .entry-content > .lts-contact:first-child {
	margin-block-start: 0;
}

.lts-contact.alignfull {
	margin-block: 0;
	padding-block: 4.4375rem 4.0625rem; /* 71 / 65 */
	padding-inline: var(--wp--custom--layout--gutter);
}

.lts-contact .lts-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 618fr) minmax(0, 515fr);
	align-items: start;
	column-gap: clamp(2rem, 5.7639vw, 5.1875rem); /* 83 at 1440 */
	max-width: var(--wp--style--global--content-size, 76rem);
	margin-inline: auto;
}

.lts-contact .lts-contact__inner > * {
	margin: 0;
}

/* -- Form column ------------------------------------------------------------------ */

.lts-contact .lts-contact__form {
	min-width: 0;
}

/* -- Gravity Forms skin (P14b) ------------------------------------------------------
   Figma 190:4483-4498 + 193:4515, 1440. Per field: a visible label (15/25 Medium, uppercase,
   tracked 0.13em), 3px, then the control (618 x 44, r10, Clear, 18/24 Regular Body ink, text at
   x+23); 18px from a control to the next label; textarea 155; 28px to the button; button 163 x 50,
   pill, 14px uppercase tracked 0.13em, text at x+22. Placeholders: 15px Medium uppercase tracked.
   Not drawn, derived: the 1px Tide control border (Figma has none; Clear on Horizon is 1.1:1,
   WCAG 1.4.11 wants 3:1), the Tide Dark focus and the Error Red error state (D20 / J4), the
   "All fields are required." legend (WCAG 3.3.2, see inc/contact.php).

   HOW. Orbital is driven by `--gf-*` custom properties, so the wrapper block below is the skin,
   scoped to `.lts-contact__form`; the real rules after it READ those vars where GF's own rule loses,
   so each value has one source. Three things stop the vars alone from working, all measured:
   1. GF's per-form inline <style> (id selector) sets --gf-ctrl-size, --gf-ctrl-btn-* and the label
      colour from PARENT-bridge values (and from the form's Input Size setting). A var of the same
      name loses, so the sizes are real `block-size` rules fed by the contact vars below, which also
      makes the geometry independent of Input Size.
   2. lts-global.css styles every text input / select / textarea directly (font, border, colour,
      min-height, padding: specificity 0,5,2), which GF's var path cannot beat. The controls rule
      below out-specifies it (0,6,1) and writes the Figma values itself. This also fixes the
      foundation's invalid state, which that rule shadows (aria-invalid computed Tide, not red).
   3. GF has no variable for text-transform, the "(Required)" text or the select chevron colour,
      and its placeholder rule never matches (see the label / placeholder note).
   Source order matters: several rules below tie at (0,6,1) with the controls rule and win by
   coming after it (padding on textarea / select, hover, focus, error). Keep them after it. */

.lts-contact .lts-contact__form {
	/* Figma L6 draws 44 / 50; the Style Guide tokens say 45 (control.inputHeight) / 54
	   (control.buttonHeight). Contact follows the frame; J-flag for Jenna. theme.json untouched. */
	--lts-contact-control-h: 2.75rem; /* 44 */
	--lts-contact-textarea-h: 9.6875rem; /* 155 */
	--lts-contact-btn-h: 3.125rem; /* 50 */
	--lts-contact-btn-px: 1.375rem; /* 22 */
	--lts-contact-chevron-w: 0.875rem; /* 14 */
	--lts-contact-chevron-end: 1.625rem; /* 26 */
}

.lts-contact .lts-contact__form .gform_wrapper.gform-theme--orbital {
	/* Controls: shape, colour and type (read by the controls rule below) */
	--gf-ctrl-radius: var(--wp--custom--radius--input);
	--gf-ctrl-textarea-radius: var(--wp--custom--radius--input);
	--gf-ctrl-padding-x: 1.4375rem; /* text at x+23 */
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-bg-color: var(--wp--preset--color--base);
	--gf-ctrl-border-color-hover: var(--wp--preset--color--accent-2);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--accent-2);
	--gf-ctrl-border-color-error: var(--wp--preset--color--error);
	--gf-color-danger: var(--wp--preset--color--error);
	--gf-ctrl-font-family: var(--wp--preset--font-family--body);
	--gf-ctrl-font-size: 1.125rem; /* 18 */
	--gf-ctrl-font-weight: 400;
	--gf-ctrl-line-height: 1.3333; /* 24 */
	--gf-ctrl-color: var(--wp--preset--color--body-ink);

	/* Validation: field message 14 / Medium; summary box tinted from the same token (GF builds
	   these from a "r, g, b" triplet, which a token cannot give, so color-mix replaces it). */
	--gf-ctrl-desc-font-family-error: var(--wp--preset--font-family--body);
	--gf-ctrl-desc-font-size-error: var(--wp--preset--font-size--small);
	--gf-ctrl-desc-font-weight-error: var(
		--wp--custom--typography--weight-medium
	);
	--gf-form-validation-font-family: var(--wp--preset--font-family--body);
	--gf-form-validation-font-size: var(--wp--preset--font-size--medium);
	--gf-form-validation-radius: var(--wp--custom--radius--input);
	--gf-form-validation-bg-color: color-mix(
		in srgb,
		var(--wp--preset--color--error) 5%,
		var(--wp--preset--color--base)
	);
	--gf-form-validation-border-color: var(--wp--preset--color--error);
	--gf-form-validation-heading-icon-bg-color: transparent;
	--gf-form-validation-heading-icon-border-color: var(
		--wp--preset--color--error
	);
	--gf-form-validation-outline-color-focus: var(--lts-focus-ring);

	/* Placeholder: 15 / Medium / 0.13em (uppercase: rule below). Ink is neutral-500: Figma's
	   #ADADAD is 2.2:1, this is 4.7:1 (same call as lts-global.css). */
	--gf-ctrl-placeholder-color: var(--wp--preset--color--neutral-500);
	--gf-ctrl-placeholder-font-family: var(--wp--preset--font-family--heading);
	--gf-ctrl-placeholder-font-size: 0.9375rem;
	--gf-ctrl-placeholder-font-weight: var(
		--wp--custom--typography--weight-medium
	);
	--gf-ctrl-placeholder-letter-spacing: var(
		--wp--custom--typography--tracking-chip
	);

	/* Labels: 15 / 25 Medium +0.13em (colour + uppercase: rule below) */
	--gf-ctrl-label-font-family-primary: var(
		--wp--preset--font-family--heading
	);
	--gf-ctrl-label-font-size-primary: 0.9375rem;
	--gf-ctrl-label-font-weight-primary: var(
		--wp--custom--typography--weight-medium
	);
	--gf-ctrl-label-letter-spacing-primary: var(
		--wp--custom--typography--tracking-chip
	);
	--gf-ctrl-label-line-height-primary: 1.6667; /* 25 */
	--gf-label-space-primary: 0.1875rem; /* 3 */

	/* Rhythm: 18 from a control to the next label, 28 from the last control to the submit */
	--gf-form-gap-y: 1.125rem;
	--gf-form-footer-margin-y-start: 1.75rem;

	/* Submit colours (GF reads these; size, type and padding are real rules below) */
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--contrast);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--surface);
	--gf-ctrl-btn-border-color-primary: var(--wp--preset--color--contrast);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--accent-2);
	--gf-ctrl-btn-border-color-hover-primary: var(
		--wp--preset--color--accent-2
	);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--accent-2);
	--gf-ctrl-btn-border-color-focus-primary: var(
		--wp--preset--color--accent-2
	);
}

/* Controls (2): beats lts-global.css `body :is(input[type=…], select, textarea):not()×4`. */
.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	:is(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="url"],
		input[type="number"],
		select,
		textarea
	) {
	block-size: var(--lts-contact-control-h);
	min-block-size: 0;
	padding-block: 0;
	padding-inline: var(--gf-ctrl-padding-x);
	border: var(--gf-ctrl-border-width) solid var(--wp--preset--color--primary);
	border-radius: var(--gf-ctrl-radius);
	background-color: var(--gf-ctrl-bg-color);
	box-shadow: none;
	color: var(--gf-ctrl-color);
	font-size: var(--gf-ctrl-font-size);
	line-height: var(--gf-ctrl-line-height);
}

.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	textarea.textarea {
	block-size: var(--lts-contact-textarea-h);
	padding-block: 0.8125rem; /* 13: Figma's text box starts 13 below the field top */
}

.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	:is(input, select, textarea):hover {
	border-color: var(--gf-ctrl-border-color-hover);
}

/* Focus: Tide Dark 2px (1px border + 1px shadow) + 3px ring at 2px offset, like the foundation. */
.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	:is(input, select, textarea):focus {
	border-color: var(--gf-ctrl-border-color-focus);
	box-shadow: 0 0 0 1px var(--gf-ctrl-border-color-focus);
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 2px;
}

/* Error: Error Red 2px (1px border + 1px shadow); the ring stays Tide Dark when focused. */
.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	:is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--gf-ctrl-border-color-error);
	box-shadow: 0 0 0 1px var(--gf-ctrl-border-color-error);
}

/* Placeholder + label: GF's own placeholder rule ends in `::placeholder:where(…)`, which is invalid
   after a pseudo-element, so it never matches, and its reset (`color: unset`) turns the placeholder
   Body ink; hence real rules here that read the --gf-ctrl-placeholder-* vars. The label colour is
   pinned to the parent's by the inline style, and there is no variable for case or "(Required)". */
.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital
	.gfield_label {
	color: var(
		--wp--custom--color--small-text
	); /* Tide Dark: Figma's Tide is 3.6:1 */
	text-transform: uppercase;
}

.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital
	:is(input, textarea)::placeholder {
	color: var(--gf-ctrl-placeholder-color);
	font-family: var(--gf-ctrl-placeholder-font-family);
	font-weight: var(--gf-ctrl-placeholder-font-weight);
	text-transform: uppercase;
	opacity: 1;
}

/* "(Required)": hidden ONLY when every field is required and the legend above the form says so
   (inc/contact.php adds .lts-contact__form--all-required). With any optional field the class is
   absent and GF's own indicator shows. The words stay for screen readers either way. */
.lts-contact
	.lts-contact__form--all-required
	.gform_wrapper.gform-theme--orbital
	.gfield_required {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The legend: body-small (14, Body ink, sentence case). The form wrapper's own 24px top margin is cut to 12px under it. Gone once the
   confirmation replaces the form. */
.lts-contact .lts-contact__form .lts-contact__required-note {
	margin: 0;
	color: var(--wp--preset--color--body-ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.lts-contact .lts-contact__form .lts-contact__required-note + .gform_wrapper {
	margin-block-start: 0.75rem;
}

.lts-contact
	.lts-contact__form:has(.gform_confirmation_message)
	.lts-contact__required-note {
	display: none;
}

/* The select shows its empty "I am…" option: dressed like the other placeholders; the open list
   is reset so the placeholder look does not bleed into the choices. */
.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	select:has(option.gf_placeholder:checked) {
	color: var(--gf-ctrl-placeholder-color);
	font-family: var(--gf-ctrl-placeholder-font-family);
	font-size: var(--gf-ctrl-placeholder-font-size);
	font-weight: var(--gf-ctrl-placeholder-font-weight);
	letter-spacing: var(--gf-ctrl-placeholder-letter-spacing);
	text-transform: uppercase;
}

.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital
	select
	option:not(.gf_placeholder) {
	color: var(--gf-ctrl-color);
	font-family: var(--gf-ctrl-font-family);
	font-size: var(--gf-ctrl-font-size);
	font-weight: var(--gf-ctrl-font-weight);
	letter-spacing: normal;
	text-transform: none;
}

/* Select chevron: Tide, 14 wide, 26 from the right edge (Figma 190:4496). GF's own is a
   black data-URI that cannot take a token, so it is dropped and drawn as a masked ::after.
   The text stops 16px short of it (56 = 26 + 14 + 16), so a long option wraps/clips clear of it. */
.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital
	.ginput_container_select {
	position: relative;
}

.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	select.gfield_select {
	/* The parent centres the text with padding from the box; its rule is (0,5,1) and the controls
	   rule above (0,6,1) zeroes padding-block, so it is restated for this box. */
	padding-block: max(
		0px,
		calc(
			(
					var(--lts-contact-control-h) - 2 *
						var(--gf-ctrl-border-width) - 1lh
				) /
				2
		)
	);
	padding-inline-end: calc(
		var(--lts-contact-chevron-end) + var(--lts-contact-chevron-w) + 1rem
	);
	background-image: none;
	text-overflow: ellipsis;
}

.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital
	.ginput_container_select::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--lts-contact-chevron-end);
	inline-size: var(--lts-contact-chevron-w);
	block-size: 0.5rem; /* 8 */
	translate: 0 -50%;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	mask: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	pointer-events: none;
}

/* Forced colors: the chevron is a mask tinted by background-color, which the forced palette
   overrides (it would paint a solid block). Opt out and tint with the system text colour, as the
   parent's accordion.css does for its chevrons. */
@media (forced-colors: active) {
	.lts-contact
		.lts-contact__form
		.gform_wrapper.gform-theme--orbital
		.ginput_container_select::after {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/* Submit: 163 x 50 on the contact vars (real block-size / padding / type, so the form's Input
   Size setting cannot change them). The parent forces 0.2px tracking on this selector (0,6,1);
   the ring is drawn here, like the other controls. */
.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	.gform_footer
	input[type="submit"].button {
	block-size: var(--lts-contact-btn-h);
	min-block-size: var(
		--lts-contact-btn-h
	); /* GF sets min-height from Input Size */
	padding-inline: var(--lts-contact-btn-px);
	font-size: var(--wp--preset--font-size--small); /* 14 */
	letter-spacing: var(--wp--custom--typography--tracking-chip);
	text-transform: uppercase;
}

.lts-contact
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	.gform_footer
	input[type="submit"].button:focus-visible {
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 2px;
}

/* Confirmation (AJAX submit swaps the form for it in place; not drawn): a Clear panel in the
   control shape, 18 / 24 Body ink. The wrapper keeps the orbital classes, so nothing else to undo. */
.lts-contact
	.lts-contact__form
	.gform_confirmation_wrapper
	.gform_confirmation_message {
	padding: 1.25rem 1.4375rem;
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body-ink);
	font-size: 1.125rem; /* 18 */
	line-height: 1.3333; /* 24 */
}

/* Author-facing note (editors only, GF missing): see inc/contact.php. */
.lts-contact .lts-contact__pending {
	margin: 0;
	padding: 1.25rem 1.5rem;
	border: 2px dashed var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--input);
	color: var(--wp--preset--color--body-ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* -- Info cards ------------------------------------------------------------------- */

.lts-contact .lts-contact__cards {
	--lts-contact-card-radius: 18px;
	--lts-contact-card-shadow: 0 4px 8.7px -2px
		color-mix(in srgb, var(--wp--preset--color--contrast) 27%, transparent);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* The three cards are drawn with their own top padding, title-to-text gap and spacing
   (18 / 23 / 28, 3 / 10 / 10, 18 / 23 between): kept as drawn on desktop, uniform when stacked. */
.lts-contact .lts-contact__card {
	--lts-contact-card-top: 1.125rem;
	--lts-contact-card-title-gap: 0.625rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0;
	padding: var(--lts-contact-card-top) clamp(1.5rem, 4.3056vw, 3.875rem)
		1.125rem 2.4375rem; /* text at x+39, 62 right */
	border-radius: var(--lts-contact-card-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--lts-contact-card-shadow);
}

@media (min-width: 960px) {
	.lts-contact .lts-contact__cards {
		gap: 0;
	}

	.lts-contact .lts-contact__card:nth-child(1) {
		--lts-contact-card-title-gap: 0.1875rem;
		min-height: 6.125rem; /* 98 */
	}

	.lts-contact .lts-contact__card:nth-child(2) {
		--lts-contact-card-top: 1.4375rem;
		min-height: 10rem; /* 160 */
		margin-top: 1.125rem;
	}

	.lts-contact .lts-contact__card:nth-child(3) {
		--lts-contact-card-top: 1.75rem;
		min-height: 9.625rem; /* 154 */
		margin-top: 1.4375rem;
	}
}

.lts-contact .lts-contact__card .lts-contact__card-title {
	margin: 0 0 var(--lts-contact-card-title-gap);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.25; /* 30 / 24 */
	text-align: left;
}

.lts-contact .lts-contact__card .lts-contact__card-text {
	margin: 0;
	color: var(--wp--preset--color--body-ink);
	font-weight: 400; /* Halyard Regular; there is no weight-regular token */
	line-height: 1.3; /* 24 / 18.4 */
}

/* Links: Tide Dark + underline come from the foundation (J10; Figma draws brand Tide #008EA5,
   3.6:1, which fails AA). Only wrapping is set here (an email address must not overflow). */
.lts-contact .lts-contact__card a {
	overflow-wrap: anywhere;
}

/* -- No form for visitors (GF missing): the cards stand alone, centred ---------------- */

.lts-contact .lts-contact__inner:has(> .lts-contact__form.is-empty) {
	grid-template-columns: minmax(0, 32.1875rem); /* 515 */
	justify-content: center;
}

.lts-contact .lts-contact__form.is-empty {
	display: none;
}

/* Same result without :has() support: the cards span the grid and centre at 515. */
.lts-contact .lts-contact__form.is-empty + .lts-contact__cards {
	grid-column: 1 / -1;
	justify-self: center;
	inline-size: min(100%, 32.1875rem);
}

/* -- Stacked (derived): form first, then the cards ---------------------------------- */

@media (max-width: 959.98px) {
	.lts-contact .lts-contact__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.5rem;
	}

	.lts-contact .lts-contact__card {
		--lts-contact-card-top: 1.5rem;
		--lts-contact-card-title-gap: 0.5rem;
		padding-block-end: 1.5rem;
	}
}

@media (max-width: 781.98px) {
	.lts-contact.alignfull {
		padding-block: 3rem;
	}

	.lts-contact .lts-contact__card {
		padding-inline: 1.5rem;
	}
}