/**
 * Erve de Gunne — aanvullende stijlen.
 *
 * Alles wat met kleur, ruimte en typografie te maken heeft staat in theme.json.
 * Hier staat alleen wat theme.json (nog) niet kan: de fotokaders, de
 * baanderdeurlijsten, de golfranden, de diaprojectie en een paar kleine
 * verfijningen.
 */

/* ---------------------------------------------------------------------------
   1. Fundament
   --------------------------------------------------------------------------- */

:root {
	/* Uit de themakleur zelf, niet uit een vaste rgba: anders blijft er een
	   groene zweem over de randen liggen als het palet verandert. */
	--edg-rand: 1px solid color-mix(in srgb, var(--wp--preset--color--groen) 26%, transparent);
	--edg-rand-zacht: 1px solid color-mix(in srgb, var(--wp--preset--color--groen) 15%, transparent);
	--edg-overgang: 180ms ease;
	/* Hoogte van de golvende rand. Staat hier omdat zowel de rand zelf als de
	   marge die er ruimte voor maakt exact dezelfde maat moeten hebben. */
	--edg-golf-hoogte: clamp(1.4rem, 3.2vw, 3rem);
	/* Ruimte boven en onder een gekleurde sectie: de golf zelf plus de gewone
	   afstand tussen twee secties. Zonder die tweede term begint de golf
	   meteen onder de vorige alinea en staat de tekst er bovenop. */
	--edg-golf-marge: calc(var(--edg-golf-hoogte) + var(--wp--preset--spacing--50));
}

html {
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Zichtbare focus voor toetsenbordgebruikers — hoort bij accessibility-ready.
   Twee ringen: een donkere kern en een lichte buitenrand, zodat de focus ook
   zichtbaar blijft op een donkere foto (hero) én op de room witte achtergrond. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--klei);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--wp--preset--color--basis) 85%, transparent);
	border-radius: 3px;
}

/* Sla de navigatie over — WCAG 2.4.1 (Bypass Blocks). Zichtbaar zodra hij
   focus krijgt, daarvoor netjes uit beeld. */
.edg-overslaan {
	position: absolute;
	left: var(--wp--preset--spacing--30);
	top: 0;
	z-index: 100;
	transform: translateY(-150%);
	padding: 0.7em 1.4em;
	background-color: var(--wp--preset--color--groen);
	color: var(--wp--preset--color--basis);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 6px 6px;
	transition: transform var(--edg-overgang);
}

.edg-overslaan:focus {
	transform: translateY(0);
}

/* De kop plakt bovenaan; zonder deze marge springt een ankerlink (zoals
   "Naar de inhoud") precies achter die kop. */
#inhoud,
:target {
	scroll-margin-top: 6rem;
}

/* ---------------------------------------------------------------------------
   1b. Leesbreedte
   Onderzoek naar leesbaarheid (Bringhurst 45–75 tekens; Dyson & Haselgrove
   ~55 tekens) wijst steeds dezelfde kant op: te lange regels laten het oog de
   volgende regel kwijtraken. De ch-eenheid meet in échte tekenbreedtes, dus
   deze grens klopt ongeacht het lettertype of de tekstgrootte van de bezoeker.
   Alleen lopende tekst wordt begrensd — koppen, foto's en de kalender niet.
   --------------------------------------------------------------------------- */

/* :is() in plaats van :where(), omdat deze regel het moet winnen van de
   alignwide-breedte die WordPress zelf meegeeft (76rem). Een kop mag over de
   volle breedte, een alinea niet. */
:is(.wp-block-post-content, .wp-block-group, .wp-block-column)
	> :is(p, ul, ol):not(.has-text-align-center):not(.edg-galerij__bijschrift):not(.edg-dia__bijschrift):not(.edgr-legenda) {
	max-width: var(--wp--custom--leesbreedte, 68ch);
}

/* Gecentreerde tekst blijft gecentreerd binnen zijn eigen leesbreedte. */
:is(.wp-block-post-content, .wp-block-group) > p.has-text-align-center {
	max-width: var(--wp--custom--leesbreedte, 68ch);
	margin-inline: auto;
}

/* De voet is een reeks smalle kolommen; daar is de leesbreedte al geregeld
   door de kolom zelf en zou een extra grens niets toevoegen. */
.edg-voet :is(p, ul) {
	max-width: none;
}

/* ---------------------------------------------------------------------------
   1c. Eén linkerkantlijn per sectie
   Een sectie bestaat vaak uit een kop en een alinea op contentbreedte (42rem,
   gecentreerd) gevolgd door iets breeds: de kalender, een fotorij, kaarten.
   Die twee begonnen dan op verschillende plekken, wat leest als een
   uitlijnfout. Staat er iets breeds in een groep, dan schuift de tekst
   ernaast mee naar dezelfde kantlijn — de leesbreedte hierboven houdt de
   regels alsnog kort genoeg. Gecentreerde tekst blijft met rust gelaten,
   want die is met opzet gecentreerd.
   --------------------------------------------------------------------------- */

/* Alles schuift naar de linkerkantlijn. Het !important is niet vrijblijvend:
   WordPress zet zijn eigen centrering met
   `margin-left: auto !important; margin-right: auto !important`
   in de layout-CSS van een constrained groep, en daar komt geen enkele
   selector zonder !important langs.

   De kantlijn is niet zomaar 0: binnen de paginainhoud loopt een brede sectie
   tot (100% − 76rem) / 2 vanaf de rand, en dáár moet de tekst op aansluiten.
   In een sectie die zelf al op 76rem staat is die uitkomst negatief, en vangt
   max() dat af op 0. Zo klopt dezelfde regel op beide niveaus. */
:is(.wp-block-group, .wp-block-post-content):has(> .alignwide)
	> :is(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-group):not(.alignwide):not(.alignfull):not(.has-text-align-center) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: 0 !important;
}

/* ...maar alleen koppen mogen ook écht zo breed worden. Voor lopende tekst
   blijft de leesbreedte leidend: die opschuiven naar de volle 76rem zou
   regels van ruim 140 tekens opleveren, twee keer wat onderzoek aanraadt. */
:is(.wp-block-group, .wp-block-post-content):has(> .alignwide)
	> :is(h1, h2, h3, h4, h5, h6):not(.alignwide):not(.has-text-align-center) {
	max-width: var(--wp--style--global--wide-size);
}

/* ---------------------------------------------------------------------------
   2. Kop en navigatie
   --------------------------------------------------------------------------- */

.edg-kop {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: var(--edg-rand-zacht);
}

/* De waas en de romen vulling liggen op een eigen laag, niet op .edg-kop
   zelf. Dat is geen opsmuk maar noodzaak: een element met backdrop-filter
   wordt het houvast (containing block) voor álles wat position:fixed is —
   ook voor het uitklapmenu van WordPress. Het menu valt dan binnen de kop
   van 150px in plaats van over het hele scherm, en je moet in dat strookje
   scrollen om de laatste items te zien. Een pseudo-element heeft geen
   kinderen, dus daar heeft dat effect niets meer om aan vast te plakken. */
