/*
 * main.css — base layer + chrome (header / footer / hero shell).
 *
 * References tokens.css custom properties only; no raw hex or literal font
 * names live here. Template-specific styles (single-product, archive, finder)
 * arrive in later phases as their own concerns.
 */

/* ====================================================================== */
/*  Reset / base                                                          */
/* ====================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition), opacity var(--transition);
}
a:hover { opacity: 0.7; }

:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* ---- Headings & text -------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-s);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-heading);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-m); }

.eyebrow {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-xs);
}

.lead {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	max-width: 60ch;
}

/* ---- Layout helpers --------------------------------------------------- */

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

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--surface { background: var(--color-surface); }

/* Accessibility: skip link + screen-reader text (mirrors core's helper). */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%); height: 1px; width: 1px;
	margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: var(--space-s); top: -100px;
	z-index: var(--z-overlay);
	background: var(--color-accent); color: var(--color-on-accent);
	padding: var(--space-2xs) var(--space-s); border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-s); opacity: 1; }

/* ---- Buttons ---------------------------------------------------------- */

.button {
	display: inline-flex; align-items: center; gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-m);
	min-height: 46px;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.01em;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-on-accent);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); opacity: 1; }

.button--ghost {
	background: transparent;
	color: var(--color-accent);
}
.button--ghost:hover { background: var(--color-accent); color: var(--color-on-accent); }

.button--block { width: 100%; justify-content: center; }

/* ====================================================================== */
/*  Contact Form 7 — underline (minimal) style                            */
/* ====================================================================== */
/*
 * Variant B from the design exploration: no boxes, just a hairline under each
 * field that thickens to near-black on focus. Lives here (not secondary.css)
 * because it must reach both the Contatti page and the per-Product quote form
 * on single-product.php, which only loads main.css + product.css. The grid
 * markup (.row2 / .field) is authored in the CF7 form bodies (tools/pages).
 */

.wpcf7 { max-width: 42rem; }
.wpcf7-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
@media (max-width: 560px) { .wpcf7-form .row2 { grid-template-columns: 1fr; } }

.wpcf7-form .field { margin-bottom: var(--space-m); }
.wpcf7-form .field label {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
	margin-bottom: var(--space-2xs);
}
.wpcf7-form .wpcf7-form-control-wrap { display: block; }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	font: inherit;
	color: var(--color-text);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-border-strong);
	border-radius: 0;
	padding: var(--space-2xs) 0;
	min-height: 48px;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.wpcf7-form textarea { min-height: 9rem; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: 0;
	border-bottom-color: var(--color-accent);
	box-shadow: 0 1px 0 0 var(--color-accent);
}

/* CF7's validation / response messaging, kept consistent with the palette. */
.wpcf7-form .wpcf7-not-valid-tip { color: var(--color-accent); font-size: var(--text-xs); margin-top: var(--space-3xs); }
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid { border-bottom-color: var(--color-accent); }
.wpcf7 .wpcf7-response-output {
	margin: var(--space-m) 0 0;
	padding: var(--space-s) var(--space-m);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: var(--text-sm);
}

/* ====================================================================== */
/*  Site header                                                           */
/* ====================================================================== */

/* Overlay header: a fixed transparent bar that sits over the page content at the
   top and turns solid once scrolled (header.js toggles .is-scrolled; without JS
   it simply stays transparent — legible dark-on-light on interior pages). On the
   front page it rides over the dark hero, so its text flips to white until
   scrolled. The fixed position is cleared by a top offset on .site-main below. */
.site-header {
	position: fixed; top: 0; inset-inline: 0;
	z-index: var(--z-header);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.site-header.is-scrolled {
	background: color-mix(in srgb, var(--color-bg) 92%, transparent);
	backdrop-filter: saturate(1.2) blur(8px);
	border-bottom-color: var(--color-border);
}

/* Front page, at the top: white chrome over the hero image. */
.site-header--over-hero:not(.is-scrolled) { color: var(--color-on-accent); }
.site-header--over-hero:not(.is-scrolled) .site-title a,
.site-header--over-hero:not(.is-scrolled) .nav-toggle__button { color: var(--color-on-accent); }
@media (min-width: 861px) {
	.site-header--over-hero:not(.is-scrolled) .primary-nav a { color: var(--color-on-accent); }
}

/* The header is out of flow, so interior pages offset their content beneath it;
   the front page is flush so its hero fills the viewport behind the header. */
.site-main { padding-top: var(--header-height); overflow-x: clip; }
.site-main--hero { padding-top: 0; }

.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-l);
	min-height: var(--header-height);
}

