/*
 * Basisreset, typografie en layout-hulpklassen. Componentspecifieke stijl
 * (header, kaarten, footer, ...) staat in components.css.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* Reserveert altijd de breedte van de scrollbalk, of hij nu zichtbaar is
	   of niet. Zonder dit: js/navigation.js zet bij het openen van het menu
	   "body.style.overflow = 'hidden'", waardoor de scrollbalk verdwijnt en
	   de viewport iets breder wordt — de fixed header (incl. de knoppen
	   rechtsboven) verschuift dan zichtbaar mee. Met "stable" blijft die
	   ruimte gereserveerd, dus verandert de breedte niet en schuift er
	   niets. */
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--line-height-body);
	/* Veiligheidsnet: sommige onderdelen (bijv. de "bleed"-foto's, zie
	   .hero__portrait--bleed in components.css) laten bewust een foto
	   buiten haar eigen kader vallen. Dit voorkomt dat zoiets ooit een
	   horizontale scrollbalk op de hele pagina veroorzaakt. */
	overflow-x: hidden;
}

/* Compensatie voor de fixed header (zie .hvg-header in components.css):
   overal behalve op pagina's mét een hero (homepage, nieuwsartikelen,
   nieuwsoverzicht — zie ".hvg-has-navy-hero" in inc/setup.php) duwt dit
   de pagina-inhoud onder de altijd-zichtbare, witte header vandaan. Op
   die hero-pagina's doet .hero zelf dat via zijn eigen padding-top,
   zodat de (transparante) header nog over de hero-achtergrond heen kan
   liggen. */
body:not(.home):not(.single):not(.hvg-has-navy-hero) #main {
	padding-top: var(--header-height);
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 900;
	line-height: var(--line-height-heading);
	color: var(--color-ink);
	margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5, h6 { font-size: var(--text-h5); }

p {
	margin: 0 0 var(--space-4);
}

a {
	color: var(--color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--color-primary-dark);
	/* #167C33 — geverifieerd 5.30:1 op wit, AA. */
}

/* Zichtbare, merkonafhankelijke focusring — zie design-system.md: bewust
   niet groen/oranje, moet op elke ondergrond goed te zien blijven. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* Op donkere vlakken haalt de standaard focusring geen AA (1.94:1 op
   navy) — daarom hier een geel alternatief (6.96:1), zie tokens.css. */
.section--navy a:focus-visible,
.section--navy button:focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu button:focus-visible,
.hvg-footer__cta a:focus-visible,
.hvg-footer__cta button:focus-visible {
	outline-color: var(--color-focus-on-dark);
}

/* Varia (parent-thema) geeft élk kaal <button>/input[type="submit"]-element
   standaard een blauwe achtergrond die bij :hover/:focus naar INDIGO
   (paars) omslaat — zie style.css van Varia, de generieke
   "Button Placeholder style"-regel rond "background-color: blue" /
   ":hover, :focus { background-color: indigo }". Die regel raakt niet
   alleen onze eigen knoppen (bijv. ".menu-toggle", dat een kaal <button>
   is) maar ook plugin-output zoals het Contact Form 7-verzendknopje,
   omdat die generieke tag-selectors geen eigen classes nodig hebben om te
   matchen. Onderstaande regel dekt exact dezelfde selectorlijst als Varia
   en wint via laadvolgorde (child-CSS laadt na de parent) — geen paars/
   indigo meer, nergens, zonder dat elk knopje z'n eigen :hover/:focus-
   override hoeft te schrijven. Component-specifieke knoppen (.btn--primary
   etc.) hebben al hun eigen, meer specifieke :hover-kleur en blijven dus
   gewoon werken. */
/* Eerdere versie van deze regel matchte "button:hover" (kaal), maar
   Varia's ECHTE hoverselector is "button:not(.has-background):hover" —
   dat ":not(...)" telt extra mee in de specificiteit, dus Varia's indigo
   bleef bij hover alsnog winnen ondanks deze regel (bleef terugkomen op
   de menu-knop én de vlog-afspeelknop). Nu exact dezelfde
   selectorvorm gebruikt (matcht dus minstens gelijke specificiteit) plus
   !important, zodat dit hele categorie bug niet nog een keer kan
   terugkomen via een net iets andere Varia-selectorvariant. */
button:not(.has-background):hover,
button:focus,
input:not(.has-background):hover[type="submit"],
input[type="submit"]:focus,
.button:not(.has-background):hover,
.button:focus,
.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:focus {
	background-color: var(--color-accent-hover) !important;
	color: var(--color-text-inverse) !important;
}