.edg-kop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--wp--preset--color--nevel) 92%, transparent);
	backdrop-filter: blur(6px);
}

.admin-bar .edg-kop {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.edg-kop .wp-block-site-logo img {
	max-height: 68px;
	width: auto;
}

/* WordPress klapt het menu standaard pas onder de 600px in tot een
   menuknopje. Zes menu-items, de knop, het logo en de naam passen pas naast
   elkaar vanaf ongeveer 1130px — daartussen brak de kop in drie regels van
   samen 224px, met de menu-items en de knop links onder elkaar. Dat is geen
   menubalk meer maar een inhoudsopgave, en hij plakt ook nog eens mee bij
   het scrollen. Het menuknopje blijft daarom staan zolang de balk niet op
   één regel past; 72rem geeft daarbij wat lucht voor een breder lettertype.
   Beide regels staan binnen .edg-kop, zodat ze het van de core-regels winnen
   zonder !important. */
@media (max-width: 71.99rem) {
	.edg-kop .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.edg-kop .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Zodra het menu inklapt verhuist "Beschikbaarheid" mee naar binnen. Naast
   het logo hoort dan nog één ding te staan — het menuknopje — en niet ook nog
   een knop die om aandacht vraagt; anders brak de kop op een telefoon alsnog
   in twee hoge regels en at hij 152px van de 844px die zo'n scherm hoog is,
   bij elke scroll opnieuw. Het menu-item zelf komt uit inc/navigatie.php.
   Boven dit punt is het andersom: de knop staat in de balk en het menu-item
   zou hem alleen maar dubbel zeggen. */
.wp-block-navigation li.edg-menu__beschikbaarheid {
	display: none;
}

@media (max-width: 71.99rem) {
	/* Met .edg-kop ervoor, om dezelfde reden als de regels hierboven: de
	   opmaakregel die core voor een knoppenrij meestuurt telt even zwaar als
	   een losse klasse en komt later in de pagina te staan. */
	.edg-kop .edg-kop__knop {
		display: none;
	}

	.wp-block-navigation li.edg-menu__beschikbaarheid {
		display: block;
		margin-top: 0.5rem;
	}

	/* In het uitklapmenu blijft het een knop, geen zoveelste regel tekst:
	   dezelfde kleuren en hetzelfde lettertype als de knop in de balk.

	   De vulling zit op het label en niet op de link eromheen. Die link is in
	   het uitklapmenu een rij van de volle breedte (zie de regels hieronder
	   bij .is-menu-open), en die maat is daar terecht: je raakt hem met een
	   duim. Een knop van de volle breedte is geen knop meer, dus geven we het
	   label zelf de pilvorm en laten we de rij eromheen met rust. */
	.edg-menu__beschikbaarheid .wp-block-navigation-item__label {
		display: inline-block;
		padding: 0.6em 1.4em;
		border-radius: 999px;
		background-color: var(--wp--preset--color--groen);
		color: var(--wp--preset--color--basis);
		font-family: var(--wp--preset--font-family--opensans);
		font-size: 0.95rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		text-decoration: none;
	}

	/* Een knop is geen regel in een lijst: geen scheidingslijn eronder, en
	   ook niet het onderstreepje van "je bent hier". */
	.wp-block-navigation__responsive-container.is-menu-open .edg-menu__beschikbaarheid .wp-block-navigation-item__content {
		border-bottom: 0;
		text-decoration: none;
	}
}

/* Op een telefoon past zelfs die ingeklapte kop niet op één regel als de
   ondertitel meedoet; die staat al in het logo, dus die mag weg. */
@media (max-width: 47.99em) {
	.edg-kop .wp-block-site-tagline {
		display: none;
	}

	.edg-kop > .wp-block-group {
		row-gap: 0.75rem;
	}
}

/* Menu-items krijgen een grasgroen streepje bij hover/actief. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.25rem;
}

.wp-block-navigation:not(.has-modal-open) .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--wp--preset--color--klei);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--edg-overgang);
}

.wp-block-navigation:not(.has-modal-open) .wp-block-navigation-item__content:hover::after,
.wp-block-navigation:not(.has-modal-open) .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* De pagina waar je nu bent, blijft ook zonder muis gemarkeerd. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--groen);
	font-weight: 600;
}

/* De knop in de kop laat ook zien of je op die pagina staat. */
.edg-kop__knop .wp-block-button__link.is-actief {
	background-color: var(--wp--preset--color--mos);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--basis), 0 0 0 2px var(--wp--preset--color--mos);
}

/* In het uitklapmenu op mobiel staat het streepje in de weg. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* Het uitklapmenu bedekt het hele scherm, dus mogen de items zich ook als
   een lijst gedragen: over de volle breedte, links uitgelijnd en met een rij
   van 56px zodat je ze met een duim raakt (WCAG 2.2 — 2.5.8). Zonder deze
   regels erven ze de rechtse uitlijning uit de kop en staan zes labels
   tegen de rechterrand geplakt, elk zo breed als zijn eigen tekst. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: stretch;
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	min-height: 56px;
	align-items: center;
	justify-content: flex-start;
	padding-block: 0.5rem;
	font-size: 1.3rem;
	border-bottom: var(--edg-rand-zacht);
}

/* Het grasgroene streepje hoort bij een menubalk, waar het onder een kort
   label past. In het uitklapmenu loopt het over de volle regelbreedte en
   staat het pal op de scheidingslijn — twee lijnen onder elkaar, waarvan er
   één alleen bij de huidige pagina hoort. De klasse has-modal-open die dit
   elders afvangt staat op de container en niet op .wp-block-navigation, dus
   hier moet het streepje apart uit. De huidige pagina blijft herkenbaar aan
   de onderstreping hierboven. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

/* ---------------------------------------------------------------------------
   2b. Knoppen
   Elke knop is minstens 44px hoog. WCAG 2.2 (2.5.8) vraagt 24×24px; 44px is
   de maat die Apple en Google hanteren en die past bij de gemiddelde
   vingertop (16–20mm, MIT Touch Lab). Voor een boekingssite die veel op de
   telefoon wordt gebruikt is dat de verstandigere ondergrens.
   --------------------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--raakvlak, 44px);
	text-align: center;
	transition: background-color var(--edg-overgang), color var(--edg-overgang),
		box-shadow var(--edg-overgang), transform var(--edg-overgang);
}

/* De omlijnde knop is de tweede keuze naast de gevulde knop. Core geeft hem
   een randje van 2px in de tekstkleur; wij maken de rand donkergroen zodat
   hij ook als vorm genoeg contrast heeft (WCAG 1.4.11 vraagt 3:1). */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--groen);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-border-color) {
	border-color: var(--wp--preset--color--groen);
	border-width: 1.5px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--groen);
	color: var(--wp--preset--color--basis);
}

