/* ==========================================================================
   Stal de Horstlinde — componentlaag
   --------------------------------------------------------------------------
   Wat hier hoort: alleen wat theme.json niet kan uitdrukken. Dat zijn de
   sluiers over foto's, de filmkorrel, de onthul-animatie, de rasters van de
   eigen componenten en de contextregels voor tekst op donkere vlakken.

   Wat hier NIET hoort: kleuren, lettergroottes en ruimtes als losse waarden.
   Elke waarde hieronder komt uit een preset van theme.json, zodat de redacteur
   in de editor dezelfde opties ziet als de voorkant gebruikt. Staat er toch
   een letterlijke kleur, dan hoort daar een reden bij.

   Volgorde van dit bestand:
     1. Afkortingen        7. Kaarten en lijsten
     2. Basis en toegang.  8. Faciliteiten en beeld
     3. Koptekst           9. Tarieven en tabellen
     4. Knoppen           10. Paarden
     5. Sectie-onderdelen 11. Vragen
     6. Hero en deuren    12. Contact
                          13. Voettekst
                          14. Onthullen bij scrollen
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. AFKORTINGEN
   Korte namen voor presets die hieronder tientallen keren terugkomen. Dit
   zijn verwijzingen, geen nieuwe waarden: verander je een kleur, dan doe je
   dat in theme.json en werkt het hier vanzelf door.
   -------------------------------------------------------------------------- */
:root {
	--hl-base:      var(--wp--preset--color--base);
	--hl-surface:   var(--wp--preset--color--surface);
	--hl-line:      var(--wp--preset--color--line);
	--hl-contrast:  var(--wp--preset--color--contrast);
	--hl-primary:   var(--wp--preset--color--primary);
	--hl-secondary: var(--wp--preset--color--secondary);
	--hl-muted:     var(--wp--preset--color--muted);
	--hl-goud:      var(--wp--preset--color--goud);

	--hl-primary-donker: var(--wp--custom--kleur--primary-donker);
	--hl-zand-donker:    var(--wp--custom--kleur--zand-op-donker);
	--hl-rand-hover:     var(--wp--custom--kleur--rand-hover);
	--hl-veld-rand:      var(--wp--custom--kleur--veld-rand);

	/* De grondtoon onder alle foto-overlays, als losse RGB-waarden zodat we er
	   hieronder verschillende doorzichtigheden mee kunnen maken. */
	--hl-sluier: var(--wp--custom--kleur--sluier);

	--hl-rond:       var(--wp--custom--rond--klein);
	--hl-rond-groot: var(--wp--custom--rond--groot);
	--hl-lijn:       1px solid var(--hl-line);

	--hl-snel:  var(--wp--custom--duur--snel) var(--wp--custom--soepel--snel);
	--hl-traag: var(--wp--custom--duur--traag) var(--wp--custom--soepel--traag);

	/* Filmkorrel. Egaliseert de wisselende scherpte en witbalans van het
	   bestaande fotomateriaal en geeft grote donkere vlakken een vaste textuur.
	   Eigen SVG in een data-URI: geen extern verzoek, geen extra bestand. */
	--hl-korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. BASIS EN TOEGANKELIJKHEID
   -------------------------------------------------------------------------- */

/* Padding telt mee in de breedte. WordPress zet dit voor de meeste blokken
   zelf al goed, maar niet voor alles — en zeker niet voor HTML die het thema
   zelf neerzet. Zonder deze regel werd elk vlak met padding én breedte 100%
   precies zijn padding te breed, en dat gaf horizontale scroll op de
   plaatshouders, de uitklappen en de agenda-items. */
*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* De hero sluit aan tegen de onderrand van de koptekst. WordPress zet tussen
   de blokken op het hoogste niveau een blokafstand, en die gaf een streep wit
   tussen de koptekst en de foto. Secties hebben hun eigen padding, dus die
   afstand hebben we hier nergens nodig. */
.wp-site-blocks > * { margin-block-start: 0; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* clip in plaats van hidden: voorkomt zijwaarts schuiven zonder position:
	   sticky in de koptekst te breken. */
	overflow-x: clip;
}

/* Fraunces is variabel. De optische maat volgt vanzelf de lettergrootte, zodat
   een display-kop andere letterverhoudingen krijgt dan een h4. SOFT rondt de
   hoeken iets af — dat past bij hout en dieren, en houdt de koppen vriendelijk
   zonder ze slap te maken. */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title {
	font-optical-sizing: auto;
	font-variation-settings: "SOFT" 32, "WONK" 0;
	/* Koppen worden nooit automatisch afgebroken — met automatische afbreking
	   knipte "Langskomen" midden in het woord — maar wel netjes over de regels
	   verdeeld. */
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* WONK zet de eigenzinnige alternatieven aan: de schuine punt op de a, de
   krullende staarten. Alleen op het grootste formaat, waar je het ziet en waar
   het karakter geeft. Op kleine koppen zou het alleen maar onrustig zijn. */
h1,
.heeft-wonk {
	font-variation-settings: "SOFT" 40, "WONK" 1;
}

p { text-wrap: pretty; }

/* Alle functionele cijfers in de schreefloze, met tabelcijfers.
   Reden: Georgia — de terugval als Fraunces niet laadt — zet mediëvalcijfers,
   waarbij de 0, 3, 4, 5, 7 en 9 onder de regel doorzakken. Een telefoonnummer,
   een prijs, een IBAN of een tijd wordt daar onleesbaar van. */
.cijfers,
.tijden,
.faciliteiten,
.tabelhouder table,
.instap__prijs,
.feit__getal,
.stap__nr,
.groot-contact,
.paard__kenmerken {
	font-family: var(--wp--preset--font-family--body);
	font-variant-numeric: tabular-nums lining-nums;
}

/* Ankerlinks niet onder de vastgezette koptekst laten eindigen. */
[id] { scroll-margin-top: calc(var(--hl-kophoogte) + 1.5rem); }


/* --------------------------------------------------------------------------
   FOCUSMARKERING
   Uitdrukkelijke keuze van de klant: geen kader of randverandering bij focus,
   behalve op formuliervelden. Dat is bewust tegen de gewoonte in.

   Wat je ervoor inlevert: wie de site met het toetsenbord bedient — met Tab
   van link naar link — ziet niet meer waar hij staat. Voor formuliervelden is
   dat wél opgelost, en dat is de plek waar het het meest telt.

   De overslaan-link hieronder is de enige uitzondering die moet blijven: die
   is onzichtbaar tot hij focus krijgt, en zonder die verschijning kun je hem
   niet gebruiken.
   -------------------------------------------------------------------------- */
*:focus,
*:focus-visible,
*:focus-within {
	outline: none !important;
	box-shadow: none;
}

/* Formuliervelden houden hun markering. Een rand die van kleur verspringt en
   een zachte gloed eromheen: duidelijk zichtbaar zonder een hard kader. */
input:not([type="submit"]):not([type="button"]):focus,
textarea:focus,
select:focus,
[contenteditable="true"]:focus,
.fluentform .ff-el-form-control:focus,
.wp-block-search__input:focus {
	outline: 2px solid var(--hl-primary) !important;
	outline-offset: 1px;
	border-color: var(--hl-primary);
	box-shadow: 0 0 0 3px rgba(78, 47, 20, .16);
}

/* De overslaan-link moet wél verschijnen, anders is hij onbruikbaar. */
.skip-link:focus {
	background: var(--hl-primary);
	color: var(--hl-base);
	font-weight: 600;
	border-radius: var(--hl-rond);
}


/* --------------------------------------------------------------------------
   3. KOPTEKST
   -------------------------------------------------------------------------- */
.koptekst {
	/* Doorschijnend wit met vervaging: de foto eronder blijft even zichtbaar
	   bij het scrollen. Letterlijke rgba en niet de preset, omdat een preset
	   geen doorzichtigheid kan meegeven. */
	background: rgba(251, 249, 246, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: var(--hl-lijn);
}

/* Zolang het overlaymenu openstaat gaat de vervaging eruit.
   Reden: een element met backdrop-filter wordt het referentiekader voor alles
   wat erin met position:fixed staat. Het overlaymenu zit in de koptekst, dus
   "inset: 0" betekende dan de koptekstbalk van 90 pixels hoog in plaats van
   het hele scherm — het menu opende wél, maar je zag er twee regels van en de
   rest liep eronder weg. WordPress zet zelf has-modal-open op <html> zodra het
   menu opengaat; daar haken we op in. */
html.has-modal-open .koptekst {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   HET LOGO

   Harde regel: het logo blijft altijd 100% gelijk, alleen de kleur mag
   wisselen. Beeldmerk, boog, linde en het woordmerk "Stal de Horstlinde" zijn
   één geheel. Er wordt dus niets uitgesneden, niets naast gezet en niets
   uitgerekt — nergens op de site.

   Gevolg voor de koptekst: het woordmerk zit ín het logo, dus die moet hoog
   genoeg zijn om het leesbaar te tonen. Vandaar dat de balk hier hoger is dan
   je bij een los beeldmerk zou aanhouden.
   -------------------------------------------------------------------------- */

/* Twee variabelen sturen de hele koptekst. Zo blijft de verhouding tussen de
   balk en het logo op elke schermmaat hetzelfde. */
:root {
	--hl-kophoogte:  7rem;
	--hl-logohoogte: 5.5rem;
}
@media (max-width: 68rem) {
	:root { --hl-kophoogte: 5.75rem; --hl-logohoogte: 4.25rem; }
}
@media (max-width: 30rem) {
	:root { --hl-kophoogte: 5rem; --hl-logohoogte: 3.6rem; }
}

.koptekst__balk { min-height: var(--hl-kophoogte); }

/* Het logo krimpt niet mee met de flexruimte; het menu ernaast vangt de
   krapte op. */
.merk {
	flex: none;
	text-decoration: none;
}

/* Nergens afgeronde hoeken op het logo. De algemene afbeeldingsstijl in
   theme.json rondt elke afbeelding af met 10 pixels, en bij dit logo lopen de
   boog linksonder en het woordmerk rechtsonder tot in de hoeken — die werden
   daardoor afgesneden. Het logo blijft altijd 100% gelijk. */
.wp-block-site-logo img,
.voettekst__vlak img,
.hoofdmenu .wp-block-site-logo img {
	border-radius: 0;
}

/* Hoogte stuurt, breedte volgt. Zo houdt het logo zijn eigen verhouding
   (1600 bij 1400) en wordt er nooit iets uitgerekt. */
.koptekst .wp-block-site-logo,
.koptekst .wp-block-site-logo a,
.koptekst .wp-block-site-logo img {
	display: block;
	margin: 0;
}
.koptekst .wp-block-site-logo img {
	height: var(--hl-logohoogte);
	width: auto;
	max-width: none;
}
}

/* Tussen het inklappunt en een ruim scherm wordt het menu een maat kleiner.
   Zeven items met lange namen, het logo en twee knoppen passen op 1280 px
   alleen als het menu iets inschikt. Onder 68rem klapt het toch in. */
@media (min-width: 68.0625rem) and (max-width: 90rem) {
	.hoofdmenu { font-size: .875rem; }
	.hoofdmenu .wp-block-navigation__container { gap: .8rem; }
	.koptekst__balk { gap: 1rem; }
}

/* Het menu blijft op één regel. Zonder dit wikkelt het navigatieblok zijn
   items af zodra de koptekst krap wordt, en valt het laatste item ("Contact")
   onder de rest door in plaats van dat het menu inklapt. Past het niet meer,
   dan hoort het overlaymenu het over te nemen — dat is de regel hieronder.

   Let op de :not(.is-menu-open). Zonder die uitzondering geldt "op één regel"
   ook binnen het uitgeklapte overlaymenu, en dan lopen de items daar zijwaarts
   het scherm uit. Dat is precies wat er misging: het menu opende wel, maar je
   zag er niets van. */
.hoofdmenu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	flex-wrap: nowrap;
}
.hoofdmenu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item {
	flex: none;
}

/* Hoofdmenu. Het :not() is hier geen franje: zonder die uitzondering wint deze
   regel het van de knopkleuren, en krijg je donkere tekst op een donkere knop
   in het uitgeklapte mobiele menu. */
.hoofdmenu a:not(.wp-block-button__link) {
	text-decoration: none;
	font-weight: 550;
	color: var(--hl-contrast);
	position: relative;
	padding-block: .5rem;
}
.hoofdmenu a:not(.wp-block-button__link)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .15rem;
	height: 2px;
	background: var(--hl-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--hl-snel);
}
.hoofdmenu a:not(.wp-block-button__link):hover { color: var(--hl-primary); }
.hoofdmenu a:not(.wp-block-button__link):hover::after { transform: scaleX(1); }

/* De pagina waar je bent. De kern zet zelf aria-current="page" op de link en
   current-menu-ancestor op het bovenliggende item; daar hangen we de opmaak
   aan. Niet alleen kleur maar ook een streep eronder, want kleur alleen is te
   weinig verschil voor wie kleuren slecht onderscheidt. */
.hoofdmenu a[aria-current="page"]:not(.wp-block-button__link),
.hoofdmenu .current-menu-ancestor > a:not(.wp-block-button__link),
.hoofdmenu .current-menu-parent > a:not(.wp-block-button__link) {
	color: var(--hl-primary);
	font-weight: 650;
}
.hoofdmenu a[aria-current="page"]:not(.wp-block-button__link)::after {
	transform: scaleX(1);
}
/* Het bovenliggende item krijgt een stippellijn, zodat je ziet dat je in die
   tak zit maar niet op die pagina zelf. */
.hoofdmenu .current-menu-ancestor > a:not(.wp-block-button__link)::after,
.hoofdmenu .current-menu-parent > a:not(.wp-block-button__link)::after {
	transform: scaleX(1);
	background: repeating-linear-gradient(90deg,
		var(--hl-primary) 0 3px, transparent 3px 6px);
}
/* In het uitgeklapte submenu en het overlaymenu ook. */
.hoofdmenu .wp-block-navigation__submenu-container a[aria-current="page"] {
	background: var(--hl-surface);
	color: var(--hl-primary);
}

/* Het pijltje naast een submenu is van zichzelf 9 bij 9 pixels. Dat is als
   knop onbruikbaar; het raakvlak wordt hier vergroot zonder dat het pijltje
   zelf groter wordt. */
.hoofdmenu .wp-block-navigation-submenu__toggle {
	position: relative;
	min-width: 24px;
	min-height: 24px;
}
.hoofdmenu .wp-block-navigation-submenu__toggle::after {
	content: "";
	position: absolute;
	inset: -12px -8px;
}

/* Het submenu van de kern: eigen randen en schaduw in plaats van de zwarte
   standaardlijn van Twenty Twenty-Five. */
.hoofdmenu .wp-block-navigation__submenu-container {
	background: var(--hl-base);
	border: var(--hl-lijn);
	border-radius: var(--hl-rond);
	box-shadow: var(--wp--preset--shadow--zwevend);
	padding-block: .35rem;
}
.hoofdmenu .wp-block-navigation__submenu-container a::after { display: none; }
.hoofdmenu .wp-block-navigation__submenu-container a:hover { background: var(--hl-surface); }

/* Het menu inklappen bij 68rem in plaats van bij de 600px van de kern.
   Zeven items met submenu's passen op een tablet niet meer naast het logo en
   de twee knoppen; dan botsen ze of vallen ze over twee regels. Deze twee
   regels verzetten alleen de grens — het overlaymenu zelf is dat van de kern,
   inclusief focusval, Escape en aria-expanded. */
@media (min-width: 600px) and (max-width: 68rem) {
	.hoofdmenu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.hoofdmenu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   HET UITGEKLAPTE MENU OP MOBIEL EN TABLET

   Twintig items met submenu's op een telefoon. Dat vraagt om een duidelijke
   rangorde: hoofdonderdelen groot en donker, subonderdelen kleiner, lichter en
   licht ingesprongen. Ging eerder mis: de kern maakt subonderdelen juist
   zwaarder en springt ze 2rem in aan beide kanten, waardoor de rangorde
   omkeerde en er nauwelijks leesbreedte overbleef.

   Elke selector hieronder begint met .hoofdmenu.wp-block-navigation. Dat is
   geen franje: de kern zet zijn eigen overlayregels neer met drie klassen, en
   die stylesheet laadt ná deze. Met minder win je het niet.
   -------------------------------------------------------------------------- */

.hoofdmenu.wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--hl-base);
	color: var(--hl-contrast);
}

