/* ═══════════════════════════════════════════════════════════
   NarraVita — CSS die theme.json niet kan uitdrukken.
   Alles wat wel in theme.json kan, hoort daar en niet hier.
   ═══════════════════════════════════════════════════════════ */

/* ── toegankelijkheid ── */

.nv-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--plum-500);
	color: var(--wp--preset--color--n-0);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	border-radius: 0 0 var(--wp--custom--radius--sm) 0;
}

.nv-skip:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--plum-500);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── typografieklassen uit het designsystem ── */

.nv-overline {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--saf-700);
	display: block;
	margin-bottom: var(--wp--preset--spacing--5);
}

.nv-verhaal {
	font-family: var(--wp--preset--font-family--verhaal);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.65;
}

.nv-verhaal-lg {
	font-family: var(--wp--preset--font-family--verhaal);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.6;
}

.nv-klein {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.65;
}

.nv-detail {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--n-600);
	letter-spacing: 0.04em;
}

.nv-conclusie {
	text-align: center;
	margin: var(--wp--preset--spacing--8) auto 0;
	max-width: 24em;
}

.nv-h-xl {
	font-size: var(--wp--preset--font-size--xxxxl);
	font-weight: 200;
	line-height: 1.03;
	letter-spacing: 0.05em;
}

.nv-h-lg {
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: 0.05em;
}

.nv-h-md {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.04em;
}

.nv-h-sm {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

/*
 * Leesbare regellengte, zoals p { max-width:36em } in het bron-ontwerp.
 *
 * Let op het verschil met platte HTML: core's constrained layout geeft elk
 * kind margin-inline: auto, dus alles wat smaller is dan de container schuift
 * naar het midden. Bij een max-width in em hangt dat af van de fontgrootte,
 * wat kleine tekst ongemerkt centreert. Daarom expliciet links houden, behalve
 * waar centreren juist de bedoeling is.
 */
/*
 * :where() draagt geen specificiteit bij, zodat elke regel die hieronder een
 * eigen max-width zet (hero-intro, conclusie, kader) vanzelf wint. Met een
 * gewone selector verslaat '.nv-sectie p' (0,2,1) namelijk elke klasseregel.
 */
:where(.nv-sectie p:not(.nv-overline), .wp-block-post-content p) {
	max-width: 36em;
}

:where(.nv-sectie p:not(.nv-conclusie):not(.has-text-align-center), .wp-block-post-content p) {
	margin-inline: 0;
}

/* ── knoppen ── */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.04em;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	min-height: 52px;
	padding: 0 var(--wp--preset--spacing--7);
	font-size: var(--wp--preset--font-size--md);
	transition:
		background var(--wp--custom--dur--1) linear,
		color var(--wp--custom--dur--1) linear,
		transform var(--wp--custom--dur--1) var(--wp--custom--ease);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.is-style-nv-sm .wp-block-button__link {
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--sm);
}

.is-style-nv-primair .wp-block-button__link {
	background: var(--wp--preset--color--plum-500);
	color: var(--wp--preset--color--n-0);
}

.is-style-nv-primair .wp-block-button__link:hover {
	background: var(--wp--preset--color--plum-600);
}

.is-style-nv-secundair .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--plum-600);
	border-color: var(--wp--preset--color--plum-500);
}

.is-style-nv-secundair .wp-block-button__link:hover {
	background: var(--wp--preset--color--plum-50);
}

.is-style-nv-licht .wp-block-button__link {
	background: var(--wp--preset--color--saf-300);
	color: var(--wp--preset--color--plum-900);
}

.is-style-nv-licht .wp-block-button__link:hover {
	background: var(--wp--preset--color--saf-500);
}

.is-style-nv-rand-licht .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--plum-100);
	border-color: rgba(236, 224, 239, 0.45);
}

.is-style-nv-rand-licht .wp-block-button__link:hover {
	background: rgba(236, 224, 239, 0.1);
}

/* ── header ── */

