/*
zprime contact page, below the fold — the details and form band, and the map.
The title band above them is in css/critical-contact.css and is inlined; do not
look for it here. Loaded only on this page, after style.css.
*/

/* --zp-arrow, the design system's call-to-action arrow, is defined in style.css so
every page that needs it shares one copy. */

/*--------------------------------------------------------------
# Details and form
--------------------------------------------------------------*/

/* Tracks are the design's own — 519 : 953 of the 1536px row at 1728 — as fr, so
the ratio holds at every width. The form is CF7's own element: it is already
there, so no wrapper is added to make a grid item of it. */
.contact {
	display: grid;
	grid-template-columns: 519fr 953fr;
	align-items: start;
	column-gap: max(1.5rem, 3.7037vw); /* 64px at 1728 */
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 5.787vw); /* 100px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

/* Without this a long line in either column pushes the grid wider than the page
rather than wrapping — min-width on a grid item defaults to auto, not zero. */
.contact > * {
	min-width: 0;
}

.contact .wpcf7-spinner {
	display: none;
}
/* Label and value are siblings, not four wrapped pairs: the hairline and its
gap belong to the label, and the space between blocks is that label's own top
margin. Eight flat children instead of four groups of two. */
.contact__label {
	margin: max(1.5rem, 2.4884vw) 0 0; /* 43px at 1728 */
	padding-top: max(0.75rem, 1.2731vw); /* 22px at 1728 */
	border-top: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--muted);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	line-height: 1;
	letter-spacing: 0.05em;
}

.contact__label:first-child {
	margin-top: 0;
}

/* Open Sans unstretched, as drawn. The lines sit in one paragraph, so the
leading is the line-height rather than margins that would have to agree: 33px is
the design's 27px leading plus the 6px it puts between the lines. */
.contact__value {
	margin: max(0.5rem, 0.6944vw) 0 0; /* 12px at 1728 */
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1.8333;
	text-transform: uppercase;
}

/* Drawn as plain text in the design; the underline is kept for the hover so the
link is still discoverable without colour alone carrying it. */
.contact__value a {
	color: inherit;
	text-decoration: none;
}

.contact__value a:hover,
.contact__value a:focus-visible {
	text-decoration: underline;
}

/* The white plate. Padding goes here rather than on .cform so CF7's response
output, which is a sibling of it inside the form, sits inside the plate too. */
.contact .wpcf7 {
	padding: max(1.25rem, 3.6458vw); /* 63px at 1728 */
	background-color: var(--wp--preset--color--base);
}

.contact .wpcf7-form {
	margin: 0;
}

/*--------------------------------------------------------------
# The form
--------------------------------------------------------------*/

/* Two columns with the message, consent and submit spanning both — one grid,
no row wrappers. */
.cform {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: max(1rem, 2.3148vw); /* 40px at 1728 */
	row-gap: max(1.5rem, 2.1412vw); /* 37px at 1728 */
}

.cform__field {
	margin: 0;
	min-width: 0;
}

.cform__field--wide,
.cform__consent,
.cform__submit {
	grid-column: 1 / -1;
}

