/* Positieve Relaties — thema-CSS
   Alleen wat theme.json niet kan: componentstijl voor de eigen patterns.
   Kleuren, spacing en typografie komen uit theme.json als CSS-custom-properties
   (--wp--preset--color--*, --wp--preset--spacing--*), dus hier staan geen
   losse hexwaarden. */

/* ---------- eyebrow: altijd een pil ---------- */
/* Blok-niveau met fit-content, niet inline-block: de constrained layout van
   WordPress centreert kinderen met margin-inline:auto, en dat werkt niet op
   een inline-block. Die viel daardoor uit de container naar de linkerrand.
   p.pr-eyebrow is specifieker dan WP's `.wp-block-group > *:where(...)`, dus
   dit wint zonder !important. */
p.pr-eyebrow {
	display: block;
	width: fit-content;
	margin-inline-start: 0;
	margin-inline-end: auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 10px 17px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}
p.pr-eyebrow.has-text-align-center { margin-inline: auto; }

/* ---------- iconen als mask, zodat de markup schoon blijft ---------- */
.pr-punt::before,
.pr-kaart::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: var(--wp--preset--spacing--s);
	background-color: var(--wp--preset--color--accent);
	/* Zonder modifier is --pr-icoon niet gezet. Een lege mask toont het hele
	   vlak: een gevuld vierkant. De doorzichtige SVG als var()-fallback laat
	   een vergeten modifier niets tonen in plaats van een blok. */
	-webkit-mask: var(--pr-icoon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C/svg%3E")) center / contain no-repeat;
	mask: var(--pr-icoon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C/svg%3E")) center / contain no-repeat;
}
.pr-punt--ervaring { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10L12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3C/svg%3E"); }
.pr-punt--gratis   { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4.5-3.2-8-6.3-8-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 11c0 3.7-3.5 6.8-8 10z'/%3E%3C/svg%3E"); }
.pr-punt--locatie  { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10.5c0 5.4-8 12-8 12s-8-6.6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10.3' r='2.8'/%3E%3C/svg%3E"); }
.pr-kaart--zelf    { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21c.9-3.6 3.9-6 7.5-6s6.6 2.4 7.5 6'/%3E%3C/svg%3E"); }
.pr-kaart--ander   { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='3.2'/%3E%3Ccircle cx='16' cy='9' r='3.2'/%3E%3Cpath d='M2.5 20c.7-3 2.9-5 5.5-5M21.5 20c-.7-3-2.9-5-5.5-5M12 13.5c1.4 1.2 1.4 3.3 0 4.5'/%3E%3C/svg%3E"); }
.pr-kaart--groep   { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='4.5' r='1.6'/%3E%3Ccircle cx='18.5' cy='15' r='1.6'/%3E%3Ccircle cx='5.5' cy='15' r='1.6'/%3E%3C/svg%3E"); }
.pr-contact--bellen     { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.2 2 2 0 0 1 6.5 3z'/%3E%3C/svg%3E"); }
.pr-contact--mailen     { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.pr-contact--langskomen { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5L12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M9.75 20v-5.5h4.5V20'/%3E%3C/svg%3E"); }
.pr-kaart::before { background-color: var(--wp--preset--color--accent); }

/* ---------- hero ---------- */
/* Vorm uit warm.html: de blob zit linksONDER, niet rechtsonder, en de basis
   is radius-xl. De vorige waarde kwam uit het eerdere, zakelijke ontwerp. */
.pr-hero__beeld {
	border-radius: var(--wp--custom--radius--xl) var(--wp--custom--radius--xl) var(--wp--custom--radius--xl) var(--wp--custom--radius--blob);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--diep);
}
.pr-hero__beeld img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 26%;
}
.pr-lead { color: var(--wp--preset--color--muted); }

/* ---------- intro: afgerond met schaduw, zoals in warm.html ---------- */
.pr-intro__beeld {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--kaart);
}
.pr-intro__beeld img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 24%;
}

/* ---------- citaten ---------- */
.pr-citaat__blok {
	margin-inline: auto;
	text-align: center;
	border: 0;
	padding: 0;
}
/* De maat hoort op de alinea, niet op de blockquote: ch rekent met de
   font-size van het element zelf, en de blockquote staat op de bodymaat van
   17px. Op de blockquote gaf 26ch daardoor 227px in plaats van ruim 400. */
.pr-citaat__blok p {
	max-width: 34ch;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp( 1.4rem, 3vw, 2.1rem );
	line-height: 1.34;
	color: var(--wp--preset--color--primary);
	quotes: "\201C" "\201D";
	/* voorkomt een losse staart op de laatste regel */
	text-wrap: balance;
}
/* De aanhalingstekens staan in de opmaak en niet in de tekst, zodat ze niet
   sneuvelen als Rita het citaat in de editor herschrijft. */
.pr-citaat__blok p::before { content: open-quote; }
.pr-citaat__blok p::after  { content: close-quote; }
.pr-citaat__blok cite {
	display: block;
	margin-top: var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xs);
	font-style: normal;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
/* Cognac op karamel haalt 1.55:1 en is in de praktijk niet te lezen. Op dit
   ene vlak dus navy, gelijk aan het citaat erboven. */
.pr-citaat--kleur .pr-citaat__blok cite { color: var(--wp--preset--color--primary); }

/* ---------- prijzen ---------- */
.pr-prijzen { position: relative; isolation: isolate; }
.pr-prijzen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient( 120% 90% at 88% 108%,
		rgba( 201, 138, 34, .42 ) 0%, rgba( 170, 102, 5, .20 ) 42%, rgba( 20, 25, 92, 0 ) 72% );
}
.pr-lead-donker { color: var(--wp--custom--op-navy--tekst); }
.pr-traject {
	margin-top: var(--wp--preset--spacing--m);
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--op-navy--vlak);
}
.pr-traject h3 { color: var(--wp--preset--color--white); margin: 0 0 6px; }
.pr-traject__stappen { color: var(--wp--custom--op-navy--tekst); margin: 0; }
.pr-prijs { text-align: right; }
.pr-prijs__bedrag {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	margin: 0;
}
.pr-prijs__noot { color: var(--wp--custom--op-navy--tekst); margin: 0; }

/* ---------- werkwijze-tabs ---------- */
.pr-wz {
	position: relative;
	isolation: isolate;
	background-image: url( "../beeld/wz-achtergrond.jpg" );
	background-size: cover;
	background-position: 50% 62%;
}
.pr-wz::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( 180deg,
		rgba( 13, 16, 66, .72 ) 0%, rgba( 20, 25, 92, .48 ) 45%, rgba( 62, 38, 8, .55 ) 100% );
}
.pr-wz__tabs { gap: 5px; max-width: var(--wp--custom--blok-max); margin-inline: auto; }
.pr-wz__tab {
	flex: 1;
	margin: 0;
	padding: 16px 10px;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	background: rgba( 255, 255, 255, .6 );
	border-radius: var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0 0;
	transition: background .18s ease;
}
.pr-wz.is-tabs-actief .pr-wz__tab { cursor: pointer; }
.pr-wz__tab:hover { background: rgba( 255, 255, 255, .85 ); }
/* Teller voor de stapnummers die op mobiel voor de koppen komen. */
.pr-wz { counter-reset: pr-stap; }
.pr-wz__paneel {
	max-width: var(--wp--custom--blok-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xl);
	/* Bovenhoeken altijd vierkant. De tabbalk loopt over de volle breedte van
	   de kaart, dus elke ronding bovenaan geeft een inkeping onder de
	   buitenste tabs. In warm.html staat 0/24/24/24, en dat gaat alleen goed
	   zolang de eerste tab actief is; met klikbare tabs moet het voor alle
	   drie kloppen. De ronding zit nu in de tabs zelf. */
	border-radius: 0 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--diep);
}
.pr-wz__paneel:not( :first-of-type ) { margin-top: var(--wp--preset--spacing--m); }
.pr-wz.is-tabs-actief .pr-wz__paneel { margin-top: 0; }
.pr-wz__paneel--kennismaken { background: var(--wp--preset--gradient--card-caramel); }
.pr-wz__paneel--afspraken   { background: var(--wp--preset--gradient--card-apricot); }
.pr-wz__paneel--werk        { background: var(--wp--preset--gradient--card-sand); }
/* De actieve tab krijgt de BOVENkleur van het kaartverloop als vlakke vulling.
   Met hetzelfde verloop in een balk van 48px hoog eindigt hij veel donkerder
   dan waar de kaart begint, en dan zie je een naadlijn op de overgang. */
.pr-wz__tab:nth-child(1).is-actief { background: var(--wp--custom--tab-top--caramel); }
.pr-wz__tab:nth-child(2).is-actief { background: var(--wp--custom--tab-top--apricot); }
.pr-wz__tab:nth-child(3).is-actief { background: var(--wp--custom--tab-top--sand); }
.pr-wz__beeld img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: var(--wp--custom--radius--sm);
}
.pr-wz__paneel p { color: var(--wp--custom--op-warm--tekst); }

/* De editor rendert de panelen zonder het frontend-script, dus zonder deze
   override zou een `hidden`-attribuut uit een eerdere sessie de content
   onzichtbaar maken. In de editor horen alle drie de stappen zichtbaar. */
.editor-styles-wrapper .pr-wz__paneel[hidden] { display: block !important; }
.editor-styles-wrapper .pr-wz__paneel { margin-top: var(--wp--preset--spacing--m); }

/* ---------- header ---------- */
.pr-kop { position: sticky; top: 0; z-index: 40; }
.pr-kop__binnen {
	max-width: 1120px;
	margin-inline: auto;
	padding: 14px var(--wp--preset--spacing--m);
	gap: var(--wp--preset--spacing--m);
}
.pr-kop .wp-block-site-logo img { height: 59px; width: auto; }
.pr-kop__rechts { gap: var(--wp--preset--spacing--m); }
.pr-nav a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	/* Regelhoogte alleen gaf 26px; met deze padding haalt elke link 40px,
	   wat op een tablet met de vinger nog te raken is. */
	padding-block: 8px;
}

