/**
 * Stijlen voor de kalender, het aanvraagformulier en de kamerkaarten.
 * De kleuren komen uit het thema (theme.json); staat er een ander thema aan,
 * dan vallen we terug op rustige, neutrale waarden.
 */

.edgr-beschikbaarheid,
.edgr-kamers,
.edgr-contact {
	--edgr-groen: var(--wp--preset--color--groen, #2f4a35);
	--edgr-mos: var(--wp--preset--color--mos, #5c7a52);
	--edgr-blad: var(--wp--preset--color--blad, #dde6d3);
	--edgr-linnen: var(--wp--preset--color--linnen, #ebe4d5);
	--edgr-basis: var(--wp--preset--color--basis, #f7f4ec);
	--edgr-klei: var(--wp--preset--color--klei, #b4713f);
	--edgr-inkt: var(--wp--preset--color--inkt, #2b2e27);
	/* Terracotta is als vlak mooi, maar te licht om als lijntje of als tekst
	   genoeg contrast te halen (2,8:1). Een scheut inkt erbij brengt hem op
	   3,9:1 tegen het lichte vlak en 5:1 tegen de paginakleur. */
	--edgr-klei-diep: color-mix(in srgb, var(--edgr-klei) 72%, var(--edgr-inkt));
	--edgr-klei-licht: color-mix(in srgb, var(--edgr-klei) 22%, var(--edgr-basis));
	--edgr-rand: 1px solid color-mix(in srgb, var(--edgr-groen) 26%, transparent);
	/* Een rand om een invulveld is functionele informatie, geen versiering:
	   die moet 3:1 halen tegen de achtergrond (WCAG 1.4.11 Non-text Contrast).
	   De zachte rand hierboven haalt maar 1,5:1 en is dus alleen geschikt
	   voor decoratieve kaders. */
	--edgr-rand-veld: 1px solid color-mix(in srgb, var(--edgr-groen) 68%, transparent);
	--edgr-radius: 6px;
	/* Minimale maat voor iets dat je aantikt. WCAG 2.2 (2.5.8) vraagt 24px;
	   44px is de maat van Apple/Google en past bij een vingertop van 16–20mm. */
	--edgr-raakvlak: 44px;
}

/* Blokthema's brengen geen box-sizing-reset mee, en formuliervelden erven
   die eigenschap niet van hun omgeving. Zonder deze regel telt de browser
   bij een veld met `width: 100%` de padding (2 × 0,8rem) en de randen er nog
   bovenop: het veld werd 626px in een kolom van 598px en stak dus 28px over
   de buurkolom heen — precies het beeld van velden die over elkaar vallen.
   Alleen binnen onze eigen blokken, om niets van het thema te raken. */
.edgr-beschikbaarheid *,
.edgr-beschikbaarheid *::before,
.edgr-beschikbaarheid *::after,
.edgr-kamers *,
.edgr-contact * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Welke kamer? — boven de kalender

   De kalender toont de vrije nachten van één kamer tegelijk. Stond de keuze
   onderin bij "Je gegevens", dan keek je naar een kalender zonder te weten van
   wie hij was — en dat was precies de klacht. De keuze staat nu bovenaan, als
   twee tabbladen die je niet over het hoofd ziet, met eronder in woorden welke
   kamer je nu voor je hebt.
   --------------------------------------------------------------------------- */

.edgr-kamerkiezer {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	/* "Nog een aanvraag doen" scrollt hierheen; niet tegen de rand aan. */
	scroll-margin-top: 2rem;
}

.edgr-kamerkiezer__vraag {
	padding: 0;
	margin-bottom: 0.55rem;
	font-weight: 600;
	color: var(--edgr-groen);
}

.edgr-kamerkiezer__opties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Het rondje zelf verdwijnt, maar blijft bereikbaar voor toetsenbord en
   schermlezer: het label eronder is de knop die je ziet. */
.edgr-kamerkiezer__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.edgr-kamerkiezer__optie {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--edgr-raakvlak);
	padding: 0.5em 1.4em;
	border: var(--edgr-rand-veld);
	border-radius: 999px;
	background-color: var(--edgr-basis);
	color: var(--edgr-groen);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.edgr-kamerkiezer__optie:hover {
	background-color: var(--edgr-linnen);
}

/* De gekozen kamer is omgekeerd ingekleurd. Kleur alleen is niet genoeg
   (WCAG 1.4.1), dus de rand wordt tegelijk donkerder en dikker. */
.edgr-kamerkiezer__radio:checked + .edgr-kamerkiezer__optie {
	background-color: var(--edgr-groen);
	border-color: var(--edgr-groen);
	box-shadow: inset 0 0 0 1px var(--edgr-groen);
	color: var(--edgr-basis);
}

.edgr-kamerkiezer__radio:focus-visible + .edgr-kamerkiezer__optie {
	outline: 3px solid var(--edgr-klei);
	outline-offset: 2px;
}

.edgr-kamerkiezer__uitleg {
	margin: 0.6rem 0 0;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--edgr-inkt) 78%, transparent);
}

.edgr-kamerkiezer__uitleg strong {
	color: var(--edgr-groen);
}

/* ---------------------------------------------------------------------------
   Kalender
   --------------------------------------------------------------------------- */

.edgr-kalender {
	background-color: var(--edgr-basis);
	border: var(--edgr-rand);
	border-radius: var(--edgr-radius);
	padding: clamp(1rem, 2.5vw, 1.6rem);
}

.edgr-kalender__balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

/* Dit is de instructie ("Kies je aankomstdag" / "Kies je vertrekdag") en
   dus geen bijschrift: hij mag gelezen worden. */
.edgr-kalender__titel {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--edgr-groen);
	text-align: center;
}

.edgr-kalender__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: var(--edgr-rand-veld);
	border-radius: 999px;
	width: var(--edgr-raakvlak);
	height: var(--edgr-raakvlak);
	font-size: 1.1rem;
	line-height: 1;
	color: var(--edgr-groen);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.edgr-kalender__nav:hover {
	background-color: var(--edgr-groen);
	color: var(--edgr-basis);
	border-color: var(--edgr-groen);
}

.edgr-kalender__nav:disabled {
	opacity: 0.4;
	cursor: default;
}

.edgr-kalender__maanden {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.edgr-maand__kop {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--edgr-groen);
}

.edgr-maand__tabel {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

/* Was 0,72rem (11,5px) op 55% inkt — dat is 3,3:1 en te klein om vlot te
   lezen. Nu 0,8rem in mosgroen: 4,9:1. */
.edgr-maand__tabel th {
	padding-bottom: 0.45rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--edgr-mos);
	border: 0;
}

.edgr-maand__tabel td {
	padding: 1px;
	border: 0;
	text-align: center;
}

/* De dagcijfers zijn het belangrijkste wat er op deze site te lezen valt.
   Ze stonden op 0,9rem in inkt-op-35%: ongeveer 2:1 contrast, ver onder de
   4,5:1 die WCAG 1.4.3 vraagt. Je kón simpelweg niet zien welke dag bezet
   was. Elke stand hieronder haalt nu minstens 4,9:1.

   De staten verschillen bovendien in méér dan kleur alleen — vulling, vorm
   en (bij bezet) een streep door het cijfer — zodat de kalender ook klopt
   voor wie kleuren anders ziet (WCAG 1.4.1 Use of Color). */
.edgr-dag {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 2.4rem;
	border: 1px solid transparent;
	border-radius: 5px;
	background-color: var(--edgr-blad);
	color: var(--edgr-groen);
	font-size: 0.95rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

/* Vrij: gevuld bladgroen met donkergroen cijfer — 7,6:1. */
.edgr-dag:hover:not(:disabled):not(.is-bezet):not(.is-geen-aankomst):not(.is-geen-vertrek) {
	background-color: var(--edgr-mos);
	color: var(--edgr-basis);
	box-shadow: inset 0 0 0 2px var(--edgr-groen);
}

/* Bezet: warm grijs in plaats van een leeg vak met een randje. Het randje
   trok juist de aandacht naar de dagen die je niét kunt kiezen, en het lege
   vak liet vrij en bezet te veel op elkaar lijken. Nu draait het onderscheid
   om kleurtoon — groen = kan, zandgrijs = kan niet — en blijft het cijfer
   leesbaar op 4,9:1. */
.edgr-dag.is-bezet {
	background-color: var(--edgr-linnen);
	border-color: transparent;
	color: color-mix(in srgb, var(--edgr-inkt) 72%, transparent);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	cursor: not-allowed;
}

/* Wel vrij, maar geen wisseldag: je kunt hier niet aankomen of vertrekken. */
.edgr-dag.is-geen-aankomst,
.edgr-dag.is-geen-vertrek {
	background-color: var(--edgr-blad);
	background-image: repeating-linear-gradient(
		-45deg,
		transparent 0 5px,
		color-mix(in srgb, var(--edgr-groen) 34%, transparent) 5px 7px
	);
	color: var(--edgr-groen);
	cursor: not-allowed;
}

/* Aangevraagd: er ligt al een aanvraag op deze nacht, maar goedgekeurd is er
   nog niets. De dag blijft dus gewoon te kiezen — de terracotta tint is een
   waarschuwing, geen slot. Kleur alleen mag die boodschap niet dragen (WCAG
   1.4.1), vandaar het stipje rechtsboven; het cijfer haalt 6,9:1 en het
   randje 3,9:1 tegen het vlak. */
.edgr-dag.is-aangevraagd {
	background-color: var(--edgr-klei-licht);
	background-image: radial-gradient(
		circle at calc(100% - 5px) 5px,
		var(--edgr-klei-diep) 0 3px,
		transparent 3px
	);
	border-color: var(--edgr-klei-diep);
	color: var(--edgr-groen);
}

/* Voorbij: geen keuze meer, dus bewust rustig — maar niet onleesbaar.
   WCAG rekent uitgeschakelde knoppen niet mee voor contrast, maar 3,3:1
   kost niets extra en houdt de datum gewoon te lezen. */
.edgr-dag.is-verleden {
	background-color: transparent;
	color: color-mix(in srgb, var(--edgr-inkt) 55%, transparent);
	cursor: default;
}

/* Aankomst en vertrek zijn de ankers van je keuze: donkergroen, vet, en met
   een afgeronde kop zodat de reeks als één balk leest. */
.edgr-dag.is-aankomst,
.edgr-dag.is-vertrek {
	background-color: var(--edgr-groen);
	color: var(--edgr-basis);
	font-weight: 700;
	box-shadow: inset 0 0 0 2px var(--edgr-basis), 0 0 0 1px var(--edgr-groen);
}

.edgr-dag.is-tussen {
	background-color: var(--edgr-mos);
	color: var(--edgr-basis);
	font-weight: 600;
}

/* De focusring valt binnen het vakje: buiten het vakje zou hij onder de
   buurdag verdwijnen, want de dagen staan 1px uit elkaar. */
.edgr-dag:focus-visible {
	outline: 3px solid var(--edgr-klei);
	outline-offset: -3px;
	box-shadow: 0 0 0 2px var(--edgr-basis);
}

/* Hier verschijnt "Gekozen: 12 september tot 15 september (3 nachten)".
   Dat is de bevestiging van je keuze en het antwoord op "heb ik goed
   geklikt?" — dus even zwaar gezet als de rest van de kalenderteksten. */
.edgr-kalender__melding,
.edgr-kalender__laden {
	margin: 1rem 0 0;
	font-size: 1rem;
	color: var(--edgr-groen);
	min-height: 1.5em;
}

/* De waarschuwing onder de kalender: er ligt al een aanvraag op de dagen die
   je net koos. Terracotta, zodat je hem herkent van de dagen zelf, en zwaar
   genoeg gezet om gelezen te worden (5:1). */
.edgr-kalender__aangevraagd {
	margin: 0.4rem 0 0;
	font-size: 0.95rem;
	color: var(--edgr-klei-diep);
}

/* De legenda is de sleutel bij de kalender; die hoort niet in de kleine
   lettertjes te staan. Elk blokje krijgt bovendien een eigen randje, zodat
   ook de lichte vlakken als vorm te onderscheiden zijn (WCAG 1.4.11). */
.edgr-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin: 0.9rem 0 0;
	font-size: 0.92rem;
	color: color-mix(in srgb, var(--edgr-inkt) 76%, transparent);
}

.edgr-legenda__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.edgr-stip {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 4px;
	display: inline-block;
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edgr-inkt) 45%, transparent);
}

.edgr-stip--vrij {
	background-color: var(--edgr-blad);
}

.edgr-stip--bezet {
	background-color: var(--edgr-linnen);
	/* Hetzelfde streepje als in de kalender, zodat het blokje de dagstand
	   letterlijk naspeelt in plaats van hem alleen te benoemen. */
	background-image: linear-gradient(
		to bottom,
		transparent calc(50% - 0.75px),
		color-mix(in srgb, var(--edgr-inkt) 72%, transparent) calc(50% - 0.75px),
		color-mix(in srgb, var(--edgr-inkt) 72%, transparent) calc(50% + 0.75px),
		transparent calc(50% + 0.75px)
	);
}

/* Hetzelfde vlak met hetzelfde stipje als een aangevraagde dag. */
.edgr-stip--aangevraagd {
	background-color: var(--edgr-klei-licht);
	background-image: radial-gradient(
		circle at calc(100% - 4px) 4px,
		var(--edgr-klei-diep) 0 2.5px,
		transparent 2.5px
	);
}

.edgr-stip--beperkt {
	background-color: var(--edgr-blad);
	background-image: repeating-linear-gradient(
		-45deg,
		transparent 0 3px,
		color-mix(in srgb, var(--edgr-groen) 44%, transparent) 3px 5px
	);
}

.edgr-stip--gekozen {
	background-color: var(--edgr-groen);
}

/* ---------------------------------------------------------------------------
   Formulier
   --------------------------------------------------------------------------- */

/* De kalender en het formulier zijn twee stappen: eerst kiezen wanneer, dan
   vertellen wie je bent. Een lijn en wat lucht ertussen maken dat zichtbaar,
   zodat het geheel niet als één lange muur van vakjes leest. */
.edgr-formulier {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: var(--edgr-rand);
}

.edgr-formulier__kop {
	margin-bottom: 1.5rem;
}

.edgr-formulier__titel {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--amatic, "Bradley Hand", cursive);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--edgr-groen);
}

