/* ==========================================================================
   Knoppen
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-small);
	text-decoration: none;
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-6);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--motion-base) var(--motion-easing),
		color var(--motion-base) var(--motion-easing),
		border-color var(--motion-base) var(--motion-easing);
}

/* Witte tekst op de (verdiepte) accentkleur — geverifieerd 4.69:1/6.53:1,
   zie tokens.css. De oorspronkelijk voorgestelde lichtere oranje +
   donkere tekst haalde bij nameten geen AA voor kleine, vetgedrukte
   knoptekst (4.13:1) — daarom hier bijgesteld. */
.btn--primary {
	background: var(--color-accent);
	color: var(--color-text-inverse);
}

.btn--primary:hover {
	background: var(--color-accent-hover);
	color: var(--color-text-inverse);
}

/* Contact Form 7's verzendknop (input.wpcf7-submit) is verder ongestyled
   plugin-markup — zonder deze regel valt hij terug op Varia's generieke
   knop-placeholder (ander lettertype, andere vorm, blauw i.p.v. onze
   huisstijl, zie base.css). Hier expliciet gelijkgetrokken met
   ".btn.btn--primary" zodat de "Verzenden"-knop in de footer er hetzelfde
   uitziet als elke andere primaire actieknop op de site.
   Bewust "input.wpcf7-submit" i.p.v. alleen ".wpcf7-submit": Varia's eigen
   regel is "input[type=\"submit\"]" (element + attribuut), met een hogere
   CSS-specificiteit dan een kale class-selector — daardoor won Varia's
   blauwe standaardstijl eerder alsnog van ".wpcf7-submit" op alle
   niet-hover-eigenschappen (achtergrond, vorm, lettertype, padding). Met
   het element ervoor ("input.wpcf7-submit") is de specificiteit minstens
   gelijk, en wint onze regel via laadvolgorde (child-CSS laadt na de
   parent). */
input.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-small);
	text-decoration: none;
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-6);
	border: 2px solid transparent;
	cursor: pointer;
	background: var(--color-accent);
	/* !important: puur ter garantie. Kon zelf geen concurrerende regel meer
	   vinden die de tekst hier anders zou kleuren (Varia's eigen
	   input[type="submit"]-standaardstijl staat toevallig ook al op wit),
	   maar dit sluit uit dat er ooit, via welke route dan ook, alsnog een
	   andere kleur doorkomt op dit specifieke knopje. */
	color: var(--color-text-inverse) !important;
	transition: background-color var(--motion-base) var(--motion-easing);
}

input.wpcf7-submit:hover,
input.wpcf7-submit:focus {
	background: var(--color-accent-hover);
	color: var(--color-text-inverse) !important;
}

.btn--secondary {
	background: transparent;
	border-color: var(--color-navy);
	color: var(--color-navy);
}

.section--navy .btn--secondary {
	border-color: var(--color-text-inverse);
	color: var(--color-text-inverse);
}

.btn--secondary:hover {
	background: var(--color-navy);
	color: var(--color-text-inverse);
}

.btn--icon-circle {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-bg-muted);
	color: var(--color-ink);
}

.btn--icon-circle:hover,
.btn--icon-circle:focus {
	background: var(--color-bg-warm);
	color: var(--color-ink);
}

/* ==========================================================================
   Sectielabel — tweekleurig gestapeld label, zie referentieanalyse
   "Typografie" en "Layout en sectieritme".
   ========================================================================== */

.section-label {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: var(--font-heading);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.05;
	font-size: var(--text-h3);
	margin-bottom: var(--space-8);
}

.section-label span {
	padding: 0.1em 0.35em;
}

.section-label span:first-child {
	background: var(--color-navy);
	color: var(--color-text-inverse);
}

.section-label span:last-child {
	background: var(--color-primary);
	color: var(--color-ink);
}

/* ==========================================================================
   Header en navigatie
   ========================================================================== */

.hvg-header {
	/* Fixed i.p.v. sticky: de header staat vanaf het begin over de hero
	   heen (transparant, zie hieronder) en blijft daarna altijd zichtbaar
	   — er is dus geen moment waarop de header "in de flow" meescrollt en
	   dan pas sticky wordt. De ".is-scrolled"-klasse (js/header-scroll.js)
	   togglet alleen de achtergrond/schaduw/randkleur, nooit de positie —
	   zo kan er nooit gesprongen worden. Op pagina's zonder hero eronder
	   staat de witte achtergrond er vanaf het begin, zie de regel
	   "body:not(.home):not(.single):not(.hvg-has-navy-hero)" hieronder.
	   Homepage (crème hero), nieuwsartikelen én de nieuwsoverzicht-pagina
	   (allebei navy hero, zie ".hero--navy" in single.php resp.
	   template-parts/news-archive.php, en de ".hvg-has-navy-hero"-class uit
	   inc/setup.php) hebben wél een hero, dus daar blijft de header
	   transparant tot er gescrolld wordt. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: var(--z-header);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color var(--motion-base) var(--motion-easing),
		border-color var(--motion-base) var(--motion-easing),
		box-shadow var(--motion-base) var(--motion-easing);
}

body:not(.home):not(.single):not(.hvg-has-navy-hero) .hvg-header {
	/* Pagina's zonder hero eronder hebben niets om transparant overheen te
	   leggen — daar staat de witte achtergrond meteen vast. */
	background: var(--color-bg);
	border-bottom-color: var(--color-border);
}

.hvg-header.is-scrolled {
	background: var(--color-bg);
	border-bottom-color: var(--color-border);
	box-shadow: var(--shadow-card);
}

/* Nieuwsartikelen én de nieuwsoverzicht-pagina hebben een DONKERE hero
   (".hero--navy", i.t.t. de crème homepage-hero) — de transparante header
   heeft hier dus, anders dan op de homepage, wél een lichte tekst-/
   knopvariant nodig zolang hij nog niet gescrolld is, anders is de
   donkere tekst onleesbaar op de donkere hero eronder. */
body.single .hvg-header:not(.is-scrolled) .hvg-branding__name,
body.single .hvg-header:not(.is-scrolled) .menu-toggle,
body.hvg-has-navy-hero .hvg-header:not(.is-scrolled) .hvg-branding__name,
body.hvg-has-navy-hero .hvg-header:not(.is-scrolled) .menu-toggle {
	color: var(--color-text-inverse);
}

body.single .hvg-header:not(.is-scrolled) .menu-toggle,
body.hvg-has-navy-hero .hvg-header:not(.is-scrolled) .menu-toggle {
	background: rgba(255, 255, 255, 0.15);
}

body.single .hvg-header:not(.is-scrolled) .hvg-branding__badge,
body.hvg-has-navy-hero .hvg-header:not(.is-scrolled) .hvg-branding__badge {
	color: var(--color-text-inverse);
}

.hvg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: var(--space-2);
	min-height: var(--header-height);
}

/* Op desktop hoort de menu-trigger logisch bij het logo (links), niet
   helemaal aan de andere kant van het scherm — zie ook de herziene
   ".mobile-menu"-desktopstijl hieronder, die als een volle-breedte balk
   vanaf links onder de header verschijnt in plaats van rechts in te
   schuiven. Op mobiel/tablet blijft de knop bewust rechts (hamburger-
   conventie), dus alléén hier overschreven. */
@media (min-width: 1024px) {
	.hvg-header__inner {
		justify-content: flex-start;
		gap: var(--space-6);
	}

	/* Op desktop hoort de menu-knop helemaal aan de zijkant (links), met
	   logo+naam ernaast — omgekeerde volgorde t.o.v. mobiel (waar de
	   hamburger juist rechts hoort, logo+naam links). Geen DOM-wijziging
	   nodig: "order" herschikt de visuele volgorde binnen de flex-rij,
	   header.php's brontekst-volgorde (branding, dan header-actions)
	   blijft ongewijzigd en werkt dus vanzelf nog correct op mobiel. */
	.header-actions {
		order: -1;
	}
}

.hvg-branding {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	line-height: 1.1;
	min-width: 0;
}

.hvg-branding__logo {
	display: inline-flex;
	flex-shrink: 0;
}

.hvg-branding__logo img,
.hvg-branding__logo svg {
	display: block;
	height: calc(var(--header-height) - var(--space-6));
	width: auto;
}

