/* ═══════════════════════════════════════════════════════════════
   COMFOREST — brug tussen WordPress-blokken en de huisstijl

   De stylesheet comforest.css komt onveranderd uit de HTML-versie en
   kent alleen onze eigen klassen (.btn, .foto, .card …). WordPress
   genereert zijn eigen opbouw met eigen klassen (.wp-block-button__link,
   .wp-block-image …). Dit bestand verbindt die twee.

   Waarom een apart bestand: comforest.css wordt automatisch samengesteld
   uit de HTML-versie. Alles wat je daar met de hand in zet, is bij de
   volgende samenstelling weg. Wat hier staat, blijft.
   ═══════════════════════════════════════════════════════════════ */


/* ── Knoppen ────────────────────────────────────────────────────
   Een aangepaste klasse op een knopblok komt in WordPress op de
   omhullende <div> terecht, niet op de <a> die je ziet. Onze .btn-stijl
   moet juist op die <a>. Daarom stijlen we hier de WordPress-klasse
   rechtstreeks, met dezelfde waarden als .btn + .btn-p + .btn-lg.

   Zet je die klassen met de hand in de editor op de link, dan werkt dat
   één keer — tot iemand de tekst wijzigt. Gutenberg bouwt het blok dan
   opnieuw op en gooit onbekende klassen weg. Vandaar deze route. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	cursor: pointer;
	border: none;
	font-family: var(--fh);
	font-weight: 600;
	transition: all .22s ease;
	white-space: nowrap;

	/* .btn-lg — de maat die in de inhoud gebruikt wordt. De kleine knop
	   (.btn-sm) zit alleen in de navigatiebalk, en die maakt het
	   navigatieblok zelf. */
	padding: 16px 32px;
	font-size: 16.5px;
	border-radius: 14px;

	/* .btn-p — leisteen is de standaardknop. */
	background: var(--slate);
	color: #fff;
	box-shadow: 0 6px 18px rgba(80, 98, 118, .28);
}

.wp-block-button__link:hover {
	background: var(--slate-d);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(80, 98, 118, .36);
}

/* Stijlvariant "Lime" — verschijnt in de editor onder Stijlen bij het
   knopblok. Zie register_block_style() in functions.php. */
.wp-block-button.is-style-lime .wp-block-button__link {
	background: var(--lime);
	color: var(--ink);
	box-shadow: 0 6px 18px rgba(160, 165, 60, .3);
}
.wp-block-button.is-style-lime .wp-block-button__link:hover {
	background: #e3e678;
	box-shadow: 0 12px 28px rgba(160, 165, 60, .4);
}

/* Stijlvariant "Omlijnd" — .btn-o. */
.wp-block-button.is-style-omlijnd .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line2);
	box-shadow: none;
}
.wp-block-button.is-style-omlijnd .wp-block-button__link:hover {
	border-color: var(--slate);
	background: rgba(80, 98, 118, .05);
	transform: translateY(-2px);
	box-shadow: none;
}

/* De omhulling van een knopblok moet geen eigen ruimte innemen; de
   afstand eromheen regelt het blok waar de knop in staat. */
.wp-block-buttons { gap: 12px; }

/* ── Ruimte terug in kernblokken die wij niet zelf opmaken ──────
   `blockGap` staat op 0px (zie verderop bij Blokafstanden). Dat lost de
   doorlekkende marges op, maar zet ook de tussenruimte in flex- en
   grid-blokken op nul. Voor ónze pagina's maakt dat niets uit: het enige
   kernblok met zo'n indeling dat we gebruiken is het knoppenblok, en dat
   krijgt hierboven zijn eigen 12px.

   Maar een redacteur die later Kolommen of een Galerij toevoegt, zou een
   blok krijgen waarin alles tegen elkaar aan plakt — zonder te kunnen zien
   waarom. Dat is precies het soort verrassing waarvoor dit thema bedoeld is
   om te voorkomen. Vandaar hier hun ruimte terug.

   Waarom dit wint van de kern: die schrijft `:root :where(.is-layout-flex)`,
   wat even zwaar telt als één klasse. Deze regels wegen even zwaar en staan
   later, dus zij winnen — zonder !important. */
.wp-block-columns,
.wp-block-gallery,
.wp-block-social-links {
	gap: 24px;
}

/* Een knoppenblok is een flexrij. `text-align: center` doet daar niets —
   dat werkt op tekst, niet op flex-elementen. Staat de knop in een blok
   dat gecentreerd hoort te zijn (zoals "Bekijk alle kennis" onder de
   kennisartikelen), dan moet de rij zelf gecentreerd worden. */
