/* =========================================================================
 * Mariastichting — app styles
 * 2026 redesign: editorial, warm, asymmetric. Hand-written CSS, no
 * framework. Mobile-first. CSS custom properties for tokens.
 * =======================================================================*/

/* ---- Tokens ------------------------------------------------------------ */
:root {
	/* Radii */
	--radius-xs: 8px;
	--radius-sm: 12px;
	--radius-md: 18px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-2xl: 40px;
	--radius-pill: 999px;

	/* Multi-laag shadows */
	--shadow-xs: 0 1px 2px rgba(14, 17, 22, 0.04);
	--shadow-sm: 0 2px 4px rgba(14, 17, 22, 0.05), 0 4px 12px rgba(14, 17, 22, 0.04);
	--shadow-md: 0 4px 12px rgba(14, 17, 22, 0.06), 0 12px 32px rgba(14, 17, 22, 0.06);
	--shadow-lg: 0 8px 24px rgba(14, 17, 22, 0.08), 0 24px 64px rgba(14, 17, 22, 0.08);
	--shadow-glow-blue:  0 12px 36px rgba(0, 150, 255, 0.18);
	--shadow-glow-green: 0 12px 36px rgba(152, 166, 55, 0.18);

	/* Hairlines */
	--hairline: 1px solid rgba(14, 17, 22, 0.08);
	--hairline-strong: 1px solid rgba(14, 17, 22, 0.14);

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;

	/* Motion */
	--ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 180ms;
	--dur-mid: 320ms;
	--dur-slow: 480ms;

	/* Layout */
	--container: 1440px;
	--container-narrow: 720px;
	--container-medium: 1100px;
	--gutter: clamp(1rem, 3vw, 1.5rem);
	--wide-gutter: clamp(16px, 2.5vw, 32px);
}

/* ---- Reset polish ------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
	font-feature-settings: "cv11", "ss01", "ss03";
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

a {
	color: var(--wp--preset--color--brand-blue-deep);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-snap);
}
a:hover { color: var(--wp--preset--color--brand-blue); }

:where(.entry-content) p a {
	background: linear-gradient(currentColor, currentColor) no-repeat left 95% / 100% 1.5px;
	transition: background-size var(--dur-mid) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
:where(.entry-content) p a:hover { background-size: 100% 2px; }

::selection { background: var(--wp--preset--color--brand-blue-soft); color: var(--wp--preset--color--ink-900); }

:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-blue);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* ---- Skip link --------------------------------------------------------- */
.skip-link {
	position: absolute; left: -9999px; top: 0;
}
.skip-link:focus {
	left: 1rem; top: 1rem; z-index: 9999;
	background: #fff; padding: .5rem 1rem;
	border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}

/* ---- Reveal-on-scroll utility ------------------------------------------ */
[data-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--dur-mid) var(--ease-snap), transform var(--dur-mid) var(--ease-snap);
	will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* ---- Site header ------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(250, 250, 247, 0.78);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: var(--hairline);
}
/* Drie vaste kolommen: woordmerk links, menu in het midden, acties rechts.
   Met een flexrij schoof het rechterblok mee met de breedte van het menu — en
   omdat de Engelse labels langer zijn dan de Nederlandse, stond de nieuws-pill
   in de twee talen op een andere plek (en liep hij zelfs buiten de container).
   Nu hangen woordmerk en acties aan hun eigen rand, ongeacht de taal. */
.ms-header-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
	height: 72px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
}
.ms-header-inner > .ms-wordmark   { grid-column: 1; justify-self: start; }
.ms-header-inner > .ms-nav        { grid-column: 2; justify-self: center; }
.ms-header-inner > .ms-header-actions { grid-column: 3; justify-self: end; }
.ms-header-actions {
	display: flex; align-items: center; gap: var(--space-2);
	min-width: 0;
}
@media (max-width: 1279px) {
	/* Zonder menu blijft er een tweekolomsrij over. */
	.ms-header-inner { grid-template-columns: 1fr auto; }
	.ms-header-inner > .ms-header-actions { grid-column: 2; }
}
@media (max-width: 720px) { .ms-header-inner { height: 60px; } }

.ms-wordmark {
	display: inline-flex; align-items: baseline; gap: .35rem;
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 600; font-size: 1.5rem;
	letter-spacing: -0.025em; color: var(--wp--preset--color--ink-900);
	text-decoration: none; line-height: 1;
}
.ms-wordmark__dot {
	width: 8px; height: 8px; border-radius: var(--radius-pill);
	background: var(--wp--preset--color--brand-blue);
	display: inline-block;
}
.ms-wordmark:hover .ms-wordmark__dot { background: var(--wp--preset--color--accent-coral); transition: background var(--dur-fast) var(--ease-snap); }

.ms-nav { display: flex; align-items: center; gap: 2px; }
@media (max-width: 1279px) { .ms-nav { display: none; } }

.ms-nav__item {
	position: relative;
	display: inline-flex; align-items: center; gap: 4px;
	padding: .5rem .6rem;
	border-radius: var(--radius-pill);
	color: var(--wp--preset--color--ink-700);
	font-size: 0.875rem; font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	background: linear-gradient(currentColor, currentColor) no-repeat left 80% / 0% 2px;
	transition: background-size var(--dur-fast) var(--ease-snap), background-color var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.ms-nav__item:hover, .ms-nav__item[aria-current="page"] {
	background-color: var(--wp--preset--color--paper-warm);
	color: var(--wp--preset--color--ink-900);
}
.ms-nav__item--has-dropdown { padding-right: .4rem; }
/* Tabbladnaam van een dropdown is zelf een link naar de overzichtspagina; het
   uitklappen zit op een aparte pijltjesknop ernaast. Het pill-uiterlijk zit op
   de wrapper, dus link en knop blijven kaal. */
.ms-nav__item--linked { cursor: default; }
.ms-nav__item-link {
	color: inherit; text-decoration: none;
	font: inherit; white-space: nowrap;
	cursor: pointer;
}
.ms-nav__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 3px; margin: -3px -3px -3px 0;
	border: 0; background: none;
	color: inherit; cursor: pointer;
	border-radius: 999px;
}
.ms-nav__item-link:focus-visible,
.ms-nav__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-blue-deep);
	outline-offset: 3px;
}
.ms-nav__chev {
	width: 14px; height: 14px;
	transition: transform var(--dur-fast) var(--ease-snap);
}
.ms-nav__item[aria-expanded="true"] .ms-nav__chev { transform: rotate(180deg); }

.ms-nav__dropdown {
	position: absolute; top: 100%; left: 0;
	margin-top: 8px;
	min-width: 280px;
	background: var(--wp--preset--color--paper);
	border: var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2);
	display: none;
	flex-direction: column; gap: 2px;
}
/* Invisible hover-bridge zodat de muis van pill naar dropdown kan zonder
   dat de hover-state breekt in de visuele 8px-tussenruimte. */