/* Ruimte rondom, en onderaan genoeg lucht zodat het laatste item niet tegen de
   onderrand van het scherm plakt. */
.hoofdmenu.wp-block-navigation .is-menu-open:not(.disable-default-overlay) {
	padding: 0;
}
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 6.25rem var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	gap: 0;
}

/* Een vaste bovenbalk met de merknaam links en het kruisje rechts. Hij blijft
   staan terwijl de lijst eronder scrollt.

   Waarom vast en niet meescrollend: het menu is langer dan het scherm, en
   WordPress zet de focus bij het openen op het eerste element. De browser
   scrolt dat in beeld, en met een meescrollende kop verdween die daarmee
   meteen naar boven uit beeld — dan zie je een half afgesneden menu-item als
   eerste indruk. */
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "";
	position: fixed;
	inset: 0 0 auto 0;
	height: 5.25rem;
	background: var(--hl-base);
	border-bottom: var(--hl-lijn);
	z-index: 4;
	/* Een sierbalk mag nooit klikken opvangen. Zonder dit ligt hij over de
	   sluitknop heen en is het menu niet meer te sluiten met de muis. */
	pointer-events: none;
}
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 1rem;
	right: var(--wp--preset--spacing--30);
	left: auto;
	z-index: 5;
}

/* Onder elkaar, links uitgelijnd, volle breedte. Het navigatieblok staat op de
   desktop rechts uitgelijnd; zonder deze regels erft het overlaymenu die
   uitlijning en plakt alles tegen de rechterrand. */
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation__container,
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
}
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation-item {
	width: 100%;
	flex: none;
	display: block;
}

/* --- hoofdonderdelen --- */
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation__container
	> .wp-block-navigation-item {
	border-top: var(--hl-lijn);
}
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation__container
	> .wp-block-navigation-item:first-child {
	border-top: 0;
}
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation__container
	> .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	padding: .95rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--hl-contrast);
}

/* --- subonderdelen --- */
.hoofdmenu.wp-block-navigation .is-menu-open
	.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	position: static;
	opacity: 1;
	visibility: visible;
	overflow: visible;
	width: auto;
	height: auto;
	min-width: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	/* Eén nette inspringing, met een lijntje dat laat zien waar de groep bij
	   hoort. De kern springt hier zelf 2rem in aan beide kanten; op 320 pixels
	   houd je dan geen leesbreedte over. */
	padding: 0 0 .6rem 0;
	margin-left: .9rem;
	border-left: 2px solid var(--hl-line);
}
.hoofdmenu.wp-block-navigation .is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item {
	border: 0;
}
.hoofdmenu.wp-block-navigation .is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: .6rem 0 .6rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--hl-muted);
}

/* --- de pagina waar je bent --- */
.hoofdmenu.wp-block-navigation .is-menu-open a[aria-current="page"],
.hoofdmenu.wp-block-navigation .is-menu-open
	.wp-block-navigation__submenu-container a[aria-current="page"] {
	color: var(--hl-primary);
	font-weight: 650;
	background: transparent;
}
/* Een streepje in de kantlijn, zodat het niet alleen aan kleur hangt.
   Niet op de merknaam in de bovenbalk: die krijgt op de homepage ook
   aria-current van WordPress, en dan staat er een los streepje in de kop. */
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-site-title a[aria-current="page"]::before {
	display: none;
}
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-site-title a[aria-current="page"] {
	color: var(--hl-contrast);
	font-weight: 600;
}
.hoofdmenu.wp-block-navigation .is-menu-open
	.wp-block-navigation__container a[aria-current="page"] {
	position: relative;
}
.hoofdmenu.wp-block-navigation .is-menu-open a[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: -.9rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1.4em;
	border-radius: 2px;
	background: var(--hl-primary);
}
.hoofdmenu.wp-block-navigation .is-menu-open
	.wp-block-navigation__submenu-container a[aria-current="page"]::before {
	left: -2px;
}

/* Het pijltje naast een submenu heeft in het overlaymenu geen functie: alles
   staat al open. */
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}


/* --- knoppen onderaan het menu ---
   De afspraakknop en het telefoonnummer staan in het navigatiemenu zelf, zodat
   ze in het overlaymenu meekomen. Op de desktop staan ze al in de koptekst en
   worden ze hier verborgen. */
.hoofdmenu .menu-acties { display: none; }
.hoofdmenu.wp-block-navigation .is-menu-open .menu-acties {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	width: 100%;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--hl-lijn);
}
.hoofdmenu.wp-block-navigation .is-menu-open .menu-acties .wp-block-button { width: 100%; }
.hoofdmenu.wp-block-navigation .is-menu-open .menu-acties .wp-block-button__link {
	width: 100%;
	justify-content: center;
	padding-block: 1rem;
}

/* Het logo in die bovenbalk, zodat je ziet waar je bent. Komt uit het
   navigatiemenu (een sitelogoblok) en is op de desktop verborgen, want daar
   staat het al in de koptekst. */