.site-branding { display: flex; align-items: center; }
.site-logo-link { display: inline-flex; align-items: center; }
.site-logo { display: block; height: 32px; width: auto; }

/* The logo (venus_logo) is two-tone: a wordmark + bar (.logo-primary) and the
   "SECURITY" letters knocked out against the bar (.logo-knockout). The two fills
   must contrast, so we drive them from CSS and invert the pair by chrome context.
   Default (interior pages, solid scrolled header): dark wordmark, light letters. */
.site-logo .logo-primary  { fill: var(--color-text); transition: fill var(--transition); }
.site-logo .logo-knockout { fill: var(--color-bg);   transition: fill var(--transition); }

/* Dark context — over the front-page hero (until scrolled): invert the pair so
   the white wordmark/bar reads on the image and the dark letters read on the bar. */
.site-header--over-hero:not(.is-scrolled) .logo-primary  { fill: var(--color-bg); }
.site-header--over-hero:not(.is-scrolled) .logo-knockout { fill: var(--color-text); }

.site-title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-tight);
	text-transform: uppercase;
}
.site-title a:hover { opacity: 0.7; }
.site-description {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* ---- Primary nav ------------------------------------------------------ */

/* The nav holds the menu and the language switcher side by side. */
.primary-nav { display: flex; align-items: center; gap: var(--space-l); }

.primary-nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: var(--space-l);
}
.primary-nav a {
	display: inline-block;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.01em;
	padding-block: var(--space-2xs);
	color: var(--color-text);
}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a { color: var(--color-heading); text-decoration: underline; text-underline-offset: 6px; }

/* Language switcher (Polylang): a dropdown whose trigger shows the current
   language; the panel lists every language with the active one marked. */
.lang-switcher { position: relative; }
.lang-switcher__toggle {
	display: inline-flex; align-items: center; gap: var(--space-3xs);
	margin: 0; padding: var(--space-2xs);
	background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
	font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
	text-transform: uppercase; letter-spacing: 0.04em;
}
.lang-switcher__toggle::after {
	content: ""; width: 6px; height: 6px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--transition);
}
.lang-switcher.is-open .lang-switcher__toggle::after { transform: translateY(1px) rotate(-135deg); }

.lang-switcher__menu { list-style: none; margin: 0; padding: 0; }
.lang-switcher__menu a {
	display: block; padding: var(--space-2xs) var(--space-s);
	font-size: var(--text-sm); white-space: nowrap;
}
.lang-switcher__item.is-current a { font-weight: var(--font-weight-semibold); color: var(--color-heading); }

@media (min-width: 861px) {
	/* Desktop: the panel is a flyout, hidden until hovered, focused or toggled. */
	.lang-switcher__menu {
		position: absolute; top: 100%; right: 0;
		min-width: 9rem; margin-top: var(--space-2xs); padding: var(--space-2xs);
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow);
		opacity: 0; visibility: hidden; transform: translateY(4px);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
		z-index: var(--z-overlay);
	}
	.lang-switcher:hover .lang-switcher__menu,
	.lang-switcher:focus-within .lang-switcher__menu,
	.lang-switcher.is-open .lang-switcher__menu {
		opacity: 1; visibility: visible; transform: translateY(0);
	}
	.lang-switcher__menu a { border-radius: var(--radius); }
	.lang-switcher__menu a:hover { background: var(--color-surface); }
}

/* Panel text stays dark even when the header rides white over the hero. */
.site-header .primary-nav .lang-switcher__menu a { color: var(--color-text); }
.site-header .primary-nav .lang-switcher__item.is-current a { color: var(--color-heading); }

/* Mobile menu toggle (progressive: checkbox-driven, no JS dependency). */
.nav-toggle { display: none; }
.nav-toggle__button {
	display: none;
	align-items: center; gap: var(--space-2xs);
	background: none; border: 0; cursor: pointer;
	font: inherit; color: var(--color-text);
	padding: var(--space-2xs);
}
.nav-toggle__bars { display: inline-block; width: 22px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }

@media (max-width: 860px) {
	.nav-toggle__button { display: inline-flex; }
	.primary-nav {
		position: absolute; inset-inline: 0; top: var(--header-height);
		flex-direction: column; align-items: stretch;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		max-height: 0; overflow: hidden;
		transition: max-height var(--transition);
	}
	/* Mobile: no flyout — drop the toggle and lay the choices out inline. */
	.lang-switcher { padding: var(--space-s) var(--container-pad) var(--space-l); }
	.lang-switcher__toggle { display: none; }
	.lang-switcher__menu { display: flex; gap: var(--space-l); }
	.lang-switcher__menu li { width: auto; border: 0; }
	.lang-switcher__menu a { width: auto; padding: 0; }
	.primary-nav ul {
		flex-direction: column; align-items: flex-start;
		gap: 0; padding: var(--space-s) var(--container-pad) var(--space-l);
	}
	.primary-nav li { width: 100%; border-bottom: 1px solid var(--color-border); }
	.primary-nav a { display: block; padding-block: var(--space-s); width: 100%; }
	.nav-toggle:checked ~ .primary-nav { max-height: 80vh; overflow-y: auto; }

	/* Parent rows: keep the disclosure caret on the same line as the label, with
	   the sub-menu wrapping full-width below it. */
	.primary-nav .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
	.primary-nav .menu-item-has-children > a { flex: 1 1 auto; width: auto; }

	/* Mobile accordion: sub-menus are collapsed until their item is toggled open. */
	.primary-nav .sub-menu { flex: 0 0 100%; display: none; padding-left: var(--space-m); }
	.primary-nav .menu-item.is-open > .sub-menu { display: block; }
}

/* ---- Dropdowns & mega-menu (ADR-0010) --------------------------------- */

/* Disclosure caret injected by header.js next to every parent item. The parent
   link itself stays a real link (it navigates to its route); this only toggles
   the panel for touch + keyboard, and signals that the item has a sub-menu. */
.submenu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	flex: none; width: 1.75rem; height: 1.75rem;
	padding: 0; background: none; border: 0; cursor: pointer; color: inherit;
}
.submenu-toggle::before {
	content: ""; width: 7px; height: 7px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--transition);
}
.menu-item-has-children:hover > .submenu-toggle::before,
.menu-item.is-open > .submenu-toggle::before { transform: translateY(1px) rotate(-135deg); }

/* Sub-menus are vertical lists (override the horizontal row of .primary-nav ul). */
.primary-nav .sub-menu { flex-direction: column; align-items: stretch; gap: 0; }

@media (min-width: 861px) {
	/* Full-height top-level items so panels anchor cleanly to the header's
	   bottom edge (no hover gap). */
	.primary-nav .menu { height: var(--header-height); }
	.primary-nav .menu > li { display: flex; align-items: center; height: 100%; }
	.primary-nav .menu > .menu-item-has-children { position: relative; gap: var(--space-3xs); }

	/* Flyout panel — hidden until the item is hovered, focused or toggled. */
	.primary-nav .sub-menu {
		position: absolute; top: 100%; left: 0;
		min-width: 220px; margin: 0; padding: var(--space-xs);
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow);
		opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
		z-index: var(--z-overlay);
	}
	.primary-nav .menu > li:hover > .sub-menu,
	.primary-nav .menu > li:focus-within > .sub-menu,
	.primary-nav .menu > li.is-open > .sub-menu {
		opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
	}
	.primary-nav .sub-menu a {
		display: block; width: 100%;
		padding: var(--space-2xs) var(--space-xs);
		border-radius: var(--radius); white-space: nowrap;
	}
	.primary-nav .sub-menu a:hover { background: var(--color-surface); }

	/* Mega panel (Prodotti): a single wide, centred, two-column panel rather than
	   a chain of flyouts — column 1 = Foro finestra products, column 2 = Foro
	   ingresso (the Configuratore link). */
	.primary-nav .menu > li.mega { position: static; }
	.primary-nav .mega > .sub-menu {
		left: 50%; transform: translateX(-50%) translateY(4px);
		width: min(900px, calc(100vw - 2 * var(--container-pad)));
		display: grid; grid-template-columns: 3fr 1fr; gap: var(--space-l);
		padding: var(--space-m);
	}
	.primary-nav .menu > li.mega:hover > .sub-menu,
	.primary-nav .menu > li.mega:focus-within > .sub-menu,
	.primary-nav .menu > li.mega.is-open > .sub-menu { transform: translateX(-50%) translateY(0); }

	/* Each column heading (the foro term) reads as an eyebrow label; its product
	   list is shown statically inside the panel, not as a nested flyout. */
	.primary-nav .mega > .sub-menu > li > a {
		font-size: var(--text-xs); text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted);
	}
	.primary-nav .mega .sub-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		min-width: 0; width: auto; margin: var(--space-2xs) 0 0;
		padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
	}
	/* The Foro finestra column groups its products by family (Thorax / Brisolè /
	   Brisolè RC, plus the standalone SicurBlind) — lay those groups three-up. */
	.primary-nav .mega > .sub-menu > li:first-child > .sub-menu {
		display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-m) var(--space-l); align-items: start;
		margin-top: var(--space-s);
	}
	/* Family heading: a non-navigable group title, set off from its products by a
	   hairline; its products sit indented beneath it so the nesting reads clearly. */
	.primary-nav .menu-heading > a {
		display: block; pointer-events: none;
		font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
		color: var(--color-heading);
		padding-bottom: var(--space-2xs); margin-bottom: var(--space-2xs);
		border-bottom: 1px solid var(--color-border);
	}
	.primary-nav .mega .menu-heading > .sub-menu { padding-left: var(--space-s); }
	/* Tighten the product rows inside the panel (no per-row block padding sprawl). */
	.primary-nav .mega .sub-menu a { padding-block: var(--space-3xs); }
	/* The caret is meaningless on the always-open mega columns. */
	.primary-nav .mega .sub-menu .submenu-toggle { display: none; }
}