/* Op een donkere foto (hero) draait de omlijnde knop om: licht op donker.

   Het !important is hier geen luiheid maar noodzaak: de knop in de hero heeft
   zijn crèmekleurige tekst als inline style meegekregen (die kleur komt uit de
   editor en staat dus ín de pagina-inhoud). Inline wint van een stylesheet, dus
   zonder !important bleef de tekst crème terwijl de achtergrond bij hover óók
   crème werd — crème op crème, en de knop was letterlijk onleesbaar. */
.edg-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.edg-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--basis) !important;
	color: var(--wp--preset--color--groen) !important;
	border-color: var(--wp--preset--color--basis) !important;
}

/* Een knop die je indrukt zakt een haartje — bevestiging dat je raak klikte. */
.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(1px);
}

/* ---------------------------------------------------------------------------
   3. Fotokaders (blokstijlen op core/image)
   --------------------------------------------------------------------------- */

.wp-block-image.is-style-kader img {
	background-color: var(--wp--preset--color--wit);
	padding: clamp(8px, 1.4vw, 16px);
	border: var(--edg-rand);
	border-radius: 3px;
	box-shadow: var(--wp--preset--shadow--zacht);
}

.wp-block-image.is-style-kader figcaption {
	margin-top: 0.75rem;
}

.wp-block-image.is-style-boog img {
	border-radius: 50vw 50vw 6px 6px;
	box-shadow: var(--wp--preset--shadow--zacht);
}

/* ---------------------------------------------------------------------------
   4. Baanderdeurtjes- en vinkjeslijsten (voorzieningen per ruimte)
   Het opsommingsteken is de baanderdeur van een los hoes — de brede dubbele
   deur waar in Twente de wagen door naar binnen ging. Het is het herkenbaarste
   detail van dit soort boerderijen, en daarmee een teken dat bij dít erf hoort
   in plaats van bij elke B&B-site.

   De deur is een masker en geen achtergrondplaatje: een masker neemt de
   kleur van background-color over, dus hetzelfde bestand kleurt mee met het
   vlak waar de lijst in staat. Bij een achtergrondplaatje zou voor elke kleur
   een eigen SVG nodig zijn.

   .is-style-hartjes staat er nog bij omdat die klasse in bestaande pagina's
   is opgeslagen. De stijl heet in de editor alleen nog "Baanderdeurtjes";
   deze regel zorgt dat wat er al staat er niet ineens anders uitziet.
   --------------------------------------------------------------------------- */

.wp-block-list.is-style-baanderdeurtjes,
.wp-block-list.is-style-hartjes,
.wp-block-list.is-style-vinkjes,
ul.edg-voorzieningen {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.wp-block-list.is-style-baanderdeurtjes li,
.wp-block-list.is-style-hartjes li,
.wp-block-list.is-style-vinkjes li,
ul.edg-voorzieningen li {
	position: relative;
	padding-left: 1.95rem;
	margin-bottom: 0.5rem;
}

.wp-block-list.is-style-baanderdeurtjes li::before,
.wp-block-list.is-style-hartjes li::before,
.wp-block-list.is-style-vinkjes li::before,
ul.edg-voorzieningen li::before {
	content: "";
	position: absolute;
	left: 0;
	/* Uitlijnen op de eerste regel, niet op het hele lijstitem: bij een item
	   dat over twee regels loopt zou centreren de deur halverwege zetten. */
	top: calc((1lh - 1.15em) / 2);
	width: 1em;
	height: 1.2em;
	background-color: var(--wp--preset--color--klei);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-list.is-style-baanderdeurtjes li::before,
.wp-block-list.is-style-hartjes li::before,
ul.edg-voorzieningen li::before {
	-webkit-mask-image: url("../images/baanderdeur.svg");
	mask-image: url("../images/baanderdeur.svg");
}

/* Het vinkje blijft een vinkje: het zegt "dit is geregeld", en dat is iets
   anders dan "dit hoort erbij". Op de Pieterpadpagina staan ze naast elkaar. */
.wp-block-list.is-style-vinkjes li::before {
	background-color: var(--wp--preset--color--mos);
	-webkit-mask-image: url("../images/vinkje.svg");
	mask-image: url("../images/vinkje.svg");
}

/* Twee kolommen zodra er ruimte is. De min() is de ondergrens van de
   ondergrens: past 13rem niet meer in het vak waar de lijst in staat, dan
   wint de beschikbare breedte en steekt de lijst niet over zijn kader heen. */
ul.edg-voorzieningen {
	display: grid;
	gap: 0.15rem 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
}

/* ---------------------------------------------------------------------------
   5. Kaarten
   --------------------------------------------------------------------------- */

.wp-block-group.is-style-kaart {
	background-color: var(--wp--preset--color--wit);
	border: var(--edg-rand-zacht);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--zacht);
}

.wp-block-group.is-style-kaart > .wp-block-image:first-child {
	margin-top: calc(-1 * var(--wp--preset--spacing--40));
	margin-inline: calc(-1 * var(--wp--preset--spacing--40));
	width: auto;
}

.wp-block-group.is-style-kaart > .wp-block-image:first-child img {
	border-radius: 5px 5px 0 0;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   6. Fotogalerij: één grote foto met verwisselbare kleintjes
   --------------------------------------------------------------------------- */

.edg-galerij__hoofd {
	margin: 0 0 0.75rem;
	position: relative;
}

/* Pijlen naar de vorige en volgende foto. Ze staan in de foto zelf: op een
   telefoon staan de kleintjes ver genoeg weg dat je ervoor moet scrollen, en
   dan bladert niemand meer door. De knoppen komen uit galerij.js, dus zonder
   JavaScript staat er ook niets in de weg. */
.edg-galerij__pijl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: var(--edg-rand-zacht);
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--nevel) 88%, transparent);
	color: var(--wp--preset--color--mos);
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--edg-overgang), opacity var(--edg-overgang);
}

.edg-galerij__pijl:hover,
.edg-galerij__pijl:focus-visible {
	background-color: var(--wp--preset--color--nevel);
}

/* De passe-partout heeft een eigen wit randje; daar blijven de pijlen binnen. */
.edg-galerij__pijl--terug {
	left: clamp(12px, 2vw, 20px);
}

.edg-galerij__pijl--verder {
	right: clamp(12px, 2vw, 20px);
}

.edg-galerij__hoofd img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background-color: var(--wp--preset--color--linnen);
	border-radius: 4px;
	transition: opacity var(--edg-overgang);
}

.edg-galerij__hoofd.is-wisselend img {
	opacity: 0.35;
}

/* Een staande foto groot: helemaal tonen in plaats van tot een strook
   bijsnijden. De passe-partout (of de linnen achtergrond) vult de rest, dus
   het leest als een ingelijste foto. Zie galerij.js. */