/*
 * De sticky hoort op de template part, niet op de div erbinnen. Een sticky
 * element kan niet buiten zijn containing block reizen, en die wrapper is
 * precies zo hoog als de header zelf: de balk scrolde daardoor gewoon mee weg.
 */
header:has( > .nv-header) {
	position: sticky;
	top: 0;
	z-index: 40;
}

.nv-header {
	background: color-mix(in srgb, var(--wp--preset--color--n-50) 92%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--n-200);
	padding-block: 0;
}

.nv-header > .wp-block-group {
	min-height: 76px;
	gap: var(--wp--preset--spacing--7);
}

.nv-header .wp-block-site-logo img {
	height: 30px;
	width: auto;
	display: block;
}

.nv-header .wp-block-navigation {
	margin-right: auto;
}

/*
 * Element plus klasse is nodig om core te verslaan: dat zet
 * .wp-block-navigation-item__content.wp-block-navigation-item__content op
 * color: inherit, met een dubbele klasse puur voor de specificiteit. Zonder
 * dit krijgen de links de bodykleur in plaats van het gedempte grijs.
 */
.nv-header .wp-block-navigation a.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	color: var(--wp--preset--color--n-600);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}

.nv-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--plum-900);
	border-bottom-color: var(--wp--preset--color--saf-500);
}

/* ── footer ── */

.nv-footer {
	background: var(--wp--preset--color--n-0);
	border-top: 1px solid var(--wp--preset--color--n-200);
	padding-block: var(--wp--preset--spacing--8);
}

.nv-footer a,
.nv-footer .wp-block-navigation a.wp-block-navigation-item__content {
	text-decoration: none;
	color: var(--wp--preset--color--n-600);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	padding: 4px 0;
}

.nv-footer a:hover,
.nv-footer .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--plum-600);
}

.nv-footer .wp-block-site-logo img {
	height: 26px;
	width: auto;
}

.nv-footer__kop {
	font-size: var(--wp--preset--font-size--xxs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--n-600);
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--4);
}

.nv-footer__slot {
	border-top: 1px solid var(--wp--preset--color--n-200);
	margin-top: var(--wp--preset--spacing--7);
	padding-top: var(--wp--preset--spacing--5);
}

.nv-footer__slot p {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--n-600);
	letter-spacing: 0.04em;
	margin: 0;
}

/* ── secties ── */

.nv-sectie {
	padding-block: var(--wp--preset--spacing--10);
}

@media (max-width: 960px) {
	.nv-sectie {
		padding-block: var(--wp--preset--spacing--9);
	}
}

/* ── beweging ── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── logo ── */

.nv-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.nv-logo {
	display: block;
}

/* Woordmerk volgt de tekstkleur, beeldmerk het accent. */
.nv-logo path[fill="#230130"] {
	fill: var(--wp--preset--color--plum-900);
}

.nv-logo path[fill="#7d499d"],
.nv-logo path[fill="#7e4a9d"] {
	fill: var(--wp--preset--color--plum-500);
}

/* ── header op smalle schermen ── */

/* Knoptekst mag nooit per teken breken. */
.wp-block-button__link {
	white-space: nowrap;
}

.nv-header .wp-block-buttons {
	flex-shrink: 0;
}

/*
 * Onder de mobiele breekgrens van WordPress (782px) past de combinatie logo,
 * hamburger en knop niet meer op een regel. De knop verdwijnt daar uit de
 * header; de oproep tot actie staat dan in het overlaymenu en in de pagina zelf.
 */
@media (max-width: 781px) {
	.nv-header .wp-block-buttons {
		display: none;
	}
}

/* ── mobiel overlaymenu ── */

/*
 * Op 375px is 42px root padding aan weerszijden te royaal: er blijft dan te
 * weinig over voor logo en hamburger naast elkaar.
 */
@media (max-width: 781px) {
	body {
		--wp--style--root--padding-left: var(--wp--preset--spacing--6);
		--wp--style--root--padding-right: var(--wp--preset--spacing--6);
	}
}

