/*
Theme Name: NHN Gezond
Theme URI: https://www.nhngezond.nl
Author: 072DESIGN
Author URI: https://www.072design.nl
Description: Blokthema voor Noord-Holland Noord Gezond. De opmaak ligt vast in het thema; de redactie vult tekst, beeld en velden.
Version: 0.3.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: nhngezond
*/

/*
 * Opbouw
 * 1. Tokens en basis
 * 2. Layout: kop, secties, wrap, voet
 * 3. Knoppen, zoekveld, meta
 * 4. Kaarten (project, nieuws, coalitie)
 * 5. Homepage-blokken
 * 6. Bibliotheek
 * 7. Detailpagina's
 * 8. Responsive
 *
 * WordPress zet zijn layoutregels (flow-marges) als inline stijl ná dit
 * bestand, met specificiteit 0,1,0. Waar we marges bewust anders willen, staat
 * daarom "body" voor de selector (0,1,1). Zie de bouw-checklist in de wiki.
 */

/* 1. Tokens en basis ------------------------------------------------------- */

:root {
	--groen: var(--wp--preset--color--groen);
	--donkergroen: var(--wp--preset--color--donkergroen);
	--oranje: var(--wp--preset--color--oranje);
	--bordeaux: var(--wp--preset--color--bordeaux);
	--lichtblauw: var(--wp--preset--color--lichtblauw);
	--inkt: var(--wp--preset--color--inkt);
	--gedempt: var(--wp--preset--color--gedempt);
	--vlak: var(--wp--preset--color--vlak);
	--lijn: var(--wp--preset--color--lijn);
	--wit: var(--wp--preset--color--wit);
	--voet: var(--wp--preset--color--voet);

	--xs: var(--wp--preset--spacing--xs);
	--s: var(--wp--preset--spacing--s);
	--m: var(--wp--preset--spacing--m);
	--l: var(--wp--preset--spacing--l);
	--xl: var(--wp--preset--spacing--xl);
	--xxl: var(--wp--preset--spacing--xxl);

	--r-s: var(--wp--custom--radius--s);
	--r-m: var(--wp--custom--radius--m);
	--r-l: var(--wp--custom--radius--l);
	--r-pil: var(--wp--custom--radius--pill);

	--kopfont: var(--wp--preset--font-family--kop);
	--klein: var(--wp--preset--font-size--klein);
	--wrap: 1200px;
	--smal: 760px;
	--rand: clamp(16px, 4vw, 24px);
}

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

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

/* Lange woorden, e-mailadressen en webadressen breken af als ze niet passen
   (reflow op 320 px en ruimere tekstafstand, WCAG 1.4.10 en 1.4.12). */
body {
	overflow-wrap: break-word;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

/* Focus: donkere rand met een witte rand eromheen. Zichtbaar op wit én op de
   kleurvlakken (WCAG 2.4.7, en 3:1 voor de focusindicator, 1.4.11). */
:focus-visible {
	outline: 3px solid var(--inkt);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--wit);
	border-radius: 2px;
}

/* Een gefocust element mag niet achter de plakkende kop verdwijnen (WCAG 2.2, 2.4.11). */
html {
	scroll-padding-top: 140px;
}

/* Lage vensters (zoals bij 400% zoom): de kop en zijbalk plakken niet, anders
   blijft er te weinig ruimte over voor de inhoud. */
@media (max-height: 500px) {
	.nhng-kopwrap {
		position: static !important;
	}

	html {
		scroll-padding-top: 0;
	}

	.nhng-zijbalk {
		position: static;
		max-height: none;
	}
}

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

.nhng-plaatshouder {
	padding: var(--m);
	border: 2px dashed var(--lijn);
	border-radius: var(--r-m);
	color: var(--gedempt);
	font-size: var(--klein);
	text-align: center;
}

/* 2. Layout --------------------------------------------------------------- */

body .wp-site-blocks > *,
body .nhng-main > * {
	margin-block: 0;
}

.nhng-wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--rand);
}

.nhng-smal {
	max-width: var(--smal);
	margin-inline: auto;
}

.nhng-sectie {
	padding-block: var(--xxl);
}

body .nhng-sectie--aansluitend {
	padding-top: 0;
}

.nhng-sectie--vlak {
	background: var(--vlak);
}

.nhng-sectie--groen {
	background: var(--groen);
	color: var(--wit);
	overflow: hidden;
}

.nhng-sectie--opening {
	padding-block: var(--xl) var(--xxl);
}

.nhng-paginakop {
	padding-block: var(--xl) var(--l);
}

.nhng-paginakop h1,
.nhng-paginakop .wp-block-post-title {
	font-size: var(--wp--preset--font-size--kop-xl);
}

.nhng-intro,
.nhng-paginakop .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--groot);
	color: var(--gedempt);
	max-width: 60ch;
}

.nhng-paginakop .wp-block-post-excerpt__excerpt {
	margin: 0;
}

body .nhng-sectiekop {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: var(--m);
	flex-wrap: wrap;
	margin-block: 0 var(--xl);
}

body .nhng-sectiekop > *,
.nhng-sectiekop h2,
.nhng-sectiekop p {
	margin-block: 0;
}

.nhng-sectiekop h2 {
	max-width: 46ch;
}

.nhng-sectiekop p {
	color: var(--gedempt);
	max-width: 60ch;
}

body .nhng-sectiekop__tekst > p,
.nhng-sectiekop h2 + p {
	margin-top: var(--s);
}

.nhng-meer a {
	font-weight: 700;
	text-decoration: none;
	position: relative;
	padding-bottom: 2px;
}

.nhng-meer a::after,
.nhng-regio-instap a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.nhng-regio-instap a::after {
	left: 28px;
}

.nhng-meer a:hover::after,
.nhng-regio-instap a:hover::after {
	transform: scaleX(1);
}

/* Kop (header) */

.nhng-kopwrap {
	position: sticky;
	top: 0;
	z-index: 20;
}

.admin-bar .nhng-kopwrap {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.nhng-kop {
	background: var(--wit);
	box-shadow: 0 1px 0 var(--lijn);
}

.nhng-kop__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--m);
	min-height: 116px;
	transition: min-height 0.25s ease;
}

body .nhng-kop__binnen > * {
	margin: 0;
}

.nhng-logo {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
}

.nhng-logo img {
	display: block;
	height: 88px;
	width: auto;
	transition: height 0.25s ease;
}

.nhng-kop.is-compact .nhng-kop__binnen {
	min-height: 84px;
}

.nhng-kop.is-compact .nhng-logo img {
	height: 62px;
}

/* Hoofdmenu */

.nhng-menu__knop {
	display: none;
	background: none;
	border: 2px solid var(--lijn);
	border-radius: var(--r-s);
	width: 48px;
	height: 48px;
	cursor: pointer;
	padding: 0;
}

.nhng-menu__knop span[aria-hidden] {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--inkt);
	margin: 4px auto;
}

