/*
Theme Name: Zeeuwse Landhoeve
Theme URI:
Author: Koen Wensing
Description: Neutral, reusable WordPress block (FSE) theme base. Duplicate per client, swap theme.json tokens, replace patterns and page-content.
Version: 1.3.0-linux.1
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: Private
Text Domain: zeeuwse-landhoeve
*/

/* ============================================
   DESIGN TOKENS
   Semantic CSS variables map onto the theme.json palette.
   Swap the hex placeholders (or the theme.json palette) per client.
   ============================================ */

:root {
	--color-primary:      var(--wp--preset--color--primary, #271f51);
	--color-primary-dark: var(--wp--preset--color--primary-dark, #161132);
	--color-accent:       var(--wp--preset--color--accent, #926042);
	--color-accent-dark:  var(--wp--preset--color--accent-dark, #7a4e35);
	--color-dark:         var(--wp--preset--color--dark, #1c1736);
	--color-grey-900:     var(--wp--preset--color--grey-900, #161132);
	--color-grey-700:     var(--wp--preset--color--grey-700, #4b485b);
	--color-grey-600:     var(--wp--preset--color--grey-600, #625e78);
	--color-grey-400:     var(--wp--preset--color--grey-400, #a9a6ba);
	--color-grey-200:     var(--wp--preset--color--grey-200, #dedbea);
	--color-grey-100:     var(--wp--preset--color--grey-100, #eeecf6);
	--color-light:        var(--wp--preset--color--light, #f2f0f9);
	--color-white:        #ffffff;

	/* Height of the fixed header. SINGLE SOURCE OF TRUTH — .site-header-inner
	   reads it, every full-bleed hero reserves at least this much padding-top,
	   and inner pages offset by it. Change it here only.
	   Asserted by SOPs/tools/header-overlap-audit.cjs.
	   Zeeuwse Landhoeve: the demo's nav bar is 68px (h-[68px]). */
	--header-h: 4.25rem;
}

/* ============================================
   GLOBAL RESETS & FIXES
   ============================================ */

/* ⛔ blockGap — read this before changing theme.json's styles.spacing.blockGap.

   Core emits `:root :where(.is-layout-flow) > * { margin-block-start: <blockGap> }`. That is
   EVERY child of EVERY flow-layout wp:group, not just the gap between template parts. It has now
   caused the same class of bug on two builds:

     1. a visible strip above a fixed-header hero (the original reason this fix existed), and
     2. absolutely-positioned children — scrims, overlays, badges — pushed off their `inset`
        anchor, so a full-bleed hero gradient starts 1.5rem below the top of its own section and
        leaves an unscrimmed band under the header. It looks like a broken gradient, not a margin.
     3. items 2..n of any group you turn into a grid sit lower than item 1, because the injected
        margin lands on every child except the first.

   The authoritative fix is `"blockGap": "0"` in theme.json → styles.spacing (already set).
   These themes set every gap explicitly per component, so an injected global default is only
   ever a bug here. KEEP IT AT 0. The rules below are belt-and-braces for the case where a future
   theme.json reintroduces a non-zero value. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Positioned overlays are not flowed content — they must never carry an injected gap. */
.hero-overlay,
.cta-bg,
.property-hero-overlay,
.lightbox-overlay {
	margin-block-start: 0;
}

/* The core Gallery block's own gap (24 Sep 2026). blockGap "0" reaches the gallery as a UNITLESS 0,
   and core sizes each tile with calc(50% - var(gap)/2): with a unitless 0 that calc is invalid, the
   tile falls back to its photo's own width, and a photo that has not loaded yet is 0 px wide. The
   gallery then grows by a screen or more while its lazy photos arrive. Chromium hides that with
   scroll anchoring; Safari does not, so on an iPhone "Beschikbaarheid aanvragen" (→ #boeken below a
   gallery) landed a screen too high (qa-journeys, WebKit, qa-rb-multi). Core reads this default
   before the block gap; a gallery with its own spacing setting still wins. */
.wp-block-gallery.has-nested-images {
	--wp--style--gallery-gap-default: 0.5em;
	/* and the gap the tile widths are calculated with, so the tiles do not touch */
	gap: var(--wp--style--unstable-gallery-gap, 0.5em);
}

/* Anchor jumps land BELOW the fixed header (1.3.0, 25 Sep 2026). The booking page's "Direct naar het
   aanvraagformulier" (#aanvraag) and the deep link /beschikbaarheid/?aankomst=…&vertrek=…#aanvraag put the
   form panel at the top of the screen, where the fixed header (--header-h) would cover its heading and first
   field. qa-journeys (C6) checks that the form's first field is on screen after the jump. Never an
   overflow-x on html (CLAUDE.md → overflow-x rule); scroll-padding is not one. */
html {
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

/* Border-box everywhere (15 Sep 2026). The demos are Tailwind, whose preflight sets exactly this, so
   it matches the approved design. It also removes two traps: core already puts border-box on
   .wp-block-group and block images (SOP 05 §5m #1, #6), so a content-box theme changed size the moment
   a section became a block; and `width:100%` + padding ran past its container — the Kortmann sticky
   button sat 16px off the right edge on every page. NEW BUILDS ONLY: never retrofit this into a client
   theme that was built and measured on content-box. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Smooth scrolling for anchor links — not for visitors who asked their system for less motion (1.2.0). */
html {
	scroll-behavior: smooth;
}

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

/* overflow-x: clip on BODY ONLY — never on html.
   - hidden/clip on html breaks position:fixed and hides the scrollbar sitewide.
   - clip on body contains horizontal overflow with neither side effect.
   NOTE: clip only HIDES an overflow — the cut-off text is still lost. SOPs/tools/qa-mobile-layout.cjs
   measures with it switched off.

   overflow-wrap is inherited by all text (15 Sep 2026). It breaks a word only when the word cannot fit
   on a line at all, so nothing that already fits changes; an unbreakable compound ("Vakantiewoningen",
   an e-mail address) can no longer widen the page at 320px or with enlarged system text. The
   .wp-block-html guard further down predates core-block sections and does not reach them. */
body {
	overflow-x: clip;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Header gotcha #1: the default 4rem padding on post-content pushes the hero
   under the fixed header. Remove it; spacing is handled per-template/per-hero. */
.wp-block-post-content {
	padding-top: 0 !important;
}

/* WordPress injects default margins between wp:html blocks.
   On full-bleed pages this creates visible body-color gaps between sections. */
.wp-block-html {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* wp:group sections (a booking/CTA band, etc.) sit between full-bleed wp:html heroes on
   inner pages (contact/property). The rule above only covers wp:html, so a wp:group section
   keeps a body-colour gap after an image hero. Zero ALL post-content child margins so every
   section butts directly against the next — each section owns its own vertical padding. */
.wp-block-post-content > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Defensive horizontal-overflow guard for the custom (wp:html) sections.
   Flex/grid items default to min-width:auto and grid `1fr` tracks size to their
   content's min-content, so a long unbreakable word (URL, email, placeholder
   token) can push a track past the viewport on narrow phones (~360px).
   `min-width:0` frees flex/grid items to shrink; `overflow-wrap:anywhere`
   (not `break-word`) reduces the min-content used for track sizing so the long
   word can break instead of forcing horizontal scroll. */
.wp-block-html * {
	min-width: 0;
}

.wp-block-html h1,
.wp-block-html h2,
.wp-block-html h3,
.wp-block-html h4,
.wp-block-html p,
.wp-block-html li,
.wp-block-html a,
.wp-block-html span,
.wp-block-html strong {
	overflow-wrap: anywhere;
}

/* WordPress admin bar offset — push the fixed header below the admin bar. */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Global selection colour. */
::selection {
	background-color: var(--color-accent);
	color: #fff;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

body {
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--color-grey-700);
}

h1, h2, h3, h4, h5, h6 {
	font-family: Lora, Georgia, Cambria, 'Times New Roman', Times, serif;
	color: var(--color-dark);
}

/* Phones: hyphenate a long heading word instead of cutting it bare (the dictionary follows <html lang>,
   which WordPress sets from the site locale — B-01). Phones only, so desktop line breaks stay as the
   demo has them. */
@media (max-width: 480px) {
	h1, h2, h3, h4, h5, h6 {
		hyphens: auto;
	}
}

/* ============================================
   HEADER

   Mode B (ACTIVE): transparent header that becomes solid on scroll.
   JS toggles `.scrolled` on .site-header past 20px of scroll.
   backdrop-filter lives on a ::before pseudo-element so it never creates a
   containing block that traps the position:fixed mobile nav overlay.
   ============================================ */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	transition: box-shadow 0.3s ease;
}

.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
	z-index: -1;
	pointer-events: none;
}

.site-header.scrolled::before {
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-grey-200);
}

.site-header.scrolled {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

/* ----- Mode A (solid light header) — INACTIVE.
   To use Mode A instead of Mode B: remove the transparent defaults above and
   uncomment this block (give .site-header::before a permanent solid background).
.site-header::before {
	background-color: rgba(244, 245, 246, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
}
.site-logo-text { color: var(--color-dark); }
.nav-link { color: var(--color-grey-700); }
.nav-mobile-toggle { color: var(--color-grey-700); }
----- end Mode A ----- */

/* The row: logo left, everything else pushed right by the logo's auto margin (1.2.0, 24 Sep 2026).
   Was `justify-content: space-between` over three children; with the language switcher as a fourth
   item that would float it into the middle, and an empty actions group would centre the desktop nav. */
.site-header-inner {
	max-width: 80rem; /* 1280px */
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	height: var(--header-h);
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	margin-right: auto;
	min-width: 0;
}

/* Language switcher + hamburger, always together at the right edge. */
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* Logo = single horizontal line. Explicit colour token, NEVER inherit
   (global link styles override inherit). Light on the transparent header,
   dark once the header is solid. */
.site-logo-text {
	font-family: Lora, Georgia, Cambria, 'Times New Roman', Times, serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	white-space: nowrap;
	color: var(--color-white);
}

.site-header.scrolled .site-logo-text {
	color: var(--color-dark);
}

/* Desktop nav.
   Breakpoint 1024px (Tailwind `lg:`), set by four rules that move together: the two in the media
   block below (show .nav-desktop, hide the toggle), the .header-cta hide rule (max-width: 1023px)
   and the .nav-mobile-panel hide rule. Take the width from the demo; a site that changes it
   changes all four.
   Was 768px until 17 Sep 2026: on an iPad (768px) a logo, three labels and a CTA did not fit, the
   labels wrapped onto three lines across the logo (Stal Vosseveld revision 0.1). Labels never wrap.
   Gate: SOPs/tools/header-overlap-audit.cjs → HEADER_ROW. */
.nav-desktop {
	display: none;
	align-items: center;
	gap: 2rem;
}

.nav-desktop .nav-link {
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.nav-desktop {
		display: flex;
	}
	.site-header .nav-mobile-toggle {
		display: none !important;
	}
}

.nav-link {
	color: var(--color-white);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.nav-link:hover {
	color: var(--color-accent);
}

.site-header.scrolled .nav-link {
	color: var(--color-grey-700);
}

.site-header.scrolled .nav-link:hover {
	color: var(--color-primary);
}

/* Header CTA — never let it break character-by-character; hidden below the desktop nav breakpoint
   (the mobile overlay carries its own CTA instead). Its `display` lives in these two rules only: a
   later unscoped `display` on .header-cta beats the media query at every width. */
.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--color-accent);
	color: #fff;
	padding: 0.625rem 1.5rem;
	border-radius: 9999px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s ease;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.header-cta:hover {
	background-color: var(--color-accent-dark);
	color: #fff;
	transform: scale(1.05);
}

@media (max-width: 1023px) {
	.header-cta {
		display: none;
	}
}

/* Mobile menu toggle */
.nav-mobile-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-white);
	font-size: 1.875rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	/* Fixed 44px tap target — also keeps the button hittable if the icon font
	   fails to load (it would otherwise collapse to near-zero width). */
	width: 2.75rem;
	height: 2.75rem;
}

/* Render the hamburger as a reliable unicode glyph (☰) in a system font, so the menu
   button works even if the icon font fails to load. Header markup uses <span class="menu-glyph">. */
.nav-mobile-toggle .menu-glyph::before {
	content: '\2630';
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.site-header.scrolled .nav-mobile-toggle {
	color: var(--color-grey-700);
}

/* Mobile menu panel.
   Never taller than the screen that shows it (1.2.0, 24 Sep 2026): the panel scrolls inside itself,
   and the booking button is pinned to its bottom edge, so it is visible right after one tap however
   long the menu is. On 3appletrees a 724px menu on a 560-690px phone hid the languages AND the
   Reserveren button below the fold, with nothing saying the menu scrolls. 100vh first as the fallback
   for browsers without dvh; dvh follows the phone's address bar. */
.nav-mobile-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--header-h));
	max-height: calc(100dvh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	--nav-panel-bg: #fff; /* change the panel colour HERE: the pinned CTA's cover band reads it too */
	background-color: var(--nav-panel-bg);
	border-bottom: 1px solid var(--color-grey-200);
	box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
	padding: 1rem 1.25rem 1.25rem;
}

.nav-mobile-panel.open {
	display: block;
}

/* SCOPED to the link list (1.2.0). This rule used to be `.nav-mobile-panel nav` and `.nav-mobile-panel a`:
   it styled EVERY <nav> and link in the panel, so the language switcher (also a <nav>) became a
   bordered column of full-width buttons (3appletrees, incident 23 Sep 2026). Anything else a site puts
   in the panel keeps its own styling. */
.nav-mobile-panel .nav-mobile-links {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border-bottom: 1px solid var(--color-grey-100);
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
}

.nav-mobile-panel .nav-mobile-links a,
.nav-mobile-panel a.nav-cta-mobile {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.875rem;
	color: var(--color-grey-700);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-mobile-panel .nav-mobile-links a:hover {
	background-color: var(--color-grey-100);
	color: var(--color-dark);
}

/* The menu's booking button is pinned to the bottom of the panel while the links scroll underneath.
   The box-shadow paints the panel colour around it so nothing shows through below or beside it. */
.nav-mobile-panel a.nav-cta-mobile {
	position: sticky;
	bottom: 0;
	z-index: 1;
	background-color: var(--color-accent);
	color: #fff;
	justify-content: center;
	border-radius: 0.625rem;
	padding: 0.75rem 1rem;
	font-weight: 700;
	box-shadow: 0 0 0 0.75rem var(--nav-panel-bg, #fff), 0 1.25rem 0 0.75rem var(--nav-panel-bg, #fff);
}

.nav-mobile-panel a.nav-cta-mobile:hover {
	background-color: var(--color-accent-dark);
	color: #fff;
}

/* ============================================
   LANGUAGE SWITCHER (1.2.0, 24 Sep 2026) — inc/lang-switcher.php renders it; single-language sites
   render nothing. Contract (CLAUDE.md → Header checklist #11): in the BAR from 360px and the FIRST
   row of the menu. No rule here depends on the nav breakpoint, so moving that breakpoint cannot open
   a width without a switcher (Villa Arbolada: 769-1023px). Gate: SOPs/tools/qa-nav-mobile.cjs.
   Every property is set explicitly: panel and link rules must never reach these links.
   ============================================ */
.site-lang {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.site-lang:empty {
	display: none;
}

.site-lang__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;       /* 32 x 44: above WCAG 2.5.8 (24px) and fits a 360px bar */
	min-height: 2.75rem;
	padding: 0 0.3rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--color-white);
	border-radius: 0.375rem;
}

.site-lang__item.is-current {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.site-header.scrolled .site-lang__item,
body:not(.page-template-page-homepage) .site-header .site-lang__item {
	color: var(--color-grey-700);
}

.site-header .site-lang__item:hover,
.site-header .site-lang__item:focus-visible {
	color: var(--color-accent);
}

/* Over the homepage photo (transparent header, not yet scrolled) the light codes get a soft ground,
   like the logo's shadow, so they stay legible over any photo. */
body.page-template-page-homepage .site-header:not(.scrolled) .site-lang--bar {
	background: rgba(0, 0, 0, 0.32);
	border-radius: 9999px;
	padding: 0 0.25rem;
}

/* In the menu: the first row, horizontal, wrapping only if the labels are long. */
.nav-mobile-panel .site-lang--menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 0.5rem;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--color-grey-100);
}

.nav-mobile-panel .site-lang--menu .site-lang__item {
	min-width: 3rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--color-grey-700);
	background: none;
}

.nav-mobile-panel .site-lang--menu .site-lang__item.is-current {
	color: var(--color-dark);
	background-color: var(--color-grey-100);
	text-decoration: none;
}

/* The desktop bar already shows the languages; from the nav breakpoint the menu is hidden anyway. Below
   360px (iPhone SE 1st generation) the bar has no room for logo + codes + hamburger: the menu row is the
   one copy there. */
@media (max-width: 359px) {
	.header-actions .site-lang--bar {
		display: none;
	}
}

/* While the menu is open the page's own sticky booking bar would be a second CTA under the menu's. */
html.nav-open .sticky-cta {
	display: none;
}

@media (min-width: 1024px) {
	.nav-mobile-panel {
		display: none !important;
	}
}

/* Inner pages (everything except the homepage template) have no full-bleed hero
   behind the header, so force the header into its solid state for readability and
   push the page content down to clear the fixed header. */
body:not(.page-template-page-homepage) {
	padding-top: var(--header-h);
}

body:not(.page-template-page-homepage) .site-header::before {
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-grey-200);
}

body:not(.page-template-page-homepage) .site-logo-text {
	color: var(--color-dark);
}

body:not(.page-template-page-homepage) .nav-link {
	color: var(--color-grey-700);
}

body:not(.page-template-page-homepage) .nav-link:hover {
	color: var(--color-primary);
}

body:not(.page-template-page-homepage) .nav-mobile-toggle {
	color: var(--color-grey-700);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
	background-color: var(--color-grey-900);
	color: var(--color-grey-400);
	padding: 4rem 0;
	border-top: 8px solid var(--color-accent);
}

.site-footer h3,
.site-footer h4 {
	color: #fff;
}

.site-footer a {
	color: var(--color-grey-400);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer a:hover {
	color: #fff;
}

.footer-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media (min-width: 768px) {
	.footer-inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

.footer-brand-name {
	font-family: Lora, Georgia, Cambria, 'Times New Roman', Times, serif;
	font-weight: 700;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.footer-section-title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.875rem;
	margin-bottom: 1.5rem;
}

.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background-color: var(--color-grey-700);
	color: #fff;
	transition: background-color 0.2s ease;
}

.footer-social-link:hover {
	color: #fff;
	background-color: var(--color-accent);
}

.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.footer-contact-icon {
	color: var(--color-accent);
	font-size: 1.25rem;
	margin-top: 0.125rem;
	flex-shrink: 0;
}

.footer-links-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links-list li {
	margin-bottom: 0.5rem;
}

.footer-bottom {
	max-width: 80rem;
	margin: 3rem auto 0;
	padding: 2rem 1rem 0;
	border-top: 1px solid var(--color-grey-700);
	font-size: 0.875rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* ============================================
   HERO / COVER SECTIONS
   ============================================ */

/* Hero fallback colour (1.2.0; pilot QUESTIONS 20i). Light hero text over a photo has nothing behind it
   until the image paints, or at all if it fails, and contrast tools that cannot see the photo read the
   body colour (ratio ~1). A dark ground keeps the text readable in both cases. It is NOT proof of
   contrast over the photo: the visual review and the rendered-contrast checks still decide that. */
.hero-section,
.property-hero,
.wp-block-cover.hero-section,
.wp-block-cover.property-hero {
	background-color: var(--color-dark);
}

.hero-section {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--header-h); /* clear fixed header */
	background-size: cover;
	background-position: center;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(26, 29, 31, 0.45), rgba(26, 29, 31, 0.7));
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 1rem;
	max-width: 56rem;
	width: 100%;
	min-width: 0; /* allow the flex item to shrink below its content's intrinsic width */
	margin: 0 auto;
}

/* Never let a long word push past the viewport (placeholder tokens, URLs, etc.) */
.hero-heading,
.hero-subtitle,
.hero-eyebrow {
	overflow-wrap: anywhere;
}

.hero-eyebrow {
	color: var(--color-accent);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.hero-heading {
	font-family: Lora, Georgia, Cambria, 'Times New Roman', Times, serif;
	font-weight: 700;
	color: #fff;
	font-size: 3rem;
	line-height: 1.1;
	margin-bottom: 1.5rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
	.hero-heading {
		font-size: 4.5rem;
	}
}

.hero-heading em {
	color: var(--color-grey-200);
	font-style: italic;
}

.hero-subtitle {
	color: var(--color-light);
	font-size: 1.25rem;
	font-weight: 300;
	margin-bottom: 2.5rem;
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
	.hero-subtitle {
		font-size: 1.5rem;
	}
}

.hero-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}

@media (min-width: 640px) {
	.hero-actions {
		flex-direction: row;
	}
}

.btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 2px solid #fff;
	color: #fff;
	padding: 0.75rem 2rem;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-ghost:hover {
	background-color: #fff;
	color: var(--color-dark);
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--color-accent);
	color: #fff;
	padding: 0.75rem 2rem;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
	background-color: var(--color-accent-dark);
	color: #fff;
}

/* ============================================
   SECTION PATTERNS
   ============================================ */

.section {
	padding: 5rem 0;
}

@media (min-width: 768px) {
	.section {
		padding: 8rem 0;
	}
}

.section-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}

/* Blog index, archive, search and single post (templates/home, archive, search, single; 24 Sep 2026).
   They hold core blocks, not the demo's sections, so they get the section gutter and rhythm here: the
   first capture review found the blog text flush against both phone edges (qa-rb-multi, NL/EN/FR). */
.blog-index,
.search-results,
.single-post {
	padding: 3rem 1rem 4rem;
}

@media (min-width: 768px) {
	.blog-index,
	.search-results,
	.single-post {
		padding: 5rem 1.5rem 6rem;
	}
}

.blog-index .wp-block-post-template > li + li,
.search-results .wp-block-post-template > li + li {
	margin-top: 2.5rem;
}

.blog-index .wp-block-post-excerpt,
.search-results .wp-block-post-excerpt,
.single-post .wp-block-post-featured-image,
.single-post .wp-block-post-content {
	margin-top: 1rem;
}

.section-eyebrow {
	color: var(--color-accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.section-heading {
	font-family: Lora, Georgia, Cambria, 'Times New Roman', Times, serif;
	font-weight: 700;
	color: var(--color-dark);
	font-size: 2.25rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	.section-heading {
		font-size: 3rem;
	}
}

/* Background variants */
.section-white { background-color: #fff; }
.section-light { background-color: var(--color-light); }
.section-grey  { background-color: var(--color-grey-100); }
.section-dark  { background-color: var(--color-dark); color: var(--color-light); }
.section-dark .section-heading { color: #fff; }

/* Two-column helper (stacks on mobile, splits on ≥1024px) */
.two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.two-col {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ============================================
   UNIT CARD (generic product / room / property card)
   ============================================ */

.unit-card {
	background-color: #fff;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--color-grey-200);
	display: flex;
	flex-direction: column;
	margin-bottom: 4rem;
}

@media (min-width: 1024px) {
	.unit-card {
		flex-direction: row;
	}
	.unit-card.reversed {
		flex-direction: row-reverse;
	}
}

.unit-card-image {
	position: relative;
	height: 24rem;
	overflow: hidden;
	background-color: var(--color-grey-100);
}

@media (min-width: 1024px) {
	.unit-card-image {
		width: 50%;
		height: auto;
	}
}

.unit-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.unit-card:hover .unit-card-image img {
	transform: scale(1.05);
}

.unit-card-badge {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	background-color: var(--color-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
}

.unit-card.reversed .unit-card-badge {
	left: auto;
	right: 1.5rem;
}

.unit-card-content {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (min-width: 1024px) {
	.unit-card-content {
		width: 50%;
		padding: 3rem;
	}
}

.unit-card-title {
	font-family: Lora, Georgia, Cambria, 'Times New Roman', Times, serif;
	font-weight: 700;
	font-size: 1.875rem;
	color: var(--color-dark);
	margin-bottom: 1rem;
}

.unit-features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.unit-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.unit-features li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-grey-700);
}

.unit-features .check-icon {
	color: var(--color-accent);
	font-size: 1.25rem;
	flex-shrink: 0;
}

.unit-card-footer {
	margin-top: auto;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-grey-200);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem 1rem;
}

/* A TEXT left-hand item (a price line) shares the row with the link like before: both start from a small
   basis, grow into the free space and wrap their own text; the automatic min-width stops either one
   shrinking below its longest word. */
.unit-card-footer > :not(.unit-link) {
	flex: 1 1 6rem;
}

/* A left-hand item WITH IMAGES (a row of thumbnails) never shrinks or grows: a shrunken thumbnail box
   lets its photos overflow and the link is painted over them (Kortmann card footer, 14-09-2026;
   SOP 05 §5m #7). */
.unit-card-footer > :not(.unit-link):has(img),
.unit-card-footer > img {
	flex: 0 0 auto;
	max-width: 100%;
}

/* flex-wrap breaks lines on an item's BASIS. With `auto` (its one-line width) the link drops to a new
   row whenever its text does not fit on one line; 6rem keeps it beside the left item, wrapping its own
   text, and it drops below — still right-aligned — only when even its longest word cannot fit. */
.unit-link {
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	flex: 1 1 6rem;
	align-items: center;
	justify-content: flex-end;
	text-align: right;
	gap: 0.25rem;
	transition: color 0.2s ease;
}

.unit-link:hover {
	color: var(--color-accent);
}

/* Block-native unit card and about split (patterns/*.php, 1.2.0). The Image block IS the .unit-card-image
   figure; the label sits above the title instead of on the photo; the features get a tick (block lists
   only: the older HTML cards carry an icon); and core's flow-layout gap, which beats a one-class rule
   (THEME-NOTES → Specificity), is taken back inside the card. */
.unit-card.wp-block-group > * { margin-block: 0; }
.unit-card > .wp-block-image.unit-card-image { margin: 0; }
.unit-card > .wp-block-image.unit-card-image img { height: 100%; }
.unit-card-content > .unit-card-badge { position: static; align-self: flex-start; margin: 0 0 1rem; }
.wp-block-list.unit-features li::before { content: '\2713'; color: var(--color-accent); font-weight: 700; }
.unit-link a { color: inherit; text-decoration: none; }
.about-split-image img { border-radius: 1.5rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }

/* ============================================
   GALLERY GRID
   ============================================ */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gallery-grid img,
.gallery-grid .gallery-tile {
	width: 100%;
	height: 14rem;
	object-fit: cover;
	border-radius: 1rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Placeholder tile (no image yet) */
.gallery-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-grey-100);
	color: var(--color-grey-400);
	font-weight: 600;
}

/* ============================================
   CONTACT FORM 7 — BASE STYLING
   ============================================ */

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

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid var(--color-grey-200);
	border-radius: 0.5rem;
	background-color: #fff;
	color: var(--color-grey-700);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.2s ease;
	outline: none;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--color-accent);
}

.wpcf7 textarea {
	min-height: 8rem;
	resize: vertical;
}

.wpcf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--color-accent); /* accent submit button */
	color: #fff;
	font-weight: 700;
	padding: 1rem 2.5rem;
	border: none;
	border-radius: 0.75rem;
	font-size: 1.125rem;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	/* Form controls do not inherit the page font; without this the button renders in the system
	   sans, not the demo's. */
	font-family: inherit;
	/* On one line with 2.5rem side padding a Dutch label ("Aanvraag verzenden", ~328px) is wider than
	   a form card on a 320-360px phone and widened the whole page (Kortmann, 14-09-2026). Capped at its
	   container and allowed to wrap its label; wherever it already fits, nothing changes. */
	max-width: 100%;
	white-space: normal;
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--color-accent-dark);
	transform: translateY(-2px);
}

/* CF7's spinner (24px + 24px side margins, invisible until sending) sits inline after the button. On a
   phone it no longer fits beside a button capped at its container and wraps onto an empty ~33px line.
   Keep it out of the layout until a request is actually being sent, then show it centred below. */
@media (max-width: 480px) {
	.wpcf7 input[type="submit"] + .wpcf7-spinner {
		display: none;
	}

	.wpcf7 form.submitting input[type="submit"] + .wpcf7-spinner {
		display: block;
		margin: 0.5rem auto 0;
	}
}

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--color-grey-600);
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	flex-shrink: 0;
}

/* Form card wrapper */
.form-card {
	max-width: 48rem;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 1.5rem;
	padding: 1.5rem 1.25rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

@media (min-width: 640px) {
	.form-card {
		padding: 2.5rem;
	}
}

/* Responsive form grid — single col on mobile, two cols on ≥640px */
.form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1.5rem;
}

@media (min-width: 640px) {
	.form-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.wpcf7 {
	min-width: 0;
	width: 100%;
}

/* ============================================
   GLOBAL DESIGN CONSISTENCY
   Border-radius + box-shadow on images, buttons, cards — applied globally.
   ============================================ */

.wp-block-image img {
	border-radius: 1rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.wp-block-button__link {
	border-radius: 9999px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-grey-100); }
::-webkit-scrollbar-thumb { background: var(--color-grey-400); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-grey-600); }

/* ============================================
   UTILITY CLASSES
   ============================================ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ============================================================================
   COMMON SECTION COMPONENTS
   Demo-agnostic building blocks. The gemini.html and camping-boerlap templates
   (and most hospitality demos) reuse the same sections: hero, feature cards,
   vertical listing/price cards, a two-image "about" stack, a gallery mosaic, and
   a coloured booking/CTA section with a form card. Use these classes in
   page-content/*.html; recolour only via the --color-* tokens / theme.json.
   ============================================================================ */

/* ----- Section heading accent bar (thin underline under a centred heading) ----- */
.heading-bar {
	width: 6rem;
	height: 3px;
	background-color: var(--color-accent);
	margin: 0 auto 1.5rem;
	border-radius: 2px;
}

/* ----- Hero scroll-down indicator (optional; sits at the bottom of a full hero) ----- */
.hero-scroll {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--color-light);
	font-size: 1.875rem;
	opacity: 0.85;
	text-decoration: none;
	z-index: 2;
	animation: starter-bounce 1.6s infinite;
}
.hero-scroll:hover { opacity: 1; color: var(--color-light); }
@keyframes starter-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, -10px); }
}

