/* ==========================================================================
   IJsselhoeve V2 — main stylesheet
   Warm, landelijk, mobile-first. Geen frameworks, geen utility-bloat.
   ========================================================================== */

/* --- Webfont: Lora (zelf-gehost) ----------------------------------------
   Variabele woff2 (gewichtsas 400-700), latin + latin-ext voor Nederlandse
   en Duitse tekens. Zelf gehost i.v.m. AVG (geen bezoekers-IP naar Google)
   en snelheid. font-display: swap houdt tekst meteen leesbaar.
   Lora valt onder de SIL Open Font License. */
@font-face {
	font-family: "Lora";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/lora-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Lora";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/lora-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Lora";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/lora-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Lora";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/lora-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design tokens ------------------------------------------------------- */

:root {
	/* Kleurpalet "IJsseldijk" — warm, aards, klassiek.
	   De UI blijft ingetogen; de foto's dragen de kleur. Accent (terracotta)
	   uitsluitend voor knoppen en links. Tekst-tinten zijn iets verdiept t.o.v.
	   de brief-startwaarden zodat ze de WCAG AA-contrasteis (4,5:1) halen. */
	--c-bg:           #F5F1E8;       /* crème — paginavlak */
	--c-bg-alt:       #EAE3D2;       /* dieper crème — afwisselende secties */
	--c-card:         #FCFAF3;       /* lichte kaart-achtergrond */
	--c-text:         #2E3525;       /* diep olijf-antraciet */
	--c-muted:        #5E6150;       /* gedempte tekst (haalt 4,5:1 op crème) */
	--c-primary:      #6E7B4D;       /* olijf/mosgroen — merkkleur */
	--c-primary-dark: #56613B;       /* donkerder olijf — vlakken, hover */
	--c-accent:       #C07A4E;       /* terracotta — decoratief accent */
	--c-accent-dark:  #A05A30;       /* donkere terracotta — knoppen & links */
	--c-accent-hover: #874A28;       /* nog donkerder terracotta — hover */
	--c-secondary:    #A89B86;       /* taupe — rustige vlakken/randen */
	--c-border:       #D9D0BC;       /* zachte rand */
	--c-focus:        #6E7B4D;

	/* Hero-slideshow timing (zie .hero in dit bestand).
	   4 beelden × --hero-dur = totale cyclus. Pas je het aantal foto's aan,
	   stem dan ook de @keyframes heroFade-percentages af. */
	--hero-dur:       8s;

	/* Typografie — de hele site in Lora (warme serif): koppen groot en zwaar,
	   de lopende tekst regulier. Terug naar twee letters? Zet --font-sans op de
	   Inter-stack:
	   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; */
	--font-serif:     "Lora", Georgia, "Times New Roman", serif;
	--font-sans:      var(--font-serif);

	--fs-base:        1.0625rem;      /* 17px */
	--fs-sm:          0.9375rem;
	--fs-lg:          1.125rem;
	--fs-h1:          clamp(2rem, 5vw, 3.25rem);
	--fs-h2:          clamp(1.5rem, 3.5vw, 2.25rem);
	--fs-h3:          clamp(1.25rem, 2.5vw, 1.625rem);

	--lh-base:        1.65;
	--lh-tight:       1.25;

	/* Spacing schaal (rem) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4.5rem;

	/* Layout */
	--container:        70rem;
	--container-narrow: 48rem;
	--radius:           0.5rem;
	--radius-lg:        1rem;
	--shadow-sm:        0 1px 3px rgba(42, 42, 42, 0.08);
	--shadow-md:        0 6px 18px rgba(42, 42, 42, 0.10);
}

/* --- Reset / base -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--c-accent-dark);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
a:hover { color: var(--c-accent-hover); }
a:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--c-text);
	margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-top: var(--sp-6); }
h3 { font-size: var(--fs-h3); margin-top: var(--sp-5); }

p, ul, ol { margin: 0 0 var(--sp-4); }
ul, ol { padding-left: 1.25em; }

blockquote {
	margin: 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-lg);
	color: var(--c-text);
}

hr {
	border: 0;
	border-top: 1px solid var(--c-border);
	margin: var(--sp-6) 0;
}

/* --- Skip-link / a11y --------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-text);
	color: #fff;
	padding: var(--sp-3) var(--sp-4);
	z-index: 100;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

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

.container {
	width: 100%;
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sp-5);
	padding-right: var(--sp-5);
}
.container--narrow { max-width: var(--container-narrow); }

main.site-main { display: block; }

/* --- Header / navigatie ------------------------------------------------- */

.site-header {
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-border);
	position: sticky;
	top: 0;
	z-index: 50;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	padding-top: var(--sp-3);
	padding-bottom: var(--sp-3);
}

.site-logo {
	display: inline-flex;
	flex-direction: column;
	color: var(--c-text);
	text-decoration: none;
	font-family: var(--font-serif);
	line-height: 1.1;
}
.site-logo__line--top    { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-muted); }
.site-logo__line--bottom { font-size: 1.55rem; font-weight: 500; }

/* Taalwissel — rustige dropdown met globe-icoon. <details>/<summary> doet het
   open- en dichtklappen native, zonder JS. Geen vlaggen want vlaggen ≠ talen;
   alleen een grijs globe-icoontje en de huidige taalcode. */
.lang-switch {
	position: relative;
	margin-left: var(--sp-3);
}
/* Duw menu + taalswitcher als groep naar rechts (logo blijft links). */
.site-header__inner > .site-nav { margin-left: auto; }
.lang-switch[open] { z-index: 50; }
/* Safari-veilig: laat de <summary> zijn default block-gedrag houden en doe
   de flex-styling op een inner <span>. Anders triggert Safari de click niet
   betrouwbaar als je de summary zelf op display:flex zet. */
.lang-switch__summary {
	display: block;
	list-style: none !important; /* harder dan content-CSS die ul/li-styling oplegt */
	cursor: pointer;
	outline: none;
}
/* Summary-marker uit in alle browsers: Chrome/Edge (webkit), Firefox (::marker)
   en oudere Safari (default disclosure triangle via list-item). */
.lang-switch__summary::-webkit-details-marker { display: none; }
.lang-switch__summary::marker { display: none !important; content: "" !important; }
.lang-switch__summary::before { display: none !important; }
.lang-switch__btn {
	/* Zelfde tint + typografie als de menu-items in de header. */
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.55rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: 0.78rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	font-weight: 500;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.lang-switch__summary:hover .lang-switch__btn,
.lang-switch[open] .lang-switch__btn,
.lang-switch__summary:focus-visible .lang-switch__btn {
	color: var(--c-text);
	border-color: var(--c-border);
	background: var(--c-bg-alt);
}
.lang-switch__icon { flex: 0 0 auto; display: block; }
.lang-switch__current { font-variant: tabular-nums; }
.lang-switch__list {
	position: absolute;
	right: 0;
	top: calc(100% + 0.3rem);
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	background: transparent;
	border: 0;
	box-shadow: none;
}
/* Voorkom dat content-area styling (bullets) doorlekt naar onze dropdown. */
.lang-switch__list,
.lang-switch__list > li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.lang-switch__list > li::before,
.lang-switch__list > li::marker { content: none !important; display: none !important; }
.lang-switch__item {
	/* Zelfde pill-stijl als de hoofd-knop: rustig, klein. De achtergrond is
	   altijd licht zodat de items goed leesbaar zijn — ook als de header zelf
	   transparant over de hero-foto staat. !important zodat content-CSS (bruine
	   onderstreepte links) niet doorlekt. */
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.55rem;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	color: var(--c-text) !important;
	text-decoration: none !important;
	font-family: var(--font-sans);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	font-weight: 500;
	background: var(--c-bg);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
	justify-content: center;
	min-width: 2.6rem;
}
.lang-switch__item:hover {
	color: var(--c-text);
	border-color: var(--c-accent-dark);
	background: var(--c-bg-alt);
}
.lang-switch__item.is-active {
	color: var(--c-bg);
	background: var(--c-accent-dark);
	border-color: var(--c-accent-dark);
}
@media (max-width: 47.999rem) {
	/* Op mobiel: switcher staat tussen logo en hamburger, naar rechts geduwd. */
	.lang-switch { margin-left: auto; margin-right: var(--sp-3); order: 2; }
	.nav-toggle { order: 3; }
	.lang-switch__btn { padding: 0.3rem 0.4rem; }
}

/* Hamburger (alleen mobiel zichtbaar) */
.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	cursor: pointer;
}
.nav-toggle {
	color: var(--c-text);
}
.nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.nav-toggle[aria-expanded="true"] { background: var(--c-bg-alt); }

