/*
Theme Name: DRG Lite
Theme URI: https://example.com
Author: DRG
Description: Licht, snel thema zonder page builder. Minimale CSS, systeemlettertypen, semantische markup, cookievrij.
Version: 1.2.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drg-lite
Tags: blog, block-patterns, custom-colors, custom-logo, custom-menu, featured-images, rtl-language-support, sticky-post, threaded-comments, translation-ready, accessibility-ready
*/

:root {
	/* Ontwerp (overschreven via Customizer-inline CSS) */
	--bg: #fafafa;
	--text: #1a1a1a;
	--heading: #1a1a1a;
	--muted: #555;
	--accent: #0d6efd;
	--link: #0d6efd;
	--link-hover: #0a58ca;
	--border: #e5e5e5;
	--max: 42rem;
	--space: 1rem;
	/* Customizer (fallbacks; overschreven via inline style als de gebruiker
	   expliciet een kleur kiest). Binden aan de thema-variabelen zodat de
	   logo-balk, nav-bar én mobile hamburger-drawer AUTOMATISCH meegaan met
	   de gekozen preset/kleuren. Wil je een afwijkend menu? Zet dan een
	   expliciete kleur in Customizer -> Kop: logo & menu. */
	--drg-logo-bar-bg: var(--bg);
	--drg-nav-bg: var(--bg);
	--drg-nav-link: var(--text);
	--drg-nav-hover-bg: color-mix(in srgb, var(--text) 8%, transparent);
	--drg-nav-border: var(--border);
	/* Verticale padding rondom menu-tekst. Customizer-slider "Menuhoogte"
	   overschrijft deze waarde; compact-modus (bij scroll) gebruikt de helft. */
	--drg-nav-link-py: 0.85rem;
	/* Typografie (fallbacks; overschreven via inline style als Customizer fonts zijn gekozen) */
	--drg-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
	--drg-font-heading: inherit;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* overflow-x: clip voorkomt een parasitaire horizontale/verticale scrollbalk
	   die 100vw-blokken (.alignfull, fixed-background) kunnen veroorzaken omdat
	   100vw op Windows de breedte van de verticale scrollbar meetelt.
	   We gebruiken CLIP i.p.v. HIDDEN: hidden creeert een nieuwe scroll-container
	   en breekt position:sticky, clip doet dat niet. */
	overflow-x: clip;
	/* Reserveer scrollbar-ruimte zodat de layout niet “springt” als de balk
	   verschijnt. Alleen `stable` (zonder both-edges): both-edges zet een
	   evenwichtige gutter links én rechts en oogt op LTR-sites als een lege
	   rand links (~½ scrollbalkbreedte). */
	scrollbar-gutter: stable;
}

/* Respecteer "beperk bewegingen" van het OS: zet smooth-scroll uit. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--drg-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.drg-carousel__heading,
.drg-carousel__title {
	font-family: var(--drg-font-heading, var(--drg-font-body));
	color: var(--heading, var(--text));
}

/* Monospace (voor code/pre/kbd). Als JetBrains Mono is gedownload, wordt die
   automatisch gepakt; anders valt de browser netjes terug op systeem-mono. */
code, kbd, samp, pre, tt {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.95em;
}

a {
	color: var(--link, var(--accent));
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--link-hover, var(--link, var(--accent)));
	text-decoration: none;
}

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

/* --- Kop: logo tegen bovenkant, menu direct eronder (geen wit ertussen) --- */
.site-header {
	position: relative;
	z-index: 1000;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.site-logo-bar {
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--drg-logo-bar-bg);
	border: 0;
	/* Geen border hier: scheiding zit op .site-nav-bar */
}

.site-logo-bar__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: stretch;
	min-height: 0;
}

.site-branding {
	display: block;
	width: 100%;
	text-align: center;
}

.site-branding .custom-logo-link {
	display: block;
	width: 100%;
	line-height: 0;
}

/* Logo Site-identiteit: altijd 100% paginabreedte; hoogte volgt beeldverhouding */
.site-branding .custom-logo,
.site-branding .custom-logo-link img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

.site-title {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 600;
}