.hvg-branding__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hvg-branding__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-body);
	color: var(--color-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hvg-branding__badge {
	/* Bewust geen pil-achtergrond/rand meer — oogde als een los
	   "chipje" i.p.v. onderdeel van de paginatekst. Font-family er nu
	   ook expliciet bij (was: erft de body-tekstfont) — als vet,
	   uitgelijnd label past dit beter bij ".hvg-branding__name" ernaast
	   (die al ".font-heading"/Montserrat gebruikte). Zelfde font-size,
	   dus het label neemt geen millimeter extra ruimte in. */
	align-self: flex-start;
	font-family: var(--font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-text-muted);
}

/* Geen aparte, altijd-zichtbare linklijst meer in de header (die
   veroorzaakte het omklappen) — alle navigatie loopt nu via de
   "Menu"-knop, net als in de referentie. De linklijst zelf leeft alleen
   nog in het mobile-menu-overlay-component (zie hvg2026_nav() in
   header.php) en in de footer. De losse "Neem contact op"-knop die hier
   eerder stond is vervallen (2026-07, header-layout logo+naam/hamburger) —
   ".header-actions" bevat nu alleen nog de menu-toggle, maar blijft als
   wrapper bestaan voor het geval er ooit weer een tweede actie bij komt. */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}

/* Alleen op desktop, uiterst rechts in de header (zie cda.nl/apeldoorn) —
   op mobiel/tablet zou dit naast de hamburger de header te vol maken; daar
   is alleen het menu al voldoende toegang tot alle navigatie. "margin-left:
   auto" duwt 'm helemaal naar rechts binnen ".hvg-header__inner" (flex),
   ook al staat "header-actions" (via "order:-1") vóór dit element. */
.hvg-header__cta {
	display: none;
	/* Expliciete line-height i.p.v. te vertrouwen op overerving: een
	   <button> (".menu-toggle" ernaast) en een <a> (dit element, via
	   ".btn") hebben elk hun eigen browser-standaard line-height-gedrag,
	   ook met verder identieke padding/font — daardoor kwamen de twee
	   pillen net niet exact even hoog uit. Met dezelfde vaste line-height
	   op allebei (zie ook de ".menu-toggle"-desktopregel hieronder) is het
	   hoogteverschil helemaal uitgesloten, ongeacht dat soort
	   element-eigen verschillen. */
	line-height: 1;
}

@media (min-width: 1024px) {
	.hvg-header__cta {
		display: inline-flex;
		margin-left: auto;
	}
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	width: auto;
	height: auto;
	flex-shrink: 0;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--color-bg-muted);
	/* Geen randje meer — voelde als een los, apart "knopje" i.p.v.
	   onderdeel van de pagina; de gevulde pil-achtergrond blijft staan
	   als voldoende visuele aanduiding dat het klikbaar is. */
	border: 1px solid transparent;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-small);
	color: var(--color-ink);
	cursor: pointer;
}

/* Expliciete :hover/:focus/[aria-expanded]-regel i.p.v. op de
   standaardstijl hierboven te vertrouwen: Varia's generieke knop-
   placeholder-regel (kaal <button>, zie base.css) heeft door de
   pseudo-classes toevallig een hogere specificiteit dan ".menu-toggle"
   alleen, en zou zonder deze regel alsnog indigo (paars) doorschemeren.
   Bewust "button.menu-toggle" (met het element ervoor) i.p.v. alleen
   ".menu-toggle": zelfs de eigen !important-veiligheidsregel in base.css
   (die Varia's paars moest neutraliseren) bleek zélf specifieker dan een
   kale ".menu-toggle:hover" en overschreef 'm alsnog — nu naar ORANJE
   i.p.v. paars (gemeld: "oranje/bruine hover- en actieve kleur, die mag
   er niet zijn"). De knop moet in ELKE toestand — rust, hover, focus, én
   open (aria-expanded) — exact dezelfde stijl/kleur houden; alleen het
   icoon (en de aria-label, zie js/navigation.js) wisselt. */
button.menu-toggle,
button.menu-toggle:hover,
button.menu-toggle:focus,
button.menu-toggle[aria-expanded="true"] {
	background: var(--color-bg-muted) !important;
	color: var(--color-ink) !important;
}

/* ".menu-toggle__icon-slot"/".menu-toggle__label-slot": beide varianten
   (hamburger/kruisje, "Menu"/"Sluiten") liggen via CSS Grid letterlijk
   boven op elkaar in dezelfde cel — de browser berekent de celbreedte dan
   op basis van de BREEDSTE van de twee, ongeacht welke er op dat moment
   zichtbaar is. Hieronder wisselt alleen nog "visibility" (i.p.v.
   "display") tussen de twee varianten: dat verbergt een variant net zo
   goed visueel én voor schermlezers, maar houdt 'm wél mee tellen voor de
   celbreedte. Zonder dit werd de knop zelf smaller/breder al naar gelang
   "Menu" (4 tekens) of "Sluiten" (7 tekens) zichtbaar was, en schoof
   alles wat ernaast staat (logo, "Sluit je aan") mee — gemeld als "de
   knoppen bovenin bewegen mee bij het openen van het menu". */
/* "justify-items/align-items: center": grid-items worden standaard
   "gestretcht" tot de volle celbreedte/-hoogte (bepaald door de bréédste
   variant, zie hierboven) — zonder deze regel bleef elk icoon/label-span
   zelf gewoon links uitgelijnd ín die (bredere) cel, waardoor bijvoorbeeld
   het smallere kruisje (×) niet meer in het midden van het ronde
   mobiele knopje stond, maar naar links opschoof (gemeld: "hamburger en
   kruisje staan niet meer in het midden van het rondje"). Met "center"
   blijft elke variant, ongeacht de celbreedte, precies op zijn eigen
   middelpunt staan. */
.menu-toggle__icon-slot,
.menu-toggle__label-slot {
	display: grid;
	justify-items: center;
	align-items: center;
}

.menu-toggle__icon-slot > *,
.menu-toggle__label-slot > * {
	grid-area: 1 / 1;
}

.menu-toggle__icon--close {
	visibility: hidden;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
	visibility: hidden;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
	visibility: visible;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__label--open {
	visibility: hidden;
}

/* "Sluiten" (naast het kruisje) alleen op desktop, alleen zodra het menu
   openstaat — op mobiel/tablet blijft de knop icoon-only (zie de
   "max-width: 1023.98px"-regel hieronder, die verbergt ALLE
   ".menu-toggle__label"-varianten sowieso, ongeacht "aria-expanded", via
   "display: none" — dat wint altijd van de "visibility" hier, dus dit
   blijft op mobiel/tablet gewoon volledig verborgen). */
.menu-toggle__label--closed {
	visibility: hidden;
}

@media (min-width: 1024px) {
	.menu-toggle[aria-expanded="true"] .menu-toggle__label--closed {
		visibility: visible;
	}
}

/* Onder desktopbreedte (tablet/mobiel): alleen het hamburger-icoon, geen
   "Menu"-tekst — anders viel de rest van de header (sitenaam, CTA) weg op
   smallere schermen (zie feedback n.a.v. de preview). De knop wordt dan
   ook vierkant/rond in plaats van een langwerpige pil met alleen een
   icoontje erin. */
@media (max-width: 1023.98px) {
	/* Bewust de hele ".menu-toggle__label-slot"-wrapper verbergen, niet
	   alleen de losse ".menu-toggle__label"-spans erin: die spans waren al
	   "display:none", maar de wrapper zelf (een grid-container, zie
	   hierboven) bleef daardoor als LEGE flex-child naast het icoon-slot
	   staan — inclusief zijn eigen "gap" ernaast. Met "justify-content:
	   center" op ".menu-toggle" werd de (onzichtbare) ruimte van die lege
	   wrapper + gap dan mee in het midden meegerekend, waardoor het icoon
	   zichtbaar naar links opschoof i.p.v. in het midden van het ronde
	   knopje te staan. */
	.menu-toggle__label-slot {
		display: none;
	}

	.menu-toggle__label {
		display: none;
	}

	.menu-toggle {
		padding: var(--space-2);
		width: 2.75rem;
		height: 2.75rem;
		justify-content: center;
		border-radius: 50%;
	}
}

/* Op desktop staat de "Menu"-knop naast ".hvg-header__cta" ("Sluit je
   aan", ".btn"-opbouw: padding var(--space-3) var(--space-6) + 2px rand) —
   ".menu-toggle" had zelf een kleinere padding/randdikte (var(--space-2)
   var(--space-4) + 1px), dus stond duidelijk lager. Hier gelijkgetrokken
   aan ".btn" i.p.v. andersom: Hans wil de knoppen op de hoogte van "Sluit
   je aan", niet "Sluit je aan" verkleinen. */
@media (min-width: 1024px) {
	.menu-toggle {
		padding: var(--space-3) var(--space-6);
		border-width: 2px;
		line-height: 1;
	}
}

/* Mobiel-menu-overlay — dezelfde linklijst als de footer, zie
   template-parts/navigation.php en referentieanalyse "Footer". */
.mobile-menu {
	position: fixed;
	/* top (i.p.v. "inset:0") zodat het paneel onder de header begint, niet
	   erover­heen — de header (met de knop die zelf in een sluitknop
	   verandert, zie js/navigation.js) moet zichtbaar/klikbaar blijven
	   terwijl dit paneel open is. */
	top: var(--header-height);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-mobile-menu);
	background: var(--color-navy);
	color: var(--color-text-inverse);
	overflow-y: auto;
	padding: var(--space-6) var(--space-4);
	transform: translateX(100%);
	transition: transform var(--motion-base) var(--motion-easing);
}

