/* =========================================================================
   MEDzo — main.css
   Design tokens rechtstreeks uit het Figma-ontwerp "MEDzo" (fTowgHCN1W4KW0NmuskuvV).
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------ */

:root {
	/* Kleuren (Figma) */
	--kleur-teal:        #36a09c;  /* primair merk (hero, footer, koppen) */
	--kleur-teal-licht:  #67c2bb;  /* footer-onderbalk gradient-eindpunt */
	--kleur-teal-donker: #306e6c;  /* schaduwbasis rgba(48,110,108,…) */
	--kleur-oranje:      #fd9315;  /* links, labels, downloads-kaart */
	--kleur-oranje-cta:  #e94c0a;  /* zoekknop nav */
	--kleur-tekst:       #333333;
	--kleur-wit:         #ffffff;

	/* Thema-/markerkleuren — exact uit de Figma-legenda-assets (node 4030:48). */
	--thema-passende-zorg:        #5fc8e1;
	--thema-digitale-zorg:        #93c01e;
	--thema-organisatie-van-zorg: #fd9315;
	--thema-kwaliteit-van-zorg:   #774a9b;
	--thema-implementatie:        #e94c0a;

	/* Organisatietype-/markerkleuren — de kaart kleurt hierop. Afgeleid van
	   de merkkleuren hierboven; houd ze gelijk aan
	   medzo_organisatietype_color() in functions.php. */
	--org-topklinisch-ziekenhuis:           var(--kleur-teal);
	--org-topklinisch-opleidingsziekenhuis: #5fc8e1;
	--org-expertisecentrum:                 var(--kleur-teal-donker);
	--org-categoraal-ziekenhuis:            var(--kleur-oranje);
	--org-algemeen-ziekenhuis:              var(--kleur-oranje-cta);
	--org-revalidatiecentrum:               var(--kleur-teal-licht);
	--org-zelfstandig-behandelcentrum:      #b45327;
	--org-overig:                           #7f9c9a;

	/* Randen & schaduwen */
	--rand-teal:      rgba(54, 160, 156, 0.6);
	--rand-teal-licht: rgba(48, 110, 108, 0.4);
	--schaduw-card:   0 20px 40px -15px rgba(48, 110, 108, 0.4);

	/* Typografie — heel het ontwerp is Raleway */
	--font:            'Raleway', system-ui, sans-serif;
	--fs-hero:         clamp(2rem, 1rem + 2.7vw, 3.25rem);   /* 52px desktop */
	--lh-hero:         1.2;                                   /* 62.4/52 */
	--fs-h2:           1.5rem;    /* 24px (footer-koppen) */
	--fs-kaartkop:     1.25rem;   /* 20px / lh 26px (sidebar-kaarten) */
	--fs-body-groot:   1.25rem;   /* 20px / lh 33px (hero-intro) */
	--fs-body:         1rem;      /* 16px / lh 20.8px */
	--fs-nav:          1.125rem;  /* 18px / lh 32px */
	--fs-klein:        0.875rem;  /* 14px (footer-links, tooltip, legenda) */
	--fs-tag:          0.625rem;  /* 10px tagline/tags, uppercase, ls 2px */

	/* Layout */
	--container:       1410px;
	--container-pad:   5vw;
	/* Feedbackronde sept 2026: geen rondingen meer op knoppen, cards, chips
	   en popups. Alleen echt ronde elementen (cirkel-icoonknoppen) houden
	   --radius-pill. */
	--radius:          0;
	--radius-groot:    0;
	--radius-chip:     0;
	--radius-pill:     100px;  /* alleen voor cirkelvormige icoonknoppen */
	--gap-s:           10px;
	--gap-m:           20px;
	--gap-l:           30px;
	--sectie-pad:      75px;
}

/* ---- Basis -------------------------------------------------------------- */

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--kleur-tekst);
	background: var(--kleur-wit);
}

img { max-width: 100%; height: auto; }

a { color: var(--kleur-oranje); text-decoration: none; }
a:hover,
a:focus-visible { text-decoration: underline; }

:focus-visible {
	outline: 2px solid var(--kleur-teal);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
}

.skip-link {
	position: absolute;
	left: -9999px;
	background: var(--kleur-teal);
	color: var(--kleur-wit);
	padding: 0.5em 1em;
}
.skip-link:focus { left: 10px; top: 10px; z-index: 100; }

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

@media (min-width: 1500px) {
	.container { padding-inline: 0; }
}

/* ---- Header / nav (Figma: wit, logo links, menu 18px, oranje zoekknop) --- */

.site-header {
	background: var(--kleur-wit);
	position: relative;
	z-index: 20;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 110px;
	gap: var(--gap-l);
}

.site-header__logo {
	color: var(--kleur-teal);
	font-weight: 600;
	font-size: 1.5rem;
}
.site-header__logo img { max-height: 45px; width: auto; }

.site-nav { display: flex; align-items: center; gap: var(--gap-l); }

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--gap-l);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	font-size: var(--fs-nav);
	font-weight: 500;
	line-height: 32px;
	color: var(--kleur-tekst);
}

.site-nav__list .current-menu-item > a,
.site-nav__list a:hover { color: var(--kleur-teal); text-decoration: none; }

/* Chevron voor items met submenu */
.site-nav__list .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0.55em; height: 0.55em;
	margin-left: 0.35em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.15em);
}

.site-nav__list .sub-menu {
	display: none;
	position: absolute;
	background: var(--kleur-wit);
	box-shadow: var(--schaduw-card);
	border-radius: var(--radius);
	list-style: none;
	padding: var(--gap-s) 0;
	min-width: 220px;
}
.site-nav__list li { position: relative; }
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu { display: block; }
.site-nav__list .sub-menu a {
	display: block;
	padding: 0.5em 1.25em;
	font-size: var(--fs-body);
}

/* Inline zoekbalk in de header: het veld schuift links uit de knop.
   De oranje knop blijft rechts staan en wordt de submit/sluit-toggle. */
.site-zoek {
	position: relative;
	flex-shrink: 0;
}

.site-zoek__form {
	display: flex;
	align-items: center;
	gap: 0;
}

.site-zoek__input {
	width: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--kleur-wit);
	font: inherit;
	font-size: var(--fs-klein);
	color: var(--kleur-tekst);
	opacity: 0;
	overflow: hidden;
	transition: width 0.28s ease, padding 0.28s ease, opacity 0.2s ease, border-color 0.28s ease;
}
.site-zoek__input:focus { outline: none; }