[style*="text-align:center"] > .wp-block-buttons,
[style*="text-align: center"] > .wp-block-buttons,
.has-text-align-center > .wp-block-buttons,

/* Deze blokken staan in comforest.css op text-align: center. Dat centreert
   hun tekst, maar een knoppenrij is een flex-element en trekt zich daar
   niets van aan — die blijft links staan. Vandaar apart benoemd. */
.cta-band .wp-block-buttons,
.fout-in .wp-block-buttons,
.sayband .wp-block-buttons {
	justify-content: center;
}


/* ── Afbeeldingen ───────────────────────────────────────────────
   Een afbeeldingsblok wordt een <figure>. Onze .foto is de omhulling met
   afgeronde hoeken en overflow:hidden, dus die klasse hoort op de figure
   — dat werkt, mits WordPress er geen eigen marge omheen zet. */
.wp-block-image { margin: 0; }
.wp-block-image.foto img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image figcaption { margin-top: 10px; font-size: 14px; color: var(--mt); }


/* ── Hero homepage: beeldvullend ───────────────────────────────
   De HTML-versie (het ijkpunt) heeft een split-hero: tekst links, een
   losse foto rechts. Voor de WordPress-site is dat op 09-09-2026
   vervangen door een beeldvullende hero — een gebouwfoto over de hele
   breedte, een donker verloop erover, en de kop + knoppen daar overheen.
   Reden: de site leek te veel op "een installateur die sensoren ophangt";
   met een pand als eerste beeld gaat het meteen over gebouwen en klimaat.
   Zie Website/Voorstel-homepage-herontwerp.md.

   comforest.css kent nog de oude .hero-regels (padding, .hero-grid,
   .hero-foto). Die overschrijven we hier omdat wp-brug.css ná
   comforest.css laadt. De oude klassen staan niet meer in het blok, dus
   .hero-grid / .hero-foto / .klabel-in-de-hero doen niets meer. */
.hero {
	position: relative;
	min-height: clamp(560px, 82vh, 820px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0;
	overflow: hidden;
	background: #2E3A47; /* leisteen, extra donker — achtergrond tot de foto laadt */
}
/* De foto komt als afbeeldingsblok met de klasse hero-bg; die vullen we
   over de hele hero en zetten 'm achter alles. */
.hero .hero-bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.hero .hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
/* Donker verloop: links donker genoeg voor witte tekst, rechts open zodat
   het gebouw zichtbaar blijft; en onderin donker onder de knoppen. */
.hero .hero-waas {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(86deg, rgba(46,58,71,.94) 0%, rgba(46,58,71,.72) 36%, rgba(46,58,71,.32) 66%, rgba(46,58,71,.12) 100%),
		linear-gradient(0deg, rgba(46,58,71,.88) 0%, rgba(46,58,71,0) 44%);
}
/* De inhoud: .wrap regelt de max-breedte (zie hieronder), hier de
   verticale ruimte. De 122px bovenaan houdt de tekst vrij van de vaste
   navigatiebalk (80px hoog). */
.hero .hero-in {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 122px;
	padding-bottom: 46px;
	color: #fff;
}
.hero .hero-in h1 {
	color: #fff;
	font-size: clamp(34px, 5vw, 60px);
	line-height: .98;
	letter-spacing: -.02em;
	max-width: 16ch;
}
.hero .hero-in .lead {
	color: rgba(255, 255, 255, .9);
	margin-top: 18px;
	max-width: 42ch;
}
.hero .hero-in .btns {
	margin-top: 30px;
}
/* De omlijnde knop is standaard donker (inkt-tekst, grijze rand) — op een
   donkere hero onzichtbaar. Hier wit maken. */
.hero .hero-in .is-style-omlijnd .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
}
.hero .hero-in .is-style-omlijnd .wp-block-button__link:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .08);
}
@media (max-width: 720px) {
	.hero { min-height: clamp(500px, 82vh, 680px); }
	.hero .hero-in { padding-top: 104px; }
}


/* ── Groepen ────────────────────────────────────────────────────
   Onze secties regelen hun eigen breedte via .wrap. Een groepsblok met
   "constrained" zou daar zijn eigen max-width overheen leggen. */
.wp-block-group.wrap { max-width: 1140px; }