/* ----- Feature / USP cards (icon circle + title + blurb) ----- */
.feature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 640px)  { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature-card {
	background-color: var(--color-light);
	border: 1px solid var(--color-grey-200);
	border-radius: 1.5rem;
	padding: 2rem;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.feature-icon {
	width: 4rem; height: 4rem; margin: 0 auto 1.25rem;
	background-color: #fff;
	border-radius: 9999px;
	display: flex; align-items: center; justify-content: center;
	color: var(--color-accent); font-size: 1.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
}
.feature-card h3 {
	font-weight: 700; font-size: 1.25rem;
	color: var(--color-primary); margin: 0 0 0.5rem;
}
.feature-card p { font-size: 0.9rem; color: var(--color-grey-700); margin: 0; }

/* ----- Vertical listing / price card (image on top, badge, body, features, action) ----- */
.listing-grid {
	display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
@media (min-width: 768px)  { .listing-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .listing-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.listing-card {
	background-color: #fff;
	border: 1px solid var(--color-grey-200);
	border-radius: 1rem;
	overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.listing-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12); }
.listing-media { position: relative; height: 16rem; overflow: hidden; }
.listing-media img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 0; box-shadow: none; transition: transform 0.5s ease;
}
.listing-card:hover .listing-media img { transform: scale(1.05); }
.listing-badge {
	position: absolute; top: 1rem; right: 1rem;
	background-color: var(--color-light);
	color: var(--color-primary);
	padding: 0.25rem 0.75rem; border-radius: 9999px;
	font-size: 0.875rem; font-weight: 700;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}
.listing-body { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; }
.listing-title { font-weight: 700; font-size: 1.5rem; color: var(--color-primary); margin: 0 0 0.5rem; }
.listing-eyebrow {
	font-size: 0.78rem; font-weight: 600; color: var(--color-accent);
	text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem;
}
.listing-desc { color: var(--color-grey-700); margin-bottom: 1.5rem; flex-grow: 1; }
.listing-features {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1rem; font-size: 0.875rem;
	margin-bottom: 1.5rem; padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-grey-200);
}
.listing-features > * { display: flex; align-items: center; gap: 0.5rem; }
.listing-features i { color: var(--color-primary); width: 1.25rem; text-align: center; flex-shrink: 0; }
.listing-btn {
	display: block; width: 100%; text-align: center;
	border: 2px solid var(--color-primary); color: var(--color-primary);
	background: transparent; font-weight: 700; padding: 0.75rem;
	border-radius: 0.5rem; text-decoration: none; cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.listing-btn:hover { background-color: var(--color-primary); color: var(--color-light); }

/* ----- Two-image "about" stack (main image + overlapping inset) ----- */
.media-stack { position: relative; }
.media-stack > img {
	width: 100%; display: block;
	border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
.media-stack-inset {
	position: absolute; bottom: -2rem; right: -2rem; width: 60%;
	border: 8px solid var(--color-light);
	border-radius: 1rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	display: none;
}
@media (min-width: 768px) { .media-stack-inset { display: block; } }
.media-stack-inset img { width: 100%; display: block; border-radius: 0.5rem; box-shadow: none; }

/* Highlight / call-out box (coloured left border) */
.callout {
	background-color: var(--color-grey-100);
	padding: 1.5rem; border-radius: 0.5rem;
	border-left: 4px solid var(--color-accent);
	margin: 1.5rem 0;
}
.callout h4 { font-weight: 700; font-size: 1.25rem; color: var(--color-primary); margin: 0 0 0.5rem; }
.callout p { font-size: 0.9rem; margin: 0; }

/* ----- Gallery mosaic (add .span-2 to a tile to make it twice as wide on desktop) ----- */
.gallery-mosaic {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
@media (min-width: 768px) { .gallery-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-mosaic figure {
	margin: 0; overflow: hidden; border-radius: 1rem;
	height: 12rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) { .gallery-mosaic figure { height: 16rem; } }
.gallery-mosaic img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 0; box-shadow: none; transition: transform 0.5s ease;
}
.gallery-mosaic figure:hover img { transform: scale(1.1); }
@media (min-width: 768px) { .gallery-mosaic .span-2 { grid-column: span 2; } }

/* ----- CTA / booking section (coloured bg + faded image + form card) ----- */
.cta-section {
	background-color: var(--color-primary);
	color: var(--color-light);
	position: relative; overflow: hidden;
}
.cta-bg { position: absolute; inset: 0; opacity: 0.1; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.cta-inner { position: relative; z-index: 2; max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
.cta-section .section-heading,
.cta-section h2 { color: var(--color-light); }
.cta-card {
	background-color: var(--color-light);
	color: var(--color-grey-700);
	padding: 2rem; border-radius: 1rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) { .cta-card { padding: 2.5rem; } }

/* CF7 inside a .cta-card: two-column grid + labels + an options box. Pair with
   add_filter('wpcf7_autop_or_not','__return_false') in functions.php (already set). */
.cta-card .cf7-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 1.5rem; }
@media (min-width: 640px) { .cta-card .cf7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cta-card .cf7-grid .cf7-full { grid-column: 1 / -1; }
.cta-card label { display: block; font-size: 0.875rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--color-grey-700); }
.cta-card .cf7-options {
	background-color: var(--color-grey-100);
	border: 1px solid var(--color-grey-200);
	border-radius: 0.5rem; padding: 1rem; display: grid; gap: 0.5rem;
}
.cta-card .cf7-options .wpcf7-list-item { display: block; margin: 0; }
.cta-card .cf7-fineprint { font-size: 0.75rem; text-align: center; opacity: 0.7; margin-top: 1rem; }

/* ----- Property / detail page (page-property template) -----
   DEFAULT architecture: one page per property/room/unit (not a single one-pager).
   The homepage cards link to /<slug>; each property page uses this full-bleed image
   hero with the name overlaid at the bottom; the footer deep-links to the same pages. */
body.page-template-page-property { padding-top: 0; } /* hero sits under the floating header */
.property-hero {
	position: relative;
	height: 62vh;
	min-height: 26rem;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	/* Content is bottom-aligned, so it grows UPWARD as the h1 wraps. Without a
	   header-sized top padding the eyebrow/subtitle line disappears behind the
	   fixed header on narrow viewports — fine on desktop, broken on a phone.
	   Always reserve --header-h on any full-bleed hero. */
	padding-top: calc(var(--header-h) + 2rem);
	padding-bottom: 3rem;
}
.property-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(26,29,31,0.85) 0%, rgba(26,29,31,0.35) 50%, transparent 100%);
	z-index: 1;
}
.property-hero-content {
	position: relative; z-index: 2;
	max-width: 80rem; margin: 0 auto; padding: 0 1rem; width: 100%;
}
.property-hero-content h1 {
	font-weight: 700; font-size: 3rem; color: #fff;
	margin: 0 0 0.5rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) { .property-hero-content h1 { font-size: 4rem; } }
.property-hero-subtitle {
	color: var(--color-light);
	font-size: 0.95rem; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
}
.property-features { list-style: none; padding: 0; margin: 0 0 2rem; }
.property-features li { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; color: var(--color-grey-700); }
.property-features i, .property-features .check-icon { color: var(--color-accent); flex-shrink: 0; }
/* (section backgrounds: reuse the existing .section-white / .section-light / .section-grey / .section-dark) */

/* ==========================================================================
   COMPONENT LIBRARY v1.1 — additive components shared by BOTH demo families
   ("gemini": Cormorant/Inter, hero+2-col+dark-cards+pairs+CTA-banner+pricing-form;
    "camping": Playfair/Nunito, hero+feature-cards+listing-cards+overlap-about+
    reverse-checklist+gallery+split-booking+privacy-footer).
   All neutral-token based. New client = copy theme, these come along. See THEME-FACTS.md.
   ========================================================================== */

/* --- Listing card: force dark text on the white card, even when the card sits
   inside a .section-dark (fixes the white-on-white feature list). --- */
.listing-card { color: var(--color-grey-700); }
.listing-card .listing-features li { color: var(--color-grey-700); }

/* Dark listing-card variant (an accent "experience" card among white ones). */
.listing-card.is-dark { background-color: var(--color-dark); border-color: transparent; color: rgba(255,255,255,0.82); }
.listing-card.is-dark .listing-title { color: #fff; }
.listing-card.is-dark .listing-eyebrow { color: var(--color-accent); }
.listing-card.is-dark .listing-desc { color: rgba(255,255,255,0.82); }
.listing-card.is-dark .listing-features { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.82); }
.listing-card.is-dark .listing-features li { color: rgba(255,255,255,0.82); }
.listing-card.is-dark .listing-features i { color: var(--color-accent); }
.listing-card.is-dark .listing-btn { border-color: rgba(255,255,255,0.5); color: #fff; }
.listing-card.is-dark .listing-btn:hover { background-color: #fff; color: var(--color-dark); }

/* --- CTA section: default vertical breathing room (was 0 → cramped banners). --- */
.cta-section { padding-top: 6rem; padding-bottom: 6rem; }

/* --- Image-backed CTA banner: full-bleed photo + dark overlay + centred text.
   Set the photo via inline style="background-image:url(...)"; tint per client by
   overriding --cta-overlay (e.g. a dark-green rgba). --- */
.cta-banner {
	--cta-overlay: rgba(26, 29, 31, 0.78);
	position: relative; overflow: hidden;
	padding: 7rem 1.5rem; text-align: center;
	background-size: cover; background-position: center;
}
.cta-banner::before { content: ''; position: absolute; inset: 0; background: var(--cta-overlay); }
.cta-banner-inner { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; }
.cta-banner-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); margin: 0 0 0.75rem; }
.cta-banner h2 { font-family: var(--wp--preset--font-family--serif, Georgia, serif); color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; margin: 0 0 1rem; }
.cta-banner p { color: rgba(255,255,255,0.9); margin: 0 auto 2rem; max-width: 34rem; line-height: 1.6; }
.cta-banner-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --- Button variants for banners / dark sections. --- */
.btn-accent {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background-color: var(--color-accent); color: #fff;
	padding: 0.95rem 2rem; border-radius: 0.5rem; font-weight: 700; text-decoration: none;
	box-shadow: 0 10px 20px rgba(0,0,0,0.18); transition: background-color 0.2s ease;
}
.btn-accent:hover { background-color: var(--color-accent-dark); color: #fff; }
.btn-outline-light {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.55); color: #fff;
	padding: 0.95rem 2rem; border-radius: 0.5rem; font-weight: 700; text-decoration: none; transition: background-color 0.2s ease;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* --- Rich feature list (icon + bold serif title + description) for alternating
   "about / experience" 2-col sections (e.g. camping demo's #beleving). --- */
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 1rem; }
.feature-list i { color: var(--color-primary); font-size: 1.15rem; margin-top: 0.3rem; flex-shrink: 0; }
.feature-list strong { display: block; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 1.2rem; color: var(--color-dark); margin-bottom: 0.2rem; }
.feature-list span { color: var(--color-grey-700); font-size: 0.95rem; line-height: 1.6; }

/* --- Decorative round badge overlaying a .media-stack image composition. --- */
.media-stack .media-badge {
	position: absolute; z-index: 30; top: 50%; left: 0; transform: translate(-25%, -50%);
	width: 6rem; height: 6rem; border-radius: 9999px;
	background-color: var(--color-accent); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.media-stack .media-badge .media-badge-num { font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.media-stack .media-badge .media-badge-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.2rem; }

/* --- Booking split: info aside + form inside one rounded card. Sits well inside a
   .cta-section image background. Add .is-dark to .booking-info for a dark aside. --- */
.booking-split { display: grid; gap: 0; border-radius: 1.25rem; overflow: hidden; background-color: var(--color-white); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
@media (min-width: 768px) { .booking-split { grid-template-columns: 2fr 3fr; } }
.booking-split > * { min-width: 0; }
.booking-info { background-color: var(--color-light); padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.booking-info.is-dark { background-color: var(--color-dark); color: rgba(255,255,255,0.85); }
.booking-info.is-dark h2, .booking-info.is-dark h3 { color: #fff; }
.booking-form { padding: 2.5rem; background-color: var(--color-white); color: var(--color-grey-700); }
/* .cta-section sets `color: var(--color-light)`, which cascades into these light/white panes and
   renders the info text + CF7 <label>s near-invisible (white-on-white). Force dark text (the .is-dark
   aside re-whitens itself above), style the form labels, re-enable the two-column field grid, and cap
   the textarea — the .cf7-grid/.cta-card label helpers don't reach a form that lives in .booking-form. */
.booking-info:not(.is-dark) { color: var(--color-grey-700); }
.booking-info:not(.is-dark) h2, .booking-info:not(.is-dark) h3 { color: var(--color-dark); }
.booking-form label { display: block; font-size: 0.875rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--color-grey-700); }
.booking-form .cf7-grid { display: grid; grid-template-columns: 1fr; column-gap: 1.25rem; }
@media (min-width: 640px) { .booking-form .cf7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.booking-form .cf7-grid .cf7-full { grid-column: 1 / -1; }
.booking-form textarea { min-height: 6rem; }

/* --- Availability calendar (WP Simple Booking Calendar, 09 T1a), 1.2.0. The plugin pulls its month row
   5px past both edges of its container (.wpsbc-calendars { margin: 0 -5px }) to make room for each
   month's own 5px margins. In a container without side padding that is a 6px sideways pan on a phone:
   body's overflow-x: clip does not stop a phone from widening the page to fit it (qa-journeys, 24 Sep
   2026). The container's own padding absorbs the pull at every column count. --- */
.wpsbc-container[data-columns] { padding-left: 5px; padding-right: 5px; }

/* --- Property/detail page: photo grid (1 large + 2 small) to balance the text
   column height. Real photos drop straight into the same 3 slots. --- */
.property-gallery { display: grid; gap: 1rem; }
.property-gallery .pg-main img { width: 100%; height: auto; display: block; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.12); }
.property-gallery .pg-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.property-gallery .pg-row img { width: 100%; height: 11rem; object-fit: cover; display: block; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); }

/* --- Footer bottom utility links row (Contact · Privacy · Terms). --- */
.footer-meta { margin-top: 0.6rem; font-size: 0.85rem; }
.footer-meta a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-meta a:hover { color: #fff; }

/* --- Reveal-on-scroll: both demo families fade sections in. assets/js/header.js
   toggles .is-visible. Respects reduced-motion; degrades to visible without JS. --- */
.reveal, .fade-in-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; }
.reveal.is-visible, .fade-in-up.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .fade-in-up { opacity: 1; transform: none; transition: none; } }

/* --- Price list (seasonal tariff rows) for a pricing aside, e.g. inside .booking-info. --- */
.price-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1rem; }
.price-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--color-grey-100); border-radius: 0.5rem; padding: 0.7rem 1rem; }
.price-row .price-value { font-weight: 700; white-space: nowrap; }
.booking-info.is-dark .price-row { background: rgba(255,255,255,0.08); }

/* --- Sticky mobile CTA (.sticky-cta) — SOP 08 §1.2, REQUIREMENTS B-18 (15 Sep 2026).
   Rendered from functions.php (starter_render_sticky_cta) so a content re-push cannot wipe it; label,
   target and the watched booking section via the starter_sticky_cta_args filter. Phones only; hidden
   while the booking section is on screen (header.js adds .is-hidden). Gate: SOPs/tools/qa-mobile-layout.cjs
   (FIXED_CENTRED). --- */
.sticky-cta { display: none; }

@media (max-width: 768px) {
	/* border-box is global (GLOBAL RESETS). Restated here because this component must stay centred even
	   in a client theme without the global rule: width:100% + the bar's side padding ran the Kortmann
	   button 16px off the right edge on every page. */
	.sticky-cta,
	.sticky-cta-btn { box-sizing: border-box; }

	.sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40; /* below .site-header (50), so the open mobile menu covers it; the lightbox (9999) sits above */
		display: block;
		padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
		background-color: var(--color-light);
		border-top: 1px solid var(--color-grey-200);
		box-shadow: 0 -6px 18px -6px rgba(0, 0, 0, 0.18);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	/* Room for the bar at the end of the page: without it the footer's last lines (the copyright, the
	   privacy link) stayed under the bar for good on every phone page. Found by the capture once it
	   counted only what the bars leave visible (24 Sep 2026). */
	body:has(.sticky-cta) {
		padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
	}

	/* No point offering a shortcut to the section the visitor is already looking at. */
	.sticky-cta.is-hidden {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	.sticky-cta-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.875rem 1rem;
		border-radius: 9999px;
		background-color: var(--color-primary);
		color: #fff;
		font-weight: 700;
		text-decoration: none;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
	}

	.sticky-cta-btn:hover,
	.sticky-cta-btn:focus {
		background-color: var(--color-primary-dark);
		color: #fff;
	}

	/* Keep the bar from covering the last line of the footer. */
	.site-footer { padding-bottom: 6rem; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.sticky-cta { transition: none; }
}

/* --- Lightbox: click a gallery / property image to view it enlarged. JS in assets/js/header.js;
   auto-applies to images inside .property-gallery / .gallery-mosaic / .gallery-grid, or any [data-lightbox].
   Core Gallery / Image blocks use WordPress's own lightbox (theme.json → core/image → lightbox, 1.3.0).
   The triggers here are keyboard buttons since 1.3.0 (header.js): they need a focus ring the photo
   cannot hide, and so does the close button on the dark backdrop (SOPs/tools/qa-keyboard.cjs). --- */
.property-gallery img, .gallery-mosaic img, .gallery-grid img, [data-lightbox] { cursor: zoom-in; }
.property-gallery img:focus-visible, .gallery-mosaic img:focus-visible, .gallery-grid img:focus-visible, [data-lightbox]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; background: rgba(255,255,255,0.3); }
.lightbox-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,0.9); cursor: zoom-out; opacity: 0; transition: opacity 0.25s ease; }
.lightbox-overlay.open { display: flex; opacity: 1; }
.lightbox-overlay img { max-width: 94vw; max-height: 92vh; border-radius: 0.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); cursor: default; }
.lightbox-close { position: absolute; top: 1rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; border: none; border-radius: 9999px; background: rgba(255,255,255,0.15); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background-color 0.2s ease; }
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ==========================================================================
   CLIENT: minicamping Zeeuwse Landhoeve — version 1 (build 2026-10-07)
   The demo (demo-site/index.html) is the visual contract, with the client-approved deviations of K-09:
   their opening photo with the dunes as the hero and their blue colours (the current site's hue 250) instead of
   the demo's green and cream. Tokens: theme.json. Fonts: the demo's own Lora + Inter, self-hosted (08 §1.1).
   Sections are core blocks (wp:group / wp:image / wp:cover), so every rule that sets a margin on a block child
   carries two classes: core's flow layout rule `:root :where(.is-layout-flow) > *` otherwise wins (05 §5m,
   THEME-NOTES → Specificity).
   ========================================================================== */