/* Geopende staat: veld krijgt breedte en schuift zo links uit de knop. */
.site-zoek[data-open] .site-zoek__input {
	width: 240px;
	padding: 11px 18px;
	margin-right: 8px;
	border-color: var(--rand-teal-licht);
	opacity: 1;
}

.site-nav__zoek {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	flex-shrink: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--kleur-oranje-cta);
	color: var(--kleur-wit);
	cursor: pointer;
}

/* Icoon wisselt tussen vergrootglas (dicht) en kruisje (open). */
.site-nav__zoek-sluit { display: none; }
.site-zoek[data-open] .site-nav__zoek-icoon { display: none; }
.site-zoek[data-open] .site-nav__zoek-sluit { display: block; }

.site-nav__toggle { display: none; }

/* Mobiel menu */
@media (max-width: 900px) {
	.site-nav__toggle {
		display: grid;
		place-items: center;
		width: 48px; height: 48px;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.site-nav__bars,
	.site-nav__bars::before,
	.site-nav__bars::after {
		content: '';
		display: block;
		width: 24px; height: 2px;
		background: var(--kleur-tekst);
		position: relative;
	}
	.site-nav__bars::before { position: absolute; top: -7px; }
	.site-nav__bars::after  { position: absolute; top: 7px; }

	.site-nav__list {
		display: none;
		position: absolute;
		inset: 100% 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		background: var(--kleur-wit);
		box-shadow: var(--schaduw-card);
		padding: var(--gap-m) var(--container-pad);
	}
	.site-nav[data-open] .site-nav__list { display: flex; }
	.site-nav__list .sub-menu { position: static; box-shadow: none; }

	/* Uitschuivende zoekbalk: op smalle schermen niet 240px vast, maar
	   zoveel als past. Het veld schuift nog steeds links uit de knop. */
	.site-zoek[data-open] .site-zoek__input {
		width: min(240px, 46vw);
	}
}

@media (max-width: 480px) {
	.site-zoek[data-open] .site-zoek__input {
		width: min(200px, 52vw);
		padding: 10px 14px;
	}
}

/* ---- Hero (Figma: teal, MEDzo-beeldmerk + ellipse-gloed, zoekcard) ------- */

.hero {
	position: relative;
	/* Geen overflow:hidden hier — dat kapte de uitklappende zoekcard-opties
	   af. Het grote beeldmerk is een background-image op .hero__decor en
	   wordt daardoor vanzelf al binnen de hero geknipt. */
	background: var(--kleur-teal);
	color: var(--kleur-wit);
	padding: 120px var(--container-pad) 210px;
	text-align: center;
}

.hero--klein { padding: 100px var(--container-pad); }

/* Decor: het nieuwe MEDzo-beeldmerk (assets/img/medzo-mark.svg, wit op 10%
   dekking, vierkant 3385px in Figma). Het middelpunt ligt in het ontwerp
   250px onder het hero-midden — zowel op de homepage (645px hoog) als op de
   smalle band van de detailpagina (200px). */
.hero__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url('../img/medzo-mark.svg');
	background-repeat: no-repeat;
	background-position: center calc(50% + 250px);
	background-size: 3385px 3385px;
}

.hero__decor::after {
	content: '';
	position: absolute;
	inset: 0;
	mix-blend-mode: overlay;
	/* Figma Ellipse 3: wit 700×700 met zware blur, middelpunt 145px onder
	   de hero-rand — alleen de bovenste helft is zichtbaar als halo. */
	background: radial-gradient(
		circle 350px at 50% calc(100% + 145px),
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.55) 40%,
		rgba(255, 255, 255, 0) 78%
	);
}

/* De smalle band op de detailpagina heeft in het ontwerp geen ellipse-gloed. */
.hero--klein .hero__decor::after { display: none; }

.hero__inner {
	position: relative;
	max-width: 1000px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-m);
}


.hero__titel {
	margin: 0;
	font-size: var(--fs-hero);
	line-height: var(--lh-hero);
	font-weight: 500;
}

.hero__intro {
	font-size: var(--fs-body-groot);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.9);
	max-width: 62ch;
}
.hero__intro p { margin: 0; }

.hero__zoek {
	display: flex;
	align-items: center;
	gap: var(--gap-s);
	width: min(320px, 100%);
	margin-top: var(--gap-m);
	padding: 20px;
	background: var(--kleur-wit);
	color: var(--kleur-tekst);
	border-radius: var(--radius);
	box-shadow: var(--schaduw-card);
}

.hero__zoek svg { color: var(--kleur-teal); flex-shrink: 0; }

.hero__zoek input {
	flex: 1;
	min-width: 0;
	border: 0;
	font: inherit;
}
.hero__zoek input:focus { outline: none; }

.hero__zoek button {
	background: none;
	border: 0;
	color: var(--kleur-oranje);
	cursor: pointer;
	display: grid;
	place-items: center;
}

/* ---- Kaartsectie --------------------------------------------------------- */

.kaart-sectie {
	padding-block: 0 var(--sectie-pad);
	background: var(--kleur-wit);
}

/* Kaart-card (Figma): de kaart vult de container volledig (radius 20,
   dubbele teal schaduw). Het witte vlak (radius 16) is een losse laag
   erachter: 44px ingesprongen, 26px boven de kaart uitstekend. */
/* Kaart links, oranje filterpaneel vast rechts ernaast (Figma 4152:8):
   kolommen 915/445 op een 1410-container, 50px ertussen. */
.medzo-kaart {
	position: relative;
	margin-top: -120px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 445px;
	gap: 50px;
	align-items: stretch;
}


.medzo-kaart__binnen {
	position: relative;
	border-radius: var(--radius-groot);
	box-shadow:
		0 -40px 100px -70px rgba(48, 110, 108, 0.6),
		0 40px 60px -40px rgba(48, 110, 108, 0.6);
}

.medzo-kaart__canvas {
	position: relative;
	z-index: 1;
	width: 100%;
	height: min(584px, 70vh);
	border-radius: var(--radius-groot);
	overflow: hidden;
}

/* Consent-placeholder over het kaartvak: zichtbaar zolang Complianz het
   Google Maps-script blokkeert; de kaartscripts verwijderen hem bij init. */
.medzo-kaart__consent {
	position: absolute;
	inset: 0;
	z-index: 2; /* boven het (lege) canvas */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-m);
	padding: var(--gap-l);
	text-align: center;
	background: #dff0ef; /* licht teal, dekkend (geen doorschijnende rgba) */
	border: 1px solid var(--rand-teal-licht);
}