.site-title--logo-fallback {
	padding: 0.25rem 1.25rem;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-title a:hover {
	text-decoration: underline;
}

/* Menubalk: plakt onder admin-balk / bovenaan scherm; logo scrollt weg.
   Min/max komen uit Customizer; min() met 100% voorkomt horizontale
   scroll op smalle schermen. margin: 0 auto centreert de balk wanneer
   een max-width hem smaller maakt dan de viewport. */
.site-nav-bar {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
	max-width: var(--drg-nav-max-width, none);
	min-width: min(var(--drg-nav-min-width, 0px), 100%);
	margin: 0 auto;
	background: var(--drg-nav-bg);
	border: 0;
	border-bottom: 1px solid var(--drg-nav-border);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	z-index: 1000;
	transition: box-shadow 0.2s ease;
}

/* Ingelogd: WP admin-balk — sticky moet onder die balk plakken */
body.admin-bar .site-nav-bar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-nav-bar {
		top: 46px;
	}
}

.site-nav-bar__inner {
	width: 100%;
	margin: 0;
	padding: 0 1rem;
	display: flex;
	align-items: stretch;
	justify-content: center;
	/* 1.5rem = typische line-height van de menu-tekst; samen met de
	   configureerbare --drg-nav-link-py (boven+onder) bepaalt dit de
	   totale bar-hoogte. Zie Customizer: "Kop: logo & menu" -> "Menuhoogte". */
	min-height: calc(1.5rem + 2 * var(--drg-nav-link-py));
	transition: min-height 0.2s ease, padding 0.2s ease;
}

/* Na scroll: slanker menu (class zet navigation.js op body).
   Balk vult dan de volle pagina-/viewportbreedte (Customizer min/max geldt
   alleen in de “grote” modus boven de scroll-drempel). */
body.drg-header-compact .site-nav-bar {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	max-width: none;
	min-width: 0;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

body.drg-header-compact .site-nav-bar__inner {
	min-height: calc(1.5rem + var(--drg-nav-link-py));
	padding: 0 0.65rem;
}

body.drg-header-compact .main-nav .menu > li > a {
	padding-top: calc(var(--drg-nav-link-py) * 0.5);
	padding-bottom: calc(var(--drg-nav-link-py) * 0.5);
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	font-size: 0.95rem;
}

body.drg-header-compact .main-nav .sub-menu a {
	padding: 0.42rem 0.85rem;
	font-size: 0.9rem;
}

body.drg-header-compact .menu-toggle {
	padding: 0.35rem;
	min-width: 2.45rem;
	min-height: 2.45rem;
}

/* --------------------------------------------------------------
   Klein logo in de menubalk (Customizer: "Klein logo menubalk").
   Verschijnt alleen wanneer de kop in compact-modus staat (scroll).
   Absoluut gepositioneerd t.o.v. de sticky .site-nav-bar zodat het
   flex-centreren van de menu-items onaangetast blijft. Altijd flush
   links aan het begin van de menubalk — onafhankelijk van een
   eventuele edge-fade.
   -------------------------------------------------------------- */
.site-compact-logo {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.5rem;
	align-items: center;
	line-height: 0;
	text-decoration: none;
	z-index: 2;
}

.site-compact-logo__img {
	display: block;
	max-height: calc(100% - 0.5rem);
	width: auto;
	height: auto;
}

body.drg-header-compact .site-compact-logo {
	display: flex;
}

/* --------------------------------------------------------------
   Edge-fade menubalk (Customizer: "Vervagende randen menubalk").
   Wordt alleen actief als body.drg-nav-has-fade aanwezig is.
   Gebruikt de CSS vars --drg-nav-fade-width en --drg-nav-fade-color.
   -------------------------------------------------------------- */
body.drg-nav-has-fade .site-nav-bar {
	background: linear-gradient(
		to right,
		var(--drg-nav-fade-color, transparent) 0,
		var(--drg-nav-bg) var(--drg-nav-fade-width, 0rem),
		var(--drg-nav-bg) calc(100% - var(--drg-nav-fade-width, 0rem)),
		var(--drg-nav-fade-color, transparent) 100%
	);
	border-bottom: 0;
	box-shadow: none;
}

body.drg-nav-has-fade .site-nav-bar::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(
		to right,
		var(--drg-nav-fade-color, transparent) 0,
		var(--drg-nav-border) var(--drg-nav-fade-width, 0rem),
		var(--drg-nav-border) calc(100% - var(--drg-nav-fade-width, 0rem)),
		var(--drg-nav-fade-color, transparent) 100%
	);
}

/* Veiligheidsmarge zodat menu-items niet in de gradient verdwijnen
   bij een brede fade (menu is flex-centered; dit schuift ze mee). */
body.drg-nav-has-fade .site-nav-bar__inner {
	padding-left: max(1rem, var(--drg-nav-fade-width, 0rem));
	padding-right: max(1rem, var(--drg-nav-fade-width, 0rem));
}