.site-nav { display: none; }
.site-nav__menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.site-nav__menu > li { position: relative; }
.site-nav__menu a {
	color: var(--c-text);
	text-decoration: none;
	padding: var(--sp-2) 0;
	font-family: var(--font-sans);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}
.site-nav__menu a:hover { color: var(--c-primary); }

/* CTA-knop in de header: compact, in dezelfde fijne uppercase-stijl als de
   navigatie. Werkt op .site-nav__cta a — ongeacht .btn-klassen — zodat een
   wp-admin-menu-item met enkel de li-klasse 'site-nav__cta' automatisch een
   knop wordt. letter-spacing/uppercase erft van .site-nav__menu a. */
.site-nav__cta a {
	display: inline-block;
	background: var(--c-accent-dark);
	color: #fff;
	border-radius: var(--radius);
	padding: var(--sp-2) var(--sp-4);
	font-size: 0.74rem;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(16, 18, 12, 0.13);
	transition: background-color 0.18s ease, color 0.18s ease,
		box-shadow 0.18s ease, transform 0.18s ease;
}
.site-nav__cta a:hover {
	background: var(--c-accent-hover);
	color: #fff;
	box-shadow: 0 5px 14px rgba(16, 18, 12, 0.22);
	transform: translateY(-1px);
}

/* Sub-menu's: standaard onzichtbaar. Op desktop verschijnen ze als
   hover-/focus-dropdown; op mobiel houden we ze ingeklapt (lijst is daar al
   een toggle in v2 — diepere niveaus zijn voor deze site overkill). */
.site-nav__menu .sub-menu,
.site-nav__menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: none;
}

/* Mobiel: menu ingeklapt; bij open klap eronder uit */
@media (max-width: 47.999rem) {
	.site-nav {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--c-bg);
		border-bottom: 1px solid var(--c-border);
		padding: var(--sp-4) var(--sp-5);
		box-shadow: var(--shadow-md);
	}
	.site-nav[hidden] { display: none; }
	.site-nav__menu > li:not(.site-nav__cta) > a { padding: var(--sp-3) 0; } /* ruimere tap-zone op mobiel */
	/* Sub-menu's (bv. de pipowagens onder Camping) op mobiel tonen als
	   ingesprongen lijst — anders onbereikbaar op de telefoon. */
	.site-nav__menu .sub-menu,
	.site-nav__menu ul ul {
		display: block;
		padding-left: var(--sp-4);
	}
	.site-nav__menu .sub-menu a { padding: var(--sp-2) 0; }
}

@media (min-width: 48rem) {
	.nav-toggle { display: none; }
	.site-nav { display: block; }
	.site-nav__menu {
		flex-direction: row;
		align-items: center;
		gap: var(--sp-5);
	}
	.site-nav__cta { margin-left: auto; }

	/* Sub-menu's tonen als dropdown bij hover/focus van het ouder-item. */
	.site-nav__menu .sub-menu,
	.site-nav__menu ul {
		position: absolute;
		top: 100%;
		left: -1rem;
		min-width: 14rem;
		background: var(--c-bg);
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
		box-shadow: var(--shadow-md);
		padding: var(--sp-3);
		display: none;
		flex-direction: column;
		gap: var(--sp-2);
		z-index: 60;
	}
	.site-nav__menu > li:hover > .sub-menu,
	.site-nav__menu > li:focus-within > .sub-menu,
	.site-nav__menu > li:hover > ul,
	.site-nav__menu > li:focus-within > ul {
		display: flex;
	}
	/* Visuele "▾"-indicator bij menu-items met sub-menu. */
	.site-nav__menu > li.menu-item-has-children > a::after,
	.site-nav__menu > li:has(> ul) > a::after {
		content: " ▾";
		font-size: 0.75em;
		color: var(--c-muted);
	}
}

/* --- Header: transparante variant op de homepage ------------------------
   Op de homepage ligt de hero full-screen; de header zweeft er transparant
   overheen (witte tekst). Zodra je voorbij de hero scrollt — of het mobiele
   menu opent — wordt hij solide. assets/js/main.js zet de 'is-scrolled'-klasse
   op <body>. De CTA-knop (.btn) houdt z'n eigen kleuren: vandaar :not(.btn). */

body.home .site-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background: transparent;
	border-bottom-color: transparent;
}
body.home .site-header .site-logo,
body.home .site-header .site-logo__line--top,
body.home .site-header .site-nav__menu > li:not(.site-nav__cta) > a,
body.home .site-header .nav-toggle,
body.home .site-header .lang-switch__btn {
	color: #fff;
}
body.home .site-header .site-nav__menu > li:not(.site-nav__cta) > a:hover {
	color: #efe7d2;
}
body.home .site-header .nav-toggle {
	border-color: rgba(255, 255, 255, 0.55);
}

/* Solide staat: voorbij de hero gescrold. */
body.home.is-scrolled .site-header {
	background: var(--c-bg);
	border-bottom-color: var(--c-border);
	box-shadow: var(--shadow-sm);
}
body.home.is-scrolled .site-header .site-logo,
body.home.is-scrolled .site-header .site-nav__menu > li:not(.site-nav__cta) > a,
body.home.is-scrolled .site-header .nav-toggle,
body.home.is-scrolled .site-header .lang-switch__btn {
	color: var(--c-text);
}
body.home.is-scrolled .site-header .site-logo__line--top {
	color: var(--c-muted);
}
body.home.is-scrolled .site-header .site-nav__menu > li:not(.site-nav__cta) > a:hover {
	color: var(--c-accent-dark);
}
body.home.is-scrolled .site-header .nav-toggle {
	border-color: var(--c-border);
}

/* Mobiel: zodra het menu openstaat de header tóch solide maken, anders zweeft
   het uitgeklapte (crème) menu onder een transparante balk. */