/* Zolang de placeholder bestaat is er geen kaart, dus ook geen legenda.
   De kaartscripts verwijderen de placeholder bij init; daarna verschijnt
   de legenda vanzelf weer. */
.medzo-kaart__consent ~ .medzo-kaart__legenda { display: none; }

.medzo-kaart__consent p {
	margin: 0;
	max-width: 42ch;
	color: var(--kleur-tekst);
}

/* Oranje filterpaneel vast rechts naast de kaart (Figma 4152:204):
   merk-oranje, 30px padding, zwarte items met witte sectiekoppen. Wordt
   het paneel hoger dan de kaart, dan scrolt hij intern. */
.medzo-filters {
	background: var(--kleur-oranje);
	color: var(--kleur-tekst);
	padding: 30px;
	max-height: min(584px, 70vh); /* gelijk aan de kaarthoogte */
	overflow-y: auto;
	scrollbar-color: var(--kleur-wit) transparent; /* Firefox */
}

.medzo-filters[hidden] { display: none; }

/* Witte scrollbalk op het oranje paneel (Chrome/Edge/Safari). */
.medzo-filters::-webkit-scrollbar { width: 8px; }
.medzo-filters::-webkit-scrollbar-track { background: transparent; }
.medzo-filters::-webkit-scrollbar-thumb {
	background: var(--kleur-wit);
	border-radius: var(--radius-pill);
}

.medzo-filters__titel {
	margin: 0 0 var(--gap-m);
	font-size: 1.5rem; /* Figma: 24px semibold, donker */
	font-weight: 600;
	color: var(--kleur-tekst);
}

.medzo-filters__sectie {
	margin: 0 0 var(--gap-m);
	padding: 0;
	border: 0;
	display: grid;
	gap: 6px;
}
.medzo-filters__sectie:last-child { margin-bottom: 0; }

/* "Selecteer alles" bovenaan de onderwerpenlijst: kleiner en lichter dan
   de sectiekop zodat de hiërarchie blijft, in het wit zodat hij als
   bediening leest. Aanvinken = hele groep aan, uitvinken = hele groep
   uit (zie map.js/map-leaflet.js). */
/* "Selecteer alles" staat in de kopregel zelf, rechts uitgelijnd. */
.medzo-filters__item--alles {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	cursor: pointer;
}

.medzo-filters__item--alles span {
	color: var(--kleur-wit);
	font-size: 0.75rem; /* 12px: onder de 14px-items en -kop */
}

.medzo-filters__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-s);
	width: 100%;
	padding: 0 0 2px;
	font-size: var(--fs-klein);
	font-weight: 600;
	color: var(--kleur-wit); /* witte sectiekoppen */
}

.medzo-filters__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-s);
	font-size: var(--fs-body); /* Figma: 16px, regelhoogte 30px */
	line-height: 30px;
	color: var(--kleur-tekst);
	cursor: pointer;
}

/* Ingeklapte extra waarden ("Toon meer"): [hidden] wint van display:flex. */
.medzo-filters__item[hidden] { display: none; }

/* Teller achter elke filterwaarde: gedempt wit, telt de markers op de kaart. */
.medzo-filters__aantal {
	font-size: var(--fs-klein);
	color: rgba(255, 255, 255, 0.75);
}

/* "Toon meer (x)" / "Toon minder": witte tekstknop onder de groep. */
.medzo-filters__meer {
	justify-self: start;
	margin-top: 2px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--fs-klein);
	font-weight: 600;
	color: var(--kleur-wit);
	text-decoration: underline;
	cursor: pointer;
}

.medzo-filters__item input,
.medzo-filters__item--alles input {
	appearance: none;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 0;
	background: var(--kleur-wit);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.medzo-filters__item input:checked::after,
.medzo-filters__item--alles input:checked::after {
	content: '';
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--kleur-tekst);
	border-bottom: 2px solid var(--kleur-tekst);
	transform: rotate(-45deg) translate(0, -1px);
}

.medzo-kaart__legenda {
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 1100; /* boven Leaflet-panes (200–700) en controls (1000) */
	width: 220px;
	background: var(--kleur-wit);
	border: 1px solid var(--rand-teal-licht);
	border-radius: var(--radius);
	padding: 16px;
}

.medzo-legenda__lijst {
	list-style: none;
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--rand-teal-licht);
	display: grid;
	gap: 8px;
}

.medzo-kaart__legenda[data-dicht] .medzo-legenda__lijst { display: none; }

.medzo-legenda__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--fs-klein);
}

.medzo-legenda__pin { flex-shrink: 0; }

/* Themakleur-bolletje (zoekcard-dropdown gebruikt deze nog). */
.medzo-legenda__marker {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--marker-kleur, var(--kleur-teal));
	flex-shrink: 0;
}

.medzo-legenda__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-s);
	width: 100%;
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--fs-body); /* Figma: 16px */
	cursor: pointer;
	padding: 0;
}

.medzo-legenda__chevron {
	width: 0.6em; height: 0.6em;
	border-right: 1.5px solid var(--kleur-oranje);
	border-bottom: 1.5px solid var(--kleur-oranje);
	transform: rotate(45deg);
	transition: transform 0.2s;
}
.medzo-kaart__legenda[data-dicht] .medzo-legenda__chevron { transform: rotate(-135deg); }

/* Tooltip / infowindow (Figma: witte card, titel 16 semibold, org teal,
   "Bekijk project" oranje) */
.medzo-tooltip {
	font-family: var(--font);
	/* Vaste smalle ballon (iets breder dan het Figma-origineel op verzoek
	   van de redactie); lange titels lopen door naar een volgende regel.
	   Houd gelijk aan de Leaflet-popupbreedte hieronder. */
	width: 240px;
	max-width: 100%;
	text-align: left;
}

.medzo-leaflet-pin { background: none; border: 0; }

/* Google-infowindow als de Figma-tooltipballon: eigen teal sluitknop
   (half over de hoek), dus Googles grijze X en de gereserveerde
   kopregel verbergen, padding gelijk aan de Leaflet-popup en de ballon
   niet laten clippen — anders valt de knop half weg. */
.medzo-kaart .gm-style-iw-chr,
.medzo-kaart button.gm-ui-hover-effect { display: none !important; }