.cform__label {
	display: block;
	color: var(--wp--preset--color--faint);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* CF7 wraps every control in a span, so the span is the child of the field and
the control is not — sizing the control alone would leave the span at its own
intrinsic width. */
.cform .wpcf7-form-control-wrap {
	display: block;
}

/* One rule for all five controls: they are drawn identically in the design, and
the value is set in the unstretched face at the size the design shows. No
text-transform — what the visitor types is what is displayed. */
.cform__field input,
.cform__field textarea {
	display: block;
	width: 100%;
	margin-top: max(0.75rem, 1.2731vw); /* 22px at 1728 */
	padding: 0 0 max(0.375rem, 0.5787vw); /* 10px at 1728 */
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1.5;
}

.cform__field textarea {
	height: max(6rem, 6.0185vw); /* 104px at 1728 */
	resize: vertical;
}

.cform__field input:focus-visible,
.cform__field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Validation messages are left to Contact Form 7's own stylesheet — nothing here
touches .wpcf7-not-valid-tip or the invalid state.

Consent. CF7 supplies the wrapping label, so the checkbox and its text are
already one control — the row only has to lay them out. */
.cform__consent {
	margin: 0;
	color: var(--wp--preset--color--faint);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cform__consent label {
	display: flex;
	align-items: flex-start;
	gap: max(0.5rem, 0.6944vw); /* 12px at 1728 */
	cursor: pointer;
}

/* Square, in the theme's ink, and stopped from shrinking under the text beside
it. accent-color styles the checked state without redrawing the control, which
keeps the platform's own focus and high-contrast handling. */
.cform__consent input[type="checkbox"] {
	flex: none;
	width: max(0.875rem, 0.9259vw); /* 16px at 1728 */
	height: max(0.875rem, 0.9259vw);
	margin: 0;
	accent-color: var(--wp--preset--color--contrast);
}

.cform__consent a {
	color: inherit;
	text-decoration: underline;
}

/* An input cannot carry a pseudo-element, so the arrow hangs off the row and the
gap is the design's 40px. */
.cform__submit {
	display: flex;
	align-items: center;
	gap: max(0.75rem, 1.3889vw); /* 24px at 1728 */
	margin: max(1.5rem, 2.0255vw) 0 0; /* 35px at 1728 */
}

.cform__submit .wpcf7-submit {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.cform__submit::after {
	content: "";
	flex: none;
	width: max(2rem, 2.8935vw); /* 50px at 1728 */
	aspect-ratio: 75 / 42;
	background-color: currentcolor;
	color: var(--wp--preset--color--muted);
	mask-image: var(--zp-arrow);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: transform var(--zp-motion);
}

/* The 6px nudge the design system specifies for call-to-action arrows. Driven
from the button, since the arrow is not part of it. */
.cform__submit:has(.wpcf7-submit:hover)::after,
.cform__submit:has(.wpcf7-submit:focus-visible)::after {
	transform: translateX(max(6px, 0.3472vw));
}

/*--------------------------------------------------------------
# Map
--------------------------------------------------------------*/

.findus {
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 5.787vw); /* 100px at 1728 */
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--muted);
}

/* The rule under the heading is its own border, padded off it by the design's
34px — a divider element would be one more node for a line CSS already draws. */
.findus__title {
	margin: 0;
	padding-bottom: max(1rem, 1.9676vw); /* 34px at 1728 */
	border-bottom: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--muted);
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.354; /* 67.7px at 50px */
	letter-spacing: 0.02em;
}

.findus__map {
	position: relative;
	margin-top: max(1rem, 1.9676vw); /* 34px at 1728 */
	border: 1px solid var(--wp--preset--color--ink);
}

/* The width and height attributes give the ratio, so the box is the right shape
before the map loads and nothing shifts when it does. */
.findus__map iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1536 / 670;
	border: 0;
}

.findus__card {
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: max(18rem, 37.3843vw); /* 646px at 1728 */
	padding: max(1rem, 1.5625vw) max(1.25rem, 2.4884vw); /* 27px / 43px at 1728 */
	background-color: var(--wp--preset--color--base);
}

.findus__label {
	margin: 0;
	color: var(--wp--preset--color--faint);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Sentence case here, unlike the same address in the column beside the form. */
.findus__address {
	margin: max(0.5rem, 0.6944vw) 0 0; /* 12px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

/* The design's 12px gap plus the 15px it pads the link row by. */
.findus__directions {
	margin: max(1rem, 1.5625vw) 0 0; /* 27px at 1728 */
}

.findus__directions a {
	display: inline-flex;
	align-items: center;
	gap: max(1rem, 2.3148vw); /* 40px at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.findus__directions a::after {
	content: "";
	flex: none;
	width: max(2rem, 2.8935vw); /* 50px at 1728 */
	aspect-ratio: 75 / 42;
	background-color: currentcolor;
	mask-image: var(--zp-arrow);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: transform var(--zp-motion);
}

.findus__directions a:hover::after,
.findus__directions a:focus-visible::after {
	transform: translateX(max(6px, 0.3472vw));
}

/*--------------------------------------------------------------
# Narrow
--------------------------------------------------------------*/

@media (max-width: 998px) {

	.contact {
		grid-template-columns: 1fr;
		row-gap: 2rem;
	}

	/* Over the map the card would cover most of it once the plate is this
	narrow, so it drops below and the border carries on around both. */
	.findus__card {
		position: static;
		max-width: none;
		border-top: 1px solid var(--wp--preset--color--ink);
	}
}

@media (max-width: 479px) {

	.cform {
		grid-template-columns: 1fr;
	}

	.cform__submit {
		flex-wrap: wrap;
	}
}