.hoofdmenu .wp-block-site-logo { display: none; }
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-site-logo {
	display: flex;
	align-items: center;
	position: fixed;
	left: var(--wp--preset--spacing--30);
	top: 0;
	height: 5.25rem;
	margin: 0;
	z-index: 5;
}
.hoofdmenu.wp-block-navigation .is-menu-open .wp-block-site-logo img {
	height: 3.9rem;
	width: auto;
	max-width: none;
	display: block;
}

/* De onderstreping die op de desktop de actieve pagina en de hover markeert,
   heeft in het overlaymenu geen functie — daar loopt hij als een streep over
   de volle breedte en leest hij als een scheidingslijn die er niet hoort. */
.hoofdmenu.wp-block-navigation .is-menu-open a::after {
	display: none;
}

/* Op de open- en sluitknop van het menu geen kader. De browser geeft die na
   het sluiten automatisch de focus terug, ook na een tik met de vinger, en dan
   blijft er een zwart blokje om de hamburger staan. De knoppen zijn rond en
   duidelijk genoeg; wie met het toetsenbord werkt ziet aan de randkleur dat
   hij erop staat. */
/* De open- en sluitknop van het overlaymenu als knop vormgeven, in plaats van
   het kale icoontje van de kern. */
.hoofdmenu .wp-block-navigation__responsive-container-open,
.hoofdmenu .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 44px;
	min-width: 44px;
	padding: .6rem .8rem;
	border: var(--hl-lijn);
	border-radius: 999px;
	background: var(--hl-base);
	color: var(--hl-contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
}
.hoofdmenu .wp-block-navigation__responsive-container-open:hover,
.hoofdmenu .wp-block-navigation__responsive-container-close:hover {
	border-color: var(--hl-primary);
	color: var(--hl-primary);
}
.hoofdmenu .wp-block-navigation__responsive-container-close {
	right: var(--wp--preset--spacing--30);
	top: var(--wp--preset--spacing--30);
}

/* Acties naast het menu. De telefoonknop verliest eerst zijn nummer en houdt
   alleen het icoon over; daarna verdwijnt de afspraakknop, want die staat dan
   in het uitgeklapte menu. */
@media (max-width: 96rem) {
	.telknop .telnummer { display: none; }
	.telknop { padding: .7rem; }
}
@media (max-width: 68rem) {
	/* Twee klassen, want de kern zet zelf display:flex op .wp-block-buttons en
	   die regel laadt na deze. Met één klasse verliest hij het en blijft de
	   knop staan, waardoor de koptekst breder wordt dan het scherm. */
	.wp-block-buttons.koptekst__knop { display: none; }

	/* De hamburger staat links, vóór het logo. Dat is waar een duim bij een
	   telefoon in één hand het makkelijkst komt, en het is de plek waar
	   mensen hem verwachten. */
	.koptekst__balk .hoofdmenu { order: -1; flex: none; }
	.koptekst__balk .merk { margin-right: auto; }
}
@media (max-width: 30rem) {
	/* Op de smalste schermen mag het logo wél meekrimpen, anders duwt het de
	   telefoonknop het scherm af. De verhouding blijft daarbij intact: alleen
	   de hoogte gaat omlaag, de breedte volgt vanzelf. */
	.merk { flex: 0 1 auto; min-width: 0; }
	.koptekst .wp-block-site-logo img { max-height: var(--hl-logohoogte); }
}


/* Telefoonknop met een eigen icoon uit CSS: geen ruwe SVG in de inhoud, dus
   de redacteur kan er niets aan stukmaken. */
/* Minstens 44 pixels hoog: kleiner is met een vinger niet te raken. Dat geldt
   voor de telefoonknop en voor de open-/sluitknop van het menu. */
.telknop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	white-space: nowrap;
	min-height: 44px;
	min-width: 44px;
	padding: .6rem .9rem;
	border-radius: 999px;
	border: var(--hl-lijn);
	text-decoration: none;
	color: var(--hl-primary);
	background: var(--hl-base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	font-variant-numeric: tabular-nums lining-nums;
	transition: border-color var(--hl-snel), background var(--hl-snel);
}
.telknop::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: var(--hl-icoon-telefoon) no-repeat center / contain;
	mask: var(--hl-icoon-telefoon) no-repeat center / contain;
}
.telknop:hover {
	border-color: var(--hl-primary);
	background: #fff;
	color: var(--hl-primary);
}

:root {
	--hl-icoon-telefoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 14.1v2.3a1.5 1.5 0 0 1-1.6 1.5 15 15 0 0 1-6.6-2.3 14.8 14.8 0 0 1-4.5-4.5A15 15 0 0 1 2.5 4.4 1.5 1.5 0 0 1 4 2.8h2.3a1.5 1.5 0 0 1 1.5 1.3c.1.8.3 1.5.5 2.2a1.5 1.5 0 0 1-.3 1.6l-1 1a12 12 0 0 0 4.5 4.5l1-1a1.5 1.5 0 0 1 1.6-.3c.7.2 1.4.4 2.2.5a1.5 1.5 0 0 1 1.3 1.5Z'/%3E%3C/svg%3E");
	--hl-icoon-plaats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 8.3c0 4.4-6.5 9.2-6.5 9.2s-6.5-4.8-6.5-9.2a6.5 6.5 0 0 1 13 0Z'/%3E%3Ccircle cx='10' cy='8.2' r='2.3'/%3E%3C/svg%3E");
	--hl-icoon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1.5'/%3E%3Cpath d='m3 6 7 4.5L17 6'/%3E%3C/svg%3E");
	--hl-icoon-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E");
	--hl-icoon-paard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21v-4a5 5 0 0 1 10 0v4'/%3E%3Cpath d='M7 17a7 7 0 1 1 10 0'/%3E%3Cpath d='M5 21h3M16 21h3'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. KNOPPEN
   De kleuren staan in theme.json op het element "button". Hier staat alleen
   wat daar niet kan: de varianten en het hover-gedrag.

   Let op de specificiteit. Contextregels als ".op-donker a" kaapten eerder de
   knopkleuren; dat gaf gele tekst op een wit vlak met een witte hover. Daarom
   staan alle knopkleuren op een selector die de knoplink zelf noemt, en heeft
   elke contextregel hierboven en hieronder een :not(.wp-block-button__link).
   -------------------------------------------------------------------------- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	white-space: nowrap;
	transition: background var(--hl-snel), color var(--hl-snel),
	            transform var(--hl-snel), box-shadow var(--hl-snel),
	            border-color var(--hl-snel);
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--zacht);
}
.wp-block-button__link:active { transform: translateY(0); }

/* Tweede knop: alleen een rand, voor de minder belangrijke keuze naast de
   hoofdknop. */
.wp-block-button.knop--tweede > .wp-block-button__link {
	background: transparent;
	color: var(--hl-primary);
	border-color: var(--hl-line);
}
.wp-block-button.knop--tweede > .wp-block-button__link:hover {
	background: var(--hl-base);
	color: var(--hl-primary);
	border-color: var(--hl-primary);
}

/* Lichte knop op een donker vlak: omgekeerd, dus zand met bruine tekst. */
.wp-block-button.knop--licht > .wp-block-button__link {
	background: var(--hl-base);
	color: var(--hl-primary);
}
.wp-block-button.knop--licht > .wp-block-button__link:hover {
	background: #fff;
	color: var(--hl-contrast);
}

/* Randknop op een foto: doorzichtig wit, zodat de foto erdoorheen blijft. */
.wp-block-button.knop--rand-licht > .wp-block-button__link {
	background: rgba(251, 249, 246, .10);
	color: #fff;
	border-color: rgba(251, 249, 246, .55);
}
.wp-block-button.knop--rand-licht > .wp-block-button__link:hover {
	background: rgba(251, 249, 246, .2);
	color: #fff;
	border-color: #fff;
}

/* Tekstlink met een pijl die meebeweegt. */
/* Een pijllink is een actie, geen link in een zin. Hij krijgt daarom de volle
   44 pixels hoogte, zodat hij met een vinger te raken is. */
.pijllink,
.pijllink a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	gap: .5em;
	font-weight: 650;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--hl-primary);
}
.pijllink::after,
.pijllink a::after {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: var(--hl-icoon-pijl) no-repeat center / contain;
	mask: var(--hl-icoon-pijl) no-repeat center / contain;
	transition: transform var(--hl-snel);
}
.pijllink:hover,
.pijllink a:hover { color: var(--hl-contrast); }
.pijllink:hover::after,
.pijllink a:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. SECTIE-ONDERDELEN
   -------------------------------------------------------------------------- */

/* Bovenkopje: klein, in kapitalen, met een streepje ervoor. Staat in het
   logobruin — de oude okerkleur las als geel op wit en is geschrapt. */
.label {
	display: flex;
	align-items: center;
	gap: .7em;
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	font-weight: 650;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--hl-primary);
	line-height: 1.3;
}
.label::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: currentColor;
	flex: none;
}
.op-donker .label { color: var(--hl-goud); }
.gecentreerd .label { justify-content: center; }

 /* De breedtebeperking staat op de kinderen en niet op de sectiekop zelf.
   Reden: de constrained indeling van WordPress zet "margin-left:auto !important"
   op elk kind van een sectie. Geef je de sectiekop een max-width, dan wint dat
   !important en staat de kop midden in de kolom in plaats van links. Laat je
   de kop zelf op volle breedte en beperk je de tekst erbinnen, dan lijnt alles
   netjes links uit zonder tegen de kern in te gaan. */
.sectiekop > * { max-width: 34em; }
.gecentreerd .sectiekop > * { margin-inline: auto; }

/* Paginakop voor de pagina's zonder hero: dezelfde maatvoering als een
   sectiekop, zodat een subpagina niet ineens anders begint dan een hoofdpagina. */
.paginakop__inhoud > * { max-width: 20ch; }
/* Het kopbeeld gebruikt wél de volle inhoudsbreedte. */
.paginakop__beeld img {
	width: 100%;
	border-radius: var(--hl-rond-groot);
}
/* Een plaatshouder in de paginakop mag lager zijn dan de foto die er komt: een
   grijs vlak van 540 pixels hoog domineert de hele pagina, terwijl een foto
   dat juist niet doet. */
.paginakop .hl-plaatshouder {
	max-width: none;
	aspect-ratio: 16 / 5;
	max-height: 18rem;
}
.paginakop__inhoud .wp-block-post-title { margin: 0; }
.paginakop__inhoud > .inleiding { max-width: 34em; }
/* De datum boven een bericht krijgt de labelbehandeling, maar zonder de
   flex-uitlijning van .label — het is één regel tekst, geen kopje met streep. */
.paginakop__inhoud .wp-block-post-date.label { display: block; }
.paginakop__inhoud .wp-block-post-date.label::before {
	display: inline-block;
	vertical-align: middle;
	margin-right: .7em;
}
@media (min-width: 48rem) {
	.paginakop__inhoud > * { max-width: 24ch; }
}