.edgr-formulier__sleutel {
	margin: 0;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--edgr-inkt) 78%, transparent);
}

/* De afstand tússen twee velden moet duidelijk groter zijn dan de afstand
   tussen een label en zijn eigen veld. Anders zweeft een label precies in het
   midden en lees je het bij het verkeerde vak — de wet van nabijheid.
   Was 1rem tegen 0,3rem, maar door de regelhoogte van 1,7 uit het thema at
   het label dat verschil grotendeels op. Nu 1,75rem tegen 0,35rem, met een
   strakke regelhoogte op het label zelf. */
/* 18rem in plaats van 16rem: bij een tabletbreedte paste er anders een derde
   kolom bij, en werd een datumveld zo smal dat "dd/mm/yyyy" tegen het
   kalendericoon aan kwam te staan. Nu blijft het netjes bij twee. */
/* De min() erbij: op een smal scherm (320px) is er na de paginakantlijnen
   nog 264px over, en een harde ondergrens van 18rem (288px) maakte de kolom
   dan bréder dan het vak waar hij in staat — het formulier liep zijn eigen
   rechtermarge in. Onder de 18rem volgt de kolom nu gewoon de beschikbare
   breedte. */
.edgr-velden {
	display: grid;
	gap: 1.75rem 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

@media (min-width: 60rem) {
	.edgr-velden {
		grid-template-columns: repeat(2, 1fr);
	}
}

.edgr-veld {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.edgr-veld--breed {
	grid-column: 1 / -1;
}

.edgr-veld label {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--edgr-groen);
}

.edgr-veld input,
.edgr-veld select,
.edgr-veld textarea {
	width: 100%;
	min-height: var(--edgr-raakvlak);
	padding: 0.6rem 0.8rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--edgr-inkt);
	background-color: #fff;
	border: var(--edgr-rand-veld);
	border-radius: 4px;
}

