/*
Theme Name: De Cour
Theme URI: https://de-cour.nl
Author: De Cour
Description: Eigen, eenvoudig thema voor de-cour.nl — gebouwd op het bestaande ontwerp (kleuren, lettertypes, rustige foto's zonder kaders), zonder page builder. Teksten en foto's worden bewerkt met de standaard WordPress-editor.
Version: 0.1
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: de-cour
*/

/* ==========================================================================
   1. Basis: kleuren, lettertypes, reset
   ========================================================================== */

:root {
	--green: #18382F;   /* diep groen */
	--white: #F5F2E9;   /* warm gebroken wit — tekst op donkere vlakken (nav, hero, footer) */
	--olive: #7B8064;   /* olijfgroen */
	--sand:  #D8D0BD;   /* steen/zand */
	--paper: #FFFFFF;   /* zuiver wit — paginabasis en lichte vlakken */

	--font-serif: Georgia, "Times New Roman", serif;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--wrap-width: 1180px;

	/* Vaste ruimte tussen pagina-"hoofdstukken" (hero, verhaal-sectie,
	   groene kaarten-sectie, voettekst) — overal dezelfde maat, zie
	   style.css sectie 3b/4/5. */
	--section-gap: clamp(48px, 7vw, 80px);
}

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--green);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.6;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.1;
	color: var(--green);
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(36px, 5.5vw, 64px); }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: clamp(22px, 2.6vw, 30px); }

p {
	margin: 0 0 1.2em;
}

a {
	color: inherit;
}

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

