/* ==========================================================================
   Roots Storytelling — de homepage als scrollreis.

   Progressive enhancement: alle content is leesbaar zonder JavaScript.
   Reveal-/scrolleffecten gelden alleen onder html.js, en alleen wanneer
   prefers-reduced-motion dat toestaat. GSAP verzorgt uitsluitend de gepinde
   keuken-sectie en de horizontale momenten-strip (desktop).
   ========================================================================== */

:root {
	--st-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--st-dark: var(--wp--preset--color--antraciet);
	--st-light: var(--wp--preset--color--wit);
	/* Eén raster voor de hele site: zelfde goot en maximale breedte overal */
	--st-gutter: clamp(1.5rem, 5vw, 4rem);
	--st-maxw: 1200px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Geen witte balk tussen de donkere epiloog en de footer */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---- WP blockGap-normalisatie ---------------------------------------------
   Sinds de secties native editor-blokken zijn (bewerkbaar via WordPress) zet
   WordPress' globale blockGap een `margin-block-start: 1.75rem` op ELK
   flow-blok (`:root :where(.is-layout-flow) > *`). Dat botste met het
   fijn-afgestelde thema-ritme: volle-breedte secties kregen een witte naad en
   flex/grid-componenten (die hun ruimte al via `gap`/`padding`/divider-borders
   voeren) werden uit elkaar geduwd — overal ongewenste tussenruimte, niet
   meer uitgelijnd. We zetten die marge daarom uit op de structuurlaag; gewone
   lopende tekst (paragraaf → paragraaf, bv. het mensen-verhaal) houdt z'n
   blockGap gewoon. ----------------------------------------------------------- */

/* Volle-breedte secties staan vlak op elkaar (elke sectie draagt eigen padding). */
.wp-block-post-content > * { margin-block: 0; }

/* Flex/grid-componenten voeren hun eigen verticale ritme (gap/padding/borders);
   de generieke blockGap-marge mag hun kinderen niet uit elkaar duwen. */

/* Hero: alle lagen zijn absoluut gepositioneerd of flex-met-gap. Zonder deze
   reset schuift o.a. de scrim 28px omlaag → een onbedekte strook bovenaan. */
.st-hero > *,
.st-hero__frame > *,
.st-hero__slides > *,
.st-hero__content > *,
/* Index: 2-koloms grid, aaneengesloten divider-lijst en per-rij grid-cellen. */
.st-index__grid > *,
.st-index__list,
.st-index__list > *,
.st-index__row > *,
.st-index__text > *,
/* Keuken: gepinde stappen (flex met gap) + hun binnen-blokken. */
.st-keuken__steps,
.st-keuken__steps > *,
.st-keuken__step > *,
/* Mensen: 2-koloms grid (de prose-paragrafen in __body houden hun blockGap). */
.st-mensen__grid > *,
/* Momenten / reviews / praktisch: eigen flex-layouts. */
.st-momenten__nav,
.st-momenten__viewport,
.st-reviews__score,
.st-reviews__slider,
/* Epiloog: de gecentreerde stapel voert z'n eigen verticale ritme via marges. */
.st-praktisch__inner > *,
.st-praktisch__actions,
/* Over Roots — pijlers: de grid-cellen. Zonder deze reset kregen cel 2 en 3
   28px marge (cel 1 niet, die is :first-child), waardoor hun border-top 28px
   lager stond dan die van cel 1: de streeplijnen boven de drie pijlers liepen
   niet door. Dit was het "border-top lijnt niet uit"-punt uit ROOTS-PROJECT.md;
   de oorzaak was dus de blockGap, niet het niet-stretchen van korte grid-items. */
.st-pijlers__grid > *,
/* Proeverij: full-bleed foto-triptiek — de beeldrij voert zijn eigen ritme. */
.st-proeverij__grid,
.st-proeverij__grid > *,
/* Over Roots — sfeer: idem voor de beeldrij; en de rij zelf, zodat de afstand
   tot de kop door .st-sfeer__intro's eigen margin-bottom bepaald wordt en niet
   door een blockGap die daar overheen collapst. */
.st-sfeer__grid,
.st-sfeer__grid > * {
	margin-block-start: 0;
}

/* ---- Gedeelde bouwstenen ---- */

.st-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--groen);
	margin: 0 0 1rem;
}

.st-eyebrow::before {
	content: "";
	width: 30px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

.st-eyebrow--oplight {
	color: var(--wp--preset--color--terracotta-licht);
}

.st-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1em 2.4em;
	transition: all 0.35s ease;
	cursor: pointer;
}

.st-btn--solid {
	background: var(--wp--preset--color--groen);
	color: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--groen);
}

.st-btn--solid:hover,
.st-btn--solid:focus-visible {
	background: var(--wp--preset--color--groen-donker);
	border-color: var(--wp--preset--color--groen-donker);
	color: var(--wp--preset--color--wit);
}

.st-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--antraciet);
	border: 1px solid rgba(31, 31, 31, 0.35);
}

.st-btn--ghost:hover,
.st-btn--ghost:focus-visible {
	border-color: var(--wp--preset--color--groen);
	background: var(--wp--preset--color--groen);
	color: var(--wp--preset--color--wit);
}

.st-btn--ghost-light {
	background: transparent;
	color: var(--wp--preset--color--wit);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.st-btn--ghost-light:hover,
.st-btn--ghost-light:focus-visible {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--antraciet);
}

.st-btn--big {
	font-size: 0.95rem;
	padding: 1.2em 3.2em;
}

/* Roots-knoppen in wp:button-vorm: link vult de wrapper (hele knop klikbaar) */
.wp-block-button.st-btn { padding: 0; }
.wp-block-button.st-btn > .wp-block-button__link {
	all: unset;
	display: block;
	padding: 1em 2.4em;
	cursor: pointer;
	text-align: center;
}
.wp-block-button.st-btn--big > .wp-block-button__link { padding: 1.2em 3.2em; }
.wp-block-button.st-btn > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--groen);
	outline-offset: 2px;
}

/* De epiloog is een strakke, hard-afgesneden donkere sectie (net als de
   subpagina-secties en st-cta). De vroegere witte fade-overgang bovenaan is
   op verzoek verwijderd. */

/* Reveals — alleen met JS aan en zonder reduced-motion */
@media (prefers-reduced-motion: no-preference) {
	html.js .st-reveal {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 0.9s var(--st-ease), transform 0.9s var(--st-ease);
	}
	html.js .st-reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---- Header ---- */
.st-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.05rem var(--st-gutter);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.45s ease, border-color 0.45s ease;
}

body.admin-bar .st-header { top: 32px; }

body:not(:has(.st-hero)) {
	padding-top: 70px;
}

.st-header.is-solid {
	background: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom-color: rgba(31, 31, 31, 0.08);
}

.st-header__brand { line-height: 0; }

.st-header__logo { height: 30px; width: auto; }
.st-header__logo--dark { display: none; }
.st-header.is-solid .st-header__logo--light { display: none; }
.st-header.is-solid .st-header__logo--dark { display: block; }

.st-header__right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.st-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	background: none;
	border: none;
	padding: 0.5em 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--wit);
	transition: color 0.35s ease;
}

.st-header.is-solid .st-header__toggle {
	color: var(--wp--preset--color--antraciet);
}

.st-header__toggle-icon {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	width: 26px;
}

.st-header__toggle-icon span {
	display: block;
	height: 1.5px;
	width: 100%;
	background: currentColor;
	transition: transform 0.35s var(--st-ease);
}

.st-header__toggle[aria-expanded="true"] .st-header__toggle-icon span:first-child {
	transform: translateY(3.25px) rotate(45deg);
}

.st-header__toggle[aria-expanded="true"] .st-header__toggle-icon span:last-child {
	transform: translateY(-3.25px) rotate(-45deg);
}

/* Als overlay open is, altijd lichte tekst — óók als de balk 'solid' was.
   De .st-header in de selector houdt deze regels sterker dan .is-solid. */
body.st-menu-open .st-header,
body.st-menu-open .st-header.is-solid {
	background: transparent;
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.st-menu-open .st-header .st-header__logo--dark { display: none; }
body.st-menu-open .st-header .st-header__logo--light { display: block; }

body.st-menu-open .st-header .st-header__toggle {
	color: var(--wp--preset--color--wit);
}

/* ---- Fullscreen overlay-menu ---- */
.st-overlay {
	position: fixed;
	inset: 0;
	z-index: 250;
	background: var(--wp--preset--color--antraciet-diep);
	color: var(--wp--preset--color--wit);
	overflow: hidden;
}

html.js .st-overlay {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

html.js body.st-menu-open .st-overlay {
	opacity: 1;
	visibility: visible;
}

body.st-menu-open {
	overflow: hidden;
}

.st-overlay__inner {
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 4rem;
	align-items: center;
	padding: 6rem var(--st-gutter) 2.5rem;
	max-width: var(--st-maxw);
	margin: 0 auto;
	box-sizing: border-box;
}

.st-overlay__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.st-overlay__list li {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.st-overlay__list li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.st-overlay__link {
	position: relative;
	display: block;
	padding: 0.72em 0;
	text-decoration: none;
	transition: transform 0.45s var(--st-ease);
}

/* Terracotta-accentstreepje dat bij hover/focus uitschuift */
.st-overlay__link::before {
	content: "";
	position: absolute;
	left: -1.1rem;
	top: 50%;
	width: 2px;
	height: 58%;
	background: var(--wp--preset--color--terracotta-licht);
	transform: translateY(-50%) scaleY(0);
	transform-origin: center;
	transition: transform 0.35s var(--st-ease);
}

.st-overlay__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3.4vh, 2.35rem);
	font-weight: 500;
	line-height: 1.12;
	color: var(--wp--preset--color--ivoor);
	transition: color 0.3s ease;
}

.st-overlay__sub {
	display: block;
	margin-top: 0.2em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	line-height: 1.4;
	color: rgba(245, 242, 236, 0.48);
	transition: color 0.3s ease;
}

.st-overlay__link:hover,
.st-overlay__link:focus-visible {
	transform: translateX(12px);
}

.st-overlay__link:hover .st-overlay__title,
.st-overlay__link:focus-visible .st-overlay__title {
	color: var(--wp--preset--color--groen-licht);
}

.st-overlay__link:hover .st-overlay__sub,
.st-overlay__link:focus-visible .st-overlay__sub {
	color: rgba(245, 242, 236, 0.8);
}

.st-overlay__link:hover::before,
.st-overlay__link:focus-visible::before {
	transform: translateY(-50%) scaleY(1);
}

.st-overlay__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--groen-licht);
	outline-offset: 8px;
}