.inleiding {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--hl-muted);
}
.op-donker .inleiding { color: var(--hl-zand-donker); }
.gecentreerd .inleiding { margin-inline: auto; max-width: 44ch; }

/* Gedempt bruin is een kleur voor lichte vlakken. Op donker moet .fijn de
   zandtint pakken, anders staat er bruin op bruin (1,83:1 — ruim onvoldoende). */
.fijn {
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
}
.zacht { color: var(--hl-muted); }
.op-donker .fijn,
.op-donker .zacht { color: var(--hl-zand-donker); }

/* Tekst en links op donkere vlakken. Opnieuw met :not(), zodat knoppen hun
   eigen kleuren houden. */
.op-donker { color: var(--hl-zand-donker); }
.op-donker :is(h1, h2, h3, h4, h5, h6) { color: var(--hl-base); }
.op-donker a:not(.wp-block-button__link) { color: var(--hl-goud); }
.op-donker a:not(.wp-block-button__link):hover { color: #fff; }


/* --------------------------------------------------------------------------
   5b. RASTERS
   De grid-indeling van WordPress zet "repeat(auto-fill, ...)" neer. Auto-fill
   houdt lege kolommen open: een tweeluik van twee blokken in een kolom die
   plaats biedt aan drie, kreeg daardoor een leeg derde deel en twee te smalle
   kolommen. Auto-fit klapt lege kolommen dicht, en dan vullen de blokken de
   breedte precies. Verder identiek, dus de editor blijft het gewoon een raster
   vinden en de klant kan er blokken in slepen.

   De selectors hebben twee klassen, want de regel van de kern heeft er één en
   staat verderop in de pagina. Met één klasse zou die het winnen.
   -------------------------------------------------------------------------- */
.wp-block-group.deuren {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}
.wp-block-group.tweeluik,
.wp-block-group.stappen-duo {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	align-items: center;
}
.wp-block-group.stappen-duo { align-items: start; }
.wp-block-group.feiten__raster {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
/* Drie op een rij. Bij 15rem passen er vier, en dan valt een band van zes
   foto's uiteen in 4 + 2 in plaats van in twee gelijke rijen. */
.wp-block-group.beeldband {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.wp-block-group.raster,
.wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
/* Zes kaarten naast elkaar op vier kolommen wordt rommelig; met drie bredere
   kolommen valt het in twee nette rijen uiteen. */
.wp-block-group.raster--breed {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.wp-block-group.instapkaarten {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* Vangnet voor elk raster met precies twee blokken erin, ook de rasters die de
   klant zelf maakt. De kern rekent met auto-fill en houdt dan een derde,
   lege kolom open zodra er ruimte voor is — dan staan twee blokken op
   tweederde van de breedte met een gat ernaast. Met :has() tellen we de
   kinderen en zetten we er auto-fit voor in de plaats. */
.wp-block-group.is-layout-grid:has(> :nth-child(2):last-child),
.wp-block-post-template.is-layout-grid:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
/* Idem voor precies drie blokken. */
.wp-block-group.is-layout-grid:has(> :nth-child(3):last-child),
.wp-block-post-template.is-layout-grid:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* --------------------------------------------------------------------------
   6. HERO EN DEUREN — de enige twee plekken met tekst op een foto
   Eén luid moment: de hero. De deuren zijn het vervolg daarop en delen dezelfde
   behandeling. Verder in de pagina staan geen donkere fotobanden meer; dat
   maakte het geheel donker en verdeelde de nadruk over te veel plekken.
   -------------------------------------------------------------------------- */
.hero.wp-block-cover {
	min-height: min(88svh, 46rem);
	/* Onderaan uitlijnen. Dit deed eerder contentPosition van de kern, maar die
	   zet width:auto op de inhoudscontainer en dan valt de tekst buiten de
	   inhoudskolom waar de rest van de pagina op staat. */
	align-items: flex-end;
	justify-content: flex-start;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	/* Grondtoon, zodat er nooit een wit gat staat voordat de foto er is. */
	background-color: rgb(var(--hl-sluier));
}

.hero .wp-block-cover__image-background {
	object-position: 50% 42%;
	/* De stalfoto is binnen genomen en van zichzelf donker; een klein beetje
	   lichter en voller maakt hem leesbaar onder de sluier. */
	filter: brightness(1.12) saturate(1.06) contrast(1.02);
	transform: scale(1.06);
	animation: hl-traag-inzoomen 26s cubic-bezier(.2, .4, .3, 1) forwards;
}
@keyframes hl-traag-inzoomen {
	from { transform: scale(1.06); }
	to   { transform: scale(1.16); }
}

/* De sluier van de kern uitzetten: we tekenen hem zelf, want een egale dimlaag
   dekt ook de kant van de foto af die juist open moet blijven. */
.hero > .wp-block-cover__background { display: none; }

/* Sluier + korrel. De sluier loopt schuin weg zodat de foto rechtsboven open
   blijft en alleen het tekstblok linksonder wordt gedempt. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(103deg,
			rgba(var(--hl-sluier), .86) 0%,
			rgba(var(--hl-sluier), .60) 34%,
			rgba(var(--hl-sluier), .18) 64%,
			rgba(var(--hl-sluier), 0) 100%),
		linear-gradient(0deg,
			rgba(var(--hl-sluier), .48) 0%,
			rgba(var(--hl-sluier), 0) 48%);
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: var(--hl-korrel);
	opacity: .12;
	mix-blend-mode: overlay;
}
.hero > .wp-block-cover__inner-container { z-index: 2; }

/* Op een smal scherm is er geen "rechterkant" om open te laten: de schuine
   sluier zou de hele foto dichttrekken. Daar loopt hij dus van boven naar
   onder, zodat je bovenin de stal nog ziet. */
@media (max-width: 56.1875rem) {
	.hero.wp-block-cover { min-height: min(82svh, 40rem); }
	.hero::before {
		background: linear-gradient(180deg,
			rgba(var(--hl-sluier), .22) 0%,
			rgba(var(--hl-sluier), .44) 26%,
			rgba(var(--hl-sluier), .80) 56%,
			rgba(var(--hl-sluier), .90) 100%);
	}
}

.hero__inhoud > * { max-width: 46rem; }
.hero__inhoud :is(h1, h2) { color: #fff; }
.hero__inleiding {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: #F0E7DA;
	max-width: 30ch;
}
/* De drie kernpunten onder de hero. Stonden eerst als dunne regel tekst achter
   een haarlijntje en vielen daardoor volledig weg tegen de foto. Nu zijn het
   losse plaatjes met een gouden vinkje: ze lezen als keurmerk in plaats van
   als voetnoot, en ze houden hun eigen ondergrond mee zodat ze op elke foto
   leesbaar blijven. */
.hero__voet {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	padding-top: 0;
	border-top: 0;
	font-size: var(--wp--preset--font-size--small);
}
.hero__voet p {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .55rem 1rem .55rem .8rem;
	border-radius: 999px;
	background: rgba(36, 26, 16, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(233, 196, 106, .35);
	color: #F4EADA;
	line-height: 1.35;
}
.hero__voet p::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background: var(--hl-goud);
	-webkit-mask: var(--hl-icoon-vink) no-repeat center / contain;
	mask: var(--hl-icoon-vink) no-repeat center / contain;
}
.hero__voet strong { color: #fff; font-weight: 650; }
@media (max-width: 30rem) {
	.hero__voet { gap: .45rem; }
	.hero__voet p { font-size: .8125rem; padding: .45rem .8rem .45rem .65rem; }
}

/* De twee deuren: pensionstalling en manege, even groot en even zwaar.
   Het raster zelf komt uit de blokindeling (grid, minimaal 28rem per kolom),
   niet uit CSS. Zet je het hier neer, dan blijft WordPress zijn flow-marges
   op de kinderen zetten en beginnen de twee deuren niet op dezelfde hoogte. */

.deur.wp-block-cover {
	/* Ruimer dan het tekstblok nodig heeft, zodat er boven de tekst een flink
	   stuk onbedekte foto overblijft. */
	min-height: 36rem;
	align-items: flex-end;
	justify-content: flex-start;
	border-radius: var(--hl-rond-groot);
	padding: var(--wp--preset--spacing--40);
	background-color: rgb(var(--hl-sluier));
	transition: box-shadow var(--hl-traag), transform var(--hl-traag);
}
.deur:hover {
	box-shadow: var(--wp--preset--shadow--diep);
	transform: translateY(-4px);
}
.deur .wp-block-cover__image-background {
	/* Liggende foto in een staand vlak: uit het midden snijden geeft vooral
	   lucht. Iets lager uitsnijden zet het paard en het erf in beeld. */
	object-position: 50% 62%;
	filter: brightness(1.06) saturate(1.04);
	transition: transform 900ms cubic-bezier(.2, .7, .3, 1);
}
.deur:hover .wp-block-cover__image-background { transform: scale(1.07); }
.deur > .wp-block-cover__background { display: none; }
.deur::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(0deg,
		rgba(var(--hl-sluier), .92) 4%,
		rgba(var(--hl-sluier), .66) 34%,
		rgba(var(--hl-sluier), .14) 66%,
		rgba(var(--hl-sluier), 0) 100%);
	transition: opacity var(--hl-traag);
}
.deur:hover::before { opacity: .92; }
.deur > .wp-block-cover__inner-container { z-index: 2; }
.deur :is(h2, h3) { color: #fff; margin: 0; }
.deur p { color: #EBE0D2; font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

/* De hele kaart klikbaar maken vanuit de titellink, met behoud van één
   tabstop. */
.deur__titel a { color: #fff; text-decoration: none; }
.deur__titel a::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.deur__titel a:hover { color: var(--hl-goud); }

/* --------------------------------------------------------------------------
   7. FEITENBAND, STAPPEN, KAARTEN EN LIJSTEN
   -------------------------------------------------------------------------- */

/* Feitenband. Bewust stil: een zandband, geen tweede donkere fotoband.
   Ook hier komt het raster uit de blokindeling. */
.feit > * { margin: 0; }
.feit__getal {
	display: block;
	font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--hl-primary);
	margin-bottom: .6rem !important;
}
.feit__tekst {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
	line-height: 1.45;
}
@media (min-width: 40rem) {
	.feit + .feit { position: relative; }
	.feit + .feit::before {
		content: "";
		position: absolute;
		left: calc(var(--wp--preset--spacing--40) / -2);
		top: .3rem;
		bottom: .3rem;
		width: 1px;
		background: var(--hl-line);
	}
}

/* Stappen. Genummerd, omdat het hier ook echt een volgorde ís: je belt, je komt
   langs, en pas daarna zit je vast in een groep of in een box. Waar geen
   volgorde in zit staat op deze site ook geen nummer. */
.stap-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}
.stap-lijst > li {
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	/* Twee rijen: de titel en de tekst eronder. Het nummerbolletje overspant ze
	   allebei.

	   Zonder die overspanning zat het bolletje in rij 1, en dan werd die rij
	   44 pixels hoog — de hoogte van het bolletje. De titel stond daar bovenin
	   en de tekst begon pas ná die 44 pixels, met een gat van 25 pixels
	   ertussen. Dat was de scheve witruimte. */
	grid-template-rows: auto auto;
	column-gap: var(--wp--preset--spacing--20);
	row-gap: .15rem;
	padding-bottom: var(--wp--preset--spacing--30);
	margin: 0;
	counter-increment: hl-stap;
}
.stap-lijst > li:last-child { padding-bottom: 0; }

/* De nummers komen uit een teller, niet uit de tekst: de redacteur kan een
   stap tussenvoegen zonder alles te hernummeren. */
.stap-lijst > li::before {
	content: counter(hl-stap);
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: var(--hl-lijn);
	background: var(--hl-base);
	display: grid;
	place-items: center;
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--body);
	font-variant-numeric: lining-nums;
	font-weight: 650;
	font-size: 1rem;
	color: var(--hl-primary);
}
/* Verbindingslijn tussen de bolletjes: maakt de volgorde zichtbaar. */
.stap-lijst > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.375rem;
	top: 3.1rem;
	bottom: .1rem;
	width: 1px;
	background: var(--hl-line);
}
.stap-lijst { counter-reset: hl-stap; }
/* De titel staat op ooghoogte met het nummer ernaast. */
.stap-lijst strong {
	display: block;
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	min-height: 2.75rem;
	display: flex;
	align-items: center;
	font-size: 1.0625rem;
	line-height: 1.3;
}
.stap-lijst > li > * { grid-column: 2; margin: 0; }
.stap-lijst .stap__tekst { grid-row: 2; }
.stap-lijst .stap__tekst {
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
	line-height: 1.55;
}

/* Overlappende beeldcompositie: een grote foto met een kleinere die er
   rechtsonder overheen valt. */
.duo { position: relative; }
.duo figure { margin: 0; overflow: hidden; border-radius: var(--hl-rond-groot); }
.duo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(.2, .7, .3, 1);
}
.duo figure:hover img { transform: scale(1.05); }
@media (min-width: 48rem) {
	.duo {
		padding-bottom: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}
	.duo__klein {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 55%;
		margin: 0;
		box-shadow: var(--wp--preset--shadow--diep);
		border: 6px solid var(--hl-base);
		border-radius: var(--hl-rond-groot);
	}
	.has-surface-background-color .duo__klein { border-color: var(--hl-surface); }
}

/* Kaarten. */
.kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--hl-base);
	border: var(--hl-lijn);
	border-radius: var(--hl-rond-groot);
	overflow: hidden;
	transition: border-color var(--hl-snel), box-shadow var(--hl-traag),
	            transform var(--hl-traag);
}
.kaart:hover {
	border-color: var(--hl-rand-hover);
	box-shadow: var(--wp--preset--shadow--zwevend);
	transform: translateY(-3px);
}
.kaart figure,
.kaart .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	background: var(--hl-surface);
}
.kaart img {
	width: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.kaart:hover img { transform: scale(1.05); }
.kaart__inhoud { flex: 1 1 auto; }
.kaart__inhoud .pijllink { margin-top: auto; }
.kaart__titel a,
.kaart .wp-block-post-title a { text-decoration: none; color: inherit; }
.kaart__titel a::before,
.kaart .wp-block-post-title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.kaart__titel a:hover,
.kaart .wp-block-post-title a:hover { color: var(--hl-primary); }

/* Vinklijst: opsomming met een vinkje in plaats van een bolletje.
   De verticale marge blijft van WordPress zelf (de blokafstand), anders plakt
   de lijst tegen de alinea erboven. Alleen de inspringing gaat eraf. */
.vinklijst {
	list-style: none;
	margin-inline: 0;
	padding-left: 0;
	display: grid;
	gap: .55em;
}
.vinklijst li {
	position: relative;
	padding-left: 1.75em;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
	line-height: 1.45;
}
.vinklijst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--hl-icoon-vink) no-repeat center / contain;
	mask: var(--hl-icoon-vink) no-repeat center / contain;
	/* Het vinkje staat in het logobruin, niet in de tekstkleur: dat geeft de
	   lijst een accent zonder een tweede kleur te introduceren. */
	color: var(--hl-primary);
	background: var(--hl-primary);
}
.op-donker .vinklijst li { color: var(--hl-zand-donker); }
.op-donker .vinklijst li::before { background: var(--hl-goud); }