.edg-galerij__hoofd.is-heel img {
	object-fit: contain;
}

.edg-galerij__duimen.wp-block-gallery {
	gap: 0.6rem;
}

.edg-galerij__duimen .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: pointer;
	border-radius: 3px;
	transition: opacity var(--edg-overgang), outline-color var(--edg-overgang);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.edg-galerij__duimen .wp-block-image img:hover {
	opacity: 0.82;
}

.edg-galerij__duimen .wp-block-image.is-actief img {
	outline-color: var(--wp--preset--color--mos);
}

.edg-galerij__bijschrift {
	color: color-mix(in srgb, var(--wp--preset--color--inkt) 74%, transparent);
	font-size: var(--wp--preset--font-size--klein);
	font-style: italic;
	min-height: 1.4em;
}

/* Net als bij de diaprojectie (sectie 13) staan de bijschriften hier
   standaard uit: de foto's spreken voor zich. Wil je ze toch, kies dan op de
   galerij met de kleintjes de blokstijl "Met bijschriften".

   Op de site regelt galerij.js dit ook; deze regels zijn er voor de editor.
   De alt-tekst van de foto blijft altijd staan — die is voor schermlezers en
   voor Google, niet voor het oog. */
.edg-galerij figcaption,
.edg-galerij .edg-galerij__bijschrift {
	display: none;
}

.edg-galerij:has( .edg-galerij__duimen.is-style-met-bijschriften ) figcaption:not( [hidden] ),
.edg-galerij:has( .edg-galerij__duimen.is-style-met-bijschriften ) .edg-galerij__bijschrift:not( [hidden] ) {
	display: block;
}

/* ---------------------------------------------------------------------------
   8. Kleine verfijningen
   --------------------------------------------------------------------------- */

.wp-block-separator.is-style-blaadje {
	border: 0;
	height: auto;
	text-align: center;
	opacity: 1;
	max-width: none;
}

.wp-block-separator.is-style-blaadje::before {
	content: "\273F"; /* ✿ */
	color: var(--wp--preset--color--mos);
	font-size: 1.5rem;
	line-height: 1;
}

.wp-block-heading.is-style-bovenkop {
	font-family: var(--wp--preset--font-family--opensans);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mos);
}

/* Beeld met tekstoverlay in de hero rustig houden. */
.wp-block-cover.edg-hero {
	min-height: clamp(58vh, 70vh, 42rem);
}

.wp-block-cover.edg-hero .wp-block-cover__inner-container {
	max-width: 46rem;
	position: relative;
	z-index: 2;
}

/* Een sluier onder de tekst. Zonder deze laag hangt de leesbaarheid van de
   hero af van de foto die Hanneke toevallig uploadt: bij een lichte lucht
   valt lichte tekst weg. De sluier is bovenaan bijna onzichtbaar en onderaan
   het sterkst, precies waar de tekst en de knoppen staan.

   De verloop gaat op de bestaande overlaylaag van het cover-blok en niet op
   een eigen ::after. Die laag ligt in de opbouw van WordPress al onder de
   inhoud; een eigen laag erbovenop legde de sluier óók over de knoppen, en
   dan wordt een romen knop een vaal grijsgroen vlak. */
.wp-block-cover.edg-hero .wp-block-cover__background {
	background-image: linear-gradient(
		180deg,
		rgba(35, 38, 44, 0) 0%,
		rgba(35, 38, 44, 0.25) 45%,
		rgba(35, 38, 44, 0.62) 100%
	);
}

/* De hero-tekst krijgt daarbovenop nog een zachte schaduw, zodat ook een
   losse regel over een fel stuk foto leesbaar blijft. */
.edg-hero :is(h1, h2, p) {
	text-shadow: 0 1px 12px rgba(30, 33, 38, 0.45);
}

/* --- De foto achter de hero draait vanzelf door (assets/js/hero-dia.js) ---

   De galerij .edg-hero__spoel is de voorráád, niet het beeld: Hanneke vinkt
   daar de foto's aan en sleept ze op volgorde. Hij staat altijd uit — ook
   zonder JavaScript, want anders zou er een stapel foto's onder de kop
   verschijnen. Het script leest de lijst en bouwt er de lagen van.

   In de editor blijft de galerij wél zichtbaar; daar moet Hanneke hem juist
   kunnen aanklikken.

   De selector is met opzet zwaarder dan je zou verwachten: WordPress zet zelf
   `.wp-block-gallery.is-layout-flex { display: flex }` in de pagina, en een
   losse `.edg-hero__spoel` verliest het daarvan. Dan staan de vier foto's als
   stapel ónder de knoppen in beeld. */
.edg-hero .wp-block-gallery.edg-hero__spoel {
	display: none;
}

.editor-styles-wrapper .edg-hero .wp-block-gallery.edg-hero__spoel {
	display: flex;
}

.edg-hero__dia {
	position: absolute;
	inset: 0;
	overflow: hidden;

	/* Gelijk aan de coverfoto van WordPress zelf: de sluier
	   (.wp-block-cover__background, z-index 1) valt eroverheen en de tekst
	   (z-index 2) staat daar weer boven. */
	z-index: 0;
}

.edg-hero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;

	/* Langzaam overvloeien in plaats van schuiven: een hero die beweegt
	   trekt de aandacht weg van de knoppen die er middenin staan. */
	transition: opacity 1.6s ease-in-out;
}

.edg-hero__foto.is-zichtbaar {
	opacity: 1;
}

/* Pas weghalen als het script er echt staat: tot dat moment is de gewone
   coverfoto de terugval, zodat de hero nooit leeg is. */
.edg-hero.is-dia > img.wp-block-cover__image-background {
	display: none;
}

/* --- Bijsnijden of de hele foto laten zien ---

   Standaard staat `object-fit: cover` hierboven: de foto wordt bijgesneden tot
   hij het hele vlak vult. Dat is bij een hero meestal wat je wilt — een kop
   over een schermbrede foto, zonder gaten.

   Kies je in de editor op het cover-blok de stijl "Hele foto tonen", dan blijft
   de foto in zijn eigen verhouding staan en zie je hem helemaal. Er komen dan
   balken naast: de foto's zijn 4:3 (1600×1200) en de hero is veel breder dan
   hoog. Die balken krijgen de themakleur mee in plaats van zwart, en de sluier
   loopt eroverheen door, zodat het geen ongelukje lijkt.

   Wil je de hele foto zónder balken, dan is de echte oplossing een bredere
   foto — bijvoorbeeld liggend 16:9 — en niet een andere object-fit. */
.edg-hero.is-style-hele-foto .edg-hero__foto,
.edg-hero.is-style-hele-foto > img.wp-block-cover__image-background {
	object-fit: contain;
}

.edg-hero.is-style-hele-foto .edg-hero__dia,
.edg-hero.is-style-hele-foto {
	background-color: var(--wp--preset--color--groen);
}