.nv-header .wp-block-navigation__responsive-container-open,
.nv-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--plum-900);
	padding: var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--radius--sm);
}

.nv-header .wp-block-navigation__responsive-container-open:hover,
.nv-header .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--plum-500);
}

/*
 * Kleur van de overlay komt uit de blockattributen overlayBackgroundColor en
 * overlayTextColor, niet uit CSS: core's eigen regel
 * .wp-block-navigation:not(.has-background) ... wint anders op specificiteit.
 */
.nv-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--6);
}

.nv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--8);
	align-items: flex-start;
}

.nv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--5);
	width: 100%;
}

/* De oproep tot actie is zelf een menu-item en volgt de knopstijl, niet deze. */
.nv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.nv-nav-cta) .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--plum-900);
	padding: var(--wp--preset--spacing--3) 0;
	border-bottom: 2px solid transparent;
}

.nv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.nv-nav-cta) .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--saf-500);
}

/*
 * De oproep tot actie staat als menu-item in het menu, zodat hij in de
 * overlay meekomt. Op desktop staat de knop al in de header, dus daar is
 * het item overbodig.
 */
.nv-header .wp-block-navigation .nv-nav-cta .wp-block-navigation-item__content,
.nv-header .wp-block-navigation .nv-nav-cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-top: var(--wp--preset--spacing--5);
	padding: 0 var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--plum-500);
	color: var(--wp--preset--color--n-0);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: 0.04em;
	white-space: nowrap;
	border-bottom: 0;
}

.nv-header .wp-block-navigation .nv-nav-cta .wp-block-navigation-item__content:hover,
.nv-header .wp-block-navigation .nv-nav-cta a:hover {
	background: var(--wp--preset--color--plum-600);
	color: var(--wp--preset--color--n-0);
	border-bottom-color: transparent;
}

/*
 * Het CTA-item bestaat alleen om in de mobiele overlay te verschijnen. Overal
 * anders is het overbodig: de header heeft al een knop en de footer hoort er
 * geen te hebben. Verbergen by default, tonen in de open overlay. Het
 * element-plus-klasse-patroon is nodig om core's eigen li-regel te verslaan.
 */
.nv-header .wp-block-navigation li.nv-nav-cta,
.nv-footer .wp-block-navigation li.nv-nav-cta {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open li.nv-nav-cta {
	display: flex;
}

/*
 * backdrop-filter maakt van de header een containing block voor
 * position: fixed-kinderen, waardoor de fullscreen overlay opgesloten raakt
 * in de headerbalk. Zolang het menu open staat zetten we de blur daarom uit.
 */
.nv-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	background: transparent;
	border-bottom-color: transparent;
}

/* ── sectiekoppen ── */

/*
 * Core's constrained layout zet margin-inline: auto !important op elk kind dat
 * smaller is dan de container. Een links uitgelijnde smalle kop is daarmee niet
 * te maken door de groep zelf te beperken.
 *
 * Daarom staat de groep op flow-layout en op volle breedte, en dragen de
 * kinderen de leesmaat. Flow-kinderen krijgen van core alleen margin-block,
 * geen automatische zijmarges, dus ze blijven links staan.
 */
.nv-sec-kop {
	margin-bottom: var(--wp--preset--spacing--8);
}

/*
 * In rem, niet em: em rekent tegen de fontgrootte van het element zelf, dus
 * een kop van 33px zou 34em uitrekenen tot 1126px. In het bron-ontwerp stond
 * de maat op de wrapper, waar de bodytekst van 17px gold.
 * 30em x 17px = 510px = 31.875rem, 34em x 17px = 578px = 36.125rem.
 */
.nv-sec-kop > * {
	max-width: 31.875rem;
	margin-inline: 0;
}

/* In het bron-ontwerp had juist deze kop een ruimere maat. */
.nv-sec-kop--breed > * {
	max-width: 36.125rem;
}