:root {
	--hl-icoon-vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   8. FACILITEITEN EN BEELDBANDEN
   -------------------------------------------------------------------------- */

/* Faciliteiten als tabel: naam links, maat rechts, een haarlijn ertussen.
   Een tabel en geen opsomming, omdat het paren zijn en de redacteur er zo
   gewoon een rij bij kan zetten. */
/* De tabel wordt hier bewust uit zijn tabel-indeling gehaald en als flexrijen
   getekend. Reden: een echte tabel krijgt een minimale breedte uit zijn
   inhoud, en op 320 pixels stak hij daarmee 40 pixels buiten het scherm. Als
   rij-met-twee-vakken kan hij wél krimpen. De tabel-opmaak blijft eronder
   staan, dus voor een schermlezer is het nog steeds een tabel met paren, en
   de klant kan er in de editor gewoon een rij bij zetten. */
.faciliteiten table,
.faciliteiten tbody { display: block; width: 100%; }
.faciliteiten tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	break-inside: avoid;
	border-bottom: var(--hl-lijn);
}
.faciliteiten td {
	display: block;
	padding-block: .95rem;
	border: 0;
	min-width: 0;
}
.faciliteiten td:first-child {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 1.0625rem;
}
.faciliteiten td:last-child {
	flex: 0 0 auto;
	text-align: right;
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
}
/* Twee kolommen naast elkaar zodra er ruimte is. Column-count knipt de lijst
   netjes doormidden zonder dat we hem hoeven te splitsen. */
@media (min-width: 56rem) {
	.faciliteiten tbody {
		columns: 2;
		column-gap: var(--wp--preset--spacing--50);
	}
}

.beeldband figure { margin: 0; }
.beeldband img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hl-rond);
	transition: transform 800ms cubic-bezier(.2, .7, .3, 1);
}
.beeldband figure { overflow: hidden; border-radius: var(--hl-rond); }
.beeldband figure:hover img { transform: scale(1.06); }
.beeldband figcaption {
	margin-top: .6rem;
	font-size: .8125rem;
	color: var(--hl-muted);
}

/* --------------------------------------------------------------------------
   9. TARIEVEN EN TABELLEN
   -------------------------------------------------------------------------- */
.instap {
	background: var(--hl-base);
	border: var(--hl-lijn);
	border-radius: var(--hl-rond-groot);
	transition: border-color var(--hl-snel), box-shadow var(--hl-snel);
}
.instap:hover {
	border-color: var(--hl-rand-hover);
	box-shadow: var(--wp--preset--shadow--zacht);
}
.instap--uitgelicht {
	border-color: var(--hl-primary);
	border-width: 2px;
	box-shadow: var(--wp--preset--shadow--zacht);
}
.instap :is(h3, h4) { font-size: var(--wp--preset--font-size--large); }
.instap__prijs {
	font-size: 2.25rem;
	font-weight: 300;
	color: var(--hl-primary);
	line-height: 1;
	letter-spacing: -0.03em;
}
.instap__prijs small {
	font-size: .875rem;
	font-weight: 500;
	color: var(--hl-muted);
	letter-spacing: 0;
}
.instap p:not(.instap__prijs) {
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
}

/* De tarieventabellen zijn breed. Ze schuiven binnen hun eigen kader, zodat de
   pagina zelf nooit zijwaarts gaat schuiven. */
.tabelhouder {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: var(--hl-lijn);
	border-radius: var(--hl-rond-groot);
	background: var(--hl-base);
}
.tabelhouder table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
.tabelhouder :is(th, td) {
	padding: .85rem var(--wp--preset--spacing--30);
	text-align: right;
	vertical-align: baseline;
	border-bottom: var(--hl-lijn);
	border-inline: 0;
	white-space: nowrap;
}
.tabelhouder thead th {
	font-size: .75rem;
	font-weight: 650;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hl-muted);
	border-bottom: 2px solid var(--hl-line);
	padding-top: var(--wp--preset--spacing--30);
}
/* Eerste kolom blijft staan tijdens het schuiven, anders weet je niet meer
   welke rij je leest. */
.tabelhouder tbody th,
.tabelhouder tbody td:first-child,
.tabelhouder thead th:first-child {
	text-align: left;
	font-weight: 600;
	color: var(--hl-contrast);
	position: sticky;
	left: 0;
	background: var(--hl-base);
	white-space: normal;
	min-width: 11rem;
	box-shadow: 1px 0 0 var(--hl-line);
}
.tabelhouder thead th:first-child { color: var(--hl-muted); font-weight: 650; }
.tabelhouder tbody tr:last-child :is(th, td) { border-bottom: 0; }
.tabelhouder tbody tr:hover :is(th, td) { background: var(--hl-surface); }
/* De verwijzingen (a), (b) en (c) naar de voorwaarden. Als losse letters tussen
   haakjes zijn ze te klein om aan te tikken; met wat lucht eromheen niet. */
.tabelhouder a[href^="#voorwaarden"] {
	display: inline-block;
	min-width: 2.5rem;
	padding: .8rem .4rem;
	text-align: center;
	text-decoration-thickness: 1px;
}
/* De kop hoort boven de tabel. WordPress zet de figcaption ná de tabel in de
   HTML, wat voor een bijschrift klopt maar niet voor een tabelkop: dan lees je
   de cijfers voordat je weet waar ze over gaan. Omkeren met flex houdt de
   volgorde in de HTML intact, dus voor een schermlezer verandert er niets aan
   de opbouw. */
.tabelhouder .wp-block-table {
	margin: 0;
	overflow: visible;
	display: flex;
	flex-direction: column-reverse;
}
.tabelhouder figcaption {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--hl-contrast);
	letter-spacing: -0.01em;
	caption-side: top;
}
.perstuk {
	display: block;
	color: var(--hl-muted);
	font-size: .8125rem;
}
.tabelhint {
	font-size: .8125rem;
	color: var(--hl-muted);
}
@media (min-width: 48rem) { .tabelhint { display: none; } }
.voorwaarden {
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
}
.voorwaarden li { margin-top: .5em; }

/* --------------------------------------------------------------------------
   10. PAARDEN
   -------------------------------------------------------------------------- */