.medzo-kaart .gm-style-iw-c {
	padding: 20px !important;
	border-radius: var(--radius);
	box-shadow: var(--schaduw-card);
	overflow: visible !important;
}

.medzo-kaart .gm-style-iw-d {
	overflow: visible !important;
	max-height: none !important;
}

/* Leaflet-popup als de Figma-tooltipballon: wit, 220px, radius 8, zachte
   schaduw + subtiele teal rand, en een tuit onderaan die naar de marker wijst. */
.medzo-popup .leaflet-popup-content-wrapper {
	background: var(--kleur-wit);
	border: 0;
	border-radius: var(--radius);
	box-shadow: var(--schaduw-card);
	padding: 20px;
}
.medzo-popup .leaflet-popup-content {
	margin: 0;
	width: 240px !important;
	min-height: 0;
	line-height: 1.4;
	display: block;
}

/* Eigen tuit onderaan die naar de marker wijst (Figma-ballonvorm).
   Geen eigen schaduw: die zou als randje/schaduwtje rond het geroteerde
   vierkant zichtbaar worden onder de card. */
.medzo-popup .leaflet-popup-tip-container {
	width: 20px;
	height: 10px;
	margin-left: -10px;
	overflow: hidden;
}
.medzo-popup .leaflet-popup-tip {
	width: 12px;
	height: 12px;
	padding: 0;
	margin: -6px auto 0;
	background: var(--kleur-wit);
	box-shadow: none;
	border: 0;
}

/* Teal sluitcirkel rechtsboven, net buiten de card-hoek (Figma).
   De content-wrapper is relatief gemaakt zodat -10px op de echte
   cardrand slaat, niet op de smallere tekstkolom. */
.medzo-popup .leaflet-popup-content-wrapper { position: relative; }

.medzo-tooltip__sluit {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kleur-teal);
	color: var(--kleur-wit);
	cursor: pointer;
	z-index: 1;
}
.medzo-tooltip__sluit:hover { background: var(--kleur-teal-donker); }

.medzo-kaart__melding {
	margin: 0 0 var(--gap-s);
	font-size: var(--fs-klein);
	color: rgba(51, 51, 51, 0.7);
}

.medzo-tooltip__titel {
	margin: 0 0 8px;
	padding: 0;
	font-size: var(--fs-body); /* 16px */
	font-weight: 600;
	line-height: 20px;
	color: var(--kleur-tekst);
}

.medzo-tooltip__org {
	margin: 0 0 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rand-teal-licht);
	font-size: var(--fs-klein); /* 14px */
	color: var(--kleur-teal);
}

.medzo-tooltip__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-s);
	font-size: var(--fs-klein); /* 14px */
	color: var(--kleur-oranje);
}

/* Leaflet geeft popup-links standaard blauw (.leaflet-container a wint
   op specificiteit); hier expliciet overrulen naar de MEDzo-oranje. */
.leaflet-container a.medzo-tooltip__link {
	color: var(--kleur-oranje);
}
.leaflet-container a.medzo-tooltip__link:hover {
	color: var(--kleur-oranje-cta);
	text-decoration: none;
}

/* Onder 1100px past het paneel niet meer naast de kaart: stapelen. */
@media (max-width: 1100px) {
	.medzo-kaart {
		grid-template-columns: 1fr;
		gap: var(--gap-m);
	}
	.medzo-filters { max-height: none; }
}

/* ---- Projectdetail (Figma: tweekoloms, meta-rijen, kaartjes) ------------- */

.project__grid {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr);
	gap: 80px;
	padding-block: var(--sectie-pad);
}

@media (max-width: 1100px) {
	.project__grid { grid-template-columns: 1fr; gap: 40px; }
}

.project__terug {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--kleur-teal);
	margin-bottom: var(--gap-l);
}

/* Figma: witte chevron in een oranje cirkel van 28px */
.project__terug svg {
	width: 28px;
	height: 28px;
	padding: 5px;
	box-sizing: border-box;
	background: var(--kleur-oranje);
	border-radius: 50%;
	color: var(--kleur-wit);
	flex-shrink: 0;
}


.project__meta {
	margin: 0 0 50px;
	display: grid;
	gap: 5px;
}

.project__meta-rij {
	display: flex;
	gap: var(--gap-s);
	padding: 6px 16px;
	line-height: 33px;
}
.project__meta-rij { background: rgba(54, 160, 156, 0.06); border-radius: var(--radius-chip); }

.project__meta-rij dt {
	width: 130px;
	flex-shrink: 0;
	font-weight: 500;
	color: var(--kleur-teal);
}
.project__meta-rij dd { margin: 0; }

.project__blok { margin-bottom: 50px; }
.project__blok h2,
.project__blok.prose h2 { /* dubbele selector wint van het latere .prose h2 (teal) */
	margin: 0 0 var(--gap-m);
	font-size: var(--fs-kaartkop);
	font-weight: 500;
	color: var(--kleur-oranje); /* Figma: oranje sectiekoppen in de inhoudskolom */
}
.project__blok p { line-height: 1.75; }

/* Sidebar-kaartjes */
.project__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
}

/* Sticky sidebar zolang hij naast de content staat (boven 1100px wordt het
   grid tweekoloms). align-self voorkomt dat het grid-item meerekt; bij een
   sidebar hoger dan het scherm scrolt hij intern. */
@media (min-width: 1101px) {
	.project__sidebar {
		position: sticky;
		top: var(--gap-l);
		align-self: start;
		max-height: calc(100vh - 2 * var(--gap-l));
		overflow-y: auto;
	}
}

.kaartje {
	border-radius: var(--radius);
	padding: 30px;
}

.kaartje--rand {
	background: var(--kleur-wit);
	border: 1px solid var(--rand-teal);
}

.kaartje--teal   { background: var(--kleur-teal);   color: var(--kleur-wit); }
.kaartje--oranje { background: var(--kleur-oranje); color: var(--kleur-wit); }

.kaartje__kop {
	margin: 0 0 var(--gap-m);
	font-size: var(--fs-kaartkop);
	font-weight: 500;
	line-height: 26px;
}
.kaartje--rand .kaartje__kop { color: var(--kleur-teal); }

.kaartje__rij {
	display: flex;
	gap: var(--gap-s);
	margin-bottom: var(--gap-m);
	line-height: 20.8px;
}
.kaartje__rij:last-child { margin-bottom: 0; }

.kaartje__label {
	width: 130px;
	flex-shrink: 0;
	font-weight: 500;
	color: var(--kleur-oranje);
}

