.zerodigital-contact {
	padding: clamp(var(--wp--preset--spacing--lg, 2rem), 4vw, var(--wp--preset--spacing--2xl, 4rem)) var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem));
}

/* The section is the band — its width follows the block's alignment, and any
 * background runs across it. The content column sits on one edge site-wide
 * (--zd-content-max, the header's edge) whatever that alignment is. */
.zerodigital-contact__container {
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	margin-inline: auto;
}

.zerodigital-contact__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--zd-step-h2, clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem));
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}

.zerodigital-contact__intro {
	max-width: 60ch;
	margin: 0 0 var(--wp--preset--spacing--lg, 2rem);
}

.zerodigital-contact__inner {
	display: grid;
	gap: var(--wp--preset--spacing--lg, 2.5rem);
	grid-template-columns: 1fr;
}

.zerodigital-contact--form-map .zerodigital-contact__inner,
.zerodigital-contact--form-details .zerodigital-contact__inner {
	grid-template-columns: 1.2fr 1fr;
	align-items: start;
}

/* --------------------------------------------------------------------------
 * Form + rich text.
 *
 * The copy column comes FIRST in the markup here, where the map and the
 * details list both come second. That is deliberate: a map and a contact list
 * are companions to the form, but prose is the thing that persuades someone to
 * fill the form in, so it should be read first — on mobile, where the two
 * stack, and on desktop, where they sit side by side.
 *
 * Which is why there is no `order` here. Putting the form first in the markup
 * and flipping it visually would leave the form ahead of the copy in the tab
 * sequence while sitting below it on screen, so a keyboard user would land in
 * the fields before reading what they are for (WCAG 2.4.3 Focus Order). Source
 * order gives the mobile requirement for free and the columns follow it.
 *
 * The form keeps the wider column, as it does in the other two variants — the
 * ratio is mirrored rather than reused, because the form has moved to the
 * right.
 * ------------------------------------------------------------------------ */
.zerodigital-contact--form-richtext .zerodigital-contact__inner {
	grid-template-columns: 1fr 1.2fr;
	align-items: start;

	/* Wider than the gap the other variants share. Two columns of running text
	 * and form fields need more air between them than a column of text and a
	 * map does — measured at 1280px, the shared 2.5rem read as one block split
	 * by a seam rather than as two things side by side. Clamped so it falls
	 * back to the shared value on a phone, where it is a vertical gap between
	 * stacked content and 2.5rem is already right. */
	gap: clamp(var(--wp--preset--spacing--lg, 2.5rem), 5vw, 5rem);
}

/* In this variant the heading and intro are inside the copy column, not a
 * full-width lede above it (see render.php). That changes what they are: the
 * intro is no longer a standalone paragraph that needs its own reading-width
 * cap — the column already imposes one — and it now runs directly into the
 * rich text below, so it sits closer to it than a section lede would. */
.zerodigital-contact--form-richtext .zerodigital-contact__intro {
	max-width: none;
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

.zerodigital-contact__richtext {
	line-height: 1.65;
}

/* The editor's first and last paragraph carry their own margins, which would
 * otherwise push the copy out of line with the top of the form beside it. */
.zerodigital-contact__richtext > :first-child {
	margin-top: 0;
}

.zerodigital-contact__richtext > :last-child {
	margin-bottom: 0;
}

.zerodigital-contact__map iframe {
	width: 100%;
	height: 320px;
	border: 0;
	border-radius: var(--zd-media-radius, var(--wp--custom--radius--lg, 0.75rem));
}

/* --------------------------------------------------------------------------
 * Contact details.
 *
 * These used to sit in a tinted card as three undifferentiated lines of link
 * text: the phone number, the thing most people came for, looked exactly like
 * the email beneath it, and the hours were a block of monospace with no label.
 *
 * The panel is gone. A tinted box around a short list added weight without
 * adding structure, and next to a form it read as a second, emptier form. The
 * hierarchy now does that work — one action, then the reference information
 * under it, each line led by an icon so the eye can find the address without
 * reading.
 * ------------------------------------------------------------------------ */
.zerodigital-contact__details {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md, 1.5rem);
	align-items: flex-start;
}