/* ── Blokafstanden ──────────────────────────────────────────────
   WordPress zet standaard 24px tussen blokken die onder elkaar staan
   (`:where(.is-layout-flow) > *` in de kern-CSS).

   Die marge moet binnen de inhoud helemaal weg. In de HTML-versie heeft
   niets automatische ruimte — de reset zet alle marges op nul en elke
   afstand staat expliciet in comforest.css. Laat je die 24px staan, dan
   telt hij overal bovenop en verspringt de hele pagina: een kop krijgt
   16px + 24px onder, een kaart 20px + 24px ertussen.

   Eerder stond hier een lijst met containers waarin de marge werd
   uitgezet. Dat dekte de lading niet: alles wat niet in .sec of .tp-hero
   zat — de artikelkoppen, de artikelinhoud, de hero op de homepage,
   het oproepblok — kreeg de marge alsnog. Ruim veertig containers.

   **De echte oplossing staat niet hier maar in theme.json:**
   `styles.spacing.blockGap` is `0px`. Daardoor schrijft WordPress zélf
   `margin-block-start: 0px` in zijn kern-CSS en is er geen gevecht meer.

   Waarom niet met een sterkere selector? Dat is geprobeerd en het ging mis.
   De kern schrijft `:root :where(.is-layout-flow) > *`, en die `:root` telt
   mee als een klasse — een regel die met `main …` begint verliest daarvan,
   stilzwijgend. Zet je er dan `:root` vóór om te winnen, dan win je óók van
   onze eigen regels in comforest.css (die zitten op hetzelfde niveau), en
   verdwijnen de alinea-afstanden in de artikelen. Die pagina's werden
   daardoor 400px te kort. Bij de bron nul zetten heeft dat probleem niet.

   De regels hieronder blijven staan als vangnet voor het geval een plugin
   of een latere WordPress-versie de blokafstand alsnog ergens terugzet.
   Ze staan bewust op elementniveau, zodat ze onze eigen opmaak niet
   overstemmen.

   Meet je dit soort dingen niet, dan zie je het niet: alle tekst- en
   structuurvergelijkingen stonden op groen terwijl elke sectie 24px te
   veel lucht had. Zie documentatie/08-weergavecontrole.md. */
main :where(.is-layout-flow) > *,
main :where(.is-layout-constrained) > *,
main :where(.is-layout-flex) {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Twee uitzonderingen: losse alinea's en lijsten in lopende tekst hebben
   wél lucht nodig. Die staan in de HTML-versie binnen .art, waar
   comforest.css ze een eigen ondermarge geeft — maar een alinea die
   buiten .art valt, zou anders tegen zijn buurman aan plakken. */
main p:where(:not([class])) + p:where(:not([class])) {
	margin-block-start: 22px;
}


/* ── Koppen en alinea's ─────────────────────────────────────────
   De reset in comforest.css zet alle marges op nul en de opmaak komt uit
   de klassen. WordPress geeft blokken standaard een eigen ondermarge;
   die zou hier dubbel tellen. */
.wp-block-heading { margin: 0; }
main p:where(:not([class])) { margin-bottom: 22px; }


/* ── Korte pagina's: voetbalk naar beneden ──────────────────────
   Een pagina met weinig inhoud vult het scherm niet. De voetbalk komt dan
   halverwege te staan, en tussen de laatste sectie en die balk zie je de
   achtergrond van de site (papierkleur) als een band — net iets donkerder
   dan de witte inhoud erboven. Dat leest als een streep die er niet hoort.

   De oplossing: de inhoud rekt uit tot het scherm vol is, en de laatste
   sectie neemt die extra ruimte in met zijn eigen achtergrond. De voetbalk
   staat dan altijd onderaan, ook op een korte pagina.

   Dit is geen WordPress-eigenaardigheid; de HTML-versie heeft hetzelfde.
   Zodra die vervalt, mag deze regel naar de hoofdstylesheet. */
/* Let op: WordPress zet alles in een extra laag `.wp-site-blocks`. Kop,
   inhoud en voetbalk zijn dus geen directe kinderen van <body>, en een
   regel op `body > main` grijpt nergens op aan. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main > :last-child {
	flex: 1 0 auto;
}

.wp-site-blocks > footer {
	flex-shrink: 0;
}


/* ── Lijsten in artikelen ───────────────────────────────────────
   In de HTML-versie staan lijsten binnen .art en krijgen ze daar hun
   opmaak. Een lijstblok komt als <ul class="wp-block-list">. */
.art .wp-block-list { margin: 0 0 22px 22px; }

/* ── "Regelgeving nagekeken op ..." ─────────────────────────────
   Staat onder de bronvermelding op de wetgevingspagina's. Zelfde
   ingetogen opmaak als .bron: het is een verantwoording, geen boodschap.
   Verschijnt alleen als iemand die datum ook echt heeft ingevuld. */
.bron-datum {
	margin-top: 8px;
	font-size: 14px;
	color: var(--mt);
	line-height: 1.6;
}