@media (max-width: 47.999rem) {
	body.home .site-header:has( #primary-menu:not( [hidden] ) ) {
		background: var(--c-bg);
		border-bottom-color: var(--c-border);
	}
	body.home .site-header:has( #primary-menu:not( [hidden] ) ) .site-logo,
	body.home .site-header:has( #primary-menu:not( [hidden] ) ) .nav-toggle {
		color: var(--c-text);
	}
	body.home .site-header:has( #primary-menu:not( [hidden] ) ) .site-logo__line--top {
		color: var(--c-muted);
	}
}

/* WP-adminbalk: schuif de vaste homepage-header eronder bij ingelogd previewen. */
@media screen and (min-width: 783px) {
	body.admin-bar.home .site-header { top: 32px; }
}
@media screen and (max-width: 782px) {
	body.admin-bar.home .site-header { top: 46px; }
}

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

.btn {
	display: inline-block;
	padding: var(--sp-3) var(--sp-5);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	background: var(--c-bg-alt);
	color: var(--c-text);
	transition: background-color 0.18s ease, color 0.18s ease,
		border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: var(--c-border); }
.btn--primary {
	background: var(--c-accent-dark);
	color: #fff;
	border-color: var(--c-accent-dark);
	box-shadow: 0 2px 6px rgba(16, 18, 12, 0.13);
}
.btn--primary:hover {
	background: var(--c-accent-hover);
	border-color: var(--c-accent-hover);
	color: #fff;
	box-shadow: 0 7px 18px rgba(16, 18, 12, 0.22);
	transform: translateY(-2px);
}
.btn--primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(16, 18, 12, 0.18);
}
.btn--primary:focus-visible {
	outline: 2px solid var(--c-accent-dark);
	outline-offset: 3px;
}
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-lg); }
/* WhatsApp-knop: rustige huisstijl-olijf in plaats van het felle
   WhatsApp-groen, zodat hij in het aardetinten-palet past. */
.btn--whatsapp {
	background: var(--c-primary);
	color: #fff;
	border-color: var(--c-primary);
	box-shadow: 0 2px 6px rgba(16, 18, 12, 0.13);
}
.btn--whatsapp:hover {
	background: var(--c-primary-dark);
	border-color: var(--c-primary-dark);
	color: #fff;
	box-shadow: 0 7px 18px rgba(16, 18, 12, 0.22);
	transform: translateY(-2px);
}

/* --- Hero: full-screen slideshow --------------------------------------- */
/* Vier beelden crossfaden langzaam over elkaar (heroFade), elk met een subtiel
   Ken Burns-effect (heroZoomIn/heroZoomOut). De kop, trust-regel en CTA staan
   statisch bovenop. Volledig op CSS — bij prefers-reduced-motion (onderaan dit
   bestand) valt alles terug op één stilstaand beeld. */

.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #1f211a; /* fallback terwijl het eerste beeld laadt */
	color: #fff;
}

.hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* Cyclus = 4 beelden × --hero-dur. De delay verschuift elk beeld één
	   venster op; de -1.6s lead zet beeld 0 meteen zichtbaar (snelle LCP). */
	animation: heroFade calc(4 * var(--hero-dur)) linear infinite;
	animation-delay: calc(var(--i) * var(--hero-dur) - 1.6s);
}
/* Eerste beeld is ook de basisstaat: zonder/vóór de animatie nooit een
   zwarte hero. De draaiende animatie overschrijft deze opacity. */
.hero__slide:first-child { opacity: 1; }
.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	display: block;
	transform-origin: center;
	animation: heroZoomIn calc(4 * var(--hero-dur)) ease-out infinite;
	animation-delay: calc(var(--i) * var(--hero-dur) - 1.6s);
}
.hero__slide:nth-child(even) .hero__img {
	animation-name: heroZoomOut; /* afwisselend in-/uitzoomen geeft "leven" */
}

@keyframes heroFade {
	0%   { opacity: 0; }
	5%   { opacity: 1; }   /* ingefade in ~1,6s */
	25%  { opacity: 1; }   /* zichtbaar gehouden */
	30%  { opacity: 0; }   /* uitgefade in ~1,6s */
	100% { opacity: 0; }
}
@keyframes heroZoomIn {
	0%   { transform: scale(1.02); }
	35%  { transform: scale(1.10); }
	100% { transform: scale(1.10); }
}
@keyframes heroZoomOut {
	0%   { transform: scale(1.10); }
	35%  { transform: scale(1.02); }
	100% { transform: scale(1.02); }
}

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Subtiele verdonkering: een vleugje bovenaan voor de witte header, en een
	   zachte fade onderaan voor de kop. Bewust licht gehouden zodat de foto
	   zelf de show steelt. */
	background:
		linear-gradient(to bottom, rgba(74, 35, 16, 0.34), rgba(74, 35, 16, 0) 12%),
		linear-gradient(to bottom, rgba(74, 35, 16, 0) 52%, rgba(74, 35, 16, 0.62) 100%);
}

.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: var(--sp-8);
	padding-bottom: var(--sp-8);
	text-align: left;
}
.hero__heading {
	color: #fff;
	font-size: clamp(2rem, 5.5vw, 3.5rem);
	margin: 0 0 var(--sp-4);
	max-width: 22ch;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.hero__sub {
	color: #f3ecdc;
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	max-width: 42ch;
	margin: 0 0 var(--sp-5);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.hero__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: var(--sp-2) var(--sp-3);
	border-radius: 999px;
	backdrop-filter: blur(2px);
}
.hero__stars { color: #f0c14b; letter-spacing: 0.05em; }
.hero__rating-text { color: #fff; }
.hero__rating-text strong { font-weight: 700; }
.hero__rating-note { color: #e5dec9; }
.hero__cta { margin: 0; }
.hero__cta .btn { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30); }

@media (max-width: 47.999rem) {
	.hero__content { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
	.hero__rating-note { display: none; }
}

/* --- USPs --------------------------------------------------------------- */

.usps {
	padding: var(--sp-7) 0;
	background: var(--c-bg);
}
.usps__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
}
@media (min-width: 36rem) { .usps__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .usps__list { grid-template-columns: repeat(4, 1fr); } }
.usps__item {
	background: var(--c-card);
	border: 1px solid var(--c-border);
	border-top: 3px solid var(--c-primary);
	border-radius: var(--radius);
	padding: var(--sp-5);
	text-align: left;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.usps__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Strak lijn-icoontje in terracotta: één visueel accent per kaartje. */
.usps__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: var(--sp-3);
	color: var(--c-accent-dark);
}
.usps__icon svg { width: 100%; height: 100%; }
.usps__title { margin: 0 0 var(--sp-2); font-size: 1.125rem; }
.usps__text { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* --- Reviews — header ext. --------------------------------------------- */

.reviews__header { text-align: center; margin-bottom: var(--sp-5); }
.reviews__placeholder-note { color: var(--c-muted); margin: 0; }
.reviews__author { font-weight: 600; color: var(--c-text); }
.reviews__date { color: var(--c-muted); }
/* Subtiele bron-aanduiding ("via Google" / "via Recranet") onder de reviews. */
.reviews__source,
.reviewwall__source { opacity: 0.7; font-size: 0.92em; }

/* --- Pagina-content (Gutenberg) ----------------------------------------- */

.page-header {
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-4);
}
/* Pagina-kop uitlijnen met content die de strakke 50rem-kolom gebruikt
   (Tarieven, Over ons), zodat titel en tekst dezelfde linkerrand delen. */
.page:has(.tarieven) .page-header {
	max-width: 50rem;
	margin-left: auto;
	margin-right: auto;
}
.page-title { margin-top: 0; }
/* Klein accentstreepje boven de paginatitel: rustig, maar geeft de kop
   meteen wat meer karakter. */
.page-title::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 3px;
	margin-bottom: var(--sp-4);
	border-radius: 2px;
	background: var(--c-accent-dark);
}
.page-trust {
	color: var(--c-muted);
	font-size: var(--fs-sm);
	margin-top: var(--sp-3);
}
.page-content {
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-8);
}

/* Lead-alinea: de eerste alinea van een pagina krijgt wat meer presence
   (groter), maar blijft in de bodyletter zodat de lopende tekst overal
   dezelfde letter heeft. */
.page-content--prose > p:first-child,
.page-content .tarieven > p:first-child {
	font-size: clamp(1.12rem, 1.5vw, 1.28rem);
	line-height: 1.65;
	color: var(--c-text);
	margin-bottom: var(--sp-6);
}

/* "Prose"-modus voor default content-pagina's: container heeft volle breedte
   (70rem), block-editor content (paragrafen, lijsten, kopjes) wordt op een
   leesbare regelbreedte gehouden via een nested max-width. Blokken die
   expliciet alignwide/alignfull zijn (of Gutenberg-group/columns) mogen
   breder. Alle directe kinderen worden gecentreerd binnen de container. */
.page-content--prose {
	font-size: var(--fs-base);
}
.page-content--prose > p,
.page-content--prose > ul,
.page-content--prose > ol,
.page-content--prose > h1,
.page-content--prose > h2,
.page-content--prose > h3,
.page-content--prose > h4,
.page-content--prose > blockquote,
.page-content--prose > details {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}
.page-content--prose img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
}
.page-content--prose figure {
	margin: var(--sp-6) auto;
	max-width: 56rem;
}
.page-content--prose figcaption {
	text-align: center;
	color: var(--c-muted);
	font-size: var(--fs-sm);
	margin-top: var(--sp-2);
}