.pr-kop__cta .wp-block-button__link { padding: 12px 22px; font-size: 0.875rem; }

/* ---------- footer ---------- */
.pr-voet__grid { max-width: 1120px; margin-inline: auto; }
.pr-voet__kop {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--s);
}
.pr-voet a { color: var(--wp--preset--color--white); text-decoration: none; }
.pr-voet a:hover { color: var(--wp--preset--color--caramel); }
.pr-voet__lijst, .pr-voet__contact { list-style: none; padding: 0; }
.pr-voet__nav a { font-family: var(--wp--preset--font-family--body); }
.pr-voet__onder { border-top: 1px solid var(--wp--custom--op-navy--lijn); max-width: 1120px; margin-inline: auto; }
.pr-voet__logo img { height: 46px; width: auto; filter: brightness(0) invert(1); }
.pr-credit { color: rgba( 255, 255, 255, .5 ); margin: 0; }

/* ---------- slot: leesbreedte ----------
   De kop en de lead liepen over de volle 1120px. In het prototype staat de
   lead op max-width 46ch; zonder die grens leest een gecentreerde regel van
   1120px slecht. */
.pr-slot h2 { max-width: 26ch; margin-inline: auto; text-wrap: balance; }
.pr-slot .pr-lead { max-width: 62ch; margin-inline: auto; text-wrap: pretty; }