.nhng-menu__lijst {
	display: flex;
	align-items: center;
	gap: var(--m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nhng-menu__lijst a {
	color: var(--inkt);
	text-decoration: none;
	font-weight: 500;
}

.nhng-menu--hoofd .nhng-menu__lijst a:not(.wp-element-button) {
	position: relative;
	padding-block: var(--xs);
}

.nhng-menu--hoofd .nhng-menu__lijst a:not(.wp-element-button)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1.5px;
	background: var(--groen);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.nhng-menu--hoofd .nhng-menu__lijst a:not(.wp-element-button):hover::after,
.nhng-menu--hoofd .nhng-menu__lijst a[aria-current="page"]::after,
.nhng-menu--hoofd .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.nhng-menu--hoofd .nhng-menu__lijst .knop {
	margin-left: var(--s);
}

.nhng-menu__lijst a.wp-element-button {
	min-height: 44px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--groen);
}

.nhng-menu__lijst a.wp-element-button:hover {
	color: var(--wit);
}

/* Kleurstrook */

.nhng-strook {
	display: grid;
	grid-template-columns: 3fr 2fr 4fr 1fr;
	height: 6px;
}

.nhng-strook i:nth-child(1) { background: var(--groen); }
.nhng-strook i:nth-child(2) { background: var(--lichtblauw); }
.nhng-strook i:nth-child(3) { background: var(--oranje); }
.nhng-strook i:nth-child(4) { background: var(--bordeaux); }

/* Voet */

.nhng-voet {
	background: var(--voet);
	color: rgba(255, 255, 255, 0.82);
	font-size: 1rem;
}

.nhng-voet a {
	color: inherit;
	text-decoration: none;
}

.nhng-voet a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nhng-voet__raster {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--xl);
	padding-block: var(--xxl) var(--xl);
}

body .nhng-voet__raster > * {
	margin: 0;
}

.nhng-voet .nhng-logo img {
	height: 96px;
	margin-bottom: var(--s);
}

body .nhng-voet__merk > p {
	margin: 0;
}

.nhng-menu--voet .nhng-menu__kop {
	color: var(--wit);
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	margin: 0 0 var(--s);
}

.nhng-menu--voet .nhng-menu__lijst {
	display: grid;
	gap: 6px;
}

.nhng-menu--voet .nhng-menu__lijst a {
	color: inherit;
	font-weight: 400;
	display: inline-block;
	min-height: 24px;
	padding-block: 2px;
}

body .nhng-voet__onder {
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: var(--s);
	display: flex;
	justify-content: flex-end;
	font-size: var(--klein);
	color: rgba(255, 255, 255, 0.6);
}

body .nhng-voet__onder p {
	margin: 0;
}

/* 3. Knoppen, zoekveld, meta ----------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--knop--hoogte);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Varianten: als blokstijl (is-style-*) en als klasse voor de eigen blokken. */
.is-style-omlijnd .wp-block-button__link,
.nhng-knop-omlijnd.wp-element-button {
	background: transparent;
	border-color: var(--groen);
	color: var(--groen);
}

.is-style-omlijnd .wp-block-button__link:hover,
.nhng-knop-omlijnd.wp-element-button:hover {
	background: var(--groen);
	color: var(--wit);
}

.is-style-licht .wp-block-button__link,
.nhng-knop-licht.wp-element-button {
	background: transparent;
	border-color: var(--wit);
	color: var(--wit);
}

.is-style-licht .wp-block-button__link:hover,
.nhng-knop-licht.wp-element-button:hover {
	background: var(--wit);
	color: var(--bordeaux);
}

.is-style-inkt .wp-block-button__link,
.nhng-knop-inkt.wp-element-button {
	background: transparent;
	border-color: var(--inkt);
	color: var(--inkt);
}

.is-style-inkt .wp-block-button__link:hover,
.nhng-knop-inkt.wp-element-button:hover {
	background: var(--inkt);
	color: var(--wit);
}

.nhng-knoppen,
body .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s);
}

/* Een div die uit de layout verdwijnt, zodat de knop een direct flexkind blijft. */
.nhng-contents {
	display: contents;
}

.nhng-zoek__label {
	display: block;
	font-weight: 700;
	margin-bottom: var(--xs);
}

.nhng-zoek__rij {
	display: flex;
	gap: var(--xs);
}

.nhng-zoek input[type="search"],
.nhng-bieb input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: var(--wp--custom--invoer--hoogte);
	border: 2px solid var(--groen);
	border-radius: var(--r-s);
	padding: 0 var(--s);
	font: 400 1.0625rem var(--wp--preset--font-family--tekst);
	color: var(--inkt);
	background: var(--wit);
}

.nhng-zoek input[type="search"]:focus-visible,
.nhng-bieb input[type="search"]:focus-visible {
	border-color: var(--inkt);
}

.nhng-zoek .wp-element-button,
.nhng-bieb__zoek .wp-element-button {
	min-height: var(--wp--custom--invoer--hoogte);
}

.nhng-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	font-size: var(--klein);
	color: var(--gedempt);
}

body .nhng-meta > * {
	margin: 0;
}

.nhng-meta > * + *::before {
	content: "·";
	margin-right: 10px;
}

.nhng-meta a {
	color: inherit;
	text-decoration: none;
}

.nhng-kaart__label {
	font-size: var(--klein);
	color: var(--gedempt);
}

.nhng-meta--coalitie a {
	color: var(--groen);
	font-weight: 700;
}

.nhng-meta--project a {
	color: var(--groen);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nhng-regios {
	font-size: var(--klein);
	color: var(--gedempt);
	line-height: 1.5;
}

/* Scherf en regionaam blijven bij elkaar, maar mogen afbreken als het niet past. */
.nhng-regios span {
	display: inline-block;
	max-width: 100%;
}

.nhng-regios span + span::before {
	content: ", ";
	white-space: normal;
}

.nhng-scherf {
	display: inline-block;
	width: 14px;
	height: 11px;
	flex: none;
	clip-path: polygon(0 15%, 82% 0, 100% 85%, 12% 100%);
	background: var(--nhng-regiokleur, var(--groen));
}

.nhng-regios .nhng-scherf {
	width: 10px;
	height: 8px;
	margin-right: 6px;
	vertical-align: 1px;
}

.nhng-leeg,
.nhng-bieb__leeg {
	padding: var(--l);
	border: 2px dashed var(--lijn);
	border-radius: var(--r-m);
	color: var(--gedempt);
}

/* 4. Kaarten -------------------------------------------------------------- */

.nhng-kaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--m);
	list-style: none;
	padding: 0;
	margin: 0;
}

.nhng-kaart[hidden] {
	display: none;
}

.nhng-kaart a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.nhng-kaart__beeld {
	overflow: hidden;
	border-radius: var(--r-m);
}

.nhng-kaart__beeld img,
.nhng-kaart__leeg {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.nhng-kaart__leeg {
	background: var(--nhng-vlak, var(--vlak));
}

.nhng-kaart a:hover img {
	transform: scale(1.02);
}

.nhng-kaart__tekst {
	padding-top: var(--s);
	display: flex;
	flex-direction: column;
	gap: var(--xs);
	flex: 1;
}

.nhng-kaart__tekst > * {
	margin: 0;
}

.nhng-kaart__titel {
	font-size: var(--wp--preset--font-size--kop-s);
}

.nhng-kaart a:hover .nhng-kaart__titel {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.nhng-kaart__samenvatting {
	font-size: 0.97rem;
	color: var(--gedempt);
	line-height: 1.5;
}

.nhng-kaart .nhng-regios {
	margin-top: auto;
	padding-top: var(--xs);
}

/* Nieuwskaarten: Query Loop en nhng_nieuwskaart() hebben dezelfde markup. */

body .nhng-nieuwslijst,
.nhng-gerelateerd .nhng-nieuwslijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--m);
	list-style: none;
	padding: 0;
	margin: 0;
}