.ms-nav__item--has-dropdown::after {
	content: "";
	position: absolute;
	top: 100%; left: 0; right: 0;
	height: 14px;
	pointer-events: auto;
}
.ms-nav__item--has-dropdown:hover .ms-nav__dropdown,
.ms-nav__item--has-dropdown:focus-within .ms-nav__dropdown,
.ms-nav__item[aria-expanded="true"] .ms-nav__dropdown { display: flex; }

.ms-nav__sub {
	display: block; padding: .55rem .75rem;
	border-radius: var(--radius-md);
	color: var(--wp--preset--color--ink-700);
	font-size: 0.9375rem;
	transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.ms-nav__sub:hover {
	background: var(--wp--preset--color--paper-warm);
	color: var(--wp--preset--color--ink-900);
}
.ms-nav__sub--nested-parent { font-weight: 600; opacity: .85; }
.ms-nav__sub-nested {
	display: flex; flex-direction: column; gap: 2px;
	padding-left: var(--space-3);
	margin-top: 2px;
	border-left: 2px solid var(--wp--preset--color--brand-blue-soft);
}

.ms-cta-pill {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--paper);
	padding: .55rem 1rem;
	border-radius: var(--radius-pill);
	font-weight: 600; font-size: 0.9375rem;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.ms-cta-pill:hover {
	background: var(--wp--preset--color--brand-blue);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-glow-blue);
}

/* Mobile hamburger + overlay */
.ms-burger {
	display: none;
	width: 44px; height: 44px;
	border-radius: var(--radius-pill);
	background: transparent;
	border: var(--hairline);
	cursor: pointer;
	align-items: center; justify-content: center;
	color: var(--wp--preset--color--ink-900);
}
@media (max-width: 1279px) {
	.ms-burger { display: inline-flex; }
	.ms-cta-pill { display: none; }
}
.ms-burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform var(--dur-fast) var(--ease-snap), opacity var(--dur-fast) var(--ease-snap); }
.ms-burger span::before, .ms-burger span::after {
	content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px;
	transition: transform var(--dur-fast) var(--ease-snap), top var(--dur-fast) var(--ease-snap);
}
.ms-burger span::before { top: -6px; }
.ms-burger span::after  { top:  6px; }
.ms-burger[aria-expanded="true"] span { background: transparent; }
.ms-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.ms-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.ms-mobile-overlay {
	position: fixed; inset: 0; z-index: 60;
	background: var(--wp--preset--color--paper-warm);
	transform: translateX(100%);
	transition: transform var(--dur-mid) var(--ease-snap);
	display: flex; flex-direction: column;
	padding: 80px var(--gutter) var(--gutter);
	overflow-y: auto;
}
.ms-mobile-overlay.is-open { transform: translateX(0); }
.ms-mobile-overlay__cta { margin-top: auto; align-self: stretch; text-align: center; }

/* Mobiel accordeonmenu (eigen markup, los van de desktop-dropdowns). */
.ms-mnav { display: flex; flex-direction: column; margin: var(--space-2) 0 var(--space-6); }
.ms-mnav__link,
.ms-mnav__parent {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	width: 100%;
	padding: .8rem .25rem;
	border: 0; border-bottom: var(--hairline);
	background: none;
	font: inherit; font-size: 1.0625rem; font-weight: 500;
	text-align: left; line-height: 1.3;
	color: var(--wp--preset--color--ink-900);
	cursor: pointer;
}
.ms-mnav__chev {
	width: 18px; height: 18px; flex: none;
	color: var(--wp--preset--color--ink-500);
	transition: transform var(--dur-fast) var(--ease-snap);
}
.ms-mnav__parent[aria-expanded="true"] .ms-mnav__chev { transform: rotate(180deg); }
.ms-mnav__children {
	display: flex; flex-direction: column;
	padding: var(--space-2) 0 var(--space-3) var(--space-4);
	border-bottom: var(--hairline);
}
.ms-mnav__children[hidden] { display: none; }
.ms-mnav__children .ms-mnav__link {
	border-bottom: 0;
	padding: .5rem .25rem;
	font-size: 1rem; font-weight: 400;
	color: var(--wp--preset--color--ink-700);
}
/* "Overzicht" als eerste ingang in een opengeklapte sectie. */
.ms-mnav__children .ms-mnav__link--overview {
	font-weight: 600;
	color: var(--wp--preset--color--ink-900);
}
.ms-mnav__children .ms-mnav__link[aria-current="page"],
.ms-mnav__link--top[aria-current="page"] {
	color: var(--wp--preset--color--brand-blue-deep);
	font-weight: 600;
}
.ms-mnav__label {
	padding: .6rem .25rem .2rem;
	font-size: 0.8125rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-500);
}
.ms-mnav__nested {
	display: flex; flex-direction: column;
	margin: 2px 0 4px;
	padding-left: var(--space-3);
	border-left: 2px solid var(--wp--preset--color--brand-blue-soft);
}

/* ---- Hero card -------------------------------------------------------- */
.ms-hero-wrap, .ms-stats-wrap {
	padding: 0 var(--wide-gutter);
}
.ms-hero {
	position: relative;
	margin: var(--space-6) auto 0;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3.5vw, 3.5rem);
	background: var(--wp--preset--gradient--hero-mesh);
	border-radius: var(--radius-2xl);
	overflow: hidden;
}
.ms-hero::before {
	content: ""; position: absolute; top: -160px; right: -160px;
	width: 520px; height: 520px;
	background: radial-gradient(closest-side, var(--wp--preset--color--brand-blue-soft), transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}
.ms-hero__inner {
	position: relative;
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 920px) {
	.ms-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}
.ms-hero__lead { max-width: 56ch; }
.ms-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--wp--preset--color--ink-500);
}
.ms-hero__eyebrow::before {
	content: ""; width: 24px; height: 1.5px; background: currentColor; display: inline-block;
}
.ms-hero h1 {
	margin: var(--space-4) 0 var(--space-4);
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 500;
	font-size: clamp(2.7rem, 1.8rem + 4.95vw, 5.4rem);
	line-height: 1.02; letter-spacing: -0.03em;
	color: var(--wp--preset--color--ink-900);
	font-variation-settings: "opsz" 144;
}
.ms-hero h1 em { font-style: normal; color: var(--wp--preset--color--brand-blue-deep); }
.ms-hero__lead {
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	line-height: 1.5; color: var(--wp--preset--color--ink-700);
	max-width: 52ch;
	margin: 0 0 var(--space-6);
}
.ms-hero__actions {
	display: flex; gap: var(--space-3); flex-wrap: wrap;
}

/* Stacked photo block */
.ms-hero__photos {
	position: relative; isolation: isolate;
}
.ms-hero__photo {
	width: 100%; aspect-ratio: 4/5; max-width: 460px; margin-left: auto;
	border-radius: var(--radius-2xl); overflow: hidden;
	box-shadow: var(--shadow-lg), var(--shadow-glow-blue);
}
.ms-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.ms-hero__photo--secondary {
	position: absolute;
	left: -8%; bottom: -24px;
	width: 50%; aspect-ratio: 4/3;
	max-width: 240px;
	box-shadow: var(--shadow-md), var(--shadow-glow-green);
	border-radius: var(--radius-xl);
}
@media (max-width: 600px) {
	.ms-hero__photo { aspect-ratio: 4/3; max-width: 100%; }
	.ms-hero__photo--secondary { display: none; }
}
.ms-hero__caption {
	position: absolute; top: -12px; right: 16px;
	background: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	padding: .35rem .75rem;
	border-radius: var(--radius-pill);
	z-index: 2;
}