.kaartje__waarden {
	display: grid;
	gap: 8px;
}
.kaartje__waarden a { color: inherit; text-decoration: underline; }

.kaartje__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-s);
}

.kaartje__chips li {
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-chip);
	padding: 6px 12px;
	line-height: 20.8px;
}

/* Tools-kaartje (Figma "Tools", detailpagina): licht mint kaartje met
   per rij een teal cirkelknop — PDF, e-mail, LinkedIn. */
.kaartje--tools { background: rgba(54, 160, 156, 0.08); }
.kaartje--tools .kaartje__kop { color: var(--kleur-teal); }

.kaartje__kop--tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--gap-m);
	border-bottom: 1px solid rgba(54, 160, 156, 0.25);
}

.tools-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tools-lijst li + li { border-top: 1px solid rgba(54, 160, 156, 0.15); }

.tools-lijst__knop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-s);
	width: 100%;
	padding: 8px 0;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--kleur-tekst);
	text-align: left;
}
.tools-lijst__knop:hover,
.tools-lijst__knop:focus-visible { text-decoration: none; }
.tools-lijst__knop:hover span:first-child { color: var(--kleur-teal); }

.tools-lijst__icoon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--kleur-teal);
	color: var(--kleur-wit);
	transition: background 0.15s ease;
}
.tools-lijst__knop:hover .tools-lijst__icoon { background: var(--kleur-teal-donker); }

.kaartje__downloads {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kaartje__downloads li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-block: var(--gap-s);
}
.kaartje__downloads li:last-child { border-bottom: 0; padding-bottom: 0; }

.kaartje__downloads a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-s);
	color: var(--kleur-wit);
}



/* "Hierover sparren wij graag" — chips op witte achtergrond */
.spar-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-s);
}

.spar-chips li {
	background: rgba(54, 160, 156, 0.1);
	color: var(--kleur-teal-donker);
	border-radius: 0;
	padding: 6px 16px;
	line-height: 20.8px;
}

/* Partnerchips kunnen een link bevatten (witte tekst op teal). */
.kaartje__chips a {
	color: inherit;
	text-decoration: underline;
}

/* Gerelateerde projecten onder de content: compacter dan het archief. */
.project-grid--gerelateerd {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--gap-m);
}

/* ---- Nieuwsbriefformulier (sjabloon Aanmelden) ---------------------------- */

.nieuwsbrief { margin-top: var(--gap-l); }
.nieuwsbrief .kaartje__kop { color: var(--kleur-teal); }

.nieuwsbrief__form { display: grid; gap: 4px; }

.nieuwsbrief__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-m);
}

@media (max-width: 640px) {
	.nieuwsbrief__rij { grid-template-columns: 1fr; gap: 4px; }
}

.nieuwsbrief__veld { margin: 0 0 10px; display: grid; gap: 4px; }

.nieuwsbrief__veld label {
	font-size: var(--fs-klein);
	font-weight: 500;
	color: var(--kleur-teal);
}

.nieuwsbrief__veld input {
	width: 100%;
	padding: 10px 14px;
	font: inherit;
	color: var(--kleur-tekst);
	background: var(--kleur-wit);
	border: 1px solid var(--rand-teal);
	border-radius: var(--radius-chip);
}

/* Honeypot: buiten beeld, maar niet display:none (bots slaan dat over). */
.nieuwsbrief__val {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nieuwsbrief__akkoord { margin: 6px 0 16px; }

.nieuwsbrief__akkoord label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: var(--fs-klein);
	line-height: 1.55;
	cursor: pointer;
}

.nieuwsbrief__akkoord input {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--kleur-teal);
}

.nieuwsbrief__verzend {
	justify-self: start;
	padding: 12px 28px;
	font: inherit;
	font-weight: 600;
	color: var(--kleur-wit);
	background: var(--kleur-oranje);
	border: 0;
	border-radius: 0;
	cursor: pointer;
}
.nieuwsbrief__verzend:hover { background: var(--kleur-oranje-cta); }
.nieuwsbrief__verzend:disabled { opacity: 0.6; cursor: progress; }

.nieuwsbrief__melding { margin: 10px 0 0; font-size: var(--fs-klein); }
.nieuwsbrief__melding:empty { display: none; }
.nieuwsbrief__melding[data-status="fout"] { color: var(--kleur-oranje-cta); }

.nieuwsbrief__bedankt h3 {
	margin: 0 0 8px;
	font-size: var(--fs-kaartkop);
	font-weight: 500;
	color: var(--kleur-teal);
}
.nieuwsbrief__bedankt p { margin: 0 0 8px; }

/* ---- Verhalen uit de praktijk -------------------------------------------- */

.verhalen { margin-bottom: 50px; }

.verhalen__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-m);
	margin-bottom: var(--gap-l);
}

.verhalen__kop h2 {
	margin: 0;
	font-size: var(--fs-kaartkop);
	font-weight: 500;
	color: var(--kleur-tekst); /* Figma: zwarte kop */
}

.verhalen__filter select {
	font: inherit;
	font-size: var(--fs-klein);
	padding: 12px 16px;
	border: 1px solid rgba(48, 110, 108, 0.4);
	border-radius: var(--radius);
	background: var(--kleur-wit);
	color: var(--kleur-tekst);
}

.verhalen__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.verhalen__item {
	border-bottom: 1px solid var(--rand-teal-licht);
}
.verhalen__item:last-child { border-bottom: 0; }
.verhalen__item[hidden] { display: none; }

.verhalen__item a {
	display: flex;
	align-items: center;
	gap: var(--gap-s);
	padding-block: 16px;
	color: var(--kleur-tekst);
}
.verhalen__item a:hover { text-decoration: none; }
.verhalen__item a:hover .verhalen__titel { color: var(--kleur-teal); }

.verhalen__tekst {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 4px;
}

.verhalen__titel {
	font-weight: 600;
	line-height: 19px;
	color: var(--kleur-teal); /* Figma: teal semibold titel */
}

.verhalen__sub {
	font-size: var(--fs-klein);
	font-style: italic; /* Figma: cursieve subtitel */
	color: var(--kleur-tekst);
}

.verhalen__tag {
	flex-shrink: 0;
	padding: 5px 12px;
	background: var(--kleur-oranje); /* Figma: gevulde oranje tag, hoekig */
	border-radius: 0;
	font-size: var(--fs-tag);
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--kleur-wit);
}