.nhng-nieuws--uitgelicht .nhng-nieuwslijst {
	grid-template-columns: 2fr 1fr 1fr;
}

.nhng-nieuwslijst > li {
	display: flex;
	flex-direction: column;
	gap: var(--s);
	margin: 0;
}

body .nhng-nieuwslijst > li > * {
	margin: 0;
}

.nhng-nieuwslijst .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--r-m);
}

.nhng-nieuwslijst .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

.nhng-nieuws--uitgelicht .nhng-nieuwslijst > li:first-child .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
}

.nhng-nieuwslijst .wp-block-post-title {
	font-size: var(--wp--preset--font-size--kop-s);
}

.nhng-nieuws--uitgelicht .nhng-nieuwslijst > li:first-child .wp-block-post-title {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
}

.nhng-nieuwslijst .wp-block-post-title a {
	color: var(--inkt);
	text-decoration: none;
}

.nhng-nieuwslijst .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.nhng-paginering {
	margin-top: var(--xl);
	gap: var(--s);
	font-weight: 700;
}

.nhng-paginering a {
	text-decoration: none;
}

/* Coalitiekaarten */

.nhng-coalitiekaart a {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--s);
	height: 100%;
	min-height: 400px;
	padding: var(--l);
	border-radius: var(--r-l);
	text-decoration: none;
	background: var(--nhng-kaartkleur, var(--groen));
	color: var(--nhng-kaarttekst, var(--wit));
	transition: transform 0.25s ease;
}

.nhng-coalitiekaart a:hover {
	transform: translateY(-4px);
}

.nhng-coalitiekaart h3 {
	color: inherit;
	hyphens: auto;
	font-size: var(--wp--preset--font-size--kop-m);
	line-height: 1.05;
	letter-spacing: -0.02em;
	position: relative;
	margin: 0;
}

.nhng-coalitiekaart p {
	font-size: 1.125rem;
	line-height: 1.5;
	max-width: 30ch;
	position: relative;
	margin: 0;
}

.nhng-coalitiekaart__verder {
	margin-top: auto;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: var(--xs);
	position: relative;
}

.nhng-coalitiekaart__verder::after {
	content: "→";
	font-size: 22px;
	transition: transform 0.25s;
}

.nhng-coalitiekaart a:hover .nhng-coalitiekaart__verder::after {
	transform: translateX(4px);
}

.nhng-coalitiekaart svg {
	position: absolute;
	right: -18px;
	bottom: -18px;
	width: 190px;
	height: 170px;
}

/* 5. Homepage ------------------------------------------------------------- */

.nhng-opening {
	display: grid;
	grid-template-columns: 6fr 6fr;
	gap: var(--xl);
	align-items: center;
}

.nhng-opening__kop {
	font-size: var(--wp--preset--font-size--opening);
	letter-spacing: -0.035em;
	line-height: 0.98;
	color: var(--donkergroen);
	margin: 0;
}

.nhng-opening__kop span {
	color: var(--bordeaux);
}

.nhng-opening__intro {
	font-size: var(--wp--preset--font-size--groot);
	max-width: 36ch;
	margin: var(--m) 0 0;
	color: var(--gedempt);
}

.nhng-zoek--opening {
	margin-top: var(--l);
	max-width: 560px;
}

.nhng-opening__hints {
	display: flex;
	flex-wrap: wrap;
	gap: var(--xs) var(--s);
	margin: var(--s) 0 0;
	font-size: 0.9375rem;
	color: var(--gedempt);
}

.nhng-opening__hints a {
	color: var(--groen);
	font-weight: 700;
}

.nhng-mozaiek {
	width: 100%;
	height: auto;
	overflow: visible;
	display: block;
}

/* Scherven vallen bij het laden op hun plek. Altijd zichtbaar, alleen verschoven. */
.nhng-mozaiek__stuk {
	transform-box: fill-box;
	transform-origin: center;
	animation: nhng-settle 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--i) * 60ms);
}

@keyframes nhng-settle {
	from {
		transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) rotate(calc(var(--r) * 0.5));
	}
	to {
		transform: none;
	}
}

/* Verplicht: in de editor geen animatie. */
.editor-styles-wrapper .nhng-mozaiek__stuk {
	animation: none;
	transform: none;
}

/* Instap per regio */

.nhng-regio-instap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s) var(--m);
	margin-top: var(--xl);
	padding-top: var(--l);
	border-top: 1px solid var(--lijn);
}

.nhng-regio-instap__kop {
	font-weight: 700;
	margin: 0;
}

.nhng-regio-instap ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--xs) var(--m);
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.nhng-regio-instap a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--inkt);
	text-decoration: none;
	padding-block: 4px;
	position: relative;
}

.nhng-regio-instap .nhng-scherf {
	width: 18px;
	height: 14px;
}

/* Carrousel */

.nhng-carrousel__pijlen {
	display: flex;
	gap: var(--xs);
}

.nhng-carrousel__pijlen[hidden] {
	display: none;
}

.nhng-carrousel__pijlen button {
	width: 52px;
	height: 52px;
	border-radius: var(--r-pil);
	border: 2px solid var(--groen);
	background: transparent;
	color: var(--groen);
	font: 700 22px/1 var(--wp--preset--font-family--tekst);
	cursor: pointer;
	transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.nhng-carrousel__pijlen button:hover:not(:disabled) {
	background: var(--groen);
	color: var(--wit);
}

.nhng-carrousel__pijlen button:disabled {
	opacity: 0.3;
	cursor: default;
}

.nhng-carrousel__spoor {
	display: flex;
	gap: var(--m);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	list-style: none;
	margin: 0;
	padding: var(--xs) 0;
	scrollbar-width: none;
}

.nhng-carrousel__spoor::-webkit-scrollbar {
	display: none;
}

.nhng-carrousel__spoor:focus-visible {
	outline-offset: 6px;
	border-radius: var(--r-m);
}

.nhng-carrousel__spoor .nhng-coalitiekaart {
	flex: 0 0 calc((100% - var(--m) * 2) / 2.3);
	scroll-snap-align: start;
}

.nhng-carrousel__voortgang {
	height: 3px;
	background: var(--lijn);
	border-radius: var(--r-pil);
	margin-top: var(--m);
	overflow: hidden;
}

.nhng-carrousel__voortgang i {
	display: block;
	height: 100%;
	width: 30%;
	background: var(--groen);
	border-radius: var(--r-pil);
	transition: transform 0.2s ease, width 0.2s ease;
	transform-origin: left;
}

.nhng-coalitieraster__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nhng-coalitieraster__lijst .nhng-coalitiekaart a {
	min-height: 320px;
}

/* Drie naast elkaar is smaller dan in de carrousel: lange namen afbreken. */
.nhng-coalitieraster__lijst .nhng-coalitiekaart h3 {
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	hyphens: auto;
	overflow-wrap: break-word;
}

/* De opgave */

.nhng-opgave {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--xl);
	align-items: end;
}

.nhng-opgave__jaartal {
	font-family: var(--kopfont);
	font-weight: 800;
	font-size: clamp(120px, 22vw, 300px);
	line-height: 0.8;
	letter-spacing: -0.05em;
	margin: 0 0 var(--m);
}

.nhng-opgave__zin {
	font-family: var(--kopfont);
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 600;
	line-height: 1.2;
	max-width: 20ch;
	margin: 0;
}