/* ---------- secties sluiten op elkaar aan ----------
   De flow-layout van WordPress zet een blockGap tussen elk kind van
   .wp-site-blocks, waardoor er een strook body-achtergrond tussen main en
   de voet stond. Let op: header en voet zitten in een template-part-wrapper,
   dus .pr-voet raakt het verkeerde element; de margin zit op
   .wp-block-template-part. Twee klassen diep, dus dit wint van de eigen regel
   van WP zonder !important. */
body .wp-site-blocks > .pr-main,
body .wp-site-blocks > .wp-block-template-part { margin-block-start: 0; }

/* ---------- 072DESIGN-credit ----------
   Maat geijkt op het WOORDMERK (0,534 x logohoogte), niet op de bubbel:
   13px Poppins heeft een kaphoogte van 9,1px, dus 9,1 / 0,534 = 17px logo.
   De -3,64px zet de basislijn van het woordmerk op die van de tekst; de
   basislijn van het woordmerk zit 0,214 x de logohoogte boven de onderrand
   van het bestand. display:inline-block is nodig omdat de reset img op block
   zet en vertical-align op een blok niets doet. */
.pr-credit {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	color: rgba( 255, 255, 255, .5 );
	margin: 0;
}
.pr-credit a { text-decoration: none; }
.pr-credit__logo {
	display: inline-block;
	height: 17px;
	width: auto;
	vertical-align: -3.64px;
	opacity: .5;
	transition: opacity .2s ease;
}
.pr-credit a:hover .pr-credit__logo { opacity: 1; }

/* ---------- voet: navigatie op dezelfde regelafstand als de lijsten ---------- */
.pr-voet__nav { gap: 12px 0; }
.pr-voet__nav .wp-block-navigation-item { margin-bottom: 0; line-height: 1.5; }
.pr-voet__lijst li, .pr-voet__contact li { margin-bottom: 12px; line-height: 1.5; }

/* ================= mobiel (781px = het punt waarop WP kolommen stapelt) ===== */
@media ( max-width: 781px ) {

	/* Knoppen: gestapeld, volle breedte, gelijk. Harde huisregel, en die
	   geldt overal waar er twee naast elkaar stonden. De header valt er
	   bewust buiten, want die CTA verdwijnt hieronder. */
	.pr-hero .wp-block-buttons,
	.pr-slot .wp-block-buttons,
	.pr-intro .wp-block-buttons,
	.pr-main .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.pr-main .wp-block-button { width: 100%; }
	.pr-main .wp-block-button__link { display: block; width: 100%; text-align: center; }

	.pr-kop__binnen { padding: 10px var(--wp--preset--spacing--m); }
	.pr-kop .wp-block-site-logo img { height: 51px; }


	/* Op mobiel geen tabbladen en ook geen accordeon: de drie stappen staan
	   gewoon onder elkaar. Het zijn opeenvolgende stappen van zestig woorden,
	   geen alternatieven waartussen je kiest, en twee derde daarvan achter een
	   tik verstoppen kost meer dan het oplevert. De accordeon die we eerst
	   probeerden gaf bovendien een kop die losstond van zijn eigen paneel.
	   tabs.js bouwt de tablist daarom alleen op vanaf 782px. */
	.pr-wz .wp-block-group.pr-wz__tabs { display: none; }

	.pr-wz__paneel {
		counter-increment: pr-stap;
		margin-top: var(--wp--preset--spacing--m);
		padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
		border-radius: var(--wp--custom--radius--md);
	}
	/* Nummer voor de kop, zodat de volgorde leesbaar is nu de tabbalk weg is. */
	.pr-wz__paneel h3::before {
		content: counter( pr-stap );
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		margin-right: 12px;
		vertical-align: 2px;
		border-radius: 50%;
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--display);
		font-size: 0.9375rem;
		font-weight: 600;
	}
	/* Het beeld op 16:9 in plaats van 4:3. Op 4:3 was één stap bijna een heel
	   scherm hoog en werd het scrollen door drie stappen te veel. */
	.pr-wz__beeld img { aspect-ratio: 16 / 9; }

	/* Credit links, mee met de rest van de voet in plaats van rechts alleen. */
	/* has-text-align-right van WP is even specifiek, dus een klasse dieper. */
	.pr-voet .pr-credit { text-align: left; }

	/* Prijzen: bedrag onder de omschrijving, links uitgelijnd. */
	.pr-prijs { text-align: left; }
	.pr-traject { padding: var(--wp--preset--spacing--m); }
}