/* Ingetogen stagger bij het openen — alleen met motion aan */
@media (prefers-reduced-motion: no-preference) {
	html.js .st-overlay__list li {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.5s ease, transform 0.6s var(--st-ease);
	}
	html.js body.st-menu-open .st-overlay__list li {
		opacity: 1;
		transform: none;
	}
	html.js body.st-menu-open .st-overlay__list li:nth-child(1) { transition-delay: 0.05s; }
	html.js body.st-menu-open .st-overlay__list li:nth-child(2) { transition-delay: 0.09s; }
	html.js body.st-menu-open .st-overlay__list li:nth-child(3) { transition-delay: 0.13s; }
	html.js body.st-menu-open .st-overlay__list li:nth-child(4) { transition-delay: 0.17s; }
	html.js body.st-menu-open .st-overlay__list li:nth-child(5) { transition-delay: 0.21s; }
	html.js body.st-menu-open .st-overlay__list li:nth-child(6) { transition-delay: 0.25s; }
	html.js body.st-menu-open .st-overlay__list li:nth-child(7) { transition-delay: 0.29s; }
	html.js body.st-menu-open .st-overlay__list li:nth-child(8) { transition-delay: 0.33s; }
}

.st-overlay__aside {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.st-overlay__preview {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	max-height: 54vh;
	overflow: hidden;
	border-radius: 3px;
}

.st-overlay__preview-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: opacity 0.4s ease, transform 8s var(--st-ease);
}

.st-overlay__preview-img.is-switching {
	opacity: 0;
}

.st-overlay__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.6rem 1.3rem 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--wp--preset--color--wit);
	background: linear-gradient(to top, rgba(22, 22, 22, 0.82), rgba(22, 22, 22, 0));
}

.st-overlay__meta {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(245, 242, 236, 0.82);
}

.st-overlay__meta a { color: inherit; text-decoration: none; }
.st-overlay__meta a:hover,
.st-overlay__meta a:focus-visible { color: var(--wp--preset--color--groen-licht); }
.st-overlay__addr { margin: 0 0 0.4rem; }

.st-overlay__actions {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	margin-top: 1.2rem;
}

.st-overlay__reserve {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--wit);
	background: var(--wp--preset--color--groen);
	padding: 1em 2.4em;
	transition: background-color 0.35s ease;
}

.st-overlay__reserve:hover,
.st-overlay__reserve:focus-visible {
	background: var(--wp--preset--color--groen-donker);
}

.st-overlay__social {
	display: inline-flex;
	gap: 0.6rem;
}

.st-overlay__social a {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(245, 242, 236, 0.28);
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	color: var(--wp--preset--color--ivoor);
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.st-overlay__social a:hover,
.st-overlay__social a:focus-visible {
	background: var(--wp--preset--color--terracotta-licht);
	border-color: var(--wp--preset--color--terracotta-licht);
	color: var(--wp--preset--color--antraciet-diep);
}

.st-overlay__icon { width: 17px; height: 17px; display: block; }

.st-overlay__tagline {
	margin: 1.4rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	color: var(--wp--preset--color--groen-licht);
}

.st-overlay__tagline em { font-style: italic; }

@media (max-width: 900px) {
	.st-overlay {
		overflow-y: auto;
	}
	.st-overlay__inner {
		height: auto;
		min-height: 100%;
		grid-template-columns: 1fr;
		align-items: start;
		gap: 2.5rem;
		padding-top: 6rem;
	}
	.st-overlay__preview { display: none; }
	.st-overlay__title { font-size: clamp(1.5rem, 3.2vh, 2.1rem); }
}

/* ---- Proloog: hero (openend kader) ---- */
.st-hero {
	position: relative;
	height: 100vh;
	min-height: 640px;
	overflow: hidden;
	background: var(--wp--preset--color--antraciet-diep);
}

.st-hero__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: inset(9% 12% 14% 12%);
	will-change: transform;
}

/* Op desktop stuurt GSAP het kader met transforms (geen clip-path repaints) */
html.st-pinned-ok .st-hero__frame {
	clip-path: none;
}

/* De slides-laag draagt de zoom (één transform voor alle beelden),
   de losse beelden crossfaden met opacity. */
.st-hero__slides {
	position: absolute;
	inset: 0;
	transform: scale(1.12);
	will-change: transform;
}

.st-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.8s ease;
}

.st-hero__img.is-active {
	opacity: 1;
}

/* Slides als bewerkbare wp:image-blokken: de class st-hero__img zit op de
   <figure>; de bovenstaande regels sturen de crossfade op die figure, de
   binnenste <img> vult het kader. */
figure.st-hero__img { margin: 0; padding: 0; }
figure.st-hero__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Alleen wanneer GSAP het kader niet stuurt (mobiel / geen JS / reduced motion) */
html:not(.st-pinned-ok) .st-hero__slides {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: no-preference) {
	html:not(.st-pinned-ok) .st-hero__slides {
		animation: st-herozoom 20s var(--st-ease) forwards;
	}
}

@keyframes st-herozoom {
	from { transform: scale(1.14); }
	to { transform: scale(1.06); }
}

/* De donkere sluier over de hero-foto's is pure decoratie en stond eerst als
   los <div> in een HTML-blok — onbegrijpelijk in de lijstweergave. Nu een
   pseudo-element op het kader. z-index 1 houdt 'm boven de foto's en onder
   .st-hero__content (z-index 2), precies zoals de <div> in de DOM stond. */
.st-hero__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(22,22,22,0.35) 0%, rgba(22,22,22,0) 25%),
		linear-gradient(0deg, rgba(22,22,22,0.72) 0%, rgba(22,22,22,0.12) 52%, rgba(22,22,22,0.04) 72%);
}

.st-hero__content {
	position: absolute;
	left: var(--st-gutter);
	bottom: 15vh;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.6rem;
	max-width: 860px;
}

.st-hero__logo {
	width: min(520px, 62vw);
	height: auto;
	filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.35));
}

.st-hero__line {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	color: var(--wp--preset--color--ivoor);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
	html.js .st-hero__logo,
	html.js .st-hero__line,
	html.js .st-hero__actions {
		opacity: 0;
		transform: translateY(26px);
		animation: st-rise 1s var(--st-ease) forwards;
	}
	html.js .st-hero__line { animation-delay: 0.25s; }
	html.js .st-hero__actions { animation-delay: 0.5s; }
}

@keyframes st-rise {
	to { opacity: 1; transform: translateY(0); }
}

.st-hero__cue {
	position: absolute;
	right: var(--st-gutter);
	bottom: 3.5vh;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ivoor);
	opacity: 0.85;
}

.st-hero__cue span {
	width: 1px;
	height: 40px;
	background: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.st-hero__cue span {
		animation: st-cue 2.4s ease-in-out infinite;
		transform-origin: top;
	}
}

@keyframes st-cue {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(0.35); }
}

@media (max-width: 900px) {
	.st-hero { min-height: 560px; height: 92vh; }
	/* Full-bleed op mobiel: beeld tot de schermranden (geen ingelijst kader).
	   De diashow krijgt wat extra schaal als speelruimte voor de scroll-parallax
	   (die door JS op .st-hero__slides wordt gezet); de idle Ken Burns-zoom uit. */
	.st-hero__frame { clip-path: none; }
	html:not(.st-pinned-ok) .st-hero__slides { animation: none; transform: scale(1.25); }
	.st-hero__content { bottom: 11vh; }
	.st-hero__logo { width: min(340px, 72vw); }
	.st-hero__cue { display: none; }
}

/* --- Subpagina-hero (Over Roots e.a.) --- */
.st-subhero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: var(--wp--preset--color--wit);
}
/* Beeldlaag met 8% overscan zodat de scroll-parallax nooit een rand blootlegt;
   JS zet --hero-shift (px), de sectie clipt de overhang. */
.st-subhero__media {
	position: absolute;
	left: 0;
	right: 0;
	top: -8%;
	height: 116%;
	margin: 0;
	overflow: hidden;
	will-change: transform;
	transform: translate3d(0, var(--hero-shift, 0px), 0);
}
/* Trage inzoom-entree op de <img> (scale); de parallax zit op de wrapper
   (translate) — twee losse transforms die elkaar niet in de weg zitten. */
.st-subhero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform-origin: 58% 42%;
	animation: st-subhero-in 7s var(--st-ease) both;
}
.st-subhero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(22,22,22,0.72) 0%, rgba(22,22,22,0.25) 45%, rgba(22,22,22,0.15) 100%);
}
/* De box mag tot maxw + 2x de goot groeien, zodat de goot-padding de tekst op
   exact dezelfde rasterlijn zet als de secties eronder (die hun goot op de
   sectie zetten en de inhoud daarbinnen op maxw centreren). Met een kale
   `max-width: var(--st-maxw)` kwam de goot er bínnen de gecentreerde 1200px
   nog eens bij: de titel stond boven 1200px viewport 64px verder naar binnen
   dan intro/mensen/pijlers/sfeer. Zelfde correctie als bij .st-keuken__pin en
   .st-momenten__head op de homepage (v1.2.9). */
.st-subhero__inner {
	position: relative;
	z-index: 1;
	max-width: calc(var(--st-maxw) + 2 * var(--st-gutter));
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--st-gutter);
	padding-block: var(--wp--preset--spacing--50);
}
.st-subhero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.02;
	margin: 0.2em 0 0;
}
.st-subhero__lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	max-width: 32ch;
	margin-top: 0.6rem;
	opacity: 0.92;
}
/* De eerste sectie ná de subpagina-hero hugt de hero: minder top-lucht, zodat
   de eerste kop duidelijk onder de (kortere) hero mee in beeld peekt en het
   geen leeg wit vlak lijkt. Alleen de bovenmarge; de onderkant blijft normaal. */
