/**
 * Homepage contact section (template-parts/home/contact.php, from node
 * 197:904). Drift corrections: Plex Sans on the checkbox label (node Inter)
 * and tokens instead of the rogue #111827 / #e5e7eb.
 */

.contact {
	padding-bottom: var(--section-pad-y);
}

/* The node's separator: a full container-width rule above the section,
   with the standard section gap below it. */
.contact .container {
	border-top: 1px solid var(--color-border-subtle);
	padding-top: var(--section-pad-y);
}

.contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.contact__info > .eyebrow {
	margin-bottom: 32px;
}

/* Copy-tuned: wrap falls after "about" with the current EN headline.
   Measured bracket 260px ("Tell us about") to 360px ("... your") shaped in
   Archivo 700 at 40px; 312px sits mid-bracket. Revisit for SK. */
.contact__headline {
	max-width: 19.5rem; /* 312px */
}

.contact__text {
	margin-top: 32px;
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-body-text);
}

.contact__features {
	margin-top: 64px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact__feature-label {
	color: var(--color-text-secondary);
}

.contact__feature-value {
	display: inline-block;
	margin-top: 6px;
	font-size: 1rem; /* 16px body */
	line-height: normal;
	font-weight: 400;
	color: var(--color-heading-text); /* the node's #111827 is drift */
	text-decoration: none;
}

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

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-form__row {
	display: grid;
	gap: 20px;
}

.contact-form__row--2 {
	grid-template-columns: 1fr 1fr;
}

.contact-form__row--3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.contact-form__label {
	font-size: 0.8125rem; /* 13px */
	line-height: normal;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-form-label-text);
}

.contact-form__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--color-input-border);
	border-radius: 0;
	background-color: var(--color-input-bg);
	font-size: 1rem; /* 16px */
	line-height: normal;
	font-weight: 400;
	color: var(--color-input-text);
	transition: border-color 150ms ease;
}

.contact-form__input::placeholder {
	color: var(--color-input-placeholder);
	opacity: 1;
}

.contact-form__input:hover {
	border-color: var(--color-input-border-hover);
}

/* THE ONE :focus EXCEPTION IN THE THEME (deliberate, per spec): a field has
   to show it is live the moment you click into it, so this is plain :focus
   rather than :focus-visible.

   The outline is replaced, never removed. A text input matches
   :focus-visible whenever it is focused, by any means, because the browser
   knows you are about to type; the shared ring would therefore appear on
   click too, which is exactly the default look we are avoiding. Instead the
   accent edge IS the indicator in both cases: the box-shadow doubles the
   1px border to a 2px accent edge without the layout shift a wider border
   would cause, and it reads as a designed state rather than a UA ring. */
.contact-form__input:focus {
	border-color: var(--color-input-border-focus);
	box-shadow: 0 0 0 1px var(--color-input-border-focus);
	outline: none;
}

.contact-form__input--textarea {
	height: 120px;
	resize: vertical;
}

.contact-form__input[aria-invalid="true"] {
	border-color: var(--color-accent);
}

/* Error color: accent per spec proposal (it doubles as the brand's alarm
   tone; flag if a dedicated error red should become a token). */
.contact-form__error {
	font-size: 0.8125rem; /* 13px */
	line-height: normal;
	font-weight: 500;
	color: var(--color-accent);
}

/* Consent: Plex Sans 16px (the node's Inter is drift), custom square. */
.contact-form__consent {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1rem; /* 16px */
	line-height: normal;
	color: var(--color-heading-text);
	cursor: pointer;
}

.contact-form__consent input {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	border: 0;
	border-radius: 6px;
	background-color: var(--color-border-subtle); /* the node's #e5e7eb is drift */
	cursor: pointer;
	transition: background-color 150ms ease;
}