.edgr-veld textarea {
	line-height: 1.6;
	padding-block: 0.7rem;
}

/* Elk veld vult zijn eigen vak in het raster.
   Hiervóór had elk veldtype zijn eigen maximumbreedte — een datum 13rem, een
   aantal 7rem, een naam 26rem — met het idee dat de breedte iets zegt over wat
   er in past. Op één kolom werkt dat, maar in twee kolommen naast elkaar
   eindigde elke rij op een andere plek: links een naamveld tot de kolomrand,
   rechts een datumveld dat halverwege ophield. Een formulier leest als een
   lijst, en een lijst met een rafelige rechterkant leest als kapot.
   De kolombreedte begrenst nu de velden, niet het type. */
.edgr-veld input,
.edgr-veld select,
.edgr-veld textarea {
	max-width: 100%;
}

/* Ook "Aantal personen" vult zijn kolom, al staat er maar één cijfer in. Een
   smal vakje daar zou de enige rij zijn die niet op de kolomrand eindigt, en
   dat valt meer op dan een ruim vak. Het bericht en de kamerkeuze lopen over
   beide kolommen; die twee zijn de enige die van het raster afwijken. */
.edgr-veld--breed {
	grid-column: 1 / -1;
}

.edgr-veld--breed input,
.edgr-veld--breed textarea {
	width: 100%;
}