/* Wie beweging heeft uitgezet krijgt één stilstaande foto. Het script zet de
   klok dan al niet aan; dit haalt ook het overvloeien zelf weg. */
@media ( prefers-reduced-motion: reduce ) {
	.edg-hero__foto {
		transition: none;
	}
}

.edg-voet {
	border-top: var(--edg-rand-zacht);
}

.edg-voet a {
	text-decoration: none;
}

.edg-voet a:hover {
	text-decoration: underline;
}

/* Tabel in bijvoorbeeld het tarievenblok. */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
	border-color: color-mix(in srgb, var(--wp--preset--color--groen) 22%, transparent);
	padding: 0.6rem 0.75rem;
}

/* ---------------------------------------------------------------------------
   9. Verticaal ritme
   Een patroon brengt zijn eigen bovenmarge mee, en de paginasjabloon zet daar
   nóg een marge boven. Onder de paginatitel stapelde dat op tot een gat van
   bijna twee schermhoogtes. De eerste en laatste sectie van de inhoud laten
   hun eigen buitenmarge daarom vallen.
   --------------------------------------------------------------------------- */

/* !important is hier nodig: de patronen zetten hun marge als inline-stijl op
   het blok, en die wint het van elke selector. */
.wp-block-post-content > :first-child {
	margin-top: 0 !important;
}

/* Een laatste sectie die over de volle breedte loopt, sluit rechtstreeks op
   de voet aan: daar hoort geen strook paginakleur tussen, want de golvende
   rand van de voet vórmt de scheiding al.

   Een gewoon blok — een tegel, een alinea, een lijst — houdt zijn ondermarge
   wél. De voet brengt sinds de golfrand geen eigen bovenmarge meer mee (die
   zit nu in zijn binnenmarge, waar hij niet met een golf kan botsen), dus
   zonder deze marge zou de golf dwars door de laatste tegel heen lopen. */
.wp-block-post-content > :last-child.alignfull {
	margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   10. Kleine doelen groot genoeg maken
   --------------------------------------------------------------------------- */

/* De duimpjes in de fotogalerij zijn knoppen in de praktijk: ze moeten dus
   ook als knop aan te wijzen zijn (WCAG 2.2 — 2.5.8). */
.edg-galerij__duimen .wp-block-image img {
	min-height: 44px;
}

/* Editorhulp: patronen zien er in de editor hetzelfde uit als op de site. */
.editor-styles-wrapper .edg-kop {
	position: static;
	background-color: color-mix(in srgb, var(--wp--preset--color--nevel) 92%, transparent);
}

/* De waaslaag hangt aan een absolute positie binnen de plakkende kop; staat
   die kop in de editor stil, dan heeft de laag niets meer om zich naar te
   voegen. De kleur staat hierboven, dus de laag mag hier weg. */
.editor-styles-wrapper .edg-kop::before {
	display: none;
}

.editor-styles-wrapper .edg-overslaan {
	display: none;
}

/* ---------------------------------------------------------------------------
   11. Golfjes
   Tussen twee secties loopt een golvende rand in plaats van een rechte lijn.
   Dat is niet alleen versiering: een rechte scheiding leest als "hier begint
   het volgende blok", een golf leest als "hier gaat het verhaal verder". Voor
   een site die rust wil uitstralen scheelt dat.

   De golf is een masker over background-color: inherit. Daardoor neemt de
   rand automatisch de kleur van de sectie zelf over en hoeft er geen tweede
   SVG per kleurvlak te bestaan. Zet Hanneke de sectie op oudroze, dan wordt
   de golf oudroze mee.
   --------------------------------------------------------------------------- */

.wp-block-group.is-style-golfrand,
.wp-block-group.is-style-golfrand-onder {
	position: relative;
	/* De golf steekt buiten de sectie en moet over de buur heen liggen.
	   Zonder eigen stapelcontext verdwijnt hij achter een buursectie die zelf
	   een achtergrondkleur heeft. */
	z-index: 1;
}

/* De golf steekt buiten de sectie uit, en die ruimte moet de sectie zélf
   meebrengen. Op nul marge liep de golf dwars door de alinea erboven heen —
   op de Pieterpadpagina viel zo de laatste regel van de inleiding weg. De
   marge is precies zo hoog als de golf: de rand ligt dan in een strook
   paginakleur en leest als een vorm die uit de achtergrond omhoog komt,
   niet als een balk die ergens overheen valt. */
.wp-block-group.is-style-golfrand,
.wp-block-group.is-style-golfrand-onder {
	margin-top: var(--edg-golf-marge) !important;
	margin-bottom: var(--edg-golf-marge) !important;
}

/* Volgt een gekleurde sectie direct op een schermbrede foto, dan hoort de golf
   in die foto te snijden in plaats van eronder te zweven — dat is precies de
   overgang die een torn-paper-rand bedoeld is om te maken. */
.wp-block-cover.alignfull + .wp-block-group.is-style-golfrand {
	margin-top: 0 !important;
}

/* Twee gekleurde secties op elkaar horen elkaar juist wél te raken: de
   onderrand van de bovenste ís de scheiding, en een strook paginakleur
   ertussen zou die scheiding verdubbelen. */
.wp-block-group.is-style-golfrand + .wp-block-group.is-style-golfrand,
.wp-block-group.is-style-golfrand-onder + .wp-block-group.is-style-golfrand {
	margin-top: 0 !important;
}

.wp-block-group.is-style-golfrand:has(+ .wp-block-group.is-style-golfrand),
.wp-block-group.is-style-golfrand:has(+ .wp-block-group.is-style-golfrand-onder) {
	margin-bottom: 0 !important;
}

.wp-block-group.is-style-golfrand::before,
.wp-block-group.is-style-golfrand::after,
.wp-block-group.is-style-golfrand-onder::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--edg-golf-hoogte);
	background-color: inherit;
	-webkit-mask-image: url("../images/golfrand.svg");
	mask-image: url("../images/golfrand.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

/* De golf ligt 1px óver de sectie heen. Precies op 100% laat de browser bij
   niet-hele pixelhoogtes een haarlijntje paginakleur tussen het vlak en zijn
   rand staan — een streepje wit dat er als een weergavefout uitziet. */
.wp-block-group.is-style-golfrand::before {
	bottom: calc(100% - 1px);
}

.wp-block-group.is-style-golfrand::after,
.wp-block-group.is-style-golfrand-onder::after {
	top: calc(100% - 1px);
	transform: scaleY(-1);
}

/* Staan er twee golfsecties onder elkaar, dan vormt de onderrand van de
   bovenste al de scheiding. De bovenrand van de onderste zou daar precies
   overheen vallen: twee golven in tegengestelde richting over elkaar, wat
   eruitziet als een weergavefout. */
.wp-block-group.is-style-golfrand + .wp-block-group.is-style-golfrand::before,
.wp-block-group.is-style-golfrand-onder + .wp-block-group.is-style-golfrand::before {
	content: none;
}

/* Golflijn als losse scheiding — voor twee secties op dezelfde kleur, waar
   een golvende rand niets te tonen heeft omdat er geen kleurverschil is. */
.wp-block-separator.is-style-golfje {
	border: 0;
	height: 0.9rem;
	max-width: 14rem;
	margin-inline: auto;
	opacity: 1;
	background-color: currentColor;
	-webkit-mask-image: url("../images/golflijn.svg");
	mask-image: url("../images/golflijn.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	color: var(--wp--preset--color--mos);
}

/* Een blok brengt vaak zijn eigen buitenmarge mee (een kolommenrij staat op
   var:preset|spacing|50). Binnen een gekleurde sectie telt die marge op bij de
   binnenmarge van de sectie zelf, en dan blijft er onderaan een leeg gekleurd
   vlak over van twee keer de sectieafstand. De sectie bepaalt de ruimte, het
   blok erbinnen niet. */
.wp-block-group.is-style-golfrand > :first-child,
.wp-block-group.is-style-golfrand-onder > :first-child {
	margin-top: 0 !important;
}

.wp-block-group.is-style-golfrand > :last-child,
.wp-block-group.is-style-golfrand-onder > :last-child {
	margin-bottom: 0 !important;
}

/* De golfrand is een gekleurd vlak dat tegen zijn buren aan ligt; de sectie
   zelf heeft dus zijn eigen lucht nodig, anders plakt de tekst aan de golf. */
.wp-block-group.is-style-golfrand:not([style*="padding"]),
.wp-block-group.is-style-golfrand-onder:not([style*="padding"]) {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------------------
   12. Uitklapmenu's in de balk
   Vier van de zes menu-items hebben nu onderliggende pagina's. WordPress
   rendert die submenu's wel, maar geeft ze de vormgeving van het standaard-
   thema: een wit blok met scherpe hoeken tegen de balk aan. Hieronder krijgen
   ze dezelfde kaartvorm als de rest van de site.
   --------------------------------------------------------------------------- */

.edg-kop .wp-block-navigation__submenu-container {
	min-width: 13rem;
	padding-block: 0.4rem;
	background-color: var(--wp--preset--color--basis);
	border: var(--edg-rand-zacht);
	border-radius: 6px;
	box-shadow: var(--wp--preset--shadow--zacht);
	/* Los van de balk, zodat het als een eigen kaartje leest en niet als een
	   uitgelopen menubalk. */
	margin-top: 0.4rem;
}

/* Dat gaatje van 0,4rem is muisgevoelig: het submenu blijft alleen open zolang
   de aanwijzer boven het menu-item of het kaartje staat, en de ruimte ertussen
   is geen van beide. Wie er in één beweging naartoe gaat, ziet het menu dus
   dichtklappen halverwege. Deze onzichtbare brug hoort bij het kaartje en
   overspant precies dat gat. */
.edg-kop .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 0.5rem;
}

.edg-kop .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--wp--custom--raakvlak, 44px);
	padding: 0.35rem 1rem;
	font-size: 1.2rem;
}