.nhng-opgave__cijfers {
	display: grid;
	gap: var(--m);
	list-style: none;
	padding: 0;
	margin: 0;
}

.nhng-opgave__cijfers li {
	border-top: 4px solid var(--oranje);
	padding-top: var(--s);
}

.nhng-opgave__cijfers li:nth-child(2) {
	border-color: var(--lichtblauw);
}

.nhng-opgave__cijfers li:nth-child(3) {
	border-color: var(--wit);
}

.nhng-opgave__cijfers b {
	font-family: var(--kopfont);
	font-size: 2.5rem;
	line-height: 1;
	display: block;
}

.nhng-opgave__cijfers span {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.88);
}

/* Evenementkaart */

.nhng-evenementkaart {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: var(--r-l);
	overflow: hidden;
}

.nhng-evenementkaart--zonder-foto {
	grid-template-columns: 1fr;
}

.nhng-evenementkaart__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 380px;
	display: block;
}

.nhng-evenementkaart__tekst {
	background: var(--bordeaux);
	color: var(--wit);
	padding: var(--xl);
	display: flex;
	flex-direction: column;
	gap: var(--s);
	justify-content: center;
}

.nhng-evenementkaart__tekst > * {
	margin: 0;
}

.nhng-evenementkaart__titel {
	color: var(--wit);
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
}

.nhng-evenementkaart__tekst p {
	color: rgba(255, 255, 255, 0.9);
}

.nhng-evenementkaart dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px var(--m);
}

.nhng-evenementkaart dt {
	color: rgba(255, 255, 255, 0.75);
}

.nhng-evenementkaart dd {
	margin: 0;
	font-weight: 700;
}

.nhng-evenementkaart__tekst .nhng-datum {
	color: var(--wit);
}

.nhng-datum {
	font-family: var(--kopfont);
	font-weight: 800;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s);
}

.nhng-datum b {
	font-size: 88px;
	line-height: 0.85;
	letter-spacing: -0.04em;
}

.nhng-datum span {
	font-size: 1.5rem;
}

/* Meedoen */

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

.nhng-meedoen__blok {
	border-radius: var(--r-l);
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
}

.nhng-meedoen__blok > img {
	aspect-ratio: 16 / 8;
	object-fit: cover;
	width: 100%;
	display: block;
}

.nhng-meedoen__tekst {
	padding: var(--l);
	display: flex;
	flex-direction: column;
	gap: var(--s);
}

.nhng-meedoen__tekst > * {
	margin: 0;
}

.nhng-meedoen__blok--vlak {
	background: var(--vlak);
}

.nhng-meedoen__blok--vlak p {
	color: var(--gedempt);
}

.nhng-meedoen__blok--vlak .nhng-meedoen__titel {
	font-size: var(--wp--preset--font-size--kop-s);
}

.nhng-meedoen__blok--blauw {
	background: var(--lichtblauw);
}

.nhng-meedoen__blok--blauw .nhng-meedoen__tekst {
	justify-content: center;
}

.nhng-meedoen__blok--blauw .nhng-meedoen__titel {
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	line-height: 1.1;
}

/* Nieuwsbrief */

.nhng-nieuwsbrief {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--xl);
	align-items: center;
	border-top: 2px solid var(--inkt);
	padding-top: var(--xl);
}

.nhng-nieuwsbrief h2 {
	margin: 0;
}

.nhng-nieuwsbrief p {
	color: var(--gedempt);
	margin: var(--s) 0 0;
}

/* 6. Bibliotheek ---------------------------------------------------------- */

.nhng-paginakop--bieb {
	padding-bottom: var(--m);
}

.nhng-bieb__zoek {
	max-width: 620px;
	padding-bottom: var(--l);
}

.nhng-bieb__zoek .nhng-zoek__label {
	display: block;
	font-weight: 700;
	margin-bottom: var(--xs);
}

.nhng-bieb__raster {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--xl);
	align-items: start;
	border-top: 1px solid var(--lijn);
	padding-top: var(--xl);
}

.nhng-filters {
	background: var(--vlak);
	border-radius: var(--r-m);
	padding: var(--m);
	position: sticky;
	top: 110px;
}


.nhng-filters summary::-webkit-details-marker {
	display: none;
}

.nhng-filters__kop {
	font-family: var(--kopfont);
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0 0 var(--s);
}

/* Uitklapknop (filters, Op deze pagina): alleen op smalle schermen, via JS. */
.nhng-uitklap__knop {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--xs);
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
	min-height: 44px;
}

.nhng-uitklap__knop[hidden] {
	display: none;
}

.nhng-uitklap__knop::after {
	content: "+";
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	margin-left: auto;
}

.nhng-uitklap__knop[aria-expanded="true"]::after {
	content: "−";
}

@media (max-width: 900px) {
	.nhng-uitklap.is-js > .nhng-uitklap__kop {
		display: none;
	}

	.nhng-uitklap.is-js > .nhng-uitklap__knop[aria-expanded="true"] {
		margin-bottom: var(--s);
	}
}

/* In een flex-knop valt de spatie voor "(1)" weg. */
.nhng-filters__aantal:not(:empty) {
	margin-left: 0.25em;
}

.nhng-filters fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--m);
	min-width: 0;
}

/* Paneel hoger dan het scherm: dan scrolt het paneel zelf, anders is de
   onderkant van een plakkend paneel onbereikbaar. Alleen op brede schermen. */
@media (min-width: 901px) {
	.nhng-filters {
		max-height: calc(100vh - 130px);
		overflow-y: auto;
	}
}

.nhng-filters__uitklap {
	margin: 0 0 var(--m);
}

.nhng-filters__uitklap > summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: var(--donkergroen);
	cursor: pointer;
	margin: 0;
	padding: 5px 0;
}

.nhng-filters__uitklap > summary::after {
	content: "+";
	margin-left: auto;
	font-weight: 800;
}

.nhng-filters__uitklap[open] > summary::after {
	content: "−";
}

.nhng-filters__uitklap .nhng-filters__groep {
	margin-bottom: 0;
}

.nhng-filters legend {
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: var(--xs);
	padding: 0;
	color: var(--donkergroen);
}

.nhng-filters label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
	padding: 5px 0;
	cursor: pointer;
}

.nhng-filters input {
	width: 20px;
	height: 20px;
	accent-color: var(--groen);
	flex: none;
	margin: 0;
}

.nhng-filters__telling {
	margin-left: auto;
	color: var(--gedempt);
	font-size: var(--klein);
	font-variant-numeric: tabular-nums;
}

.nhng-filters__acties {
	display: flex;
	flex-direction: column;
	gap: var(--s);
}

.nhng-filters__wissen {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--groen);
	text-underline-offset: 3px;
}

.nhng-bieb__coalitie {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--m);
	align-items: center;
	padding: var(--m);
	border-radius: var(--r-m);
	margin-bottom: var(--l);
	background: var(--nhng-kaartkleur, var(--groen));
	color: var(--nhng-kaarttekst, var(--wit));
}

.nhng-bieb__coalitie[hidden] {
	display: none;
}

.nhng-bieb__coalitie svg {
	width: 64px;
	height: 52px;
	opacity: 0.35;
}

.nhng-bieb__coalitie h2 {
	color: inherit;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	margin: 0;
}

.nhng-bieb__coalitie p {
	margin: 6px 0 0;
}

.nhng-bieb__coalitie a {
	color: inherit;
	font-weight: 700;
}