/* Varia bevat ~13 verschillende ":hover { color: indigo }"-varianten voor
   allerlei class-combinaties (".entry-meta a:hover", ".site-title
   a:hover", ".main-navigation a:hover", ".wp-block-button.is-style-
   outline .wp-block-button__link:hover", enz.) — de meeste raken ons niet
   omdat we bewust andere classnamen gebruiken (".hvg-header" i.p.v.
   ".main-navigation", ".hvg-footer__links" i.p.v. ".footer-navigation",
   enz.), maar ".entry-meta" gebruiken we wél (single.php) en
   ".wp-block-button"-varianten kunnen zomaar in oude, los geschreven
   artikelinhoud voorkomen (the_content()) — vandaar hier expliciet
   afgevangen, ook al is er nu (nog) geen link/knop die dit concreet
   raakt. */
.entry-meta a:hover,
.entry-meta a:active,
.entry-footer a:hover,
.entry-footer a:active,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.has-focus {
	color: var(--color-primary-dark);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-navy);
	color: var(--color-text-inverse);
	padding: var(--space-3) var(--space-4);
	z-index: var(--z-modal);
	border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
	left: 0;
}

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (min-width: 768px) {
	.container {
		padding-inline: var(--space-8);
	}
}

.container--article {
	max-width: var(--container-article);
}

.section {
	padding-block: var(--space-16);
}

.section--warm {
	background: var(--color-bg-warm);
}

.section--navy {
	background: var(--color-navy);
	color: var(--color-text-inverse);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 {
	color: var(--color-text-inverse);
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Leesvriendelijke content-breedte voor doorlopende artikeltekst. Alleen
   tekstelementen, NIET layoutblokken (columns/group/cover/gallery/embeds) —
   die zijn bewust breed opgezet en werden hierdoor eerder tot onleesbare,
   soms letter-per-regel kolommen samengeknepen (zie feedback n.a.v. de
   eerste preview: de "CONTACTFRACTIE"-kolom werd verticaal gespeld). */
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
	max-width: var(--max-line-length);
}

.entry-content .wp-block-columns,
.entry-content .wp-block-group,
.entry-content .wp-block-cover,
.entry-content .wp-block-gallery,
.entry-content .wp-block-buttons,
.entry-content .wp-block-embed,
.entry-content form {
	max-width: none;
}

/* Echte oorzaak van "de kaders zijn niet passend in de container"
   (bleven ~750px breed i.p.v. de volle containerbreedte, ondanks dat
   ".card-grid" zelf grid-template-columns:1fr 1fr al correct had staan):
   Varia (parent-thema) heeft een eigen "leesbreedte"-systeem
   (style.css, "Responsive width-content overrides") dat ELK direct kind
   van ".entry-content" via
   ".entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft)
   :not(.alignright):not(.wp-block-separator):not(.wp-block-button)
   :not(.entry-attachment)" naar max. 750px (vanaf 1024px: "calc(782px -
   32px)") knijpt — ZEVEN ":not()"-clausules geven die selector een
   specificiteit van 8 classes, ruim boven wat een gewone
   ".entry-content .card-grid"-regel (2 classes) kan verslaan, ongeacht
   laadvolgorde. Zelfde soort Varia-specificiteitsprobleem als eerder bij
   ".menu-toggle" (zie components.css) — daar toen opgelost door exact
   dezelfde specificiteit te evenaren; hier is de Varia-selector met zijn
   7 ":not()"-clausules te onhandig om 1-op-1 na te bootsen, dus bewust
   "!important" i.p.v. een specificiteitswedloop. */
.entry-content .card-grid {
	max-width: none !important;
}

/* Staande vlog-video's (zie mu-plugins/hvg2026-vlog-auto-publish.php) zijn
   720x1280 — met alleen de generieke "video{max-width:100%}" (hierboven)
   schaalde de speler mee tot de volle leesbreedte van het artikel
   (~"--max-line-length"), wat bij een staand formaat een absurd hoge speler
   geeft (soms hoger dan het scherm, boven-/onderkant vielen buiten beeld —
   gemeld als "de video schaalt te groot"). Eigen, smallere maximumbreedte
   specifiek voor video's in de artikeltekst, zodat de hoogte binnen een
   normaal scherm past — net als hoe staande video's elders (Instagram/
   TikTok-embeds) doorgaans getoond worden. "!important" om dezelfde reden
   als ".entry-content .card-grid" hierboven: Varia's eigen, zeer specifieke
   leesbreedte-selector zou dit anders kunnen overschrijven. */
/* "min(420px, 100%)" i.p.v. een vaste "420px": op een smal mobiel scherm
   (samen met de padding van ".container" eromheen) kan zelfs 420px al
   breder zijn dan het beschikbare venster — gemeld als "na het sluiten van
   volledig scherm past de video niet meer in de breedte". "100%" als
   ondergrens laat de video nooit breder worden dan zijn eigen container,
   ongeacht schermbreedte; "420px" blijft de bovengrens op grotere schermen. */
.entry-content video {
	max-width: min(420px, 100%) !important;
	margin-inline: auto;
	margin-block: var(--space-4);
}