.edg-kop .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--blad);
}

/* Het grasgroene streepje hoort onder een kort label in de balk. In een
   uitklaplijst loopt het over de volle regelbreedte en leest het als een
   scheidingslijn die er niet hoort te staan. */
.edg-kop .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

.edg-kop .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--blad);
	font-weight: 700;
}

/* Een bovenliggend item is zelf ook een link (Over ons, De kamers, ...).
   Het pijltje ernaast opent het submenu; samen zijn ze één doel, dus mogen ze
   niet uit elkaar gedrukt worden. */
.edg-kop .wp-block-navigation-submenu__toggle {
	padding-inline: 0.15rem;
}

/* In het uitklapmenu op de telefoon staat alles onder elkaar. WordPress geeft
   de items daar de uitlijning van de menubalk mee — bij ons rechts — plus een
   min-breedte van 200px voor de onderliggende items. Het resultaat was een
   smalle kolom labels tegen de rechterrand, los van het item waar ze bij
   horen.

   De uitlijning wordt gerepareerd via de variabele die WordPress zelf
   uitleest, niet met een tegenregel per selector. Core zet die variabele op
   acht plaatsen in, en die achtervolgen met !important zou een lijst regels
   opleveren die bij elke WordPress-update opnieuw gecontroleerd moet worden. */
.edg-kop .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: stretch;
}

/* De maten van het onderliggende lijstje staan wél als vaste waarden in de
   core-CSS. Die regel telt vijf klassen, dus deze heeft er zes nodig om te
   winnen zonder !important. */
.edg-kop .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.has-child > .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	min-width: 0;
	gap: 0;
	padding: 0;
	margin: 0;
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

/* Iets kleiner en met een baanderdeurtje ervoor, zodat je ziet dat het bij het
   item erboven hoort en niet zelf een hoofdstuk is. De regel blijft wel 48px
   hoog: ook een onderliggend item moet met een duim te raken zijn. */
.edg-kop .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* Zonder deze regel telt de linkerinspringing bij de volle breedte op en
	   steekt de regel links buiten het lijstje uit. */
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.35rem 0 0.35rem 2.2rem;
	font-size: 1.15rem;
	color: var(--wp--preset--color--inkt);
	border-bottom: var(--edg-rand-zacht);
}

.edg-kop .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	left: 0.5rem;
	top: 50%;
	width: 0.8em;
	height: 0.95em;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--klei);
	-webkit-mask-image: url("../images/baanderdeur.svg");
	mask-image: url("../images/baanderdeur.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Het pijltje naast een bovenliggend item opent in de balk het uitklapmenu.
   In de volledige lijst staan de onderliggende items er al onder, dus wijst
   het nergens meer naar. */
.edg-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
.edg-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: none;
}

/* ---------------------------------------------------------------------------
   13. Diaprojectie
   Een reeks foto's die vanzelf doordraait. Zonder JavaScript blijft het een
   gewone galerij: alle foto's staan er dan gewoon onder elkaar, en niemand
   mist iets. Pas als het script draait wordt het een projectie.
   --------------------------------------------------------------------------- */

.edg-dia {
	position: relative;
}

/* De galerij is de projectie zelf en moet de volle breedte van het blok
   krijgen. Zonder deze regel valt hij terug op de contentbreedte van 42rem —
   die maat is bedoeld om regels tekst kort te houden, niet om een foto te
   verkleinen tot de helft van het vlak waar hij in staat. */
.edg-dia .edg-dia__spoel {
	max-width: none;
	width: 100%;
}

/* De klasse is-dia zet het script erop zodra het de bediening heeft gebouwd.
   Alles hieronder hangt daaraan: zonder script geen stapel, geen verborgen
   foto's, geen knoppen die nergens op reageren. */