.nv-sec-kop h2 {
	margin-bottom: var(--wp--preset--spacing--5);
}

.nv-tussenkop {
	margin-bottom: var(--wp--preset--spacing--6);
}

/* ── hero ── */

.nv-hero {
	padding-block: var(--wp--preset--spacing--9) var(--wp--preset--spacing--10);
	position: relative;
	overflow: hidden;
}

.nv-hero__grid {
	gap: var(--wp--preset--spacing--9);
}

.nv-hero .nv-h-xl em {
	font-style: normal;
	color: var(--wp--preset--color--plum-500);
}

.nv-hero__intro {
	margin-top: var(--wp--preset--spacing--7);
	max-width: 25em;
}

.nv-hero__merk {
	color: var(--wp--preset--color--plum-500);
	display: flex;
	justify-content: center;
	align-items: center;
}

.nv-hero__merk .wp-block-narravita-spiraal {
	width: 100%;
	max-width: 380px;
}

.nv-acties {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--5);
	margin-top: var(--wp--preset--spacing--7);
}

/* ── waarom nu ── */

.nv-standpunt {
	border-top: 1px solid var(--wp--preset--color--n-200);
	border-bottom: 1px solid var(--wp--preset--color--n-200);
	text-align: center;
}

.nv-standpunt .nv-kader {
	border-left: 2px solid var(--wp--preset--color--saf-500);
	padding-left: var(--wp--preset--spacing--7);
	text-align: left;
	display: inline-block;
}

/* In de bron stond max-width:26em op de paragrafen zelf, niet op de wrapper. */
.nv-standpunt .nv-kader p {
	max-width: 26em;
}

/* ── opbrengst ── */

.nv-opbrengst {
	border-top: 1px solid var(--wp--preset--color--n-200);
	border-bottom: 1px solid var(--wp--preset--color--n-200);
}

.nv-oogst {
	gap: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6);
}

.nv-oogst__item {
	padding-top: var(--wp--preset--spacing--5);
	border-top: 2px solid var(--wp--preset--color--n-200);
}

/* Afwisselend accent, blijft kloppen als items toegevoegd of verwijderd worden. */
.nv-oogst__item:nth-child(3n+1) {
	border-top-color: var(--wp--preset--color--plum-500);
}

.nv-oogst__item:nth-child(3n+2) {
	border-top-color: var(--wp--preset--color--saf-500);
}

.nv-oogst__item h3 {
	margin-bottom: var(--wp--preset--spacing--4);
}

.nv-oogst__item p {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--n-600);
	margin: 0;
}

/* ── labelkaart ── */

.nv-label-kaart {
	border: 1px solid var(--wp--preset--color--n-200);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--n-0);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.nv-label-kaart p {
	margin: 0;
}

.nv-label-kaart .nv-naam {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--sm);
}

.nv-label-kaart .nv-endorse {
	font-size: var(--wp--preset--font-size--xxs);
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--n-600);
}

.nv-tools {
	padding-top: 0;
}

/* ── oproep tot actie ── */

.nv-cta {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--9);
}

.nv-cta__spiraal {
	position: absolute;
	left: -10%;
	bottom: -58%;
	width: 46%;
	opacity: 0.14;
	pointer-events: none;
}

.nv-cta__grid {
	position: relative;
}

.nv-cta .nv-verhaal {
	max-width: 24em;
	margin-top: var(--wp--preset--spacing--6);
}

.nv-cta__lijst {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
}

.nv-cta__lijst li {
	font-size: var(--wp--preset--font-size--sm);
	position: relative;
	padding-left: var(--wp--preset--spacing--6);
}

/* Vinkje als CSS-vorm: geen extra SVG nodig, en decoratief dus niet voorgelezen. */
.nv-cta__lijst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--wp--preset--color--saf-300);
	border-bottom: 2px solid var(--wp--preset--color--saf-300);
	transform: rotate(-45deg);
}

/* ── formulier ── */