.paard__kenmerken {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.paard__soort {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	font-size: .75rem;
}
.paard__soort a,
.paard__kenmerken li {
	margin: 0;
	display: inline-block;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line);
	font-size: .75rem;
	color: var(--hl-muted);
	letter-spacing: .01em;
	text-decoration: none;
}
.paard__soort a:hover {
	border-color: var(--hl-primary);
	color: var(--hl-primary);
}

/* Placeholder zolang de portretfoto's nog niet zijn aangeleverd. */
.paard__leeg {
	display: grid;
	place-items: center;
	gap: .6rem;
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(135deg, transparent 0 10px, rgba(78, 47, 20, .035) 10px 20px),
		var(--hl-surface);
	color: var(--hl-muted);
	text-align: center;
	padding: var(--wp--preset--spacing--30);
	font-size: .8125rem;
	letter-spacing: .02em;
}
.paard__leeg::before {
	content: "";
	width: 2.5rem;
	height: 2.5rem;
	background: var(--hl-primary);
	opacity: .45;
	-webkit-mask: var(--hl-icoon-paard) no-repeat center / contain;
	mask: var(--hl-icoon-paard) no-repeat center / contain;
}

/* Markering voor inhoud die nog moet worden aangevuld. Bewust opvallend: dit
   moet vóór oplevering weg zijn. */
.merkje {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 2;
	background: var(--hl-contrast);
	color: var(--hl-goud);
	font-size: .6875rem;
	font-weight: 650;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: 3px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   11. VEELGESTELDE VRAGEN
   -------------------------------------------------------------------------- */
/* De breedte staat op de vragen zelf en niet op de groep eromheen. Zet je hem
   op de groep, dan zet de constrained indeling van WordPress er
   margin-inline:auto !important overheen en staat de hele accordeon midden in
   de kolom in plaats van links — dat was precies wat er misging. */
.vragen { max-width: none; }
.vraag {
	max-width: 46rem;
	margin: 0;
	border-bottom: var(--hl-lijn);
}
.vraag:first-of-type { border-top: var(--hl-lijn); }
.vraag > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: 1.25rem .25rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	transition: color var(--hl-snel);
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary::after {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .2rem;
	background: var(--hl-primary);
	-webkit-mask: var(--hl-icoon-plus) no-repeat center / contain;
	mask: var(--hl-icoon-plus) no-repeat center / contain;
	transition: transform var(--hl-snel);
}
.vraag > summary:hover { color: var(--hl-primary); }
.vraag[open] > summary { color: var(--hl-primary); }
.vraag[open] > summary::after { transform: rotate(45deg); }
.vraag > :not(summary) {
	padding: 0 3rem 1.5rem .25rem;
	color: var(--hl-muted);
	max-width: 62ch;
}

:root {
	--hl-icoon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   12. CONTACT
   -------------------------------------------------------------------------- */
.contactkaart {
	background: var(--hl-base);
	border: var(--hl-lijn);
	border-radius: var(--hl-rond-groot);
	transition: border-color var(--hl-snel), box-shadow var(--hl-snel),
	            transform var(--hl-snel);
}
.contactkaart:hover {
	border-color: var(--hl-rand-hover);
	box-shadow: var(--wp--preset--shadow--zacht);
	transform: translateY(-2px);
}
.contactkaart :is(h2, h3) { font-size: var(--wp--preset--font-size--large); }
.contactkaart p:not(.groot-contact) {
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
}
/* Het icoon hoort bij de soort kaart en komt daarom uit CSS, niet uit de
   inhoud. Zo staat er geen ruwe SVG in een pagina die de klant bewerkt. */
.contactkaart::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--hl-surface);
	background-image: var(--hl-kaarticoon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.25rem;
}
.contactkaart--bellen     { --hl-kaarticoon: var(--hl-icoon-telefoon); }
.contactkaart--langskomen { --hl-kaarticoon: var(--hl-icoon-plaats); }
.contactkaart--mailen     { --hl-kaarticoon: var(--hl-icoon-mail); }

/* Telefoonnummers en adressen: schreefloos met tabelcijfers, en groot genoeg
   om vanaf de stal in één oogopslag te lezen. */
.groot-contact {
	font-size: 1.3125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	font-style: normal;
}
.groot-contact--rustig { font-size: 1.125rem; font-weight: 500; }
.groot-contact a { text-decoration: none; }
.groot-contact a:hover { text-decoration: underline; }

/* Openingstijden: dag links, tijd rechts, met een stippellijn ertussen. */
.tijden table { width: 100%; border-collapse: collapse; }
.tijden :is(td, th) {
	padding-block: .35rem;
	border: 0;
	border-bottom: 1px dashed var(--hl-line);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-align: left;
}
.tijden td:last-child { text-align: right; color: var(--hl-muted); }
.tijden tr:last-child :is(td, th) { border-bottom: 0; }
.op-donker .tijden :is(td, th) { border-bottom-color: rgba(251, 249, 246, .18); }
.op-donker .tijden td:last-child { color: inherit; }

.route {
	background: var(--hl-base);
	border: var(--hl-lijn);
	border-radius: var(--hl-rond-groot);
}

/* Fluent Forms binnen de vormgeving trekken. De plugin levert eigen CSS mee;
   dit zijn de plekken waar die afwijkt van de rest van de site. */
.fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	color: var(--hl-contrast);
}
.fluentform .ff-el-form-control {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--hl-contrast);
	background: var(--hl-base);
	border: 1px solid var(--hl-veld-rand);
	border-radius: var(--hl-rond);
	padding: .8rem .9rem;
	transition: border-color var(--hl-snel), box-shadow var(--hl-snel);
}
.fluentform .ff-el-form-control:hover { border-color: var(--hl-muted); }
.fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--hl-primary);
	box-shadow: 0 0 0 3px rgba(78, 47, 20, .18);
}
.fluentform .ff-el-form-check-label { font-size: var(--wp--preset--font-size--small); }
.fluentform .ff-el-help-message {
	font-size: .8125rem;
	color: var(--hl-muted);
}
.fluentform .ff-el-is-error .text-danger { color: #A32B14; }
.fluentform .ff-btn-submit {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	line-height: 1.2;
	background: var(--hl-primary);
	color: var(--hl-base);
	border: 2px solid transparent;
	border-radius: 999px;
	padding: .95em 1.75em;
	cursor: pointer;
	transition: background var(--hl-snel), transform var(--hl-snel),
	            box-shadow var(--hl-snel);
}
.fluentform .ff-btn-submit:hover {
	background: var(--hl-primary-donker);
	color: var(--hl-base);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--zacht);
}
.ff-message-success {
	background: var(--hl-surface);
	border: var(--hl-lijn);
	border-left: 3px solid var(--hl-secondary);
	border-radius: var(--hl-rond);
	padding: var(--wp--preset--spacing--30);
	color: var(--hl-contrast);
}

/* --------------------------------------------------------------------------
   13. VOETTEKST
   -------------------------------------------------------------------------- */
.voettekst { background: var(--hl-primary); }
/* In de voettekst is wel ruimte voor het volledige beeldmerk, in wit. Op deze
   breedte is de naam erin gewoon leesbaar. */
.voettekst__vlak img {
	width: 13rem;
	max-width: 100%;
	height: auto;
}
.voettekst :is(h2, h3) {
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	font-weight: 650;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--hl-goud);
}
.voettekst a:not(.wp-block-button__link) {
	color: var(--hl-zand-donker);
	text-decoration: none;
}
.voettekst a:not(.wp-block-button__link):hover {
	color: var(--hl-goud);
	text-decoration: underline;
}
.voettekst .wp-block-navigation { font-size: var(--wp--preset--font-size--small); }
.voettekst address { font-style: normal; font-size: var(--wp--preset--font-size--small); line-height: 1.7; }
.voettekst__onder {
	border-top: 1px solid rgba(251, 249, 246, .18);
	font-size: .8125rem;
}
.keurmerken { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; }
.keurmerken img {
	width: 3rem;
	height: auto;
	/* Beide keurmerken zijn ontworpen voor een witte ondergrond en worden
	   onleesbaar op het bruin. Daarom een wit plaatje eronder. */
	background: #fff;
	border-radius: 4px;
	padding: .35rem;
}


/* --------------------------------------------------------------------------
   16. PLAATSHOUDERS VOOR BEELD DAT NOG MOET KOMEN
   Er komt een fotoshoot. Tot die tijd staat op elke plek waar een foto hoort
   een grijs vlak op precies het formaat dat de foto krijgt. Dat is beter dan
   niets: de indeling klopt al, je ziet meteen hoeveel beeld er nodig is, en
   het valt genoeg op om niet per ongeluk zo de lucht in te gaan.
   -------------------------------------------------------------------------- */
.hl-plaatshouder {
	display: grid;
	place-items: center;
	align-content: center;
	gap: .5rem;
	width: 100%;
	aspect-ratio: var(--hl-verhouding, 4 / 3);
	border-radius: var(--hl-rond-groot);
	/* Een lichte diagonale streping op zand: rustig genoeg om niet te storen,
	   duidelijk genoeg om als "hier hoort nog een foto" te lezen. */
	background:
		repeating-linear-gradient(135deg, transparent 0 10px, rgba(78, 47, 20, .04) 10px 20px),
		var(--hl-surface);
	border: 1px dashed var(--hl-line);
	color: var(--hl-muted);
	text-align: center;
	padding: var(--wp--preset--spacing--20);
	font-size: .8125rem;
	letter-spacing: .02em;
}
.hl-plaatshouder::before {
	content: "";
	width: clamp(1.75rem, 6cqi, 2.75rem);
	height: clamp(1.75rem, 6cqi, 2.75rem);
	background: var(--hl-primary);
	opacity: .38;
	-webkit-mask: var(--hl-plaatshouder-icoon, var(--hl-icoon-beeld)) no-repeat center / contain;
	mask: var(--hl-plaatshouder-icoon, var(--hl-icoon-beeld)) no-repeat center / contain;
}
.hl-plaatshouder--4x3  { --hl-verhouding: 4 / 3; }
.hl-plaatshouder--3x2  { --hl-verhouding: 3 / 2; }
.hl-plaatshouder--16x9 { --hl-verhouding: 16 / 9; }
.hl-plaatshouder--1x1  { --hl-verhouding: 1 / 1; }
.hl-plaatshouder p { margin: 0; }

.hl-plaatshouder--paard   { --hl-plaatshouder-icoon: var(--hl-icoon-paard); }
.hl-plaatshouder--agenda  { --hl-plaatshouder-icoon: var(--hl-icoon-kalender); }
.hl-plaatshouder--album   { --hl-plaatshouder-icoon: var(--hl-icoon-album); }
.hl-plaatshouder--brief   { --hl-plaatshouder-icoon: var(--hl-icoon-mail); }
.hl-plaatshouder--persoon { --hl-plaatshouder-icoon: var(--hl-icoon-persoon); }