/* ---- Pill buttons ------------------------------------------------------ */
.ms-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.5rem;
	border-radius: var(--radius-pill);
	font-weight: 600; font-size: 1rem;
	background: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--paper);
	border: 0; cursor: pointer;
	transition: background var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.ms-btn:hover {
	background: var(--wp--preset--color--brand-blue);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-glow-blue);
}
.ms-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--ink-900);
	border: 1.5px solid rgba(14, 17, 22, 0.18);
}
.ms-btn--ghost:hover {
	background: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--ink-900);
	box-shadow: var(--shadow-md);
}
.ms-btn__arrow { transition: transform var(--dur-fast) var(--ease-snap); }
.ms-btn:hover .ms-btn__arrow { transform: translateX(4px); }

/* ---- Stats row (under hero, no container) ----------------------------- */
.ms-stats {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-6) clamp(1rem, 3vw, 2rem);
	display: flex; align-items: center; justify-content: center;
	gap: var(--space-6);
	flex-wrap: wrap;
}
.ms-stats__item {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-700);
}
.ms-stats__divider {
	width: 1px; height: 32px;
	background: var(--wp--preset--color--ink-100);
	display: inline-block;
	flex-shrink: 0;
}
@media (max-width: 640px) {
	.ms-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
		text-align: center;
	}
	.ms-stats__divider { display: none; }
}

/* ---- Marquee ----------------------------------------------------------- */
.ms-marquee {
	background: var(--wp--preset--color--paper-warm);
	border-top: var(--hairline);
	border-bottom: var(--hairline);
	overflow: hidden;
	padding: 1rem 0;
	position: relative;
}
.ms-marquee__track {
	display: flex; gap: 3rem;
	width: max-content;
	animation: ms-marquee 60s linear infinite;
}
.ms-marquee:hover .ms-marquee__track { animation-play-state: paused; }
.ms-marquee__item {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem; font-weight: 600;
	color: var(--wp--preset--color--ink-700);
	letter-spacing: 0.14em; text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 3rem;
}
.ms-marquee__item::after {
	content: ""; width: 6px; height: 6px;
	border-radius: var(--radius-pill);
	background: var(--wp--preset--color--brand-blue);
}
@keyframes ms-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- Sections / layout ------------------------------------------------- */
.ms-section {
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(3rem, 7vw, 5.5rem) var(--wide-gutter);
}
.ms-section--narrow { max-width: var(--container-narrow); padding-inline: var(--gutter); }

/* max-width óók begrenzen op de schermbreedte: 60ch groeit mee met de
   lettergrootte en werd bij een vergrote tekstinstelling breder dan de
   telefoon. min-width:0 laat de rasterkinderen krimpen — zonder dat mag een
   kind niet smaller worden dan zijn langste woord, en blazen lange
   samenstellingen ("Mariastichting", "parkeergarage") de pagina op. */
.ms-section-head {
	display: grid;
	gap: var(--space-3);
	margin-bottom: var(--space-12);
	max-width: min(60ch, 100%);
}
.ms-section-head > * { min-width: 0; overflow-wrap: break-word; }
.ms-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--wp--preset--color--ink-500);
	display: inline-flex; align-items: center; gap: .5rem;
}
.ms-eyebrow::before { content: ""; width: 24px; height: 1.5px; background: currentColor; }
.ms-section-head h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--display-xl);
	letter-spacing: -0.025em; line-height: 1.05;
	margin: 0;
	font-variation-settings: "opsz" 144;
}
.ms-section-head__lead {
	color: var(--wp--preset--color--ink-700);
	font-size: var(--wp--preset--font-size--body-lg);
	max-width: 56ch;
}

/* ---- Bento news -------------------------------------------------------- */
.ms-bento {
	display: grid; gap: var(--space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.ms-bento {
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto auto;
	}
	.ms-bento__featured { grid-column: 1 / 8; grid-row: 1 / 3; }
	.ms-bento__item:nth-of-type(2) { grid-column: 8 / 13; grid-row: 1 / 2; }
	.ms-bento__item:nth-of-type(3) { grid-column: 8 / 13; grid-row: 2 / 3; }
}
.ms-bento__featured, .ms-bento__item {
	background: #fff;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.ms-bento__featured:hover, .ms-bento__item:hover {
	transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.ms-bento__cover { aspect-ratio: 16/9; overflow: hidden; }
.ms-bento__cover img { width: 100%; height: 100%; object-fit: cover; }
.ms-bento__body { padding: var(--space-6) var(--space-6) var(--space-6); display: grid; gap: var(--space-2); align-content: start; }
.ms-bento__featured .ms-bento__body { padding: var(--space-8); }
.ms-bento__item .ms-bento__body { padding: var(--space-6); }
.ms-bento__eyebrow {
	font-size: 0.75rem; font-weight: 600;
	color: var(--wp--preset--color--ink-500);
	letter-spacing: 0.14em; text-transform: uppercase;
}
.ms-bento h3, .ms-bento__featured h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600; margin: 0;
	letter-spacing: -0.02em; line-height: 1.15;
	color: var(--wp--preset--color--ink-900);
}
.ms-bento__featured h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); font-style: normal; }
.ms-bento__item h3 { font-size: 1.25rem; }
.ms-bento__excerpt { color: var(--wp--preset--color--ink-700); margin: 0; }
.ms-bento__item .ms-bento__excerpt { font-size: 0.95rem; }
.ms-bento__link {
	display: inline-flex; align-items: center; gap: .35rem;
	margin-top: var(--space-3);
	font-weight: 600;
	color: var(--wp--preset--color--brand-blue-deep);
}
.ms-bento__link svg { transition: transform var(--dur-fast) var(--ease-snap); width: 16px; height: 16px; }
.ms-bento__featured:hover .ms-bento__link svg,
.ms-bento__item:hover .ms-bento__link svg,
.ms-news-solo:hover .ms-bento__link svg,
.ms-news-duo__item:hover .ms-bento__link svg { transform: translateX(4px); }

/* --- News: empty state, 1 post (solo), 2 posts (duo), gradient covers - */
.ms-news-empty {
	max-width: 640px; margin: 0 auto;
	background: #fff; border: var(--hairline);
	border-radius: var(--radius-xl);
	padding: var(--space-12) var(--space-8);
	text-align: center;
	display: grid; gap: var(--space-4); justify-items: center;
	box-shadow: var(--shadow-sm);
}
.ms-news-empty__title {
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 600;
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
	letter-spacing: -0.02em; margin: 0;
	color: var(--wp--preset--color--ink-900);
}
.ms-news-empty__lead { color: var(--wp--preset--color--ink-700); margin: 0; max-width: 50ch; }