/* ---------- drieluik en kaarten: vorm uit warm.html ----------
   Stond eerst links uitgelijnd met een navy kop op bodymaat; dat kwam uit
   het eerdere ontwerp. In de warme variant zijn de punten gecentreerd en is
   de kop een klein cognac kapitaalkopje. */
.pr-punt { text-align: center; }
.pr-punt::before { margin-inline: auto; }
.pr-punt h3 {
	font-size: 0.8125rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 10px;
}
.pr-punt p { color: var(--wp--preset--color--muted); }

.pr-kaart {
	box-shadow: var(--wp--custom--shadow--kaart);
}
.pr-kaart::before { width: 40px; height: 40px; }
.pr-kaart p { color: var(--wp--custom--op-warm--tekst); }

/* ---------- korrel op de gekleurde vlakken ----------
   Ontbrak volledig in de eerste omzetting. In warm.html ligt over elk
   gekleurd vlak een fijne ruis op .30 dekking, en op navy op .22. Die haalt
   het 'digitaal ingekleurd'-gevoel eraf en laat de kleur lezen als inkt. */
.pr-hero, .pr-drieluik, .pr-intro, .pr-aanbod, .pr-citaat:not(.pr-citaat--beeld), .pr-slot, .pr-prijzen, .pr-paginakop,
.pr-contact, .pr-artikelen {
	position: relative;
	isolation: isolate;
}
.pr-hero::before, .pr-drieluik::before, .pr-intro::before, .pr-aanbod::before,
.pr-citaat:not(.pr-citaat--beeld)::before, .pr-slot::before, .pr-prijzen::before, .pr-paginakop::before,
.pr-contact::before, .pr-artikelen::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .30;
	mix-blend-mode: soft-light;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E" );
}
.pr-prijzen::before { opacity: .22; }

/* ---------- beeldmerk als watermerk ----------
   Groot, links half uit beeld, op 7 procent. Ontbrak in de omzetting. */
.pr-merkvlek { overflow: hidden; }
.pr-merkvlek::after {
	content: "";
	position: absolute;
	left: -9%;
	top: 50%;
	transform: translateY(-50%);
	width: 52%;
	aspect-ratio: 1;
	z-index: -1;
	opacity: .07;
	pointer-events: none;
	background: url( "../beeld/merk-watermerk.png" ) center / contain no-repeat;
}
/* Twee watermerken direct onder elkaar leest als ruis in plaats van als
   merkdetail. Het onderste vervalt, zodat de bovenste sectie hem houdt. */
.pr-merkvlek + .pr-merkvlek::after { content: none; }

/* ---------- naden tussen de secties ----------
   De secties staan in post-content, niet als directe kinderen van main, dus
   de eerdere regel raakte ze niet meer en de flow-layout zette er weer een
   blockGap tussen.

   Alleen de gekleurde vlakken, niet alles. De eerste versie raakte elk direct
   kind van post-content, en op een artikel zijn dat de alinea's zelf: die
   plakten daardoor aan elkaar. Een sectie herken je aan zijn achtergrond. */
.pr-main .wp-block-post-content > .has-background,
.pr-main .wp-block-post-content > .wp-block-cover,
.pr-main .wp-block-post-content > .pr-wz { margin-block-start: 0; }

/* ---------- categorie boven een artikel ----------
   Zelfde pil als de eyebrow elders, zodat een artikel niet als een vreemde
   eend in de bijt begint. */
.pr-eyebrow-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--s);
}
.pr-eyebrow-wrap a {
	display: inline-block;
	padding: 7px 16px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}
.pr-eyebrow-wrap a:hover { background: var(--wp--preset--color--primary); }


/* ---------- zakelijk blok ---------- */
.pr-zakelijk { position: relative; isolation: isolate; }
.pr-zakelijk::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient( 120% 90% at 12% -10%,
		rgba( 201, 138, 34, .16 ) 0%, rgba( 242, 206, 149, .10 ) 44%, rgba( 253, 248, 240, 0 ) 74% );
}
/* icoon voor de vertrouwenspersoon; de andere twee hergebruiken de iconen
   van het particuliere aanbod */