/* --- Fonts (variable woff2, the demo's own files; latin + latin-ext) --- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('assets/fonts/inter/inter-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: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('assets/fonts/inter/inter-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: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/lora/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('assets/fonts/lora/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; font-display: swap; src: url('assets/fonts/lora/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; font-display: swap; src: url('assets/fonts/lora/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; }

/* --- Client tokens: the demo's roles in the owners' blue (hue 250) --- */
:root {
	--zlh-ink: var(--color-dark);            /* demo ink #1F1B16 */
	--zlh-ink-soft: var(--color-grey-700);   /* demo ink-soft #4A4339 */
	--zlh-cream: var(--color-light);         /* demo cream #F4EFE6 → pale blue */
	--zlh-cream-deep: #e3e0f2;               /* demo cream-deep #EAE0CE → blue */
	--zlh-forest: var(--color-primary);      /* demo forest #243A2E → deep indigo */
	--zlh-forest-deep: var(--color-primary-dark); /* demo forest-deep #16241C */
	--zlh-clay: var(--color-accent);         /* demo clay (contrast-repaired #926042), kept */
	--zlh-clay-soft: #d7b49c;                /* demo clay-soft on dark grounds, lightened for contrast */
	--zlh-line: rgba(28, 23, 54, 0.08);
}