/*
 * CF7 wikkelt elke regel in een eigen <p>. Die zou de leesbreedte van 36em
 * krijgen, waardoor de velden smaller worden dan de kolom eromheen.
 */
.wpcf7-form p {
	max-width: none;
	margin-inline: 0;
}

/*
 * Het bron-ontwerp zette box-sizing: border-box globaal. WordPress doet dat
 * niet voor formuliervelden, waardoor padding en rand bovenop de breedte van
 * 100% komen en het veld buiten zijn container valt.
 */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select,
.wpcf7-form button {
	box-sizing: border-box;
}

.nv-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wpcf7-form label {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: var(--wp--preset--spacing--6);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--plum-900);
	background: var(--wp--preset--color--n-0);
	border: 1px solid var(--wp--preset--color--n-300);
	border-radius: var(--wp--custom--radius--sm);
	transition:
		border-color var(--wp--custom--dur--1) linear,
		box-shadow var(--wp--custom--dur--1) linear;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--plum-500);
	box-shadow: 0 0 0 3px var(--wp--custom--focus-halo);
}

.wpcf7-form textarea {
	min-height: 160px;
	resize: vertical;
}

.wpcf7-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--wp--preset--spacing--7);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--n-0);
	background: var(--wp--preset--color--plum-500);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition: background var(--wp--custom--dur--1) linear;
}

.wpcf7-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--plum-600);
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--rood-500);
}

.wpcf7-form input[aria-invalid="true"],
.wpcf7-form textarea[aria-invalid="true"] {
	border-color: var(--wp--preset--color--rood-500);
}

/*
 * De terugkoppeling na het versturen. CF7 levert een kale div met alleen een
 * dunne rand; die krijgt hier de vorm van de rest van het systeem, met per
 * situatie een eigen kleur en teken.
 */
.wpcf7-response-output {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--n-300);
	border-left-width: 3px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--n-0);
	box-shadow: var(--wp--custom--elev--1);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	color: var(--wp--preset--color--plum-900);
}

/*
 * Het teken is decoratief: de tekst ernaast zegt al wat er gebeurd is. Het
 * staat daarom in CSS en niet in de markup, waar een schermlezer het zou
 * oplezen.
 */
.wpcf7-response-output::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.14;
}

/* Geslaagd: groen, met een vinkje. */
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--groen-500);
	color: var(--wp--preset--color--groen-500);
	background: color-mix(in srgb, var(--wp--preset--color--groen-500) 6%, var(--wp--preset--color--n-0));
}

.wpcf7 form.sent .wpcf7-response-output::before {
	opacity: 1;
	background: var(--wp--preset--color--groen-500);
	-webkit-mask: var(--nv-vinkje) center / 14px 14px no-repeat;
	mask: var(--nv-vinkje) center / 14px 14px no-repeat;
}

/* Mislukt of geweigerd: rood, met een uitroepteken. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: var(--wp--preset--color--rood-500);
	color: var(--wp--preset--color--rood-500);
	background: color-mix(in srgb, var(--wp--preset--color--rood-500) 5%, var(--wp--preset--color--n-0));
}

.wpcf7 form.invalid .wpcf7-response-output::before,
.wpcf7 form.failed .wpcf7-response-output::before,
.wpcf7 form.spam .wpcf7-response-output::before,
.wpcf7 form.unaccepted .wpcf7-response-output::before {
	opacity: 1;
	background: var(--wp--preset--color--rood-500);
	-webkit-mask: var(--nv-uitroep) center / 14px 14px no-repeat;
	mask: var(--nv-uitroep) center / 14px 14px no-repeat;
}

/*
 * De tekens als masker, zodat ze de kleur van de melding volgen in plaats van
 * een eigen kleur mee te brengen.
 */
:root {
	--nv-vinkje: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5.5 5.5L20 6"/></svg>');
	--nv-uitroep: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"><path d="M12 4v10M12 19v.01"/></svg>');
}