.edg-dia.is-dia .edg-dia__spoel {
	display: grid;
	gap: 0;
	margin: 0;
}

.edg-dia.is-dia .edg-dia__spoel .wp-block-image,
.edg-dia.is-dia .edg-dia__spoel figure.wp-block-image {
	/* Alle dia's op dezelfde rastercel: ze liggen op elkaar in plaats van
	   naast elkaar, en kunnen dus in en uit elkaar vloeien. */
	grid-area: 1 / 1;
	margin: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 900ms ease;
}

.edg-dia.is-dia .edg-dia__spoel .wp-block-image.is-zichtbaar {
	opacity: 1;
}

.edg-dia.is-dia .edg-dia__spoel img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
	background-color: var(--wp--preset--color--linnen);
}

/* --- Staande foto's helemaal laten zien ---

   diaprojectie.js zet is-heel op een dia met een staande foto (of op alle
   dia's, met de galerijstijl "Hele foto's tonen"). De foto krijgt dan zijn
   eigen verhouding in het vlak, en erachter ligt een wazige, verzachte kopie
   van dezelfde foto — geen lege balken, en geen extra download: het is
   hetzelfde bestand.

   Het :not(#individual-image) is overgenomen van WordPress zelf. Die zet
   object-fit: cover op elke foto in een bijgesneden galerij met een ID in de
   selector; zonder dat stukje wint die het altijd. */
.edg-dia.is-dia .edg-dia__spoel figure.wp-block-image.is-heel {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background-color: var(--wp--preset--color--linnen);
}

.edg-dia.is-dia .edg-dia__spoel figure.wp-block-image.is-heel::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: var(--edg-achter) center / cover no-repeat;
	filter: blur(28px) saturate(0.85);
	opacity: 0.6;
}

.edg-dia.is-dia .edg-dia__spoel figure.wp-block-image.is-heel:not(#individual-image) img {
	position: relative;
	object-fit: contain;
	background-color: transparent;
	border-radius: 0;
}

/* Bediening: stipjes onder de foto, pijlen erover. Alles minstens 44px, want
   dit wordt vooral op een telefoon aangetikt (WCAG 2.2 — 2.5.8). */
.edg-dia__bediening {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin-top: 0.9rem;
}

.edg-dia__stip {
	width: var(--wp--custom--raakvlak, 44px);
	height: var(--wp--custom--raakvlak, 44px);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.edg-dia__stip::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--inkt) 35%, transparent);
	transition: background-color var(--edg-overgang), transform var(--edg-overgang);
}

.edg-dia__stip[aria-current="true"]::before {
	background-color: var(--wp--preset--color--klei);
	transform: scale(1.45);
}

.edg-dia__pijl {
	position: absolute;
	top: calc(50% - 1.5rem);
	transform: translateY(-50%);
	width: var(--wp--custom--raakvlak, 44px);
	height: var(--wp--custom--raakvlak, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--groen);
	background-color: color-mix(in srgb, var(--wp--preset--color--basis) 88%, transparent);
	box-shadow: var(--wp--preset--shadow--zacht);
	transition: background-color var(--edg-overgang);
}

.edg-dia__pijl:hover {
	background-color: var(--wp--preset--color--basis);
}

.edg-dia__pijl--vorige {
	left: 0.75rem;
}

.edg-dia__pijl--volgende {
	right: 0.75rem;
}

.edg-dia__bijschrift {
	margin: 0.5rem auto 0;
	max-width: none;
	text-align: center;
	color: color-mix(in srgb, var(--wp--preset--color--inkt) 74%, transparent);
	font-size: var(--wp--preset--font-size--klein);
	font-style: italic;
	min-height: 1.4em;
}

/* Bijschriften staan bij een diaprojectie standaard uit: de foto's spreken
   voor zich, en een regel die om de vijf seconden verspringt leest onrustig.
   Wil je ze toch, kies dan op de galerij de blokstijl "Met bijschriften".

   Op de site regelt diaprojectie.js dit al; deze regels zijn er voor de
   editor, zodat je daar meteen ziet wat er op de site komt te staan. De
   alt-tekst van de foto blijft altijd staan — die is voor schermlezers en
   voor Google, niet voor het oog. */
.edg-dia figcaption,
.edg-dia .edg-dia__bijschrift {
	display: none;
}

/* :not([hidden]) omdat het script de losse bijschriften naar het gedeelde vak
   eronder verhuist; die mogen niet alsnog een tweede keer opduiken. */
.edg-dia .edg-dia__spoel.is-style-met-bijschriften figcaption:not( [hidden] ),
.edg-dia .edg-dia__spoel.is-style-met-bijschriften ~ .edg-dia__bijschrift:not( [hidden] ) {
	display: block;
}

/* Wie beweging heeft uitgezet, krijgt geen doorlopende projectie maar een
   galerij die hij zelf doorklikt. Sectie 1 zet de overgangstijd al op nul;
   het automatisch doordraaien zet het script uit. */

/* ---------------------------------------------------------------------------
   14. Doorkliktegel naar de beschikbaarheid
   De kalender staat alleen nog op /beschikbaarheid/ en op de kamerpagina's.
   Overal waar hij eerst stond komt deze tegel: dezelfde belofte, één klik
   verderop. Een pagina die met een kalender opent, vraagt meteen om een
   beslissing; dat is precies wat een site die rust uitstraalt niet moet doen.
   --------------------------------------------------------------------------- */

.edg-tegel {
	display: block;
	position: relative;
	padding: var(--wp--preset--spacing--40);
	border: var(--edg-rand);
	border-radius: 8px;
	background-color: var(--wp--preset--color--wit);
	box-shadow: var(--wp--preset--shadow--zacht);
	text-decoration: none;
	transition: box-shadow var(--edg-overgang), transform var(--edg-overgang),
		border-color var(--edg-overgang);
}

.edg-tegel:hover,
.edg-tegel:focus-visible {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--mos);
	box-shadow: var(--wp--preset--shadow--diep);
}

/* De hele tegel is één link, dus de kop en de tekst erbinnen mogen niet ook
   nog eens als losse links ogen. */
.edg-tegel :is(h2, h3, h4) {
	margin-top: 0;
	color: var(--wp--preset--color--groen);
}

.edg-tegel p {
	color: var(--wp--preset--color--inkt);
	margin-bottom: 0;
	/* De tegel loopt over de volle breedte, de zin erin niet: op 76rem zou dat
	   een regel van ruim 130 tekens worden, twee keer wat leesbaar is. */
	max-width: 60ch;
}

.edg-tegel__pijl {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--wp--preset--spacing--20);
	font-weight: 600;
	color: var(--wp--preset--color--klei);
}