.ms-news-solo {
	display: grid; gap: 0;
	grid-template-columns: 1fr;
	max-width: 960px; margin: 0 auto;
	background: #fff; border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	text-decoration: none; color: inherit;
	transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.ms-news-solo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
@media (min-width: 720px) {
	.ms-news-solo { grid-template-columns: 6fr 5fr; }
}
.ms-news-solo__cover { aspect-ratio: 4/3; overflow: hidden; min-height: 100%; }
.ms-news-solo__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-news-solo__body { padding: var(--space-8); display: grid; gap: var(--space-3); align-content: center; }
.ms-news-solo__body h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 600;
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
	letter-spacing: -0.02em; line-height: 1.15; margin: 0;
	color: var(--wp--preset--color--ink-900);
}

.ms-news-duo {
	display: grid; gap: var(--space-6);
	grid-template-columns: 1fr;
	max-width: 1100px; margin: 0 auto;
}
@media (min-width: 720px) { .ms-news-duo { grid-template-columns: 1fr 1fr; } }
.ms-news-duo__item {
	background: #fff; border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.ms-news-duo__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.ms-news-duo__item .ms-bento__body { padding: var(--space-6); }
.ms-news-duo__item h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600; margin: 0;
	font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.15;
}

/* Gradient-cover voor posts zonder featured image */
.ms-news-cover--gradient {
	position: relative;
	min-height: 220px;
	aspect-ratio: 16 / 9;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	color: var(--wp--preset--color--ink-900);
}
.ms-news-cover__initial {
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 600;
	font-size: clamp(5rem, 8vw + 2rem, 10rem);
	line-height: 1; letter-spacing: -0.04em;
	color: var(--wp--preset--color--ink-900);
	opacity: 0.28;
	user-select: none;
	font-variation-settings: "opsz" 144;
}
.ms-news-solo__cover.ms-news-cover--gradient { aspect-ratio: auto; min-height: 100%; }

/* --- News archive (/nieuws/) magazine layout --------------------------- */
.ms-news-archive {
	max-width: 1100px;
	margin: 0 auto;
	display: grid; gap: var(--space-12);
}
.ms-news-top {
	background: #fff;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	text-decoration: none; color: inherit;
	display: block;
	transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.ms-news-top:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.ms-news-top__cover {
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.ms-news-top__cover img { width: 100%; height: 100%; object-fit: cover; }
.ms-news-top__cover.ms-news-cover--gradient { aspect-ratio: 16/9; }
.ms-news-top__body {
	padding: var(--space-8);
	display: grid; gap: var(--space-3);
}
.ms-news-top__body h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 600;
	font-size: clamp(1.6rem, 1.2rem + 1.45vw, 2.25rem);
	letter-spacing: -0.025em; line-height: 1.1;
	margin: 0; color: var(--wp--preset--color--ink-900);
}

.ms-news-grid {
	display: grid; gap: var(--space-8);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .ms-news-grid { grid-template-columns: repeat(2, 1fr); } }
.ms-news-grid__item {
	background: #fff;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.ms-news-grid__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.ms-news-grid__cover { aspect-ratio: 4/3; overflow: hidden; }
.ms-news-grid__cover img { width: 100%; height: 100%; object-fit: cover; }
.ms-news-grid__cover.ms-news-cover--gradient { aspect-ratio: 4/3; }
.ms-news-grid__body {
	padding: var(--space-6);
	display: grid; gap: var(--space-2);
	flex: 1;
}
.ms-news-grid__body h3 {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700; margin: 0;
	font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.2;
	color: var(--wp--preset--color--ink-900);
}

.ms-news-pagination {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-4);
	padding-top: var(--space-8);
	border-top: var(--hairline);
}
.ms-news-pagination .ms-btn:first-child { justify-self: start; }
.ms-news-pagination .ms-btn:last-child  { justify-self: end; }
.ms-news-pagination__count {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-500);
	text-align: center;
}

/* ---- Inhoudsopgave op een sectie-overzichtspagina ([ms_children_tiles]) --
   Bewust compact: een lijstje hoofdstukken om uit te kiezen, geen tegels met
   samenvattingen. Twee kolommen zodra de contentkolom breed genoeg is. */
.ms-index {
	display: grid; gap: var(--space-3);
	margin: var(--space-8) 0 var(--space-4);
}
@media (min-width: 720px) {
	.ms-index { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
.ms-index__item {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-6);
	min-height: 96px;
	padding: var(--space-6);
	border-radius: var(--radius-xl);
	background: var(--wp--preset--color--paper-warm);
	border: 1px solid transparent;
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.125rem; font-weight: 600; line-height: 1.45;
	text-wrap: balance;
	transition: background var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.ms-index__item:hover {
	background: #fff;
	border-color: var(--wp--preset--color--ink-100, rgba(14, 17, 22, 0.08));
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	color: var(--wp--preset--color--ink-900);
}
.ms-index__item svg {
	width: 22px; height: 22px; flex: none;
	color: var(--wp--preset--color--ink-500);
	transition: transform var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.ms-index__item:hover svg {
	transform: translateX(4px);
	color: var(--wp--preset--color--brand-green-deep);
}

/* ---- Section tiles (asymmetric bento) ---------------------------------- */
.ms-tiles {
	display: grid; gap: var(--space-4);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.ms-tiles {
		grid-template-columns: repeat(6, 1fr);
		grid-auto-rows: minmax(180px, auto);
	}
	.ms-tile--lg   { grid-column: span 6; grid-row: span 2; }
	.ms-tile--md   { grid-column: span 3; }
	.ms-tile--wide { grid-column: span 6; }
}
@media (min-width: 1024px) {
	.ms-tiles { grid-template-columns: repeat(12, 1fr); }
	.ms-tile--lg   { grid-column: span 6; grid-row: span 2; }
	.ms-tile--md   { grid-column: span 4; }
	.ms-tile--wide { grid-column: span 6; }
}

.ms-tile {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: #fff;
	border: var(--hairline);
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
	min-height: 180px;
	overflow: hidden;
	transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap), background var(--dur-fast) var(--ease-snap);
	box-shadow: var(--shadow-sm);
}
.ms-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--wp--preset--color--ink-900); }

/* Tint-varianten */
.ms-tile--tint-mint { background: var(--wp--preset--gradient--card-mint); border-color: transparent; }
.ms-tile--tint-sky  { background: var(--wp--preset--gradient--card-sky);  border-color: transparent; }
.ms-tile--md        { background: var(--wp--preset--color--paper-warm); border-color: transparent; }

/* Body (titel + desc) — absolute positioning niet nodig, gewone flex. */
.ms-tile__body { display: flex; flex-direction: column; gap: var(--space-3); max-width: 32ch; }
.ms-tile__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600; font-style: normal;
	font-size: clamp(1.125rem, 0.95rem + 0.65vw, 1.5rem);
	line-height: 1.15; letter-spacing: -0.02em;
	margin: 0; color: var(--wp--preset--color--ink-900);
}
.ms-tile--lg .ms-tile__body { max-width: none; }
.ms-tile--lg .ms-tile__title {
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	letter-spacing: -0.025em;
	white-space: nowrap;
}
.ms-tile__desc {
	margin: 0;
	color: var(--wp--preset--color--ink-700);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.45;
}
.ms-tile--lg .ms-tile__desc { font-size: var(--wp--preset--font-size--body-lg); max-width: 42ch; }