.st-subhero + section { padding-block-start: clamp(1.75rem, 3.5vh, 2.75rem); }
.st-subhero::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	z-index: 2;
	width: 1px;
	height: 3rem;
	background: rgba(255,255,255,0.6);
	transform: translateX(-50%);
	transform-origin: top;
	animation: st-subhero-cue 2.4s ease-in-out infinite;
}
@keyframes st-subhero-cue { 0%,100% { transform: translateX(-50%) scaleY(0.3); opacity: 0.3; } 50% { transform: translateX(-50%) scaleY(1); opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .st-subhero::before { animation: none; } }

/* ---- Subpagina-hero: cinematische lijn (parallax + trage inzoom) -----------
   Eén consistente behandeling voor álle subpagina-hero's: een ruime hero (88vh)
   met een trage inzoom-entree en een zachte scroll-parallax (initSubheroParallax
   zet --hero-shift; de beeldlaag heeft 8% overscan en de sectie clipt de
   overhang, dus de drift legt nooit een rand bloot). Wow, maar kalm. Uit onder
   prefers-reduced-motion; op mobiel een iets lagere hero en geen beweging. */
@keyframes st-subhero-in {
	from { transform: scale(1.14); }
	to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.st-subhero__media img { animation: none; }
	.st-subhero__media { transform: none; }
}
@media (max-width: 900px) {
	.st-subhero { min-height: 58vh; }
}

/* ---- Intro: statement & Bib Gourmand ---- */
.st-intro {
	padding: 12vh var(--st-gutter) 6vh;
}

/* De achtergrond staat apart in een :where() (specificiteit 0,0,0) zodat een
   sectie-variant uit styles/ 'm kan overschrijven. Nodig omdat WordPress alle
   variant-CSS wikkelt in `:root :where(...)`, wat de specificiteit hard op
   (0,1,0) zet — en style.css laadt op de frontend ná die variant-CSS, dus een
   gewone `.st-intro`-regel (ook (0,1,0)) zou het gelijkspel winnen en de
   variant stilzwijgend inert maken. Zie styles/sectie-donker.json. */
:where(.st-intro) {
	background: var(--st-light);
}

.st-intro__inner {
	max-width: var(--st-maxw);
	margin: 0 auto;
}

.st-intro__statement {
	margin: 0 0 3rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.9rem, 4.6vw, 3.6rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--antraciet);
	max-width: 22ch;
}

.st-intro__statement em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--terracotta);
}

.st-intro__body {
	max-width: 46ch;
	margin: 1.5rem auto 0;
	color: var(--wp--preset--color--antraciet-zacht);
	font-size: var(--wp--preset--font-size--medium);
}

.st-badge {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.st-badge__mark {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border: 1px solid var(--wp--preset--color--terracotta);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 0.82rem;
	text-align: center;
	line-height: 1.25;
	color: var(--wp--preset--color--terracotta);
	padding: 0.6em;
}

.st-badge__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--antraciet-zacht);
}

/* ---- Index: sticky galerij-wegwijzer ---- */
.st-index {
	background: var(--st-light);
	padding: 6vh var(--st-gutter) 8vh;
}

.st-index__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	max-width: var(--st-maxw);
	margin: 0 auto;
	align-items: start;
}

.st-index__stage {
	position: sticky;
	top: calc(50vh - 34vh);
}

.st-index__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	max-height: 68vh;
	overflow: hidden;
	background: var(--wp--preset--color--ivoor);
}

/* Rustige ambient-diashow: beelden wisselen langzaam vanzelf,
   hover op een regel toont direct het bijbehorende beeld */
.st-index__stage-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 1.2s ease, transform 2.4s var(--st-ease);
}

.st-index__stage-img.is-active {
	opacity: 1;
	transform: scale(1);
}

.st-index__stage-label {
	position: absolute;
	left: 1.4rem;
	bottom: 1.2rem;
	z-index: 1;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--wp--preset--color--wit);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
	transition: opacity 0.4s ease;
}

.st-index__stage-label.is-switching {
	opacity: 0;
}

.st-index__list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(31, 31, 31, 0.14);
}

.st-index__row {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 2rem;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
	padding: 2.1rem 0.5rem;
	border-bottom: 1px solid rgba(31, 31, 31, 0.14);
	text-decoration: none;
	color: var(--wp--preset--color--antraciet);
}

/* Per-regel thumbnail: alleen mobiel (desktop toont het grote beeldpodium). */
.st-index__thumb {
	display: none;
}

/* Regelnummer als CSS-teller i.p.v. een handgetypt <span> in een HTML-blok.
   Scheelt de beheerder een onbegrijpelijk blok per regel in de lijstweergave,
   én de nummering klopt nu altijd vanzelf als hij regels versleept of
   toevoegt. Het pseudo-element is het eerste grid-item van de rij (kolom 1). */
.st-index__list {
	counter-reset: st-index;
}

.st-index__row {
	counter-increment: st-index;
}

.st-index__row::before {
	content: counter(st-index, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--antraciet-zacht);
	transition: color 0.35s ease;
}

.st-index__text {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.st-index__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--antraciet-zacht);
	transition: color 0.35s ease, transform 0.5s var(--st-ease);
	transform-origin: left center;
}

.st-index__desc {
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--wp--preset--color--antraciet-zacht);
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.45s ease, max-height 0.45s var(--st-ease);
}

/* Pijl als pseudo-element i.p.v. een <span> in een HTML-blok: pure decoratie,
   hoort niet als blok in een bewerkbare sectie. Laatste grid-item (kolom 3).
   aria-hidden is niet nodig — pseudo-content wordt niet voorgelezen. */
.st-index__row::after {
	content: "→";
	font-size: 1.15rem;
	color: var(--wp--preset--color--groen);
	transform: translateX(-8px);
	opacity: 0;
	transition: all 0.35s var(--st-ease);
}

/* Actieve regel: door scroll of hover */
.st-index__row.is-active::before,
.st-index__row:hover::before,
.st-index__row:focus-visible::before {
	color: var(--wp--preset--color--terracotta);
}

.st-index__row.is-active .st-index__title,
.st-index__row:hover .st-index__title,
.st-index__row:focus-visible .st-index__title {
	color: var(--wp--preset--color--antraciet);
	transform: translateX(6px);
}

.st-index__row.is-active .st-index__desc,
.st-index__row:hover .st-index__desc,
.st-index__row:focus-visible .st-index__desc {
	opacity: 1;
	max-height: 3.2em;
}

.st-index__row.is-active::after,
.st-index__row:hover::after,
.st-index__row:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* Bewerkbare regels: de foto is een wp:image (<figure>), titel/subtitel zijn
   <p>'s en de hele regel is klikbaar via een uitgerekte overlay-link. */
.st-index__row { position: relative; }
.st-index__link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	text-decoration: none;
}
figure.st-index__thumb { margin: 0; padding: 0; }
figure.st-index__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
p.st-index__title,
p.st-index__desc { margin: 0; }

/* Zonder JS: alles gewoon leesbaar */
html:not(.js) .st-index__desc {
	opacity: 1;
	max-height: none;
}

html:not(.js) .st-index__title {
	color: var(--wp--preset--color--antraciet);
}

@media (max-width: 900px) {
	.st-index__grid {
		grid-template-columns: 1fr;
	}
	/* Geen groot beeldpodium op mobiel: elke regel krijgt een eigen thumbnail,
	   zodat direct duidelijk is wat bij wat hoort en er niets "verdwijnt". */
	.st-index__stage {
		display: none;
	}
	.st-index__row {
		grid-template-columns: 68px minmax(0, 1fr) 1.25rem;
		gap: 1rem;
		align-items: center;
		padding: 1.1rem 0.25rem;
	}
	.st-index__thumb {
		display: block;
		width: 68px;
		height: 68px;
		object-fit: cover;
	}
	/* Geen regelnummer op mobiel; de thumbnail neemt kolom 1 over. */
	.st-index__row::before { display: none; }
	/* Alle regels gelijk en meteen leesbaar (geen scroll-afhankelijk accent) */
	.st-index__title {
		font-size: 1.35rem;
		color: var(--wp--preset--color--antraciet);
	}
	.st-index__row .st-index__title { transform: none; }
	.st-index__desc {
		opacity: 1;
		max-height: none;
	}
	/* Pijl altijd subtiel zichtbaar als duidelijke link-hint */
	.st-index__row::after {
		opacity: 0.5;
		transform: none;
	}
}

/* ---- Proeverij: full-bleed foto-triptiek (tussen index en keuken) ----
   Rand-tot-rand band met drie gerechtfoto's; elk beeld drijft bij het scrollen
   met een net iets ander tempo (versprongen parallax, main.js). Compact van
   hoogte en géén pinning, dus de pagina wordt niet langer. Doorbreekt het
   split-ritme van index/keuken/mensen en wakkert de eetlust aan. ---- */
.st-proeverij {
	position: relative;
	background: var(--st-light);
	padding-block: clamp(2.5rem, 6vh, 4.5rem) 0;
	overflow: hidden;
}

.st-proeverij__intro {
	width: min(100% - 2 * var(--st-gutter), var(--st-maxw));
	margin: 0 auto clamp(1.5rem, 3vh, 2.25rem);
	text-align: center;
}

.st-proeverij__intro > * { margin-block-start: 0; }
.st-proeverij__intro .st-eyebrow { justify-content: center; }

.st-proeverij__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1.08;
	margin: 0.35rem 0 0;
}

.st-proeverij__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--groen);
}

/* Full-bleed: de rij loopt van schermrand tot schermrand (de homepage-main is
   een is-layout-flow van rand tot rand). Drie gelijke kolommen, fijne naad. */
.st-proeverij__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	height: clamp(300px, 44vh, 520px);
}

.st-proeverij__frame {
	position: relative;
	margin: 0;
	height: 100%;
	overflow: hidden;
}