/* In een kaart loopt de plaatshouder tot de rand door, net als een echte foto. */
.kaart .hl-plaatshouder {
	border-radius: 0;
	border-width: 0 0 1px 0;
}
/* Klein vlak: dan alleen het icoon, want de tekst past er niet meer bij. */
@media (max-width: 30rem) {
	.hl-plaatshouder span { display: none; }
}

:root {
	--hl-icoon-beeld: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='m3.5 17 5-5 3.5 3.5L15.5 12l5 5'/%3E%3C/svg%3E");
	--hl-icoon-kalender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
	--hl-icoon-album: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3.5' width='15' height='13' rx='2'/%3E%3Cpath d='M3 7v11.5a2 2 0 0 0 2 2h12'/%3E%3Ccircle cx='11' cy='8' r='1.4'/%3E%3Cpath d='m7.5 15 3.5-3.5 2.5 2.5 2.5-2.5 4 4'/%3E%3C/svg%3E");
	--hl-icoon-persoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
	--hl-icoon-klok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 5.5V10l3 2'/%3E%3C/svg%3E");
}

/* Een echte foto neemt precies dezelfde ruimte in als de plaatshouder die er
   eerst stond, zodat de pagina niet verspringt als het beeld binnenkomt. */
.beeld--4x3 img, .beeld--3x2 img, .beeld--16x9 img, .beeld--1x1 img {
	width: 100%;
	object-fit: cover;
	border-radius: var(--hl-rond-groot);
}
.beeld--4x3 img  { aspect-ratio: 4 / 3; }
.beeld--3x2 img  { aspect-ratio: 3 / 2; }
.beeld--16x9 img { aspect-ratio: 16 / 9; }
.beeld--1x1 img  { aspect-ratio: 1 / 1; }
.beeldstrook img { border-radius: var(--hl-rond-groot); }

/* Uitklap voor kleine lettertjes: voorwaarden, reglementen. Dezelfde vorm als
   de veelgestelde vragen, maar rustiger, want dit is geen uitnodiging om te
   lezen — het is er voor wie het nodig heeft. */
.uitklap {
	max-width: 46rem;
	margin: 0;
	border: var(--hl-lijn);
	border-radius: var(--hl-rond-groot);
	background: var(--hl-base);
}
.uitklap > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: 1rem var(--wp--preset--spacing--30);
	cursor: pointer;
	list-style: none;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	color: var(--hl-primary);
}
.uitklap > summary::-webkit-details-marker { display: none; }
.uitklap > summary::after {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	background: currentColor;
	-webkit-mask: var(--hl-icoon-plus) no-repeat center / contain;
	mask: var(--hl-icoon-plus) no-repeat center / contain;
	transition: transform var(--hl-snel);
}
.uitklap[open] > summary::after { transform: rotate(45deg); }
.uitklap[open] > summary { border-bottom: var(--hl-lijn); }
.uitklap > :not(summary) {
	padding: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
}

/* --------------------------------------------------------------------------
   17. AGENDA
   Een agendapunt is geen blogbericht: de datum is het belangrijkste en staat
   daarom links als losse datumblok, zoals op een scheurkalender.
   -------------------------------------------------------------------------- */
.agenda-lijst { display: grid; gap: var(--wp--preset--spacing--20); }

.agenda-item {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: start;
	padding: var(--wp--preset--spacing--30);
	background: var(--hl-base);
	border: var(--hl-lijn);
	border-radius: var(--hl-rond-groot);
	transition: border-color var(--hl-snel), box-shadow var(--hl-snel),
	            transform var(--hl-snel);
}
.agenda-item:hover {
	border-color: var(--hl-rand-hover);
	box-shadow: var(--wp--preset--shadow--zacht);
	transform: translateY(-2px);
}
.agenda-item__datum {
	display: grid;
	place-items: center;
	align-content: center;
	width: 4.5rem;
	padding: .55rem .25rem .65rem;
	border-radius: var(--hl-rond);
	background: var(--hl-primary);
	color: var(--hl-base);
	font-family: var(--wp--preset--font-family--body);
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1.05;
}
.agenda-item__dag {
	font-size: 1.75rem;
	font-weight: 300;
	letter-spacing: -0.02em;
}
.agenda-item__maand {
	font-size: .6875rem;
	font-weight: 650;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hl-goud);
}
.agenda-item__jaar { font-size: .625rem; color: var(--hl-zand-donker); letter-spacing: .06em; }
/* De datum zit in een eigen houder zodat het blokje niet uitrekt tot de hoogte
   van de tekst ernaast. */
.agenda-item__datum-houder { display: block; }
.agenda-item__inhoud > * { margin: 0; }
.agenda-item__inhoud { display: grid; gap: .35rem; }
.agenda-item__titel {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}
/* De hele kaart is klikbaar, niet alleen de titelregel. Een titel van 25 pixels
   hoog is met een vinger lastig te raken; de kaart eromheen niet. */
.agenda-item { position: relative; }
.agenda-item__titel a {
	text-decoration: none;
	color: inherit;
}
.agenda-item__titel a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.agenda-item__titel a:hover { color: var(--hl-primary); }
.agenda-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
	font-variant-numeric: tabular-nums lining-nums;
}
.agenda-item__meta span { display: inline-flex; align-items: center; gap: .4em; }
.agenda-item__meta span::before {
	content: "";
	width: .95em;
	height: .95em;
	background: currentColor;
	-webkit-mask: var(--hl-meta-icoon) no-repeat center / contain;
	mask: var(--hl-meta-icoon) no-repeat center / contain;
}
.agenda-item__tijd { --hl-meta-icoon: var(--hl-icoon-klok); }
.agenda-item__waar { --hl-meta-icoon: var(--hl-icoon-plaats); }
.agenda-item__tekst { font-size: var(--wp--preset--font-size--small); color: var(--hl-muted); }

/* Geweest: rustiger, zodat het oog naar wat komen gaat blijft trekken. */
.agenda-item--geweest { opacity: .72; }
.agenda-item--geweest .agenda-item__datum {
	background: var(--hl-surface);
	color: var(--hl-muted);
}
.agenda-item--geweest .agenda-item__maand { color: var(--hl-primary); }
.agenda-item--geweest .agenda-item__jaar { color: var(--hl-muted); }

@media (max-width: 30rem) {
	.agenda-item { grid-template-columns: 3.5rem 1fr; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--20); }
	.agenda-item__datum { width: 3.5rem; }
	.agenda-item__dag { font-size: 1.375rem; }
}

/* Archief van verstuurde nieuwsbrieven: een leeslijst, geen kaartenraster.
   Je scant hier op datum en onderwerp, en dan is een rij regels sneller. */
.brievenlijst {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--hl-lijn);
	max-width: 46rem;
}
.brief { margin: 0; border-bottom: var(--hl-lijn); }
.brief__link {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	gap: var(--wp--preset--spacing--20);
	align-items: baseline;
	padding: 1rem .25rem .35rem;
	text-decoration: none;
	color: inherit;
}
.brief__link:hover .brief__titel { color: var(--hl-primary); }
.brief__datum {
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
	font-variant-numeric: tabular-nums lining-nums;
}
.brief__titel {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.brief__tekst {
	margin: 0 0 1rem;
	padding-left: calc(9.5rem + var(--wp--preset--spacing--20));
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
	max-width: 62ch;
}
@media (max-width: 40rem) {
	.brief__link { grid-template-columns: 1fr; gap: .15rem; }
	.brief__tekst { padding-left: 0; }
}

/* Uitslagen, gegroepeerd per jaar. Compacter dan de agenda: je scant hier op
   datum en rubriek, en de uitslag zelf staat op de eigen pagina. */
.uitslagen__jaar {
	font-size: var(--wp--preset--font-size--large);
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--hl-line);
	max-width: 46rem;
}
.uitslagen__jaar:first-child { margin-top: 0; }
.uitslagen { display: grid; gap: 0; max-width: 46rem; }

.uitslag {
	position: relative;
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: var(--wp--preset--spacing--20);
	align-items: baseline;
	padding: .9rem 0;
	border-bottom: var(--hl-lijn);
}
.uitslag__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem;
}
.uitslag__datum {
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
	font-variant-numeric: tabular-nums lining-nums;
}
.uitslag__soort {
	display: inline-block;
	padding: .15rem .5rem;
	border-radius: 999px;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line);
	font-size: .6875rem;
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hl-primary);
}
.uitslag__titel {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.3;
}
.uitslag__titel a { text-decoration: none; color: inherit; }
.uitslag__titel a::before { content: ""; position: absolute; inset: 0; }
.uitslag:hover .uitslag__titel a { color: var(--hl-primary); }
.uitslag__tekst {
	grid-column: 2;
	margin: .25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--hl-muted);
}
@media (max-width: 34rem) {
	.uitslag { grid-template-columns: 1fr; gap: .3rem; }
	.uitslag__tekst { grid-column: 1; }
}

/* --------------------------------------------------------------------------
   18. KAART BIJ DE ROUTE
   Een zelf getekende kaart in plaats van een ingesloten Google Maps. Reden:
   een kaart-iframe zet cookies van derden en laadt tientallen bestanden van
   Google, en deze site heeft bewust geen cookiebanner. Deze kaart is een eigen
   SVG, laadt niets, en de knop eronder opent de echte route.
   -------------------------------------------------------------------------- */
.routekaart {
	position: relative;
	overflow: hidden;
	border-radius: var(--hl-rond-groot);
	border: var(--hl-lijn);
	background: #E8E4D8;
	min-height: 16rem;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.routekaart svg { display: block; width: 100%; height: 100%; flex: 1 1 auto; }
.routekaart__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--hl-base);
	border-top: var(--hl-lijn);
	font-size: var(--wp--preset--font-size--small);
}
.routekaart__voet p { margin: 0; }

/* Keurmerken: logo's zijn geen foto's. Ze mogen niet worden bijgesneden en ze
   horen op wit, want daar zijn ze voor ontworpen. */
.keurmerk img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #fff;
	padding: var(--wp--preset--spacing--30);
	border: var(--hl-lijn);
	border-radius: var(--hl-rond-groot);
}
.keurmerkrij figcaption {
	text-align: center;
	font-weight: 600;
	color: var(--hl-contrast);
}

/* De genummerde huisregels. Een lange genummerde lijst leest prettiger met wat
   lucht per punt en een duidelijk nummer, in plaats van als tekstblok. */