/* Icon binnen de card, gefixeerde positie rechtsboven. */
.ms-tile__icon {
	position: absolute; top: var(--space-6); right: var(--space-6);
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.65);
	color: var(--wp--preset--color--brand-blue-deep);
	border: 1px solid rgba(14, 17, 22, 0.04);
	transition: color var(--dur-fast) var(--ease-snap), background var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.ms-tile__icon svg { width: 26px; height: 26px; stroke-width: 1.75; }
.ms-tile:hover .ms-tile__icon { color: var(--wp--preset--color--brand-green-deep); transform: translate(4px, -4px); }
.ms-tile--lg .ms-tile__icon { width: 80px; height: 80px; top: auto; bottom: var(--space-8); right: var(--space-8); }
.ms-tile--lg .ms-tile__icon svg { width: 38px; height: 38px; stroke-width: 1.5; }
.ms-tile--md .ms-tile__icon { background: rgba(14, 17, 22, 0.04); }

/* Mobiel: alles staat onder elkaar in één kolom, dus het grootteverschil
   tussen lg-, md- en wide-tegels heeft hier geen functie meer — het las
   alleen als rommelig. Eén titelmaat, één iconmaat voor alle tegels.
   Het icoon staat bovendien in de flow in plaats van absoluut rechtsboven:
   zo kan een titel er nooit meer achter doorlopen, ook niet de langere
   Engelse titels. */
@media (max-width: 719px) {
	.ms-tile { min-height: 150px; padding: var(--space-6); }
	.ms-tile__body { max-width: none; }
	.ms-tile__title { overflow-wrap: break-word; font-size: 1.25rem; }

	.ms-tile--lg .ms-tile__title { white-space: normal; font-size: 1.25rem; }
	.ms-tile--lg .ms-tile__desc {
		max-width: none;
		font-size: var(--wp--preset--font-size--body);
	}

	/* Icoon uit de absolute hoek: bovenaan rechts, tekst eronder. */
	.ms-tile:not(.ms-tile--wide) {
		justify-content: space-between;
		gap: var(--space-4);
	}
	.ms-tile:not(.ms-tile--wide) .ms-tile__icon {
		position: static;
		order: -1;
		align-self: flex-end;
		width: 48px; height: 48px;
	}
	.ms-tile:not(.ms-tile--wide) .ms-tile__icon svg {
		width: 24px; height: 24px; stroke-width: 1.75;
	}
}

/* Wide horizontale tile: icon links, body midden, pijl-pil rechts. */
.ms-tile--wide {
	flex-direction: row;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-6) var(--space-8);
	min-height: auto;
}
.ms-tile--wide .ms-tile__icon {
	position: static;
	flex: none;
	width: 48px; height: 48px;
	background: rgba(14, 17, 22, 0.04);
}
.ms-tile--wide .ms-tile__icon svg { width: 22px; height: 22px; }
.ms-tile--wide .ms-tile__body { flex: 1; max-width: none; gap: var(--space-1); }
.ms-tile--wide .ms-tile__title {
	font-style: normal;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600; letter-spacing: -0.015em;
	font-size: 1.25rem;
}
.ms-tile--wide:hover { background: var(--wp--preset--color--paper-warm); }
.ms-tile__pill {
	flex: none;
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .5rem 1rem;
	border-radius: var(--radius-pill);
	background: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--paper);
	font-size: 0.875rem; font-weight: 600;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.ms-tile__pill svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-snap); }
.ms-tile--wide:hover .ms-tile__pill { background: var(--wp--preset--color--brand-blue); }
.ms-tile--wide:hover .ms-tile__pill svg { transform: translateX(4px); }
/* Smalle telefoons: de pil past niet meer naast de tekst. Met flex-wrap
   viel dat per tegel anders uit — bij Documenten zakte de pil naar een
   eigen regel, bij Contact bleef hij staan en werd de tekst tot vier
   korte regels geperst. Een klein raster zet de pil altijd onder de
   tekst, uitgelijnd met die tekst. */
@media (max-width: 540px) {
	.ms-tile--wide {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-6);
	}
	.ms-tile--wide .ms-tile__pill { grid-column: 2; justify-self: start; }
}