/* Een veld dat de focus heeft, laat dat met twee signalen zien: een ring én
   een dikkere rand. Kleur alleen is niet genoeg (WCAG 1.4.1). */
.edgr-veld input:focus-visible,
.edgr-veld select:focus-visible,
.edgr-veld textarea:focus-visible {
	outline: 3px solid var(--edgr-klei);
	outline-offset: 1px;
	border-color: var(--edgr-groen);
}

/* Verplicht is verplicht: dat hoort zichtbaar te zijn vóór je op versturen
   drukt, niet pas in de foutmelding erna. */
.edgr-veld label .edgr-verplicht {
	color: var(--edgr-klei);
	font-weight: 700;
	margin-left: 0.15em;
}

.edgr-veld label .edgr-optioneel {
	color: color-mix(in srgb, var(--edgr-inkt) 68%, transparent);
	font-weight: 400;
}

.edgr-veld--vinkje label {
	flex-direction: row;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	color: var(--edgr-inkt);
}

.edgr-veld--vinkje input {
	width: auto;
}

.edgr-honing {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* "Dit is een aanvraag, nog geen boeking." Dat is precies het zinnetje dat
   twijfel wegneemt vlak voor de knop — te belangrijk voor grijze kleine
   letters. Iets groter, duidelijk leesbaar, en pal boven de knop. */
.edgr-uitleg {
	margin: 1.5rem 0 0;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--edgr-inkt) 78%, transparent);
}