.pr-kaart--vertrouwen { --pr-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.3-3 8-7 9.5-4-1.5-7-5.2-7-9.5V6z'/%3E%3Cpath d='M9.2 12.2l2 2 3.6-3.9'/%3E%3C/svg%3E"); }
/* Op navy gedempt wit, op een licht vlak gewoon de gedempte tekstkleur. */
.pr-prijzen .pr-prijs__btw { color: var(--wp--custom--op-navy--tekst); }
.pr-zakelijk .pr-prijs__btw { color: var(--wp--preset--color--muted); }

/* ---------- paginakop ----------
   Versimpelde entree per pagina: eyebrow, h1 en een korte lead op zand,
   met het beeldmerk als watermerk. Geen beeld en geen knoppen, want de hero
   op de homepage moet het enige echte openingsblok blijven. */
.pr-paginakop { text-align: center; }
.pr-paginakop h1 { max-width: 20ch; margin-inline: auto; }
.pr-paginakop .pr-lead { max-width: 54ch; margin-inline: auto; }

/* ---------- uitgeschreven diensten ---------- */
.pr-dienst h2 { margin-bottom: var(--wp--preset--spacing--s); }
.pr-dienst__vormen {
	list-style: none;
	padding: 0;
	margin-top: var(--wp--preset--spacing--m);
}
.pr-dienst__vormen li {
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.pr-dienst__vormen li:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }

/* ---------- tekstpagina's en puntenlijsten ---------- */
.pr-tekst h2 { margin-bottom: var(--wp--preset--spacing--s); }
.pr-punten { list-style: none; padding: 0; }
.pr-punten li {
	position: relative;
	padding: 10px 0 10px 30px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.pr-punten li:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }
.pr-punten li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 19px;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
}
.pr-plaats h3 { margin-bottom: 8px; }
/* De omschrijvingen lopen niet even lang, dus zonder deze regel staat de
   ene link twee regels lager dan de andere. */
.pr-plaats { display: flex; flex-direction: column; }
/* Geen icoon op deze kaarten: vier keer hetzelfde speldje is ruis. Zonder
   deze regel houdt .pr-kaart::before wel de ruimte ervoor vrij. */
.pr-plaats::before { content: none; }
.pr-plaats > p:last-child { margin-top: auto; padding-top: var(--wp--preset--spacing--s); }
.pr-plaatsen .wp-block-columns { margin-top: var(--wp--preset--spacing--xl); }
.pr-plaatsen > p:last-child {
	margin-top: var(--wp--preset--spacing--xl);
	max-width: 64ch;
	margin-inline: auto;
	text-wrap: pretty;
	color: var(--wp--preset--color--muted);
}

/* ---------- artikeloverzicht ----------
   De query-loop staat leeg tot Rita zelf publiceert. Het raster en de kaarten
   liggen er wel al, zodat een nieuw artikel meteen goed staat. */
.pr-artikelen .pr-kaarten {
	gap: var(--wp--preset--spacing--l);
}
.pr-artikelen .pr-kaarten > li {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--kaart);
	display: flex;
	flex-direction: column;
}
.pr-artikelen .pr-kaart__beeld img { border-radius: 0; }
.pr-artikelen .wp-block-post-title,
.pr-artikelen .wp-block-post-excerpt {
	padding-inline: var(--wp--preset--spacing--m);
}
.pr-artikelen .wp-block-post-title { margin-block: var(--wp--preset--spacing--m) 0; }
.pr-artikelen .wp-block-post-title a { text-decoration: none; }
.pr-artikelen .wp-block-post-title a:hover { text-decoration: underline; }
.pr-artikelen .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
	margin-block: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
}
.pr-leeg {
	box-shadow: var(--wp--custom--shadow--kaart);
	max-width: 560px;
	margin-inline: auto;
}
.pr-leeg p { color: var(--wp--custom--op-warm--tekst); }

/* ---------- citaat op een foto ----------
   Een core/cover, geen achtergrond-afbeelding in CSS: zo kan Rita de foto en
   de dekking zelf wisselen zonder dat er een regel in het thema hoeft. */
.pr-citaat--beeld {
	padding-block: var(--wp--preset--spacing--xxxl);
}
.pr-citaat--beeld .pr-citaat__blok p,
.pr-citaat--beeld .pr-citaat__blok cite {
	color: var(--wp--preset--color--white);
}
.pr-citaat--beeld .pr-citaat__blok p {
	max-width: 30ch;
	font-size: clamp( 1.6rem, 3.6vw, 2.6rem );
	text-shadow: 0 1px 24px rgb( 0 0 0 / .35 );
}
.pr-citaat--beeld .pr-citaat__blok cite { opacity: .82; }

@media (max-width: 600px) {
	.pr-citaat--beeld { min-height: 420px; }
}

/* ---------- verwijzing naar de andere plaatsen ----------
   De plaatspagina's liepen dood: ze linkten nergens heen, ook niet terug
   naar de hub. Deze band staat op elke plaatspagina boven de slot-CTA. */
.pr-elders p {
	max-width: 60ch;
	margin-inline: auto;
	text-wrap: pretty;
	color: var(--wp--preset--color--muted);
}

/* ---------- beeld in de paginakop ----------
   De foto sluit de kop af in plaats van een eigen sectie te vormen, zodat
   kop en beeld als een geheel lezen. Staat op zeven van de negen paginakoppen;
   Over Rita heeft er vlak eronder al twee en de privacyverklaring is een
   juridische pagina zonder sfeerbeeld. */