/* ---- Notification banner ---------------------------------------------- */
.ms-banner-wrap {
	max-width: var(--container);
	margin: var(--space-3) auto 0;
	padding: 0 var(--wide-gutter);
	display: grid;
	gap: var(--space-3, 12px);
}
.ms-banner {
	display: flex; align-items: center; gap: var(--space-3);
	padding: .85rem var(--space-4);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	color: var(--wp--preset--color--ink-900);
	font-weight: 500;
}
.ms-banner--info { background: linear-gradient(135deg, var(--wp--preset--color--brand-blue-soft), var(--wp--preset--color--paper-cool)); }
.ms-banner--waarschuwing { background: #F8E5C0; }
.ms-banner--urgent { background: #FBD9D5; }
.ms-banner__icon {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: var(--radius-pill);
	background: #fff;
	font-size: 1rem;
}
/* Het icoon is een SVG uit de iconenset, geen Unicode-teken meer — anders
   koos iOS de emoji-variant in kleur en de desktop de zwart-witte tekstvariant,
   en zag dezelfde melding er per apparaat anders uit. De kleur komt van de
   `color` hieronder: de SVG's tekenen met `currentColor`. */
.ms-banner__icon svg { width: 18px; height: 18px; }
.ms-banner--info .ms-banner__icon         { color: var(--wp--preset--color--brand-blue); }
.ms-banner--waarschuwing .ms-banner__icon { color: #A86412; }
.ms-banner--urgent .ms-banner__icon       { color: #B32D2E; }
/* Het icoon van een urgente melding pulseerde. Eruit gehaald: een melding
   valt al op door de rode kleur, en één bewegend element tussen drie stille
   banners trekt de aandacht naar het verkeerde. Alle drie de niveaus zien er
   nu hetzelfde uit, alleen in een andere kleur. */
/* min-width:0 zodat de flex-kinderen mogen krimpen, en 'anywhere' zodat een
   onbreekbaar woord (een e-mailadres in een melding) mag afbreken. Zonder
   deze twee werd de banner bij een vergrote tekstinstelling breder dan het
   scherm en ging de hele pagina zijwaarts scrollen. */
.ms-banner > * { min-width: 0; }
.ms-banner__text { margin: 0; flex: 1; overflow-wrap: anywhere; }
.ms-banner__link {
	color: var(--wp--preset--color--ink-900);
	font-weight: 600;
	text-decoration: underline; text-underline-offset: 3px;
}
.ms-banner__close {
	flex: none;
	width: 32px; height: 32px;
	border-radius: var(--radius-pill);
	border: 0; cursor: pointer;
	background: rgba(0, 0, 0, 0.06);
	color: inherit;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1rem; line-height: 1;
	transition: background var(--dur-fast) var(--ease-snap);
}
.ms-banner__close:hover { background: rgba(0, 0, 0, 0.10); }
.ms-banner[hidden] { display: none !important; }

/* ---- Page header + banner --------------------------------------------- */
.ms-page-banner {
	width: 100%;
	max-width: var(--container-medium);
	margin: var(--space-6) auto 0;
	aspect-ratio: 16/5;
	max-height: 360px;
	background-size: cover; background-position: center;
	border-radius: var(--radius-2xl);
}
@media (max-width: 720px) {
	.ms-page-banner { aspect-ratio: 16/7; max-height: 220px; border-radius: var(--radius-xl); margin-inline: var(--wide-gutter); width: auto; }
}
.ms-page-head {
	max-width: var(--container-medium);
	margin: var(--space-12) auto 0;
	padding: 0 var(--wide-gutter);
	display: grid; gap: var(--space-3);
}
.ms-page-head h1 {
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 500;
	font-size: clamp(2rem, 1.45rem + 2.15vw, 3.15rem);
	letter-spacing: -0.025em; line-height: 1.05;
	margin: 0; color: var(--wp--preset--color--ink-900);
	font-variation-settings: "opsz" 144;
}
.ms-page-breadcrumbs {
	display: flex; align-items: center; gap: .35rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-500);
}
.ms-page-breadcrumbs a { color: inherit; }
.ms-page-breadcrumbs a:hover { color: var(--wp--preset--color--ink-900); }
.ms-page-breadcrumbs__sep { opacity: .5; }

/* ---- Page layout (sidebar + content) ---------------------------------- */
.ms-page {
	max-width: var(--container-medium);
	margin: var(--space-12) auto 0;
	padding: 0 var(--wide-gutter) var(--space-24);
	display: grid; gap: var(--space-12);
	grid-template-columns: 1fr;
}
/* Mobiel/tablet: inhoud eerst, hoofdstukmenu daaronder als naslagblok. */
@media (max-width: 1023px) {
	.ms-page__main { order: 1; }
	.ms-page__sidebar {
		order: 2;
		border-top: var(--hairline-strong);
		padding-top: var(--space-6);
	}
}
@media (min-width: 1024px) {
	.ms-page { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-16); }
	.ms-page__sidebar { position: sticky; top: 96px; align-self: start; }
	/* Pagina zonder sidebar (top-level zonder kinderen, bv. Geschiedenis):
	   één kolom + smaller centraal kader voor leesritme. */
	.ms-page:not(:has(.ms-page__sidebar)) {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--container-narrow);
	}
	/* Uitzondering: een sectie-overzicht is geen leestekst maar een
	   inhoudsopgave, die mag de volle breedte houden. De constrained-layout
	   van het groepsblok knijpt de kolom anders terug naar leesbreedte,
	   waardoor de lijst scheef onder de paginatitel zou hangen. */
	.ms-page:has(.ms-index) { max-width: var(--container-medium); }
	.ms-page:has(.ms-index) .ms-page__main,
	.ms-page:has(.ms-index) .entry-content { max-width: none; }
	/* De introzin blijft wél op leesbreedte. */
	.ms-page:has(.ms-index) .entry-content > p { max-width: 62ch; }
}

.ms-section-nav {
	display: flex; flex-direction: column; gap: 2px;
}
.ms-section-nav__title {
	font-size: 0.75rem; font-weight: 600;
	color: var(--wp--preset--color--ink-500);
	letter-spacing: 0.14em; text-transform: uppercase;
	margin: 0 0 var(--space-3);
}
.ms-section-nav a {
	display: block; padding: .55rem .85rem;
	border-radius: var(--radius-md);
	color: var(--wp--preset--color--ink-700);
	font-size: 0.9375rem;
	transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.ms-section-nav a:hover { background: var(--wp--preset--color--paper-warm); color: var(--wp--preset--color--ink-900); }
.ms-section-nav a.is-current {
	background: var(--wp--preset--color--paper-cool);
	color: var(--wp--preset--color--brand-blue-deep);
	font-weight: 600;
}

/* ---- Content / entry-content ------------------------------------------ */
.entry-content {
	max-width: 680px;
}
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-table { margin: 0 0 var(--space-6); }
.entry-content > h2 { margin-top: var(--space-12); font-size: var(--wp--preset--font-size--heading-md); font-family: var(--wp--preset--font-family--serif); font-weight: 600; letter-spacing: -0.02em; }
.entry-content > h3 { margin-top: var(--space-8); font-size: var(--wp--preset--font-size--heading-sm); font-family: var(--wp--preset--font-family--serif); font-weight: 600; letter-spacing: -0.015em; }
.entry-content > h4 { margin-top: var(--space-6); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--body-lg); font-weight: 600; }

.entry-content p { color: var(--wp--preset--color--ink-900); line-height: 1.7; }
.entry-content > p:first-of-type {
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--ink-700);
	max-width: 60ch;
	font-weight: 400;
}

.entry-content ul, .entry-content ol { padding-left: 1.5rem; line-height: 1.7; }
.entry-content ul li::marker { color: var(--wp--preset--color--brand-blue); }
.entry-content ol li::marker { color: var(--wp--preset--color--brand-blue-deep); font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 600; }