/* Ruime overscan (24% boven+onder) zodat het sterkere parallax-bereik (±14%,
   uniform over de drie beelden — zie main.js) nooit een rand blootlegt, met
   comfortabele marge. */
.st-proeverij__frame img {
	position: absolute;
	inset: -24% 0;
	width: 100%;
	height: 148%;
	object-fit: cover;
	will-change: transform;
}

.st-proeverij__frame.wp-block-image { display: block; }

/* Mobiel: geen gestapelde (hoge) reeks, maar een compacte full-bleed
   sfeer-strip — de drie beelden blijven náást elkaar in een lage band, met een
   fijne naad ertussen. Rustig, weinig verticale ruimte, puur sfeer. De beelden
   staan gecentreerd stil (parallax draait alleen op desktop; de overscan
   toont dus het midden van elk beeld). */
@media (max-width: 640px) {
	.st-proeverij__grid {
		gap: 2px;
		height: clamp(150px, 30vh, 210px);
	}
	.st-proeverij__intro {
		margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
	}
}

/* ---- Hoofdstuk 2: de keuken — drie categorie-kaarten (lunch/diner/à la carte).
   Geen pinning meer: de kaarten staan meteen in beeld en faden bij binnenkomst
   in (via .st-reveal op de stappen, met een stagger). N-los: het raster reflowt
   bij een extra categorie. Bewust een contained kaartraster — anders dan de
   full-bleed proeverij-band erboven en de beeld+tekst-split eronder. ---- */
.st-keuken {
	position: relative;
	background: var(--st-light);
}

.st-keuken__pin {
	max-width: calc(var(--st-maxw) + 2 * var(--st-gutter));
	margin: 0 auto;
	padding: 8vh var(--st-gutter) 9vh;
	box-sizing: border-box;
}

/* Het gedeelde beeldpodium was alleen voor de gepinde crossfade; niet meer nodig. */
.st-keuken__media { display: none; }

.st-keuken__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}

.st-keuken__step {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--wit);
	padding: 0 1.5rem 1.75rem;
	box-shadow: 0 16px 40px rgba(31, 31, 31, 0.07);
	overflow: hidden;
}

/* Stagger: de drie kaarten faden na elkaar in. */
.st-keuken__step:nth-child(2) { transition-delay: 0.1s; }
.st-keuken__step:nth-child(3) { transition-delay: 0.2s; }

.st-keuken__step-img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0 -1.5rem 1.5rem;
}

.st-keuken__step-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--st-ease);
}

.st-keuken__step:hover .st-keuken__step-img img { transform: scale(1.04); }

.st-keuken__step .st-eyebrow { margin-top: 0.25rem; }

.st-keuken__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.35rem, 1.9vw, 1.7rem);
	line-height: 1.15;
	margin: 0.4rem 0 0.75rem;
}

.st-keuken__text {
	margin: 0 0 1.5rem;
	max-width: none;
}

/* De knop onderaan de kaart, ongeacht de tekstlengte (gelijke kaart-look). */
.st-keuken__step .wp-block-buttons { margin-top: auto; }

@media (max-width: 900px) {
	.st-keuken__pin { padding: 4rem 1.5rem; }
	.st-keuken__steps { grid-template-columns: 1fr; gap: 2rem; }
	.st-keuken__step-img { max-height: 44vh; }
}

/* ---- Hoofdstuk 3: de mensen ---- */
.st-mensen {
	background: var(--st-light);
	padding: 8vh var(--st-gutter) 10vh;
}

/* Kolomverdeling apart in :where() — zie de toelichting bij .st-intro.
   Draagt de variant styles/sectie-beeld-rechts.json. */
:where(.st-mensen__grid) {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.st-mensen__grid {
	display: grid;
	gap: clamp(2.5rem, 6vw, 6rem);
	max-width: var(--st-maxw);
	margin: 0 auto;
	align-items: start;
}

.st-mensen__media {
	position: sticky;
	top: 12vh;
}

.st-mensen__parallax {
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.st-mensen__parallax img {
	width: 100%;
	height: 112%;
	object-fit: cover;
	will-change: transform;
}

.st-mensen__parallax .wp-block-image { margin: 0; height: 100%; }
.st-mensen__parallax .wp-block-image img { height: 112%; }

.st-mensen__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.05;
	margin: 0 0 1.5rem;
}

.st-mensen__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--groen);
}

.st-mensen__body p {
	max-width: 56ch;
}

.st-quote {
	margin: 2.5rem 0;
	padding: 0;
	border: none;
}

.st-quote p {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.3;
	color: var(--wp--preset--color--groen);
	margin: 0;
	max-width: 24ch;
}

.st-mensen__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

@media (max-width: 900px) {
	.st-mensen { padding-top: 4rem; padding-bottom: 5rem; }
	/* Twee classes (0,2,0) zodat deze mobiele stand altijd wint van een
	   sectie-variant, die WP hard op (0,1,0) zet. Een variant kan zelf geen
	   media-query bevatten (zie de noot bij .is-style-sectie-beeld-rechts
	   hieronder), dus die zou anders ook op mobiel meerdere kolommen zetten. */
	.st-mensen .st-mensen__grid { grid-template-columns: 1fr; }
	.st-mensen__media { position: static; }
	/* Beeld blijft op mobiel bovenaan, ook als de variant "Beeld rechts" gekozen is.
	   Die variant zet op desktop `order: 2/1`; zonder deze regel zou de tekst op
	   mobiel bóven het beeld komen, terwijl het beeld daar hoort (zie de mobiele
	   herinterpretatie, v1.1.19).

	   Waarom deze correctie hier staat en niet in de variant-JSON: WP's
	   process_blocks_custom_css() (class-wp-theme-json.php:1529) strookt alle `}`
	   weg en splitst dan op `{`; bij `count() !== 2` volgt een `continue`. Een
	   @media-blok in de css-sleutel van een variant levert 3 delen op. De regels
	   erbinnen verliezen daardoor hun @media-wikkel en gaan onvoorwaardelijk
	   gelden — de variant zou dan stilzwijgend niets meer doen. Een variant kan
	   dus géén media-query bevatten.

	   Gescoped op de variant-class, zodat secties zónder variant onaangeroerd
	   blijven. Twee classes = (0,2,0) en winnen altijd van de (0,1,0) waartoe WP
	   variant-CSS comprimeert (`:root :where(...)`), ongeacht laadvolgorde. */
	.is-style-sectie-beeld-rechts .st-mensen__media { order: 1; }
	.is-style-sectie-beeld-rechts .st-mensen__body { order: 2; }
	.st-mensen__parallax {
		aspect-ratio: 4 / 3;
		max-height: 48vh;
	}
	.st-mensen__parallax img {
		height: 100%;
	}
	.st-momenten__btn { width: 42px; height: 42px; }

	/* Compactere secties op mobiel: geen grote vh-gebaseerde witruimtes */
	.st-intro { padding: 3.5rem var(--st-gutter) 1rem; }
	.st-index { padding: 0.5rem var(--st-gutter) 3.5rem; }
	.st-index__row { padding: 1.4rem 0.5rem; }
	.st-momenten { padding: 3rem 0 2rem; }
	.st-momenten__head { margin-bottom: 2rem; }
	/* Rem i.p.v. vh: op mobiel is de dramatische donkere aanloop overbodig
	   en zorgt vh voor onvoorspelbaar grote lege ruimte (adresbalk e.d.) */
	.st-praktisch { padding: 3.5rem var(--st-gutter) 3rem; }
	.st-praktisch__actions { margin-bottom: 2.5rem; }
	.st-fade { height: 3.5rem; }
}

/* ---- Hoofdstuk 4: momenten ---- */
.st-momenten {
	background: var(--st-light);
	padding: 8vh 0 10vh;
	overflow: hidden;
}

.st-momenten__head {
	/* Zelfde raster als de rest: titel op de 64px-lijn, uitgelijnd met de
	   eerste kaart (maxw + 2×goot, zodat de goot-padding klopt). */
	max-width: calc(var(--st-maxw) + 2 * var(--st-gutter));
	margin: 0 auto 3rem;
	padding: 0 var(--st-gutter);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.st-momenten__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(2.2rem, 4.6vw, 3.6rem);
	line-height: 1.05;
	margin: 0;
}

.st-momenten__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--terracotta);
}

/* Pijlknoppen: heldere, voorspelbare besturing van de strip */
.st-momenten__nav {
	display: flex;
	gap: 0.75rem;
}

.st-momenten__btn {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(31, 31, 31, 0.3);
	border-radius: 50%;
	color: var(--wp--preset--color--antraciet);
	font-size: 1.1rem;
	cursor: pointer;
	transition: all 0.35s ease;
}

.st-momenten__btn:hover:not(:disabled),
.st-momenten__btn:focus-visible:not(:disabled) {
	background: var(--wp--preset--color--groen);
	border-color: var(--wp--preset--color--groen);
	color: var(--wp--preset--color--wit);
}

.st-momenten__btn:disabled {
	opacity: 0.25;
	cursor: default;
}

/* Dot-indicator: één puntje per kaart, in JS opgebouwd (initMomenten) en
   tussen de pijlen geplaatst. Actieve dot volgt de scrollpositie. */
.st-momenten__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0.25rem;
}
.st-momenten__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(31, 31, 31, 0.2);
	transition: background 0.3s ease, width 0.3s ease;
}
.st-momenten__dot.is-active {
	width: 20px;
	border-radius: 4px;
	background: var(--wp--preset--color--terracotta);
}

.st-momenten__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Snap-punten respecteren de goot, zodat de eerste kaart uitlijnt met de content */
	scroll-padding-left: max(var(--st-gutter), calc((100vw - var(--st-maxw)) / 2));
	scroll-padding-right: max(var(--st-gutter), calc((100vw - var(--st-maxw)) / 2));
	scrollbar-width: none;
}

.st-momenten__viewport::-webkit-scrollbar { display: none; }