.pr-plaatsbeeld {
	box-shadow: var(--wp--custom--shadow--kaart);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.pr-plaatsbeeld img { display: block; width: 100%; }

@media (max-width: 781px) {
	.pr-plaatsbeeld img { aspect-ratio: 4 / 3; }
}

/* ---------- mobiel menu ----------
   Het paneel van het navigatieblok is standaard een wit vlak met zwarte,
   rechts uitgelijnde tekst. Dat leest als een onaf WordPress-menu, dus het
   krijgt hier de opmaak van de site zelf: warm verloop, het beeldmerk boven,
   ruime raakvlakken en de belangrijkste stap als knop onderaan.

   Twee menu-items bestaan alleen voor dit paneel: de CTA en het
   telefoonnummer. Op desktop staat de knop al in de kop, dus daar vervallen
   ze. Het zijn gewone navigatielinks, dus in de editor blijven ze bewerkbaar.

   De .pr-kop ervoor is geen sier. Core zet de uitlijning met vier klassen
   (.is-menu-open .wp-block-navigation__container.items-justified-right);
   zonder die extra klasse verliezen deze regels en blijft het menu
   rechts uitgelijnd staan. */
.pr-kop .wp-block-navigation__container .pr-nav__cta,
.pr-kop .wp-block-navigation__container .pr-nav__telefoon { display: none; }

@media (max-width: 999px) {

	.pr-kop .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--gradient--surface-creme);
		padding: 0;
	}
	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-close { max-width: none; }
	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		padding: 0 var(--wp--preset--spacing--m) var(--wp--preset--spacing--xl);
	}

	/* Het beeldmerk staat boven het paneel op de plek waar in de kop het logo
	   stond, zodat het openen niet als een sprong voelt. Puur decoratief: het
	   echte logo staat in de header eronder. */
	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog::before {
		content: "";
		display: block;
		height: 51px;
		margin: 10px 0 var(--wp--preset--spacing--l);
		background: url( "../beeld/site-logo.png" ) left center / contain no-repeat;
	}

	.pr-kop .wp-block-navigation__responsive-container-close {
		top: 12px;
		right: var(--wp--preset--spacing--m);
		color: var(--wp--preset--color--primary);
	}
	.pr-kop .wp-block-navigation__responsive-container-close svg {
		width: 26px;
		height: 26px;
	}

	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content { width: 100%; }
	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container.pr-nav {
		width: 100%;
		gap: 0;
		align-items: stretch;
	}
	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container.pr-nav .wp-block-navigation-item {
		width: 100%;
		align-items: stretch;
	}
	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container.pr-nav a {
		display: block;
		padding-block: 15px;
		font-size: 1.375rem;
		font-weight: 600;
		text-align: left;
		color: var(--wp--preset--color--primary);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.pr-kop .wp-block-navigation__container .pr-nav__cta,
	.pr-kop .wp-block-navigation__container .pr-nav__telefoon { display: block; }

	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container.pr-nav .pr-nav__cta a {
		margin-top: var(--wp--preset--spacing--l);
		padding: 16px 24px;
		border-bottom: 0;
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--white);
		font-size: 1rem;
		text-align: center;
	}
	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container.pr-nav .pr-nav__telefoon a {
		margin-top: var(--wp--preset--spacing--s);
		padding-block: 12px;
		border-bottom: 0;
		font-family: var(--wp--preset--font-family--body);
		font-size: 1rem;
		font-weight: 400;
		text-align: center;
		color: var(--wp--preset--color--muted);
	}
	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container.pr-nav
		.wp-block-navigation-item:nth-last-child(3) a { border-bottom: 0; }
}

/* ---------- kruimelpad ----------
   Staat als eerste element in de paginakop, boven het labeltje. Rustig en
   klein: het is oriëntatie, geen navigatie waar je naar zoekt. */
.pr-kruimels {
	margin-bottom: var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}
.pr-kruimels__lijst {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pr-kruimels__stap { display: flex; align-items: center; gap: 8px; }
/* Het scheidingsteken hoort bij de opmaak en niet bij de tekst, dus het
   staat niet in de voorleesvolgorde van een schermlezer. */
.pr-kruimels__stap + .pr-kruimels__stap::before {
	content: "\203A";
	color: var(--wp--preset--color--border);
}
.pr-kruimels a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.pr-kruimels a:hover,
.pr-kruimels a:focus-visible {
	color: var(--wp--preset--color--accent);
	border-bottom-color: currentColor;
}
.pr-kruimels [aria-current="page"] { color: var(--wp--preset--color--primary); }

/* De kop-CTA staat op outline, zodat de knop in de hero de enige primaire
   actie in beeld is. De rand houdt het cognac-accent; de tekst is navy, want
   cognac op crème haalt 4.31:1 en dat is net onder de norm voor 14px. */
.pr-kop__cta .wp-block-button__link.is-style-outline,
.pr-kop__cta .is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--accent);
	background: transparent;
	padding: 10px 20px;
}
/* Vullen met cognac kon niet: WordPress zet de presetkleur has-primary-color
   met !important, dus de tekst bleef navy en werd onleesbaar op dat vlak. In
   plaats van dat met nog een !important te overrulen vult hij nu abrikoos.
   Navy blijft dan gewoon leesbaar en het leest als opwarmen. */
.pr-kop__cta .wp-block-button__link:hover,
.pr-kop__cta .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--apricot);
}

/* ---------- contactformulier ---------- */
.pr-formulier__veld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block: 0 var(--wp--preset--spacing--m);
}
.pr-formulier label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.pr-formulier__optioneel {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}
.pr-formulier input,
.pr-formulier textarea {
	/* Zonder dit tellen padding en rand bij de 100% op, en loopt het veld
	   34px buiten zijn kolom. Op een telefoon van 390 gaf dat een
	   horizontale schuifbalk. */
	box-sizing: border-box;
	width: 100%;
	padding: 13px 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}
