/* =========================================================================
   HNZ Constructions — layout

   Containers, the section wrapper system, and the spacing / colour-theme modifiers from the ACF Settings tab.

   Enqueued by hnz_enqueue_assets() in inc/enqueue.php, which fixes the load
   order. Design tokens live in tokens.css.
   ========================================================================= */

/* Layout and section shells ============================================== */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.site-main {
	background: transparent;
}

.section {
	position: relative;
	padding-block: var(--section-py);
}

.section--spacing-tight { --section-py: var(--sp-6); }
.section--spacing-loose { --section-py: var(--sp-10); }
.section--spacing-none { --section-py: 0; }

/* The thin rule that separates sections in the design. Full-strength ink —
   measured at #333132 on all seven dividers of the Home export, not the
   tinted --c-rule that component borders use. */
.section--divider::before {
	content: "";
	position: absolute;
	inset-inline: var(--gutter);
	top: 0;
	height: 1px;
	background: var(--c-divider);
}

@media (min-width: 48em) {
	.section--divider::before {
		inset-inline: max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter)));
	}
}

/* --c-surface-muted is the same value as the body's --c-surface, so the
   muted theme is a no-op that would only hide the site watermark. Kept as a
   named hook for when the two tokens diverge. */
.section--theme-muted { background: transparent; }

.section--theme-dark {
	background: var(--c-footer);
	color: #fff;
	--c-divider: #fff;
	--c-rule: rgb(255 255 255 / 18%);
	--c-ink-muted: rgb(255 255 255 / 70%);
}

.section__heading {
	font-size: var(--fs-600); /* 24px–40px */
	margin-bottom: var(--sp-6);
}

.section__heading--centred {
	text-align: center;
}

/*
 * A centred heading framed by two hairlines: the section's own top divider
 * above, and this element's border below. Used by Projects, Our Client and
 * Contact Us, which are identical in the Home export — the two rules sit
 * exactly 130px apart in all three, with the heading ink 50-51px below the
 * first. The border spans the container's content box, so it lands on the
 * same x 40..1399 as the section divider.
 *
 *   44px (--section-py) + 40px heading box + 43px + 1px border = 128
 *
 * against the design's 130, and the 44px margin below puts the content 44px
 * under the second rule, which the export has exactly.
 */
.section__heading--framed {
	text-align: center;
	padding-bottom: 43px;
	margin-bottom: 44px;
	border-bottom: 1px solid var(--c-divider);
}

.section__footer {
	margin-top: var(--sp-6);
}

.section__footer--centred {
	display: flex;
	justify-content: center;
}

/* Prose ---------------------------------------------------------------- */

.prose > * + * {
	margin-top: var(--sp-4);
}

.prose--small {
	font-size: var(--fs-200); /* 13px */
	line-height: var(--lh-body);
	color: var(--c-ink);
}

.prose h2,
.prose h3 {
	margin-top: var(--sp-6);
}

.prose ul,
.prose ol {
	padding-left: 1.2em;
	list-style: revert;
}

.prose a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}