.verhalen__item svg { flex-shrink: 0; color: var(--kleur-oranje); }

/* ---- Artikelen op de Kennis & inspiratie-overzichtspagina ------------------ */

.artikelen { margin-bottom: 50px; }

.artikelen__kop {
	margin: 0 0 var(--gap-l);
	font-size: var(--fs-kaartkop);
	font-weight: 500;
	color: var(--kleur-tekst); /* zelfde toon als de verhalen-kop */
}

.artikelen__tekst {
	font-size: var(--fs-klein);
	line-height: 1.6;
	color: rgba(51, 51, 51, 0.8);
}

/* ---- Pagina & archief ----------------------------------------------------- */

.pagina,
.archief { padding-block: var(--sectie-pad); }

.pagina__titel {
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem);
	font-weight: 500;
	color: var(--kleur-teal);
}

/* ---- Footer (Figma: teal, koppen 24px, links 14/28, smalle balk) ---------- */

.site-footer {
	background: var(--kleur-teal);
	color: var(--kleur-wit);
}

.site-footer a { color: var(--kleur-wit); }

.site-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 100px;
	padding-block: 50px;
}

@media (max-width: 900px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
	.site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__kop {
	margin: 0 0 var(--gap-s);
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: 1.8;
}

.site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-s) var(--gap-l);
}
/* E-mailadres nooit middenin afbreken. */
.site-footer__contact a { white-space: nowrap; }

.site-footer__contact ul,
.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-klein);
	font-weight: 500;
	line-height: 28px;
}

/* Toelichting onder "Volg ons via NVZ". */
.site-footer__volgtekst {
	margin: 0 0 var(--gap-s);
	font-size: var(--fs-klein);
	font-weight: 500;
	line-height: 28px;
}

.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--gap-s);
}

/* Compact nieuwsbriefformulier in de footer (data-nieuwsbrief-mini). */
.footer-nieuwsbrief { max-width: 320px; }

/* Voornaam + achternaam naast elkaar, boven de e-mailregel. */
.footer-nieuwsbrief__namen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-bottom: 6px;
}

.footer-nieuwsbrief__rij {
	display: flex;
}

.footer-nieuwsbrief__namen input,
.footer-nieuwsbrief__rij input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 0;
	font: inherit;
	font-size: var(--fs-klein);
	color: var(--kleur-tekst);
	background: var(--kleur-wit);
}
.footer-nieuwsbrief__namen input:focus,
.footer-nieuwsbrief__rij input:focus { outline: 2px solid var(--kleur-oranje); outline-offset: -2px; }

.footer-nieuwsbrief__rij button {
	display: grid;
	place-items: center;
	width: 42px;
	border: 0;
	background: var(--kleur-oranje-cta);
	color: var(--kleur-wit);
	cursor: pointer;
}
.footer-nieuwsbrief__rij button:disabled { opacity: 0.6; cursor: progress; }

.footer-nieuwsbrief__akkoord {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.5;
}
.footer-nieuwsbrief__akkoord input { margin-top: 3px; }
.footer-nieuwsbrief__akkoord a { text-decoration: underline; }

/* Honeypot: uit beeld, niet display:none (dat slaan bots over). */
.footer-nieuwsbrief__val {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.footer-nieuwsbrief__melding { margin: 8px 0 0; font-size: var(--fs-klein); }
.footer-nieuwsbrief__melding:empty { display: none; }

.site-footer__balk {
	background: linear-gradient(to right, var(--kleur-teal), var(--kleur-teal-licht));
	font-size: var(--fs-klein);
	font-weight: 500;
}

.site-footer__balk-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-m);
	flex-wrap: wrap;
	min-height: 60px;
	padding-block: 10px;
}

.site-footer__juridisch {
	display: flex;
	align-items: center;
	gap: var(--gap-m);
	flex-wrap: wrap;
}

.site-footer__juridisch-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--gap-m);
}

.site-footer__juridisch-links li::before {
	content: '•';
	margin-right: var(--gap-m);
	opacity: 0.6;
}

/* ---- Zoekcard met dropdown (Figma "Zoek"-variant) -------------------------- */

.zoekcard {
	position: relative;
	/* Boven de kaart-sectie (die de hero overlapt) én boven het kaartchroom:
	   legenda 1100, filterpaneel 1150, oranje filterknop 1200. De hero maakt
	   zelf geen stacking context, dus die nummers concurreren rechtstreeks
	   met deze. Een open zoekdropdown hoort over alles heen te vallen. */
	z-index: 1300;
	width: min(320px, 100%);
	margin-top: var(--gap-m);
	text-align: left;
}

.zoekcard__form {
	display: flex;
	align-items: center;
	gap: var(--gap-s);
	padding: 20px;
	background: var(--kleur-wit);
	color: var(--kleur-tekst);
	border-radius: var(--radius);
	box-shadow: var(--schaduw-card);
}

.zoekcard__form svg { color: var(--kleur-teal); flex-shrink: 0; }

.zoekcard__form input[type='search'] {
	flex: 1;
	min-width: 0;
	border: 0;
	font: inherit;
}
.zoekcard__form input[type='search']:focus { outline: none; }

.zoekcard__form button {
	background: none;
	border: 0;
	color: var(--kleur-oranje);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.zoekcard__opties {
	position: absolute;
	inset: calc(100% + 8px) 0 auto 0;
	background: var(--kleur-wit);
	border-radius: var(--radius);
	box-shadow: var(--schaduw-card);
	padding: var(--gap-m);
	display: grid;
	gap: 16px;
	z-index: 10;
	color: var(--kleur-tekst);
}

/* display:grid zou het hidden-attribuut overschrijven; expliciet herstellen. */
.zoekcard__opties[hidden],
.zoekcard__themas[hidden],
.zoekcard__sublijst[hidden] { display: none; }

.zoekcard__optie,
.zoekcard__optie--submenu > button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-s);
	width: 100%;
	padding: 16px 15px 12px;
	background: none;
	border: 1px solid var(--rand-teal-licht);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--fs-klein);
	text-align: left;
	cursor: pointer;
	color: var(--kleur-tekst);
}

.zoekcard__optie--submenu {
	padding: 0;
	border: 0;
	display: block;
}

.zoekcard__optie:hover,
.zoekcard__optie--submenu > button:hover { border-color: var(--kleur-teal); }

.zoekcard__optie[aria-pressed='true'] {
	border-color: var(--kleur-teal);
	background: rgba(54, 160, 156, 0.06);
}