body {
	color: var(--zlh-ink-soft);
	font-size: 1rem;
}

/* --- Header: the demo's bar (68px, wordmark, four labels, outlined CTA) --- */
.site-header-inner {
	max-width: 87.5rem; /* 1400px, demo max-w-[1400px] */
	padding: 0 1.25rem;
}
@media (min-width: 640px) {
	.site-header-inner { padding: 0 2rem; }
}
.site-logo-text {
	font-family: Lora, Georgia, serif;
	font-weight: 600;
	font-size: 1.375rem; /* 22px */
	letter-spacing: -0.01em;
}
.nav-desktop { gap: 2.25rem; }
.nav-link { font-weight: 400; font-size: 0.9375rem; }
.site-header .header-cta {
	background-color: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	box-shadow: none;
}
.site-header .header-cta:hover { background-color: rgba(255, 255, 255, 0.12); transform: none; }
.site-header .header-cta i { font-size: 0.75rem; }
.site-header.scrolled::before,
body:not(.page-template-page-homepage) .site-header::before {
	background-color: #fff;
	border-bottom: 1px solid var(--zlh-line);
}
.site-header.scrolled { box-shadow: 0 10px 30px -12px rgba(28, 23, 54, 0.18); }
.site-header.scrolled .site-logo-text,
body:not(.page-template-page-homepage) .site-logo-text { color: var(--zlh-forest); }
.site-header.scrolled .nav-link,
body:not(.page-template-page-homepage) .nav-link { color: var(--zlh-ink); }
.site-header.scrolled .nav-link:hover,
body:not(.page-template-page-homepage) .nav-link:hover { color: var(--zlh-clay); }
.nav-link:hover { color: #ece7f7; }
.site-header.scrolled .header-cta,
body:not(.page-template-page-homepage) .site-header .header-cta {
	background-color: var(--zlh-forest);
	border-color: var(--zlh-forest);
	color: #fff;
}
.site-header.scrolled .header-cta:hover,
body:not(.page-template-page-homepage) .site-header .header-cta:hover { background-color: var(--zlh-forest-deep); }
/* Menu open over the hero: the bar turns white with the panel, so logo and close button stay readable. */
html.nav-open .site-header::before { background-color: #fff; border-bottom: 1px solid var(--zlh-line); }
html.nav-open .site-header .site-logo-text,
html.nav-open .site-header .nav-mobile-toggle { color: var(--zlh-forest); }
.nav-mobile-toggle { -webkit-tap-highlight-color: transparent; border-radius: 0.5rem; }
.nav-mobile-toggle:focus-visible,
.site-logo:focus-visible,
.nav-link:focus-visible,
.header-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.nav-mobile-panel .nav-mobile-links a { border-bottom: 1px solid var(--zlh-line); border-radius: 0; font-weight: 400; font-size: 1rem; color: var(--zlh-ink); }
.nav-mobile-panel a.nav-cta-mobile { background-color: var(--zlh-forest); border-radius: 9999px; font-weight: 500; }
.nav-mobile-panel a.nav-cta-mobile:hover { background-color: var(--zlh-forest-deep); }

/* --- Footer: the demo's dark four-column footer --- */
.site-footer {
	background-color: var(--zlh-forest-deep);
	color: rgba(255, 255, 255, 0.78);
	border-top: 0;
	padding: 4rem 0 2rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.82); }
.site-footer a:hover { color: #fff; }
.site-footer .footer-inner {
	max-width: 87.5rem;
	padding: 0 1.25rem;
	gap: 2.5rem;
}
@media (min-width: 640px) { .site-footer .footer-inner { padding: 0 2rem; } }
@media (min-width: 768px) { .site-footer .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .site-footer .footer-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.footer-brand-name { font-family: Lora, Georgia, serif; font-size: 1.5rem; font-weight: 400; color: #fff; margin: 0 0 1rem; }
.footer-brand-text { font-size: 0.9375rem; line-height: 1.7; max-width: 28rem; margin: 0 0 1.5rem; color: rgba(255, 255, 255, 0.78); }
.footer-facts { font-size: 0.875rem; margin: 0; color: rgba(255, 255, 255, 0.82); }
.footer-facts i, .site-footer .footer-contact-icon { color: var(--zlh-clay-soft); }
.site-footer .footer-section-title {
	font-family: Lora, Georgia, serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 1.25rem;
}
.site-footer .footer-contact-item { font-size: 0.9375rem; align-items: baseline; }
.site-footer .footer-contact-icon { font-size: 0.95rem; width: 1rem; }
.site-footer .footer-links-list li { margin-bottom: 0.75rem; font-size: 0.9375rem; }
.site-footer .footer-bottom {
	max-width: 87.5rem;
	margin-top: 3.5rem;
	padding: 1.75rem 1.25rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.68);
}
@media (min-width: 640px) { .site-footer .footer-bottom { padding: 1.75rem 2rem 0; } }
.site-footer .footer-bottom p { margin: 0; }

/* --- Sticky bar and form button in the client's colour --- */
.sticky-cta { background-color: #fff; border-top-color: var(--zlh-line); }

/* --- Sections, containers and type (demo: py-20 sm:py-28, max-w-[1400px] px-5 sm:px-8) --- */
.zlh-section { padding: 5rem 0; }
@media (min-width: 640px) { .zlh-section { padding: 7rem 0; } }
.zlh-bg-light { background-color: var(--zlh-cream); }
.zlh-bg-white { background-color: #fff; }
.zlh-inner { max-width: 87.5rem; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .zlh-inner { padding: 0 2rem; } }
.zlh-inner.zlh-narrow { max-width: 52rem; }
.zlh-inner.zlh-center { text-align: center; max-width: 48rem; }

.wp-site-blocks .zlh-eyebrow,
.wp-site-blocks .zlh-hero-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--zlh-clay);
	margin: 0;
}
.wp-site-blocks .zlh-title {
	font-family: Lora, Georgia, serif;
	font-weight: 400;
	color: var(--zlh-ink);
	font-size: 2rem;
	line-height: 1.15;
	margin: 1rem 0 0;
	overflow-wrap: break-word;
}
@media (min-width: 640px) { .wp-site-blocks .zlh-title { font-size: 2.75rem; } }
@media (min-width: 1024px) { .wp-site-blocks .zlh-title { font-size: 3rem; } .wp-site-blocks .zlh-title.zlh-title-xl { font-size: 3.25rem; } }
.wp-site-blocks .zlh-eyebrow + .zlh-title { margin-top: 1rem; }
.wp-site-blocks .zlh-text > .zlh-title:first-child,
.wp-site-blocks .zlh-narrow > .zlh-title:first-child,
.wp-site-blocks .zlh-center > .zlh-title:first-child { margin-top: 0; }
.wp-site-blocks .zlh-lead { font-size: 1.0625rem; line-height: 1.7; color: var(--zlh-ink-soft); margin: 1.25rem 0 0; }
/* Plain paragraphs in a text column: one class of specificity (beats core's flow rule, loses to every
   named paragraph style below such as .zlh-eyebrow, .zlh-facts, .zlh-note). */
.wp-site-blocks :where(.zlh-text, .zlh-narrow, .zlh-center) > p { font-size: 1.0625rem; line-height: 1.75; color: var(--zlh-ink-soft); margin: 1.25rem 0 0; }
.wp-site-blocks .zlh-text > .zlh-eyebrow,
.wp-site-blocks .zlh-narrow > .zlh-eyebrow { margin: 0; }
.wp-site-blocks .zlh-subtitle { font-family: Lora, Georgia, serif; font-weight: 500; font-size: 1.5rem; color: var(--zlh-ink); margin: 2.25rem 0 0; }
.wp-site-blocks .zlh-facts { font-size: 0.875rem; color: var(--zlh-ink); margin-top: 2.25rem; }
.wp-site-blocks .zlh-note { font-size: 0.875rem; line-height: 1.65; font-style: italic; color: var(--zlh-ink-soft); margin-top: 1.75rem; }
.wp-site-blocks .zlh-more { margin-top: 2rem; font-size: 0.9375rem; font-weight: 500; }
.wp-site-blocks .zlh-more a, .zlh-unit-link a { color: var(--zlh-forest); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.zlh-more a::after, .zlh-unit-link a::after { content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.75em; margin-left: 0.5rem; }
.zlh-section a { color: var(--zlh-forest); }
.zlh-section a:hover { color: var(--zlh-clay); }

.wp-site-blocks .zlh-intro { max-width: 42rem; margin-bottom: 3.5rem; }
.wp-site-blocks .zlh-intro > .zlh-lead { margin-top: 1.25rem; }

/* Two columns (demo: grid lg:grid-cols-2 gap-12 lg:gap-20 items-center) */
.zlh-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (min-width: 1024px) {
	.zlh-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; }
	.zlh-split.zlh-split-top { align-items: start; }
}
@media (max-width: 1023px) {
	.zlh-split.zlh-split-reverse > :last-child { order: -1; } /* text first on phones, as the demo's order-1 */
}

/* Photos: rounded, shadowed, cropped to their box */
.wp-site-blocks .zlh-photo.wp-block-image,
.wp-site-blocks .zlh-tile.wp-block-image,
.wp-site-blocks .zlh-unit-photo.wp-block-image { margin: 0; overflow: hidden; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(28, 23, 54, 0.12), 0 2px 4px -2px rgba(28, 23, 54, 0.1); }
.wp-site-blocks .zlh-photo.wp-block-image img,
.wp-site-blocks .zlh-tile.wp-block-image img,
.wp-site-blocks .zlh-unit-photo.wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.zlh-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .zlh-photo-pair { gap: 1.25rem; } }
.wp-site-blocks .zlh-photo-pair > .zlh-photo { height: 16.25rem; }
@media (min-width: 640px) {
	.wp-site-blocks .zlh-photo-pair > .zlh-photo { height: 21.25rem; }
	.wp-site-blocks .zlh-photo-pair > .zlh-photo:nth-child(2) { margin-top: 2.5rem; }
	.wp-site-blocks .zlh-photo-pair.zlh-photo-pair-tall > .zlh-photo { height: 22.5rem; }
	.wp-site-blocks .zlh-photo-pair.zlh-photo-pair-tall > .zlh-photo:nth-child(2) { margin-top: 3rem; }
}
.wp-site-blocks .zlh-photo.zlh-photo-tall { height: 26.25rem; border-radius: 1.5rem; box-shadow: 0 10px 15px -3px rgba(28, 23, 54, 0.14), 0 4px 6px -4px rgba(28, 23, 54, 0.1); }
@media (min-width: 640px) { .wp-site-blocks .zlh-photo.zlh-photo-tall { height: 35rem; } }
.wp-site-blocks .zlh-photo.zlh-photo-main { aspect-ratio: 4 / 3; }
.wp-site-blocks .zlh-photo.zlh-photo-main.zlh-photo-portrait { aspect-ratio: 3 / 4; max-width: 30rem; }
.wp-site-blocks .zlh-photo.zlh-photo-map { aspect-ratio: 16 / 9; }
.wp-site-blocks .zlh-photo.zlh-photo-map img { object-fit: contain; background: #fff; }
.zlh-photo-stack { display: grid; gap: 1.25rem; }

/* Icons drawn from the wrapper's class (the owner edits the text; the icon is decoration) */
.zlh-ico::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--zlh-forest);
}
.zlh-ico-leaf::before { content: '\f06c'; }
.zlh-ico-heart::before { content: '\f004'; }
.zlh-ico-calendar::before { content: '\f274'; }
.zlh-ico-paw::before { content: '\f1b0'; }
.zlh-ico-water::before { content: '\f773'; }
.zlh-ico-beach::before { content: '\f5ca'; }
.zlh-ico-tree::before { content: '\f1bb'; }
.zlh-ico-wine::before { content: '\f4e3'; }
.zlh-ico-shower::before { content: '\f2cc'; }
.zlh-ico-wifi::before { content: '\f1eb'; }
.zlh-ico-basket::before { content: '\f291'; }

/* Feature cards (demo #waarom) */
.zlh-features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .zlh-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1024px) { .zlh-features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zlh-feature { background: var(--zlh-cream); border: 1px solid var(--zlh-line); border-radius: 1rem; padding: 1.75rem; }
.zlh-feature::before { width: 3rem; height: 3rem; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(28, 23, 54, 0.08); font-size: 1.125rem; margin-bottom: 1.25rem; }
.wp-site-blocks .zlh-feature > h3 { font-family: Lora, Georgia, serif; font-weight: 400; font-size: 1.3125rem; line-height: 1.35; color: var(--zlh-ink); margin: 0 0 0.5rem; }
.wp-site-blocks .zlh-feature > p { font-size: 0.9375rem; line-height: 1.65; margin: 0; color: var(--zlh-ink-soft); }

/* Accommodation cards (demo #verblijven) */
.zlh-units { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .zlh-units { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zlh-units { gap: 1.75rem; } }
.zlh-unit { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--zlh-line); border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(28, 23, 54, 0.1), 0 2px 4px -2px rgba(28, 23, 54, 0.08); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s; }
.zlh-unit:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(28, 23, 54, 0.28); }
.wp-site-blocks .zlh-unit > .zlh-unit-photo.wp-block-image { height: 16.25rem; border-radius: 0; box-shadow: none; }
@media (min-width: 640px) { .wp-site-blocks .zlh-unit > .zlh-unit-photo.wp-block-image { height: 17.5rem; } }
.wp-site-blocks .zlh-unit > .zlh-unit-badge { position: absolute; top: 1rem; right: 1rem; z-index: 2; margin: 0; background: rgba(255, 255, 255, 0.95); color: var(--zlh-forest); font-weight: 600; font-size: 0.8125rem; padding: 0.375rem 0.875rem; border-radius: 9999px; box-shadow: 0 1px 3px rgba(28, 23, 54, 0.15); }
.zlh-unit-body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem; }
.wp-site-blocks .zlh-unit-body > .zlh-unit-title { font-family: Lora, Georgia, serif; font-weight: 400; font-size: 1.5rem; line-height: 1.35; color: var(--zlh-ink); margin: 0; }
.wp-site-blocks .zlh-unit-body > .zlh-unit-text { flex: 1; font-size: 0.9375rem; line-height: 1.65; color: var(--zlh-ink-soft); margin: 0.75rem 0 0; }
.wp-site-blocks .zlh-unit-body > .zlh-checks { margin-top: 1.25rem; }
.wp-site-blocks .zlh-unit-body > .zlh-unit-link { margin: 1.5rem 0 0; font-size: 0.9375rem; font-weight: 500; }