.mobile-menu[data-open="true"] {
	transform: translateX(0);
}

.mobile-menu__media {
	/* Op mobiel bewust geen grote decoratieve foto — houdt het kleine
	   scherm overzichtelijk. Vanaf 1024px (zie hieronder) wél zichtbaar,
	   naast de navigatie, net als op cda.nl/apeldoorn. */
	display: none;
}

.mobile-menu__follow {
	margin-top: var(--space-8);
}

.mobile-menu__follow .hero__kicker {
	color: rgba(255, 255, 255, 0.7);
}

/* De curve-SVG (".hero__curve") kreeg tot nu toe alléén op desktopbreedte
   (zie de @media-blok verderop) een fill-kleur en positionering. Op
   mobiel bleef hij daardoor volledig ongestyled: geen "position", geen
   "fill" — een <path> zonder eigen fill-attribuut valt dan terug op de
   SVG-standaardkleur, ZWART, en rendert bovendien gewoon "in de tekstflow"
   i.p.v. gepositioneerd (in de standaard-intrinsieke SVG-afmeting).
   Precies dát verscheen als "zwart artefact/sikkelvorm zodra het menu
   open is" (dit paneel is normaal onzichtbaar, dus de bug was er altijd
   al, maar pas zichtbaar bij het openen van het menu) — en drukte
   daarnaast de "Volg mij"-kop en social-iconen omlaag/uit model, wat
   waarschijnlijk ook de gemelde "iconen volgen een boog" verklaart. Op
   mobiel heeft deze curve sowieso geen functie (".mobile-menu__follow"
   staat daar op dezelfde navy-achtergrond als de rest van het paneel eromheen —
   er is geen kleurovergang om te accentueren), dus hier expliciet
   verborgen; pas vanaf 1024px (waar het paneel wél een lichte achtergrond
   heeft, zie hieronder) weer zichtbaar en correct gepositioneerd. */
.mobile-menu__follow .hero__curve {
	display: none;
}

.mobile-menu ul {
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
}

/* Bewust ".mobile-menu nav li + li" i.p.v. het bredere ".mobile-menu li +
   li": #mobile-menu bevat ná de <nav> ook de horizontale social-links-rij
   (zie header.php) — die zijn ook <li>-elementen, dus met de bredere
   selector kreeg élk social-icoon behalve het eerste een ongewenste
   "margin-top", wat ze in de gecentreerde flex-rij (".social-links",
   "align-items: center") lager liet uitkomen dan het eerste icoon (gemeld
   als "de eerste social media link staat nog iets hoger, niet in lijn"). */
.mobile-menu nav li + li {
	margin-top: var(--space-4);
}

.mobile-menu a {
	color: var(--color-text-inverse);
	text-decoration: none;
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
}

/* Bewust ".mobile-menu nav a::after" i.p.v. het bredere ".mobile-menu
   a::after": #mobile-menu bevat ná de <nav> ook de social-links-rij (zie
   header.php) — die zijn ook <a>-elementen, dus met de bredere selector
   kreeg elk rond social-icoontje er ongewenst een los groen bolletje
   naast (gemeld als "punten achter de social media-links"). Nu raakt de
   decoratieve stip alleen de echte navigatielinks. */
/* Bewust "vertical-align: baseline" i.p.v. "middle": met "middle" zweefde
   de stip los ter hoogte van het midden van de regel i.p.v. aan te sluiten
   op de tekst — met "baseline" plus een kleine, tekstgrootte-afhankelijke
   afstand (em i.p.v. de vaste --space-2) staat de stip er precies zo bij
   als een leesteken direct ná het laatste teken, alleen dan groen. */
/* "white-space: nowrap" op de link zelf voorkomt dat de browser een
   regeleinde-kans ziet tussen de tekst en de stip (inline-block content kan
   anders, bij weinig ruimte, los op een eigen regel eindigen) — gemeld als
   de stip die "in de ruimte" i.p.v. direct achter de tekst staat. Kleinere
   marge (was 0.25em) brengt 'm bovendien visueel dichter tegen de tekst. */
.mobile-menu nav a,
.hvg-footer__links a {
	white-space: nowrap;
}

.mobile-menu nav a::after,
.hvg-footer__links a::after {
	content: "";
	display: inline-block;
	width: 0.3em;
	height: 0.3em;
	margin-left: 0.15em;
	border-radius: 50%;
	background: var(--color-primary);
	vertical-align: baseline;
}

/* Bewust GEEN "@media (min-width:1024px){ .mobile-menu{display:none} }"
   meer hier: de header gebruikt nu op ALLE schermformaten hetzelfde
   "Menu"-knop-en-overlay-patroon (zie header.php), niet alleen op mobiel.
   Die oude regel hield het overlay-paneel op desktopbreedte permanent
   verborgen, ook wanneer je op de knop klikte — de knop deed daardoor op
   desktop niets (gemeld als "menu komt niet in beeld" op desktop, terwijl
   het op tablet/mobiel wel werkte). */

/* Op grotere schermen: geen volledig-scherm-overname (voelde "raar" op een
   groot scherm, zie feedback n.a.v. eerdere preview), maar ook geen los
   zwevend kaartje — een volle-breedte "headercontent"-balk die vanaf links
   onder de header een volledig-hoogte paneel wordt (i.p.v. een smalle
   balk) — net als op cda.nl/apeldoorn: navigatie + decoratieve foto naast
   elkaar, met een donkere, gebogen "Volg ons"-band onderin. Lichte
   achtergrond op het bovenste deel (i.p.v. de navy van het mobiele
   overlay) zodat het aanvoelt als één geheel met de (op desktop toch al
   witte/lichte) header erboven; de navy keert terug in de onderste band. */