.st-momenten__track {
	display: flex;
	/* Boven uitlijnen: een uitgeklapte event-kaart groeit zo alleen zelf,
	   in plaats van alle kaarten mee te rekken (default stretch). */
	align-items: flex-start;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	/* Eerste kaart lijnt uit met de rest van de content */
	padding: 0 max(var(--st-gutter), calc((100vw - var(--st-maxw)) / 2));
	width: max-content;
}

.st-card {
	scroll-snap-align: start;
	width: min(420px, 78vw);
	flex-shrink: 0;
	background: var(--wp--preset--color--ivoor);
	display: flex;
	flex-direction: column;
}

.st-card__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.st-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--st-ease);
}

.st-card:hover .st-card__media img {
	transform: scale(1.05);
}

.st-card__body {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	flex-grow: 1;
}

.st-card__kicker {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

.st-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.55rem;
	line-height: 1.12;
}

.st-card__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

.st-card__link {
	margin-top: auto;
	padding-top: 0.8rem;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--groen);
}

.st-card__link:hover { color: var(--wp--preset--color--groen-donker); }

/* Event-kaart: "Bekijk event" is een knop die de volledige eventtekst
   in-place uitklapt (geen aparte event-pagina meer). */
.st-card__toggle {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	/* Alleen de lettersoort van de knop resetten; grootte/gewicht/kleur/hoofdletters
	   komen uit .st-card__link (font:inherit blies de grootte eerder op). */
	font-family: inherit;
}

.st-card__toggle-less { display: none; }
.st-card__toggle[aria-expanded="true"] .st-card__toggle-more { display: none; }
.st-card__toggle[aria-expanded="true"] .st-card__toggle-less { display: inline; }

.st-card__toggle-icon {
	font-size: 0.9em;
	line-height: 1;
	transition: transform 0.3s var(--st-ease);
}
.st-card__toggle[aria-expanded="true"] .st-card__toggle-icon { transform: rotate(180deg); }

/* Soepel uitklappen. De grid-0fr/1fr-truc faalt hier omdat .st-card__full een
   flex-item in een flex-kolom is (1fr lost dan op naar 0); daarom animeert
   initMomenten() de expliciete pixelhoogte (open: scrollHeight → auto, dicht: 0). */
.st-card__full {
	overflow: hidden;
	height: 0;
	transition: height 0.45s var(--st-ease);
}

.st-card__full-inner p {
	margin: 0 0 0.8rem;
	font-size: 0.95rem;
	line-height: 1.6;
}
.st-card__full-inner p:first-child { margin-top: 0.9rem; }
.st-card__full-inner p:last-child { margin-bottom: 0; }

@media ( prefers-reduced-motion: reduce ) {
	.st-card__full { transition: none; }
	.st-card__toggle-icon { transition: none; }
}

/* ---- Hoofdstuk 4: gasten aan het woord (Google-reviews) ---- */
.st-reviews {
	background: var(--st-light);
	padding: 4vh var(--st-gutter) 10vh;
}

.st-reviews__inner {
	max-width: var(--st-maxw);
	margin: 0 auto;
}

.st-reviews__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}

.st-reviews__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(2.2rem, 4.6vw, 3.6rem);
	line-height: 1.05;
	margin: 0;
}

.st-reviews__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--groen);
}

.st-reviews__score {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.st-reviews__stars {
	color: var(--wp--preset--color--terracotta);
	font-size: 1.35rem;
	letter-spacing: 0.15em;
}

.st-reviews__rating {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--wp--preset--color--antraciet);
}

.st-reviews__meta {
	font-size: 0.9rem;
	color: var(--wp--preset--color--antraciet-zacht);
}

/* Automatische slider: horizontale track met scroll-snap; op desktop ~3 kaarten
   naast elkaar, op mobiel 1 per keer. Auto-doorloop + swipe via JS (initReviews). */
.st-reviews__slider {
	position: relative;
}

.st-reviews__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.st-reviews__viewport::-webkit-scrollbar { display: none; }

.st-reviews__track {
	display: flex;
	gap: 1.5rem;
}

.st-reviews__card {
	flex: 0 0 calc((100% - 3rem) / 3);
	box-sizing: border-box;
	scroll-snap-align: start;
	margin: 0;
	background: var(--wp--preset--color--ivoor);
	padding: 2rem 1.9rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.st-reviews__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 1.75rem;
}
.st-reviews__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(31, 31, 31, 0.15);
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--antraciet);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, opacity 0.3s ease;
}
.st-reviews__btn:hover { background: var(--wp--preset--color--ivoor); }
.st-reviews__btn:disabled { opacity: 0.3; cursor: default; }

.st-reviews__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.st-reviews__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(31, 31, 31, 0.2);
	transition: background 0.3s ease, width 0.3s ease;
}
.st-reviews__dot.is-active {
	width: 20px;
	border-radius: 4px;
	background: var(--wp--preset--color--terracotta);
}

.st-reviews__stars--small {
	font-size: 0.95rem;
}

.st-reviews__quote {
	margin: 0;
	padding: 0;
	border: none;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--wp--preset--color--antraciet);
	flex-grow: 1;
}

.st-reviews__quote::before {
	content: "\201C";
}

.st-reviews__quote::after {
	content: "\201D";
}

.st-reviews__author {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.85rem;
}

.st-reviews__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--groen);
}

.st-reviews__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.st-reviews__avatar-mono {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--wp--preset--color--wit);
	text-transform: uppercase;
	line-height: 1;
}

.st-reviews__author-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--antraciet);
}

.st-reviews__when {
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--antraciet-zacht);
}

.st-reviews__all {
	margin: 3rem 0 0;
}

@media (max-width: 900px) {
	.st-reviews {
		padding: 1rem var(--st-gutter) 3.5rem;
	}
	.st-reviews__card {
		flex-basis: 100%;
	}
	.st-reviews__head {
		margin-bottom: 2rem;
	}
	.st-reviews__all {
		margin-top: 2rem;
	}
}

/* ---- Epiloog: praktisch ---- */
/* Achtergrond apart in :where() — zie de toelichting bij .st-intro. */
:where(.st-praktisch) {
	background: var(--wp--preset--color--antraciet-diep);
}

.st-praktisch {
	position: relative;
	color: var(--wp--preset--color--ivoor);
	padding: clamp(9rem, 22vh, 15rem) var(--st-gutter) clamp(6rem, 12vh, 9rem);
	text-align: center;
}

.st-praktisch__inner {
	max-width: 620px;
	margin: 0 auto;
}

/* Beeldmerk als verfijnde signatuur (CSS-decoratie, geen bewerkbaar blok) */
.st-praktisch__inner::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 1.7rem;
	background: var(--wp--preset--color--terracotta-licht);
	-webkit-mask: url(../images/beeldmerk.svg) center / contain no-repeat;
	        mask: url(../images/beeldmerk.svg) center / contain no-repeat;
	opacity: 0.92;
}

/* Eyebrow gecentreerd, zonder het inleidende streepje */
.st-praktisch .st-eyebrow {
	justify-content: center;
}

.st-praktisch .st-eyebrow::before {
	display: none;
}

.st-praktisch__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(2.6rem, 7vw, 5rem);
	line-height: 1.02;
	color: var(--wp--preset--color--wit);
	margin: 0 0 1.4rem;
}

/* Fijne terracotta-streep onder de kop */
.st-praktisch__title::after {
	content: "";
	display: block;
	width: 46px;
	height: 1px;
	margin: 1.5rem auto 0;
	background: var(--wp--preset--color--terracotta-licht);
	opacity: 0.55;
}

.st-praktisch__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--terracotta-licht);
}

.st-praktisch__lead {
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(245, 242, 236, 0.78);
	max-width: 36ch;
	margin: 0 auto 2.4rem;
}

.st-praktisch__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.8rem;
	flex-wrap: wrap;
	margin-bottom: 0;
}

.st-praktisch__alt {
	margin: 0;
	font-size: 0.95rem;
}

.st-praktisch__alt a { color: var(--wp--preset--color--wit); }

.st-praktisch__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 3rem;
	border-top: 1px solid rgba(255,255,255,0.14);
	padding-top: 3rem;
	font-size: 0.95rem;
}

.st-praktisch__subhead {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-licht);
	margin: 0 0 1rem;
}

.st-praktisch__col a { color: var(--wp--preset--color--ivoor); }

/* ---- Footer ---- */
/* Zelfde goot en breedte als alle secties, zodat alles één geheel voelt */
/* ---- Footer: grande finale (sluit filmisch aan op de donkere epiloog) ---- */
footer.st-footer,
.st-footer.wp-block-group {
	padding: clamp(3.5rem, 7vh, 6rem) var(--st-gutter) 2rem !important;
	position: relative;
	overflow: hidden;
}

/* Fijne lichtlijn bovenaan als scheiding met de epiloog */
.st-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.16) 78%, transparent);
}

/* Alle rijen op dezelfde breedte + gecentreerd; WP-flow-marges uit */
.st-footer__top,
.st-footer__grid,
.st-footer__bottom {
	max-width: var(--st-maxw);
	margin-left: auto;
	margin-right: auto;
}
.st-footer > * { margin-block: 0 !important; }
.st-footer :where(.wp-block-group) > * { margin-block: 0; }

/* Bovenrij: merkmoment links, review-badge rechts op de basislijn */
.st-footer__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	flex-wrap: wrap;
	padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

/* Merkmoment */
.st-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.st-footer__logo {
	width: min(210px, 52vw);
	height: auto;
	filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.4));
}
.st-footer__tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.6rem, 4.5vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ivoor);
}
.st-footer__tagline em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--terracotta-licht);
}

/* Google-beoordeling-badge (footer) */
.st-footer__reviews {
	text-align: right;
}
.st-google-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--wp--preset--color--ivoor);
	font-family: var(--wp--preset--font-family--body);
}
.st-google-badge__stars {
	align-self: center;
	color: #E8B23A; /* warm goud voor de sterren */
	font-size: 1rem;
	letter-spacing: 0.06em;
	line-height: 1;
}
.st-google-badge__score {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--wp--preset--color--wit);
}
.st-google-badge__meta {
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.62);
}
a.st-google-badge .st-google-badge__meta {
	transition: color 0.3s ease;
}
a.st-google-badge:hover .st-google-badge__meta,
a.st-google-badge:focus-visible .st-google-badge__meta {
	color: rgba(255, 255, 255, 0.9);
}