/* Check lists (demo: circle-check icons in clay) */
.wp-site-blocks .zlh-checks { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.wp-site-blocks .zlh-checks > li { position: relative; padding-left: 1.6rem; font-size: 0.875rem; color: var(--zlh-ink); margin: 0 0 0.5rem; line-height: 1.5; }
.wp-site-blocks .zlh-text .zlh-checks > li { font-size: 0.9375rem; margin-bottom: 0.625rem; }
.zlh-checks > li::before { content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 0.05em; color: var(--zlh-clay); font-size: 0.875rem; }

/* Season strip (demo: Seizoen 2026 band) */
.wp-site-blocks .zlh-season { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid var(--zlh-line); }
@media (min-width: 640px) { .wp-site-blocks .zlh-season { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.75rem; } }
.zlh-season-title { font-family: Lora, Georgia, serif; font-size: 1.25rem; color: var(--zlh-ink); margin: 0; }
.zlh-season-text { font-size: 0.9375rem; color: var(--zlh-ink-soft); margin: 0.25rem 0 0; }
.wp-site-blocks .zlh-season > .wp-block-buttons { margin: 0; flex-shrink: 0; }

/* Icon items (demo #omgeving) */
.wp-site-blocks .zlh-items { display: grid; gap: 1.25rem; margin-top: 2rem; }
.zlh-item { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; }
.zlh-item::before { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--zlh-cream); font-size: 1rem; }
.wp-site-blocks .zlh-item > h3 { grid-column: 2; font-family: Lora, Georgia, serif; font-weight: 400; font-size: 1.1875rem; line-height: 1.35; color: var(--zlh-ink); margin: 0; }
.wp-site-blocks .zlh-item > p { grid-column: 2; font-size: 0.9375rem; line-height: 1.65; color: var(--zlh-ink-soft); margin: 0.25rem 0 0; }