/* Tijdens het versturen: rustig houden, geen kleur die iets suggereert. */
.wpcf7 form.submitting .wpcf7-response-output {
	opacity: 0.7;
}

/* ── cookiebanner (Complianz) ── */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	border: 1px solid var(--wp--preset--color--n-200);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--n-0);
	box-shadow: var(--wp--custom--elev--3);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--plum-900);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--plum-900);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	min-height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--sm);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background: var(--wp--preset--color--plum-500);
	color: var(--wp--preset--color--n-0);
	border: 1px solid transparent;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background: var(--wp--preset--color--plum-600);
}

/*
 * Weigeren moet even vindbaar zijn als accepteren. Een verstopte of
 * uitgegrijsde weigerknop is geen geldige toestemming onder de AVG.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
	background: transparent;
	color: var(--wp--preset--color--plum-600);
	border: 1px solid var(--wp--preset--color--plum-500);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover {
	background: var(--wp--preset--color--plum-50);
}

/* ── leeskolom op losse pagina's ── */

/*
 * Elke pagina deelt dezelfde container van 1056px, zodat de inhoud op dezelfde
 * lijn begint als het logo in de header en de secties op de homepage.
 *
 * De leeskolom staat daarbinnen links, niet gecentreerd. De wrapper is daarom
 * op volle breedte en op flow-layout: kinderen van een constrained layout
 * krijgen margin-inline: auto !important zodra ze smaller zijn, en dat is met
 * specificiteit niet te overrulen.
 */
.nv-lees > * {
	max-width: 45rem;
	margin-inline: 0;
}

/* De inhoud van een pagina vult de leeskolom en wordt niet nog eens beperkt. */
.nv-lees .wp-block-post-content > * {
	max-width: 100%;
	margin-inline: 0;
}

/* ── zoekblok ── */

.wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--4);
	border: 0;
}

.wp-block-search__input {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--plum-900);
	background: var(--wp--preset--color--n-0);
	border: 1px solid var(--wp--preset--color--n-300);
	border-radius: var(--wp--custom--radius--sm);
	transition:
		border-color var(--wp--custom--dur--1) linear,
		box-shadow var(--wp--custom--dur--1) linear;
}

.wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--plum-500);
	box-shadow: 0 0 0 3px var(--wp--custom--focus-halo);
}

.wp-block-search__button {
	margin: 0;
	min-height: 52px;
	padding: 0 var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--n-0);
	background: var(--wp--preset--color--plum-500);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition: background var(--wp--custom--dur--1) linear;
}

.wp-block-search__button:hover {
	background: var(--wp--preset--color--plum-600);
}

.nv-footer__slot {
	gap: var(--wp--preset--spacing--5);
	align-items: baseline;
}

.nv-footer__juridisch {
	margin: 0;
}

.nv-footer__juridisch a {
	display: inline;
	padding: 0;
	font-size: var(--wp--preset--font-size--xs);
}

/* ═══════════════════════════════════════════════════════════
   Correcties na visuele controle
   ═══════════════════════════════════════════════════════════ */

/* ── breekpunt van de header ── */

/*
 * Core schakelt het overlaymenu pas onder 600px in. Tussen 600 en ongeveer
 * 1100px passen logo, vijf menu-items en de knop niet naast elkaar, waardoor
 * de navigatie over twee regels brak. We schakelen daarom eerder om.
 */
@media (max-width: 1080px) {
	.nv-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.nv-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* De knop verdwijnt pas onder 782px; daarboven blijft hij naast de hamburger. */
	.nv-header .wp-block-navigation {
		margin-right: 0;
		margin-left: auto;
	}
}

/*
 * Onder 782px blijven alleen logo en hamburger over. De navigatie mag dan geen
 * automatische rechtermarge houden, anders wordt de hamburger naar links
 * getrokken in plaats van tegen de rechterrand.
 */