.wrap {
	max-width: var(--wrap-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* "Full-bleed breakout": een sectie rand-tot-rand laten lopen, ook al
   staat de paginainhoud verder gecentreerd. De binnenkant blijft netjes
   via .wrap (max-width hierboven). */
.breakout,
.site-content .alignfull {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
}

/* De binnenkant van een "volledige breedte"-blok weer netjes centreren,
   op dezelfde manier als de rest van de pagina (.wrap hierboven). */
.site-content .alignfull > .wp-block-group__inner-container,
.site-content .alignfull.wp-block-group > :where(:not(.alignfull):not(.dc-story__image):not(.dc-bleed)) {
	max-width: var(--wrap-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* .dc-bleed: laat een blok buiten zijn eigen .wrap-container (en dus de
   zijmarges van de pagina) om, zodat de achtergrond paginabreed loopt.
   De tekst erbinnen gebruikt gewoon weer een eigen .wrap voor dezelfde
   zijmarges als de rest van de pagina. */
.dc-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   2. Header / navigatie
   ========================================================================== */

/* Een onderstreepte tekstlink, zoals in het menu en bij "Ontdek …"-links. */
a.underline {
	border-bottom: 1px solid;
	padding-bottom: 2px;
	opacity: 0.85;
	transition: opacity 0.2s ease;
	text-decoration: none;
}

a.underline:hover,
a.underline:focus {
	opacity: 1;
}

/* Het menu ligt transparant óver de grote foto heen (geen eigen groene
   balk) — daarom staat het los boven de foto in de hoek. */
.site-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	color: var(--white);
}

.site-nav .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 32px;
	padding-bottom: 32px;
	padding-left: clamp(24px, 5vw, 64px);
	padding-right: clamp(24px, 5vw, 64px);
	flex-wrap: wrap;
}

.site-nav .logo {
	font-family: var(--font-serif);
	font-size: clamp(28px, 2.6vw, 42px);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--white);
	text-decoration: none;
	text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}

.site-nav .links {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.5vw, 42px);
	flex-wrap: wrap;
	font-size: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav .links li {
	margin: 0;
}

.site-nav .links a {
	color: var(--white);
	text-decoration: none;
}

.site-nav .links a.underline {
	font-size: clamp(15px, 1.3vw, 19px);
	letter-spacing: 0.02em;
	font-weight: 500;
	text-shadow: 0 1px 10px rgba(0,0,0,0.45);
	border-bottom: 1px solid;
	opacity: 1;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.site-nav .links a.underline:hover,
.site-nav .links a.underline:focus {
	color: var(--sand);
	border-color: var(--sand);
}

.site-nav .links a.btn-boeken {
	background: var(--white);
	color: var(--green);
	padding: 12px 28px;
	border-radius: 0;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 13px;
	transition: background 0.2s ease, color 0.2s ease;
}

.site-nav .links a.btn-boeken:hover {
	background: transparent;
	color: var(--white);
	border: 1px solid var(--white);
}

/* De herhaalde menubalk vlak vóór de voettekst ligt niet over een foto,
   dus die blijft een gewone, vaste groene balk. */
.site-nav.site-nav--repeat {
	position: static;
	background: var(--green);
	min-height: 80px;
	display: flex;
	align-items: center;
}

.site-nav.site-nav--repeat .wrap {
	justify-content: center;
	gap: 40px;
	padding-top: 0;
	padding-bottom: 0;
}

.site-nav.site-nav--repeat .links a.underline {
	font-size: 15px;
	text-shadow: none;
}

.site-nav.site-nav--repeat .links a.btn-boeken {
	background: transparent;
	color: var(--white);
	padding: 0;
	border-bottom: 1px solid;
	text-transform: none;
	font-weight: 500;
	letter-spacing: 0.02em;
	font-size: 15px;
}

.site-nav.site-nav--repeat .social {
	display: flex;
	gap: 16px;
}

.site-nav.site-nav--repeat .social a {
	color: var(--white);
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.site-nav.site-nav--repeat .social a:hover,
.site-nav.site-nav--repeat .social a:focus {
	opacity: 1;
}

.dc-menu-toggle {
	display: none;
	width: 32px;
	height: 24px;
	position: relative;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}
.dc-menu-toggle span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--white);
	transition: 0.2s;
}
.dc-menu-toggle span:nth-child(1) { top: 0; }
.dc-menu-toggle span:nth-child(2) { top: 11px; }
.dc-menu-toggle span:nth-child(3) { top: 22px; }
.site-nav.menu-open .dc-menu-toggle span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.site-nav.menu-open .dc-menu-toggle span:nth-child(2) { opacity: 0; }
.site-nav.menu-open .dc-menu-toggle span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

@media (max-width: 760px) {
	.dc-menu-toggle { display: block; }

	.site-nav:not(.site-nav--repeat) .links { display: none; }

	.site-nav.menu-open .links {
		display: flex;
		flex-direction: column;
		gap: 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--green);
		padding: 4px 24px 14px;
	}
	.site-nav.menu-open .links li { display: block; }
	.site-nav.menu-open .links a {
		display: block;
		padding: 7px 0 3px;
		font-size: 17px;
	}
	.site-nav.menu-open .links a.btn-boeken {
		display: inline-block;
		padding: 6px 18px;
		margin-top: 12px;
		margin-bottom: 0;
	}
	.site-nav.menu-open .links li:has(a.btn-boeken) + li {
		margin-top: -9px;
	}
}

/* ==========================================================================
   3. Hero (grote foto bovenaan elke pagina)
   ========================================================================== */

.hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: flex-end;
	color: var(--white);
}

.hero > img,
.hero > .hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.hero .scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(52% 60% at 30% 78%, rgba(24,37,32,0.6) 0%, rgba(24,37,32,0.32) 55%, rgba(24,37,32,0) 100%),
		linear-gradient(rgba(24,56,47,0.46) 0%, rgba(24,56,47,0.16) 18%, rgba(24,56,47,0.08) 45%, rgba(24,56,47,0.1) 60%, rgba(24,56,47,0.42) 100%);
	pointer-events: none;
}

/* Deze .wrap is tegelijk een gewone (gecentreerde) .wrap én het
   tekstvak van de hero: hij "krimpt" om zijn eigen inhoud, wordt als
   geheel gecentreerd op de pagina, en de tekst erbinnen sluit links aan —
   zo ontstaat de inspringing die in het echte ontwerp te zien is. */