/* Small cards (demo #faciliteiten) */
.wp-site-blocks .zlh-minicards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .wp-site-blocks .zlh-minicards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wp-site-blocks .zlh-minicards.zlh-minicards-wide { margin-top: 0; gap: 1.5rem; }
.zlh-minicard { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: 0.75rem; padding: 1.25rem; border-radius: 0.75rem; background: #fff; border: 1px solid var(--zlh-line); }
.zlh-bg-white .zlh-minicard { background: var(--zlh-cream); }
.zlh-minicard::before { grid-row: 1 / span 2; color: var(--zlh-clay); font-size: 1rem; justify-content: flex-start; align-items: flex-start; padding-top: 0.2rem; }
.wp-site-blocks .zlh-minicard > h3 { grid-column: 2; font-family: Lora, Georgia, serif; font-weight: 500; font-size: 1.0625rem; line-height: 1.35; color: var(--zlh-ink); margin: 0; }
.wp-site-blocks .zlh-minicard > p { grid-column: 2; font-size: 0.875rem; line-height: 1.6; color: var(--zlh-ink-soft); margin: 0.25rem 0 0; }
.zlh-minicards-wide .zlh-minicard { padding: 1.75rem; }
.wp-site-blocks .zlh-minicards-wide .zlh-minicard > h3 { font-size: 1.25rem; }
.wp-site-blocks .zlh-minicards-wide .zlh-minicard > p { font-size: 0.9375rem; line-height: 1.7; margin-top: 0.5rem; }

/* Gallery (demo #galerij: grid-cols-2 lg:grid-cols-4, tiles h-[220px] sm:h-[260px]) */
.zlh-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .zlh-gallery { gap: 1.25rem; } }
@media (min-width: 1024px) { .zlh-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } .zlh-gallery.zlh-gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wp-site-blocks .zlh-gallery > .zlh-tile { height: 13.75rem; }
@media (min-width: 640px) { .wp-site-blocks .zlh-gallery > .zlh-tile { height: 16.25rem; } }
.wp-site-blocks .zlh-gallery.zlh-gallery-3 > .zlh-tile { height: 16.25rem; }
@media (min-width: 640px) { .wp-site-blocks .zlh-gallery.zlh-gallery-3 > .zlh-tile { height: 20rem; } }
.zlh-tile img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.zlh-tile:hover img { transform: scale(1.05); }

/* The guests' film (revision 1.1): a core Video block (Media Library), click-to-play, its poster until play.
   Full content width at 16:9, rounded and shadowed like the photos; the forest ground shows only around a film
   that is not 16:9. The outline sits on the video itself, so no overflow clips the focus ring. */
.wp-site-blocks .zlh-video { width: 100%; margin: 0 0 2.5rem; }
.wp-site-blocks .zlh-video > .wp-block-video { margin: 0; }
.wp-site-blocks .zlh-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 1rem; background: var(--zlh-forest); box-shadow: 0 4px 6px -1px rgba(28, 23, 54, 0.12), 0 2px 4px -2px rgba(28, 23, 54, 0.1); }
.wp-site-blocks .zlh-video video:focus-visible { outline: 3px solid var(--zlh-clay); outline-offset: 3px; }