.nhng-bieb__balk {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--xs);
	margin: 0 0 var(--m);
	color: var(--gedempt);
	font-size: 1rem;
}

.nhng-bieb__balk strong {
	color: var(--inkt);
}

.nhng-kaarten--bieb {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 7. Detailpagina's ------------------------------------------------------- */

.nhng-kruimelpad {
	font-size: 0.9375rem;
	color: var(--gedempt);
	margin-bottom: var(--m);
}

.nhng-kruimelpad ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nhng-kruimelpad li + li::before {
	content: "›";
	margin-right: 6px;
}

.nhng-kruimelpad a {
	color: var(--groen);
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	min-height: 24px;
	padding-block: 2px;
}

.nhng-kruimelpad a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nhng-hoofdbeeld img {
	width: 100%;
	height: auto;
	border-radius: var(--r-l);
	display: block;
}

body .nhng-hoofdbeeld {
	margin-bottom: var(--xl);
}

/* Op volle breedte (project) een lagere uitsnede, anders overheerst de foto. */
.nhng-wrap > .nhng-hoofdbeeld img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* Leestekst: de inhoud die de redactie schrijft. */
.nhng-leestekst {
	max-width: var(--smal);
}

body .nhng-leestekst > * + * {
	margin-block-start: 1em;
}

body .nhng-leestekst > h2,
body .nhng-leestekst > section > h2 {
	margin-block-start: 1.6em;
	font-size: var(--wp--preset--font-size--kop-m);
}

body .nhng-leestekst > h3 {
	margin-block-start: 1.4em;
}

.nhng-leestekst > :first-child,
.nhng-leestekst > section:first-child > h2 {
	margin-block-start: 0;
}

.nhng-leestekst img {
	border-radius: var(--r-m);
}

/* Projectsecties: Doel, Aanpak, Resultaten. */
body .nhng-projectsectie > * + * {
	margin-block-start: 1em;
}

body .nhng-leestekst > .nhng-projectsectie + .nhng-projectsectie {
	margin-block-start: var(--xl);
}

.nhng-projectsectie > h2 {
	padding-top: var(--s);
	border-top: 4px solid var(--oranje);
}

.nhng-projectsectie--aanpak > h2 {
	border-color: var(--lichtblauw);
}

.nhng-projectsectie--resultaten > h2 {
	border-color: var(--groen);
}

/* Zijbalk project */

.nhng-projectgegevens {
	display: grid;
	gap: var(--m);
}

.nhng-kenmerken {
	margin: 0;
	padding: var(--m);
	background: var(--vlak);
	border-radius: var(--r-m);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--xs) var(--m);
	font-size: 1rem;
}

.nhng-kenmerken dt {
	font-weight: 700;
	color: var(--donkergroen);
}

.nhng-kenmerken dd {
	margin: 0;
}

.nhng-kenmerken .nhng-regios {
	font-size: 1rem;
	color: var(--inkt);
}

.nhng-contactkaart,
.nhng-projectgegevens__blok {
	padding: var(--m);
	border: 1px solid var(--lijn);
	border-radius: var(--r-m);
}

.nhng-contactkaart h2,
.nhng-projectgegevens__blok h2 {
	font-size: 1.125rem;
	margin: 0 0 var(--xs);
}

.nhng-contactkaart p {
	margin: 0 0 var(--s);
	display: grid;
}

.nhng-contactkaart p:last-child {
	margin-bottom: 0;
}

.nhng-contactkaart span {
	color: var(--gedempt);
	font-size: 1rem;
}

.nhng-linklijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--xs);
	font-size: 1rem;
}

.nhng-linklijst a {
	font-weight: 700;
}

.nhng-bestandsinfo-knop {
	font-weight: 400;
	margin-left: 0.25em;
}

.nhng-bestandsinfo {
	color: var(--gedempt);
	font-size: var(--klein);
}

/* Gerelateerd */

.nhng-gerelateerd > h2 {
	margin: 0 0 var(--l);
	font-size: var(--wp--preset--font-size--kop-m);
}

/* Coalitiepagina */

.nhng-coalitiekop {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--l);
	align-items: center;
	padding: var(--xl);
	border-radius: var(--r-l);
	background: var(--nhng-kaartkleur, var(--groen));
	color: var(--nhng-kaarttekst, var(--wit));
}

.nhng-coalitiekop svg {
	width: 96px;
	height: 78px;
	opacity: 0.35;
}

.nhng-coalitiekop > div > * {
	margin: 0;
}

.nhng-coalitiekop h1 {
	color: inherit;
	font-size: var(--wp--preset--font-size--kop-xl);
}

.nhng-coalitiekop__label {
	font-weight: 700;
	font-size: var(--klein);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

.nhng-coalitiekop__zin {
	font-size: var(--wp--preset--font-size--groot);
	margin-top: var(--s) !important;
	max-width: 44ch;
}

/* Personen */

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

.nhng-persoon img,
.nhng-persoon__leeg {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-m);
	display: block;
	background: var(--vlak);
}

.nhng-persoon > div > * {
	margin: 0;
}

.nhng-persoon__naam {
	font-size: 1.1875rem;
	margin-top: var(--s) !important;
}

.nhng-persoon__functie,
.nhng-persoon__rol {
	font-size: var(--klein);
	color: var(--gedempt);
}

.nhng-persoon__tekst {
	font-size: 1rem;
	margin-top: var(--xs) !important;
}

.nhng-persoon--klein {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--s);
	align-items: center;
	padding: var(--m);
	background: var(--vlak);
	border-radius: var(--r-m);
}

.nhng-persoon--klein img {
	border-radius: var(--r-pil);
}

.nhng-persoon--klein .nhng-persoon__naam {
	margin-top: 0 !important;
	font-weight: 700;
	font-family: var(--kopfont);
}

/* Personen zonder foto: compacte lijst */
.nhng-personen--lijst {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--s) var(--m);
}

.nhng-persoon--zonder-foto {
	padding: var(--s) 0;
	border-top: 1px solid var(--lijn);
}

.nhng-persoon--zonder-foto .nhng-persoon__naam {
	margin-top: 0 !important;
	font-size: 1.0625rem;
}

.nhng-persoon__naam a {
	color: var(--inkt);
	text-decoration: underline;
	text-decoration-color: var(--oranje);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.nhng-persoon__naam a:hover {
	text-decoration-color: currentColor;
}

/* Persoonspagina */
.nhng-persoonkop {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--l);
	align-items: center;
}

.nhng-persoonkop img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: var(--r-pil);
	display: block;
}

.nhng-persoonkop > div > * {
	margin: 0;
}

.nhng-persoonkop h1 {
	font-size: var(--wp--preset--font-size--kop-l);
}

.nhng-persoonkop__rol,
.nhng-persoonkop__functie {
	color: var(--gedempt);
}

.nhng-persoonkop__rol {
	font-weight: 700;
	font-size: var(--klein);
	margin-bottom: var(--xs) !important;
}

@media (max-width: 600px) {
	.nhng-persoonkop {
		grid-template-columns: 1fr;
	}

	.nhng-persoonkop img {
		width: 120px;
		height: 120px;
	}
}

/* Projectblok in een bericht */

.nhng-projectblok {
	padding: var(--m);
	background: var(--vlak);
	border-radius: var(--r-m);
}

.nhng-projectblok__label {
	font-weight: 700;
	font-size: var(--klein);
	color: var(--donkergroen);
	margin: 0 0 var(--s);
}