.hero .wrap {
	position: relative;
	padding-top: 180px;
	padding-bottom: clamp(56px, 9vw, 110px);
}

.hero .textbox {
	display: inline-block;
	max-width: 780px;
	color: var(--white);
}

.hero .eyebrow {
	display: block;
	color: var(--sand);
	margin-bottom: 18px;
	text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}

.hero h1 {
	font-size: clamp(42px, 6.6vw, 76px);
	font-weight: 700;
	line-height: 1.05;
	max-width: 760px;
	color: var(--white) !important;
	text-shadow: 0 2px 28px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
	margin-bottom: 0;
}

.hero p {
	font-size: clamp(16px, 1.6vw, 19px);
	font-weight: 300;
	line-height: 1.6;
	max-width: 520px;
	margin-top: 24px;
	color: var(--white);
	text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}

.hero a.cta {
	display: inline-block;
	margin-top: 36px;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--white);
	text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}

/* ==========================================================================
   3b. Verhaalsectie: foto rechts tot de rand, tekst links ervan met
   evenveel witruimte als er boven/onder de foto staat.
   ========================================================================== */

.dc-story {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(32px, 5vw, 72px);
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

/* De sectie direct na de hero staat al bovenaan de pagina-inhoud, die zelf
   ook al --section-gap ruimte erboven heeft (.site-content hieronder) —
   zonder deze regel staat er dus dubbele witruimte onder de hero. */
.site-content > .wrap > .dc-story:first-child {
	margin-top: calc(-1 * var(--section-gap));
}

/* Twee opeenvolgende .split-secties (bijv. foto+tekst gevolgd door nog een
   foto+tekst, of gevolgd door de "Sfeer op..."-intro) tellen anders hun
   padding dubbel op. Net als hierboven: de ruimte ertussen op 1x --section-gap
   houden in plaats van 2x. */
.split + .split {
	margin-top: calc(-1 * var(--section-gap));
}

.dc-story__text {
	flex: 1 1 380px;
	max-width: 480px;
	margin-left: clamp(24px, 5vw, 64px);
}

.dc-story__image {
	flex: 1.3 1 480px;
	margin: 0 !important;
}

.dc-story__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 780px) {
	.dc-story__text {
		margin-left: 24px;
		margin-right: 24px;
	}
}

/* ==========================================================================
   4. Inhoud van de pagina (de gewone WordPress-blokken)
   ========================================================================== */

.site-content {
	padding: var(--section-gap) 0;
}

.site-content figure {
	margin: 2em 0;
}

/* De grote foto onderaan, vlak voor de voettekst: over de volle breedte
   van het scherm, en zonder witruimte eronder (sluit direct aan op de
   groene balk/voettekst erna) — wel de gewone 80px ruimte erboven. */
.site-content .footer-illustration {
	margin-top: 0;
	margin-bottom: calc(-1 * var(--section-gap));
}

.site-content .footer-illustration img {
	display: block;
	width: 100%;
	height: auto;
}

.site-content figcaption {
	font-size: 14px;
	color: var(--olive);
	margin-top: 8px;
}

.btn,
a.btn {
	display: inline-block;
	background: var(--green);
	color: var(--white);
	padding: 12px 28px;
	border-radius: 2px;
	text-decoration: none;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 13px;
}

/* ==========================================================================
   5. Groene secties, kaarten en ander terugkerend materiaal in de inhoud
   (gebruikt via de knop "Extra CSS-klasse(n)" bij een blok in de editor)
   ========================================================================== */

.dc-section-green {
	background: var(--green);
	color: var(--white);
	padding: var(--section-gap) 0;
}

/* Deze sectie staat (via .alignfull) al rand-tot-rand; de gewone
   "volledige breedte"-regel hierboven (sectie 1) zet de binnenkant
   daarna weer terug op de normale leesbreedte van 1180px. Voor deze
   kaarten-sectie moet de binnenkant juist bijna even breed blijven als
   de groene balk zelf — net als in het echte ontwerp — met alleen een
   smalle rand, zodat de foto's groot en breed getoond worden. */