/* Info-grid */
.st-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.1fr 1.1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding: clamp(2.5rem, 5vh, 3.5rem) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Labels — eyebrow-stijl met terracotta tick */
.st-footer__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-licht);
	margin: 0 0 1.15rem;
	display: flex;
	align-items: center;
	gap: 0.6em;
}
.st-footer__label::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

/* Kolomteksten */
.st-footer__addr,
.st-footer__lines,
.st-footer__social {
	margin: 0;
	font-style: normal;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ivoor);
}
.st-footer__lines {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.st-footer__mapslink {
	display: inline-block;
	margin-top: 0.6rem;
	font-size: 0.9rem;
}
/* Social — icoonlinks (Instagram/Facebook) */
.st-footer__social {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.9rem;
	margin-top: 1rem;
}
.st-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: var(--wp--preset--color--ivoor);
	transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--st-ease);
}
.st-footer__social a:hover,
.st-footer__social a:focus-visible {
	color: var(--wp--preset--color--terracotta-licht);
	border-color: var(--wp--preset--color--terracotta-licht);
	transform: translateY(-2px);
}
.st-footer__icon {
	width: 17px;
	height: 17px;
	display: block;
}

/* Links met geanimeerde terracotta-underline */
.st-footer a {
	color: var(--wp--preset--color--ivoor);
	text-decoration: none;
	transition: color 0.3s ease;
}
.st-footer__addr a,
.st-footer__lines a,
.st-footer__links a,
.st-footer__mapslink {
	position: relative;
}
.st-footer__addr a::after,
.st-footer__lines a::after,
.st-footer__links a::after,
.st-footer__mapslink::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--terracotta-licht);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--st-ease);
}
.st-footer__lines a:hover,
.st-footer__links a:hover,
.st-footer__mapslink:hover {
	color: var(--wp--preset--color--terracotta-licht);
}
.st-footer__lines a:hover::after,
.st-footer__links a:hover::after,
.st-footer__mapslink:hover::after {
	transform: scaleX(1);
}

/* Openingstijden (gedeeld blok) */
.st-footer__col--hours .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.st-footer__col--hours p {
	margin: 0;
	font-size: 0.9rem !important;
	line-height: 1.55;
	color: var(--wp--preset--color--ivoor);
}
.st-footer__col--hours strong {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--wit);
	margin-bottom: 0.3rem;
}

/* Ontdek Roots — tweekoloms lijst */
.st-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem 1.5rem;
	font-size: 0.95rem;
}

/* Onderbalk */
.st-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 1.5rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--antraciet-zacht);
}
.st-footer__copy { margin: 0; }
.st-footer__toplink {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivoor);
	white-space: nowrap;
	transition: color 0.3s ease;
}
.st-footer__toplink:hover { color: var(--wp--preset--color--terracotta-licht); }
.st-footer__toplink span { display: inline-block; transition: transform 0.3s var(--st-ease); }
.st-footer__toplink:hover span { transform: translateY(-3px); }

/* Mobiel: tweekoloms grid, compacter */
@media (max-width: 781px) {
	footer.st-footer,
	.st-footer.wp-block-group {
		padding-top: 3rem !important;
		padding-bottom: 1.5rem !important;
	}
	.st-footer__top {
		align-items: flex-start;
		gap: 1.5rem;
	}
	.st-footer__reviews { text-align: left; }
	.st-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 1.5rem;
	}
	.st-footer__links {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
	.st-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
	}
}

/* ---- Focus zichtbaar ---- */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--groen-licht);
	outline-offset: 3px;
}

/* --- Over Roots: zo begon het --- */
.st-ontstaan {
	background: var(--wp--preset--color--ivoor);
	padding-block: var(--wp--preset--spacing--50);
}
.st-ontstaan__inner {
	width: min(100% - 2 * var(--st-gutter), 720px);
	margin-inline: auto;
	text-align: center;
}
.st-ontstaan__quote {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0.6em 0 0;
}
.st-ontstaan__quote em { color: var(--wp--preset--color--terracotta); font-style: italic; }
.st-ontstaan__body {
	margin: 1.4rem auto 0;
	max-width: 52ch;
	color: var(--wp--preset--color--antraciet-zacht);
}
.st-ontstaan__action { margin-top: 2rem; justify-content: center; }

/* --- Over Roots: pijlers --- */
.st-pijlers { padding-block: var(--wp--preset--spacing--50); }
.st-pijlers__inner {
	width: min(100% - 2 * var(--st-gutter), var(--st-maxw));
	margin-inline: auto;
}
/* Kolomaantal apart in :where() — zie de toelichting bij .st-intro.
   Draagt de varianten styles/sectie-2-koloms.json en sectie-4-koloms.json. */
:where(.st-pijlers__grid) {
	grid-template-columns: repeat(3, 1fr);
}

.st-pijlers__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}
.st-pijlers__item { border-top: 1px solid var(--wp--preset--color--groen-licht); padding-top: 1.25rem; }
.st-pijlers__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.5rem;
}
.st-pijlers__item p { color: var(--wp--preset--color--antraciet-zacht); margin: 0; }
@media (max-width: 782px) {
	/* Twee classes (0,2,0) i.p.v. één, zodat deze regel altijd wint van een
	   kolom-variant (sectie-2-koloms/sectie-4-koloms): variant-CSS wordt door WP
	   gewikkeld in ':root :where(...)' en blijft daardoor vast op (0,1,0), en kan
	   zelf geen @media bevatten (process_blocks_custom_css() in
	   class-wp-theme-json.php strookt '}' en splitst op '{'; een @media-blok
	   levert 3 delen op en wordt weggegooid). Alleen de selector is verstevigd,
	   de declaratie is ongewijzigd — geen zichtbaar effect voor secties zonder
	   variant. */
	.st-pijlers .st-pijlers__grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
}

/* --- Over Roots: epiloog / CTA --- */
/* Achtergrond apart in :where() — zie de toelichting bij .st-intro. */
:where(.st-cta) {
	background: var(--wp--preset--color--antraciet);
}

.st-cta {
	position: relative;
	color: var(--wp--preset--color--wit);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	text-align: center;
}
.st-cta__inner {
	position: relative;
	z-index: 1;
	width: min(100% - 2 * var(--st-gutter), 720px);
	margin-inline: auto;
}
.st-cta__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.03;
	margin: 0.3em 0 0;
}
.st-cta__title em { font-style: italic; color: var(--wp--preset--color--terracotta-licht); }
.st-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-top: 2.5rem;
}
/* Gedempt, maar leesbaar op antraciet. Stond op --antraciet-zacht (#5B5B58):
   dat is de "zachte tekst"-kleur voor lichte secties en haalde op deze donkere
   achtergrond maar 2,42:1 — ruim onder de WCAG AA-eis van 4,5:1 voor tekst van
   deze grootte. Dezelfde gedempt-op-donker waarde als in de footer (9,1:1). */
.st-cta__alt { margin-top: 1.5rem; color: rgba(255, 255, 255, 0.62); }
.st-cta__alt a { color: var(--wp--preset--color--wit); }

/* --- Over Roots: sfeerbeelden (rustige parallax-rij) --- */
.st-sfeer { padding-block: var(--wp--preset--spacing--40); }
.st-sfeer__intro {
	width: min(100% - 2 * var(--st-gutter), var(--st-maxw));
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--30);
}
.st-sfeer__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0.3rem 0 0;
}
/* Kolomaantal apart in :where() — zie de toelichting bij .st-intro.
   Draagt de varianten styles/sectie-2-koloms.json en sectie-4-koloms.json. */
:where(.st-sfeer__grid) {
	grid-template-columns: repeat(3, 1fr);
}