.nhng-kaarten--los {
	grid-template-columns: 1fr;
}

.nhng-kaarten--los .nhng-kaart a {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--m);
	align-items: start;
}

.nhng-kaarten--los .nhng-kaart__tekst {
	padding-top: 0;
}

/* Agenda */

.nhng-agenda__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lijn);
}

.nhng-agenda__item {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--m);
	align-items: center;
	padding-block: var(--m);
	border-bottom: 1px solid var(--lijn);
}

.nhng-agenda__item h3 {
	margin: 0;
}

.nhng-agenda__item h3 a {
	color: var(--inkt);
	text-decoration: none;
}

.nhng-agenda__item h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nhng-agenda__item .nhng-meta {
	margin: var(--xs) 0 0;
}

.nhng-agenda__datum {
	margin: 0;
	display: grid;
	justify-items: center;
	padding: var(--s) var(--xs);
	background: var(--bordeaux);
	color: var(--wit);
	border-radius: var(--r-m);
	font-family: var(--kopfont);
	font-weight: 800;
	line-height: 1;
}

.nhng-agenda__datum b {
	font-size: 2.5rem;
}

.nhng-agenda__datum span {
	font-size: var(--klein);
	margin-top: 6px;
}

.nhng-agenda__kop {
	margin: var(--xl) 0 var(--m);
	font-size: var(--wp--preset--font-size--kop-m);
}

.nhng-agenda__kop--eerste {
	margin-top: 0;
}

.nhng-agenda__lijst--geweest .nhng-agenda__datum {
	background: var(--vlak);
	color: var(--gedempt);
}

/* Zoekresultaten */

.nhng-zoekveld {
	max-width: 620px;
	margin-top: var(--l);
}

.nhng-zoekresultaten {
	max-width: var(--smal);
}

.nhng-meta--type span:first-child {
	font-weight: 700;
	color: var(--donkergroen);
}

.nhng-zoekresultaten .wp-block-post-template {
	list-style: none;
	padding: 0;
	margin: 0;
}

.nhng-zoekresultaten .wp-block-post {
	padding-block: var(--m);
	border-bottom: 1px solid var(--lijn);
}

.nhng-zoekresultaten .wp-block-post-title {
	font-size: var(--wp--preset--font-size--kop-s);
	margin: 0;
}

.nhng-zoekresultaten .wp-block-post-title a {
	color: var(--inkt);
}

.nhng-zoekresultaten .wp-block-post-excerpt {
	color: var(--gedempt);
}


/* Vrije pagina's en patronen -------------------------------------------- */

/* Tekst op leesbreedte in het midden, patronen met nhng-breed op wrapbreedte. */
.nhng-leestekst.nhng-paginatekst {
	max-width: none;
}

.nhng-paginatekst > * {
	max-width: var(--smal);
	margin-inline: auto;
}

.nhng-paginatekst > .nhng-breed {
	max-width: none;
}

body .nhng-paginatekst > .nhng-patroon {
	margin-block: var(--xl);
}

body .nhng-paginatekst > .nhng-patroon:first-child {
	margin-top: 0;
}

.nhng-patroon .wp-block-columns {
	margin: 0;
	gap: var(--xl);
}

.nhng-patroon :is(h2, h3, p) {
	margin-block: 0;
}

body .nhng-patroon .wp-block-column > * + * {
	margin-block-start: var(--s);
}

/* Tekst met foto */
.nhng-tekst-foto__kolommen {
	align-items: center !important;
}

.nhng-tekst-foto__beeld {
	margin: 0;
}

.nhng-tekst-foto__beeld img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-l);
	display: block;
}

.nhng-tekst-foto h2 {
	font-size: var(--wp--preset--font-size--kop-m);
}

/* Kerncijfers: zoals de opgave op de homepage, in een afgerond vlak. */
.nhng-kerncijfers {
	background: var(--groen);
	color: var(--wit);
	border-radius: var(--r-l);
	padding: var(--xl);
}

.nhng-kerncijfers .wp-block-column {
	border-top: 4px solid var(--oranje);
	padding-top: var(--s);
}

.nhng-kerncijfers .wp-block-column:nth-child(2) {
	border-color: var(--lichtblauw);
}

.nhng-kerncijfers .wp-block-column:nth-child(3) {
	border-color: var(--wit);
}

.nhng-cijfer {
	font-family: var(--kopfont);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

body .nhng-kerncijfers .wp-block-column > .nhng-cijfer__label {
	margin-top: var(--xs);
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.0625rem;
}

/* Citaat */
.nhng-citaat .wp-block-quote {
	margin: 0;
	border-left: 0;
	padding: 0 0 0 var(--xl);
	position: relative;
}

.nhng-citaat .wp-block-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 28px;
	height: 23px;
	background: var(--oranje);
	clip-path: polygon(0 15%, 82% 0, 100% 85%, 12% 100%);
}

.nhng-citaat .wp-block-quote p {
	font-family: var(--kopfont);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.25;
	color: var(--donkergroen);
}

.nhng-citaat cite {
	display: block;
	margin-top: var(--s);
	font-style: normal;
	font-size: 1rem;
	color: var(--gedempt);
}

/* Oproep */
.nhng-oproep {
	background: var(--lichtblauw);
	border-radius: var(--r-l);
	padding: var(--xl);
	display: flex;
	flex-direction: column;
	gap: var(--s);
}

body .nhng-oproep > * {
	margin: 0;
}

.nhng-oproep__kop {
	font-family: var(--kopfont);
	font-weight: 800;
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 24ch;
}

.nhng-oproep p:not(.nhng-oproep__kop) {
	max-width: 60ch;
}

/* Stappen */
.nhng-stappen .wp-block-column {
	background: var(--vlak);
	border-radius: var(--r-m);
	padding: var(--m);
}

.nhng-stap__nummer {
	font-family: var(--kopfont);
	font-weight: 800;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--bordeaux);
}

.nhng-stappen h3 {
	font-size: var(--wp--preset--font-size--kop-s);
}

.nhng-stappen p:not(.nhng-stap__nummer) {
	color: var(--gedempt);
}

/* Downloads */
.nhng-downloads {
	padding: var(--m);
	border: 1px solid var(--lijn);
	border-radius: var(--r-m);
}

.nhng-downloads h2 {
	font-size: var(--wp--preset--font-size--kop-s);
	margin: 0 0 var(--s);
}

.nhng-downloads .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s);
	padding-block: var(--s);
	border-top: 1px solid var(--lijn);
	margin: 0;
}

.nhng-downloads .wp-block-file a:not(.wp-block-file__button) {
	font-weight: 700;
}

.nhng-downloads .wp-block-file__button {
	min-height: 44px;
	background: transparent;
	border: 2px solid var(--groen);
	color: var(--groen);
	font-size: 1rem;
}

.nhng-downloads .wp-block-file__button:hover {
	background: var(--groen);
	color: var(--wit);
}

/* Personen */
body .nhng-personen-blok > .nhng-personen {
	margin-top: var(--l);
}

.nhng-personen-blok > p {
	color: var(--gedempt);
	max-width: 60ch;
	margin-top: var(--s);
}


/* Artikelraster: inhoud links, zijbalk rechts die meeloopt (coalitie, project) */

.nhng-artikelraster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--xl) clamp(32px, 5vw, 72px);
	align-items: start;
}

body .nhng-artikelraster > *,
body .nhng-artikelraster__hoofd > * {
	margin-block: 0;
}