/* Sub-menu panel text stays dark even when the header rides white over the hero. */
.site-header .primary-nav .sub-menu a { color: var(--color-text); }

/* ---- Underlined text link (hero / editorial CTAs) --------------------- */

.text-link {
	display: inline-block;
	font-weight: var(--font-weight-medium);
	border-bottom: 2px solid currentColor;
	padding-bottom: var(--space-3xs);
}
.text-link:hover { opacity: 0.7; }

/* ====================================================================== */
/*  Front-page hero (full-bleed image, copy bottom-left)                  */
/* ====================================================================== */

.hero {
	position: relative;
	display: flex; align-items: flex-end;
	min-height: 100vh;
	color: var(--color-on-accent);
	/* Dark fallback so the white copy holds before a hero photo is uploaded. */
	background: var(--color-text);
	overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
/* Cover-fit media shared by the hero, family cards and editorial splits. */
.hero__media img,
.family-card__media img,
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* Darker at the top (under the header) and bottom (under the copy). */
.hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(
		180deg,
		rgba(10, 8, 8, 0.45) 0%,
		rgba(10, 8, 8, 0.12) 32%,
		rgba(10, 8, 8, 0.72) 100%
	);
}
/* Container keeps its centred 1200px box + gutters; the copy sits at its left
   edge, bottom-aligned (the .hero flex). The headline wraps via its own measure
   so it stacks into a few lines like the reference, rather than centring. */
.hero__inner {
	position: relative;
	padding-block: var(--space-2xl);
}
.hero__title {
	color: var(--color-on-accent);
	font-size: var(--text-4xl);
	max-width: 14ch;
	margin-bottom: var(--space-l);
}
.hero__actions { display: flex; gap: var(--space-m); flex-wrap: wrap; }

/* ====================================================================== */
/*  Front-page sections (two families / editorial split / stats)          */
/* ====================================================================== */

/* Two product families — image cards with copy over a scrim. */
.section__head { max-width: 30ch; margin-bottom: var(--space-l); }

.family-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-m);
}
.family-card {
	position: relative;
	display: flex; align-items: flex-end;
	min-height: 340px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: var(--color-on-accent);
	background: var(--color-text);
}
.family-card__media { position: absolute; inset: 0; }
.family-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.family-card__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(10, 8, 8, 0.72));
}
.family-card__body { position: relative; display: block; padding: var(--space-l); }
.family-card__title {
	display: block;
	color: var(--color-on-accent);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-tight);
	margin-bottom: var(--space-2xs);
}
.family-card__text { display: block; color: color-mix(in srgb, var(--color-on-accent) 85%, transparent); margin: 0; font-size: var(--text-sm); }
.family-card:hover { opacity: 1; }
.family-card:hover .family-card__media img { transform: scale(1.03); }
@media (max-width: 720px) { .family-grid { grid-template-columns: 1fr; } }