.huisregels {
	max-width: 46rem;
	counter-reset: hl-regel;
	list-style: none;
	margin-inline: 0;
	padding-left: 0;
}
.huisregels > li {
	counter-increment: hl-regel;
	position: relative;
	padding: .85rem 0 .85rem 3rem;
	border-bottom: var(--hl-lijn);
	margin: 0;
}
.huisregels > li:first-child { border-top: var(--hl-lijn); }
.huisregels > li::before {
	content: counter(hl-regel);
	position: absolute;
	left: 0;
	top: .8rem;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--hl-surface);
	color: var(--hl-primary);
	font-family: var(--wp--preset--font-family--body);
	font-variant-numeric: lining-nums tabular-nums;
	font-size: .8125rem;
	font-weight: 650;
}

/* --------------------------------------------------------------------------
   19. RITME
   De klacht was terecht: te veel lucht tussen icoon en tekst, en tussen
   tekstblokken onderling. Twee dingen tegelijk aan de hand — de kaarten
   gebruikten de sectie-afstand als interne afstand, en losse tekstsecties
   stapelden allemaal een volle sectiehoogte op.
   -------------------------------------------------------------------------- */

/* Binnen een kaart hoort de afstand kleiner te zijn dan tussen kaarten. */
.kaart__inhoud,
.contactkaart,
.instap { --wp--style--block-gap: .75rem; }

.contactkaart::before { margin-bottom: .35rem; }
.contactkaart :is(h2, h3) { margin-bottom: .15rem; }
.contactkaart .groot-contact { margin-block: 0 .2rem; }

/* Een sectiekop hoeft niet zo ver van zijn eigen sectie af te staan als
   secties van elkaar. */
.sectiekop { margin-bottom: var(--wp--preset--spacing--40); }
.sectiekop > * + * { margin-top: .6rem; }
.sectiekop .inleiding { margin-top: .9rem; }

/* De leesbreedte zit op de kinderen van de tekstkolom, niet op de kolom zelf.
   Zo lijnt lopende tekst links uit met de paginatitel erboven, in plaats van
   gecentreerd in een kolom van 1240 pixels te staan. */
.tekstkolom > * { max-width: 46rem; }
.tekstkolom > * > * { max-width: 46rem; }

/* Tekstsecties die op elkaar volgen horen bij elkaar: dan is een volle
   sectiehoogte lucht ertussen te veel. Alleen waar de achtergrondkleur
   wisselt blijft de volledige ruimte staan, want daar begint echt iets nieuws. */
.tekstsectie + .tekstsectie:not([class*="has-"]) {
	padding-top: 0;
}
.tekstsectie:not([class*="has-"]) + .tekstsectie:not([class*="has-"]) .sectiekop {
	margin-bottom: var(--wp--preset--spacing--30);
}
/* Kop en tekst binnen één sectie horen dichter op elkaar dan losse secties. */
.tekstsectie .sectiekop { margin-bottom: var(--wp--preset--spacing--30); }

/* Tekst met een beeld ernaast. De beeldkolom staat standaard rechts; met
   --omgekeerd wisselt hij naar links, zodat opeenvolgende secties elkaar
   afwisselen in plaats van een streep beeld aan één kant te vormen. */
.tekst-met-beeld {
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.tekst-met-beeld > * { max-width: none; }
.tekst-met-beeld .tekstkolom > *,
.tekst-met-beeld .sectiekop > * { max-width: none; }
@media (min-width: 56rem) {
	.tekst-met-beeld--omgekeerd > :first-child { order: 2; }
}
.tekstsectie--beeld .sectiekop { margin-bottom: var(--wp--preset--spacing--20); }

.vinklijst { margin-block: .9rem; }
.stap-lijst > li { padding-bottom: var(--wp--preset--spacing--20); }
.stap-lijst .stap__tekst { display: block; }

/* --------------------------------------------------------------------------
   20. NIEUWS, ALBUMS EN NIEUWSBRIEVEN
   -------------------------------------------------------------------------- */
.kaart .wp-block-post-featured-image { margin: 0; }
.kaart .wp-block-post-featured-image img { border-radius: 0; }
.kaart .wp-block-post-excerpt__excerpt { margin: 0; }
.kaart .wp-block-post-date { margin: 0; }
.kaart .wp-block-post-title { margin: 0; }

/* Een leesbare regel onder de kaart: datum, en waar van toepassing het aantal
   foto's. Klein en gedempt, want het is metadata. */
.kaartmeta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .9rem;
	font-size: .8125rem;
	color: var(--hl-muted);
	font-variant-numeric: tabular-nums lining-nums;
}

/* Fotoalbum: het aantal foto's als hoekje op de omslag. */
.album-teller {
	position: absolute;
	right: var(--wp--preset--spacing--20);
	top: var(--wp--preset--spacing--20);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: rgba(36, 26, 16, .78);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: .75rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums lining-nums;
}
.album-teller::before {
	content: "";
	width: .95em;
	height: .95em;
	background: currentColor;
	-webkit-mask: var(--hl-icoon-album) no-repeat center / contain;
	mask: var(--hl-icoon-album) no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   21. VOETTEKST: SOCIALE LINK
   -------------------------------------------------------------------------- */
.sociaal {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	min-height: 44px;
	padding: .5rem .95rem .5rem .8rem;
	border-radius: 999px;
	border: 1px solid rgba(251, 249, 246, .3);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	transition: border-color var(--hl-snel), background var(--hl-snel);
}
.sociaal::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: var(--hl-icoon-facebook) no-repeat center / contain;
	mask: var(--hl-icoon-facebook) no-repeat center / contain;
}
.op-donker .sociaal { color: var(--hl-zand-donker); }
.sociaal:hover {
	background: rgba(251, 249, 246, .1);
	border-color: var(--hl-goud);
}
/* Op een licht vlak, bijvoorbeeld op de contactpagina. */
.sociaal--licht {
	border-color: var(--hl-line);
	color: var(--hl-primary);
	background: var(--hl-base);
}
.sociaal--licht:hover { background: #fff; border-color: var(--hl-primary); }

:root {
	--hl-icoon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52 1.5-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.91h-2.34V22c4.78-.76 8.44-4.92 8.44-9.94Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   22. LICHTBAK — foto's groot bekijken
   Eigen bouw, omdat de ingebouwde van WordPress één foto toont en niet laat
   doorbladeren. In een album van een wedstrijd wil je juist doorklikken.
   -------------------------------------------------------------------------- */

/* De knop die om elke foto komt te staan. Hij mag niet opvallen: het is de
   foto die je ziet, niet de knop eromheen. */
.hl-vergrootknop {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: inherit;
	overflow: hidden;
	line-height: 0;
}
.hl-vergrootknop img { display: block; }

html.hl-lichtbak-open { overflow: hidden; }

.hl-lichtbak {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: grid;
	/* Balk boven, foto in het midden, pijlen links en rechts ervan. */
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	/* Bijna helemaal dekkend, en bewust zonder backdrop-filter. Die eigenschap
	   maakt van een element het referentiekader voor alles wat erin met
	   position:fixed staat — dat heeft in de koptekst al een keer het
	   overlaymenu gesloopt — en bij 94% dekking zie je er toch niets van. */
	background: rgba(20, 14, 8, .97);
	color: #fff;
}
.hl-lichtbak[hidden] { display: none; }

.hl-lichtbak__balk {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: .75rem .25rem;
}
.hl-lichtbak__teller {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, .8);
	font-variant-numeric: tabular-nums lining-nums;
}

.hl-lichtbak__figuur {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	min-height: 0;
	height: 100%;
}
.hl-lichtbak__beeld {
	max-width: 100%;
	/* De foto past altijd binnen het scherm, ook liggend op een telefoon. */
	max-height: calc(100dvh - 11rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--hl-rond);
	background: rgba(255, 255, 255, .04);
}
.hl-lichtbak__bijschrift {
	margin: 0;
	max-width: 60ch;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, .82);
	line-height: 1.5;
}
.hl-lichtbak__bijschrift[hidden] { display: none; }

/* De knoppen: rond, ruim, en met genoeg contrast op elke foto. */
.hl-lichtbak button {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(20, 14, 8, .55);
	color: #fff;
	cursor: pointer;
	transition: background var(--hl-snel), border-color var(--hl-snel);
}
.hl-lichtbak button:hover {
	background: rgba(20, 14, 8, .85);
	border-color: rgba(255, 255, 255, .6);
}
.hl-lichtbak button[hidden] { display: none; }
.hl-lichtbak button::before {
	content: "";
	width: 1.35rem;
	height: 1.35rem;
	background: currentColor;
	-webkit-mask: var(--hl-lichtbak-icoon) no-repeat center / contain;
	mask: var(--hl-lichtbak-icoon) no-repeat center / contain;
}
.hl-lichtbak__sluit    { --hl-lichtbak-icoon: var(--hl-icoon-kruis); }
.hl-lichtbak__vorige   { --hl-lichtbak-icoon: var(--hl-icoon-pijl-links); grid-column: 1; grid-row: 2; }
.hl-lichtbak__volgende { --hl-lichtbak-icoon: var(--hl-icoon-pijl); grid-column: 3; grid-row: 2; }

:root {
	--hl-icoon-kruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E");
	--hl-icoon-pijl-links: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10H4M9 15l-5-5 5-5'/%3E%3C/svg%3E");
}

/* Op een smal scherm staan de pijlen niet naast de foto maar eronder: naast
   de foto zouden ze de helft van de breedte opeten. */
@media (max-width: 34rem) {
	.hl-lichtbak {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr auto;
		justify-items: center;
	}
	.hl-lichtbak__figuur { grid-column: 1 / -1; grid-row: 2; }
	.hl-lichtbak__vorige { grid-column: 1; grid-row: 3; justify-self: end; }
	.hl-lichtbak__volgende { grid-column: 2; grid-row: 3; justify-self: start; }
	.hl-lichtbak__beeld { max-height: calc(100dvh - 15rem); }
}

/* --------------------------------------------------------------------------
   14. ONTHULLEN BIJ SCROLLEN
   Zet zichzelf alleen aan als JS draait én de bezoeker beweging niet heeft
   uitgezet. Zonder JS staat alles gewoon zichtbaar — de klasse doet dan niets.
   -------------------------------------------------------------------------- */
.onthul-aan .onthul {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 700ms ease, transform var(--hl-traag);
}
.onthul-aan .onthul.is-zichtbaar { opacity: 1; transform: none; }
.onthul-aan .onthul:nth-child(2) { transition-delay: 90ms; }
.onthul-aan .onthul:nth-child(3) { transition-delay: 180ms; }
.onthul-aan .onthul:nth-child(4) { transition-delay: 270ms; }

/* --------------------------------------------------------------------------
   15. BEWEGING UIT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation: none !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.hero .wp-block-cover__image-background { transform: scale(1); }
	.kaart:hover,
	.deur:hover,
	.contactkaart:hover,
	.wp-block-button__link:hover { transform: none; }
	.deur:hover .wp-block-cover__image-background,
	.kaart:hover img,
	.duo figure:hover img,
	.beeldband figure:hover img { transform: none; }
}