body .dc-section-green.alignfull > .wp-block-group__inner-container {
	max-width: none;
	padding-left: clamp(24px, 2.2vw, 32px);
	padding-right: clamp(24px, 2.2vw, 32px);
}

.dc-section-green h1,
.dc-section-green h2,
.dc-section-green h3,
.dc-section-green h4 {
	color: var(--white);
}

.dc-section-green p {
	color: var(--sand);
}

.dc-section-green a {
	color: var(--white);
}

.dc-eyebrow {
	display: block;
	color: var(--sand);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.dc-card-tag {
	color: var(--sand) !important;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 16px;
	margin-bottom: 0;
}

.dc-cards img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.dc-cards h3 {
	margin-top: 6px;
	margin-bottom: 6px;
}

.dc-cards p {
	color: var(--white);
	margin-bottom: 10px;
}

.dc-cards p:not(.dc-card-tag) {
	font-size: 14px;
	line-height: 1.8;
}

/* De "Ontdek ..."-links onder elke woningkaart: lijn met een beetje
   witruimte eronder, net als bij a.underline (zie sectie 2), in plaats
   van de standaard tekst-onderstreping die strak tegen de tekst zit. */
.dc-cards a {
	text-decoration: none;
	border-bottom: 1px solid;
	padding-bottom: 2px;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.site-footer {
	background: var(--paper);
	color: var(--green);
	min-height: 240px;
	display: flex;
	align-items: center;
	font-size: 15px;
}

.site-footer .wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	width: 100%;
}

.site-footer .logo {
	font-family: var(--font-serif);
	font-size: 22px;
	color: var(--green);
}

.site-footer address {
	font-style: normal;
	color: var(--olive);
	line-height: 1.6;
}

.site-footer .footer-text {
	color: var(--olive);
	font-size: 15px;
	max-width: 600px;
}

.site-footer .footer-text p {
	margin: 0;
}


/* ==========================================================================
5. Woningpagina's (Rosalie, Anna-Marie, De Cour Compleet): generieke
   onderdelen — twee-koloms tekst+foto, foto met tekst erover, prijzentabel,
   "praktisch"-blokjes en de afsluitende boek-foto. Hergebruikt op alle
   drie de woningpagina's, zodat we dit maar één keer hoeven te bouwen.
   ========================================================================== */

/* Knop met alleen een rand (lichte achtergrond), voor op een foto */
.btn-outline {
	display: inline-block;
	padding: 14px 30px;
	border: 1px solid var(--white);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	transition: background .2s ease, color .2s ease;
}
.btn-outline:hover {
	background: var(--white);
	color: var(--green);
}

/* Label + sprong-link naar de prijzen, direct onder de kop-foto */
.capacity-intro {
	padding-top: clamp(32px, 5vw, 48px);
	padding-bottom: 8px;
}
.capacity-intro .eyebrow {
	color: var(--olive);
	margin-bottom: 10px;
}

/* Twee-koloms blok (tekst + foto), bijvoorbeeld "De woning" */
.split {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}
.split.paper {
	background: var(--paper);
}
.split-grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(40px, 6vw, 90px);
	align-items: center;
}
.split-grid.reverse {
	grid-template-columns: 1.05fr 0.95fr;
}
.split-grid.reverse .split-image {
	order: -1;
}
.split-grid .eyebrow {
	color: var(--olive);
	margin-bottom: 18px;
}
.split-grid h2 {
	margin-bottom: 24px;
}
.split-grid p {
	font-size: 16px;
	line-height: 1.75;
	font-weight: 300;
	margin-bottom: 16px;
}
.split-grid .image-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.split-grid .image-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Foto over de volle breedte met tekst erover (bijv. "Buiten begint...") */
.band {
	position: relative;
	min-height: 62vh;
	display: flex;
	align-items: center;
}
.band img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.band .scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(55% 65% at 22% 50%, rgba(24,37,32,0.62) 0%, rgba(24,37,32,0.38) 50%, rgba(24,37,32,0.08) 100%);
}
.band .dc-content {
	position: relative;
	padding: clamp(48px, 8vw, 96px) 0;
}
.band .textbox {
	max-width: 560px;
	color: var(--white);
}
.band .eyebrow {
	color: var(--sand);
	margin-bottom: 18px;
	text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
.band h2 {
	color: var(--white) !important;
	margin-bottom: 20px;
	text-shadow: 0 2px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
}
.band p {
	font-size: 16px;
	line-height: 1.75;
	font-weight: 300;
	color: var(--white);
	text-shadow: 0 1px 12px rgba(0,0,0,0.4);
	margin-bottom: 14px;
}

/* Prijzentabel */
.section-prijzen {
	background: var(--paper);
	padding-top: var(--section-gap);
	padding-bottom: clamp(48px, 7vw, 90px);
}

/* Het feestdagenblok (donkergroen) sluit de prijzensectie al zelf mooi af,
   met zijn eigen ruimte onder de onderste prijsregel. De padding-bottom van
   .section-prijzen zelf erbovenop zorgde voor een dubbele, "ongebalanceerde"
   witruimte vóór de volgende sectie (praktische info). Bij een prijzensectie
   mét feestdagenblok daarom geen eigen padding-bottom meer gebruiken — de
   ruimte naar de volgende sectie komt dan alleen nog van die sectie's eigen
   bovenruimte (--section-gap), vergelijkbaar met de ruimte in het groene blok. */
.section-prijzen:has(.feestdagen) {
	padding-bottom: 0;
}
.prijzen-head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto clamp(48px, 6vw, 76px);
}
.prijzen-head .eyebrow {
	color: var(--olive);
	margin-bottom: 18px;
}
.prijzen-head p {
	font-size: 16px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--green);
	opacity: 0.85;
}
.price-tiers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: clamp(32px, 4vw, 56px);
	max-width: 1020px;
	margin: 0 auto;
}
.price-tier {
	border-top: 3px solid var(--accent, var(--sand));
	padding-top: 22px;
}
.price-tier h3 {
	font-size: 20px;
	font-weight: 500;
	color: var(--green);
	margin-bottom: 6px;
}
.price-tier .tier-note {
	font-size: 13px;
	font-weight: 300;
	color: var(--olive);
	margin-bottom: 22px;
	font-style: italic;
}