@media (max-width: 781px) {
	.nv-header > .wp-block-group {
		justify-content: space-between;
	}

	.nv-header .wp-block-navigation {
		margin-left: 0;
		margin-right: 0;
	}

	.nv-header .nv-logo-link {
		margin-right: auto;
	}
}

/* ── spiraal ── */

/*
 * Op mobiel vult de spiraal een heel scherm zonder iets toe te voegen: hij is
 * puur decoratief. Weglaten scheelt ruimte en werk voor de browser.
 */
@media (max-width: 781px) {
	.nv-hero__merk {
		display: none;
	}
}

/* ── ruimte tussen opeenvolgende secties ── */

/*
 * Twee secties met dezelfde achtergrond achter elkaar leveren 178px onder plus
 * 178px boven op: 356px leegte zonder zichtbare scheiding. In dat geval draagt
 * de bovenste sectie de ruimte en laat de onderste zijn bovenmarge vallen.
 */
.nv-sectie:not(.has-background) + .nv-sectie:not(.has-background) {
	padding-top: 0;
}

.nv-sectie.has-n-100-background-color + .nv-sectie.has-n-100-background-color,
.nv-sectie.has-n-50-background-color + .nv-sectie.has-n-50-background-color {
	padding-top: 0;
}

/* ── ankerlinks ── */

html {
	scroll-behavior: smooth;
}

/*
 * De header is sticky en 76px hoog. Zonder deze marge verdwijnt de kop van een
 * sectie eronder zodra je naar een anker springt.
 */
[id] {
	scroll-margin-top: calc(76px + var(--wp--preset--spacing--6));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/*
 * Zonder de spiraal is de hero op mobiel een grotendeels lege kolom. De
 * royale ruimte uit het bron-ontwerp is daar niet nodig.
 */
@media (max-width: 781px) {
	.nv-hero {
		padding-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--9);
	}
}

/* ── header verbergen bij scrollen ── */

/*
 * Geen will-change hier. Net als backdrop-filter en transform maakt will-change
 * van dit element een containing block voor position: fixed-kinderen, waardoor
 * het fullscreen overlaymenu opgesloten raakte in de 77px hoge header. Voor een
 * enkele translate levert een eigen compositorlaag toch niets op.
 */
header:has( > .nv-header) {
	transition: transform var(--wp--custom--dur--2) var(--wp--custom--ease);
}

header:has( > .nv-header).is-verborgen {
	transform: translateY(-100%);
}

/*
 * Zolang het overlaymenu openstaat mag de header niet wegschuiven: de
 * sluitknop zit erin. Het script houdt de class weg, dit is de vangnetregel.
 */
header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	header:has( > .nv-header) {
		transition: none;
	}
}

/* ── aansluiting tussen header, inhoud en footer ── */

/*
 * WordPress zet de blokafstand tussen de top-level blokken van de pagina.
 * Tussen de donkere CTA en de footer levert dat een lichte strook op, alsof er
 * een naad zit. Elke sectie draagt zijn eigen ruimte, dus die afstand is hier
 * overbodig en moeten de vlakken gewoon tegen elkaar aan sluiten.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ═══════════════════════════════════════════════════════════
   Digitaal visitekaartje
   ═══════════════════════════════════════════════════════════ */

/*
 * De kaart is een scherm op zichzelf: iemand scant en wil meteen zien wie je
 * bent. Geen header, geen footer, geen scrollen naar het belangrijkste.
 */
.nv-kaartpagina {
	min-height: 100vh;
	padding-block: var(--wp--preset--spacing--6);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nv-kaart {
	width: 100%;
	max-width: 420px;
	background: var(--wp--preset--color--n-0);
	border: 1px solid var(--wp--preset--color--n-200);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--elev--3);
	overflow: hidden;
}

/*
 * De donkere kop is het enige donkere vlak op de kaart: na een scan is dat het
 * herkenningspunt. De spiraal loopt er bewust uit, zoals in het concept.
 */
.nv-kaart__kop {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--cta-bg);
	color: var(--wp--preset--color--plum-100);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
}