body.drg-nav-has-fade.drg-header-compact .site-nav-bar {
	box-shadow: none;
}

body.drg-nav-has-fade.drg-header-compact .site-nav-bar__inner {
	padding-left: max(0.65rem, var(--drg-nav-fade-width, 0rem));
	padding-right: max(0.65rem, var(--drg-nav-fade-width, 0rem));
}

/* Overlay-modus: nav trekt zich met negative margin in de logo-banner.
   Border en box-shadow worden in overlay-modus uitgezet zodat de
   onderkant van de menubalk exact samenvalt met de onderkant van de
   logo-banner (border/shadow zouden er anders 1-2 px onder uitsteken).
   In compact/scroll-modus brengt de bestaande `.drg-header-compact`
   regel de shadow terug als visuele afscheiding. Mobiel uit. */
body.drg-nav-overlay {
	/* +1px veiligheidsmarge tegen sub-pixel afrondingsverschillen
	   (rem → px kan verschillen tussen margin-top en min-height). */
	--drg-nav-overlay-h: calc(var(--drg-nav-link-py, 0.85rem) * 2 + 1.5rem + 1px);
}
body.drg-nav-overlay .site-nav-bar {
	margin-top: calc(-1 * var(--drg-nav-overlay-h));
	border-bottom: 0;
	box-shadow: none;
	z-index: 1001;
}
@media screen and (max-width: 781px) {
	body.drg-nav-overlay .site-nav-bar { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.site-nav-bar,
	.site-nav-bar__inner,
	.main-nav .menu > li > a,
	.main-nav .sub-menu a,
	.menu-toggle {
		transition: none;
	}
}

.main-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.main-nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 0;
}

.main-nav .menu > li {
	position: relative;
	display: flex;
	align-items: stretch;
}

.main-nav .menu > li > a {
	display: flex;
	align-items: center;
	padding-top: var(--drg-nav-link-py);
	padding-bottom: var(--drg-nav-link-py);
	padding-left: 1rem;
	padding-right: 1rem;
	color: var(--drg-nav-link);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	border-radius: 0;
	transition: padding 0.2s ease, font-size 0.2s ease;
}

.main-nav .menu > li > a:hover,
.main-nav .menu > li > a:focus-visible {
	background: var(--drg-nav-hover-bg);
	outline: none;
}

/* Dropdowns (desktop) */
.main-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.35rem 0;
	position: absolute;
	left: 0;
	top: 100%;
	/* Schaalt mee met de inhoud: minimaal leesbaar, maximaal beperkt zodat
	   lange labels niet alles opblazen. */
	min-width: 10rem;
	width: max-content;
	max-width: min(20rem, 90vw);
	background: var(--drg-nav-bg);
	border: 1px solid var(--drg-nav-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.25rem);
	transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
	z-index: 1001;
}

.main-nav .sub-menu a {
	white-space: normal;
}

.main-nav .menu > li:hover > .sub-menu,
.main-nav .menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav .sub-menu a {
	display: block;
	padding: 0.55rem 1rem;
	color: var(--drg-nav-link);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	transition: padding 0.2s ease, font-size 0.2s ease;
}

.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus-visible {
	background: var(--drg-nav-hover-bg);
	outline: none;
}

/* Geneste submenu’s rechts van parent */
.main-nav .sub-menu .menu-item-has-children {
	position: relative;
}

.main-nav .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin-left: -1px;
}

.main-nav .sub-menu .menu-item-has-children:hover > .sub-menu,
.main-nav .sub-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Submenu-toggle: alleen mobiel zichtbaar */
.submenu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 0.5rem;
	min-width: 2.75rem;
	border: 0;
	background: transparent;
	color: var(--drg-nav-link);
	cursor: pointer;
}

.submenu-toggle::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -0.2rem;
	transition: transform 0.2s ease;
}

.menu-item-has-children.is-open > .submenu-toggle::after {
	transform: rotate(-135deg);
	margin-top: 0.15rem;
}

/* Hamburger */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0 0.5rem 0 0;
	padding: 0.5rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	border: 1px solid var(--drg-nav-border);
	border-radius: 4px;
	background: var(--drg-nav-bg);
	color: var(--drg-nav-link);
	cursor: pointer;
	align-self: center;
	transition: padding 0.2s ease, min-height 0.2s ease, min-width 0.2s ease;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__bars::before {
	top: -6px;
}