.price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(24,56,47,0.12);
	font-size: 15px;
}
.price-row:last-child {
	border-bottom: none;
}
.price-row .nights {
	font-weight: 300;
	color: var(--green);
	opacity: 0.75;
}
.price-row .amount {
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--green);
}
.price-single-note {
	max-width: 620px;
	margin: 0 auto clamp(40px, 5vw, 64px);
	text-align: center;
	padding: 22px 28px;
	border: 1px solid rgba(24,56,47,0.15);
	font-size: 15px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--green);
}
.price-single-note strong {
	font-weight: 600;
}

/* Bij een enkele prijstabel (1 .price-tier) staat het toeslag-kadertje
   (.price-single-note) naast de tabel i.p.v. eronder. De wrapper .prijzen-grid
   staat alleen om deze twee blokken heen in de pagina-inhoud. */
.prijzen-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}
.prijzen-grid .price-tiers {
	grid-template-columns: 1fr;
}
.prijzen-grid .price-single-note {
	margin: 0;
	max-width: none;
	text-align: left;
}

/* Feestdagentarief — bewust zichtbaar, geen kleine voetnoot */
.feestdagen {
	background: var(--green);
	margin-top: clamp(48px, 7vw, 80px);
}
.feestdagen .wrap {
	padding-top: clamp(48px, 6vw, 72px);
	padding-bottom: clamp(48px, 6vw, 72px);
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.feestdagen .eyebrow {
	color: var(--sand);
	margin-bottom: 14px;
}
.feestdagen h3 {
	font-size: clamp(24px, 2.6vw, 32px);
	color: var(--white) !important;
	margin-bottom: 12px;
}
.feestdagen p {
	font-size: 15px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--white);
	opacity: 0.9;
}
.feestdagen .price-row {
	border-bottom-color: rgba(245,242,233,0.18);
}
.feestdagen .price-row .nights {
	color: var(--white);
	opacity: 0.75;
}
.feestdagen .price-row .amount {
	color: var(--white);
}
@media (max-width: 780px) {
	.feestdagen .wrap {
		grid-template-columns: 1fr;
	}
}