/* FAQ-accordion: elke vraag in een rustige kaart met een zachte rand. Een
   open vraag krijgt iets meer nadruk. Gebruikt op de Veelgestelde vragen. */
.page-content details {
	background: var(--c-card);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	margin-bottom: var(--sp-3);
	padding: 0 var(--sp-5);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.page-content details[open] {
	border-color: var(--c-secondary);
	box-shadow: var(--shadow-sm);
}
.page-content summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	font-family: var(--font-serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--c-text);
	padding: var(--sp-4) 0;
	transition: color 0.15s ease;
}
.page-content summary::-webkit-details-marker { display: none; }
.page-content summary::after {
	content: "+";
	margin-left: auto;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-border);
	border-radius: 50%;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1;
	color: var(--c-accent-dark);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-content details[open] summary::after {
	content: "\2212";
	background: var(--c-accent-dark);
	border-color: var(--c-accent-dark);
	color: #fff;
}
.page-content details[open] summary,
.page-content summary:hover { color: var(--c-accent-dark); }
.page-content details[open] summary { border-bottom: 1px solid var(--c-border); }
.page-content details > :not(summary) {
	margin: var(--sp-4) 0;
	color: var(--c-muted);
}
.page-content details > :not(summary):last-child { margin-bottom: var(--sp-5); }

/* Losse foto-slider als blok tussen tekst (bv. boven aan de FAQ). */
.page-content .tarieven > .tarief-slider { margin: var(--sp-5) 0; }

/* Statische kaart op de contactpagina: klikbare OpenStreetMap-screenshot die
   een nieuw tabblad opent met Google Maps. Geen embed = geen Google-cookies
   en geen cookiebanner nodig. */
.page-content .contact-kaart {
	margin: var(--sp-5) 0 0;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--c-border);
	background: var(--c-bg);
}
.page-content .contact-kaart a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.page-content .contact-kaart img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.5s ease;
}
.page-content .contact-kaart a:hover img,
.page-content .contact-kaart a:focus-visible img {
	transform: scale(1.02);
}
.page-content .contact-kaart figcaption {
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg-alt);
	border-top: 1px solid var(--c-border);
	font-size: 0.95rem;
}
.page-content .contact-kaart figcaption a {
	display: inline;
	color: var(--c-accent-dark);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.page-content .contact-kaart figcaption a:hover { color: var(--c-accent); }
.page-content .contact-kaart figcaption small {
	color: var(--c-muted);
}

/* Noodnummer: rustig kadertje dat opvalt zonder te schreeuwen. */
.page-content .contact-nood {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.75rem;
	margin: var(--sp-4) 0 0;
	padding: var(--sp-4) var(--sp-5);
	background: var(--c-bg-alt);
	border-left: 3px solid var(--c-accent-dark);
	border-radius: var(--radius);
}
.page-content .contact-nood strong { font-family: var(--font-serif); }
.page-content .contact-nood a {
	font-weight: 600;
	white-space: nowrap;
}
.page-content--prose .wp-block-group,
.page-content--prose .wp-block-columns {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--sp-5);
	margin-bottom: var(--sp-5);
}

/* Tarieven-pagina: alles in een strakke kolom van gelijke breedte, zodat de
   foto-rijen en de tekstblokken precies dezelfde links/rechts-rand delen. */
.page-content .tarieven {
	max-width: 50rem;
	margin-left: auto;
	margin-right: auto;
}
.page-content .tarieven > :first-child { margin-top: 0; }
.page-content .tarieven > :last-child { margin-bottom: 0; }

/* Accommodatie-rij: foto en prijstekst naast elkaar, om en om gespiegeld.
   Tekst-only rijen (zonder foto) vullen de volle breedte. Een dunne lijn
   scheidt elke rij van de vorige. Stapelt op mobiel: foto boven, tekst eronder. */
.page-content .tarief-rij {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-7) 0;
}
.page-content .tarief-rij + .tarief-rij {
	border-top: 1px solid var(--c-border);
}
.page-content .tarief-rij__foto {
	margin: 0;
	max-width: none;
	border-radius: var(--radius);
	overflow: hidden;
}
/* Losse foto (geen slider) in een rij, bijvoorbeeld op de Over ons-pagina. */
.page-content .tarief-rij__foto > img {
	display: block;
	width: 100%;
	height: auto;
}

/* Foto-slider per accommodatie: zachte crossfade tussen de foto's, met
   klikbare pijlen en puntjes (toegevoegd door main.js). Autoplay pauzeert
   bij hover. Zonder JS toont de slider netjes de eerste foto. */
.tarief-slider {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--c-bg-alt);
	border-radius: var(--radius);
	overflow: hidden;
}
.tarief-slider__track {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}
.tarief-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
}
.tarief-slider__slide:first-child { opacity: 1; }
.tarief-slider.is-ready .tarief-slider__slide { opacity: 0; }
.tarief-slider.is-ready .tarief-slider__slide.is-active { opacity: 1; }
.tarief-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tarief-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--c-primary-dark);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(16, 18, 12, 0.28);
	opacity: 0;
	transition: opacity 0.2s ease, background-color 0.15s ease;
}
/* Pijlen verschijnen bij hover (of toetsenbordfocus) op de slider; de
   puntjes blijven altijd zichtbaar. Op touch-apparaten (geen hover) staan
   de pijlen wel meteen zichtbaar. */