.entry-content blockquote {
	background: var(--wp--preset--color--paper-warm);
	border-left: 4px solid var(--wp--preset--color--brand-blue);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic; font-size: 1.25rem; line-height: 1.45;
	color: var(--wp--preset--color--ink-900);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content table { width: 100%; border-collapse: collapse; border: var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.entry-content th, .entry-content td { padding: .75rem 1rem; text-align: left; border-bottom: var(--hairline); }
.entry-content thead th { background: var(--wp--preset--color--paper-warm); font-weight: 600; }
.entry-content tbody tr:nth-child(odd) td { background: var(--wp--preset--color--paper); }
.entry-content tbody tr:last-child td { border-bottom: 0; }

/* Paginafoto boven de tekst. Staat in page.html buiten .entry-content, dus
   deze regels zijn bewust niet gescopet. De foto's worden handmatig op maat
   gesneden aangeleverd; daarom géén opgelegde verhouding meer. */
.ms-page-feature-image {
	margin: 0 0 var(--space-12);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.ms-page-feature-image img { display: block; width: 100%; height: auto; }

/* Losse foto midden in de tekst, bij het kopje waar hij over gaat. */
.ms-inline-figure {
	margin: var(--space-6) 0 var(--space-8);
}
.ms-inline-figure img {
	display: block; width: 100%; height: auto;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}
.ms-inline-figure figcaption {
	margin-top: var(--space-3);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-500);
}

/* Twee staande foto's naast elkaar (bv. de videofoon: entree + monitor). */
.ms-figure-duo {
	display: grid; gap: var(--space-4);
	grid-template-columns: 1fr 1fr;
	margin: var(--space-8) 0 var(--space-12);
}
@media (max-width: 560px) { .ms-figure-duo { grid-template-columns: 1fr; } }
.ms-figure-duo img {
	display: block; width: 100%; height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.ms-figure-duo figcaption {
	margin-top: var(--space-2);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-500);
}

/* Leveranciersvignet (APS, Comelit) — klein en links uitgelijnd. */
.ms-logo {
	margin: 0 0 var(--space-8);
}
.ms-logo img {
	display: block; width: auto; height: auto;
	max-width: 240px; max-height: 96px;
}

/* ---- Next page card --------------------------------------------------- */
.ms-next-card {
	display: flex; align-items: center; gap: var(--space-4);
	margin-top: var(--space-16);
	padding: var(--space-6) var(--space-8);
	border-radius: var(--radius-xl);
	background: var(--wp--preset--color--paper-warm);
	border: var(--hairline);
	text-decoration: none;
	color: var(--wp--preset--color--ink-900);
	transition: background var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
	max-width: 680px;
}
.ms-next-card:hover { background: #fff; box-shadow: var(--shadow-md); color: var(--wp--preset--color--ink-900); }
.ms-next-card__meta {
	font-size: 0.75rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--wp--preset--color--ink-500);
}
.ms-next-card__title {
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 600; font-size: 1.25rem;
	margin-top: 4px; letter-spacing: -0.02em;
}
.ms-next-card__arrow {
	margin-left: auto;
	width: 44px; height: 44px;
	border-radius: var(--radius-pill);
	background: var(--wp--preset--color--ink-900); color: var(--wp--preset--color--paper);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.ms-next-card:hover .ms-next-card__arrow { background: var(--wp--preset--color--brand-blue); transform: translateX(4px); }

/* ---- Documents + Contacts --------------------------------------------- */
.ms-docs { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin: 0; }
.ms-doc__link {
	display: flex; align-items: center; gap: var(--space-4);
	padding: 1rem 1.25rem;
	background: #fff; border: var(--hairline); border-radius: var(--radius-lg);
	text-decoration: none; color: inherit;
	transition: background var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.ms-doc__link:hover { background: var(--wp--preset--color--paper-warm); box-shadow: var(--shadow-sm); transform: translateY(-1px); color: inherit; }
.ms-doc__icon {
	flex: none;
	background: var(--wp--preset--color--brand-blue);
	color: #fff;
	font-size: 0.75rem; font-weight: 700;
	letter-spacing: 0.04em;
	padding: .55rem .75rem;
	border-radius: var(--radius-sm);
	min-width: 3.25rem; text-align: center;
}
.ms-doc__meta { display: grid; gap: .15rem; flex: 1; }
.ms-doc__title { font-weight: 500; }
.ms-doc__size { color: var(--wp--preset--color--ink-500); font-size: 0.875rem; }

.ms-contacts {
	display: grid; gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ms-contact-card {
	background: #fff; border-radius: var(--radius-xl);
	border: var(--hairline);
	padding: var(--space-6);
	display: grid; gap: var(--space-2);
	transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.ms-contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ms-contact-card h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 600; font-size: 1.25rem;
}
.ms-contact-card h3 a { color: inherit; text-decoration: none; }
.ms-contact-card__link {
	margin-top: var(--space-3);
	display: inline-flex; align-items: center; gap: .35rem;
	font-weight: 600; color: var(--wp--preset--color--brand-blue-deep);
}

/* ---- Site footer ------------------------------------------------------ */
.site-footer {
	margin-top: var(--space-24);
	background: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--paper-warm);
	position: relative;
	padding: var(--space-16) 0 var(--space-8);
}
.site-footer::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: var(--wp--preset--gradient--hero-aurora);
}
.ms-footer-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--wide-gutter);
	display: grid; gap: var(--space-12);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .ms-footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-8); } }
.ms-footer__col h4 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-300);
	margin: 0 0 var(--space-4);
}
.ms-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.ms-footer__col a {
	color: var(--wp--preset--color--paper-warm);
	font-size: 0.9375rem;
	transition: color var(--dur-fast) var(--ease-snap);
}
.ms-footer__col a:hover { color: var(--wp--preset--color--brand-blue-soft); }
.ms-footer__brand {
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 600; font-size: 1.5rem;
	letter-spacing: -0.025em; color: var(--wp--preset--color--paper); margin: 0 0 var(--space-4);
}
.ms-footer__about { color: var(--wp--preset--color--ink-300); font-size: 0.9375rem; line-height: 1.6; max-width: 32ch; }
.ms-footer__contact {
	background: rgba(255,255,255,0.04);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-2);
	font-size: 0.875rem;
}
.ms-footer__contact strong { color: var(--wp--preset--color--paper); }
.ms-footer__contact a { display: block; color: var(--wp--preset--color--paper-warm); }
.ms-footer__bottom {
	max-width: var(--container);
	margin: var(--space-16) auto 0;
	padding: var(--space-6) var(--wide-gutter) 0;
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	color: var(--wp--preset--color--ink-300); font-size: 0.8125rem;
	flex-wrap: wrap;
}
.ms-footer__bottom a { color: var(--wp--preset--color--ink-300); }
.ms-footer__bottom a:hover { color: var(--wp--preset--color--paper); }

.ms-footer__echo {
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal; font-weight: 600;
	font-size: clamp(1.25rem, 1rem + 0.9vw, 2.25rem);
	line-height: 1; letter-spacing: -0.03em;
	color: var(--wp--preset--color--paper);
	opacity: 0.14;
	text-align: center;
	font-variation-settings: "opsz" 144;
	pointer-events: none;
	user-select: none;
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.ms-marquee__track { animation: none !important; }
}