@media (min-width: 1024px) {
	.mobile-menu {
		inset: auto;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: none;
		border-radius: 0;
		background: var(--color-bg);
		color: var(--color-ink);
		box-shadow: var(--shadow-card-hover);
		padding: 0;
		display: flex;
		flex-direction: column;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: transform var(--motion-base) var(--motion-easing),
			opacity var(--motion-base) var(--motion-easing),
			visibility 0s linear var(--motion-base);
	}

	.mobile-menu[data-open="true"] {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		transition: transform var(--motion-base) var(--motion-easing),
			opacity var(--motion-base) var(--motion-easing);
	}

	/* Bewust "align-items: start" i.p.v. "center": de foto-kolom is van
	   nature vaak hoger dan de (korte) navigatielijst — met "center"
	   werd de foto zowel boven ALS onder haar eigen rijhoogte uit
	   gecentreerd, waardoor de onderkant van de foto (incl. haar eigen
	   donkere studio-achtergrond) in de praktijk over de navy
	   "Volg mij"-band eronder heen kon vallen: leek in screenshots op
	   "losse, vreemde vormen" i.p.v. een nette, volle-breedte band. Met
	   "start" beginnen navigatie en foto op dezelfde bovenrand (net als
	   op cda.nl/apeldoorn) en groeit de foto voorspelbaar naar beneden,
	   binnen haar eigen kolom. "min-height: 0" is de standaard-fix voor
	   een bekende flexbox-eigenaardigheid: zonder die regel weigert een
	   "flex: 1 1 auto"-kind met "overflow-y: auto" soms te krimpen
	   onder zijn eigen inhoud, wat ditzelfde soort layout-gedoe geeft. */
	/* "flex: 0 1 auto" i.p.v. "1 1 auto": met flex-grow forceerde dit
	   element altijd de VOLLE resterende hoogte van ".mobile-menu" op te
	   vullen, ook als de navigatielijst/foto zelf veel minder ruimte
	   nodig hadden — daardoor werd de navy "Volg mij"-band (die er als
	   flex-sibling ná komt) helemaal naar de onderkant van het scherm
	   geduwd, soms voorbij de zichtbare viewport (gemeld: "de social
	   links zijn nog niet zichtbaar"). Zonder flex-grow neemt dit element
	   alleen zijn eigen, natuurlijke inhoudshoogte in, en sluit de navy
	   band er direct op aan — altijd zichtbaar, ongeacht schermhoogte. */
	.mobile-menu__inner {
		flex: 0 1 auto;
		min-height: 0;
		display: grid;
		grid-template-columns: 1fr 1.15fr;
		align-items: start;
		gap: var(--space-8);
		max-width: var(--container-max);
		width: 100%;
		margin-inline: auto;
		padding: var(--space-8) var(--space-4);
		overflow-y: auto;
	}

	.mobile-menu__media {
		display: flex;
		justify-content: center;
	}

	/* Groter dan hiervoor (was 420px) — mocht "groter/imposanter", zie
	   ook de verbrede fotokolom hierboven (was 0.9fr, nu 1.15fr). */
	.mobile-menu__portrait {
		width: 100%;
		max-width: 520px;
	}

	.mobile-menu ul {
		margin-bottom: 0;
	}

	.mobile-menu a {
		color: var(--color-ink);
		font-size: var(--text-h3);
	}

	/* Alleen op desktop (net als cda.nl/apeldoorn) een onderstreping bij
	   hover/focus op de echte navigatielinks — bewust ".mobile-menu nav a"
	   i.p.v. het bredere ".mobile-menu a", om dezelfde reden als bij de
	   groene stip hierboven: dat zou anders ook de social-iconen raken. De
	   stip zelf ("::after") krijgt expliciet "text-decoration: none",
	   anders loopt de streep dwars door het ronde bolletje heen. */
	.mobile-menu nav a:hover,
	.mobile-menu nav a:focus-visible {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	.mobile-menu nav a:hover::after,
	.mobile-menu nav a:focus-visible::after {
		text-decoration: none;
	}

	/* base.css zet hier standaard een gele focusring (bedoeld voor het
	   donkere mobiele overlay) — in het lichte bovenste deel hier weer de
	   gewone, blauwe focusring, anders is die op wit nauwelijks te
	   onderscheiden. De navy "Volg ons"-band (hieronder) blijft wél de
	   gele variant houden — die is namelijk zelf donker. */
	.mobile-menu__inner a:focus-visible,
	.mobile-menu__inner button:focus-visible {
		outline-color: var(--color-focus);
	}

	/* Donkere, gebogen band onderin — zelfde SVG-curve-techniek als
	   ".hero--curved"/".hvg-footer__cta" (zie de uitgebreide toelichting
	   daar): eerder stond hier nog de "losse ellips"-versie, die (net als
	   bij ".hero--curved") de boogrichting per ongeluk omdraaide (een
	   lichte ellips die de navy "wegsnijdt" i.p.v. 'm laat doorbollen).
	   Bovendien zit dit element genest in ".mobile-menu", dat
	   "overflow-y: auto" heeft — de SVG-aanpak heeft daar sowieso geen
	   last van, want die steekt nergens buiten zijn eigen doos uit. */
	/* "padding-top: calc(var(--space-8) + 60px)" i.p.v. gewoon
	   "var(--space-8)" (32px): de curve-SVG bovenin is zelf 60px hoog
	   (zie ".hero__curve" hieronder) — met maar 32px padding-top begon de
	   eigenlijke inhoud (kicker + social-iconen, gewone flow, niet
	   beïnvloed door de losstaand gepositioneerde curve) al ruim vóórdat
	   de curve overging in massieve navy, dus staken de bovenste ~28px
	   van die inhoud middenin de witte kant van de curve — gemeld als "de
	   social media links... overlappen het wit, waardoor ze niet
	   zichtbaar zijn". Nu begint de inhoud pas ruim onder de curve. */
	/* "flex: 1 0 auto" i.p.v. "0 0 auto": zonder flex-grow eindigde de navy
	   band precies op haar eigen inhoudshoogte — op een scherm dat hoger is
	   dan navigatie + foto + band samen bleef daaronder een stuk van
	   ".mobile-menu"'s eigen (lichte) achtergrondkleur zichtbaar, vlak boven
	   de paneelrand (gemeld als "witte balk onderin, blauw valt niet
	   helemaal door"). Met flex-grow vult de band exact de resterende
	   ruimte binnen het al vaste-hoogte paneel ("top"/"bottom:0", zie
	   ".mobile-menu" hierboven) — dat voegt geen extra, scrollbare hoogte
	   toe, het verdeelt alleen ruimte die er al was. De basis blijft "auto"
	   (haar eigen inhoudshoogte als ondergrens) en ".mobile-menu__inner"
	   houdt zijn shrink-vermogen, dus op een lág scherm (weinig ruimte)
	   verandert er niets aan het eerder opgeloste gedrag. */
	.mobile-menu__follow {
		position: relative;
		overflow: hidden;
		flex: 1 0 auto;
		margin-top: 0;
		background: var(--color-navy);
		padding: calc(var(--space-8) + 60px) var(--space-4) var(--space-8);
	}

	/* "max-width: none; margin-inline: 0" overschrijft hier bewust
	   ".mobile-menu__follow > *" (hieronder, "max-width:
	   var(--container-max); margin-inline: auto") — die regel is bedoeld
	   voor de tekst/iconen-inhoud (die moet gecentreerd en op leesbare
	   breedte blijven), maar ving de curve-SVG als kind óók, ook al zet
	   de regel hierboven zelf al expliciet "width: 100%". Op brede
	   schermen (> 1200px, "--container-max") werd de curve daardoor
	   afgekapt op 1200px i.p.v. de volle breedte: rechts van die 1200px
	   bleef de navy-achtergrond wél gewoon doorlopen (die komt van
	   ".mobile-menu__follow" zelf), maar zónder de ronde uitsnede erin —
	   dat gaf een zichtbare naad, gemeld als "vreemde vormen/onderdelen"
	   met een los rechthoekig stuk naast de gebogen band. */
	.mobile-menu__follow .hero__curve {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		max-width: none;
		margin-inline: 0;
		height: 60px;
		fill: var(--color-bg);
		transform: scaleY(-1);
		pointer-events: none;
	}

	.mobile-menu__follow > * {
		position: relative;
		max-width: var(--container-max);
		margin-inline: auto;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	background: var(--color-bg-warm);
	/* padding-top bevat ook de hoogte van de fixed header (zie .hvg-header
	   in deze file): de hero-áchtergrond loopt door tot achter de
	   transparante header, maar de inhoud (titel, tekst, knoppen) begint
	   er pas onder, zie base.css "body:not(.home) #main" voor de
	   overeenkomstige regel op alle andere pagina's. */
	padding-top: calc(var(--header-height) + var(--space-16));
	padding-bottom: var(--space-24);
	/* overflow:hidden zodat de "bleed"-foto (zie .hero__portrait--bleed)
	   nooit een horizontale scrollbalk op de hele pagina veroorzaakt. */
	overflow: hidden;
}

.hero__grid {
	display: grid;
	gap: var(--space-8);
	align-items: center;
}

/* Garandeert dat de tekstkolom altijd zichtbaar blijft, ook als de
   (nu grotere) witte accentcirkel in ".hero__media" links genoeg reikt om
   visueel te overlappen — tekst hoort er dan overheen te vallen, niet
   erachter te verdwijnen. */
.hero__content {
	position: relative;
	z-index: 2;
}

/* Mobiel: schaalt mee met de schermbreedte (i.p.v. een vast aantal
   pixels) maar blijft, via ".container"s eigen padding, altijd op
   veilige afstand van de schermrand — zo geen bleed op smalle schermen. */
.hero__media {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 400px;
	margin-inline: auto;
}

/* Op elke hero (homepage én de donkere artikel-/paginahero), alleen op
   mobiel: de cirkelfoto mag hier tot de schermrand doorlopen ("bleed"),
   net als op cda.nl/apeldoorn — was hiervoor bewust beperkt tot
   ".hero--navy", maar Hans wil dit ook op de homepage-hero. "calc(50% -
   50vw)" is de standaardtruc om een element buiten de padding van
   ".container" te laten uitsteken tot de volledige viewportbreedte, zonder
   de container zelf te verbreden; ".hero" heeft al "overflow: hidden" (zie
   hierboven), dus dit kan nooit een horizontale scrollbalk veroorzaken. */
@media (max-width: 767.98px) {
	.hero__media {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}
}

/* Vaste breedte per breakpoint (geen percentage van de grid-kolom meer,
   en geen aparte "height: ...%" naast een losse aspect-ratio-reset).
   Eerdere versies leidden het kader af van de kolombreedte ("min(420px,
   90%)") — maar die kolombreedte hangt af van hoeveel tekst (titel/
   intro) ernaast staat, dus het kader viel bij elk artikel weer anders
   uit: soms een ei (breedte- en hoogte-percentage resolven niet
   betrouwbaar tegen dezelfde referentie in een grid-cel), soms een klein
   rond fotootje bij een kort artikel. De banner-foto hoort altijd
   hetzelfde formaat te zijn, ongeacht hoeveel tekst ernaast staat — alleen
   schalend per breakpoint (tablet vs. desktop), nooit per artikel. Hoogte
   volgt met aspect-ratio automatisch uit de vaste breedte, dus kan nooit
   meer los daarvan uit de pas lopen. */
@media (min-width: 768px) {
	.hero__media {
		max-width: none;
		width: 380px;
		aspect-ratio: 1 / 1;
		margin-inline: auto;
	}
}

@media (min-width: 1024px) {
	.hero__media {
		/* Op precies 1024px is de 0.9fr-mediakolom te smal voor de volle
		   maat (zou de tekstkolom in duwen/overlappen) — daarom hier eerst
		   een tussenmaat, en pas vanaf 1280px (ruim voldoende
		   kolombreedte) de grootste cirkel. */
		width: 520px;
	}
}

@media (min-width: 1280px) {
	.hero__media {
		/* Past nog net in de verbrede 1fr/1fr-mediakolom (zie ".hero__grid"
		   hierboven) op de --container-max (1200px) breedte. */
		width: 580px;
	}
}

.hero__title {
	font-size: var(--text-h1);
}

.hero__intro {
	font-size: var(--text-body-lg);
	max-width: 42ch;
}

/* Zie de toelichting in template-parts/news-archive.php: alleen daar
   heeft de hero geen naastgelegen fotokolom, dus mag de intro de volle
   sectiebreedte gebruiken i.p.v. de 42ch-leesbreedte hierboven. */
.hero__intro--wide {
	max-width: none;
}

/* Navy-variant van ".hero", voor de nieuwsartikel-hero (single.php) — zelf
   opbouw als de crème homepage-hero, alleen donker. De introtekst hier is
   letterlijk de eerste alinea van het artikel (in PHP uit de rest van de
   content geknipt, zie single.php) — dus geen losse font-size-regel meer
   nodig zoals de eerdere ".article-body > p:first-of-type"-aanpak; die is
   vervallen nu de intro fysiek op een andere plek staat dan de rest. */
.hero--navy {
	background: var(--color-navy);
	color: var(--color-text-inverse);
}

/* base.css zet op elke kop (h1 t/m h6) een EXPLICIETE kleur
   (--color-ink) — die wint altijd van de overerfde kleur van
   ".hero--navy" hierboven, ongeacht specificiteit, omdat een expliciete
   regel op het element zelf altijd voorrang heeft boven een geërfde
   waarde. Vandaar hier expliciet overschreven (zelfde patroon als het al
   bestaande ".section--navy h2/h3/h4", nu ook voor h1 in de hero). */
.hero--navy .hero__title {
	color: var(--color-text-inverse);
}

.hero--navy .entry-meta {
	color: rgba(255, 255, 255, 0.7);
}

.hero--navy .hero__intro {
	color: rgba(255, 255, 255, 0.92);
}

/* Afgeronde onderrand — "onderkant van een cirkel"-vorm via een SVG
   (template-parts/curve-divider.php) die VOLLEDIG BINNEN de eigen sectie
   blijft, i.p.v. via border-radius-hoeken of een overhangende ellips.
   Geschiedenis (drie eerdere pogingen, elk met een eigen probleem):
   1) border-radius met 50%-hoeken per hoek raakt per definitie exact de
      rand van de sectie zelf — bij een 100%-brede sectie viel dat samen
      met de paginarand ("afgeronde hoek i.p.v. onderkant van een
      cirkel").
   2) de hele sectie 160vw breed maken zodat dat raakpunt buiten beeld
      valt — loste dat op, maar brak op mobiel het horizontaal scrollen
      (bevestigd met screenshots).
   3) een losse ellips die over de sectiegrens heen mocht steken (met
      overflow-x:hidden/overflow-y:visible om het scroll-probleem van (2)
      te vermijden) — technisch correct, maar de volgende sectie tekende
      er in de praktijk toch overheen (stacking-context-gedoe over
      meerdere secties heen bleek niet betrouwbaar te sturen).
   Een SVG die zelf de vorm tekent en gewoon binnen de sectie (bottom:0)
   blijft heeft geen van deze problemen: geen afhankelijkheid van de
   sectiebreedte, geen overflow buiten de eigen doos nodig, geen
   stacking-context over sectiegrenzen heen. */
.hero--curved {
	position: relative;
	overflow: hidden;
	padding-bottom: calc(var(--space-8) + 64px);
}

.hero--curved > * {
	position: relative;
}

.hero--curved .hero__curve {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 64px;
	fill: var(--color-bg);
	pointer-events: none;
}

@media (min-width: 768px) {
	.hero--curved {
		padding-bottom: calc(var(--space-8) + 110px);
	}

	.hero--curved .hero__curve {
		height: 110px;
	}
}

/* Trekt de eerstvolgende sectie (bijv. de nieuws-grid) met een negatieve
   margin omhoog, zodat de bovenkant (de kaartafbeeldingen) over de
   gebogen onderrand van ".hero--curved" heen valt — zelfde gelaagde
   effect als op cda.nl/apeldoorn, i.p.v. een nette, rechte overgang. */
/* "+60px" i.p.v. kaal "var(--space-24)": zonder die extra pull viel de
   overlap op mobiel duidelijk kleiner uit dan op desktop (gemeld: "de
   overlap is te klein... optisch gelijk maken aan desktop") — de curve
   zelf is op mobiel ook kleiner (64px hoog, zie ".hero--curved" hierboven,
   tegenover 110px vanaf 768px), dus een gelijke overlap in absolute
   pixels zou zonder correctie relatief ondieper ogen. Puur deze waarde
   aangepast, geen wijziging aan de mobiele kaarten-layout zelf (nog
   steeds 1 kolom, zie ".card-grid"). */
.section--overlap-hero {
	margin-top: calc(-1 * (var(--space-24) + 60px));
	position: relative;
	z-index: 1;
}

/* Extra 50px omhoog t.o.v. de vorige waarde (was +40px) — op desktop
   mochten de nieuwskaarten nog wat verder "in" de header/curve vallen, zie
   referentiescreenshot (cda.nl/apeldoorn nieuwsoverzicht). */
@media (min-width: 768px) {
	.section--overlap-hero {
		margin-top: calc(-1 * (var(--space-24) + 90px));
	}
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.hero__portrait {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}

/* Grote, asymmetrisch geplaatste foto die deels buiten het kader mag
   vallen — zie redesign-reference-analysis.md, sectie "Hero": de
   cirkelvorm doorbreekt bewust de rechthoekige sectiegrens, net als op
   cda.nl/apeldoorn. Alleen op grotere schermen; op mobiel blijft de foto
   gewoon volledig zichtbaar en gecentreerd (zie .hero__portrait hierboven).
   Breedte én hoogte schalen SAMEN (130%/130%) t.o.v. het vaste kader
   hierboven, dus de cirkelvorm blijft altijd kloppen. Verticaal blijft de
   foto gecentreerd op het kader (slechts een klein beetje boven/onder het
   kader) — het overschot gaat vooral naar rechts, niet naar boven/onder. */
/* Decoratieve witte cirkel die achter/onder de hero-foto vandaan piept
   (linksonder), zie template-parts/homepage/hero.php — alleen op de
   homepage, nergens anders. Verborgen op mobiel (past niet bij de
   symmetrische, volledig-zichtbare mobiele fotoweergave, zie
   ".hero__portrait" hierboven) — pas zichtbaar vanaf 768px, samen met de
   asymmetrische ".hero__portrait--bleed" hieronder. */
.hero__media-accent {
	display: none;
}

@media (min-width: 768px) {
	/* Zelfde grootte als de hoofdfoto (130%, zie ".hero__portrait--bleed"
	   hieronder) en dicht op de foto's eigen positie (top:50%/left:-4%)
	   i.p.v. een grote losse verschuiving — leest zo als een schaduw die
	   direct achter de foto vandaan komt i.p.v. een losstaande, verkeerd
	   geplaatste vorm. Kleinere verschuiving houdt 'm bovendien ruim
	   binnen ".hero"s eigen "overflow: hidden"-doos, dus loopt 'm nooit
	   uit de hero-achtergrond de content-sectie eronder in. */
	.hero__media-accent {
		display: block;
		position: absolute;
		z-index: 0;
		top: 58%;
		left: -10%;
		width: 130%;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		background: var(--color-bg);
		transform: translateY(-50%);
	}

	.hero__portrait--bleed {
		position: absolute;
		z-index: 1;
		top: 50%;
		left: -4%;
		width: 130%;
		height: 130%;
		transform: translateY(-50%);
		max-width: none;
		margin: 0;
	}
}

/* Grotere, prominentere foto op ELKE donkere hero (".hero--navy") — dus
   zowel nieuwsartikelen (single.php, geen curve) als generieke pagina's
   (page.php, MET curve, bijv. "Raadslid?! Maar waarom..."). Stond hiervoor
   alleen aan voor ":not(.hero--curved)" (alleen artikelen), wat de foto op
   page.php-pagina's duidelijk kleiner en minder prominent liet ogen dan
   dezelfde soort foto op een nieuwsartikel (gemeld als inconsistent). Geen
   "max-width: 480px"-kap meer (die gold alleen voor de standaard, kleinere
   ".hero__portrait"). De overloop-over-de-onderrand-truc hieronder blijft
   WEL alleen voor ":not(.hero--curved)" — die combineert niet met
   page.php's eigen curve-overgang, en is hier dus bewust niet toegepast. */
.hero--navy .hero__portrait {
	max-width: none;
}

@media (min-width: 768px) {
	.hero--navy .hero__media {
		width: 460px;
	}
}

@media (min-width: 1024px) {
	.hero--navy .hero__media {
		width: 600px;
	}
}

@media (min-width: 1280px) {
	.hero--navy .hero__media {
		width: 680px;
	}
}

/* Mobiel (< 768px): ZELFDE overloop-principe als desktop hieronder — Hans
   wilde niet "strak aansluitend", maar dat de foto ook hier zichtbaar
   over de onderrand van de blauwe hero heen steekt ("deze foto zou onder
   het blauwe kader moeten uitsteken"). Bewust "overflow: visible" i.p.v.
   losse "overflow-x/-y" (een bekende CSS-eigenaardigheid: als de ene as
   niet-"visible" is, valt de andere—ook al staat die op "visible"—terug op
   "auto", wat nog steeds knipt) — dat is hier veilig: de enige child die
   ooit horizontaal tot de viewportrand kwam (".hero__media", 100vw + een
   precies uitgerekende negatieve margin) is daar exact op afgestemd en
   steekt sowieso nooit ECHT buiten de viewport, dus niets om nog
   horizontaal te hoeven afknippen. */
@media (max-width: 767.98px) {
	.hero--navy:not(.hero--curved) {
		overflow: visible;
		padding-bottom: var(--space-4);
		position: relative;
		z-index: 2;
	}

	.hero--navy:not(.hero--curved) .hero__media {
		position: relative;
		bottom: -40px;
	}

	.hero--navy:not(.hero--curved) + .section {
		position: relative;
		z-index: 1;
	}
}

/* Overloop van de foto over de onderrand van de hero heen — TWEEDE
   poging, ditmaal zonder de artikeltekst zelf te verplaatsen (de eerste
   poging trok de hele volgende sectie met een negatieve margin omhoog,
   wat bij een kort artikel de tekst tót in het nog zichtbare navy-vlak
   trok en onleesbaar maakte, zie git-historie/eerdere toelichting hier).
   Deze keer (ALLEEN vanaf 768px, zie hierboven voor mobiel):
   1. ".hero"s "overflow: hidden" (nodig voor de mobiele 100vw-bleed-truc,
      zie ".hero__media" hierboven) staat hier expliciet weer uit, ZODAT
      de foto zichtbaar buiten haar eigen doos mag steken — alleen vanaf
      768px, dus de mobiele truc (die overflow juist wél nodig heeft)
      blijft volledig intact.
   2. De hero's padding-bottom wordt kleiner (var(--space-8) i.p.v.
      var(--space-24)) en de foto krijgt een vaste, RELATIEVE verschuiving
      naar beneden (bottom: -70px) — een vast getal, dus voorspelbaar
      ongeacht hoeveel tekst er in de hero staat (i.t.t. de eerste poging,
      die afhing van de relatieve hoogte van tekst- vs. fotokolom).
   3. De hero krijgt een hogere z-index dan de sectie erna, zodat de
      overstekende foto daar zichtbaar overheen valt i.p.v. erdoor bedekt
      te worden — maar de sectie ERNA blijft op haar NORMALE positie
      staan (geen negatieve margin!), dus de tekst kan nooit meer
      verschuiven of onleesbaar worden, wat er ook in de hero staat. */
@media (min-width: 768px) {
	.hero--navy:not(.hero--curved) {
		overflow: visible;
		padding-bottom: var(--space-8);
		position: relative;
		z-index: 2;
	}

	.hero--navy:not(.hero--curved) .hero__media {
		position: relative;
		bottom: -70px;
	}

	.hero--navy:not(.hero--curved) + .section {
		position: relative;
		z-index: 1;
	}
}

.hero__kicker {
	display: inline-block;
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

/* ".hero__kicker" is ontworpen voor lichte achtergronden (gedempt
   grijs op crème/wit) — in de donkere footer-CTA ("Contact",
   "Fractie CDA Apeldoorn") is diezelfde grijstint vrijwel onleesbaar
   tegen de navy-achtergrond. Lichte, transparante variant i.p.v. vol wit,
   zodat het visueel nog steeds als "gedempt label" leest, maar dan met
   voldoende contrast op donker. */
.hvg-footer__cta .hero__kicker {
	color: rgba(255, 255, 255, 0.7);
}

/* Defensief: h2 hoort hier via overerving van ".hvg-footer__cta" al wit
   te zijn, maar expliciet zetten sluit uit dat er ooit ergens een andere
   regel (nu of later) die overerving doorbreekt. */
.hvg-footer__cta h2 {
	color: var(--color-text-inverse);
}

@media (min-width: 768px) {
	.hero__grid {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

@media (min-width: 1280px) {
	.hero__grid {
		/* Bredere mediakolom vanaf hier, anders past de grotere cirkel
		   (zie ".hero__media") niet zonder de tekstkolom in te duwen. */
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   Kaarten
   ========================================================================== */

.card-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.card-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--motion-base) var(--motion-easing), transform var(--motion-base) var(--motion-easing);
}

.card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card__click-indicator {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-small);
}

.card__body {
	padding: var(--space-4);
}

.card__meta {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
}

.card__title {
	font-size: var(--text-h5);
	margin-bottom: 0;
	/* Max. 2 regels afkappen zodat kaarten in dezelfde rij niet door een
	   lange titel uit elkaar gaan lopen — gecombineerd met de vaste
	   ".card__media"-verhouding hierboven zorgt dit voor gelijke
	   kaarthoogtes per rij. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card--featured {
	grid-column: 1 / -1;
}

@media (min-width: 640px) {
	.card--featured {
		grid-column: span 2;
	}

	.card--featured .card__media {
		aspect-ratio: 21 / 9;
	}
}

/* ==========================================================================
   Vlogs — grid van Facebook/Instagram/TikTok-embeds, zie
   template-parts/homepage/vlogs.php en js/vlog-embeds.js. Facade-kaart
   (thumbnail/placeholder + platform-icoon + play-knop) tot er geklikt
   wordt; daarna vervangt JS de inhoud van ".vlog-card__facade" door de
   echte, platform-specifieke embed.
   ========================================================================== */

.vlog-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.vlog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.vlog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Voor losse embeds in een artikel (het "[hvg_vlog]"-shortcode, zie
   mu-plugins/hvg2026-vlogs.php) — buiten ".vlog-grid" heeft ".vlog-card"
   zelf geen breedte, die kwam tot nu toe altijd van de grid-kolom.
   "!important": deze kaart staat als direct kind in ".entry-content",
   waar Varia's eigen hoog-specifieke leesbreedte-regel (zie de toelichting
   bij ".entry-content .card-grid" in base.css) 'm anders naar ~750px
   breed zou trekken i.p.v. de bedoelde, veel smallere kaartbreedte — met
   precies dezelfde "waarom staat dit niet waar ik verwacht"-uitwerking. */
.vlog-card--standalone {
	max-width: 360px !important;
	margin-inline: auto;
}

.vlog-card__facade {
	position: relative;
	aspect-ratio: 9 / 16;
	max-height: 480px;
	margin-inline: auto;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-navy);
	box-shadow: var(--shadow-card);
}

.vlog-card__thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vlog-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-navy);
}

.vlog-card__placeholder-icon {
	width: 2.5rem;
	height: 2.5rem;
	color: rgba(255, 255, 255, 0.35);
}

.vlog-card__platform-badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-card);
}