.contact-form__consent input:checked {
	background-color: var(--color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.1 13.4L4.9 10.2L6 9.1L8.1 11.2L14 5.3L15.1 6.4L8.1 13.4Z' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px;
}

/* Privacy policy link. Sits under the consent label, indented to the label
   text so it reads as belonging to it, and outside the label element so it
   does not compete with the checkbox for the click. */
.contact-form__consent-link {
	margin-top: 8px;
	margin-left: 32px; /* checkbox width + the label's 12px gap */
	font-size: 0.875rem; /* 14px */
	line-height: normal;
}

.contact-form__consent-link a {
	color: var(--color-link-text);
	text-decoration: underline;
	transition: color 150ms ease;
}

.contact-form__consent-link a:hover,
.contact-form__consent-link a:focus-visible {
	color: var(--color-link-text-hover);
}

.contact-form__submit {
	width: 100%;
	justify-content: space-between;
}

/* Honeypot: visually removed, still in the form for bots. */
.contact-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.contact-form__noscript {
	margin-bottom: 20px;
	font-size: 0.875rem;
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * Responsive (<=1024): left column first, form below, single-column rows
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.contact__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.contact__text {
		margin-top: 24px;
	}

	.contact-form__row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Full-width fields and submit; the button already spans the form. */
	.contact-form__field {
		width: 100%;
	}

	/* 44px targets on the consent control and the legal links inside it. */
	.contact-form__consent {
		min-height: 44px;
	}
}

/* Phone and email are inline text links; give them a real target. */
@media (max-width: 1024px) {
	.contact__feature-value {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Left, not centred. Scoped to the contact page ON PURPOSE:
	   .section-header--center is shared with the documents table and the
	   services inspection ruler, and neither was asked for. The eyebrow is a
	   flex row for its slash, so its justification has to move too, and the
	   heading's auto margins have to go or it stays centred inside its own
	   max-width. */
	.contact--page .section-header--center {
		text-align: left;
	}

	.contact--page .section-header--center .eyebrow {
		justify-content: flex-start;
	}

	.contact--page .section-header--center h1 {
		margin-inline: 0;
	}
}

/* The separator above divides this section from the one before it. On the
   contact PAGE it is the first section in main, so there is nothing above to
   divide from and the rule reads as a stray line under the header. The
   container's padding-top stays: that is what gives the section its top
   spacing, and it matches every other first section. */
.contact--page .container {
	border-top: 0;
}

/* --------------------------------------------------------------------
 * Contact PAGE variant (template-parts/contact/contact-section.php)
 *
 * Three stacked parts in one section: a centred header, a row of detail
 * items, then the map and the form as equal columns. Only the differences
 * from the homepage section live here; everything the two share is above.
 *
 * Spacing derives from existing components rather than being chosen: the
 * 32px chip-to-text gap is .wd-box's gap, and the 16px between items is the
 * deliver carousel's --wd-gap. That property is scoped to .services--deliver
 * so it cannot be inherited here, but the value is the same rhythm.
 * -------------------------------------------------------------------- */

/* The separator above divides this section from the one before it. On the
   contact PAGE it is the first section in main, so there is nothing above to
   divide from and the rule reads as a stray line under the header. The
   container's padding-top stays: that is what gives the section its top
   spacing, and it matches every other first section. */
.contact--page .container {
	border-top: 0;
}

/* The page's h1, not the homepage's copy-tuned h2, so it takes its own
   measure rather than a wrap tuned for different words. */
.contact--page .contact__headline {
	max-width: none;
}

/* --------------------------------------------------------------------
 * B. The detail row
 *
 * THREE EQUAL TRACKS, each item left-aligned in its own.
 *
 * The three items are 207, 216 and 175 wide, so sizing them to their content
 * and spacing them apart starts each one at an irregular position - the row
 * loses its vertical rhythm and the whitespace reads as accidental. On equal
 * thirds every item begins on a regular column line, and the space left inside
 * a track is COLUMN STRUCTURE rather than trailing air. That is the same
 * reading the social-proof stat strip and the deliver table already take, and
 * it is why a 426px track holding 207px of content is not the same thing as a
 * 426px box holding 207px of content.
 *
 * minmax(0, 1fr) rather than 1fr: an auto minimum is what let the documents
 * card be sized by its longest child and overflow its grid.
 * -------------------------------------------------------------------- */

.contact__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px; /* the deliver carousel's --wd-gap */
	margin-top: 64px;
	font-style: normal; /* <address> italicises by default */
}

.contact__item {
	display: flex;
	align-items: flex-start;
	gap: 32px; /* .wd-box gap: chip to text */
	min-width: 0;
}

/* Below the switch the boxes stack, so the 16px that read as a gutter between
   two boxes on a row now reads as the space between one box and the next down
   the page, and it is too tight. 32px is the item's own chip-to-text gap
   directly above, so the block is spaced by a measure it already contains.

   Declared HERE rather than in the earlier 1024 block because the base rule
   above would otherwise win on source order: a media query adds no
   specificity, so a later plain rule beats an earlier wrapped one. */
@media (max-width: 1024px) {
	.contact__items {
		gap: 32px;
	}
}

/* ONE track below 767, and the track COUNT is what removes the 2 + 1 break -
   not the item sizing. A declared count cannot wrap, so no width can produce
   an arrangement that was never declared.
 *
 * Why 767 and not lower, measured rather than assumed: at 768 three tracks are
 * 224px each and every value still sits on one line. Forcing three tracks
 * further down, the telephone number breaks across two lines at 742px and
 * below - .contact__item-value carries overflow-wrap: anywhere, so it breaks
 * mid-number rather than refusing, and a phone number split over two lines is
 * a number that cannot be read off the screen. 767 is the nearest breakpoint
 * the site already uses above that 742 threshold.
 *
 * Two tracks were not considered as a middle step: they would leave one item
 * alone on a second row beside two half-width ones, which is the 2 + 1
 * arrangement wearing a different hat. One track degrades the row to a list,
 * which is a shape rather than a leftover.
 *
 * 767 is the site's secondary breakpoint, and the convention is that it is
 * used only where something genuinely breaks. A broken phone number qualifies.
 *
 * After the 1024 block for the reason that one gives: a media query adds no
 * specificity, so source order is what decides. */
@media (max-width: 767px) {
	.contact__items {
		grid-template-columns: 1fr;
	}
}

/* The chip is the only box here: the item carries no surface of its own. */
.contact__item-icon {
	--icon-chip-glyph: var(--color-heading-text);
}

.contact__item-icon .icon-chip__glyph {
	width: 28px;
	height: 28px;
}

.contact__item-body {
	min-width: 0;
}

.contact__item-label {
	margin-bottom: 8px;
	color: var(--color-text-tertiary);
}

.contact__item-value {
	font-size: var(--type-card-body-size);
	line-height: 1.5;
	font-weight: var(--type-card-body-weight);
	color: var(--color-heading-text);
	overflow-wrap: anywhere;
}

.contact__item-value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--color-border-subtle);
	transition: color 150ms ease, border-color 150ms ease;
}