.tarief-slider:hover .tarief-slider__arrow,
.tarief-slider:focus-within .tarief-slider__arrow { opacity: 1; }
.tarief-slider__arrow:hover { background: #fff; }
@media (hover: none) {
	.tarief-slider__arrow { opacity: 1; }
}
.tarief-slider__arrow--prev { left: var(--sp-3); }
.tarief-slider__arrow--next { right: var(--sp-3); }
.tarief-slider__arrow::before {
	content: "";
	width: 0.62rem;
	height: 0.62rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}
.tarief-slider__arrow--prev::before { transform: rotate(-135deg); margin-left: 0.22rem; }
.tarief-slider__arrow--next::before { transform: rotate(45deg); margin-right: 0.22rem; }
.tarief-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--sp-3);
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}
.tarief-slider__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 3px rgba(16, 18, 12, 0.45);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.tarief-slider__dot:hover { background: rgba(255, 255, 255, 0.85); }
.tarief-slider__dot.is-active {
	background: #fff;
	transform: scale(1.35);
}
.page-content .tarief-rij__tekst > :first-child,
.page-content .tarief-rij__tekst h2 { margin-top: 0; }
.page-content .tarief-rij__tekst > :last-child { margin-bottom: 0; }

/* Prijs: groot en in de accentkleur, met "per nacht" er rustig onder. */
.page-content .tarief-prijs {
	margin: var(--sp-2) 0 var(--sp-4);
	color: var(--c-muted);
	font-size: var(--fs-sm);
	line-height: 1.35;
}
.page-content .tarief-prijs strong {
	display: block;
	font-family: var(--font-serif);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--c-accent-dark);
}

/* Subtiele boekknop onder een tariefblok: een rustige accent-link met pijl
   die rechtstreeks naar de juiste boeking in Recranet gaat. */
.page-content .tarief-cta-rij { margin: var(--sp-5) 0 0; }
.page-content .tarief-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-accent-dark);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.page-content .tarief-cta::after {
	content: "\2192";
	font-size: 1.1em;
	transition: transform 0.15s ease;
}
.page-content .tarief-cta:hover {
	color: var(--c-accent-hover);
	border-bottom-color: currentColor;
}
.page-content .tarief-cta:hover::after { transform: translateX(3px); }

/* Foto-placeholder binnen een tarief-rij wanneer er nog geen geschikte foto
   is. Houdt dezelfde aspect-verhouding aan, met een rustige cream-gradient
   en gestreepte rand zodat het meteen duidelijk een tijdelijke plek is. */
.page-content .tarief-rij__foto.tarief-foto-soon {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--sp-5);
	border: 1px dashed var(--c-border);
	background: linear-gradient(150deg, var(--c-bg-alt), #ded6c2);
	color: var(--c-muted);
}
.page-content .tarief-foto-soon span {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	letter-spacing: 0.04em;
}

/* Plattegrond-afbeelding binnen een tekstblok: gecentreerd en niet te groot. */
.page-content .tarief-plattegrond {
	margin: var(--sp-5) auto 0;
	max-width: 26rem;
}
.page-content .tarief-plattegrond img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}
@media (min-width: 48rem) {
	.page-content .tarief-rij {
		flex-direction: row;
		gap: var(--sp-6);
		align-items: flex-start;
	}
	.page-content .tarief-rij--gespiegeld { flex-direction: row-reverse; }
	.page-content .tarief-rij__foto {
		flex: 0 0 42%;
		/* Optische uitlijning: de h2 in de tekstkolom heeft line-height 1.25,
		   waardoor zijn zichtbare letterbovenrand ongeveer 0.6 rem onder de
		   doosrand zit. De foto begint direct bij de doosrand, dus we duwen
		   hem dezelfde afstand naar beneden zodat hij optisch gelijk valt
		   met de h2-letters ernaast. */
		margin-top: 0.6rem;
	}
	.page-content .tarief-rij__tekst { flex: 1 1 auto; min-width: 0; }

	/* Variant "titel-boven": de h2 spant de volle breedte, foto en tekst
	   staan eronder naast elkaar. Geen optische foto-shift hier nodig — er
	   staat immers geen h2 meer naast de foto om mee uit te lijnen. */
	.page-content .tarief-rij--titel-boven {
		display: grid;
		grid-template-columns: 42% 1fr;
		grid-template-areas:
			"titel titel"
			"foto  tekst";
		column-gap: var(--sp-6);
		row-gap: var(--sp-5);
	}
	.page-content .tarief-rij--titel-boven > h2 {
		grid-area: titel;
		margin: 0;
	}
	.page-content .tarief-rij--titel-boven > .tarief-rij__foto {
		grid-area: foto;
		margin-top: 0;
	}
	.page-content .tarief-rij--titel-boven > .tarief-rij__tekst {
		grid-area: tekst;
	}
	/* Variant "titel-boven" + gespiegeld: tekst links, foto rechts. */
	.page-content .tarief-rij--titel-boven.tarief-rij--gespiegeld {
		grid-template-columns: 1fr 42%;
		grid-template-areas:
			"titel titel"
			"tekst foto";
	}
}
/* Mobiel: laat de h2 boven het foto/tekst-stapeltje vallen. */
.page-content .tarief-rij--titel-boven > h2 {
	margin-top: 0;
}

/* Keuze-grid: een rij visuele keuzes (accommodaties) met foto en naam.
   Gebruikt op de Camping-pagina bij "Bijzonder overnachten" — de bezoeker
   ziet meteen drie opties in beeld. Stapelt netjes op smalle schermen. */
.page-content .keuze-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: var(--sp-5) 0 0;
	list-style: none;
	padding: 0;
}
@media (min-width: 48rem) {
	.page-content .keuze-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Elke <li> is een grid-cel; de kaart erin vult de cel volledig. */
.page-content .keuze-grid li { display: grid; margin: 0; }
.page-content .keuze-kaart {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-card);
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.page-content .keuze-kaart:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.page-content .keuze-kaart__foto {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-bg-alt);
}
.page-content .keuze-kaart__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.page-content .keuze-kaart:hover .keuze-kaart__foto img { transform: scale(1.04); }
.page-content .keuze-kaart__naam {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: var(--sp-3) var(--sp-4);
	font-family: var(--font-serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--c-primary-dark);
}
.page-content .keuze-kaart__naam::after {
	content: "\2192";
	color: var(--c-accent-dark);
	transition: transform 0.15s ease;
}
.page-content .keuze-kaart:hover .keuze-kaart__naam::after { transform: translateX(3px); }
/* Placeholder voor het Tiny House zolang er nog geen foto's zijn. */
.page-content .keuze-kaart__soon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: linear-gradient(150deg, var(--c-bg-alt), #ded6c2);
	color: var(--c-muted);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	letter-spacing: 0.04em;
}
/* Mesmerize/oude wp-block-group wrappers hadden eigen achtergrondkleuren
   (wit, licht-blauw) die niet passen bij ons crème palet. Overschrijf naar
   transparant zodat alles op het rustige crème ligt. Geldt voor ALLE
   page-content varianten (default én --prose én custom templates zoals
   page-camping/page-reserveren). Wie later expliciet een sectie-achtergrond
   wil zet die via een eigen utility-klasse buiten .page-content. */
.page-content .wp-block-group,
.page-content .wp-block-column,
.page-content .wp-block-group.has-background,
.page-content section[style*="background"],
.page-content div[style*="background-color"],
.page-content div[style*="background:"] {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0;
	border-radius: 0;
}

