/* 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. */

/* ---------- lange woorden in koppen ----------
   Nederlands heeft lange samenstellingen ("themabijeenkomst",
   "Heerhugowaard"). Bij grotere tekst op de telefoon (instelling van de
   bezoeker) paste zo'n woord niet meer op de regel: de pagina schoof
   zijwaarts of het woord werd afgekapt. Vangnet: een woord breekt alleen af
   als het echt niet past, en zonder afbreekstreepje (Martijn vindt die
   streepjes raar; hyphens:auto zette ze ook op normale grootte in smalle
   kolommen). Op normale grootte verandert er dus niets. */
h1, h2, h3, h4 {
	overflow-wrap: break-word;
}

/* ---------- 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-contact--inplannen  { --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='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M9 15l2 2 4-4'/%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.webp" );
	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; }

/* Twee credits op één regel: de fotograaf links, wij rechts. Rita vroeg om de
   vermelding van Studio Miss Elle (01-09-2026); onder elkaar zetten zou van
   twee bijzinnen een blok maken. Onder de 620px wikkelen ze vanzelf. */
.pr-voet__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: var(--wp--preset--spacing--m);
	row-gap: 6px;
}
/* De constrained layout van core zet op elk kind `margin-left/right: auto`
   mét !important. Als flex-item betekent dat gecentreerd, en dan doet
   space-between niets meer. Overrulen kan hier alleen met !important terug. */
.pr-voet__onder > .pr-credit {
	margin-block: 0;
	margin-inline: 0 !important;
}
.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; }

	/* Hero: foto full bleed bovenaan, tekst eronder. WordPress stapelt de
	   kolommen in bronvolgorde, en dan staat de foto pas na ruim een scherm
	   tekst. Bewust een andere vorm dan desktop: geen kaart met blob en
	   schaduw, maar een rand-tot-rand beeld direct onder de kop.
	   De padding-top staat inline op het blok, dus alleen !important wint. */
	.pr-hero { padding-top: 0 !important; }
	.pr-hero__grid { row-gap: var(--wp--preset--spacing--xl); }
	.pr-hero__grid > .wp-block-column:has( .pr-hero__beeld ) { order: -1; }
	.pr-hero__beeld {
		margin-inline: calc( var(--wp--style--root--padding-left) * -1 ) calc( var(--wp--style--root--padding-right) * -1 );
		border-radius: 0;
		box-shadow: none;
	}
	.pr-hero__beeld img { aspect-ratio: 16 / 9; }

	.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); }
}

/* Op een telefoon in portretstand 4:3; 16:9 is daar te smal voor een portret. */
@media ( max-width: 600px ) {
	.pr-hero__beeld img { aspect-ratio: 4 / 3; }
}

/* ---------- witruimte op de telefoon ----------
   Een sectie met het crème verloop gevolgd door het slotblok: dat verloop
   eindigt op vrijwel dezelfde kleur als het slotblok begint, dus 120
   onderpadding plus 120 bovenpadding leest als 240 px leegte zonder overgang
   (Inspiratie, Wat ik doe). Hetzelfde bij een wit vlak gevolgd door het
   crème verloop, want dat begint met wit (Hoorn, Heerhugowaard). De
   onderpadding staat inline op het blok, dus alleen !important wint. */
@media ( max-width: 781px ) {
	.pr-main .has-surface-creme-gradient-background:has( + .pr-slot ),
	.pr-main .has-white-background-color:has( + .has-surface-creme-gradient-background ) { padding-bottom: var(--wp--preset--spacing--xl) !important; }

	/* Doorsturen: de twee knoppen gestapeld op volle breedte en even lang,
	   zoals elke knoppenrij op mobiel (huisregel). */
	.pr-doorsturen__links { flex-direction: column; }
	.pr-doorsturen__link { display: block; text-align: center; }
}

/* ---------- 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.webp" ) 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); }
/* Bedrag rechts op de regel van de naam: het visuele anker van de regel.
   Stond eerst achteraan de zin, na een em-dash. Het bedrag is het tweede
   vetgedrukte stuk, geen span met een klasse: zo blijft het lijstitem gewone
   blokinhoud die Rita in de editor zonder melding kan bewerken. */
.pr-dienst__vormen li > strong:nth-of-type(2) {
	float: right;
	margin-inline-start: var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* ---------- 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); }
/* De hele kaart is klikbaar: de link "Bekijk …" is over de kaart gespannen,
   zodat er één link per kaart blijft en je op de telefoon niet precies op
   die regel hoeft te tikken. */