/* Language picker ------------------------------------------------------ */
.ms-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--wp--preset--color--ink-100, #e4e1da);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.ms-lang__opt {
	padding: 3px 9px;
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--ink-500, #6b675e);
}
.ms-lang__opt[aria-current="true"] {
	background: var(--wp--preset--color--ink-900, #21201c);
	color: #fff;
}
.ms-mobile-overlay .ms-lang {
	margin: 1rem auto 0;
}

.ms-news-note {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--wp--preset--color--ink-500, #6b675e);
}

/* Doorverwijzing naar /nieuws/, onder de drie kaarten. Bewust de ghost-knop
   en niet de gevulde: hij mag de kaarten erboven niet overstemmen. */
.ms-news-more {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/* Header-compactie: sinds de language picker erbij staat is de headerrij
   breder; knijp nav/CTA in de tussenmaten en laat de CTA vallen waar het
   echt niet past (de footer en hero linken ook naar /nieuws/). */
@media (min-width: 1280px) and (max-width: 1720px) {
	.ms-header-inner { gap: var(--space-3); }
	.ms-nav { gap: 0; }
	.ms-nav__item { padding: .5rem .6rem; font-size: 0.875rem; }
	.ms-cta-pill { padding: .5rem .8rem; font-size: 0.875rem; }
}
@media (min-width: 1280px) and (max-width: 1440px) {
	.ms-cta-pill { display: none; }
}

/* --- Zoekfunctie in de header ------------------------------------------- */
.ms-search { position: relative; display: flex; align-items: center; }
.ms-search__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border: 1px solid var(--wp--preset--color--ink-100, #e4e1da);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--ink-900);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.ms-search__toggle:hover,
.ms-search__toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--ink-900);
	border-color: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--paper);
}
.ms-search-panel {
	position: absolute; top: calc(100% + 12px); right: 0; z-index: 90;
	min-width: 320px;
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--ink-100, #e4e1da);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--space-3);
}
.ms-search-panel .search-form,
.ms-mobile-search .search-form { display: flex; gap: 8px; align-items: stretch; }
.ms-search-panel .search-form label,
.ms-mobile-search .search-form label { flex: 1; display: block; }
.ms-search-panel .search-field,
.ms-mobile-search .search-field {
	width: 100%;
	padding: .55rem .9rem;
	border: 1px solid var(--wp--preset--color--ink-100, #e4e1da);
	border-radius: 999px;
	font: inherit; font-size: 0.9375rem;
	background: #fff;
}
.ms-search-panel .search-field:focus,
.ms-mobile-search .search-field:focus {
	outline: 2px solid var(--wp--preset--color--brand-blue);
	outline-offset: 1px;
}
.ms-search-panel .search-submit,
.ms-mobile-search .search-submit {
	border: 0; border-radius: 999px;
	padding: .55rem 1.1rem;
	background: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--paper);
	font: inherit; font-size: 0.9375rem; font-weight: 600;
	cursor: pointer;
}
.ms-search-panel .search-submit:hover,
.ms-mobile-search .search-submit:hover { background: var(--wp--preset--color--brand-blue); }
/* Mobiel: knop in de header verbergen, formulier staat in de overlay. */
@media (max-width: 1279px) { .ms-search { display: none; } }
.ms-mobile-search { padding: var(--space-4) 0 var(--space-2); }
@media (min-width: 1280px) and (max-width: 1720px) {
	.ms-search__toggle { width: 34px; height: 34px; }
}

/* --- Kader-blok voor uitgelichte info in de content --------------------- */
.entry-content .ms-kader {
	border: 1px solid var(--wp--preset--color--ink-100, #e4e1da);
	border-left: 4px solid var(--wp--preset--color--brand-blue);
	border-radius: var(--radius-md);
	background: #fff;
	padding: var(--space-4) var(--space-6);
	margin: var(--space-4) 0;
	max-width: 32rem;
}
.entry-content .ms-kader ul { margin: 0; }
.entry-content .ms-kader li:first-child p { font-weight: 600; }

/* --- Nieuwsarchief: compacte lijstweergave ------------------------------ */
.ms-news-list {
	display: grid; gap: var(--space-4);
	max-width: var(--container-medium);
	margin: 0 auto;
}
.ms-news-row {
	display: flex; align-items: center; gap: var(--space-6);
	background: #fff;
	border: var(--hairline);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-xs);
	color: inherit;
	transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.ms-news-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.ms-news-row__cover {
	flex: 0 0 200px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
}
.ms-news-row__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-news-row__body { display: grid; gap: var(--space-2); min-width: 0; }
.ms-news-row__body h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600; font-size: 1.25rem;
	letter-spacing: -0.015em; line-height: 1.2;
	color: var(--wp--preset--color--ink-900);
}
.ms-news-row .ms-bento__excerpt { margin: 0; }
@media (max-width: 640px) {
	.ms-news-row { flex-direction: column; align-items: stretch; gap: var(--space-4); }
	.ms-news-row__cover { flex-basis: auto; width: 100%; }
}

/* Lange onafbreekbare woorden (e-mailadressen) netjes afbreken in contactkaarten. */
.ms-contact-card { min-width: 0; }
.ms-contact-card p, .ms-contact-card h3 { overflow-wrap: anywhere; }

/* --- Print- en deelknoppen ([ms_print_share]) --------------------------- */
.entry-content .ms-share {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: var(--hairline);
}
.ms-share__label {
	font-weight: 600; font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-700);
}
.ms-share__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: .55rem 1rem;
	border: 1px solid var(--wp--preset--color--ink-100, #e4e1da);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--wp--preset--color--ink-900);
	font: inherit; font-size: 0.9375rem; font-weight: 600;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.ms-share__btn:hover {
	background: var(--wp--preset--color--ink-900);
	border-color: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--paper);
}
.ms-share__wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.ms-share__copy.is-copied {
	background: var(--wp--preset--color--brand-blue-deep);
	border-color: var(--wp--preset--color--brand-blue-deep);
	color: #fff;
}

/* --- Printweergave: schone pagina op één A4 ----------------------------- */
@media print {
	/* Let op: geen @page{margin:0}-truc — Safari print daarmee lege pagina's.
	   De browser-kop/voetregels (titel/datum/URL) zijn een browserinstelling. */
	@page { margin: 12mm; }
	.site-header,
	.ms-banner-wrap,
	.ms-mobile-overlay,
	.ms-page-banner,
	.ms-page-head,
	.ms-page-feature-image,
	.ms-page__sidebar,
	.ms-next-card,
	.ms-share,
	.site-footer,
	.wp-block-template-part:has(.site-footer) { display: none !important; }
	body { background: #fff; font-size: 10.5pt; }
	main, .ms-page, .ms-page__main, .entry-content { margin: 0 !important; padding: 0 !important; }
	.ms-page { display: block !important; }
	.ms-page__main { max-width: none !important; }
	.entry-content > *:first-child { margin-top: 0 !important; }
	.entry-content h2 { font-size: 15pt; margin-top: 0; }
	.entry-content h3 { font-size: 12pt; }
	.entry-content p, .entry-content li p { margin-block: 4pt; line-height: 1.35; }
	.entry-content ul, .entry-content ol { margin-block: 4pt; }
	.entry-content .ms-kader { border: 1pt solid #999; padding: 8pt 12pt; margin-block: 6pt; }
	.entry-content img { display: none !important; }
	a { color: inherit; text-decoration: none; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Sluitknop van de mobiele overlay. */
.ms-mobile-overlay__close {
	position: absolute; top: 14px; right: var(--gutter);
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--wp--preset--color--ink-100, #e4e1da);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--ink-900);
	cursor: pointer;
}
.ms-mobile-overlay__close svg { width: 20px; height: 20px; }
.ms-mobile-overlay__close:hover { background: var(--wp--preset--color--ink-900); border-color: var(--wp--preset--color--ink-900); color: var(--wp--preset--color--paper); }

/* --- Sectiebanners uit (30 jul 2026) --------------------------------------
   De brede banner bovenaan een pagina gebruikt nog de generieke stockbeelden
   uit `ms_section_banners`; die blijven verborgen. De paginafoto's zelf staan
   sinds 1 aug 2026 weer aan: elke pagina die er één toont, heeft een echte
   foto van het bestuur als uitgelichte afbeelding. Pagina's zonder eigen foto
   hebben simpelweg geen uitgelichte afbeelding meer, dus daar valt het blok
   vanzelf weg. Terugdraaien = hier weer `.ms-page-feature-image` bij zetten. */
body.page:not(.home):not(.page-template-page-front-en) .ms-page-banner {
	display: none;
}