.st-sfeer__grid {
	width: min(100% - 2 * var(--st-gutter), var(--st-maxw));
	margin-inline: auto;
	display: grid;
	gap: 1rem;
}
.st-sfeer__frame {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.st-sfeer__frame img {
	position: absolute;
	inset: -10% 0;
	width: 100%;
	height: 120%;
	object-fit: cover;
	display: block;
	will-change: transform;
}
@media (max-width: 782px) {
	/* Zelfde reden als bij .st-pijlers__grid hierboven: twee classes (0,2,0) om
	   altijd te winnen van een kolom-variant, ongeacht welke gekozen is of in welke
	   volgorde de stylesheets laden. */
	.st-sfeer .st-sfeer__grid { grid-template-columns: 1fr; gap: 0.75rem; }
	.st-sfeer__frame { aspect-ratio: 3 / 2; }
}
.st-sfeer__frame.wp-block-image { display: block; }

/* --- Mobiele sectie-afstanden: compacter, minder grote lege ruimtes tussen
   de secties. Staat bewust achteraan in het bestand zodat het wint van de
   vh-basispadding die verderop gedefinieerd is (gelijke specificiteit →
   laatste in bronvolgorde wint; de eerdere mobiele override werd zo genegeerd). --- */
@media (max-width: 900px) {
	.st-mensen { padding-top: 3.5rem; padding-bottom: 3.5rem; }
	.st-momenten { padding: 2.5rem 0 2rem; }
	.st-praktisch { padding: 3.5rem var(--st-gutter) 3rem; }

	/* Over Roots-secties leunen op de spacing-tokens (XL = 6rem, XXL = 10rem).
	   Dat is het desktopritme; op een telefoon levert het schermenlange lege
	   vlakken op (de CTA begon met 160px niets). Zelfde mobiele maat als de
	   secties hierboven, zodat de hele pagina één ritme houdt. */
	.st-ontstaan { padding-block: 3.5rem; }
	.st-pijlers { padding-block: 3.5rem; }
	.st-sfeer { padding-block: 2.5rem; }
	.st-cta { padding-block: 5rem 3.5rem; }
	.st-subhero__inner { padding-block: 3.5rem; }
	.st-pijlers__grid { margin-top: 2rem; }
}

/* --- Eigen reserveer-FAB. Vervangt de standaard-knop van Guestplan (die staat
   uit via de plugin-optie "Hide Button"); opent dezelfde popup via
   _gstpln.openWidget() — zie initReserve() in main.js. Zit op z-index 240,
   net onder het overlay-menu (250) zodat het fullscreen-menu 'm bedekt als het
   openstaat. Verborgen tot de widget klaar is (JS voegt .is-ready toe) zodat de
   gast nooit op een dode knop klikt. --- */
.st-fab-reserve {
	position: fixed;
	right: clamp(1rem, 4vw, 2rem);
	bottom: clamp(1rem, 4vw, 2rem);
	z-index: 240;
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--wit);
	background: var(--wp--preset--color--groen);
	border: 1px solid var(--wp--preset--color--groen);
	/* Rechthoekig, net als de andere .st-btn-knoppen (geen pil). */
	padding: 1em 2.4em;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(31, 31, 31, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.5s var(--st-ease), transform 0.5s var(--st-ease),
		background 0.35s ease, border-color 0.35s ease;
}

.st-fab-reserve.is-ready {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.st-fab-reserve:hover,
.st-fab-reserve:focus-visible {
	background: var(--wp--preset--color--groen-donker);
	border-color: var(--wp--preset--color--groen-donker);
}

.st-fab-reserve:focus-visible {
	outline: 2px solid var(--wp--preset--color--wit);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.st-fab-reserve.is-ready:hover,
	.st-fab-reserve.is-ready:focus-visible {
		transform: translateY(-2px);
	}
}

/* Het menu opent fullscreen — de FAB dan verbergen (staat er anders half onder). */
body.st-menu-open .st-fab-reserve {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 600px) {
	.st-fab-reserve {
		font-size: 0.72rem;
		padding: 0.85em 2em;
	}
}

/* --- Homepage: de floating button verschijnt pas (zachte fade) zodra de hero
   voorbij gescrolld is; tot die tijd is de hero z'n eigen reserveerknop de CTA.
   JS togglet .st-hero-top (zie createHeroReveal() in main.js). --- */
html.st-hero-top .st-fab-reserve {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ==========================================================================
   Menukaart — CPT menukaart / roots/menukaart-blok / [roots_menukaart]
   Puur typografisch en opgaand in de pagina. Optioneel inklapbaar (<details>)
   zodat storytelling-pagina's kort blijven. Huisstijl: Fraunces + Archivo,
   groen accent. Leeskolom op --mk-maxw.
   ========================================================================== */

:root { --mk-maxw: 760px; }

.st-menukaart {
	max-width: var(--mk-maxw);
	margin-inline: auto;
	padding-inline: var(--st-gutter);
	padding-block: clamp(1.25rem, 3vw, 2.25rem);
	scroll-margin-top: 5rem;
}

/* Titel (open, niet-inklapbare kaart) */
.st-menukaart__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0 0 .4em;
}
.st-menukaart__head-plain { margin-bottom: clamp(.6rem, 1.6vw, 1rem); }
.st-menukaart__intro {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--wp--preset--color--antraciet-zacht);
	max-width: 52ch;
	margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
}

/* ---- Inklapbaar (<details>) ---- */
.st-menukaart__fold {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--antraciet) 15%, transparent);
}
.st-menukaart__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.05rem, 2.6vw, 1.55rem) 0;
}
.st-menukaart__summary::-webkit-details-marker { display: none; }
.st-menukaart__summary-title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.45rem, 3vw, 2.1rem);
	line-height: 1.1;
	color: var(--wp--preset--color--antraciet);
	transition: color .3s ease;
}
.st-menukaart__summary-teaser {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--body);
	font-size: .93rem;
	line-height: 1.5;
	color: var(--wp--preset--color--antraciet-zacht);
	margin-top: .3rem;
	max-width: 48ch;
}
.st-menukaart__summary-cue {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	color: var(--wp--preset--color--groen);
}
.st-menukaart__summary-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity .3s ease;
}
.st-menukaart__fold[open] .st-menukaart__summary-label { opacity: .55; }
.st-menukaart__chevron {
	width: 9px; height: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .35s var(--st-ease);
}
.st-menukaart__fold[open] .st-menukaart__chevron { transform: rotate(-135deg); }
.st-menukaart__summary:hover .st-menukaart__summary-title,
.st-menukaart__summary:focus-visible .st-menukaart__summary-title { color: var(--wp--preset--color--groen); }
@media (max-width: 560px) { .st-menukaart__summary-label { display: none; } }

/* Uit te klappen inhoud — JS animeert de hoogte (reduced-motion: instant). */
.st-menukaart__reveal { overflow: hidden; transition: height .4s var(--st-ease); }
.st-menukaart__reveal .st-menukaart__body { padding-bottom: clamp(1rem, 2.5vw, 1.75rem); }

/* ---- Lijst ---- */
.st-menukaart__list { display: flex; flex-direction: column; }
.st-menukaart__group {
	margin: clamp(1.5rem, 3.4vw, 2.3rem) 0 1rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--groen) 28%, transparent);
}
.st-menukaart__group-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--groen);
	margin: 0;
}
.st-menukaart__group-oms {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.02rem;
	line-height: 1.5;
	color: var(--wp--preset--color--antraciet-zacht);
	margin: .5rem 0 0;
	max-width: 58ch;
}
.st-menukaart__list > .st-menukaart__group:first-child { margin-top: 0; }

.st-menukaart__item { padding: .8rem 0; }
.st-menukaart__row { display: flex; align-items: baseline; gap: .5rem; }
.st-menukaart__naam {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.24rem;
	line-height: 1.2;
	color: var(--wp--preset--color--antraciet);
}
.st-menukaart__dots {
	flex: 1 1 auto;
	align-self: center;
	height: 1px;
	margin: 0 .3rem;
	background: color-mix(in srgb, var(--wp--preset--color--antraciet) 18%, transparent);
	opacity: .55;
}
.st-menukaart__prijs {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wp--preset--color--antraciet);
}
.st-menukaart__oms {
	font-family: var(--wp--preset--font-family--body);
	font-size: .9rem;
	line-height: 1.5;
	color: var(--wp--preset--color--antraciet-zacht);
	margin: .3rem 0 0;
	max-width: 54ch;
}

.st-menukaart__item--arrangement {
	margin: .55rem 0;
	padding: 1rem 1.3rem;
	background: var(--wp--preset--color--ivoor);
	border-left: 2px solid var(--wp--preset--color--groen);
}
.st-menukaart__item--arrangement .st-menukaart__naam { font-size: 1.14rem; }
.st-menukaart__item--arrangement .st-menukaart__prijs {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	color: var(--wp--preset--color--groen);
}
.st-menukaart__item--arrangement .st-menukaart__dots { opacity: .3; }

.st-menukaart__note {
	font-family: var(--wp--preset--font-family--body);
	font-size: .85rem;
	font-style: italic;
	color: var(--wp--preset--color--antraciet-zacht);
	margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
}

/* Varianten */
.st-menukaart--compact .st-menukaart__item { padding-block: .5rem; }
.st-menukaart--twee-koloms .st-menukaart__list { columns: 2; column-gap: 3rem; }
.st-menukaart--twee-koloms .st-menukaart__item,
.st-menukaart--twee-koloms .st-menukaart__group,
.st-menukaart--twee-koloms .st-menukaart__item--arrangement { break-inside: avoid; }

@media (max-width: 720px) {
	.st-menukaart--twee-koloms .st-menukaart__list { columns: 1; }
	.st-menukaart__naam { font-size: 1.12rem; }
}

/* ==========================================================================
   Ontdek ook — doorverwijzingen naar andere pagina's (bezoeker nieuwsgierig
   houden). Native blokken in een .st-ontdek-sectie; foto + titel + tekst + link.
   ========================================================================== */
.st-ontdek {
	max-width: calc(var(--st-maxw) + 2 * var(--st-gutter));
	margin-inline: auto;
	padding-inline: var(--st-gutter);
	padding-block: clamp(2.5rem, 6vw, 5rem);
}
.st-ontdek__intro { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); max-width: 52ch; }
.st-ontdek__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	line-height: 1.05;
	margin: 0;
}
.st-ontdek__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.st-ontdek__card { display: flex; flex-direction: column; }
.st-ontdek__card .wp-block-image {
	overflow: hidden;
	margin: 0 0 1.1rem;
	border-radius: 2px;
}
.st-ontdek__card .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform .7s var(--st-ease);
}
.st-ontdek__card:hover .wp-block-image img,
.st-ontdek__card:focus-within .wp-block-image img { transform: scale(1.045); }
.st-ontdek__card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	line-height: 1.1;
	margin: 0 0 .35em;
}
.st-ontdek__card p {
	font-family: var(--wp--preset--font-family--body);
	font-size: .95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--antraciet-zacht);
	margin: 0 0 1.1rem;
	max-width: 42ch;
}
.st-ontdek__card .wp-block-buttons { margin-top: auto; }
@media (max-width: 640px) {
	.st-ontdek__grid { grid-template-columns: 1fr; gap: 2rem; }
}

.st-ontdek__grid > * { margin-block: 0; }

/* ==========================================================================
   Aanbod — visueel kaartraster (foto + titel + korte tekst) om mogelijkheden
   of diensten uit te lichten. Herbruikbare bouwsteen; native blokken in een
   .st-aanbod-sectie. Zie ook st-ontdek (zelfde kaartprincipe, andere rol).
   ========================================================================== */