.pr-plaats { position: relative; transition: transform .2s ease; }
.pr-plaats .pr-verder a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.pr-plaats:hover { transform: translateY(-2px); }
.pr-plaats:focus-within { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.pr-plaats .pr-verder a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
	.pr-plaats { transition: none; }
	.pr-plaats:hover { transform: none; }
}
/* Op de telefoon staan de vier kaarten onder elkaar; met 24px tussen naam,
   omschrijving en link was elk bijna 200px hoog voor drie korte regels. */
@media (max-width: 781px) {
	.pr-plaats > * + * { margin-block-start: var(--wp--preset--spacing--xs); }
	.pr-plaats h3 { margin-bottom: 0; }
	.pr-plaats > p:last-child { padding-top: var(--wp--preset--spacing--xs); }
}
.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); }

/* ---------- opleidingen (Over Rita) ----------
   Naam vet op de eerste regel, details eronder. Stond eerst op één regel met
   een em-dash ertussen; op de telefoon brak het jaartal dan los af. */
.pr-opleiding__lijst li { margin-block-end: var(--wp--preset--spacing--s); line-height: 1.5; }
.pr-opleiding__lijst li:last-child { margin-block-end: 0; }
.pr-opleiding__lijst li strong { color: var(--wp--preset--color--ink); }

/* ---------- zoekresultaten ----------
   Tekstkaarten in de stijl van het artikeloverzicht, maar zonder beeld: de
   meeste treffers zijn pagina's, en die hebben geen uitgelichte afbeelding.
   Eén kolom op leesbreedte; de titel-link is over de hele kaart gespannen,
   dus de kaart is overal klikbaar en er blijft één link per treffer. */
.pr-zoekresultaten .pr-resultaten {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--m);
	max-width: 46rem;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}
.pr-zoekresultaten .pr-resultaten > li {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--l);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--kaart);
	transition: border-color .2s ease, transform .2s ease;
}
.pr-zoekresultaten .pr-resultaten > li:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}
.pr-zoekresultaten .pr-resultaten > li:focus-within {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
.pr-zoekresultaten .wp-block-post-title {
	margin: 0;
	padding-inline: 0;
}
.pr-zoekresultaten .wp-block-post-title a:focus-visible { outline: none; }
.pr-zoekresultaten .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.pr-zoekresultaten .wp-block-post-excerpt {
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding-inline: 0;
}
.pr-zoekresultaten .wp-block-post-excerpt__excerpt { margin: 0; }
@media (max-width: 600px) {
	.pr-zoekresultaten .pr-resultaten > li { padding: var(--wp--preset--spacing--m); }
}
@media (prefers-reduced-motion: reduce) {
	.pr-zoekresultaten .pr-resultaten > li { transition: none; }
	.pr-zoekresultaten .pr-resultaten > li:hover { transform: none; }
}

/* Paginering: cijfers als rondjes, de huidige pagina in navy. */
.pr-paginering {
	gap: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
}
.pr-paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.pr-paginering a.page-numbers:hover { background: var(--wp--preset--color--sand); }
.pr-paginering .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.pr-paginering .wp-block-query-pagination-previous,
.pr-paginering .wp-block-query-pagination-next {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- 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);
}

/* De hoogte moet meeschalen met de breedte, anders wordt de uitsnede op een
   breed scherm onbruikbaar. Het blok heeft van core een vaste `min-height:520px`
   inline staan: op 1920 is het vak dan 3,7:1 terwijl de foto 3:2 is, dus er
   valt 60% van de hoogte weg en precies daar staat Rita's hoofd. Op een iPad
   (768 breed) valt dat niet op, want daar is het vak bijna even hoog als de
   foto. Gemeld door Rita op 02-09-2026, nagemeten op 1920 en 2560.

   Een inline stijl is alleen met !important te overrulen. Dat kost haar de
   mogelijkheid om de hoogte in de editor te wijzigen; de foto en de dekking
   wisselen, waar dit blok voor bedoeld is, blijft gewoon werken. */
.pr-citaat--beeld {
	min-height: clamp( 420px, 32vw, 700px ) !important;
}

/* Zij staat in beide foto's in de bovenste helft. Met het standaard middelpunt
   snijdt een brede uitsnede haar hoofd eraf, dus het venster schuift omhoog.
   28% houdt op elke gemeten breedte lucht boven haar hoofd. */