/* Block-editor breedte-modi (algemeen) */
.wp-block-image,
.wp-block-gallery { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
.alignwide  { max-width: 80rem; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* Gutenberg-kolommen: zorg dat ze niet als losse strips renderen maar als
   echt grid. */
.wp-block-columns {
	display: flex;
	gap: var(--sp-5);
	flex-wrap: wrap;
	align-items: flex-start;
}
.wp-block-column { flex: 1 1 18rem; min-width: 0; }
.wp-block-column > :first-child { margin-top: 0; }

/* Documenten/PDF-knop binnen content. */
.page-content a[href$=".pdf"] {
	display: inline-block;
	background: var(--c-bg-alt);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	text-decoration: none;
	color: var(--c-text);
	font-weight: 500;
	margin: var(--sp-1) 0;
}
.page-content a[href$=".pdf"]:hover { background: var(--c-border); color: var(--c-primary-dark); }
.page-content a[href$=".pdf"]::before { content: "📄 "; }

/* --- Reviews ------------------------------------------------------------ */

.reviews {
	background: var(--c-bg-alt);
	padding: var(--sp-7) 0;
	margin-top: var(--sp-7);
}
.reviews__title { text-align: center; margin: 0 0 var(--sp-6); }
.reviews__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
	.reviews__list { grid-template-columns: repeat(3, 1fr); }
}
.reviews__item {
	background: var(--c-card);
	padding: var(--sp-5);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
}
.reviews__stars { color: var(--c-accent-dark); font-size: 1.1rem; margin: 0 0 var(--sp-2); letter-spacing: 0.05em; }
/* Korte teaser: drie regels tonen, de rest met "Meer" uitvouwen. Zo zijn de
   kaders laag en even hoog. */
.reviews__quote {
	font-size: var(--fs-base);
	margin: 0 0 var(--sp-3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.reviews__item.is-expanded .reviews__quote {
	display: block;
	overflow: visible;
}
.reviews__more {
	align-self: flex-start;
	margin: 0 0 var(--sp-3);
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-accent-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.reviews__more:hover { color: var(--c-accent-hover); }
.reviews__attribution { color: var(--c-muted); font-size: var(--fs-sm); margin: auto 0 0; }
/* "Origineel tonen" - kleine uitklap onder een vertaalde review die de NL-
   brontekst laat zien. Gebruikt <details>/<summary>, dus geen JS. */
.reviews__original {
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
}
.reviews__original > summary {
	cursor: pointer;
	color: var(--c-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	list-style: none;
	display: inline;
}
.reviews__original > summary::-webkit-details-marker { display: none; }
.reviews__original > summary::marker { display: none; content: ""; }
.reviews__original > summary:hover { color: var(--c-accent-dark); }
.reviews__quote--original {
	margin-top: var(--sp-2);
	color: var(--c-muted);
	font-style: italic;
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}
.reviews__footer { text-align: center; margin-top: var(--sp-6); }
.reviews__more-link { margin: 0 0 var(--sp-2); }
.reviews__link {
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--c-accent-dark);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.reviews__link:hover { color: var(--c-accent-hover); }
.reviews__source { margin: 0; color: var(--c-muted); }

/* --- Reviewpagina: een muur met alle reviews, foto's als rustpunt ------- */
.reviews-intro {
	max-width: 42rem;
	margin: 0 0 var(--sp-6);
	color: var(--c-text);
	font-size: clamp(1.12rem, 1.5vw, 1.28rem);
	line-height: 1.65;
}
.reviewwall {
	columns: 1;
	column-gap: var(--sp-5);
}
@media (min-width: 36rem) { .reviewwall { columns: 2; } }
@media (min-width: 60rem) { .reviewwall { columns: 3; } }
.reviewwall__card,
.reviewwall__foto {
	break-inside: avoid;
	margin: 0 0 var(--sp-5);
}
.reviewwall__card {
	background: var(--c-card);
	padding: var(--sp-5);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.reviewwall__stars { color: var(--c-accent-dark); font-size: 1.05rem; margin: 0 0 var(--sp-2); letter-spacing: 0.05em; }
.reviewwall__quote { margin: 0 0 var(--sp-3); font-size: var(--fs-base); }
.reviewwall__attribution { color: var(--c-muted); font-size: var(--fs-sm); margin: 0; }
.reviewwall__author { font-weight: 600; color: var(--c-text); }
.reviewwall__foto {
	border-radius: var(--radius);
	overflow: hidden;
}
.reviewwall__foto img { display: block; width: 100%; height: auto; }

/* --- CTA-blok ----------------------------------------------------------- */

.cta-block {
	background: var(--c-primary-dark);
	color: #fff;
	padding: var(--sp-7) 0;
	margin-top: var(--sp-7);
}
.cta-block__inner { text-align: center; }
.cta-block__title { color: #fff; margin-top: 0; }
.cta-block__text { color: #eef0e3; }
.cta-block .btn--primary {
	background: var(--c-bg);
	color: var(--c-primary-dark);
	border-color: var(--c-bg);
}
.cta-block .btn--primary:hover {
	background: #ffffff;
	color: var(--c-primary-dark);
	border-color: #ffffff;
}

/* --- Reserveren-pagina specifiek --------------------------------------- */

.recranet-section {
	padding-top: var(--sp-5);
	padding-bottom: var(--sp-7);
}
.recranet-element {
	display: block;
	min-height: 320px;
}
.reserveren-faq { padding-bottom: var(--sp-6); }
.reserveren-faq details {
	border-bottom: 1px solid var(--c-border);
	padding: var(--sp-3) 0;
}
.reserveren-faq summary {
	cursor: pointer;
	font-weight: 600;
	padding: var(--sp-2) 0;
	list-style: none;
}
.reserveren-faq summary::-webkit-details-marker { display: none; }
.reserveren-faq summary::after {
	content: "+";
	float: right;
	font-size: 1.25rem;
	color: var(--c-muted);
}
.reserveren-faq details[open] summary::after { content: "−"; }
.reserveren-faq details > p { margin-top: var(--sp-2); }
.reserveren-help { padding-bottom: var(--sp-7); text-align: center; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
	background: var(--c-text);
	color: #e9e3d3;
	margin-top: var(--sp-8);
	padding: var(--sp-7) 0 var(--sp-4);
}
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}
@media (min-width: 48rem) {
	.site-footer__inner { grid-template-columns: repeat(3, 1fr); }
}
.site-footer__brand { font-family: var(--font-serif); font-size: 1.25rem; margin: 0 0 var(--sp-3); }
.site-footer__address { font-style: normal; line-height: 1.6; }
.site-footer__rating { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.site-footer__rating > span:first-child { color: var(--c-accent); letter-spacing: 0.1em; }
.site-footer__reviews-link { margin: 0 0 var(--sp-4); font-size: 0.92rem; }
.site-footer__reviews-link a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__reviews-link a:hover { color: var(--c-accent-dark); }
.site-footer__menu { list-style: none; padding: 0; margin: 0; }
.site-footer__menu li { padding: var(--sp-1) 0; }
.site-footer__legal { text-align: center; color: #b3a995; margin-top: var(--sp-6); }
.site-footer__legal small { font-size: 0.85rem; }

/* --- Galerij ------------------------------------------------------------ */
/* Het portfolio-moment: royale, bijna-full-bleed grid. Klik = lichtbak. */

.gallery {
	padding: var(--sp-8) 0;
	background: var(--c-bg);
}
.gallery__intro {
	text-align: center;
	margin-bottom: var(--sp-6);
}
.gallery__title { margin-top: 0; }
.gallery__lead {
	color: var(--c-muted);
	max-width: 48ch;
	margin-left: auto;
	margin-right: auto;
}
.gallery__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0 var(--sp-4);
	max-width: 100rem;
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: 1fr;
	transition: opacity 0.2s ease;
}
@media (min-width: 36rem) {
	.gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
	.gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
.gallery__cell { margin: 0; }
/* Verborgen batch: verschijnt zodra op "Meer foto's" wordt geklikt. */
.gallery__cell--hidden { display: none; }

/* "Meer foto's"-knop: stijlvol, rechts uitgelijnd onder de galerij. */
.gallery__more-wrap {
	margin-top: var(--sp-5);
	text-align: right;
}
.gallery__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--sp-3) var(--sp-5);
	background: none;
	border: 1px solid var(--c-accent-dark);
	border-radius: var(--radius);
	color: var(--c-accent-dark);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.gallery__more::after { content: "\2192"; font-size: 1.15em; }
.gallery__more:hover { background: var(--c-accent-dark); color: #fff; }
.gallery__more[hidden] { display: none; }

/* Galerij-track: positioneringscontext voor de mobiele pijl. */
.gallery__track { position: relative; }
.gallery__arrow { display: none; }

/* Mobiel: de galerij wordt een swipe-slider, één foto per keer, met pijl. */
@media (max-width: 47.999rem) {
	.gallery__grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.gallery__grid::-webkit-scrollbar { display: none; }
	.gallery__cell {
		flex: 0 0 86%;
		scroll-snap-align: center;
	}
	/* In de slider tonen we alle foto's, ongeacht de desktop-paginering. */
	.gallery__cell--hidden { display: block; }
	.gallery__more-wrap { display: none; }
	.gallery__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: var(--sp-3);
		top: 50%;
		transform: translateY(-50%);
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.92);
		color: var(--c-primary-dark);
		box-shadow: 0 2px 10px rgba(16, 18, 12, 0.30);
		cursor: pointer;
		z-index: 3;
	}
	.gallery__arrow svg {
		width: 1.4rem;
		height: 1.4rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.4;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* Mobiele actiebalk onderin: schuift omhoog bij scrollen. Alleen mobiel. */
.mobile-cta { display: none; }
@media (max-width: 47.999rem) {
	.mobile-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		padding: var(--sp-3) var(--sp-4);
		padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
		background: var(--c-bg);
		border-top: 1px solid var(--c-border);
		box-shadow: 0 -4px 18px rgba(16, 18, 12, 0.16);
		transform: translateY(115%);
		transition: transform 0.32s ease;
	}
	.mobile-cta.is-visible { transform: translateY(0); }
	.mobile-cta__btn {
		display: block;
		width: 100%;
		text-align: center;
	}
}
/* Op pagina's met het Recranet-boekvenster (pipowagens, tiny house,
   reserveren) heeft die module zelf al een vaste knop onderin. Onze
   actiebalk daar verbergen zodat ze elkaar niet overlappen. */
body:has(recranet-accommodations) .mobile-cta { display: none; }

/* ==========================================================================
   Recranet-boekwidget — huisstijl (feedback-ronde 3)
   --------------------------------------------------------------------------
   De widget <recranet-accommodations class="recranet-element"> rendert in de
   gewone DOM (geen Shadow DOM) en gebruikt klassen met een 'rn-'-prefix.
   Recranet laadt zijn eigen stylesheets ná deze; daarom !important op de
   merk-overrides. Alle regels zijn gescoped onder .recranet-element zodat er
   niets naar de rest van de site lekt.

   Gebruikte rn-selectors (interne Recranet-namen — kunnen bij een grote
   Recranet-update wijzigen; controleer dan de boekflow visueel):
     .rn-btn-default        primaire knop ("Boek nu", "Zoeken", "Selecteer periode")
     .rn-btn-link           tekst-/linkknop
     .rn-btn-outline-gray   secundaire knop ("Filter", "Sluit")
     .rn-form-control       invoervelden
     .rn-custom-select      keuzemenu's
     .rn-accommodation-list-item-container   accommodatie-kaart

   ROUTE A (Recranet-dashboard -> Instellingen -> Website-integratie): zet daar
   dezelfde kern (knopkleur, lettertype). ROUTE B = dit blok, dekt de rest aan.
   ========================================================================== */

/* Lettertype: Lora voor de hele widget, ook voor formuliervelden (die erven
   het niet vanzelf). En de host-element-achtergrond transparant zodat het
   paginavlak doorklinkt i.p.v. een grote witte rechthoek. */
.recranet-element,
.recranet-element button,
.recranet-element input,
.recranet-element select,
.recranet-element textarea {
	font-family: var(--font-serif) !important;
}
.recranet-element {
	background-color: transparent !important;
}
/* Recranet-panelen ("Boek je verblijf"-sidebar, kalender-paneel,
   accommodatie-detailblokken): transparant zodat het paginavlak doorklinkt. */
.recranet-element .rn-panel,
.recranet-element .rn-panel-muted,
.recranet-element .rn-availability-calendar-container,
.recranet-element .rn-accommodation-availability-panel {
	background-color: transparent !important;
}

/* Primaire knop: terracotta in plaats van Recranets donkergrijs. */
.recranet-element .rn-btn-default {
	background-color: var(--c-accent-dark) !important;
	border-color: var(--c-accent-dark) !important;
	color: #fff !important;
}
.recranet-element .rn-btn-default:hover,
.recranet-element .rn-btn-default:focus {
	background-color: var(--c-accent-hover) !important;
	border-color: var(--c-accent-hover) !important;
	color: #fff !important;
}

/* Tekst-/linkknoppen en links: terracotta in plaats van Bootstrap-blauw. */
.recranet-element .rn-btn-link,
.recranet-element a {
	color: var(--c-accent-dark) !important;
}
.recranet-element .rn-btn-link:hover,
.recranet-element a:hover {
	color: var(--c-accent-hover) !important;
}

/* Secundaire/outline-knop: rustige huisstijl-rand. */
.recranet-element .rn-btn-outline-gray {
	border-color: var(--c-border) !important;
	color: var(--c-text) !important;
}
.recranet-element .rn-btn-outline-gray:hover {
	background-color: var(--c-bg-alt) !important;
}

/* Zichtbare focus-state voor toetsenbordgebruik (toegankelijkheid). */
.recranet-element .rn-btn:focus-visible,
.recranet-element input:focus-visible,
.recranet-element select:focus-visible,
.recranet-element textarea:focus-visible {
	outline: 2px solid var(--c-focus) !important;
	outline-offset: 2px !important;
}

/* Invoervelden: volledig transparant zodat het paginavlak doorklinkt en er
   geen wittige rechthoeken meer overblijven. De zachte rand van Recranet
   houdt ze nog goed herkenbaar als invoerveld; bij focus komt onze
   accent-rand erbij. */
.recranet-element .rn-form-control,
.recranet-element .rn-custom-select,
.recranet-element input[type="text"],
.recranet-element input[type="number"],
.recranet-element input[type="email"],
.recranet-element input[type="search"],
.recranet-element select {
	background-color: transparent !important;
}
.recranet-element .rn-form-control:focus,
.recranet-element .rn-custom-select:focus {
	border-color: var(--c-accent-dark) !important;
	box-shadow: 0 0 0 3px rgba(160, 90, 48, 0.15) !important;
}

/* Accommodatie-kaart: zachte huisstijl-rand, ronde hoeken én een rustige
   creme-achtergrond i.p.v. het felle wit, zodat ze in het paginavlak opgaan. */
.recranet-element .rn-accommodation-list-item,
.recranet-element .rn-accommodation-list-item-container {
	background-color: var(--c-card) !important;
}
.recranet-element .rn-accommodation-list-item-container {
	border-color: var(--c-border) !important;
	border-radius: var(--radius) !important;
}
/* Filter-/zoekpaneel: transparant zodat het paginavlak doorklinkt
   (de invoervelden blijven wit — dat hoort zo bij formulieren). */
.recranet-element .rn-accommodation-search-form,
.recranet-element .rn-accommodation-search-form-section,
.recranet-element .rn-accommodation-search-form-section-bg {
	background-color: transparent !important;
}

/* Filters die voor één kleine boerderijcamping geen zin hebben verbergen:
   - "Zoek op naam" (vrij-tekstzoek binnen één locatie heeft geen meerwaarde);
   - de hele "Voorzieningen"-accordion (Recranets standaardlijst past niet bij
     onze kampeerplekken en geeft een misleidend filtergevoel).
   Filter op Accommodatietype, periode en gasten blijven staan. */
.recranet-element .rn-form-group-category {
	display: none !important;
}
.recranet-element .rn-accommodation-search-form-section.rn-accommodation-search-form-section-bordered:not(.rn-accommodation-search-form-section-bg) {
	display: none !important;
}

.gallery__item {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--c-bg-alt);
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 4 / 3;
}
.gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}
/* Subtiele hover-/focus-cue — geen icoon, alleen lichte beweging + waas. */
.gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(24, 26, 18, 0);
	transition: background-color 0.2s ease;
}
.gallery__item:hover .gallery__img,
.gallery__item:focus-visible .gallery__img {
	transform: scale(1.05);
}
.gallery__item:hover::after,
.gallery__item:focus-visible::after {
	background: rgba(24, 26, 18, 0.12);
}
.gallery__item:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
}

/* --- Lichtbak ----------------------------------------------------------- */
/* Native <dialog>: krijgt focus-trap en Escape-sluiten gratis van de browser. */

.lightbox {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	background: transparent;
	overflow: hidden;
}
.lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}
.lightbox::backdrop {
	background: rgba(20, 22, 16, 0.92);
}
.lightbox__img {
	max-width: min(94vw, 1400px);
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: var(--radius);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.lightbox__btn {
	position: fixed;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.875rem;
	height: 2.875rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(245, 241, 232, 0.92);
	color: var(--c-text);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.lightbox__btn:hover { background: #fff; }
.lightbox__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.lightbox__btn svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.lightbox__prev { left: var(--sp-3); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--sp-3); top: 50%; transform: translateY(-50%); }

@media (min-width: 48rem) {
	.lightbox__btn { width: 3.25rem; height: 3.25rem; }
	.lightbox__close { top: var(--sp-5); right: var(--sp-5); }
	.lightbox__prev { left: var(--sp-5); }
	.lightbox__next { right: var(--sp-5); }
}

/* --- Pipowagen-detailpagina -------------------------------------------- */

/* Hero: de witte headerbalk blijft staan; het beeld eronder vult de rest
   van het scherm (full-bleed naar onderen). 4,25rem is de hoogte van de
   sticky header. */
.pipowagen-hero {
	position: relative;
	min-height: calc(100vh - 4.25rem);
	min-height: calc(100svh - 4.25rem);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #1f211a;
	color: #fff;
}
.pipowagen-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}
.pipowagen-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(16, 18, 12, 0) 50%, rgba(16, 18, 12, 0.56) 100%);
}
.pipowagen-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-7);
}
.pipowagen-hero__eyebrow {
	margin: 0 0 var(--sp-2);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e7dcc6;
}
.pipowagen-hero__title {
	color: #fff;
	font-size: clamp(2rem, 5vw, 3.25rem);
	margin: 0 0 var(--sp-3);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.pipowagen-hero__tagline {
	color: #f3ecdc;
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	max-width: 40ch;
	margin: 0 0 var(--sp-5);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.pipowagen-hero__cta { margin: 0; }
.pipowagen-hero__cta .btn { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30); }

/* Tekst-hero: variant zonder foto (bv. Tiny House zolang er geen foto's zijn).
   Een rustige groene band in plaats van een full-screen beeld. */
.pipowagen-hero--plain {
	min-height: 0;
	background: var(--c-primary-dark);
}
.pipowagen-hero--plain .pipowagen-hero__overlay { display: none; }
.pipowagen-hero--plain .pipowagen-hero__title,
.pipowagen-hero--plain .pipowagen-hero__tagline { text-shadow: none; }

.pipowagen-intro {
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-6);
}
.pipowagen-intro p {
	font-size: var(--fs-lg);
	line-height: 1.7;
}
.pipowagen-intro p:last-child { margin-bottom: 0; }