/* Praktisch / goed om te weten */
.section-praktisch {
	background: var(--paper);
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}
.praktisch-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: clamp(28px, 4vw, 48px);
	max-width: 1020px;
	margin: 0 auto;
	text-align: center;
}
.praktisch-grid .eyebrow {
	color: var(--olive);
	margin-bottom: 12px;
}
.praktisch-item p {
	font-size: 15px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--green);
}
@media (max-width: 780px) {
	.praktisch-grid {
		grid-template-columns: 1fr;
	}
}

/* Boeken — afsluitende foto met tekst en knop */
.boeken {
	position: relative;
	min-height: 62vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.boeken img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 60%;
}
.boeken .scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 65% at 50% 50%, rgba(24,37,32,0.58) 0%, rgba(24,37,32,0.32) 55%, rgba(24,37,32,0.12) 100%);
}
.boeken .dc-content {
	position: relative;
	text-align: center;
	padding: clamp(56px, 8vw, 90px) 24px;
}
.boeken .textbox {
	display: inline-block;
	color: var(--white);
	max-width: 560px;
}
.boeken .eyebrow {
	color: var(--sand);
	margin-bottom: 16px;
	text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
.boeken h2 {
	color: var(--white) !important;
	margin-bottom: 28px;
	text-shadow: 0 2px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
}
.boeken .btn-outline {
	margin-bottom: 20px;
}
.boeken .bel {
	font-size: 14px;
	color: var(--white);
	text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
.boeken .bel a {
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	opacity: 0.9;
}
.boeken .bel a:hover {
	opacity: 1;
}

@media (max-width: 780px) {
	.split-grid,
	.split-grid.reverse {
		grid-template-columns: 1fr;
	}
	.split-grid.reverse .split-image {
		order: 0;
	}
	.price-tiers {
		grid-template-columns: 1fr;
	}
	.prijzen-grid {
		grid-template-columns: 1fr;
	}
}

.capacity-intro .wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
}
.capacity-intro .eyebrow {
	margin-bottom: 0;
}
.capacity-intro a.underline {
	color: var(--green);
	font-size: 14px;
}

.band .wrap,
.boeken .wrap {
	position: relative;
	z-index: 1;
}

/* Foto-rijtje onder de tekst+foto-blokken van een woningpagina (zoals op
   Anna-Marie), met optioneel een kort tekstblokje erboven. Herbruikbaar op
   Rosalie, Anna-Marie en De Cour Compleet. */
.restore-intro {
	max-width: 720px;
}
.restore-intro .eyebrow {
	color: var(--olive);
	margin-bottom: 18px;
}
.restore-intro h2 {
	margin-bottom: 24px;
}
.restore-intro p {
	font-size: 16px;
	line-height: 1.75;
	font-weight: 300;
	margin-bottom: 16px;
}
.restore-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 56px;
}
.restore-gallery .frame {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 3px;
}
.restore-gallery .frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 780px) {
	.restore-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* Anna-Marie: eigen accentkleur voor de prijzen-balk (olijfgroen, zoals op de homepage-kaart) */
body.page-id-1323 {
	--accent: var(--olive);
}

/* Ontdek De Cour: afwisselend foto links/rechts bij de tekst+foto-secties (zoals bij Rosalie/Anna-Marie) */
.dc-story.reverse .dc-story__image {
	order: -1;
}

/* Verblijven op de Cour: kaarten met de drie woningen (overgenomen van homepage-concept) */
.section-intro {
	text-align: center;
	max-width: 680px;
	margin: 0 auto clamp(48px, 6vw, 80px);
}
.section-intro .eyebrow {
	margin-bottom: 18px;
}
.section-intro h2 {
	font-size: clamp(28px, 3.2vw, 40px);
	margin-bottom: 16px;
}
.section-intro p {
	font-size: 16px;
	line-height: 1.7;
	font-weight: 300;
	opacity: 0.85;
}
.section-verblijven {
	background: var(--green);
	padding-top: clamp(72px, 10vw, 132px);
	padding-bottom: clamp(72px, 10vw, 132px);
}
.section-verblijven .section-intro {
	color: var(--white);
}
.section-verblijven .section-intro .eyebrow {
	color: var(--sand);
}
.section-verblijven .section-intro h2 {
	color: var(--white) !important;
}
.card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
}
.card .image-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin-bottom: 22px;
}
.card .image-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card .accent-bar {
	display: none;
}
.card .eyebrow {
	color: var(--sand);
	margin-bottom: 10px;
}
.card h3 {
	font-size: 22px;
	color: var(--white) !important;
	margin-bottom: 10px;
}
.card p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--white);
	opacity: 0.88;
	margin-bottom: 18px;
}
.card a.underline {
	font-size: 13px;
	letter-spacing: 0.03em;
	color: var(--white);
}
.card--rosalie .image-frame img {
	object-position: 50% 35%;
}
.card--rosalie .accent-bar {
	background: var(--sand);
}
.card--annamarie .image-frame img {
	object-position: 18% 20%;
}
.card--annamarie .accent-bar {
	background: var(--olive);
}
.card--compleet .image-frame img {
	object-position: 50% 40%;
}
.card--compleet .accent-bar {
	background: var(--white);
}
@media (max-width: 780px) {
	.card-grid {
		grid-template-columns: 1fr;
	}
}