.contact__item-value a:hover,
.contact__item-value a:focus-visible {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* --------------------------------------------------------------------
 * C. Map and form, 50/50 and equal height
 *
 * The grid gap is ZERO: the form column's own 64px left padding is the gap.
 * Its right padding is zero because that edge faces the container line, and
 * a container-facing edge is never padded. stretch is the grid default and is
 * named here because it is the point: the form sets the row height and the
 * map grows to it.
 * -------------------------------------------------------------------- */

.contact__panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
	margin-top: 64px;
}

.contact__map {
	min-width: 0;
	border-radius: 6px;
	overflow: hidden;
}

/* Fills the column, whose height is the stretched row. */
.contact-map__frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	border: 0;
}

.contact__form-col {
	/* 32 top, 0 right, 32 bottom, 64 left. The left padding IS the column
	   gap; the right edge is the container line and takes nothing. */
	padding: 32px 0 32px 64px;
	/* A grid item's min-width is auto, so without this a wide input can push
	   the column past its track instead of shrinking. */
	min-width: 0;
}

/* --------------------------------------------------------------------
 * Below 1024: the panels stack, map first
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.contact__items {
		margin-top: 48px;
	}

	.contact__panels {
		grid-template-columns: 1fr;
		margin-top: 48px;
	}

	.contact__map {
		/* Nothing beside it to match now, so it needs a height of its own.
		   A floor derived from the container width, never aspect-ratio. */
		min-height: calc((100vw - 2 * var(--container-pad)) * 0.75);
	}

	.contact__form-col {
		/* The left padding was the column gap and there is no column beside
		   it any more; both horizontal edges now face the container. */
		padding: 32px 0 0;
	}
}

/* --------------------------------------------------------------------
 * Application block: copy left, form right
 *
 * ONE rule for both placements. The careers page and the job detail band
 * render the same component, so the layout is expressed here once rather than
 * per placement - a copy in each would be two things to keep in step.
 *
 * The split and the gap are the contact page's map-and-form section, taken
 * rather than picked: .contact__panels is 1fr 1fr, and its 64px comes from
 * .contact__form-col's left padding, which that rule's own comment calls the
 * column gap. Expressed here as a real gap because neither column is against
 * the container line.
 *
 * Stacking it above the form was what made the job apply block 920px tall with
 * half of it empty, and the careers block bottom-heavy against one card.
 * -------------------------------------------------------------------- */

/* 164px is the hero's content gap, an existing site value rather than a new
   one. Top-aligned deliberately: the copy column carries phone and email under
   the heading now, so it has real content and centring it against the form
   would be solving a problem that no longer exists. */
.application-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 164px;
	align-items: start;
}

.application-block__copy {
	min-width: 0;
}

/* A grid item's min-width is auto, so without this a wide input pushes the
   column past its track instead of shrinking. Same reason .contact__form-col
   carries it. */
.application-block__form {
	min-width: 0;
}

/* White fields on the grey box, the relationship the metadata badges already
   have to the cards. Here rather than per placement: both placements are the
   same grey now, and this was two identical rules in two stylesheets. */
.application-block .contact-form__input {
	background-color: var(--color-surface-white);
}

@media (max-width: 1024px) {
	.application-block {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* --------------------------------------------------------------------
 * The file control
 *
 * Shaped as one more field, so it reads as part of the form rather than as a
 * foreign object, and so it needs no separate treatment per placement: it is
 * the same white plate the text inputs already are.
 *
 * The real input is inside this label and .sr-only, which is why the focus
 * ring is drawn with :focus-within - the element taking focus is invisible,
 * and a keyboard user has to see the control it belongs to.
 * -------------------------------------------------------------------- */

.contact-form__file {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	min-height: 48px;
	background-color: var(--color-surface-white);
	cursor: pointer;
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	color: var(--color-body-text);
}

.contact-form__file:focus-within {
	outline: 2px solid var(--focus-ring, var(--color-accent));
	outline-offset: 2px;
}

/* The filename can be long; the affordance beside it must not be pushed out. */
.contact-form__file-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-text-secondary);
}

.contact-form__file-action {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-accent);
}