.edg-tegel:hover .edg-tegel__pijl {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   15. Golvende bovenrand van de voet
   De voet sluit met dezelfde golf aan als de secties erboven, zodat de pagina
   niet eindigt met een rechte streep maar uitloopt. Hij plakt daarvoor tegen
   de laatste sectie aan: de buitenmarge is uit de sjabloon gehaald en de
   lucht zit nu in de binnenmarge, waar hij niet met een golf kan botsen.
   --------------------------------------------------------------------------- */

.edg-voet {
	position: relative;
	z-index: 1;
}

/* WordPress zet tussen de blokken op het hoogste niveau standaard een gat ter
   grootte van de blokafstand — ook tussen de inhoud en de voet. De golf hangt
   daar dan bovenin, met een streepje paginakleur eronder, en dat leest als een
   naad in plaats van als een rand. De lucht boven de voettekst zit al in zijn
   eigen binnenmarge. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Dezelfde blokafstand zat ook tussen de kop en de inhoud. Op een pagina die
   met een schermbrede foto begint, gaf dat een streepje paginakleur tussen de
   plakkende menubalk en die foto — het leest als een naad, niet als ruimte.
   Sjablonen die wél lucht onder de kop willen (een gewone pagina, een
   kamerpagina) zetten die marge zelf op <main>, en die inline-waarde wint
   hiervan. Alleen de sjablonen die met een hero beginnen worden dus geraakt. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

.edg-voet::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* Zie sectie 11: 1px overlap tegen het haarlijntje. */
	bottom: calc(100% - 1px);
	height: var(--edg-golf-hoogte);
	background-color: inherit;
	-webkit-mask-image: url("../images/golfrand.svg");
	mask-image: url("../images/golfrand.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

/* De laatste sectie van een pagina laat zijn onderrand vallen: de voet vormt
   de scheiding al. Zonder deze regel liggen er twee golven in tegengestelde
   richting over elkaar, en dat leest als een weergavefout in plaats van als
   een rand. */
.wp-block-post-content > :last-child.is-style-golfrand::after {
	content: none;
}

/* De golf hangt over de laatste centimeters van de pagina heen. Een sectie
   over de volle breedte sluit daar bewust op aan — de golf ís dan de
   scheiding. Maar een gewoon blok zou er half achter verdwijnen: op de
   kamerpagina liep "De andere kamer" onder de voet door, en op Over ons de
   beschikbaarheidstegel. Zo'n blok houdt daarom minstens de hoogte van de
   golf vrij, en in de praktijk de ruimte van een sectie-einde. */
.wp-block-post-content > :last-child:not(.alignfull),
main > :last-child:not(.alignfull) {
	margin-bottom: max(var(--edg-golf-hoogte), var(--wp--preset--spacing--50));
}

/* In de editor staat de voet als los onderdeel op een witte achtergrond; een
   golf die daar over de rand van het kader hangt, ziet eruit alsof er iets
   is misgegaan met de opmaak. */
.editor-styles-wrapper .edg-voet::before {
	display: none;
}

/* ---------------------------------------------------------------------------
   16. Kopbalk op nevelblauw
   De balk is een eigen vlak in plaats van een doorschijnende laag over de
   pagina. Dat geeft de site meteen een bovenrand, en het scheelt dat de
   menu-items niet over een wisselende ondergrond hoeven te lezen zodra je
   langs een gekleurde sectie scrollt.
   --------------------------------------------------------------------------- */

.edg-kop .wp-block-site-title a,
.edg-kop .wp-block-site-tagline,
.edg-kop .wp-block-navigation a {
	color: var(--wp--preset--color--groen);
}

/* De ondertitel mag lichter, maar niet zó licht dat hij op nevelblauw onder
   de 4,5:1 van WCAG 1.4.3 zakt — vandaar mosgroen en niet een doorzichtige
   variant van de tekstkleur. */
.edg-kop .wp-block-site-tagline {
	color: var(--wp--preset--color--mos);
}

/* Het streepje onder een menu-item was klei op room; op nevelblauw heeft die
   kleur te weinig verschil. Leisteen tekent scherper af. */
.edg-kop .wp-block-navigation:not(.has-modal-open) .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--groen);
}

/* Het uitklapmenu op de telefoon dekt het hele scherm en staat dus niet meer
   op de balk maar op de paginakleur. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--basis) !important;
}

/* ---------------------------------------------------------------------------
   17. Kaartje met de ligging (contactpagina)
   --------------------------------------------------------------------------- */

/* Het kaartje komt van OpenStreetMap en niet van Google Maps. Dat is een
   bewuste keuze in dezelfde lijn als de zelf gehoste lettertypes: een Google-
   kaart laadt scripts en zet cookies bij iederéén die de contactpagina opent,
   ook wie alleen even een mailadres zocht. OpenStreetMap doet dat niet, dus
   blijft de site zonder cookiemelding werken.

   Routeplannen doet Google beter; daarvoor staat de knop eronder. Die volgt
   iemand pas als hij er zelf op klikt, en dat is precies het verschil. */

.edg-kaart {
	margin-block: var(--wp--preset--spacing--40);
}

.edg-kaart__venster {
	position: relative;
	overflow: hidden;
	border: var(--edg-rand-zacht);
	border-radius: 6px;
	box-shadow: var(--wp--preset--shadow--zacht);

	/* Laag en breed: het gaat om "waar ligt dit ongeveer", niet om een
	   plattegrond waar je in gaat zitten zoeken. Op een telefoon mag hij
	   wat vierkanter, anders blijft er een streepje kaart over.

	   De verhouding komt uit de shortcode ([edg_kaart hoogte="4/3"]); staat
	   daar niets, dan is 16/9 de standaard. */
	aspect-ratio: var(--edg-kaart-verhouding, 16 / 9);
	background-color: var(--wp--preset--color--nevel);
}

@media ( max-width: 600px ) {
	.edg-kaart__venster {
		aspect-ratio: 4 / 3;
	}
}

.edg-kaart__venster iframe,
.edg-kaart__venster noscript {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Het regeltje onder de kaart: adres links, knop rechts, en onder elkaar
   zodra dat niet meer naast elkaar past. */
.edg-kaart__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	margin-top: 0.9rem;
}

.edg-kaart__adres {
	margin: 0;
	font-style: normal;
	line-height: 1.5;
}

.edg-kaart__adres strong {
	display: block;
	font-weight: 600;
}

.edg-kaart__route {
	display: inline-block;
	padding: 0.6em 1.4em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--groen);
	color: var(--wp--preset--color--basis);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	white-space: nowrap;
}

.edg-kaart__route:hover,
.edg-kaart__route:focus-visible {
	background-color: var(--wp--preset--color--mos);
	color: var(--wp--preset--color--basis);
}

/* Bronvermelding onder de kaart. OpenStreetMap vraagt hierom in zijn
   licentie (ODbL), dus dit regeltje is niet vrijblijvend — maar het hoeft
   ook niet te schreeuwen. */
.edg-kaart__bron {
	margin: 0.5rem 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--inkt) 60%, transparent);
}

.edg-kaart__bron a {
	color: inherit;
}