.pr-formulier textarea { resize: vertical; min-height: 150px; }
.pr-formulier input:focus-visible,
.pr-formulier textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}
.pr-formulier__veld.is-fout input,
.pr-formulier__veld.is-fout textarea { border-color: var(--wp--preset--color--accent); }
.pr-formulier__fout {
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--accent);
}
.pr-formulier__melding {
	padding: 14px 18px;
	margin-bottom: var(--wp--preset--spacing--m);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--gradient--card-apricot);
	color: var(--wp--custom--op-warm--tekst);
}
/* De honeypot uit beeld halen zonder display:none: bots slaan verborgen
   velden soms juist over, en dan werkt de val niet. */
.pr-formulier__val {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.pr-formulier__knop {
	padding: 15px 30px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}
.pr-formulier__knop:hover { background: var(--wp--preset--color--primary-dark); }
.pr-formulier__knop:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
.pr-formulier__voet { margin-block: var(--wp--preset--spacing--s) 0; }
.pr-formulier__kleine-letters {
	margin-block: var(--wp--preset--spacing--s) 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--muted);
}
.pr-formulier__gelukt {
	padding: var(--wp--preset--spacing--l);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--gradient--card-apricot);
	box-shadow: var(--wp--custom--shadow--kaart);
}
.pr-formulier__gelukt p { color: var(--wp--custom--op-warm--tekst); }
.pr-formulier__gelukt p:last-child { margin-bottom: 0; }

/* ---------- cookiemelding en embed-poort ----------
   De melding staat onderaan het scherm en dekt de pagina niet af: er valt
   niets te blokkeren zolang de bezoeker niets laadt. */
.pr-toestemming {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	padding: var(--wp--preset--spacing--m);
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -8px 30px rgb( 20 25 92 / .10 );
}
.pr-toestemming[hidden] { display: none; }
.pr-toestemming__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--m);
	max-width: 1120px;
	margin-inline: auto;
}
.pr-toestemming__tekst {
	flex: 1 1 34ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--muted);
	text-wrap: pretty;
}
.pr-toestemming__knoppen { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--s); }
.pr-toestemming__knop {
	padding: 13px 24px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	border-radius: var(--wp--custom--radius--pill);
	border: 2px solid var(--wp--preset--color--primary);
	cursor: pointer;
}
.pr-toestemming__knop--ja {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.pr-toestemming__knop--nee {
	background: transparent;
	color: var(--wp--preset--color--primary);
}
.pr-toestemming__knop:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.pr-embed__tegel {
	padding: var(--wp--preset--spacing--l);
	text-align: center;
	background: var(--wp--preset--gradient--card-sand);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--kaart);
}
.pr-embed__uitleg { color: var(--wp--custom--op-warm--tekst); }
.pr-embed__klein { font-size: var(--wp--preset--font-size--s); }
.pr-embed__knop {
	margin-top: var(--wp--preset--spacing--s);
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

@media (max-width: 600px) {
	.pr-toestemming__knoppen { width: 100%; }
	.pr-toestemming__knop { flex: 1 1 100%; }
}

/* ---------- het beeld boven een artikel ----------
   Het schuift met zijn bovenkant het zandvlak in, zodat kop en beeld één
   compositie worden in plaats van twee gestapelde blokken. De kop heeft
   daarvoor extra ruimte onderin, xxxl in plaats van xxl.

   De overlap staat niet in het blok maar hier, want hij moet per
   schermbreedte verschillen: op een telefoon is 120px de halve foto.

   Het beeld staat bewust ná de kop en niet erin. De kop heeft overflow:hidden
   nodig voor het watermerk, en dat knipt een uitstekend beeld gewoon af.

   De .pr-main ervoor is nodig. De flow-layout van core zet
   margin-block-start: 0 op elk kind, met dezelfde specificiteit als een losse
   klasse, en die regel staat later in de bron. Zonder die extra klasse blijft
   de marge dus gewoon op nul staan. Ook margin-block-start en niet margin-top,
   want dat is de eigenschap die core zelf gebruikt. */
.pr-main .pr-artikelbeeld__vak {
	position: relative;
	z-index: 1;
	margin-block-start: -64px;
}
.pr-artikelbeeld img {
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--diep);
}

@media (min-width: 782px) {
	.pr-main .pr-artikelbeeld__vak { margin-block-start: -80px; }
}
@media (max-width: 480px) {
	.pr-main .pr-artikelbeeld__vak { margin-block-start: -36px; }
}

/* ---------- een artikel doorsturen ----------
   Geen knoppenrij maar een rustige regel. Het is een aanbod, geen aansporing;
   zie inc/doorsturen.php voor waarom er geen social-knoppen staan. */
