/**
 * Contact page — details beside the form.
 *
 * WHAT WAS WRONG
 *
 * One 800px column, everything centred: heading, lede, address, a phone button,
 * another heading, then the form. Six centred blocks in a stack, so the two things
 * a visitor actually came for — the number to ring and the box to type in — were
 * separated by a screen of centred text and neither looked more important than the
 * "Reach out to us" line between them.
 *
 * Now: the ways to reach us in a panel on the left, the form on the right. Both
 * are visible at once, and someone who would rather call never has to scroll past
 * a form to find the number.
 *
 * THE FORM MAY NOT EXIST. Forminator is a site plugin, not a theme dependency, and
 * the pattern ships with no form ID. contact.php only emits the form block when it
 * finds a published Forminator form — see the note there. This file therefore has
 * to look right with the right-hand column empty, which is why the panel carries
 * its own fill rather than relying on the form for visual balance.
 */

.pd-contact__split {
	display: grid;

	/* Form wider than the details: the panel holds an address and a phone number,
	   the form holds labelled inputs that get cramped below ~380px. */
	grid-template-columns: 1fr 1.25fr;
	gap: var( --wp--preset--spacing--50 );
	align-items: start;
}

.pd-contact__split > .pd-contact__details,
.pd-contact__split > .pd-contact__form {
	/* Kill core's flow-layout block margin — the grid gap owns spacing. */
	margin-top: 0;
}

/**
 * No form, no empty column.
 *
 * When contact.php finds no Forminator form it emits the details panel alone. In
 * a two-column grid that leaves the panel stranded at half width with a screen of
 * dead space beside it, which looks like something failed to load — the exact
 * impression the lookup exists to avoid. :has() is what lets the layout respond
 * to its own child count; browsers without it fall back to the two-column rule,
 * which is the pre-existing behaviour rather than a break.
 */
.pd-contact__split:has( > :only-child ) {
	grid-template-columns: min( 520px, 100% );
	justify-content: center;
}

h3.pd-contact__form-title {
	margin: 0 0 1.25rem;
	font-size: 1.375rem;
	line-height: 1.3;
}

.pd-contact__split > .pd-contact__details {
	padding: 1.75rem;
	border-radius: 14px;

	/* The gold edge used by the sampling spec panel, marking this as reference
	   information rather than another block of prose. */
	border-left: 4px solid var( --wp--preset--color--gold );
	background-color: var( --wp--preset--color--cream );
}

/* Tag-qualified: theme.json sets `:root :where(h3) { font-size: large }` at
   (0,1,0), which a lone class would only tie. */
h3.pd-contact__label {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.6;
}

.pd-contact__details > .pd-contact__label ~ .pd-contact__label {
	margin-top: 1.6rem;
}

.pd-contact__details > .pd-contact__address {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.pd-contact__details > .pd-contact__phone {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}

/**
 * (0,1,1) beats theme.json's `:root :where(a:where(:not(.wp-element-button)))` at
 * (0,1,0). Primary blue is fine on cream, but the number should read as the
 * heading-weight element it is rather than as body-copy link.
 */
.pd-contact__phone a {
	color: var( --wp--preset--color--primary-darker );
	text-decoration: none;
}

.pd-contact__phone a:hover,
.pd-contact__phone a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/**
 * Forminator's own stylesheet owns the fields themselves. These are the few
 * things worth nudging so the form sits in this theme rather than beside it:
 * the submit button picks up the site button, and the whole form gets the
 * measure of the column instead of running to whatever width the plugin wants.
 */
.pd-contact__form .forminator-ui {
	max-width: 100%;
}

.pd-contact__form .forminator-button-submit {
	border-radius: 4px;
	font-weight: 600;
}

@media ( max-width: 860px ) {
	.pd-contact__split {
		grid-template-columns: 1fr;
	}
}

/**
 * Directions link.
 *
 * Sits under the address rather than under the map, because that is where
 * someone reading an address is already looking. Styled as an action rather than
 * a body link — it is the second thing this panel is for, after the number.
 */
.pd-contact__details > .pd-contact__directions {
	margin: 0.6rem 0 0;
}

.pd-contact__directions a {
	color: var( --wp--preset--color--primary-darker );
	font-weight: 700;
	text-decoration: none;
}

/* Arrow in CSS so the label stays exactly "Get directions". */
.pd-contact__directions a::after {
	content: " \2192";
}

.pd-contact__directions a:hover,
.pd-contact__directions a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/**
 * The map, inside the details panel.
 *
 * It started as a full-width band under both columns, on the reasoning that a
 * map in the panel would be too small to recognise a junction in. At the panel's
 * real width — around 440px on a desktop — that turned out to be wrong: it is a
 * usable map, and it belongs with the address rather than a scroll away from it.
 * The panel also stops being noticeably shorter than the form beside it.
 *
 * The radius is 10px against the panel's 14px: a rounded box inside a rounded
 * box wants the smaller radius, or the corners read as concentric rings.
 *
 * The aspect ratio is set here and the iframe fills it, so the space is reserved
 * before Google answers — an iframe with no height collapses to nothing and then
 * shoves everything below it down when it loads.
 */
.pd-contact__details > .pd-contact__map {
	/* Closer than the gap between the labelled blocks above it: "Get directions"
	   now sits directly on top of the map and reads as its action. */
	margin-top: 0.9rem;
	border-radius: 10px;

	/* Clips Google's square corners to the radius. */
	overflow: hidden;

	/* Shows while the iframe is still loading, instead of a white gap. */
	background-color: var( --wp--preset--color--base );

	aspect-ratio: 4 / 3;
}

.pd-contact__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/**
 * Stacked, the panel is full width, so a 4:3 map becomes a tall block between
 * the phone number and the form. Wider and shorter keeps the form in reach.
 */
@media ( max-width: 860px ) {
	.pd-contact__details > .pd-contact__map {
		aspect-ratio: 16 / 9;
	}
}
}