.edgr-versturen {
	margin: 0.75rem 0 0;
}

.edgr-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--edgr-raakvlak);
	padding: 0.7em 1.8em;
	border: 1px solid var(--edgr-groen);
	border-radius: 999px;
	background-color: var(--edgr-groen);
	color: var(--edgr-basis);
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.edgr-knop:hover:not(:disabled) {
	background-color: var(--edgr-mos);
	border-color: var(--edgr-mos);
	color: var(--edgr-basis);
}

.edgr-knop:active:not(:disabled) {
	transform: translateY(1px);
}

.edgr-knop:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* De lichte en omlijnde knoppen zijn gemaakt voor het donkergroene
   contactblok. Maar hetzelfde blok staat ook gewoon op de contactpágina, en
   die heeft een romen achtergrond — daar was een romen knop met een romen
   rand letterlijk onzichtbaar: alleen de tekst bleef over. De knoppen gaan
   daarom uit van een lichte achtergrond, en draaien pas om zodra ze
   binnen een donkere sectie staan. */
.edgr-knop--licht {
	background-color: var(--edgr-groen);
	color: var(--edgr-basis);
	border-color: var(--edgr-groen);
}

.edgr-knop--lijn {
	background-color: transparent;
	color: var(--edgr-groen);
	border-color: currentColor;
	border-width: 1.5px;
}