.zoekcard__label {
	position: absolute;
	top: -7px;
	left: 10px;
	padding-inline: 5px;
	background: var(--kleur-wit);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kleur-teal);
}

.zoekcard__chevron {
	width: 0.55em; height: 0.55em;
	border-right: 1.5px solid var(--kleur-oranje);
	border-bottom: 1.5px solid var(--kleur-oranje);
	transform: rotate(-45deg);
	flex-shrink: 0;
}

.zoekcard__themas,
.zoekcard__sublijst {
	list-style: none;
	margin: 8px 0 0;
	padding: 8px;
	border: 1px solid var(--rand-teal-licht);
	border-radius: var(--radius);
	display: grid;
	gap: 4px;
	/* Namenlijsten kunnen lang worden; scroll binnen de dropdown. */
	max-height: 240px;
	overflow-y: auto;
}

.zoekcard__themas a,
.zoekcard__sublijst a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 8px;
	font-size: var(--fs-klein);
	color: var(--kleur-tekst);
	border-radius: var(--radius-chip);
}
.zoekcard__themas a:hover,
.zoekcard__sublijst a:hover {
	background: rgba(54, 160, 156, 0.08);
	text-decoration: none;
}

/* ---- Projectgrid (archief / zoekresultaten) -------------------------------- */

.project-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--gap-l);
}

.project-kaartje a {
	display: flex;
	flex-direction: column;
	gap: var(--gap-s);
	height: 100%;
	padding: 30px;
	background: var(--kleur-wit);
	border: 1px solid var(--rand-teal);
	border-radius: var(--radius);
	color: var(--kleur-tekst);
	transition: transform 0.2s, box-shadow 0.2s;
}

.project-kaartje a:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--schaduw-card);
}

.project-kaartje__thema {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-tag);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kleur-teal);
}

.project-kaartje__titel {
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.35;
}

.project-kaartje__org {
	font-size: var(--fs-klein);
	color: var(--kleur-teal);
}

.project-kaartje__link {
	margin-top: auto;
	padding-top: var(--gap-s);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--rand-teal-licht);
	font-size: var(--fs-klein);
	color: var(--kleur-oranje);
}

.pagina__sub {
	font-size: var(--fs-body-groot);
	color: rgba(51, 51, 51, 0.7);
	margin-top: 0;
}

/* ---- Standaard/legal pagina's ---------------------------------------------- */

.pagina--smal { max-width: 913px; } /* leeskolom zoals de projectdetail-inhoud */

/* Intro boven een overzicht (o.a. sjabloon Kennis & inspiratie). */
.pagina__intro {
	max-width: 913px;
	margin-bottom: var(--gap-l);
}

/* Gutenberg-knoppen in de huisstijl (o.a. voor de aanmeldpagina:
   community + nieuwsbrief). Redactie voegt gewoon een "Knoppen"-blok
   toe; de outline-stijl wordt teal. */
.prose .wp-block-button__link {
	display: inline-block;
	padding: 12px 28px;
	background: var(--kleur-oranje);
	color: var(--kleur-wit);
	border-radius: 0;
	font-weight: 600;
	text-decoration: none;
}
.prose .wp-block-button__link:hover,
.prose .wp-block-button__link:focus-visible {
	background: var(--kleur-oranje-cta);
	text-decoration: none;
}

.prose .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--kleur-teal);
	border: 2px solid var(--kleur-teal);
}
.prose .is-style-outline .wp-block-button__link:hover,
.prose .is-style-outline .wp-block-button__link:focus-visible {
	background: var(--kleur-teal);
	color: var(--kleur-wit);
}

/* Editor-inhoud (WYSIWYG): koppen, lijsten, tabellen, quotes. */
.prose { line-height: 1.75; }

.prose h2,
.prose h3,
.prose h4 {
	font-weight: 500;
	color: var(--kleur-teal);
	margin: 1.6em 0 0.6em;
	line-height: 1.3;
}
.prose h2 { font-size: var(--fs-kaartkop); }
.prose h3 { font-size: 1.125rem; }
.prose h4 { font-size: var(--fs-body); }

.prose p { margin: 0 0 1.2em; }

.prose ul,
.prose ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--kleur-teal); }

.prose a { text-decoration: underline; }

.prose blockquote {
	margin: 1.5em 0;
	padding: 0.5em 0 0.5em 1.25em;
	border-left: 3px solid var(--kleur-teal);
	color: rgba(51, 51, 51, 0.8);
	font-style: italic;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: var(--fs-klein);
}
.prose th,
.prose td {
	padding: 10px 14px;
	border: 1px solid var(--rand-teal-licht);
	text-align: left;
}
.prose th {
	background: rgba(54, 160, 156, 0.06);
	font-weight: 600;
	color: var(--kleur-teal);
}

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

.prose hr {
	border: 0;
	border-top: 1px solid var(--rand-teal-licht);
	margin: 2em 0;
}

/* ---- Knop-component --------------------------------------------------------- */

.knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border: 0; /* ook als <button>: geen browser-standaardrand */
	border-radius: 0;
	font-family: inherit;
	cursor: pointer;
	background: var(--kleur-oranje-cta);
	color: var(--kleur-wit);
	font-size: var(--fs-klein);
	font-weight: 600;
	letter-spacing: 0.5px;
	transition: transform 0.2s, box-shadow 0.2s;
}
.knop:hover,
.knop:focus-visible {
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--schaduw-card);
}

/* Teal omlijnde variant (shortcode [medzo_knop stijl="outline"]),
   zelfde beeld als de outline-stijl van Gutenberg-knoppen. */
.knop--outline {
	background: transparent;
	color: var(--kleur-teal);
	border: 2px solid var(--kleur-teal);
}
.knop--outline:hover,
.knop--outline:focus-visible {
	background: var(--kleur-teal);
	color: var(--kleur-wit);
}

/* In lopende tekst (.prose a zet onderstreping en oranje): knoppen houden
   hun eigen kleur, geen streep, en wat lucht rond de knop. */
.prose a.knop {
	color: var(--kleur-wit);
	text-decoration: none;
	margin: 4px 12px 4px 0;
}
.prose a.knop--outline { color: var(--kleur-teal); }
.prose a.knop--outline:hover,
.prose a.knop--outline:focus-visible { color: var(--kleur-wit); }

.knop--wit {
	background: var(--kleur-wit);
	color: var(--kleur-teal);
	margin-top: var(--gap-m);
}