.nv-kaart__spiraal {
	position: absolute;
	right: -30%;
	top: -64%;
	width: 86%;
	opacity: 0.16;
	color: var(--wp--preset--color--saf-300);
	pointer-events: none;
}

.nv-kaart__merk {
	position: relative;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxs);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 300;
	color: var(--wp--preset--color--cta-tekst);
}

/* Het lijf schuift omhoog zodat het portret over de donkere rand valt. */
.nv-kaart__lijf {
	position: relative;
	margin-top: -38px;
	padding: 0 var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
}

.nv-kaart__portret {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--wp--preset--color--plum-50);
	border: 4px solid var(--wp--preset--color--n-0);
	box-shadow: var(--wp--custom--elev--2);
	color: var(--wp--preset--color--plum-600);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	letter-spacing: 0.06em;
	overflow: hidden;
}

.nv-kaart__portretbeeld {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nv-kaart__naam {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 200;
	letter-spacing: 0.04em;
	line-height: 1.1;
	margin: var(--wp--preset--spacing--5) 0 0;
}

.nv-kaart__functie {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--n-600);
	letter-spacing: 0.06em;
	margin: var(--wp--preset--spacing--3) 0 0;
	max-width: none;
}

/* De regel in de leesletter onderscheidt de kaart van een adresboekvermelding. */
.nv-kaart__pitch {
	font-family: var(--wp--preset--font-family--verhaal);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
	border-left: 2px solid var(--wp--preset--color--saf-500);
	padding-left: var(--wp--preset--spacing--5);
	margin: var(--wp--preset--spacing--6) 0;
	max-width: none;
}

.nv-kaart__knop {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background var(--wp--custom--dur--1) linear;
}

.nv-kaart__knop--primair {
	background: var(--wp--preset--color--plum-500);
	color: var(--wp--preset--color--n-0);
}

.nv-kaart__knop--primair:hover {
	background: var(--wp--preset--color--plum-600);
	color: var(--wp--preset--color--n-0);
}

.nv-kaart__knop--tweede {
	margin-top: var(--wp--preset--spacing--6);
	background: transparent;
	color: var(--wp--preset--color--plum-600);
	border: 1px solid var(--wp--preset--color--plum-500);
}

.nv-kaart__knop--tweede:hover {
	background: var(--wp--preset--color--plum-50);
}

.nv-kaart__contact {
	list-style: none;
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--n-200);
}

.nv-kaart__contact li {
	border-bottom: 1px solid var(--wp--preset--color--n-200);
}

.nv-kaart__contact a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--5);
	min-height: 56px;
	padding: var(--wp--preset--spacing--4) 0;
	text-decoration: none;
	color: var(--wp--preset--color--plum-900);
}

.nv-kaart__tekst {
	min-width: 0;
}

/*
 * Lijniconen uit het ontwerp: geen vulling, lijn in de accentkleur, en ze
 * krimpen niet mee als de tekst ernaast lang wordt.
 */
.nv-ico {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--wp--preset--color--plum-500);
	flex: 0 0 auto;
}

/* Op de knoppen volgt het icoon de tekstkleur, niet het accent. */
.nv-kaart__knop .nv-ico {
	width: 20px;
	height: 20px;
	color: currentColor;
	margin-right: 10px;
}

.nv-kaart__contact a:hover .nv-kaart__waarde {
	color: var(--wp--preset--color--plum-600);
}

.nv-kaart__label {
	display: block;
	font-size: var(--wp--preset--font-size--xxs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--n-600);
	margin-bottom: 2px;
}

.nv-kaart__waarde {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	word-break: break-word;
}

.nv-kaart__voet {
	background: var(--wp--preset--color--n-50);
	border-top: 1px solid var(--wp--preset--color--n-200);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--7);
}

.nv-kaart__voet p {
	margin: 0;
	max-width: none;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--n-600);
	letter-spacing: 0.03em;
}