/* Praktisch (1335): verwarmingstoeslag-tabel */
.section-verwarming {
	background: var(--sand);
	padding-top: clamp(56px, 8vw, 96px);
	padding-bottom: clamp(56px, 8vw, 96px);
}
.verwarming-head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto clamp(36px, 5vw, 56px);
}
.verwarming-head .eyebrow { color: var(--green); opacity: 0.7; margin-bottom: 14px; }
.verwarming-head h2 { font-size: clamp(24px, 2.8vw, 34px); color: var(--green) !important; margin-bottom: 12px; }
.verwarming-head p { font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--green); opacity: 0.85; }
.verwarming-rows { max-width: 620px; margin: 0 auto; }
.verwarming-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(24,56,47,0.18);
	font-size: 16px;
}
.verwarming-row:last-child { border-bottom: none; }
.verwarming-row .huis { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--green); }
.verwarming-row .toeslag { font-weight: 300; color: var(--green); }

/* Boeken (1337): huizen-kiezer */
.section-huizen {
	background: var(--paper);
	padding-top: clamp(72px, 10vw, 120px);
	padding-bottom: clamp(72px, 10vw, 120px);
}
.huis-rows { max-width: 760px; margin: 0 auto; }
.huis-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0;
	border-bottom: 1px solid rgba(24,56,47,0.14);
	flex-wrap: wrap;
}
.huis-row:last-child { border-bottom: none; }
.huis-row .huis-naam { font-size: clamp(22px, 2.4vw, 28px); color: var(--green); }
.huis-row .huis-naam .cap {
	display: block;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--olive);
	margin-top: 6px;
}
.huis-row a.underline { font-size: 14px; color: var(--green); }
@media (max-width: 760px) {
	.site-nav.site-nav--repeat .wrap {
		padding-top: 28px;
		padding-bottom: 28px;
	}
	.site-nav.site-nav--repeat .links {
		justify-content: center;
	}
}