body .nhng-artikelraster__hoofd > * + * {
	margin-block-start: var(--xxl);
}

.nhng-zijbalk {
	position: sticky;
	top: 110px;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	display: grid;
	gap: var(--m);
	padding-bottom: var(--s);
	scrollbar-width: thin;
}

.admin-bar .nhng-zijbalk {
	top: calc(110px + var(--wp-admin--admin-bar--height, 32px));
}

.nhng-zijbalk__blok {
	padding-top: var(--m);
	border-top: 1px solid var(--lijn);
}

/* Grid-kinderen mogen smaller worden dan hun inhoud; anders drukt een lang
   woord de zijbalk uit het scherm (reflow, tekstafstand). */
.nhng-zijbalk > *,
.nhng-projectgegevens > * {
	min-width: 0;
}

.nhng-zijbalk__blok:first-child {
	padding-top: 0;
	border-top: 0;
}

.nhng-zijbalk__kop {
	display: block;
	font-family: var(--kopfont);
	font-weight: 800;
	font-size: 1.0625rem;
	letter-spacing: 0;
	color: var(--donkergroen);
	margin: 0 0 var(--s);
}

/* Op deze pagina */


.nhng-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--lijn);
}

.nhng-toc a {
	display: block;
	padding: 6px 0 6px var(--s);
	margin-left: -2px;
	border-left: 3px solid transparent;
	color: var(--gedempt);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.nhng-toc a:hover {
	color: var(--inkt);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nhng-toc a[aria-current="true"] {
	border-left-color: var(--groen);
	color: var(--donkergroen);
	font-weight: 700;
}

/* Coalitieleiders */
.nhng-zijbalk__mensen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s);
}

.nhng-zijbalk__mensen li {
	display: flex;
	align-items: center;
	gap: var(--s);
	font-weight: 700;
}

.nhng-zijbalk__mensen img,
.nhng-zijbalk__initiaal {
	width: 48px;
	height: 48px;
	border-radius: var(--r-pil);
	object-fit: cover;
	flex: none;
}

.nhng-zijbalk__initiaal {
	display: grid;
	place-items: center;
	background: var(--vlak);
	color: var(--donkergroen);
	font-family: var(--kopfont);
	font-weight: 800;
}

.nhng-zijbalk__contact {
	margin: var(--s) 0 0;
	font-size: 0.9375rem;
	color: var(--gedempt);
}

.nhng-zijbalk__knop.wp-element-button {
	width: 100%;
	flex-direction: column;
	gap: 2px;
	text-align: center;
	line-height: 1.3;
	padding-block: var(--xs);
}

.nhng-zijbalk__knop .nhng-bestandsinfo-knop {
	margin-left: 0;
	font-size: var(--klein);
}

/* Alle coalities */
.nhng-zijbalk__coalities ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.nhng-zijbalk__coalities a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	color: var(--inkt);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.nhng-zijbalk__coalities a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nhng-zijbalk__coalities a[aria-current="page"] {
	font-weight: 700;
}

/* Projectgegevens in de zijbalk: zonder eigen kaders, de zijbalk ordent al. */
.nhng-zijbalk .nhng-projectgegevens {
	gap: var(--m);
}

/* Leestekst op lange pagina's: rustiger ritme, lead, tabellen, citaten, beelden */
.nhng-leestekst--lead > p:first-child {
	font-size: var(--wp--preset--font-size--groot);
	line-height: 1.55;
	color: var(--inkt);
}

body .nhng-artikelraster .nhng-leestekst > h2 {
	margin-block-start: var(--xl);
	padding-top: var(--l);
	border-top: 1px solid var(--lijn);
}

.nhng-artikelraster .nhng-leestekst > h2:first-child {
	margin-block-start: 0;
	padding-top: 0;
	border-top: 0;
}

.nhng-leestekst h2[id],
.nhng-gerelateerd[id] {
	scroll-margin-top: 110px;
}

.nhng-leestekst .wp-block-table {
	margin-inline: 0;
	overflow-x: auto;
}

.nhng-leestekst .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 1rem;
}

.nhng-leestekst .wp-block-table th,
.nhng-leestekst .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--lijn);
	padding: var(--xs) var(--s);
	text-align: left;
	vertical-align: top;
}

.nhng-leestekst .wp-block-table thead th {
	background: var(--groen);
	color: var(--wit);
	font-weight: 700;
	border-bottom: 0;
}

.nhng-leestekst .wp-block-table tbody tr:nth-child(even) td {
	background: var(--vlak);
}

.nhng-leestekst .wp-block-quote {
	margin-inline: 0;
	border-left: 0;
	padding: 0 0 0 var(--xl);
	position: relative;
}

.nhng-leestekst .wp-block-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 24px;
	height: 20px;
	background: var(--oranje);
	clip-path: polygon(0 15%, 82% 0, 100% 85%, 12% 100%);
}

.nhng-leestekst .wp-block-quote p {
	font-family: var(--kopfont);
	font-weight: 600;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	line-height: 1.3;
	color: var(--donkergroen);
}

.nhng-leestekst .wp-block-quote cite {
	display: block;
	margin-top: var(--xs);
	font-style: normal;
	font-size: 1rem;
	color: var(--gedempt);
}

.nhng-leestekst .wp-block-image {
	margin-inline: 0;
}

.nhng-leestekst .wp-block-image img {
	border: 1px solid var(--lijn);
}

.nhng-leestekst .wp-block-embed {
	margin-inline: 0;
}

.nhng-leestekst .wp-block-embed iframe {
	border-radius: var(--r-m);
	width: 100%;
}