.pr-doorsturen {
	max-width: 720px;
	margin: var(--wp--preset--spacing--xl) auto 0;
	padding-top: var(--wp--preset--spacing--l);
	border-top: 1px solid var(--wp--preset--color--border);
}
.pr-doorsturen__vraag {
	margin-bottom: var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.pr-doorsturen__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
	margin: 0;
}
.pr-doorsturen__link {
	display: inline-block;
	padding: 11px 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.pr-doorsturen__link:hover,
.pr-doorsturen__link:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* ---------- kopbeeld op een pagina ----------
   Het staat als eerste blok ín de sectie onder de paginakop, niet ertussen.
   Ertussen zetten leverde een derde band op: de bodykleur werd dan links en
   rechts van de foto zichtbaar tussen het zandvlak en de sectie. Nu staat de
   onderkant van de foto op de achtergrond van die sectie zelf.

   De marge moet daarom ook de bovenpadding van die sectie overbruggen. Op een
   artikel ligt dat anders, want daar is het vak een zusje van de kop; die
   regel staat hierboven. */
.pr-main .pr-kopbeeld__vak {
	position: relative;
	z-index: 1;
	margin-block-start: calc( -1 * ( var(--wp--preset--spacing--xxxl) + 36px ) );
	margin-block-end: var(--wp--preset--spacing--xxl);
}

@media (min-width: 782px) {
	.pr-main .pr-kopbeeld__vak {
		margin-block-start: calc( -1 * ( var(--wp--preset--spacing--xxxl) + 80px ) );
	}
}

/* ---------- breedte van het kopbeeld ----------
   Pagina's stonden op de contentmaat (1120) en artikelen op wide (1280), dus
   het verschilde per pagina. Allebei nu op blokMax, de smalste maat die al in
   de tokens zat. Reden: het zijn foto's van Rita zelf, en een portret van
   1280 breed op een groot scherm is veel. Smaller leest als een gekozen maat
   in plaats van als zo breed mogelijk, en de zandband eromheen doet de rest.

   De maat staat op het vak en niet op de figure. Op een plaatspagina zit het
   vak in een tekstsectie met een contentmaat van 720, en die kapt alles
   daarbinnen af; het vak moet daar dus zelf overheen. */
.pr-main .pr-kopbeeld__vak,
.pr-main .pr-artikelbeeld__vak {
	max-width: var(--wp--custom--blok-max);
	width: 100%;
	margin-inline: auto;
}
/* Op een artikel levert het vak zelf de zijmarge, op een pagina doet de
   sectie eromheen dat al. Zonder deze correctie kwam het artikelbeeld op 872
   uit en het paginabeeld op 920. */
.pr-main .pr-artikelbeeld__vak {
	max-width: calc( var(--wp--custom--blok-max) + var(--wp--preset--spacing--m) * 2 );
}

/* ---------- onderstreping die van links naar rechts inloopt ----------
   Huisregel uit wiki/design/honey-pop-brand-tokens: nav-links in de kop en de
   voet krijgen een scaleX-onderstreping op hover, 280ms ease-out, en die staat
   uit voor wie beweging heeft afgezet. In de kop cognac, in de voet karamel,
   want daar staat de tekst op navy.

   Bewust niet in het mobiele paneel: die items hebben al een scheidingslijn,
   en op een aanraakscherm bestaat hover niet. */
.pr-nav a,
.pr-voet__lijst a,
.pr-voet__contact a {
	position: relative;
}
.pr-nav a::after,
.pr-voet__lijst a::after,
.pr-voet__contact a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 2px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 280ms ease-out;
}
.pr-voet__lijst a::after,
.pr-voet__contact a::after {
	background: var(--wp--preset--color--caramel);
	bottom: -2px;
}
.pr-nav a:hover::after,
.pr-nav a:focus-visible::after,
.pr-voet__lijst a:hover::after,
.pr-voet__lijst a:focus-visible::after,
.pr-voet__contact a:hover::after,
.pr-voet__contact a:focus-visible::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.pr-nav a::after,
	.pr-voet__lijst a::after,
	.pr-voet__contact a::after { transition: none; }
}

@media (max-width: 781px) {
	.pr-kop .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container.pr-nav a::after { content: none; }
}

/* ---------- hamburger doortrekken tot 781 ----------
   Het navigatieblok schakelt bij 600px naar het paneel, terwijl al onze
   mobiele regels op 781 staan. Tussen 601 en 781 stond het hele menu daardoor
   inline: zeven items plus de knop plus het telefoonnummer, dat over vijf
   regels brak en het logo platdrukte. De kop werd daar 167px hoog.

   Twee keuzes waren mogelijk: onze regels naar 600 halen, of de hamburger
   doortrekken tot 781. Het eerste kan niet, want op 600 past een menu van
   zeven items met een knop er sowieso niet naast een logo. Dus het tweede. */
@media (min-width: 600px) and (max-width: 999px) {
	.pr-kop .wp-block-navigation__responsive-container-open {
		display: flex;
	}
	.pr-kop .wp-block-navigation__responsive-container:not( .is-menu-open ) {
		display: none;
	}
}

@media (max-width: 999px) {
	/* De CTA brak over twee regels en verdrong de hamburger. Hij staat toch
	   direct in de hero eronder, en in het paneel zelf.
	   .wp-block-buttons krijgt display:flex van WP met twee klassen; drie
	   klassen diep om daar bovenuit te komen zonder !important. */
	.pr-kop .wp-block-buttons.pr-kop__cta { display: none; }

	/* Hamburger was 24x24. Een duim heeft 44x44 nodig; padding erbij in plaats
	   van het icoon zelf op te blazen. */
	.pr-kop .wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		padding: 10px;
	}
	.pr-kop .wp-block-navigation__responsive-container-open { margin-right: -10px; }
}