.menu-toggle__bars::after {
	top: 6px;
}

.site-nav-bar.nav-is-open .menu-toggle__bars {
	background: transparent;
}

.site-nav-bar.nav-is-open .menu-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.site-nav-bar.nav-is-open .menu-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Mobiel */
@media (max-width: 781px) {
	body.drg-nav-open {
		overflow: hidden;
	}

	/* Balk zelf wordt onzichtbaar op smalle weergaven: geen achtergrond,
	   geen rand, geen shadow, geen hoogte. De hamburger zweeft vast
	   in de rechterbovenhoek. Bar wordt pas zichtbaar op open.
	   Max/min-width van de Customizer zijn hier niet wenselijk: de
	   drawer moet altijd over de volle viewport-breedte kunnen. */
	.site-nav-bar {
		background: transparent;
		border: 0;
		border-bottom: 0;
		box-shadow: none;
		max-width: none;
		min-width: 0;
	}

	.site-nav-bar__inner {
		min-height: 0;
		padding: 0;
		justify-content: flex-end;
	}

	/* Edge-fade (linear-gradient + ::after border) uitschakelen op mobiel. */
	body.drg-nav-has-fade .site-nav-bar {
		background: transparent;
		border-bottom: 0;
		box-shadow: none;
	}
	body.drg-nav-has-fade .site-nav-bar::after {
		display: none;
	}

	/* Compact-modus voegt op desktop een shadow toe; op mobiel weghalen
	   zolang het menu gesloten is. */
	body.drg-header-compact .site-nav-bar {
		box-shadow: none;
	}

	/* Klein compact-logo is een desktop-feature: op mobiel hebben we een
	   eigen logo in .site-header + een fixed hamburger, geen balk. */
	body.drg-header-compact .site-compact-logo,
	.site-compact-logo {
		display: none;
	}

	/* Hamburger: fixed in rechterbovenhoek, mag over het logo heen.
	   z-index hoger dan site-nav-bar (1000) zodat hij ook boven een
	   geopende drawer blijft klikbaar voor sluiten. */
	.menu-toggle {
		display: inline-flex;
		position: fixed;
		top: 0.5rem;
		right: 0.75rem;
		margin: 0;
		z-index: 1100;
		background: var(--drg-nav-bg);
		border: 1px solid var(--drg-nav-border);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	}

	body.admin-bar .menu-toggle {
		/* WP admin-balk is 46 px hoog op mobiel. */
		top: calc(46px + 0.5rem);
	}

	/* Zodra het menu geopend wordt: bar krijgt wél een achtergrond terug
	   zodat de drawer leesbaar is tegen de pagina-inhoud eronder. */
	.site-nav-bar.nav-is-open {
		background: var(--drg-nav-bg);
		border-bottom: 1px solid var(--drg-nav-border);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}
	.site-nav-bar.nav-is-open .site-nav-bar__inner {
		padding: 0.5rem 0.75rem;
	}

	.main-nav {
		flex: 1 0 100%;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.35s ease, opacity 0.2s ease;
		justify-content: stretch;
	}

	.site-nav-bar.nav-is-open .main-nav {
		max-height: min(85vh, 32rem);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 1;
		border-top: 1px solid var(--drg-nav-border);
		margin-top: 0.25rem;
		padding-bottom: 0.5rem;
		/* Ruimte rechts zodat het laatste item niet onder de X-knop
		   (fixed top-right) wegvalt. */
		padding-right: 3.25rem;
	}

	.main-nav .menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.main-nav .menu > li {
		flex-direction: row;
		flex-wrap: wrap;
		border-bottom: 1px solid var(--drg-nav-border);
	}

	.main-nav .menu > li > a {
		flex: 1 1 auto;
		padding: 0.9rem 0.75rem;
	}

	.main-nav .sub-menu {
		position: static;
		flex: 1 0 100%;
		min-width: 0;
		max-width: none;
		width: auto;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		/* Theme-bewuste tint: werkt zowel op lichte als donkere nav-bg. */
		background: color-mix(in srgb, var(--drg-nav-link) 6%, transparent);
		padding-left: 0.5rem;
	}

	.main-nav .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.main-nav .sub-menu .sub-menu {
		margin-left: 0;
	}

	.submenu-toggle {
		display: inline-flex;
	}
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	position: fixed;
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	background: #000;
	color: #fff;
	z-index: 100000;
}