.pipowagen-specs {
	background: var(--c-bg-alt);
	padding: var(--sp-7) 0;
}
.pipowagen-specs h2 { margin-top: 0; text-align: center; }
.pipowagen-specs__list { margin: var(--sp-5) 0 0; }
.pipowagen-specs__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-1);
	padding: var(--sp-4) 0;
	border-top: 1px solid var(--c-border);
}
.pipowagen-specs__row:last-child { border-bottom: 1px solid var(--c-border); }
.pipowagen-specs__row dt {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	color: var(--c-text);
}
.pipowagen-specs__row dd {
	margin: 0;
	color: var(--c-muted);
}
@media (min-width: 36rem) {
	.pipowagen-specs__row {
		grid-template-columns: 14rem 1fr;
		gap: var(--sp-4);
		align-items: baseline;
	}
}

/* Foto-galerij van de pipowagen: dezelfde slideshow als op de tarievenpagina,
   binnen dezelfde contentbreedte als de tekst. */
.pipowagen-galerij {
	padding: var(--sp-7) 0 var(--sp-8);
}
.pipowagen-galerij__title {
	margin: 0 0 var(--sp-5);
	text-align: center;
}
/* Placeholder zolang er nog geen foto's zijn (bv. Tiny House). */
.pipowagen-galerij__placeholder {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--sp-5);
	border: 1px dashed var(--c-border);
	border-radius: var(--radius);
	background: linear-gradient(150deg, var(--c-bg-alt), #ded6c2);
	color: var(--c-muted);
}
.pipowagen-galerij__placeholder p { margin: 0; }