.st-aanbod {
	max-width: calc(var(--st-maxw) + 2 * var(--st-gutter));
	margin-inline: auto;
	padding-inline: var(--st-gutter);
	padding-block: clamp(3rem, 7vw, 6rem);
}
.st-aanbod__head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); max-width: 60ch; }
.st-aanbod__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	line-height: 1.05;
	margin: 0;
}
.st-aanbod__intro {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--wp--preset--color--antraciet-zacht);
	margin: 0.9rem 0 0;
	max-width: 54ch;
}
.st-aanbod__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
}
.st-aanbod__card {
	display: flex;
	flex-direction: column;
	transition: transform .55s var(--st-ease);
}
.st-aanbod__card:hover,
.st-aanbod__card:focus-within { transform: translateY(-4px); }
.st-aanbod__card .wp-block-image {
	overflow: hidden;
	margin: 0 0 1.1rem;
	border-radius: 2px;
}
.st-aanbod__card .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .7s var(--st-ease);
}
.st-aanbod__card:hover .wp-block-image img,
.st-aanbod__card:focus-within .wp-block-image img { transform: scale(1.05); }
.st-aanbod__card .st-aanbod__card-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	line-height: 1.1;
	margin: 0 0 .3em;
}
.st-aanbod__card p {
	font-family: var(--wp--preset--font-family--body);
	font-size: .95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--antraciet-zacht);
	margin: 0;
	max-width: 40ch;
}
/* Zachte reveal-stagger over de kaarten (rij voor rij). */
.st-aanbod__grid > .st-reveal:nth-child(3n+2) { transition-delay: .08s; }
.st-aanbod__grid > .st-reveal:nth-child(3n+3) { transition-delay: .16s; }
/* blockGap-normalisatie: de kaarten (grid-kinderen) staan vlak in het raster;
   hun eigen kinderen voeren hun ritme via de expliciete marges hierboven. */
.st-aanbod__grid > * { margin-block: 0; }

/* =====================================================================
   CONTACTPAGINA — twee bouwstenen: st-contact (contactkaartjes) en
   st-kaart (vind-ons met vervaagde dorpskaart + scroll-parallax).
   Zie docs/superpowers/specs/2026-07-31-contactpagina-design.md.
   ===================================================================== */

/* ---- Contactgegevens: rij bewerkbare kaartjes met CSS-icoontjes ---- */
.st-contact { padding-block: var(--wp--preset--spacing--50); }
:where(.st-contact) { background: var(--wp--preset--color--wit); }
.st-contact__inner {
	width: min(100% - 2 * var(--st-gutter), var(--st-maxw));
	margin-inline: auto;
}
.st-contact__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.8rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--antraciet);
	margin: 0.1em 0 0;
}
.st-contact__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	margin-top: clamp(2rem, 4vw, 3.25rem);
}
.st-contact__grid > * { margin-block: 0; }
.st-contact__card {
	border-top: 1px solid var(--wp--preset--color--groen-licht);
	padding-top: 1.4rem;
}
.st-contact__card > * { margin-block: 0; }
/* Icoon als CSS-masker (huisstijl, staat op slot); kleurt mee bij hover. */
.st-contact__card::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	margin-bottom: 1.1rem;
	background-color: var(--wp--preset--color--groen);
	-webkit-mask: var(--st-icon) center / contain no-repeat;
	mask: var(--st-icon) center / contain no-repeat;
	transition: background-color 0.35s ease, transform 0.5s var(--st-ease);
}
.st-contact__card:hover::before,
.st-contact__card:focus-within::before {
	background-color: var(--wp--preset--color--terracotta);
	transform: translateY(-2px);
}
.st-contact__card--bel { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.st-contact__card--mail { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
.st-contact__card--reserveer { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.st-contact__card--social { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.st-contact__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--antraciet-zacht);
	margin: 0 0 0.5rem;
}
.st-contact__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	line-height: 1.2;
	margin: 0;
}
.st-contact__value a {
	color: var(--wp--preset--color--antraciet);
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--terracotta), var(--wp--preset--color--terracotta));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 0.4s var(--st-ease), color 0.35s ease;
	padding-bottom: 2px;
}
.st-contact__value a:hover,
.st-contact__value a:focus-visible {
	color: var(--wp--preset--color--terracotta);
	background-size: 100% 1px;
}
.st-contact__note {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	color: var(--wp--preset--color--antraciet-zacht);
	margin: 0.55rem 0 0;
}
.st-contact__socials {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
}
.st-contact__socials a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.7vw, 1.3rem);
	color: var(--wp--preset--color--antraciet);
	text-decoration: none;
	transition: color 0.35s ease;
}
/* Icoon per link, afgeleid uit de href (robuust bij bewerken): elke social-link
   toont zijn eigen merk-glyph als CSS-masker in de huisstijlkleur. */
.st-contact__socials a::before {
	content: "";
	flex: none;
	width: 19px;
	height: 19px;
	background-color: var(--wp--preset--color--groen);
	-webkit-mask: var(--st-soc-icon) center / contain no-repeat;
	mask: var(--st-soc-icon) center / contain no-repeat;
	transition: background-color 0.35s ease;
}
.st-contact__socials a[href*="instagram"] { --st-soc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E"); }
.st-contact__socials a[href*="facebook"] { --st-soc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
.st-contact__socials a:hover,
.st-contact__socials a:focus-visible { color: var(--wp--preset--color--terracotta); }
.st-contact__socials a:hover::before,
.st-contact__socials a:focus-visible::before { background-color: var(--wp--preset--color--terracotta); }

/* ---- Vind ons: full-bleed sectie met de dorpskaart vervaagd op de achtergrond,
   oplossend in de ivoor-kleur van de site (blend-in), met een zachte parallax.
   De terracotta pin blijft vrij in beeld (rechts van de tekst); de tekst staat
   zonder kader op een linkse ivoor-waas. ---- */
.st-kaart {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: min(88vh, 820px);
	padding-block: clamp(3.5rem, 9vh, 7.5rem);
	background: var(--wp--preset--color--ivoor);
}
/* De kaart zelf: cover, vervaagd, met een warme gloed die de pin oplicht. Iets
   hoger dan de sectie (top/bottom-overhang) zodat de parallax nooit een rand
   toont. JS zet --k-shift (alleen desktop + motion-on); anders 0 (stil). */
.st-kaart::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12%;
	height: 124%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 52% 50%, rgba(146, 59, 4, 0.26) 0, rgba(146, 59, 4, 0.12) 5%, rgba(146, 59, 4, 0) 18%),
		url(../images/kaart-budel.webp) center / cover no-repeat;
	opacity: 0.42;
	transform: translateY(var(--k-shift, 0));
	will-change: transform;
}
/* Blend-in: de kaart lost boven- en onderaan op in de ivoor-kleur van de site,
   en links een zachte ivoor-waas zodat de tekst leesbaar is zonder kader. */
.st-kaart::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, var(--wp--preset--color--ivoor) 0%, rgba(245, 242, 236, 0.35) 15%, rgba(245, 242, 236, 0) 34%, rgba(245, 242, 236, 0) 66%, rgba(245, 242, 236, 0.35) 85%, var(--wp--preset--color--ivoor) 100%),
		linear-gradient(to right, var(--wp--preset--color--ivoor) 0%, rgba(245, 242, 236, 0.78) 26%, rgba(245, 242, 236, 0) 52%);
}
.st-kaart__inner {
	position: relative;
	z-index: 2;
	width: min(100% - 2 * var(--st-gutter), var(--st-maxw));
	margin-inline: auto;
}
.st-kaart__text { max-width: 24rem; }
.st-kaart__text > * { margin-block: 0; }
.st-kaart__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.9rem, 3.8vw, 2.9rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--antraciet);
	margin: 0.1em 0 0.6rem;
}
.st-kaart__address {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 1.9vw, 1.4rem);
	line-height: 1.5;
	color: var(--wp--preset--color--antraciet);
	margin: 0 0 1rem;
}
.st-kaart__address strong { font-weight: 600; }
.st-kaart__note {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--antraciet-zacht);
	max-width: 32ch;
	margin: 0 0 1.75rem;
}
.st-kaart__actions { margin-top: 0; }
/* Openingstijden onder de gegevens, gescheiden door een fijne hairline.
   Selector met twee classes zodat de margin-top niet sneuvelt onder de
   blockGap-nulzetting `.st-kaart__text > *` (0,2,0 wint van 0,1,0). */
.st-kaart__text .st-kaart__hours {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid rgba(127, 163, 161, 0.6);
}
.st-kaart__hours > * { margin-block: 0; }
.st-kaart__hours .st-eyebrow { margin-bottom: 0.9rem; }
.st-kaart__hours p {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--antraciet);
	line-height: 1.6;
	margin: 0 0 0.9rem;
}
.st-kaart__hours p:last-child { margin-bottom: 0; }
.st-kaart__hours strong {
	display: inline-block;
	margin-bottom: 0.15rem;
	color: var(--wp--preset--color--groen);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---- Mobiel (achteraan, wint qua bronvolgorde van de basisregels) ---- */
@media (max-width: 900px) {
	.st-contact { padding-block: 3.5rem; }
	.st-contact__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem 1.5rem;
		margin-top: 2.25rem;
	}
	/* Mobiel: de kaart als band bovenaan (pin in beeld), de tekst eronder op
	   ivoor. min-height/flex-centrering uit; de band en de fade zitten op de
	   ::before/::after die we hier beperken tot de bovenrand. */
	.st-kaart {
		display: block;
		min-height: 0;
		padding-block: 0 3.5rem;
	}
	.st-kaart::before {
		top: 0;
		height: 360px;
		opacity: 0.62;
		/* Verder ingezoomd (marker groter en duidelijker); glow-laag ongemoeid. */
		background-size: auto, 220%;
	}
	/* De band lost aan BOVEN- én onderkant naadloos op in de ivoor-kleur, zodat je
	   nergens een harde beeldrand ziet — de kaart faadt in en weer uit. */
	.st-kaart::after {
		background:
			linear-gradient(to bottom, var(--wp--preset--color--ivoor) 0%, rgba(245, 242, 236, 0) 95px, rgba(245, 242, 236, 0) 245px, var(--wp--preset--color--ivoor) 350px);
	}
	.st-kaart__inner { padding-top: 320px; }
	.st-kaart__text { max-width: none; }
	/* Aanbod: 3 → 2 kolommen. */
	.st-aanbod__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.5rem; }
}
@media (max-width: 520px) {
	.st-contact__grid { grid-template-columns: 1fr; gap: 1.75rem; }
	/* Aanbod: 2 → 1 kolom. */
	.st-aanbod__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}