.vlog-card__platform-icon {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--color-ink);
}

.vlog-card__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(46, 51, 80, 0.15);
	border: none;
	cursor: pointer;
	transition: background-color var(--motion-fast) var(--motion-easing);
}

/* Bewust "button.vlog-card__play:hover" i.p.v. kaal ".vlog-card__play:
   hover": base.css's eigen Varia-veiligheidsregel
   ("button:not(.has-background):hover") heeft dankzij het element ervoor
   een fractie hogere specificiteit dan een kale class-selector — ook al
   staat er hier ook al "!important", dat wint dan nog steeds (gemeld:
   "bij hover worden ze oranje" i.p.v. het bedoelde donkere navy-waas).
   Zelfde patroon als eerder bij ".menu-toggle", zie components.css. */
button.vlog-card__play:hover {
	background: rgba(46, 51, 80, 0.35) !important;
}

.vlog-card__play-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-card-hover);
	transition: transform var(--motion-fast) var(--motion-easing);
}

/* Inline SVG-driehoek i.p.v. het Unicode-teken "▶" — dat laatste rendert
   per systeemlettertype anders (vaak dun, scheef of niet optisch
   gecentreerd) en oogde daardoor onverzorgd. */
.vlog-card__play-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	/* optisch centreren: een driehoek weegt visueel naar links */
	margin-left: 0.15rem;
}