/* Afsluitende boek-band op de pipowagen-/tiny-house-pagina: rustig, gecentreerd,
   met een knop die naar /reserveren/ stuurt (gefilterd op deze accommodatie). */
.pipowagen-book {
	padding: var(--sp-7) 0 var(--sp-8);
	text-align: center;
}
.pipowagen-book__title { margin: 0 0 var(--sp-2); }
.pipowagen-book__lead { color: var(--c-muted); margin: 0 0 var(--sp-5); }

@media (max-width: 47.999rem) {
	.pipowagen-hero__content { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
}

/* --- Bewegingsvoorkeur respecteren -------------------------------------- */
/* Bezoekers met "verminder beweging" aan: geen crossfade, geen Ken Burns,
   geen hover-/scroll-animaties. De hero toont één stilstaand beeld. */

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

	.hero__slide,
	.hero__img {
		animation: none !important;
	}
	.hero__slide { opacity: 0; }
	.hero__slide:first-child { opacity: 1; }
	.hero__img { transform: none; }

	.gallery__img,
	.usps__item,
	.site-header,
	.gallery__item::after,
	.lightbox__btn {
		transition: none;
	}
	.gallery__item:hover .gallery__img,
	.gallery__item:focus-visible .gallery__img {
		transform: none;
	}
	.usps__item:hover { transform: none; }
}