/* Voorbeelden en nieuws in de smallere hoofdkolom: twee naast elkaar. */
.nhng-artikelraster .nhng-kaarten,
.nhng-artikelraster .nhng-gerelateerd .nhng-nieuwslijst {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nhng-artikelraster .nhng-gerelateerd > h2 {
	margin-bottom: var(--m);
}

.nhng-gerelateerd .nhng-meer,
.nhng-gerelateerd .nhng-leeg {
	margin: var(--m) 0 0;
}

@media (max-width: 1080px) {
	.nhng-artikelraster {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}

/* Mobiel en tablet staand: zijbalk boven de inhoud, compact. */
@media (max-width: 900px) {
	.nhng-artikelraster {
		grid-template-columns: minmax(0, 1fr);
	}

	.nhng-zijbalk {
		order: -1;
		position: static;
		max-height: none;
		overflow: visible;
		padding: var(--m);
		background: var(--vlak);
		border-radius: var(--r-m);
	}

	.nhng-zijbalk__blok {
		border-top-color: var(--wit);
	}






	.nhng-zijbalk {
		gap: var(--s);
		padding: var(--s) var(--m);
	}

	.nhng-zijbalk__blok {
		padding-top: var(--s);
	}

	.nhng-zijbalk__kop {
		margin-bottom: var(--xs);
	}

	.nhng-zijbalk__mensen {
		gap: var(--xs);
	}

	.nhng-zijbalk__mensen img,
	.nhng-zijbalk__initiaal {
		width: 32px;
		height: 32px;
		font-size: 0.875rem;
	}

	.nhng-zijbalk__initiaal {
		background: var(--wit);
	}

	.nhng-zijbalk__contact {
		margin-top: var(--xs);
	}

	/* De lijst met alle coalities staat ook in het menu; mobiel niet dubbel. */
	.nhng-zijbalk__coalities {
		display: none;
	}
}

@media (max-width: 600px) {
	.nhng-artikelraster .nhng-kaarten,
	.nhng-artikelraster .nhng-gerelateerd .nhng-nieuwslijst {
		grid-template-columns: 1fr;
	}
}

/* La Posta-formulier (nieuwsbrief): hun widget, onze opmaak. Hun eigen
   promoblok met afbeelding en standaardtekst verdwijnt; de pagina geeft de context. */
.nhng-laposta .eprov-widget {
	display: block !important;
	max-width: 560px;
	font: inherit !important;
	color: inherit !important;
}

.nhng-laposta .eprov-widget .wrap {
	display: none !important;
}

.nhng-laposta .eprov-widget .field {
	margin-bottom: var(--s);
}

.nhng-laposta .eprov-widget label {
	display: block;
	font-weight: 700;
	margin-bottom: var(--xs);
	color: var(--inkt) !important;
	font-size: 1rem !important;
}

.nhng-laposta .eprov-widget .input-element input {
	width: 100%;
	min-height: var(--wp--custom--invoer--hoogte);
	border: 2px solid var(--groen) !important;
	border-radius: var(--r-s) !important;
	padding: 0 var(--s) !important;
	font: 400 1.0625rem var(--wp--preset--font-family--tekst) !important;
	color: var(--inkt) !important;
	background: var(--wit) !important;
}

.nhng-laposta .eprov-widget button[type="submit"] {
	min-height: var(--wp--custom--knop--hoogte);
	padding: 0 var(--m) !important;
	border: 2px solid transparent !important;
	border-radius: var(--r-s) !important;
	background: var(--oranje) !important;
	color: var(--inkt) !important;
	font: 700 1.0625rem var(--wp--preset--font-family--tekst) !important;
	cursor: pointer;
}

.nhng-laposta .eprov-widget button[type="submit"]:hover {
	background: #ffa449 !important;
}

.nhng-laposta .eprov-widget .thanks {
	font-weight: 700;
	color: var(--donkergroen);
}

/* 8. Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
	.nhng-carrousel__spoor .nhng-coalitiekaart {
		flex-basis: calc((100% - var(--m)) / 1.6);
	}

	.nhng-kaarten {
		gap: var(--s);
	}

	.nhng-kaarten--bieb,
	.nhng-coalitieraster__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nhng-voet__raster {
		grid-template-columns: 1fr 1fr;
	}

	.nhng-nieuws--uitgelicht .nhng-nieuwslijst,
	body .nhng-nieuwslijst {
		grid-template-columns: 1fr 1fr;
	}

	.nhng-nieuws--uitgelicht .nhng-nieuwslijst > li:first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	.nhng-menu__knop {
		display: block;
	}

	.nhng-kop__binnen {
		position: relative;
	}

	.nhng-menu--hoofd.is-js .nhng-menu__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--wit);
		box-shadow: 0 1px 0 var(--lijn);
		padding: var(--m) var(--rand);
	}

	.nhng-menu--hoofd.is-js .nhng-menu__nav.is-open {
		display: block;
	}

	.nhng-menu--hoofd:not(.is-js) .nhng-menu__knop {
		display: none;
	}

	.nhng-menu--hoofd .nhng-menu__lijst {
		flex-direction: column;
		align-items: stretch;
		gap: var(--s);
	}

	.nhng-menu--hoofd .nhng-menu__lijst .knop {
		margin: var(--xs) 0 0;
	}

	.nhng-menu--hoofd .nhng-menu__lijst .wp-element-button {
		width: 100%;
	}

	.nhng-opening,
	.nhng-opgave,
	.nhng-nieuwsbrief,
	.nhng-meedoen,
	.nhng-evenementkaart,
	.nhng-bieb__raster {
		grid-template-columns: 1fr;
	}

	.nhng-opening {
		gap: var(--l);
	}

	.nhng-opening__beeld {
		order: -1;
		max-width: 520px;
	}

	.nhng-regio-instap ul {
		flex-direction: column;
	}

	.nhng-evenementkaart__foto img {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.nhng-evenementkaart__tekst {
		padding: var(--l);
	}

	.nhng-filters {
		position: static;
	}




	/* Mobiel: het filter bovenaan als uitklapbalk, dan het zoekveld, dan de
	   resultaten. De raster-div valt weg zodat de volgorde via order kan. */
	.nhng-bieb__form {
		display: flex;
		flex-direction: column;
	}

	.nhng-bieb__raster {
		display: contents;
	}

	.nhng-filters {
		order: 1;
		padding: var(--xs) var(--m);
		margin-bottom: var(--s);
	}

	.nhng-filters .nhng-uitklap__knop {
		font-family: var(--kopfont);
		font-weight: 800;
		font-size: 1.125rem;
		min-height: 52px;
	}

	.nhng-filters .nhng-uitklap__paneel {
		padding-bottom: var(--s);
	}






	.nhng-bieb__zoek {
		order: 2;
		padding-bottom: var(--l);
	}

	.nhng-bieb__resultaten {
		order: 3;
	}

	.nhng-coalitiekop {
		grid-template-columns: 1fr;
		padding: var(--l);
	}

	.nhng-coalitiekop svg {
		width: 64px;
		height: 52px;
	}

	.nhng-kerncijfers,
	.nhng-oproep {
		padding: var(--l);
	}
}

@media (max-width: 600px) {
	body {
		font-size: 1.0625rem;
	}

	.nhng-sectie {
		padding-block: var(--xl);
	}

	.nhng-kop__binnen {
		min-height: 88px;
	}

	.nhng-logo img {
		height: 64px;
	}

	.nhng-kop.is-compact .nhng-kop__binnen {
		min-height: 72px;
	}

	.nhng-kop.is-compact .nhng-logo img {
		height: 50px;
	}

	.nhng-carrousel__spoor .nhng-coalitiekaart {
		flex-basis: 90%;
	}

	.nhng-coalitiekaart h3 {
		font-size: 1.5rem;
	}

	.nhng-coalitiekaart a {
		min-height: 340px;
		padding: var(--m);
	}

	.nhng-carrousel__pijlen button {
		width: 44px;
		height: 44px;
	}

	.nhng-kaarten,
	.nhng-kaarten--bieb,
	.nhng-coalitieraster__lijst,
	.nhng-nieuws--uitgelicht .nhng-nieuwslijst,
	body .nhng-nieuwslijst,
	.nhng-voet__raster {
		grid-template-columns: 1fr;
	}

	.nhng-nieuws--uitgelicht .nhng-nieuwslijst > li:first-child .wp-block-post-title {
		font-size: 1.5rem;
	}

	.nhng-zoek__rij,
	.nhng-bieb__zoek .nhng-zoek__rij {
		flex-direction: column;
	}

	.nhng-knoppen,
	body .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.nhng-knoppen .wp-element-button,
	.nhng-zoek__rij .wp-element-button,
	body .wp-block-buttons .wp-block-button,
	body .wp-block-buttons .wp-block-button__link {
		width: 100%;
	}

	.nhng-voet__onder {
		justify-content: flex-start;
	}

	.nhng-datum b {
		font-size: 68px;
	}

	.nhng-kaarten--los .nhng-kaart a {
		grid-template-columns: 1fr;
	}

	.nhng-agenda__item {
		grid-template-columns: 72px 1fr;
		gap: var(--s);
	}
}

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

	.nhng-carrousel__spoor {
		scroll-behavior: auto;
	}
}