.vlog-card__play:hover .vlog-card__play-icon {
	transform: scale(1.08);
}

.vlog-card__facade--loading .vlog-card__play {
	display: none;
}

/* Zodra JS de embed injecteert (blockquote/iframe van Facebook/Instagram/
   TikTok), mag die zijn eigen, vaak grillige afmeting aanhouden i.p.v.
   geforceerd binnen de 9:16-kader te blijven — anders knippen embeds af.
   "display: flex; justify-content: center" erbij: Instagram's eigen
   widget bepaalt zijn eigen breedte (vaak smaller dan de kaart) en stond
   zonder dit expliciet gecentreerd te worden linksgeduwd i.p.v. midden in
   de kaart (gemeld: "staat in een kader uit het midden, raar"). */
.vlog-card__facade--loading {
	aspect-ratio: auto;
	max-height: none;
	overflow: visible;
	background: var(--color-bg-muted);
	display: flex;
	justify-content: center;
}

.vlog-card__title {
	margin-top: var(--space-3);
	font-size: var(--text-body);
	font-weight: 600;
	text-align: center;
	/* max. 2 regels afkappen — zelfde line-clamp-patroon als .card__title
	   in de nieuwsgrid (zie hieronder, "Kaarten"). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Persoonskaart — sober: foto + rol + naam, geen extra franje (zie
   referentieanalyse "Kaarten en contentmodules"). */
.person-card {
	text-align: left;
}

.person-card img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-3);
}