.edgr-knop--lijn:hover:not(:disabled) {
	background-color: var(--edgr-groen);
	border-color: var(--edgr-groen);
	color: var(--edgr-basis);
}

/* Binnen een donkere sectie klapt het contrast om. */
:is(.has-groen-background-color, .has-inkt-background-color, .has-mos-background-color) {
	& .edgr-knop--licht {
		background-color: var(--edgr-basis);
		color: var(--edgr-groen);
		border-color: var(--edgr-basis);
	}

	& .edgr-knop--licht:hover:not(:disabled) {
		background-color: var(--edgr-blad);
		border-color: var(--edgr-blad);
		color: var(--edgr-groen);
	}

	& .edgr-knop--lijn {
		color: var(--edgr-basis);
	}

	& .edgr-knop--lijn:hover:not(:disabled) {
		background-color: var(--edgr-basis);
		border-color: var(--edgr-basis);
		color: var(--edgr-groen);
	}
}

.edgr-antwoord:empty {
	display: none;
}

/* Na een aanvraag zet kalender.js de velden op hidden. Maar .edgr-velden
   heeft display: grid, en dat wint het van het hidden-attribuut — de velden
   bleven dus gewoon staan onder het bedankje. */
.edgr-beschikbaarheid [hidden] {
	display: none !important;
}

.edgr-antwoord:focus {
	outline: none;
}

.edgr-opnieuw {
	margin: 1rem 0 0;
}

.edgr-melding {
	margin: 1rem 0 0;
	padding: 0.9rem 1.1rem;
	border-radius: 4px;
	border-left: 3px solid var(--edgr-mos);
	background-color: var(--edgr-blad);
	color: var(--edgr-groen);
	font-size: 0.95rem;
}

.edgr-melding--fout {
	border-left-color: var(--edgr-klei);
	background-color: color-mix(in srgb, var(--edgr-klei) 12%, #fff);
	color: #7a3f18;
}

.edgr-anders {
	margin-top: 1rem;
	font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Fotoreeks bij een kamer
   --------------------------------------------------------------------------- */

.edgr-galerij {
	--edgr-galerij-verhouding: 4/3;
}

.edgr-galerij__hoofd {
	margin: 0;
	position: relative;
}

.edgr-galerij__pijl {
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: rgba(247, 244, 236, 0.85);
	color: var(--edgr-groen, #2F4A35);
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	transition: background 160ms ease;
}

.edgr-galerij__pijl:hover,
.edgr-galerij__pijl:focus-visible {
	background: rgba(247, 244, 236, 1);
}

.edgr-galerij__pijl--terug {
	left: 0.75rem;
}

.edgr-galerij__pijl--verder {
	right: 0.75rem;
}

/* height:auto is hier geen opsmuk maar noodzaak. WordPress zet width- én
   height-attributen op elke <img> (goed tegen verspringende pagina's), en
   zodra beide maten vaststaan doet de browser niets meer met aspect-ratio.
   Pas als de hoogte weer los is, mag de verhouding hem bepalen. */
.edgr-galerij__hoofd img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--edgr-galerij-verhouding);
	object-fit: cover;
	display: block;
	border-radius: var(--edgr-radius);
	background-color: var(--edgr-linnen);
	transition: opacity 160ms ease;
}

/* Een staande foto (of elke foto, bij "Hele foto's tonen") in zijn eigen
   verhouding, met een wazige kopie van zichzelf erachter in plaats van lege
   balken. De pijlen blijven daar bovenop. */
.edgr-galerij__hoofd.is-heel {
	overflow: hidden;
	border-radius: var(--edgr-radius, 6px);
	background-color: var(--edgr-linnen, #ebe4d5);
}

.edgr-galerij__hoofd.is-heel::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: var(--edgr-achter) center / cover no-repeat;
	filter: blur(24px) saturate(0.85);
	opacity: 0.6;
}

.edgr-galerij__hoofd.is-heel img {
	position: relative;
	object-fit: contain;
	background-color: transparent;
	border-radius: 0;
}

/* Even doorschemeren terwijl de grote versie inlaadt. */
.edgr-galerij__hoofd.is-wisselend img {
	opacity: 0.45;
}

.edgr-galerij__duimen {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}

.edgr-galerij__duim {
	margin: 0;
}

.edgr-galerij__duim button {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: 4px;
	/* De omlijning van de actieve foto valt buiten het vakje; zonder deze
	   ruimte zou hij onder de buurfoto verdwijnen. */
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 160ms ease, opacity 160ms ease;
}

.edgr-galerij__duim img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--edgr-galerij-verhouding);
	object-fit: cover;
	display: block;
	border-radius: 4px;
	background-color: var(--edgr-linnen);
}

