/*
 * Gedeelde basis voor alle secties. Tokens/reset/basis zitten in lagen;
 * componentbestanden zijn één-class-selectors (BEM) buiten de lagen, zodat
 * thema-element-stijlen (h1, a, …) ze niet overschrijven.
 */
@layer medcms.reset, medcms.tokens, medcms.base;

/* Ankerlinks landen onder een vaste header (Huisstijl → Header → Scrolloffset). :root i.p.v. html: gaat boven
   de regel van de WordPress-adminbalk (de adminbalk zit al in --med-scroll-offset). */
:root { scroll-padding-top: var(--med-scroll-offset); }

@layer medcms.reset {
	.med-sectie,
	.med-sectie *,
	.med-sectie *::before,
	.med-sectie *::after { box-sizing: border-box; }
	.med-sectie :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
	.med-sectie :where(img) { display: block; max-width: 100%; height: auto; }
}

/* Thema's en ruimte: de enige keuzes die een webmaster heeft. */
.med-sectie {
	--_bg: var(--med-color-bg);
	--_fg: var(--med-color-text);
	--_muted: var(--med-color-text-muted);
	--_btn-bg: var(--med-knop-bg, var(--med-color-primary));
	--_btn-fg: var(--med-knop-tekst, #fff);
	--_kop: var(--med-kop-kleur); /* zonder kleurrol ongeldig: dan geldt de terugval van het onderdeel */
	--_link: var(--med-link-kleur, currentColor);
	--_link-hover: var(--med-link-hover, var(--_link));
	--_focus: var(--med-focus-kleur, currentColor);
	--_space: var(--med-section-m);

	container-type: inline-size;
	background: var(--_bg);
	color: var(--_fg);
	font-family: var(--med-font-body);
	font-size: var(--med-text-m);
	line-height: var(--med-leading);
	padding-block: var(--_space);
	padding-inline: var(--med-gutter);
}
.med-sectie--accent { --_bg: var(--med-color-accent-bg); }
.med-sectie--donker {
	--_bg: var(--med-color-primary-dark);
	--_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor;
	--_muted: rgb(255 255 255 / 0.82);
	--_btn-bg: #fff;
	--_btn-fg: var(--med-color-primary-dark);
}

/* Sectie-achtergrond uit het huisstijlpalet (kleurthema = elke kleur of tint). */
.med-sectie--primary-ultra-light { --_bg: var(--med-color-primary-ultra-light); }
.med-sectie--primary-light { --_bg: var(--med-color-primary-light); }
.med-sectie--primary-semi-light { --_bg: var(--med-color-primary-semi-light); }
.med-sectie--primary { --_bg: var(--med-color-primary); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--primary-semi-dark { --_bg: var(--med-color-primary-semi-dark); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--primary-dark { --_bg: var(--med-color-primary-dark); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--primary-ultra-dark { --_bg: var(--med-color-primary-ultra-dark); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--secondary-ultra-light { --_bg: var(--med-color-secondary-ultra-light); }
.med-sectie--secondary-light { --_bg: var(--med-color-secondary-light); }
.med-sectie--secondary-semi-light { --_bg: var(--med-color-secondary-semi-light); }
.med-sectie--secondary { --_bg: var(--med-color-secondary); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--secondary-semi-dark { --_bg: var(--med-color-secondary-semi-dark); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--secondary-dark { --_bg: var(--med-color-secondary-dark); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--secondary-ultra-dark { --_bg: var(--med-color-secondary-ultra-dark); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--base-ultra-light { --_bg: var(--med-color-base-ultra-light); }
.med-sectie--base-light { --_bg: var(--med-color-base-light); }
.med-sectie--base-semi-light { --_bg: var(--med-color-base-semi-light); }
.med-sectie--base { --_bg: var(--med-color-base); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--base-semi-dark { --_bg: var(--med-color-base-semi-dark); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--base-dark { --_bg: var(--med-color-base-dark); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--base-ultra-dark { --_bg: var(--med-color-base-ultra-dark); --_fg: #fff; --_link: currentColor; --_link-hover: currentColor; --_focus: currentColor; --_kop: currentColor; --_muted: rgb(255 255 255 / 0.82); --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }
.med-sectie--bg-alt { --_bg: var(--med-color-bg-alt); }
.med-sectie--compact { --_space: var(--med-section-s); }
.med-sectie--ruim { --_space: var(--med-section-l); }

.med-sectie__inner {
	max-width: var(--med-content-width);
	margin-inline: auto;
}

/* Typografie binnen secties */
.med-sectie h1,
.med-sectie h2,
.med-sectie h3 {
	color: var(--_kop, inherit);
	font-family: var(--med-font-heading);
	line-height: 1.15;
	text-wrap: balance;
	margin-block-end: var(--med-kop-onder);
}
/* Per kop instelbaar (Huisstijl → Lettertypes → Koppen per niveau); zonder instelling de standaard. */
.med-sectie h1 { font-size: var(--med-h1); font-weight: var(--med-h1-gewicht, bold); line-height: var(--med-h1-regel, 1.15); letter-spacing: var(--med-h1-spatie, normal); }
.med-sectie h2 { font-size: var(--med-h2); font-weight: var(--med-h2-gewicht, bold); line-height: var(--med-h2-regel, 1.15); letter-spacing: var(--med-h2-spatie, normal); }
.med-sectie h3 { font-size: var(--med-h3); font-weight: var(--med-h3-gewicht, bold); line-height: var(--med-h3-regel, 1.15); letter-spacing: var(--med-h3-spatie, normal); }
.med-sectie h4 { color: var(--_kop, inherit); font-weight: var(--med-h4-gewicht, bold); line-height: var(--med-h4-regel, var(--med-leading)); letter-spacing: var(--med-h4-spatie, normal); }
/* Titel in een overzicht-item als h2 (overzicht zonder kop): zelfde maat als h3. */
.med-sectie :where(.med-item, .med-kaarttpl) h2 { font-size: var(--med-h3); font-weight: var(--med-h3-gewicht, bold); line-height: var(--med-h3-regel, 1.15); letter-spacing: var(--med-h3-spatie, normal); }
/* Kop van een element (Tekst, Paginaboom, Laatste berichten) als h2 of h4 (keuze Kopniveau): zelfde maat als h3. */
:is(.med-sectie, body) .med-el__kop:is(h2, h4, p) { color: var(--_kop, inherit); font-family: var(--med-font-heading); font-size: var(--med-h3); font-weight: var(--med-h3-gewicht, bold); line-height: var(--med-h3-regel, 1.15); letter-spacing: var(--med-h3-spatie, normal); text-wrap: balance; margin-block-end: var(--med-kop-onder); }
.med-sectie p { margin-block-end: var(--med-alinea-onder); }

.med-prose > * + * { margin-block-start: var(--med-flow); }
.med-prose > * + :is(ul, ol),
.med-prose > :is(ul, ol) + * { margin-block-start: var(--med-lijst-ruimte); }
.med-prose > * + :is(h5, h6) { margin-block-start: var(--med-kop-boven); }
.med-prose > * + h2 { margin-block-start: var(--med-h2-boven, var(--med-kop-boven)); }
.med-prose > * + h3 { margin-block-start: var(--med-h3-boven, var(--med-kop-boven)); }
.med-prose > * + h4 { margin-block-start: var(--med-h4-boven, var(--med-kop-boven)); }
.med-prose > :last-child { margin-block-end: 0; }
.med-prose :where(ul, ol) { padding-inline-start: var(--med-lijst-inspring); }
.med-prose li + li { margin-block-start: var(--med-lijst-item); }
.med-prose :is(ul, ol) :is(ul, ol) { padding-inline-start: var(--med-lijst-genest-inspring); margin-block-start: var(--med-lijst-item); }
.med-prose a {
	color: var(--_link, currentColor);
	text-decoration-line: var(--med-link-decoration, underline);
	text-decoration-thickness: var(--med-link-dikte, auto);
	text-underline-offset: var(--med-link-afstand, 0.15em);
}
.med-prose a:hover { color: var(--_link-hover, currentColor); text-decoration-line: underline; }
.med-prose a:focus-visible { outline: var(--med-focus-dikte, 3px) solid var(--_focus, currentColor); outline-offset: 2px; }

.med-sectie img { border-radius: var(--med-radius); }

/* Knop */
.med-knop {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: var(--med-btn-pad, 0.8em 1.4em);
	border-radius: var(--med-btn-radius, var(--med-radius-pill));
	background: var(--_btn-bg);
	color: var(--_btn-fg);
	font-weight: var(--med-btn-weight, 600);
	letter-spacing: var(--med-btn-tracking, normal);
	line-height: 1.2;
	text-decoration: none;
	text-transform: var(--med-btn-transform, none);
	transition: filter 0.15s ease, transform 0.15s ease;
}
.med-knop:hover { filter: var(--med-btn-hover-filter, brightness(1.1)); transform: var(--med-btn-hover-lift, none); }
.med-knop:active { filter: brightness(0.95); transform: none; }
/* Dubbele focusring (WCAG 2.4.7): rand in de tekstkleur van het vlak (niet die van de knop zelf, want wit op primair
   gaf een witte rand op een wit vlak), met een smalle ring in de vlakkleur ertussen; zichtbaar op licht én donker. */
.med-knop:focus-visible {
	outline: var(--med-focus-dikte, 3px) solid var(--med-focus-kleur, var(--_fg, var(--med-color-text)));
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--_bg, #fff);
}
/* Donkere vlakken en kaders met witte tekst: rand altijd in de (witte) tekstkleur, niet de huisstijl-focuskleur. */
:is(.med-sectie--donker, [class*="med-sectie--"][class*="-dark"], .med-sectie--primary, .med-sectie--secondary, .med-sectie--base, .med-kader--licht) .med-knop:focus-visible { outline-color: var(--_fg, #fff); }
.med-knop--secundair:focus-visible { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 2px var(--_bg, #fff); }
.med-knop--secundair {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
}

/* Plaatshouder: alleen in editors */
.med-placeholder {
	display: grid;
	place-items: center;
	min-height: 6rem;
	margin: 0;
	padding: var(--med-space-s);
	border: 2px dashed color-mix(in srgb, currentColor 30%, transparent);
	border-radius: var(--med-radius);
	color: var(--_muted);
	font-size: var(--med-text-s);
}

@media (prefers-reduced-motion: reduce) {
	.med-sectie *,
	.med-sectie *::before,
	.med-sectie *::after { transition: none !important; animation: none !important; }
}

/* Canvas (site-templates) */
body.medcms-canvas { margin: 0; }
.med-skiplink {
	position: absolute;
	left: 1rem;
	top: -10rem;
	z-index: 100;
	padding: 0.7rem 1rem;
	border-radius: var(--med-radius);
	background: var(--med-color-primary);
	color: #fff;
}
.med-skiplink:focus { top: 1rem; }

/* Tabellen in de content (Tekst- en HTML-element); stijl via tokens/Huisstijl. */
:is(.med-prose, .med-el--html) table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--med-text-s);
	border: var(--med-table-frame) solid var(--med-color-border);
	border-radius: var(--med-table-radius);
	overflow: hidden;
}
:is(.med-prose, .med-el--html) :is(th, td) {
	padding: var(--med-table-pad);
	border-block-end: var(--med-table-row-border) solid var(--med-color-border);
	border-inline-end: var(--med-table-col-border) solid var(--med-color-border);
	text-align: start;
	vertical-align: top;
}
:is(.med-prose, .med-el--html) tr > :last-child { border-inline-end: 0; }
:is(.med-prose, .med-el--html) tbody tr:last-child > * { border-block-end: 0; }
:is(.med-prose, .med-el--html) tbody tr:nth-child(even) > * { background: var(--med-table-stripe); }
:is(.med-prose, .med-el--html) th,
:is(.med-prose, .med-el--html) thead td {
	background: var(--med-table-head-bg);
	color: var(--med-table-head-fg);
	font-weight: 600;
}
:is(.med-prose, .med-el--html) thead tr:last-child > * { border-block-end: var(--med-table-row-border) solid var(--med-color-border); }
.med-prose hr { border: 0; border-block-start: 1px solid var(--med-color-border); margin-block: var(--med-space-m); }
.med-prose blockquote { margin-inline: 0; padding-inline-start: var(--med-space-s); border-inline-start: 3px solid var(--med-color-primary); }
.med-el--tekst { overflow-x: auto; }

/* Afbeeldingen in lopende tekst (tekstopmaak/classic-inhoud) */
.med-prose img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.med-prose p > img:only-child { display: block; }

/* Knop in lopende tekst (ingevoegd via de werkbalk). Focusrand in de tekstkleur van het vlak, niet die van de knop. */
.med-prose a.med-knop { color: var(--_btn-fg); text-decoration: none; }
.med-prose a.med-knop--secundair { color: inherit; }
.med-prose a.med-knop:focus-visible { outline-color: var(--med-focus-kleur, var(--_fg, currentColor)); }
/* Gevuld in de secundaire huisstijlkleur; de tekstkleur rekent de huisstijl uit op contrast (oranje → navy). */
/* Twee classes: wint van eigen CSS op .med-knop (bijv. een eigen knopkleur in Algemene eigen CSS). */
.med-knop.med-knop--kleur-secundair { --_btn-bg: var(--med-color-secondary); --_btn-fg: var(--med-knop-secundair-tekst, var(--med-color-primary-dark)); }
/* Op een vlak in de secundaire kleur zelf zou de knop wegvallen: dan de gewone knop van dat vlak. */
:is(.med-sectie--secondary, .med-sectie--secondary-semi-dark, .med-sectie--secondary-dark, .med-sectie--secondary-ultra-dark) .med-knop.med-knop--kleur-secundair { --_btn-bg: #fff; --_btn-fg: var(--med-color-text); }

/* Citaat in lopende tekst (werkbalkknop Citaat): dezelfde opmaak als het onderdeel Citaat. */
.med-prose blockquote.med-citaatblok {
	display: grid;
	justify-items: center;
	gap: var(--med-space-s);
	margin-block: var(--med-space-m);
	margin-inline: 0;
	padding: 0 var(--med-space-s);
	border: 0;
	font-family: var(--med-font-heading);
	font-size: var(--med-text-l);
	font-style: normal;
	line-height: 1.35;
	text-align: center;
	quotes: none;
}
.med-prose blockquote.med-citaatblok::before {
	content: "";
	width: 3rem;
	aspect-ratio: 48 / 34;
	background: var(--_kop, var(--med-color-primary));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34'%3E%3Cpath d='M10.6 34C4.3 34 0 29.6 0 23.3 0 13.4 7.3 4.3 17.5 0l2.6 4.1C13.9 7.2 10.4 11.6 9.8 16.3c.4-.1 1-.2 1.6-.2 5.3 0 9.2 3.9 9.2 8.8 0 5.2-4.2 9.1-10 9.1zm27.4 0c-6.3 0-10.6-4.4-10.6-10.7C27.4 13.4 34.7 4.3 44.9 0l2.6 4.1c-6.2 3.1-9.7 7.5-10.3 12.2.4-.1 1-.2 1.6-.2 5.3 0 9.2 3.9 9.2 8.8 0 5.2-4.2 9.1-10 9.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34'%3E%3Cpath d='M10.6 34C4.3 34 0 29.6 0 23.3 0 13.4 7.3 4.3 17.5 0l2.6 4.1C13.9 7.2 10.4 11.6 9.8 16.3c.4-.1 1-.2 1.6-.2 5.3 0 9.2 3.9 9.2 8.8 0 5.2-4.2 9.1-10 9.1zm27.4 0c-6.3 0-10.6-4.4-10.6-10.7C27.4 13.4 34.7 4.3 44.9 0l2.6 4.1c-6.2 3.1-9.7 7.5-10.3 12.2.4-.1 1-.2 1.6-.2 5.3 0 9.2 3.9 9.2 8.8 0 5.2-4.2 9.1-10 9.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.med-prose .med-citaatblok > * { max-width: 46rem; margin: 0; }
.med-prose .med-citaatblok cite { display: block; color: var(--_kop, var(--med-color-primary-tekst)); font-family: var(--med-font-accent, inherit); font-size: var(--med-text-m); font-style: normal; }

/* Gedeeld: koppen in elementen, menu-lijsten, dynamische secties */
.med-el__kop { font-size: var(--med-h3); }
p.med-el__kop { margin-block-start: 0; }
/* Menu (header en menu-element) — opmaak via Huisstijl → Menu (tokens --med-menu-*). */
.med-menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.med-menu :is(a, .med-menu__ouder) {
	color: var(--med-menu-fg, inherit);
	font-size: var(--med-menu-size);
	font-weight: var(--med-menu-weight);
	text-transform: var(--med-menu-transform);
	letter-spacing: var(--med-menu-tracking);
	text-decoration: none;
	text-underline-offset: 0.3em;
}
.med-menu :is(a, .med-menu__ouder):hover { color: var(--med-menu-hover, inherit); text-decoration: var(--med-menu-hover-decoration); }
/* Hoofditem met submenu als knop (Huisstijl → Menu): ziet eruit als een menulink. */
.med-menu__ouder { margin: 0; padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
.med-menu a[aria-current],
.med-menu :is(.current-menu-item, .current-menu-ancestor) > :is(a, .med-menu__ouder) {
	color: var(--med-menu-active, inherit);
	text-decoration: var(--med-menu-active-decoration);
	box-shadow: var(--med-menu-active-shadow);
	background: var(--med-menu-active-bg);
	border-radius: calc(var(--med-radius) / 2);
}
.med-menu :is(a, .med-menu__ouder):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.med-menu > .menu-item-has-children > :is(a, .med-menu__ouder) { display: inline-flex; align-items: center; gap: 0.4em; }
.med-menu > .menu-item-has-children > :is(a, .med-menu__ouder)::after {
	content: "";
	display: var(--med-menu-chevron-display);
	width: 0.6em;
	height: 0.6em;
	background: var(--med-menu-chevron, currentColor);
	-webkit-mask: var(--med-icon-chevron) center / contain no-repeat;
	mask: var(--med-icon-chevron) center / contain no-repeat;
	transition: transform 0.15s ease;
}
.med-menu > .menu-item-has-children:is(:hover, :focus-within) > :is(a, .med-menu__ouder)::after { transform: rotate(180deg); }
.med-menu--lijst > .menu-item-has-children > a::after { display: none; }
.med-menu__groep { display: block; margin-block-end: 0.4rem; font-weight: 700; }

/* Mobiel: burger-knop + off-canvas paneel (popover, schuift van links of rechts in). */
.med-burger {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: calc(var(--med-radius) / 1.5);
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.med-burger:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.med-burger:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.med-burger__streep,
.med-burger__streep::before,
.med-burger__streep::after { display: block; width: 1.4rem; height: 2px; border-radius: 2px; background: currentColor; }
.med-burger__streep { position: relative; }
.med-burger__streep::before,
.med-burger__streep::after { content: ""; position: absolute; left: 0; }
.med-burger__streep::before { top: -7px; }
.med-burger__streep::after { top: 7px; }

.med-offcanvas {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(24rem, 88vw);
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0 1.5rem 2rem;
	overflow-y: auto;
	border: 0;
	background: var(--med-menu-mobile-bg);
	color: var(--med-menu-mobile-fg);
	font-family: var(--med-font-body);
	box-shadow: -12px 0 40px rgb(0 0 0 / 0.2);
	translate: 100% 0;
	transition: translate 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
}
.med-offcanvas--links { inset: 0 auto 0 0; translate: -100% 0; box-shadow: 12px 0 40px rgb(0 0 0 / 0.2); }
.med-offcanvas:popover-open { translate: 0 0; }
@starting-style { .med-offcanvas:popover-open { translate: 100% 0; } .med-offcanvas--links:popover-open { translate: -100% 0; } }
.med-offcanvas::backdrop { background: rgb(0 0 0 / 0); transition: background 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete; }
.med-offcanvas:popover-open::backdrop { background: rgb(0 0 0 / 0.45); }
@starting-style { .med-offcanvas:popover-open::backdrop { background: rgb(0 0 0 / 0); } }
.med-offcanvas__kop { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding-block: 0.75rem; background: inherit; }
.med-offcanvas__sluit {
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.med-offcanvas__sluit:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.med-offcanvas__lijst { margin: 0; padding: 0; list-style: none; }
.med-offcanvas__lijst--0 > li { border-block-end: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.med-offcanvas__lijst--1,
.med-offcanvas__lijst--2 { padding: 0 0 0.75rem 1rem; }
.med-offcanvas__link,
.med-offcanvas__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.8rem;
	color: inherit;
	font-size: 1.1rem;
	font-weight: var(--med-menu-weight);
	text-decoration: none;
	cursor: pointer;
}
.med-offcanvas__lijst--1 .med-offcanvas__link,
.med-offcanvas__lijst--2 .med-offcanvas__link,
.med-offcanvas__link--ouder { padding-block: 0.45rem; font-size: 1rem; font-weight: 400; }
.med-offcanvas__link[aria-current] { text-decoration: underline; text-underline-offset: 0.3em; }
.med-offcanvas__toggle { list-style: none; }
.med-offcanvas__toggle::-webkit-details-marker { display: none; }
.med-offcanvas__toggle::after {
	content: "";
	flex: none;
	width: 0.8rem;
	height: 0.8rem;
	background: currentColor;
	-webkit-mask: var(--med-icon-chevron) center / contain no-repeat;
	mask: var(--med-icon-chevron) center / contain no-repeat;
	transition: transform 0.15s ease;
}
.med-offcanvas__sub[open] > .med-offcanvas__toggle::after { transform: rotate(180deg); }
.med-offcanvas__sub > .med-offcanvas__link--ouder { margin-inline-start: 1rem; }
.med-offcanvas__groep { display: block; padding-block: 0.6rem 0.2rem; font-weight: 700; opacity: 0.8; }
.med-offcanvas :is(.med-offcanvas__link, .med-offcanvas__toggle):focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.med-offcanvas__extra { display: grid; gap: 1rem; margin-block-start: 1.5rem; }
.med-offcanvas__extra .med-knop { justify-self: start; }
.med-header__mobiel { display: none; }
/* Menu-items en de headerknop breken nooit over twee regels (bijv. "Lid worden"). Past het menu
   niet (assets/js/header.js), dan eerder het mobiele menu. Hier en niet in components/header,
   zodat het ook werkt als een thema de header-template overschrijft. */
.med-header__nav > ul > li > :is(a, .med-menu__groep, .med-menu__ouder),
.med-header__knop .med-knop { white-space: nowrap; }
.med-header--te-vol .med-header__nav,
.med-header--te-vol .med-header__knop { display: none; }
.med-header--te-vol .med-header__mobiel { display: block; }
.med-header--te-vol.med-header--rijen-2 .med-header__balk { display: none; }
.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.med-dyn { --_space: var(--med-space-l); }
.med-dyn + .med-dyn { padding-block-start: 0; }
.med-dyn__smal { max-width: var(--med-prose-width); }

/* Afgeschermde inhoud */
.med-toegang { padding: var(--med-space-m); border-radius: var(--med-radius); background: var(--med-color-bg-alt); }
.med-toegang__tekst { font-weight: 600; }

/* Pagina-opbouw met zijbalk (Huisstijl → Pagina-opbouw; zijbalk = site-template "Zijbalk"). */
.med-layout {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--med-zijbalk-breedte, 20rem);
	gap: 0 clamp(2rem, 1rem + 3vw, 4rem);
	align-items: start;
	max-width: calc(var(--med-content-width) + 2 * var(--med-gutter));
	margin-inline: auto;
	padding-inline: var(--med-gutter);
}
.med-layout--links { grid-template-columns: var(--med-zijbalk-breedte, 20rem) minmax(0, 1fr); }
.med-layout--links .med-layout__zijbalk { order: -1; }
/* Twee zijbalken: links (bijv. submenu), inhoud, rechts (bijv. vaste blokken). */
.med-layout--beide { grid-template-columns: var(--med-zijbalk-breedte, 20rem) minmax(0, 1fr) var(--med-zijbalk-breedte, 20rem); }
.med-layout--beide .med-layout__zijbalk--links { order: -1; }
.med-layout__inhoud { min-width: 0; }
.med-layout__inhoud > .med-sectie { padding-inline: 0; }
.med-layout__inhoud > .med-sectie > .med-sectie__inner { max-width: none; }
.med-layout__zijbalk { padding-block: var(--med-section-s); }
.med-zijbalk { display: grid; gap: var(--med-space-m); padding: 0; background: none; }
.med-zijbalk > .med-sectie { padding: 0; background: none; }
.med-zijbalk .med-sectie__inner { max-width: none; }
.med-layout--plakken .med-layout__zijbalk { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem); }
@media (max-width: 56rem) {
	.med-layout,
	.med-layout--links,
	.med-layout--beide { grid-template-columns: minmax(0, 1fr); }
	.med-layout--links .med-layout__zijbalk,
	.med-layout--beide .med-layout__zijbalk--links { order: 0; }
	.med-layout--plakken .med-layout__zijbalk { position: static; }
}

/* Kaart-, tegel- en lijsttemplates (Site-templates), ook in de editor-preview. */
.med-kaarttpl { position: relative; display: flex; flex-direction: column; gap: 0.45rem; height: 100%; }
:where(.med-kaarttpl, .medcms-kaart-preview) .med-sectie { /* :where = licht, zodat een eigen CSS-class (bijv. achtergrond) wint */ --_space: 0; padding: 0; background: none; color: inherit; }
:is(.med-kaarttpl, .medcms-kaart-preview) .med-sectie__inner { width: auto; max-width: none; margin-inline: 0; padding-inline: 0; }
.medcms-kaart-preview { max-width: 24rem; margin: 2rem auto !important; }
.medcms-kaart-preview--tegel { max-width: 16rem; }
.medcms-kaart-preview--lijst { max-width: 52rem; }
.med-overzicht--tegels .med-item--tpl { display: flex; }
.med-overzicht--tegels .med-kaarttpl { flex: 1; }
.medcms-kaart-preview [data-puck-dropzone] { display: flex; flex-direction: column; gap: 0.45rem; }
.med-kaarttpl__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.med-kaarttpl__link:focus-visible { outline: var(--med-focus); outline-offset: 3px; }
.med-kaarttpl a:not(.med-kaarttpl__link) { position: relative; z-index: 2; }
.med-kaarttpl:has(.med-kaarttpl__link:hover) .med-kaarttpl__titel { text-decoration: underline; text-underline-offset: 0.2em; }
:is(.med-kaarttpl, .medcms-kaart-preview) .med-kaarttpl__titel { margin: 0; font-size: var(--med-text-l); line-height: 1.25; }
:is(.med-kaarttpl, .medcms-kaart-preview) .med-dyn-uitgelicht img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--med-radius); }
:is(.med-kaarttpl, .medcms-kaart-preview) .med-dyn-uitgelicht--klein img { aspect-ratio: 1; }
:is(.med-kaarttpl, .medcms-kaart-preview) .med-gegevens { margin: 0; }
.med-overzicht--lijst .med-item--tpl { padding-block: var(--med-space-s); border-block-end: 1px solid color-mix(in srgb, currentColor 18%, transparent); }

/* Veld (dynamisch): één gegeven van het bericht */
.med-dyn-veld { margin: 0; }
.med-dyn-veld__label { font-weight: 600; }
.med-dyn-veld--klein { font-size: var(--med-text-s); color: var(--_muted, var(--med-color-text-muted)); }
.med-dyn-veld--vet { font-weight: 600; }
.med-dyn-veld--kop { font-size: var(--med-text-l); font-weight: 600; line-height: 1.25; }
.med-dyn-veld--link a { color: var(--med-color-primary-tekst); font-weight: 600; text-decoration: none; }
.med-dyn-veld--link a::after { content: " ›"; }
.med-dyn-veld a { overflow-wrap: anywhere; }
:where(.med-kaarttpl, .medcms-kaart-preview) .med-kolommen, :where(.med-kaarttpl, .medcms-kaart-preview) .med-sectie .med-sectie { padding: 0; }
.med-kaarttpl--kader-rand { padding: var(--med-space-s); border: 1px solid var(--med-color-border); border-radius: var(--med-radius); background: var(--med-color-bg); }
.med-kaarttpl--kader-accent { padding: var(--med-space-s) var(--med-space-m); border: 1px solid var(--med-color-primary); border-radius: calc(var(--med-radius) * 2); background: var(--med-color-bg); }
.med-kaarttpl--kader-accent:has(.med-kaarttpl__link:hover) { background: color-mix(in srgb, var(--med-color-primary) 6%, var(--med-color-bg)); }
.med-kaarttpl--kader-schaduw { padding: var(--med-space-m); border-radius: var(--med-radius); background: var(--med-color-bg); box-shadow: var(--med-shadow); transition: box-shadow 0.15s ease; }
.med-kaarttpl--kader-schaduw:has(.med-kaarttpl__link:hover) { box-shadow: var(--med-shadow-hover); }
.med-kaarttpl--kader-vlak { padding: var(--med-space-m); border-radius: var(--med-radius); background: var(--med-color-bg-alt); }
.med-kaarttpl--midden { align-items: center; text-align: center; }
/* Datumblokje (Veld, stijl Datumblokje): kleur via --med-datumblok-bg/-fg of een eigen CSS-class. */
.med-dyn-veld--datumblok time {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 4.5rem;
	min-height: 4.5rem;
	padding: 0.5rem;
	border-radius: var(--med-radius);
	background: var(--med-datumblok-bg, var(--med-color-primary));
	color: var(--med-datumblok-fg, #fff);
	line-height: 1.15;
	text-align: center;
}
.med-datumblok__dag { font-size: 1.375rem; font-weight: 700; }
.med-datumblok__maand { font-size: 0.9rem; }
.med-datumblok__jaar { font-size: 0.8rem; }
/* Inner span (aria-hidden) volgt de kolomopbouw van het blokje. */
.med-dyn-veld--datumblok time > span[aria-hidden] { display: contents; }
.med-dyn-veld--datumblok-periode .med-datumblok__dag { font-size: 1.125rem; white-space: nowrap; }
.med-dyn-veld--afbeelding { margin: 0; }
.med-dyn-veld--afbeelding img { display: block; width: 100%; height: auto; border-radius: var(--med-radius); }
.med-dyn-veld--verhouding-3-2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.med-dyn-veld--verhouding-1-1 img { aspect-ratio: 1; object-fit: cover; }
.med-dyn-veld--verhouding-4-5 img { aspect-ratio: 4 / 5; object-fit: cover; }
.med-dyn-veld--breedte-klein { width: 8rem; max-width: 100%; }
.med-dyn-veld--breedte-mini { width: 5rem; max-width: 100%; }
.med-dyn-veld--accent { color: var(--med-color-primary-tekst); }
.med-dyn-veld--vet.med-kaarttpl__titel { font-size: inherit; }
/* In een kaart/lijstregel: een kolom met alleen een kleine afbeelding neemt niet meer ruimte dan nodig. */
:is(.med-kaarttpl, .medcms-kaart-preview) .med-kolommen__raster { gap: var(--med-space-m); }
:is(.med-kaarttpl, .medcms-kaart-preview) .med-kolommen--2 .med-kolommen__raster:has(> .med-kolommen__kolom:first-child .med-dyn-veld--breedte-mini, > .med-kolommen__kolom:first-child .med-dyn-veld--breedte-klein) { grid-template-columns: max-content minmax(0, 1fr); }
:is(.med-kaarttpl, .medcms-kaart-preview) .med-kolommen--2 .med-kolommen__raster:has(> .med-kolommen__kolom:last-child .med-dyn-veld--breedte-mini, > .med-kolommen__kolom:last-child .med-dyn-veld--breedte-klein) { grid-template-columns: minmax(0, 1fr) max-content; }
:is(.med-kaarttpl, .medcms-kaart-preview) .med-kolommen__kolom { display: flex; flex-direction: column; gap: 0.45rem; }


/* Decoratie per sectie (Huisstijl → Decoraties; in de editor groep Opmaak). Alleen achtergrond: niet voorgelezen. */
.med-sectie.med-deco { background-repeat: no-repeat; background-image: var(--_deco, none); background-size: var(--_deco-maat) auto; }
.med-deco--d1 { --_deco: var(--med-deco-1, none); }
.med-deco--d2 { --_deco: var(--med-deco-2, none); }
.med-deco--d3 { --_deco: var(--med-deco-3, none); }
.med-deco--klein { --_deco-maat: min(8rem, 25vw); }
.med-deco--middel { --_deco-maat: min(14rem, 35vw); }
.med-deco--groot { --_deco-maat: min(22rem, 45vw); }
.med-sectie.med-deco--rechtsboven { background-position: right top; }
.med-sectie.med-deco--linksboven { background-position: left top; }
.med-sectie.med-deco--rechtsonder { background-position: right bottom; }
.med-sectie.med-deco--linksonder { background-position: left bottom; }

/* Kruimelpad automatisch onder de header (Huisstijl → Header) */
.med-kruimelpad-balk { --_space: var(--med-space-s); padding-block-end: 0; }

/* Band onder de header (Huisstijl → Header → Band onder de header). Decoratief; uiterlijk via --med-band-*. */
.med-band {
	display: var(--med-band-display, none);
	height: var(--med-band-hoogte, 3.75rem);
	background-color: var(--med-band-kleur, var(--med-color-primary));
	background-image: var(--med-band-verloop, none), var(--med-band-beeld, none);
	background-repeat: no-repeat, var(--med-band-herhalen, repeat-x);
	background-position: center, var(--med-band-positie, center center);
	background-size: 100% 100%, var(--med-band-grootte, auto);
}