/* ---- Archief-teller & lege staat -------------------------------------------- */

.archief__teller {
	margin: 0 0 var(--gap-l);
	font-size: var(--fs-klein);
	color: rgba(51, 51, 51, 0.6);
}

.archief__leeg {
	text-align: center;
	padding-block: var(--gap-l);
}
.archief__leeg .knop { margin-top: var(--gap-s); }

/* ---- Responsive pass (mobiel/tablet) --------------------------------------
   Het Figma-ontwerp heeft alleen desktop-frames (1920px); onderstaande
   regels zijn de mobiele vertaling van dezelfde tokens. */

@media (max-width: 900px) {
	:root { --sectie-pad: 50px; }

	.hero { padding: 60px var(--container-pad) 140px; }
	.hero--klein { padding: 50px var(--container-pad); }

	.hero__decor { background-size: 1900px 1900px; }

	.medzo-kaart { margin-top: -80px; }
	.medzo-kaart__canvas { height: min(560px, 70vh); }
	.medzo-filters { max-height: min(560px, 70vh); }
}

@media (max-width: 700px) {
	.hero { padding: 40px var(--container-pad) 120px; }

	.hero__intro { font-size: var(--fs-body); }

	.medzo-kaart { margin-top: -60px; }

	.medzo-kaart__binnen {
		display: flex;
		flex-direction: column;
	}

	/* Legenda: ook op mobiel het compacte witte kaartje óp de kaart,
	   standaard dichtgeklapt — als los blok onder de kaart oogde hij als
	   een groot wit vlak (feedback sept 2026). Alleen iets krapper in de
	   hoek gezet. */
	.medzo-kaart__legenda {
		right: 12px;
		bottom: 12px;
	}
	.medzo-kaart__canvas { height: min(480px, 62vh); }

	/* Grotere, duimvriendelijke zoomknoppen. */
	.medzo-kaart__canvas .leaflet-bar a {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 22px;
	}

	.medzo-filters {
		max-height: none;
		padding: 24px 20px;
	}

	/* Meta-rijen en sidebar-rijen: label boven waarde. */
	.project__meta-rij,
	.kaartje__rij {
		flex-direction: column;
		gap: 2px;
	}
	.project__meta-rij dt,
	.kaartje__label { width: auto; }
	.project__meta-rij { line-height: 1.6; padding-block: 10px; }

	.kaartje { padding: 20px; }

	/* Verhalen-item: tekst boven, tag + pijl eronder. */
	.verhalen__item a { flex-wrap: wrap; }
	.verhalen__tekst { flex-basis: 100%; }
	.verhalen__item svg { margin-left: auto; }

	.verhalen__kop {
		flex-direction: column;
		align-items: stretch;
	}
	.verhalen__filter select { width: 100%; }

	.site-footer__contact { flex-direction: column; gap: 0; }

	.site-footer__balk-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding-block: 14px;
	}
}

@media (max-width: 480px) {
	.zoekcard,
	.hero__zoek { width: 100%; }

	.zoekcard__form { padding: 16px; }

	.project-grid { grid-template-columns: 1fr; }

	.medzo-kaart { margin-top: -60px; }
}

/* ---- Motion-voorkeur ------------------------------------------------------ */

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

/* ---- Print / "Maak een PDF" ----------------------------------------------
   De PDF-knop in het tools-blok opent de printdialoog ("Opslaan als PDF").
   Hieronder blijft alleen de projectinhoud over: navigatie, hero-decor,
   het tools-blok zelf en interactieve elementen vallen weg, de sidebar
   komt onder de tekst en de URL wordt afgedrukt zodat de PDF
   terugvindbaar is. */
@media print {
	@page {
		size: A4;
		margin: 16mm 14mm;
	}

	html, body {
		background: #fff !important;
		color: #000;
		font-size: 10.5pt;
	}

	/* Achtergronden en kleuren van meta-rijen/kaartjes ook op papier. */
	* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

	/* Alles wat niet in een projectsamenvatting hoort. */
	.site-header,
	.site-footer,
	.hero:not(.hero--project),
	.hero__decor,
	.project__terug,
	.kaartje--tools,
	.medzo-kaart,
	.zoekcard,
	.site-zoek,
	.verhalen__kop .verhalen__filter,
	.project-grid--gerelateerd,
	.skip-link { display: none !important; }

	/* Eén kolom: sidebarkaarten onder de inhoud. */
	.project__grid {
		display: block !important;
		padding: 0 !important;
		gap: 0 !important;
	}

	.project__sidebar {
		position: static !important;
		max-height: none !important;
		overflow: visible !important;
		display: block !important;
		margin-top: 10mm;
	}

	.container { max-width: none; padding: 0; }

	/* Projecttitel staat in de hero; op papier als gewone donkere kop. */
	.hero--project {
		background: none !important;
		color: #1a6b68;
		padding: 0;
		text-align: left;
	}
	.hero--project .hero__titel {
		font-size: 20pt;
		margin-bottom: 6mm;
	}

	.project__blok { margin-bottom: 7mm; }
	.project__blok h2 { font-size: 12pt; }

	/* Blokken niet over paginagrenzen scheuren. */
	.project__blok,
	.kaartje,
	.verhalen__item { break-inside: avoid; page-break-inside: avoid; }

	.kaartje {
		border: 1px solid #b9d9d7 !important;
		margin-bottom: 5mm;
		padding: 5mm;
	}

	/* Volvlakke kaartjes (teal/oranje) op papier omzetten naar wit met rand:
	   scheelt toner en houdt de tekst leesbaar. */
	.kaartje--teal,
	.kaartje--oranje {
		background: #fff !important;
		color: #000 !important;
	}
	.kaartje--teal .kaartje__kop,
	.kaartje--oranje .kaartje__kop { color: #1a6b68 !important; }
	.kaartje--teal .kaartje__chips li {
		background: #eef7f6 !important;
		color: #000 !important;
	}
	.kaartje__downloads li { border-color: #b9d9d7 !important; }
	.kaartje__downloads a,
	.kaartje__downloads a svg { color: #000 !important; }


	/* Links: URL erachter tonen, behalve bij menu's/knoppen. */
	.prose a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-size: 8.5pt;
		color: #555;
		word-break: break-all;
	}

	/* Bron onderaan de eerste pagina. */
	.project__meta::after {
		content: attr( data-print-url );
		display: block;
		margin-top: 3mm;
		font-size: 8.5pt;
		color: #555;
	}
}