.pr-citaat--beeld .wp-block-cover__image-background {
	object-position: 50% 28%;
}
.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 !important; }
}

/* ---------- 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: 1099px) {

	.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); }

/* Klikvlak van minimaal 24px (WCAG 2.5.8) voor de losse links: het
   kruimelpad en "Lees verder"/"Bekijk …" onder de kaarten. Ze waren 20 tot
   22px hoog; gevonden door de UI-doorloop van 06-10-2026. */
.pr-kruimels a,
.pr-verder a {
	display: inline-block;
	padding-block: 4px;
}

/* Outline-knop even hoog als de gevulde knop. Core geeft de outline-stijl
   een eigen, kleinere padding die die uit theme.json overschrijft: naast
   elkaar stond hij 47 px hoog tegen 56 px. Hier dezelfde maat als de
   gevulde knop, min de 2px rand. Alleen in main: de kop-CTA houdt zijn
   eigen, compacte maat. */
.pr-main .wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 14px 28px;
}

/* ---------- zoekveld (404 en zoekresultaten) ----------
   Core tekent een hoekig vak met een grijze rand over de volle breedte; dat
   botst met de pilvormige knoppen. Nu een witte pil in de lijnkleur, met de
   knop erin, op leesbreedte gecentreerd. */
.pr-zoekveld {
	max-width: 34rem;
	margin-inline: auto;
}
.pr-zoekveld .wp-block-search__inside-wrapper {
	padding: 5px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--custom--shadow--kaart);
}
.pr-zoekveld .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--apricot);
}
.pr-zoekveld .wp-block-search__input {
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--m);
}
.pr-zoekveld .wp-block-search__input::placeholder { color: var(--wp--preset--color--muted); }
.pr-zoekveld .wp-block-search__input:focus { outline: none; }
.pr-zoekveld .wp-block-search__button {
	margin-left: 0;
	padding: 12px 26px;
}

/* 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;
}
/* Zelfde maat als de blokknoppen (theme.json: 16/30px, maat S); de UI-doorloop
   vond hem als enige variant op 16px en 55px hoog. */
.pr-formulier__knop {
	padding: 16px 30px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	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; }

/* ---------- contactkaarten ----------
   Het nummer, het adres en de agendalink zijn de inhoud van de kaart, niet
   een bijzin. Ze stonden als gewone link met een klikvlak van 20px hoog; nu
   in de kopletter met een klikvlak van 44px. Op desktop blijft de maat klein,
   want in een kaart van een kwart breed brak het mailadres anders af. */
.pr-contact .pr-kaart p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-underline-offset: 4px;
}

@media (max-width: 781px) {
	/* Op de telefoon staan de vier kaarten onder elkaar; met 24px tussen kop,
	   link en uitleg werd elke kaart onnodig lang en vielen de delen uit
	   elkaar. */
	.pr-contact .pr-kaart p > a:only-child { font-size: var(--wp--preset--font-size--m); }
	.pr-contact .pr-kaart > * + * { margin-block-start: var(--wp--preset--spacing--xs); }
	.pr-contact .pr-kaart > p + p { margin-block-start: var(--wp--preset--spacing--s); }

	/* Verstuur op volle breedte, zoals elke knop op mobiel. */
	.pr-formulier__knop { width: 100%; }
}
.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; }
/* Knop in de privacyverklaring om de keuze te wijzigen: oogt als een link,
   met een klikvlak van 44px. */
.pr-toestemming__wijzig {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}
.pr-toestemming__wijzig:hover { color: var(--wp--preset--color--accent); }
.pr-toestemming__wijzig:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.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 ) );
	}
}

/* Op de telefoon onder het kopbeeld 48 in plaats van 80; 80 leest daar als
   een gat tussen de foto en wat erop volgt. */
@media (max-width: 781px) {
	.pr-main .pr-kopbeeld__vak { margin-block-end: var(--wp--preset--spacing--xl); }
}

/* ---------- 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. 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.

   De grens is opnieuw gemeten op 03-09-2026, nadat Bijeenkomsten erbij kwam:
   op 1060 breekt het menu naar twee regels, op 1090 past het op één. De
   overlay loopt daarom door tot 1099, met marge voor andere lettertype-
   rendering. Komt er ooit nog een menu-item bij, dan opnieuw meten. */
@media (min-width: 600px) and (max-width: 1099px) {
	.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: 1099px) {
	/* 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; }
}