/* The call CTA. Filled and pill-shaped so it reads as the primary action in
 * this column, borrowing the submit button's own sizing tokens so the two agree
 * across the page rather than each inventing a height. */
.zerodigital-contact__call {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--zd-btn-min-h, 2.875rem);
	padding: 0.85rem 1.6rem;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	text-decoration: none;
	color: var(--wp--preset--color--background, #fff);
	background: var(--wp--preset--color--primary, #0e4b52);
	border-radius: var(--zd-btn-radius, var(--wp--custom--radius--md, 0.5rem));
	box-shadow: var(--zd-shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.1));
	transition: background-color var(--zd-ease, 180ms ease), transform var(--zd-ease, 180ms ease), box-shadow var(--zd-ease, 180ms ease);
}

/* The button colours are restated inside the details column at (0,2,0). A child
 * theme styling `.zerodigital-contact__details a` — a reasonable rule for the
 * email link — is (0,1,1), and outranked the button's own (0,1,0): the filled
 * button got the link's dark text on its dark fill. */
.zerodigital-contact__details .zerodigital-contact__call {
	color: var(--wp--preset--color--background, #fff);
	background: var(--wp--preset--color--primary, #0e4b52);
}

.zerodigital-contact__call:hover,
.zerodigital-contact__details .zerodigital-contact__call:not(.zerodigital-contact__call--secondary):hover {
	background: var(--wp--preset--color--secondary, #0a3339);
	color: var(--wp--preset--color--background, #fff);
	transform: translateY(-1px);
	box-shadow: var(--zd-shadow-md, 0 4px 8px -2px rgba(16, 24, 40, 0.1));
	text-decoration: none;
}

.zerodigital-contact__call:focus-visible {
	outline: 2px solid var(--zd-accent, var(--wp--preset--color--accent, #c4263c));
	outline-offset: 2px;
}

.zerodigital-contact__call-icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

.zerodigital-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm, 1rem);
}

/* Icon in its own column so wrapped lines stay aligned to the text, not to the
 * icon — the difference between a list and a paragraph with a picture on it. */
.zerodigital-contact__item {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: 0.75rem;
	align-items: start;
}

.zerodigital-contact__item-icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	color: var(--wp--preset--color--primary, #0e4b52);
	flex: none;
}

.zerodigital-contact__item p,
.zerodigital-contact__item address {
	margin: 0;
}

/* Address parts are given one per line by the template; honouring the newlines
 * avoids <br> soup and keeps the markup a single readable string. */
.zerodigital-contact__address {
	font-style: normal;
	white-space: pre-line;
}

.zerodigital-contact__label {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--foreground, #16181b);
}

.zerodigital-contact__hours {
	white-space: pre-line;
}

/* The second number: the same control, outlined, so the first stays the obvious
 * call to make. */
.zerodigital-contact__details .zerodigital-contact__call--secondary {
	margin-top: calc(-1 * var(--wp--preset--spacing--xs, 0.75rem));
	color: var(--wp--preset--color--primary, #0e4b52);
	background: transparent;
	/* The outline is the whole difference between this and a text link, so it
	 * is held at (0,2,0) too: a child theme's `box-shadow: none` on the call
	 * button, meant for the filled one's drop shadow, took it away. */
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.zerodigital-contact__details .zerodigital-contact__call--secondary:hover {
	color: var(--wp--preset--color--background, #fff);
	background: var(--wp--preset--color--primary, #0e4b52);
	box-shadow: none;
}

/* Lede in the form card: the label, heading and intro move inside a bordered
 * card with the form, so the form column starts at the same height as the
 * details beside it instead of below a section-wide lede. */
.zerodigital-contact--lede-in-form .zerodigital-contact__form {
	padding: clamp(var(--wp--preset--spacing--md, 1.5rem), 3vw, var(--wp--preset--spacing--lg, 2rem));
	background: var(--zd-card-bg, var(--wp--preset--color--surface, #fff));
	border: var(--zd-border, 1px solid #e4e6e9);
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
}

.zerodigital-contact--lede-in-form .zerodigital-contact__heading {
	font-size: var(--zd-step-h3, clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem));
}

.zerodigital-contact--lede-in-form .zerodigital-contact__intro {
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

/* What happens next: numbered steps on the brand's dark ground. zd-bg-dark
 * (render.php) lets the theme lift the text and the label's keyline. */
.zerodigital-contact__next {
	align-self: stretch;
	padding: var(--wp--preset--spacing--lg, 2rem);
	background: var(--wp--preset--color--primary, #0e4b52);
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
}

.zerodigital-contact__next-heading {
	margin-bottom: var(--wp--preset--spacing--sm, 1rem);
}

.zerodigital-contact__next-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: zd-next-step;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm, 1rem);
}

.zerodigital-contact__next-steps li {
	counter-increment: zd-next-step;
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: 0.5rem;
	line-height: 1.5;
}

.zerodigital-contact__next-steps li::before {
	content: counter(zd-next-step, decimal-leading-zero);
	font-family: var(--zd-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--zd-spec-size, 0.72rem);
	line-height: 2.1;
	opacity: 0.75;
}

@media (max-width: 782px) {
	.zerodigital-contact--form-map .zerodigital-contact__inner,
	.zerodigital-contact--form-details .zerodigital-contact__inner,
	.zerodigital-contact--form-richtext .zerodigital-contact__inner {
		grid-template-columns: 1fr;
	}

	/* Stacked, the form's submit button and the call pill land one above the
	 * other with only the grid gap between them — two filled controls that read
	 * as a pair of options rather than as the end of one thing and the start of
	 * another. A rule draws the line the columns draw for free on desktop, so it
	 * is scoped to the width where the columns are gone.
	 *
	 * Only the details variant: the map variant stacks too, but a map is
	 * obviously not a continuation of the form, so it needs no help.
	 *
	 * Spaced with `lg` below to sit evenly against the gap above it. Measured on
	 * the live page that gap is 56px, so a smaller value here put the line 56px
	 * under the submit button and 24px over the call pill — reading as a line
	 * belonging to the call button rather than one dividing the two. */
	.zerodigital-contact--form-details .zerodigital-contact__details {
		padding-top: var(--wp--preset--spacing--lg, 2.5rem);
		border-top: 1px solid var(--wp--preset--color--border, #e4e6e9);
	}
}

/* --- default skin --- */
.zerodigital-contact__intro {
	color: var(--wp--preset--color--muted, #5b6572);
}

/* The panel that used to live here is deliberately gone — see the note above
 * the details block. Only the links carry skin styling now. */
.zerodigital-contact__details a {
	font-weight: 600;
	text-decoration: none;
}

/* Scoped to the list so it cannot reach the call button, which is a filled
 * control and should not sprout an underline on hover. */
.zerodigital-contact__list a:hover {
	text-decoration: underline;
}

/* Opening hours are a table in disguise — tabular figures keep the times in
 * column across the days instead of drifting line to line. */
.zerodigital-contact__hours {
	color: var(--wp--preset--color--muted, #5b6572);
	font-family: var(--zd-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
 * Fluent Forms is themed in the PARENT THEME, not here.
 *
 * These rules used to live in this file, scoped to .zerodigital-contact__form,
 * which meant the contact form was the only styled form on the site and every
 * other one needed a copy pasted into Fluent Forms' per-form Custom CSS box.
 * They now sit in zero-digital-base/assets/css/fluent-forms.css, unscoped, so a
 * form arrives on brand wherever it is placed — and that file is enqueued only
 * on pages that have a form, exactly as this block's stylesheet is.
 *
 * Nothing form-related belongs here again. A rule added in this file would be
 * a second source at the same specificity as the theme's, and which one won
 * would depend on enqueue order — that is, on whether the block happens to be
 * on the page. Per-client refinements go in the child theme.
 * ------------------------------------------------------------------------ */