.edgr-galerij__duim button:hover img {
	opacity: 0.82;
}

.edgr-galerij__duim.is-actief button {
	outline-color: var(--edgr-groen);
}

.edgr-galerij__duim button:focus-visible {
	outline: 3px solid var(--edgr-klei);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Kamerkaarten
   --------------------------------------------------------------------------- */

.edgr-kamers {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.25rem);
}

.edgr-kamers--kolommen-2 {
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

/* Blijft er maar één kaart over — zoals bij "De andere kamer", want er zijn
   er maar twee — dan zou auto-fit die kaart over de volle breedte uitrekken
   tot een banner. Een kaart hoort een kaart te blijven. */
.edgr-kamers > :only-child {
	max-width: 34rem;
}

.edgr-kamers--kolommen-3 {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.edgr-kamer {
	background-color: #fff;
	border: 1px solid color-mix(in srgb, var(--edgr-groen) 16%, transparent);
	border-radius: var(--edgr-radius);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--zacht, 0 12px 32px -12px rgba(40, 43, 49, 0.18));
	display: flex;
	flex-direction: column;
}

.edgr-kamer__foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.edgr-kamer__inhoud {
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.edgr-kamer__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--amatic, "Bradley Hand", cursive);
	font-size: 1.5rem;
	line-height: 1.2;
}

.edgr-kamer__titel a {
	color: var(--edgr-groen);
	text-decoration: none;
}

.edgr-kamer__titel a:hover {
	text-decoration: underline;
}

.edgr-kamer__meta {
	margin: 0;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--edgr-mos);
}

.edgr-kamer__tekst {
	margin: 0;
}

.edgr-kamer__link {
	margin: 0.25rem 0 0;
}

.edgr-kamer__link a {
	color: var(--edgr-groen);
	text-decoration: none;
	font-weight: 600;
}

.edgr-kamer__link a:hover {
	text-decoration: underline;
}

/* Hartjeslijst — ook als het thema van Erve de Gunne niet actief is. */
ul.edg-voorzieningen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}

ul.edg-voorzieningen li {
	position: relative;
	padding-left: 1.7rem;
	margin: 0 0 0.4rem;
	font-size: 0.95rem;
}

ul.edg-voorzieningen li::before {
	content: "\2665";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--edgr-klei);
}

ul.edg-voorzieningen.is-vinkjes li::before {
	content: "\2713";
	color: var(--edgr-mos);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Contactgegevens
   --------------------------------------------------------------------------- */

.edgr-contact__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.edgr-contact--center .edgr-contact__acties {
	justify-content: center;
}

.edgr-contact--lijst .edgr-contact__acties {
	flex-direction: column;
	align-items: flex-start;
}

.edgr-contact--lijst.edgr-contact--center .edgr-contact__acties {
	align-items: center;
}

.edgr-contact__adres {
	margin: 1rem 0 0;
	font-size: 0.92rem;
}

.edgr-contact--center .edgr-contact__adres {
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.edgr-dag,
	.edgr-knop,
	.edgr-kalender__nav {
		transition: none;
	}
}

/* Ook te vinden op */
.edgr-elders__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.edgr-elders__lijst li + li {
	margin-top: 0.35rem;
}