/* Editorial split — image beside copy, used on a warm surface band. */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
	align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface-2);
}
.split__body > :last-child { margin-bottom: 0; }
@media (max-width: 860px) {
	.split { grid-template-columns: 1fr; gap: var(--space-l); }
	.split--reverse .split__media { order: 0; }
}

/* Stats row — three figures on a hairline-bounded band. */
.stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
	border-block: 1px solid var(--color-border);
	padding-block: var(--space-xl);
}
.stat__num {
	font-size: var(--text-3xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-tight);
	line-height: var(--line-height-heading);
}
.stat__label { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 720px) {
	.stat-row { grid-template-columns: 1fr; gap: var(--space-l); text-align: center; }
}

/* ====================================================================== */
/*  Media placeholders + full-bleed utility                               */
/* ====================================================================== */

/* A labelled warm-gradient box that stands in for real Media until the owner
   uploads photos. The label is real text (a child .placeholder__label) rather
   than a data-attribute, so it survives KSES when authored in page content.
   Swap the box for an `<img>` in the same wrapper later. */
.placeholder {
	position: relative;
	display: grid; place-items: center;
	padding: var(--space-s);
	background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.placeholder__label {
	font-size: var(--text-xs);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	text-align: center;
	color: var(--color-border-strong);
}
.placeholder--tall { aspect-ratio: 3 / 4; }
.placeholder--wide { aspect-ratio: 4 / 3; }
.placeholder--sq   { aspect-ratio: 1 / 1; }
.placeholder--cover { width: 100%; height: 100%; }
.split__media .placeholder { border: 0; border-radius: 0; }

/* Break an element out of its centred container to the full viewport width.
   Paired with overflow-x: clip on .site-main so the 100vw never adds a
   horizontal scrollbar. Put a .container inside to re-pad the content. */
.fullbleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* ====================================================================== */
/*  Generic content (index fallback / pages)                              */
/* ====================================================================== */

.entry { padding-block: var(--space-l); border-bottom: 1px solid var(--color-border); }
.entry:last-child { border-bottom: 0; }
.entry__title { margin-bottom: var(--space-2xs); }
.entry__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-s); }
.entry__content > :last-child { margin-bottom: 0; }

.page-header { padding-block: var(--space-xl) var(--space-l); }
.no-results { padding-block: var(--space-2xl); }

/* ====================================================================== */
/*  Site footer                                                           */
/* ====================================================================== */

.site-footer {
	margin-top: auto;
	background: var(--color-text);
	color: var(--color-surface);
	padding-block: var(--space-2xl) var(--space-l);
}
.site-footer a { color: var(--color-surface); }
.site-footer h2, .site-footer h3 { color: var(--color-on-accent); }

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: var(--space-xl);
}
@media (max-width: 720px) {
	.site-footer__grid { grid-template-columns: 1fr; gap: var(--space-l); }
}

.site-footer__brand .site-title { color: var(--color-on-accent); }
/* Footer logo: a touch larger, and on the dark band it takes the inverted pair
   (white wordmark/bar, dark knockout) like the over-hero header. */
.site-footer__brand .site-logo { height: 56px; }
.site-footer__brand .logo-primary  { fill: var(--color-bg); }
.site-footer__brand .logo-knockout { fill: var(--color-text); }
.site-footer__brand .site-logo-link { margin-bottom: var(--space-s); }
.site-footer__brand p { color: color-mix(in srgb, var(--color-surface) 70%, transparent); max-width: 38ch; }

.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-nav__heading {
	font-size: var(--text-xs); text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: color-mix(in srgb, var(--color-surface) 60%, transparent);
	margin-bottom: var(--space-s);
}

.site-footer__bottom {
	display: flex; flex-wrap: wrap; gap: var(--space-s);
	justify-content: space-between; align-items: center;
	margin-top: var(--space-2xl);
	padding-top: var(--space-l);
	border-top: 1px solid color-mix(in srgb, var(--color-surface) 18%, transparent);
	font-size: var(--text-xs);
	color: color-mix(in srgb, var(--color-surface) 65%, transparent);
}