.person-card__role {
	font-size: var(--text-small);
	color: var(--color-text-muted);
}

.person-card__name {
	font-weight: 700;
}

/* ==========================================================================
   Onderwerp-tegels
   ========================================================================== */

.topic-tile {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	color: var(--color-text-inverse);
}

.topic-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.topic-tile__label {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--text-small);
}

.topic-tile__label span {
	display: block;
	padding: 0.15em 0.5em;
}

.topic-tile__label span:first-child {
	background: var(--color-navy);
}

.topic-tile__label span:last-child {
	background: var(--color-primary);
	color: var(--color-ink);
}

/* Onderwerp-kaart zonder foto (tekst-only variant van topic-tile, voor
   onderwerpen die geen eigen afbeelding hebben). */
.topic-card {
	background: var(--color-bg);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	/* Iets steviger aanwezig: een subtiele rand naast de bestaande schaduw,
	   zodat de kaart zich beter onderscheidt van de (vaak lichte) sectie-
	   achtergrond erachter. */
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
}

/* De twee "Even kennismaken"-kaarten (Hans' paspoort / Wist je dat...)
   krijgen elk een subtiele accentkleur in de huisstijl — groen/blauw i.p.v.
   een neutrale rand, zie inc/homepage-content.php. */
.topic-card--green {
	border-color: rgba(44, 200, 77, 0.45);
}

.topic-card--blue {
	border-color: rgba(60, 65, 93, 0.35);
}

.topic-card h3 {
	font-size: var(--text-h5);
	margin-bottom: var(--space-3);
}

.topic-card p {
	color: var(--color-text-muted);
	margin-bottom: 0;
}

/* ==========================================================================
   Homepage-introtekst (sectie 2) — optionele ronde foto links van de
   tekst, zie template-parts/homepage/intro.php.
   ========================================================================== */

.intro-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	align-items: flex-start;
}

/* "overflow-x: hidden" op de sectie-wrapper (zie ".intro-section" in
   intro.php) i.p.v. op ".intro-block" zelf: overflow moet ergens BREDER
   dan het element staan dat overloopt, anders knipt het z'n eigen
   overloop meteen weer af voordat er iets zichtbaar wordt. */
.intro-section {
	overflow-x: hidden;
}

/* Steekt een stukje links buiten de container — "wat spannender", zie
   cda.nl/apeldoorn-stijl. Vaste, bescheiden waarde (geen volledige
   "tot de viewportrand"-bleed zoals bij de hero-foto's) — precies genoeg
   om duidelijk buiten het kader te vallen zonder de foto zelf te vervormen.
   ".intro-section"s "overflow-x: hidden" (hierboven) voorkomt dat dit ooit
   een horizontale scrollbalk op de pagina veroorzaakt, ook op mobiel. */
.intro-block__media {
	flex-shrink: 0;
	margin-left: -48px;
}

@media (min-width: 640px) {
	.intro-block__media {
		margin-left: -72px;
	}
}

@media (min-width: 1024px) {
	.intro-block__media {
		margin-left: -120px;
	}
}

.intro-block__photo {
	width: 170px;
	height: 170px;
	border-radius: 50%;
	object-fit: cover;
}

/* Iets groter dan de site-brede standaard bodytekst (var(--text-body),
   1rem) — gevraagd om de sectie wat meer gewicht te geven nu hij de volle
   containerbreedte gebruikt i.p.v. de smalle "container--article". */
.intro-block__text p {
	font-size: var(--text-body-lg);
}

@media (min-width: 640px) {
	.intro-block {
		flex-direction: row;
		gap: var(--space-8);
	}

	.intro-block__photo {
		width: 210px;
		height: 210px;
	}
}

/* Mobiel-only tekstomloop: op mobiel stond het fotootje boven een grote,
   verder lege witte ruimte (de flex-layout hierboven stapelt pas vanaf
   640px naast elkaar; daaronder staat de foto los boven de tekst). Deze
   losse, geïsoleerde regel laat de tekst er op mobiel gewoon rechts naast
   beginnen via een klassieke CSS-"float" i.p.v. de flex-layout — raakt
   bewust GEEN van de bovenstaande regels aan (die blijven identiek gelden
   vanaf 640px), dus desktop/tablet-gedrag verandert hierdoor niet. */
@media (max-width: 639.98px) {
	.intro-block {
		display: block;
	}

	/* "shape-outside: circle(50%)" laat de tekst de ronde rand van de
	   foto zelf volgen i.p.v. de hoekige, rechthoekige doos eromheen (een
	   gewone "float" volgt altijd de rechthoekige box, ongeacht hoe rond
	   de inhoud zelf oogt) — "shape-margin" geeft daarbij nog een eigen,
	   met de ronding meebuigende marge, los van de rechte "margin"
	   hieronder (die blijft nodig voor de ruimte BOVEN/ONDER de foto,
	   "shape-margin" regelt alleen hoe dicht de tekst opzij van de curve
	   mag komen). Expliciete breedte/hoogte i.p.v. vertrouwen op
	   "shrink-to-fit": "shape-outside" rekent een cirkel-percentage uit
	   t.o.v. de eigen doos van dit element, dus die moet exact vierkant
	   zijn en overeenkomen met ".intro-block__photo"s eigen 170px. */
	.intro-block__media {
		float: left;
		width: 170px;
		height: 170px;
		margin: 0 var(--space-4) var(--space-4) 0;
		shape-outside: circle(50%);
		shape-margin: var(--space-3);
	}
}

/* ==========================================================================
   Citaat / pull-quote — zie referentieanalyse "Nieuwsartikel"
   ========================================================================== */

.entry-content blockquote {
	font-style: italic;
	font-size: var(--text-body-lg);
	border-left: 4px solid var(--color-primary);
	margin: var(--space-8) 0;
	padding-left: var(--space-6);
	color: var(--color-ink);
}

/* ==========================================================================
   Artikel-metadata (datum, leestijd) — nieuwsartikel-detailpagina
   ========================================================================== */

.entry-meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-small);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

.entry-meta__dot {
	width: 0.3em;
	height: 0.3em;
	border-radius: 50%;
	background: currentColor;
}

/* ==========================================================================
   "Deel dit artikel" — social-share knoppen onderaan een nieuwsartikel,
   zie template-parts/share-buttons.php.
   ========================================================================== */

.share-block {
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.share-block__label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-h5);
	margin-bottom: var(--space-4);
}

.share-links {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-3);
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
}

.share-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	color: var(--color-ink);
	transition: background-color var(--motion-fast) var(--motion-easing),
		color var(--motion-fast) var(--motion-easing),
		border-color var(--motion-fast) var(--motion-easing);
}

.share-links__link:hover,
.share-links__link:focus-visible {
	background: var(--color-navy);
	color: var(--color-text-inverse);
	border-color: var(--color-navy);
}

.share-links__icon {
	width: 1.15rem;
	height: 1.15rem;
}