/* --- Buttons (core Button blocks, styled by their wrapper class) --- */
.wp-site-blocks .zlh-hero-actions,
.wp-site-blocks .zlh-actions,
.wp-site-blocks .zlh-band-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.wp-site-blocks .zlh-actions.zlh-actions-center { justify-content: center; }
.zlh-btn-light .wp-block-button__link,
.zlh-btn-glass .wp-block-button__link,
.zlh-btn-dark .wp-block-button__link,
.zlh-btn-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.875rem 1.75rem;
	border-radius: 9999px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.zlh-btn-light .wp-block-button__link { background: #fff; color: var(--zlh-forest); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15); }
.zlh-btn-light .wp-block-button__link:hover { background: var(--zlh-cream); color: var(--zlh-forest); }
.zlh-btn-light .wp-block-button__link::after,
.zlh-btn-dark .wp-block-button__link::after { content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.75rem; }
.zlh-btn-glass .wp-block-button__link { background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); font-weight: 500; backdrop-filter: blur(4px); }
.zlh-btn-glass .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.zlh-btn-dark .wp-block-button__link { background: var(--zlh-forest); color: #fff; font-weight: 500; }
.zlh-btn-dark .wp-block-button__link:hover { background: var(--zlh-forest-deep); color: #fff; }
.zlh-btn-outline .wp-block-button__link { background: transparent; color: var(--zlh-forest); border: 1px solid var(--zlh-forest); font-weight: 500; }
.zlh-btn-outline .wp-block-button__link:hover { background: var(--zlh-forest); color: #fff; }

/* --- Homepage hero: their dunes photo, the demo's composition and scrim --- */
.wp-block-cover.zlh-hero { min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 2rem) 1.25rem 3rem; background-color: var(--zlh-forest-deep); }
.wp-block-cover.zlh-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(22, 17, 50, 0.55) 0%, rgba(22, 17, 50, 0.3) 35%, rgba(22, 17, 50, 0.72) 100%) !important; opacity: 1 !important; }
.wp-block-cover.zlh-hero .wp-block-cover__inner-container { max-width: 48rem; text-align: center; color: #fff; }
.wp-site-blocks .zlh-hero .zlh-hero-eyebrow { color: rgba(255, 255, 255, 0.88); margin: 0 0 1.25rem; font-size: 0.75rem; }
@media (min-width: 640px) { .wp-site-blocks .zlh-hero .zlh-hero-eyebrow { font-size: 0.8125rem; } }
.wp-site-blocks .zlh-hero-title { font-family: Lora, Georgia, serif; font-weight: 500; color: #fff; font-size: 2.5rem; line-height: 1.12; letter-spacing: -0.01em; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); }
@media (min-width: 640px) { .wp-site-blocks .zlh-hero-title { font-size: 3.5rem; } }
@media (min-width: 1024px) { .wp-site-blocks .zlh-hero-title { font-size: 4.25rem; } }
.wp-site-blocks .zlh-hero-lead { color: rgba(255, 255, 255, 0.92); font-size: 1rem; line-height: 1.7; max-width: 36rem; margin: 1.5rem auto 0; }
@media (min-width: 640px) { .wp-site-blocks .zlh-hero-lead { font-size: 1.125rem; } }
.wp-site-blocks .zlh-hero .zlh-hero-actions { justify-content: center; margin-top: 2.25rem; }
@media (max-width: 639px) {
	.wp-site-blocks .zlh-hero .zlh-hero-actions { flex-direction: column; align-items: stretch; }
	.wp-site-blocks .zlh-hero .zlh-hero-actions .wp-block-button,
	.wp-site-blocks .zlh-hero .zlh-hero-actions .wp-block-button__link { width: 100%; }
}

/* --- Compact page heroes (booking page, Zien & beleven) --- */
.wp-block-cover.zlh-page-hero { padding: 3rem 1.25rem; background-color: var(--zlh-forest-deep); }
.wp-block-cover.zlh-page-hero .wp-block-cover__inner-container { max-width: 48rem; text-align: center; color: #fff; }
.wp-site-blocks .zlh-page-hero .zlh-hero-eyebrow { color: rgba(255, 255, 255, 0.88); margin: 0 0 1rem; }
.wp-site-blocks .zlh-page-title { font-family: Lora, Georgia, serif; font-weight: 500; color: #fff; font-size: 2.25rem; line-height: 1.15; margin: 0; }
@media (min-width: 640px) { .wp-site-blocks .zlh-page-title { font-size: 3.25rem; } }
.wp-site-blocks .zlh-page-hero .booking-jump { margin: 1.25rem 0 0; }
.zlh-page-hero .booking-jump a { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; }
@media (max-width: 767px) { .wp-block-cover.zlh-page-hero { min-height: 0 !important; padding: 2.5rem 1.25rem; } }

/* --- Accommodation page hero (page-property): restate the header clearance on the cover (THEME-FACTS §3) --- */
.wp-block-cover.property-hero { min-height: 62vh; padding: calc(var(--header-h) + 2rem) 0 3rem; align-items: flex-end; }
.wp-block-cover.property-hero .wp-block-cover__background { background: linear-gradient(to top, rgba(22, 17, 50, 0.85) 0%, rgba(22, 17, 50, 0.35) 55%, rgba(22, 17, 50, 0.1) 100%) !important; opacity: 1 !important; }
.wp-block-cover.property-hero .wp-block-cover__inner-container { max-width: 87.5rem; width: 100%; padding: 0 1.25rem; }
@media (min-width: 640px) { .wp-block-cover.property-hero .wp-block-cover__inner-container { padding: 0 2rem; } }
.wp-site-blocks .property-hero .property-hero-content { max-width: none; padding: 0; margin: 0; }
.wp-site-blocks .property-hero .property-hero-subtitle { color: rgba(255, 255, 255, 0.88); font-size: 0.75rem; letter-spacing: 0.28em; font-weight: 500; margin: 0 0 0.75rem; }
.wp-site-blocks .property-hero h1 { font-family: Lora, Georgia, serif; font-weight: 500; color: #fff; font-size: 2.5rem; line-height: 1.12; margin: 0; }
@media (min-width: 768px) { .wp-site-blocks .property-hero h1 { font-size: 3.75rem; } }
@media (max-width: 767px) { .wp-block-cover.property-hero { min-height: 46vh; } }
.wp-site-blocks .zlh-badge { display: inline-block; background: #fff; color: var(--zlh-forest); font-weight: 600; font-size: 0.875rem; padding: 0.375rem 1rem; border-radius: 9999px; box-shadow: 0 2px 6px rgba(28, 23, 54, 0.1); margin: 0 0 0.5rem; }

/* --- Homepage booking band (demo #boeken, here a short section that links to the booking page) --- */
.wp-block-cover.zlh-band { min-height: 0; padding: 5rem 1.25rem; background-color: var(--zlh-forest-deep); }
@media (min-width: 640px) { .wp-block-cover.zlh-band { padding: 7rem 2rem; } }
.wp-block-cover.zlh-band .wp-block-cover__background { background: linear-gradient(180deg, rgba(22, 17, 50, 0.92) 0%, rgba(22, 17, 50, 0.94) 100%) !important; opacity: 1 !important; }
.wp-block-cover.zlh-band .wp-block-cover__inner-container { max-width: 48rem; color: #fff; }
.wp-site-blocks .zlh-band .zlh-eyebrow-light { color: #e2c6b5; }
.wp-site-blocks .zlh-title.zlh-title-light { color: #fff; }
.wp-site-blocks .zlh-band-text { color: rgba(255, 255, 255, 0.86); font-size: 1.0625rem; line-height: 1.7; margin: 1.25rem 0 0; }

/* --- Booking page (/reserveren/): calendars, rates, rules, the form --- */
.booking-page .zlh-inner > .zlh-title { margin-top: 4.5rem; }
.booking-page .zlh-inner > .zlh-title + p,
.booking-page .zlh-inner > .zlh-title + .zlh-terms,
.booking-page .zlh-inner > .zlh-title + .wp-block-table { margin-top: 1.25rem; }
.wp-site-blocks .booking-page .booking-intro { max-width: 52rem; margin: 0; }
.wp-site-blocks .booking-page .zlh-inner > p { max-width: 52rem; color: var(--zlh-ink-soft); line-height: 1.7; }
.zlh-calendars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 1100px) { .zlh-calendars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zlh-calendar { background: #fff; border: 1px solid var(--zlh-line); border-radius: 1rem; padding: 1.5rem 1.25rem; min-width: 0; }
.wp-site-blocks .zlh-calendar > h3 { font-family: Lora, Georgia, serif; font-weight: 400; font-size: 1.375rem; color: var(--zlh-ink); margin: 0 0 1rem; }
/* MotoPress availability calendars: the plugin's own colour variables, in readable pairs (free = green,
   booked or full = red, closed = grey: the owners "zetten het op rood" when they are full, call 2026-09-29). */
.zlh-calendar {
	--mphb-available-date-bg: #dff0d3;
	--mphb-available-date-color: #1d3d16;
	--mphb-booked-date-bg: #f4d3d3;
	--mphb-booked-date-color: #7d1a1a;
	--mphb-not-available-date-bg: #f4d3d3;
	--mphb-not-available-date-color: #7d1a1a;
	--mphb-out-of-season-date-bg: #ebeaf2;
	--mphb-out-of-season-date-color: #55526a;
	--mphb-unselectable-date-color: #3c3950;
}
.zlh-calendar .mphb_sc_availability_calendar-wrapper,
.zlh-calendar .mphb-calendar { max-width: 100%; }
.zlh-calendar .datepick,
.zlh-calendar .datepick-inline { width: 100% !important; max-width: 100%; height: auto !important; border: 0; font-family: inherit; background: transparent; }
.zlh-calendar .datepick-month,
.zlh-calendar .mphb_sc_availability_calendar-wrapper .mphb-calendar[data-monthstoshow$="2"] .datepick-month { width: 100% !important; float: none; margin: 0 0 1rem; }
.zlh-calendar .datepick-month-row { display: block; }
.zlh-calendar .datepick-month table { width: 100%; }
.zlh-calendar .datepick-month-header { background: var(--zlh-forest) !important; color: #fff !important; font-family: Lora, Georgia, serif; font-weight: 400; padding: 0.35rem 0; }
.zlh-calendar .datepick-month-header select { color: var(--zlh-ink); background: #fff; border-radius: 0.25rem; border: 0; padding: 0.1rem 0.25rem; }
.zlh-calendar .datepick-month th { background: var(--zlh-cream); color: var(--zlh-ink); font-weight: 600; font-size: 0.75rem; }
.zlh-calendar .datepick-month td span,
.zlh-calendar .datepick-month td a { font-size: 0.875rem; }
.zlh-calendar .datepick-nav { display: flex; justify-content: space-between; background: var(--zlh-cream); border-radius: 0.375rem; margin-bottom: 0.5rem; }
.zlh-calendar .datepick-nav a,
.zlh-calendar .datepick-ctrl a { color: var(--zlh-forest) !important; font-weight: 600; background: transparent; }
.zlh-calendar .datepick-nav a.datepick-disabled { color: #8c899e !important; }
.zlh-calendar .datepick-cmd-today { visibility: hidden; } /* "Vandaag" jumps to a closed month; the arrows remain */
.zlh-calendar-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--zlh-ink-soft); }
.zlh-calendar-legend span::before { content: ''; display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 0.2rem; margin-right: 0.4rem; vertical-align: -0.1em; border: 1px solid rgba(28, 23, 54, 0.15); }
.zlh-calendar-legend .is-free::before { background: #dff0d3; }
.zlh-calendar-legend .is-full::before { background: #f4d3d3; }
.zlh-calendar-legend .is-closed::before { background: #ebeaf2; }
.wp-site-blocks .zlh-rates-seasons { margin-top: 1.25rem; max-width: 52rem; }
.zlh-rate-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 1100px) { .zlh-rate-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zlh-rate-card { background: #fff; border: 1px solid var(--zlh-line); border-radius: 1rem; padding: 1.5rem 1.25rem; min-width: 0; }
.wp-site-blocks .zlh-rate-card > h3 { font-family: Lora, Georgia, serif; font-weight: 400; font-size: 1.375rem; color: var(--zlh-ink); margin: 0 0 1rem; }
.wp-site-blocks .zlh-rates.wp-block-table { margin: 0 0 1.25rem; overflow-x: auto; }
.zlh-rates table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.zlh-rates.wp-block-table table.has-fixed-layout { table-layout: auto; }
.zlh-rates thead { border-bottom: 0; }
.zlh-rates th { text-align: left; font-weight: 600; color: var(--zlh-ink); background: var(--zlh-cream); padding: 0.625rem 0.75rem; border: 0; font-size: 0.875rem; }
.zlh-rates td { padding: 0.625rem 0.75rem; border: 0; border-bottom: 1px solid var(--zlh-line); color: var(--zlh-ink-soft); vertical-align: top; }
.zlh-rates td:not(:first-child), .zlh-rates th:not(:first-child) { white-space: nowrap; }
.zlh-rates-seasons td:not(:first-child) { white-space: normal; }
.wp-site-blocks .zlh-rate-card > .zlh-rate-notes { font-size: 0.8125rem; line-height: 1.6; color: var(--zlh-ink-soft); margin: 0; }
.zlh-rules-block { max-width: 52rem; }
.booking-page .zlh-rules-block { margin-top: 1.25rem; }
.zlh-rules-intro { color: var(--zlh-ink-soft); line-height: 1.7; margin: 0 0 0.5rem; }
.zlh-rules-title { font-family: Lora, Georgia, serif; font-weight: 400; font-size: 1.25rem; color: var(--zlh-ink); margin: 1.5rem 0 0.5rem; }
.zlh-rules { list-style: none; padding: 0; margin: 0; }
.zlh-rules li { position: relative; padding-left: 1.6rem; margin: 0 0 0.5rem; line-height: 1.6; color: var(--zlh-ink-soft); }
.zlh-rules li::before { content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 0.05em; color: var(--zlh-clay); font-size: 0.875rem; }
.zlh-rules strong { color: var(--zlh-ink); font-weight: 600; }
.zlh-narrow .zlh-rules-block { margin-top: 1.25rem; }
.wp-site-blocks .zlh-terms { max-width: 52rem; padding-left: 1.25rem; }
.wp-site-blocks .zlh-terms > li { margin: 0 0 0.75rem; line-height: 1.7; color: var(--zlh-ink-soft); }
.zlh-terms strong { color: var(--zlh-ink); }

/* The form panel (demo #boeken panel: cream card, two labelled groups, dark full-width submit) */
.wp-site-blocks .zlh-form-panel { max-width: 62rem; margin: 4.5rem auto 0; background: #fff; border: 1px solid var(--zlh-line); border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(22, 17, 50, 0.25); padding: 1.75rem 1.25rem; }
@media (min-width: 640px) { .wp-site-blocks .zlh-form-panel { padding: 2.5rem; } }
.wp-site-blocks .zlh-form-panel > .zlh-title { margin: 0; }
.wp-site-blocks .zlh-form-panel > .zlh-form-intro { color: var(--zlh-ink-soft); line-height: 1.7; margin: 0.75rem 0 1.75rem; }
.wp-site-blocks .zlh-form-panel > .zlh-form-contact { font-size: 0.875rem; color: var(--zlh-ink-soft); margin: 1.5rem 0 0; text-align: center; }
.zlh-form-panel .wpcf7 form > p { margin: 0; }
.zlh-form-panel .wpcf7 form > p.zlh-form-required { font-size: 0.8125rem; color: var(--zlh-ink-soft); margin: 0 0 0.5rem; }
.zlh-form-panel .zlh-stay-row:has(> .zlh-stay-hint[hidden]),
.zlh-form-panel .starter-capacity-row:has(> .starter-capacity-note[hidden]) { display: none; }
.zlh-form-panel .wpcf7 form > p.zlh-form-group { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 1rem; font-family: Lora, Georgia, serif; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zlh-ink); }
.zlh-form-panel .zlh-form-group::after { content: ''; flex: 1; height: 1px; background: rgba(28, 23, 54, 0.18); }
.zlh-form-panel .cf7-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.25rem; }
@media (min-width: 640px) { .zlh-form-panel .cf7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zlh-form-panel .cf7-grid .cf7-full { grid-column: 1 / -1; } }
.zlh-form-panel .cf7-grid p { margin: 0; }
.zlh-form-panel label > span:first-child { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--zlh-ink); margin-bottom: 0.5rem; }
.zlh-form-panel .wpcf7 input[type="text"],
.zlh-form-panel .wpcf7 input[type="email"],
.zlh-form-panel .wpcf7 input[type="tel"],
.zlh-form-panel .wpcf7 input[type="date"],
.zlh-form-panel .wpcf7 select,
.zlh-form-panel .wpcf7 textarea { border: 1px solid rgba(28, 23, 54, 0.24); border-radius: 0.625rem; min-height: 3.25rem; padding: 0 0.875rem; font-size: 0.9375rem; color: var(--zlh-ink); background-color: #fff; }
.zlh-form-panel .wpcf7 textarea { padding: 0.75rem 0.875rem; min-height: 6rem; }
.zlh-form-panel .wpcf7 input:focus,
.zlh-form-panel .wpcf7 select:focus,
.zlh-form-panel .wpcf7 textarea:focus { border-color: var(--zlh-clay); box-shadow: 0 0 0 3px rgba(146, 96, 66, 0.22); }
.zlh-form-panel .cf7-consent .wpcf7-list-item { margin: 0; }
.zlh-form-panel .cf7-consent label { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.875rem; color: var(--zlh-ink-soft); }
.zlh-form-panel .wpcf7 input[type="submit"] { width: 100%; margin-top: 1.5rem; background-color: var(--zlh-forest); color: #fff; border-radius: 0.75rem; padding: 1rem 1.75rem; font-size: 1rem; font-weight: 600; box-shadow: none; }
.zlh-form-panel .wpcf7 input[type="submit"]:hover { background-color: var(--zlh-forest-deep); transform: none; }
.zlh-form-panel .cf7-fineprint { text-align: center; font-size: 0.8125rem; color: var(--zlh-ink-soft); margin: 1rem 0 0; }
.zlh-form-panel .wpcf7-not-valid-tip { color: #b42318; font-size: 0.8125rem; margin-top: 0.375rem; }
.zlh-form-panel .wpcf7 form .wpcf7-response-output { border-radius: 0.625rem; margin: 1.25rem 0 0; padding: 0.875rem 1rem; font-size: 0.9375rem; }
.zlh-stay-hint, .starter-capacity-note { display: block; font-size: 0.875rem; line-height: 1.55; padding: 0.75rem 1rem; border-radius: 0.625rem; background: var(--zlh-cream); color: var(--zlh-ink); }
.zlh-stay-hint[hidden], .starter-capacity-note[hidden] { display: none; }
.zlh-stay-hint.is-warning { background: #fff4e5; color: #6a3d0e; border: 1px solid #f2c48d; }
.zlh-form-panel .cf-turnstile { margin-top: 1rem; }

/* --- 404 actions --- */
.error-404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0 0 1.5rem; }
.error-404-actions .btn-primary { background-color: var(--zlh-forest); font-size: 1rem; padding: 0.75rem 1.5rem; }
.error-404-actions .btn-primary:hover { background-color: var(--zlh-forest-deep); }
.error-404-actions .btn-outline { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; border-radius: 9999px; border: 1px solid var(--zlh-forest); color: var(--zlh-forest); font-weight: 600; text-decoration: none; }
.error-404-actions .btn-outline:hover { background: var(--zlh-forest); color: #fff; }
.error-404-links { font-size: 0.9375rem; color: var(--zlh-ink-soft); }
.error-404-links a { color: var(--zlh-forest); }
#error-404 form .btn-primary { background-color: var(--zlh-forest); }

/* --- Legal page --- */
.zlh-legal { padding-top: 4rem; }
.wp-site-blocks .zlh-legal .zlh-subtitle { font-size: 1.375rem; }
.wp-site-blocks .zlh-legal code { font-size: 0.875em; background: var(--zlh-cream); padding: 0.1em 0.35em; border-radius: 0.25rem; }

/* --- Zien & beleven (revision 0, 2026-10-08): the owners' own text and photos, in their order. Every photo is
   a core Image block (the owner swaps it from the toolbar; core's lightbox enlarges it). Photo rows crop to a
   fixed shape so a replaced photo keeps the row tidy; single photos and collages keep their own shape. --- */
.wp-site-blocks .zlh-zb .zlh-zb-sub { font-size: 0.9375rem; font-style: italic; color: var(--zlh-ink-soft); margin: 0.75rem 0 0; }
.wp-site-blocks .zlh-zb .zlh-zb-h3 { font-family: Lora, Georgia, serif; font-weight: 500; font-size: 1.375rem; line-height: 1.35; color: var(--zlh-ink); margin: 2.5rem 0 0; }
.wp-site-blocks .zlh-zb .zlh-zb-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 2rem 0 0; }
@media (min-width: 640px) {
	.wp-site-blocks .zlh-zb .zlh-zb-photos { gap: 1rem; }
	.wp-site-blocks .zlh-zb .zlh-zb-photos.zlh-zb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) { .wp-site-blocks .zlh-zb .zlh-zb-cols-3 > .zlh-tile:first-child { grid-column: 1 / -1; } }
.wp-site-blocks .zlh-zb .zlh-zb-photos + .zlh-zb-photos { margin-top: 0.75rem; }
@media (min-width: 640px) { .wp-site-blocks .zlh-zb .zlh-zb-photos + .zlh-zb-photos { margin-top: 1rem; } }
.wp-site-blocks .zlh-zb .zlh-zb-photos > .zlh-tile.wp-block-image { aspect-ratio: 4 / 3; }
.wp-site-blocks .zlh-zb .zlh-zb-photos.zlh-zb-square > .zlh-tile.wp-block-image { aspect-ratio: 1 / 1; }
.wp-site-blocks .zlh-zb .zlh-zb-single.wp-block-image { margin: 2rem 0 0; max-width: 40rem; }
.wp-site-blocks .zlh-zb .zlh-zb-single.zlh-zb-small { max-width: 25rem; }
.wp-site-blocks .zlh-zb .zlh-zb-single.zlh-zb-wide { max-width: none; }
.wp-site-blocks .zlh-zb .zlh-zb-single + .zlh-zb-single { margin-top: 1rem; }
.wp-site-blocks .zlh-zb .zlh-zb-photos + p,
.wp-site-blocks .zlh-zb .zlh-zb-single + p { margin-top: 2rem; }

/* --- Two version-1 defects a guest would see, found by the revision-0 gate run and read (2026-10-08) ---
   1. The starter's .property-hero keeps a fixed `height: 62vh`; on a 320-360px phone the bottom-aligned title then
      grows upward under the fixed header (header-overlap on /camping/ and /huur-chalet/). The hero now grows with
      its text; min-height keeps the desktop look.
   2. body's `overflow-wrap: break-word` (and core's `word-break: break-word` on a fixed-layout table) let a table
      cell's words break anywhere, so the rate tables squeezed their first column to "Laags-eizoe-n" on phones.
      Words stay whole; on phones the cells get a little tighter. */
.wp-block-cover.property-hero { height: auto; }
.wp-site-blocks .zlh-rates.wp-block-table th,
.wp-site-blocks .zlh-rates.wp-block-table td { overflow-wrap: normal; word-break: normal; }
@media (max-width: 480px) {
	.zlh-rates th, .zlh-rates td { padding: 0.5rem 0.4rem; font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
	.zlh-unit, .zlh-tile img { transition: none; }
	.zlh-unit:hover { transform: none; }
	.zlh-tile:hover img { transform: none; }
}

/* --- Revision 1 (2026-10-15): the client's new texts and photos on /, /camping/, /huur-chalet/ and /huur-safari-tent/,
   the Algemeen reglement on /reserveren/ and the statutory line in the footer. Same specificity pattern as above. --- */
.wp-site-blocks .zlh-tagline { font-family: Lora, Georgia, serif; font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--zlh-forest); margin: 0.75rem 0 0; }
.wp-site-blocks .zlh-signature { font-family: Lora, Georgia, serif; font-style: italic; font-size: 1.125rem; line-height: 1.5; color: var(--zlh-ink); margin: 1.75rem 0 0; }
.wp-site-blocks .zlh-quote { font-style: italic; }
/* Six feature cards (the labelled parts of the Glamping text): three columns on a desktop instead of four */
@media (min-width: 1024px) { .zlh-features.zlh-features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zlh-ico-tent::before { content: '\f6bb'; }
.zlh-ico-couch::before { content: '\f4b8'; }
.zlh-ico-mug::before { content: '\f7b6'; }
.wp-site-blocks .zlh-closing { max-width: 48rem; margin: 3rem auto 0; text-align: center; }
.wp-site-blocks .zlh-closing > p { font-size: 1.0625rem; line-height: 1.75; color: var(--zlh-ink); margin: 0; }
/* The reglement: a folded core Details block, so the request form stays one short scroll away (05 §10 order) */
.wp-site-blocks .zlh-reglement { max-width: 52rem; margin: 1.25rem 0 0; background: #fff; border: 1px solid var(--zlh-line); border-radius: 1rem; }
.zlh-reglement > summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; color: var(--zlh-forest); }
.zlh-reglement > summary:focus-visible { outline: 2px solid var(--zlh-forest); outline-offset: 2px; border-radius: 1rem; }
.zlh-reglement[open] > summary { border-bottom: 1px solid var(--zlh-line); }
.wp-site-blocks .zlh-reglement > :not(summary) { margin-left: 1.25rem; margin-right: 1.25rem; }
.wp-site-blocks .zlh-reglement > h3 { font-family: Lora, Georgia, serif; font-weight: 600; font-size: 1.125rem; line-height: 1.4; color: var(--zlh-ink); margin-top: 1.5rem; margin-bottom: 0; }
.wp-site-blocks .zlh-reglement > p { line-height: 1.7; color: var(--zlh-ink-soft); margin-top: 0.5rem; margin-bottom: 0; }
.wp-site-blocks .zlh-reglement > ul { line-height: 1.7; color: var(--zlh-ink-soft); margin-top: 0.5rem; margin-bottom: 0; padding-left: 1.25rem; }
.wp-site-blocks .zlh-reglement > .zlh-signature { margin-top: 1.25rem; }
.wp-site-blocks .zlh-reglement > :last-child { margin-bottom: 1.25rem; }
/* The statutory line (08 §1.5): one quiet line in the bottom bar, its numbers kept together */
.site-footer .footer-legal { white-space: nowrap; }

/* --- Revision 2 (2026-10-22): the award on /huur-chalet/, the route button on /, the adjusted map on /camping/.
   The footer's Instagram and Facebook rows reuse .footer-contact-item and need no rule. --- */
/* The yearly Booking.com award (item 5): smaller than the photos, near the top of the chalet's intro. The owners swap the
   image each year with Replace; the block's class keeps the size. */
.wp-site-blocks .zlh-award.wp-block-image { max-width: 15rem; margin: 1.5rem 0 0; }
.wp-site-blocks .zlh-award.wp-block-image img { display: block; width: 100%; height: auto; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(28, 23, 54, 0.12), 0 2px 4px -2px rgba(28, 23, 54, 0.1); }
/* "Plan je route" (item 12): the Reserveren button's style (zlh-btn-dark) with a location pin for the arrow, close under
   the address line */
.wp-site-blocks .zlh-facts + .zlh-actions { margin-top: 1.25rem; }
.zlh-btn-dark.zlh-btn-route .wp-block-button__link::after { content: '\f3c5'; }
/* The adjusted map (item 11) is 843 px as received: shown at most 562 px wide, so the file stays 1.5x its box (08 §1.6),
   at its own proportions instead of the 16:9 frame; the image links to the full-size file. */
.wp-site-blocks .zlh-photo.zlh-photo-map { aspect-ratio: auto; width: 100%; max-width: 562px; margin-left: auto; margin-right: auto; }
/* The link around the map is a block, so its line box leaves no empty strip under the image (found by the visual read). */
.wp-site-blocks .zlh-photo.zlh-photo-map > a { display: block; }

/* --- Revision 4 (2026-10-30), W1: dates picked in the calendar (B-32; assets/js/calendar-date-pick.js). A free day shows it
   takes a tap (pointer; on a phone no text selection and no double-tap zoom). The chosen stay: arrival and departure filled
   in the site's indigo, the nights between outlined in it, a colour that is neither the green of a free day nor the red of a
   booked one. The line under the calendar says the stay and links to the form. --- */
.zlh-calendar .mphb-calendar.zlh-cal-pickable .datepick-month td .mphb-date-cell { -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.zlh-calendar .mphb-calendar.zlh-cal-pickable .datepick-month td .mphb-available-date:not(.mphb-booked-date):not(.mphb-past-date):not(.mphb-extra-date):not(.mphb-out-of-season-date):not(.mphb-mark-as-unavailable) { cursor: pointer; }
.zlh-calendar .mphb-calendar.zlh-cal-pickable .datepick-month td .zlh-cal-sel-start,
.zlh-calendar .mphb-calendar.zlh-cal-pickable .datepick-month td .zlh-cal-sel-end { background: var(--zlh-forest); color: #fff; opacity: 1; text-decoration: none; }
.zlh-calendar .mphb-calendar.zlh-cal-pickable .datepick-month td .zlh-cal-sel-in { box-shadow: inset 0 0 0 2px var(--zlh-forest); }
.zlh-calendar .zlh-cal-status { margin: 1rem 0 0; padding: 0.7rem 0.95rem; border-radius: 0.75rem; background-color: var(--zlh-cream); color: var(--zlh-ink); font-size: 0.875rem; line-height: 1.5; }
.zlh-calendar .zlh-cal-status a { color: var(--zlh-forest); font-weight: 600; white-space: nowrap; }

/* hand-fix 2026-11-02: the wordmark ran under the NL language code at 360-375px (header-overlap gate). */
@media (max-width: 399px) {
	.site-logo-text { font-size: 1.125rem; }
}