.site-main {
	max-width: 72rem;
	margin: 0 auto;
	/* Geen top-padding: content (of een .alignfull hero-blok) sluit direct aan
	   tegen de menubalk. Horizontale padding blijft voor leesbaarheid. */
	padding: 0 1.25rem 4rem;
}

.content-area {
	max-width: var(--max);
	margin-left: auto;
	margin-right: auto;
}

/* Per-post breedte-override (ingesteld via sidebar-paneel in de editor).
   Overrijdt --max alleen voor die specifieke post/pagina; .site-main houdt
   z'n eigen 72rem als harde bovengrens, dus "full" is effectief ook 72rem. */
body.drg-content-width-wide { --max: 56rem; }
body.drg-content-width-full { --max: 72rem; }

/* Het allereerste element in de content mag geen top-margin hebben,
   anders ontstaat er (via browser-defaults op h1/p/etc.) alsnog witruimte
   tussen de menubalk en de pagina-tekst. */
.site-main > :first-child,
.content-area > :first-child,
.content-area--wide > :first-child,
.site-main article > :first-child,
.site-main article .entry-content > :first-child {
	margin-top: 0;
}

/* Verzamel-sjabloon: minstens ~48rem, maar volgt hogere “Max. breedte inhoud” tot 72rem */
.content-area--wide {
	max-width: min(72rem, max(48rem, var(--max)));
	margin-left: auto;
	margin-right: auto;
}

.verzamel-list {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

/* content-visibility: auto laat de browser off-screen lijst-items overslaan
   tijdens initial render en bij scroll — sterk effect op INP/scroll-perf bij
   lange archieven (50+ berichten). contain-intrinsic-size reserveert een
   schatting zodat de scrollbalk niet sprong-bij-sprong bijstelt tijdens
   het binnenscrollen. */
.verzamel-list > article,
.archive main article,
.blog main article {
	content-visibility: auto;
	contain-intrinsic-size: auto 320px;
}

.verzamel-notice {
	color: var(--muted);
	font-size: 0.95rem;
}

.entry {
	margin-bottom: 2.5rem;
}

.entry-header--hidden-title {
	margin: 0;
	padding: 0;
	border: 0;
	min-height: 0;
}

.entry-title {
	margin: 0 0 0.35em;
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.25;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover {
	text-decoration: underline;
}

.entry-meta {
	font-size: 0.875rem;
	color: var(--muted);
	margin-bottom: 1rem;
}

/* Single bericht: titel + meta over uitgelichte afbeelding (per-bericht meta). */
.entry--hero-overlay .entry-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 1.25rem;
	border-radius: 0.35rem;
}

.entry--hero-overlay .entry-hero__media {
	line-height: 0;
}

.entry--hero-overlay .entry-hero__media img {
	width: 100%;
	height: auto;
	display: block;
}

/* Zelfde breedte als de inhoudskolom (--max via .content-area) + vaste hoogte:
   cover op het midden (randen vallen weg). */
.entry-thumb.drg-featured-bounded {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	position: relative;
	height: var(--drg-single-featured-max-height);
	max-height: var(--drg-single-featured-max-height);
	overflow: hidden;
	line-height: 0;
}

.entry-thumb.drg-featured-bounded img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.entry--hero-overlay .entry-hero--featured-bleed {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.entry--hero-overlay .entry-hero__media.drg-featured-bounded {
	height: var(--drg-single-featured-max-height);
	max-height: var(--drg-single-featured-max-height);
	overflow: hidden;
	line-height: 0;
	position: relative;
}

.entry--hero-overlay .entry-hero__media.drg-featured-bounded img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.entry-header--hero-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 1rem clamp(0.75rem, 3vw, 1.5rem);
	background: var(--drg-entry-hero-overlay, rgba(0, 0, 0, 0.62));
}

.entry--hero-overlay .entry-header--hero-overlay .entry-title {
	color: #fff;
	margin-bottom: 0.25em;
}

.entry--hero-overlay .entry-header--hero-overlay .entry-meta {
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 0;
}

.entry--hero-overlay .entry-header--hero-overlay .entry-meta .updated {
	color: rgba(255, 255, 255, 0.78);
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.pagination {
	margin-top: 2rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.site-footer {
	border-top: 1px solid var(--border);
	padding: 1.5rem 1.25rem;
	text-align: center;
	font-size: 0.875rem;
	color: var(--muted);
	background: #fff;
}

.alignwide {
	max-width: 56rem;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wp-block-image figcaption {
	font-size: 0.875rem;
	color: var(--muted);
	margin-top: 0.35em;
}