/* De "kopieer link"-knop (Instagram, zie template-parts/share-buttons.php)
   is een <button>, niet een <a> — reset het default knop-uiterlijk
   (rand/achtergrond/font) zodat hij er identiek uitziet aan de andere
   ronde deel-iconen. Bewust met "button.share-links__link" i.p.v. alleen
   ".share-links__link": Varia's generieke ongestylede-knop-vangnet (zie
   base.css) heeft via het element ervoor een net iets hogere specificiteit
   en zou anders alsnog kunnen doorschemeren (zelfde patroon als eerder bij
   ".menu-toggle", zie de toelichting daar). */
button.share-links__link {
	font: inherit;
	background: none;
	cursor: pointer;
}

.share-links__link--copied {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-ink) !important;
}

.share-block__hint {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	margin-top: calc(-1 * var(--space-4));
	margin-bottom: var(--space-6);
}

/* ==========================================================================
   "Praat mee" / CTA-band — donker rustpunt, zie referentieanalyse "Layout"
   ========================================================================== */

.cta-band {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

.cta-band .btn--primary {
	margin-top: var(--space-6);
}

/* ==========================================================================
   Disclaimer — leesbaar informatieblok i.p.v. kleine grijze regel
   ========================================================================== */

.disclaimer-block {
	background: var(--color-bg-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	font-size: var(--text-small);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Placeholder — expliciet gemarkeerde ontbrekende content, zie
   redesign-architecture.md "Openstaand punt" en CLAUDE.md-richtlijn
   ========================================================================== */

.content-placeholder {
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--text-small);
}

.content-placeholder strong {
	display: block;
	color: var(--color-ink);
	font-family: var(--font-heading);
	margin-bottom: var(--space-2);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.hvg-footer__cta {
	position: relative;
	/* Was "hidden" — puur defensief, de curve-SVG zelf steekt nooit buiten
	   haar eigen doos (zie toelichting bij ".hero--curved"). Nu bewust
	   "visible": ".hvg-footer__cta-badge" (het CDA-beeldmerk dat over de
	   rand van de curve heen "zweeft", zie cda.nl/apeldoorn) moet daar
	   juist wél overheen mogen steken. */
	overflow: visible;
	background: var(--color-navy);
	color: var(--color-text-inverse);
	padding-block: var(--space-16);
	/* Zelfde SVG-curve-techniek als ".hero--curved" (zie de uitgebreide
	   toelichting daar), hier bovenaan i.p.v. onderaan — de SVG zelf
	   (".hero__curve") wordt hieronder verticaal gespiegeld en boven i.p.v.
	   onder gepositioneerd. */
	padding-top: calc(var(--space-16) + 64px);
}

/* Beeldmerk dat over de rand van de curve heen "zweeft" — zie
   cda.nl/apeldoorn. Gecentreerd op (50%, 0) van ".hvg-footer__cta" (het
   startpunt van de curve): "translate(-50%, -50%)" plaatst het exacte
   midden van de badge op die rand, zodat de bovenste helft over het witte
   vlak erboven valt en de onderste helft over de navy band. Witte cirkel
   erachter (optioneel gevraagd, "een plus") geeft contrast tegen beide
   achtergronden. */
/* "top" op basis van visuele terugkoppeling i.p.v. de (herhaaldelijk
   fout gebleken) berekening op basis van de bezier-curve-wiskunde: die
   bleef "veel te laag" opleveren, ondanks meerdere herberekeningen. Hans
   gaf concreet door: ~1,5× de hoogte van de badge omhoog t.o.v. de
   eerdere 16px/28px — dus 16-1.5*72=-92px (mobiel) resp. 28-1.5*104=-128px
   (desktop, zie hieronder). Vertrouw dit soort visuele kalibratie boven
   verdere pogingen tot uitrekenen zonder zelf te kunnen zien wat er
   gebeurt. */
.hvg-footer__cta-badge {
	position: absolute;
	top: -92px;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 72px;
	height: 72px;
	padding: 6px;
	border-radius: 50%;
	background: var(--color-bg);
	box-shadow: var(--shadow-card);
}

.hvg-footer__cta-badge svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {
	.hvg-footer__cta-badge {
		top: -128px;
		width: 104px;
		height: 104px;
		padding: 8px;
	}
}

.hvg-footer__cta .hero__curve {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 64px;
	fill: var(--color-bg);
	transform: scaleY(-1);
	pointer-events: none;
}

/* Op een nieuwsartikel (single.php) is de sectie vlak vóór de footer
   altijd de crème ".section--warm" van "Lees verder" (zie
   template-parts/content-related.php, die alleen op is_singular('post')
   rendert) — nooit wit. De standaard witte vulkleur hierboven paste daar
   niet bij en gaf een zichtbaar wit vlak tussen dat crème blok en de navy
   footer (gemeld als "witte vlakken tussen het overige nieuws en de
   footer"). Bewust alleen voor "body.single": op andere paginatypes (bijv.
   de homepage, waar de sectie vóór de footer per beheerder-instelling
   wisselt) blijft de bestaande witte aansluiting ongewijzigd. */
body.single .hvg-footer__cta .hero__curve {
	fill: var(--color-bg-warm);
}

.hvg-footer__cta > * {
	position: relative;
}

@media (min-width: 768px) {
	.hvg-footer__cta {
		padding-top: calc(var(--space-16) + 110px);
	}

	.hvg-footer__cta .hero__curve {
		height: 110px;
	}
}

.hvg-footer__cta-grid {
	display: grid;
	gap: var(--space-8);
}

/* Zonder deze regel vallen gewone tekstlinks hier (e-mailadres, fractie-
   website) terug op de site-brede, donkere linkkleur (--color-link, zie
   base.css) — die is vrijwel onleesbaar op deze donkere navy-achtergrond.
   ".hvg-footer__cta { color: ... }" zet alléén de kleur van gewone tekst
   goed, want een expliciete linkkleur-regel wint altijd van overerving,
   ongeacht specificiteit. Moet vóór ".hvg-footer__links a" en
   ".social-links a" in het bestand staan zodat die twee (met eigen, meer
   bewust gekozen styling) bij gelijke specificiteit alsnog voorrang
   houden. */
.hvg-footer__cta a {
	color: var(--color-text-inverse);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.45);
	text-underline-offset: 0.15em;
}

.hvg-footer__cta a:hover,
.hvg-footer__cta a:focus-visible {
	text-decoration-color: currentColor;
}

@media (min-width: 768px) {
	.hvg-footer__cta-grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.hvg-footer__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hvg-footer__links li + li {
	margin-top: var(--space-3);
}

.hvg-footer__links a {
	color: var(--color-text-inverse);
	text-decoration: none;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-h5);
}

/* Bewust "flex-wrap: nowrap" i.p.v. "wrap": bij vijf iconen (2.5rem +
   var(--space-3) gap elk) past de rij ruim binnen elke schermbreedte waar
   dit component voorkomt — "wrap" liet in de praktijk soms één icoon naar
   een tweede regel vallen (gemeld als "staan nog niet op één lijn"), ook
   al was daar in theorie genoeg ruimte. "nowrap" sluit dat volledig uit. */
.social-links {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-3);
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
}

.social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-text-inverse);
	transition: background-color var(--motion-fast) var(--motion-easing),
		color var(--motion-fast) var(--motion-easing);
}

.social-links a:hover,
.social-links a:focus-visible {
	background: var(--color-primary);
	color: var(--color-ink);
}

.social-links__icon {
	width: 1.15rem;
	height: 1.15rem;
}

.hvg-footer__legal {
	background: var(--color-bg-warm);
	padding-block: var(--space-6);
	font-size: var(--text-small);
	color: var(--color-text-muted);
}

.hvg-footer__legal .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
}

.hvg-footer__legal ul {
	display: flex;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hvg-footer__legal a {
	color: var(--color-text-muted);
}

.hvg-footer__disclaimer {
	margin-top: var(--space-4);
	max-width: 60ch;
}

/* ==========================================================================
   Formulieren (Contact Form 7 / Jetpack Contact Form) — generieke,
   framework-onafhankelijke opmaak zodat beide bestaande formulierplugins
   er hetzelfde uitzien zonder hun markup te hoeven wijzigen.
   ========================================================================== */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-body);
	margin-bottom: var(--space-4);
	background: var(--color-bg);
	color: var(--color-ink);
}

.wpcf7-form input[type="submit"],
.contact-form button[type="submit"] {
	font-family: var(--font-heading);
	font-weight: 600;
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-6);
	background: var(--color-accent);
	color: var(--color-ink);
	border: none;
	cursor: pointer;
}

/* ==========================================================================
   Pagination / empty state (agenda)
   ========================================================================== */

.pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-12);
}

.empty-state {
	text-align: center;
	padding: var(--space-16) var(--space-4);
	color: var(--color-text-muted);
}