/*
 * Vorm van Papendorp Community. Kleuren en fonts komen uit theme.json (var(--wp--preset--...)).
 * Huisstijl van papendorp.nl (gemeten 13 okt): Roboto Slab Light voor koppen, Roboto, hoofdletters met spatiëring
 * voor menu, knoppen en labels, rechte hoeken, wit met warmwitte en nachtblauwe vlakken. Staalblauw en groen uit het logo.
 * Geen kaartjes: lijnen, vlakken en de datum dragen de vorm.
 */

:root {
	--pd-lijn: color-mix(in srgb, var(--wp--preset--color--antraciet) 18%, transparent);
	--pd-lijn-sterk: var(--wp--preset--color--antraciet);
	--pd-ritme: clamp(4rem, 10vw, 8rem);
	--pd-radius: 0;
	--pd-hoofdletters: 0.1em;
	--pd-whatsapp: #2f6240; /* Donkergroen voor alles van WhatsApp: knoppen en de zwevende knop. Het groen van de illustraties, niet het felle logogroen. */
}

body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
img { height: auto; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--wp--preset--color--oranje); outline-offset: 2px; }

/* Knoppen: één vorm, overal. */
.pd-knop,
.wp-element-button {
	box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
	min-height: 3rem; padding: 0 1.5rem; border: 0; border-radius: var(--pd-radius);
	background: var(--wp--preset--color--oranje); color: var(--wp--preset--color--antraciet);
	font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 0.875rem; line-height: 1.2;
	text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); text-decoration: none; cursor: pointer;
}
.pd-knop:hover,
.wp-element-button:hover { background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--wit); }
.is-style-outline .wp-element-button,
.pd-knop--rustig { background: transparent; box-shadow: inset 0 0 0 2px currentColor; color: inherit; }
.is-style-outline .wp-element-button:hover,
.pd-knop--rustig:hover { background: var(--wp--preset--color--antraciet); color: var(--wp--preset--color--wit); box-shadow: none; }

/* Doelgroeplabel: het eerste wat je leest bij een activiteit. */
.pd-label {
	display: inline-block; margin: 0; padding: 0.2rem 0.5rem;
	background: var(--wp--preset--color--blauw-licht); color: var(--wp--preset--color--antraciet);
	font-size: 0.75rem; font-weight: 500; line-height: 1.4; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters);
}

.pd-lead { font-size: var(--wp--preset--font-size--groot); font-weight: 300; line-height: 1.55; max-width: 38rem; }
.pd-kruimel { margin: 0; font-size: var(--wp--preset--font-size--klein); }
.pd-kruimel a { text-decoration: none; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); font-size: 0.8125rem; }
.pd-kruimel a::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.45em; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(45deg) translateY(-0.1em); }
.pd-verder { margin-top: var(--wp--preset--spacing--40); font-weight: 600; }

/* ---------- Kop ---------- */
.pd-kop { background: var(--wp--preset--color--wit); border-bottom: 1px solid var(--pd-lijn); padding-block: 0.75rem; position: relative; z-index: 20; }
.pd-kop__rij { gap: var(--wp--preset--spacing--30); }
.pd-merk { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--wp--preset--color--antraciet); text-decoration: none; }
.pd-merk__beeld { width: auto; height: 2.75rem; }
.pd-merk__tekst { display: flex; flex-direction: column; line-height: 1; }
.pd-merk__naam { display: block; width: auto; height: 1.6rem; margin-top: 0.3rem; }
.pd-merk__sub { padding-bottom: 0.25rem; border-bottom: 1px solid currentColor; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.pd-kop__nav { gap: var(--wp--preset--spacing--40); align-items: center; }
.pd-kop__knop .wp-element-button { min-height: 2.5rem; padding: 0 1rem; font-size: 0.8125rem; }
@media (max-width: 47.99rem) {
	.pd-kop__knop { display: none; }
	.pd-merk__beeld { height: 2.25rem; }
}

/* ---------- Voet ---------- */
.pd-voet { margin-top: 0; padding-block: var(--pd-ritme) var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--klein); }
.pd-voet a { color: inherit; text-underline-offset: 0.2em; }
.pd-voet a:hover { color: var(--wp--preset--color--oranje); }
.pd-voet__raster { display: grid; gap: var(--wp--preset--spacing--40); }
@media (min-width: 40rem) { .pd-voet__raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .pd-voet__raster { grid-template-columns: 1.3fr 0.8fr 1.4fr 1fr; } } /* Contact breed genoeg voor het e-mailadres. */
.pd-voet__beeld { width: 5.5rem; margin-bottom: 1rem; }
.pd-voet__merk p { max-width: 20rem; }
.pd-voet__kop { margin: 0 0 0.75rem; font-family: var(--wp--preset--font-family--body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--wp--preset--color--warmwit) 70%, transparent); }
.pd-voet__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
/* Telefoon: elke link in de voet en bij een contactpersoon een tikvlak van 44px, zonder dat ze elkaar overlappen (24 okt). */
@media (max-width: 47.99rem) {
	.pd-voet__lijst { gap: 0 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Twee kolommen: de voet was 1157px hoog. */
	.pd-voet__lijst a { display: inline-block; padding-block: 0.8rem; }
	.pd-contact__links a { min-height: 2.75rem; }
}
.pd-voet__onder { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--warmwit) 20%, transparent); }

/* ---------- Pagina's ---------- */
.pd-pagina, .pd-archief { padding-block: var(--wp--preset--spacing--50) var(--pd-ritme); }
.pd-archief__kop { margin-bottom: var(--wp--preset--spacing--40); }
.pd-archief__kop h1 { margin: 0 0 0.5rem; }
.pd-archief__kop .pd-lead { margin: 0; }
.pd-pagina > h1 { margin-bottom: var(--wp--preset--spacing--40); }

/* Secties op de homepage en Doe mee: elke sectie is een vlak of een lijn, nooit een kaart. */
.pd-sectie { padding-block: var(--pd-ritme); }
.pd-sectie > h2:first-child, .pd-sectie__kop h2 { margin-top: 0; }
.pd-sectie__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem; margin-bottom: var(--wp--preset--spacing--40); }
.pd-sectie__kop h2 { margin: 0; }
.pd-sectie__kop p { margin: 0; font-weight: 600; }
.pd-vlak--donker { background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--warmwit); }
.pd-vlak--warm { background: var(--wp--preset--color--warmwit); }
.pd-vlak--donker a:not(.wp-element-button):not(.pd-knop) { color: inherit; }
.pd-vlak--blauw { background: var(--wp--preset--color--blauw-licht); }

/* Opening van de homepage: foto over de volle breedte zoals op papendorp.nl, een wit vlak met de H1 schuift eroverheen. */
.pd-opening { --pd-rand: var(--wp--preset--spacing--40); container-type: inline-size; display: grid; grid-template-columns: var(--pd-rand) 1fr var(--pd-rand); margin-block-start: 0 !important; }
@media (min-width: 60rem) { .pd-opening { grid-template-columns: 1fr min(72rem, calc(100% - 2 * var(--pd-rand))) 1fr; } }
.pd-opening__foto { grid-column: 1 / -1; grid-row: 1; margin: 0; position: relative; }
.pd-opening__foto img { display: block; width: 100%; height: clamp(15rem, 44vh, 34rem); object-fit: cover; object-position: 55% 22%; }
.pd-opening__foto figcaption { position: absolute; right: 0.5rem; bottom: 0.5rem; margin: 0; padding: 0.1rem 0.45rem; background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--warmwit); font-size: 0.75rem; }
.pd-opening .pd-volgende { grid-column: 2; grid-row: 1; align-self: start; justify-self: start; margin-top: var(--wp--preset--spacing--40); z-index: 1; }
.pd-opening__paneel { grid-column: 2; grid-row: 2; position: relative; z-index: 1; padding-top: var(--wp--preset--spacing--40); }
/* Telefoon en tablet: het label onder de foto, niet over de gezichten heen. */
@media (max-width: 59.99rem) {
	.pd-opening .pd-volgende { grid-row: 2; margin-top: var(--wp--preset--spacing--30); }
	.pd-opening__paneel { grid-row: 3; padding-top: var(--wp--preset--spacing--30); }
}
@media (min-width: 60rem) {
	.pd-opening .pd-volgende { justify-self: end; }
	/* Het witte vlak loopt vanaf de linker schermrand, de tekst staat gelijk met de rest van de pagina. */
	.pd-opening__paneel { grid-column: 1 / 3; justify-self: start; width: calc(max(var(--pd-rand), (100cqw - 72rem) / 2) + 46rem); margin-top: -5.5rem; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0 max(var(--pd-rand), (100cqw - 72rem) / 2); background: var(--wp--preset--color--wit); box-sizing: border-box; }
}
.pd-opening h1 { margin: 0 0 1rem; font-size: clamp(2.25rem, 4.4cqi, 3.75rem); } /* cqi: de breedte van de opening, niet van het venster. */
.pd-opening .pd-lead { max-width: 40rem; }
.pd-opening .pd-lead { margin: 0 0 1.75rem; }
.pd-opening .wp-block-buttons { gap: 1rem; }

/* Volgende activiteit: twee labels naast elkaar, zoals de plaatsnamen op de kaart van papendorp.nl. */
.pd-volgende { display: inline-flex; flex-wrap: wrap; max-width: 100%; text-decoration: none; color: var(--wp--preset--color--antraciet); font-size: 0.875rem; }
/* Staalblauw iets dieper (een kwart nacht erdoor): wit op puur staalblauw haalde 3,5:1, nu 4,9:1 (axe, 20 okt). */
.pd-volgende__label { padding: 0.45rem 0.7rem; background: color-mix(in srgb, var(--wp--preset--color--staalblauw) 75%, var(--wp--preset--color--nacht)); color: var(--wp--preset--color--wit); font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); font-size: 0.75rem; display: flex; align-items: center; }
.pd-volgende__tekst { padding: 0.45rem 0.8rem; background: var(--wp--preset--color--wit); }
.pd-volgende__tekst strong { font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); font-size: 0.75rem; margin-right: 0.4rem; }
.pd-volgende:hover .pd-volgende__tekst { text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 2px; }

/* Foto naast tekst. */
.pd-foto { margin: 0; }
.pd-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pd-foto figcaption, .pd-bijschrift { margin-top: 0.5rem; font-size: 0.875rem; }
.entry-content .pd-bijschrift, .pd-evenement__hoofd .pd-bijschrift { margin-top: 1.5rem; } /* "Bron: papendorp.nl" niet tegen de lijst erboven. */

.pd-tekstlink a, a.pd-tekstlink { font-weight: 700; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
/* Hover zoals elders op de site: een dikkere streep, de tekst blijft antraciet (was oranje-donker uit theme.json; audit F113). */
.pd-tekstlink a:hover, a.pd-tekstlink:hover { color: inherit; text-decoration-thickness: 3px; }

/* Op de hoogte: WhatsApp en nieuwsbrief naast elkaar op het donkere vlak. */
.pd-op-de-hoogte { display: grid; gap: var(--wp--preset--spacing--50); }
@media (min-width: 56rem) { .pd-op-de-hoogte { grid-template-columns: 7fr 5fr; } }
.pd-op-de-hoogte > * + * { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--warmwit) 25%, transparent); padding-top: var(--wp--preset--spacing--50); }
@media (min-width: 56rem) { .pd-op-de-hoogte > * + * { border-top: 0; padding-top: 0; border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--warmwit) 25%, transparent); padding-left: var(--wp--preset--spacing--50); } }
.pd-op-de-hoogte h2 { margin-top: 0; }

/* Uitgelicht uit de terugblik: groot beeld, het verhaal in een vlak eroverheen. */
.pd-uitgelicht { display: grid; align-items: end; }
.pd-uitgelicht > * { grid-area: 1 / 1; }
.pd-uitgelicht__beeld { margin: 0; }
.pd-uitgelicht__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--pd-radius); }
.pd-uitgelicht__tekst { position: relative; margin: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); max-width: 30rem; padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--warmwit); color: var(--wp--preset--color--warmwit); border-radius: var(--pd-radius); }
.pd-uitgelicht__tekst a { color: inherit; }
.pd-uitgelicht__tekst h2 { margin: 0.5rem 0 0.75rem; font-size: var(--wp--preset--font-size--groot); }
.pd-uitgelicht__tekst p { margin: 0; }
.pd-uitgelicht__tekst p + p { margin-top: 0.75rem; }
.pd-cijfers { padding-top: 0.75rem; border-top: 1px solid var(--pd-lijn); font-size: var(--wp--preset--font-size--klein); }
.pd-cijfer { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 2.5rem; line-height: 1.1; color: var(--wp--preset--color--antraciet); }
.pd-cijfers .pd-cijfer + .pd-cijfer { margin-top: 0.25rem; }
/* Tot en met tablet gestapeld: daar bedekt het tekstvlak anders bijna de hele foto (audit F026). */
@media (max-width: 59.99rem) {
	.pd-uitgelicht > * { grid-area: auto; }
	.pd-uitgelicht__beeld img { aspect-ratio: 4 / 3; border-radius: var(--pd-radius) var(--pd-radius) 0 0; }
	.pd-uitgelicht__tekst { margin: 0; max-width: none; border-radius: 0 0 var(--pd-radius) var(--pd-radius); }
}

/* Doe mee: tekst en contactpersoon naast elkaar. */
.pd-tweeluik { display: grid; gap: var(--wp--preset--spacing--50); align-items: start; }
@media (min-width: 56rem) { .pd-tweeluik { grid-template-columns: 7fr 5fr; } }
.pd-tweeluik h2 { margin-top: 0; }
/* Foto rechts begint op de hoogte van de hoofdletters van de kop links (prikbord 20 okt): geen blokmarge boven de
   kolommen en de kop zonder lucht boven de hoofdletters. Browsers zonder text-box: de foto een fractie lager. */
.pd-tweeluik > * { margin-block: 0 !important; }
.pd-tweeluik > .wp-block-group:first-child > h2:first-child { text-box: trim-start cap alphabetic; }
@supports not (text-box: trim-start cap alphabetic) {
	@media (min-width: 56rem) { .pd-tweeluik > :not(:first-child) { margin-top: 0.6rem !important; } }
}
.pd-tweeluik .wp-block-group > h2:not(:first-child) { margin-top: 2.25rem; } /* Tweede kop in dezelfde kolom (Over de community). */
/* Na de intro begint een nieuw deel (Doe mee): evenveel lucht als tussen de andere delen, anders plakt de kop aan de lead. */
.pd-lead + .pd-tweeluik { margin-block-start: var(--wp--preset--spacing--60); }
.pd-opsomming { list-style: none; padding: 0; margin: 1.5rem 0; border-top: 1px solid var(--pd-lijn); }
.pd-opsomming li { padding: 0.85rem 0; border-bottom: 1px solid var(--pd-lijn); }
.pd-opsomming strong { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: var(--wp--preset--font-size--groot); }

/* ---------- Agenda: de datum draagt. ---------- */
.pd-agenda__lijst { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--pd-lijn-sterk); }
.pd-agenda__item {
	position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.5rem var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) 0; border-bottom: 1px solid var(--pd-lijn);
}
.pd-agenda__datum { display: flex; flex-direction: column; font-family: var(--wp--preset--font-family--display); line-height: 1; }
.pd-agenda__dag { font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 300; letter-spacing: -0.01em; }
.pd-agenda__maand { margin-top: 0.4rem; font-family: var(--wp--preset--font-family--body); font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-agenda__jaar { margin-top: 0.2rem; font-size: 0.8125rem; }
.pd-agenda__tekst { min-width: 0; }
.pd-agenda__tekst > * { margin: 0; }
.pd-agenda__tekst > * + * { margin-top: 0.4rem; }
.pd-agenda__titel { font-size: var(--wp--preset--font-size--groot); font-weight: 400; line-height: 1.25; }
.pd-agenda__groep { margin: var(--wp--preset--spacing--50) 0 0; padding-bottom: 0.6rem; font-family: var(--wp--preset--font-family--body); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-agenda__groep:first-child { margin-top: 0; }
.pd-agenda__afstand { font-weight: 500; color: var(--wp--preset--color--oranje-donker); }
.pd-agenda__titel a { text-decoration: none; }
.pd-agenda__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Hele rij klikbaar, één link voor schermlezers. */
.pd-agenda__item:hover .pd-agenda__titel a { text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.pd-agenda__meta { font-size: var(--wp--preset--font-size--klein); font-weight: 400; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.pd-agenda__intro { max-width: 36rem; line-height: 1.55; }
/* Op de regel van het label, even hoog (rand van 2px telt mee in de padding). */
.pd-agenda__tekst > .pd-label:has(+ .pd-agenda__status) { vertical-align: top; }
.pd-agenda__tekst > .pd-label + .pd-agenda__status { margin: 0 0 0 0.4rem; padding-block: calc(0.2rem - 2px); line-height: 1.4; vertical-align: top; }
.pd-agenda__status { display: inline-block; padding: 0.1rem 0.5rem; border: 2px solid currentColor; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-agenda__item.is-geannuleerd .pd-agenda__titel { text-decoration: line-through; }
.pd-agenda__beeld { display: none; }
.pd-agenda__knop { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; background: var(--wp--preset--color--oranje); font-weight: 500; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-agenda--terugblik .pd-agenda__knop,
.pd-agenda__knop.is-rustig,
.pd-agenda__item[class*=" is-"] .pd-agenda__knop { background: transparent; box-shadow: inset 0 0 0 2px var(--pd-lijn-sterk); }
.pd-agenda__item:hover .pd-agenda__knop { background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--wit); box-shadow: none; }
/* Terugblik: twaalf omlijnde knoppen onder elkaar is te veel. Een onderstreepte link, de titel is al de hele rij. */
.pd-agenda--terugblik .pd-agenda__knop, .pd-agenda--terugblik .pd-agenda__item:hover .pd-agenda__knop { min-height: 0; padding: 0; background: none; box-shadow: none; color: inherit; text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
@media (min-width: 48rem) {
	.pd-agenda__item { grid-template-columns: 6rem 1fr auto; align-items: start; padding-block: var(--wp--preset--spacing--40); }
	.pd-agenda__item.heeft-beeld { grid-template-columns: 6rem 1fr 13rem; }
	.pd-agenda__beeld { display: block; grid-column: 3; grid-row: 1 / span 2; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pd-radius); }
	.pd-agenda__knop { grid-column: 3; grid-row: 1; justify-self: end; }
	.pd-agenda__item.heeft-beeld .pd-agenda__knop { grid-column: 2; grid-row: 2; justify-self: start; }
	/* Een activiteit zonder foto tussen activiteiten met foto (ook in een andere maand): de knop ook onder de tekst, niet
	   als enige rechts (20 okt). */
	.pd-agenda:has(.heeft-beeld) .pd-agenda__item:not(.heeft-beeld) .pd-agenda__knop { grid-column: 2; grid-row: 2; align-self: start; justify-self: start; }
}
.pd-agenda__aanvulling { display: grid; gap: 0.25rem; padding: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--30); background: var(--wp--preset--color--blauw-licht); border-radius: var(--pd-radius); }
.pd-agenda__aanvulling p { margin: 0; }
.pd-agenda__aanvulling a { font-weight: 700; }
.pd-agenda__leeg { padding: var(--wp--preset--spacing--40) 0; border-top: 3px solid var(--pd-lijn-sterk); }

/* ---------- Evenementpagina ---------- */
.pd-evenement { padding-block: var(--wp--preset--spacing--40) var(--pd-ritme); }
.pd-evenement__kop { margin-bottom: var(--wp--preset--spacing--40); }
.pd-evenement__kop > * { max-width: 48rem; }
.pd-evenement__kop > * { margin-block: 0; }
.pd-evenement__kop > * + * { margin-top: 1.1rem; }
.pd-evenement__kop .pd-label { margin-top: var(--wp--preset--spacing--40); }
.pd-evenement__kop h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.pd-evenement__intro { font-size: var(--wp--preset--font-size--groot); font-weight: 300; line-height: 1.55; }
.pd-evenement__raster { display: grid; gap: var(--wp--preset--spacing--40); }
@media (min-width: 60rem) {
	.pd-evenement__raster { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--wp--preset--spacing--50); align-items: start; }
	.pd-evenement__zij { grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; }
	.pd-evenement__hoofd { grid-column: 1; grid-row: 1; }
}
.pd-evenement__hoofd > * { margin-block: 0; }
.pd-evenement__hoofd > * + * { margin-top: var(--wp--preset--spacing--50); }
.pd-evenement__beeld img { border-radius: var(--pd-radius); }
.pd-evenement__tekst { max-width: 40rem; }
.pd-evenement__tekst > :first-child { margin-top: 0; }
.pd-evenement__meer { margin-top: var(--pd-ritme); }

.pd-info { background: var(--wp--preset--color--warmwit); padding: var(--wp--preset--spacing--40); }
.pd-info__status { margin: 0 0 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); font-size: 0.8125rem; background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--wit); padding: 0.5rem 0.75rem; border-radius: var(--pd-radius); }
.pd-info__lijst { display: grid; gap: 0; margin: 0; }
.pd-info__lijst > div { display: grid; grid-template-columns: 7.25rem 1fr; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--pd-lijn); }
.pd-info__lijst > div:first-child { padding-top: 0; }
.pd-info__lijst dt { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); padding-top: 0.15rem; }
.pd-info__lijst dt .pd-icoon { font-size: 1.125rem; flex: none; color: var(--wp--preset--color--oranje-donker); }
.pd-info__lijst dd { margin: 0; line-height: 1.45; }
.pd-info__actie { margin: 1.25rem 0 0; }
.pd-info__knop { width: 100%; }
/* Op de telefoon staat de aanmeldknop onderin het scherm tot het formulier in beeld is. */
@media (max-width: 59.99rem) {
	/* Vaste knop: eigen element (.pd-vastknop, vorm in assets/css/evenement.css); de knop in het vak blijft staan. */
	body:has(.pd-vastknop) .pd-voet { padding-bottom: 6rem; }
}

/* ---------- Bijstellingen na de eerste visuele controle ---------- */
.pd-kop .pd-kop__knop { display: none; }
@media (min-width: 48rem) { .pd-kop .pd-kop__knop { display: block; } }
/* Twee lichte secties na elkaar: één keer ruimte, niet twee. */
.pd-sectie:not([class*="pd-vlak"]) + .pd-sectie:not([class*="pd-vlak"]) { padding-top: 0; }
/* Formulier op het donkere vlak: lichte labels, velden blijven wit met donkere tekst. */
.pd-vlak--donker .pd-form { color: var(--wp--preset--color--warmwit); --pd-form-fout: #ffb4ae; }
/* Fotograaf bij het uitgelichte beeld: rechtsboven op de foto, niet onder het tekstvlak. */
.pd-uitgelicht__beeld { position: relative; }
.pd-uitgelicht__beeld figcaption { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; padding: 0.15rem 0.5rem; background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--warmwit); font-size: 0.75rem; }

/* Binnen een tekstkolom staat de lead gewoon links, niet ingesprongen. */
.is-layout-constrained > .pd-lead { max-width: var(--wp--style--global--content-size); }
.pd-doe-mee { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--50); border-top: 3px solid var(--pd-lijn-sterk); }

/* ---------- Ronde 3: typografie, iconen, zwevende WhatsApp-knop ---------- */

/* Lopende tekst ruim, alles wat UI is compacter. Maat van een regel: hooguit ~70 tekens. */
.pd-evenement__tekst, .pd-pagina .entry-content > p, .pd-pagina .entry-content li { line-height: 1.65; }
.pd-evenement__tekst p { margin-block: 0 1rem; }
.pd-evenement__tekst { max-width: 38rem; }
.pd-lead, .pd-evenement__intro { line-height: 1.5; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Iconen (Phosphor regular): volgen de tekstkleur, staan op de tekstlijn. */
.pd-icoon { flex: none; width: 1em; height: 1em; vertical-align: -0.125em; }
.pd-knop--icoon { gap: 0.6rem; }
.pd-knop--icoon .pd-icoon { font-size: 1.25rem; }
.pd-agenda__soort { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; }
.pd-agenda__soort .pd-icoon { font-size: 1.05rem; color: var(--wp--preset--color--oranje-donker); }
.pd-contact__links a { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Zwevende WhatsApp-knop: donkergroen (--pd-whatsapp) met witte tekst en een gewoon wit icoon, zelfde kleur als de
   WhatsApp-knoppen in de pagina. Wit op dit groen haalt ruim 7:1. Verschijnt pas na de opening en zwaait één keer. */
.pd-zwevend { position: fixed; z-index: 40; right: 1.25rem; bottom: 1.25rem; opacity: 0; transform: translateY(0.75rem); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.pd-zwevend.is-zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
.pd-zwevend__knop {
	display: inline-flex; align-items: center; gap: 0.7rem; min-height: 3.25rem; padding: 0 1.25rem 0 1rem; border: 0;
	background: var(--pd-whatsapp); color: var(--wp--preset--color--wit);
	font: 600 0.8125rem/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: var(--pd-hoofdletters);
	text-decoration: none; cursor: pointer; box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--pd-whatsapp) 35%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pd-zwevend__knop .pd-icoon { font-size: 1.5rem; }
.pd-zwevend__knop:hover, .pd-zwevend__knop:focus-visible, .pd-zwevend__knop:has(+ .pd-zwevend__paneel:popover-open) {
	transform: translateY(-2px); box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--pd-whatsapp) 45%, transparent);
}
.pd-zwevend__knop:focus-visible { outline: 3px solid var(--wp--preset--color--nacht); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
	.pd-zwevend.is-zichtbaar .pd-icoon { animation: pd-zwaai 0.9s ease-in-out 0.35s 1; }
}
@keyframes pd-zwaai { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } }
.pd-zwevend__knop--paneel { display: none; }
@media (min-width: 60rem) and (hover: hover) {
	.pd-zwevend__knop--direct { display: none; }
	.pd-zwevend__knop--paneel { display: inline-flex; }
}
/* Alleen het icoon, tenzij er naast de inhoud (72rem) plaats is voor de hele knop: anders ligt de tekst over foto's en regels. */
@media (max-width: 105.99rem) {
	.pd-zwevend { right: 1rem; bottom: 1rem; }
	.pd-zwevend__knop { width: 3.5rem; min-height: 3.5rem; padding: 0; justify-content: center; }
	.pd-zwevend__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	/* Wijs je hem aan (muis of Tab), dan zegt hij wat hij doet. Alleen dan: uit zichzelf ligt er nooit tekst over de pagina. */
	.pd-zwevend__knop:is(:hover, :focus-visible) .pd-zwevend__tekst {
		right: calc(100% + 0.6rem); top: 50%; width: auto; height: auto; clip-path: none; overflow: visible;
		padding: 0.55rem 0.8rem; transform: translateY(-50%); background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--wit);
		font-size: 0.75rem; box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--wp--preset--color--nacht) 25%, transparent);
	}
	.pd-zwevend__knop:has(+ .pd-zwevend__paneel:popover-open) .pd-zwevend__tekst { display: none; }
}
/* Geopend vanuit een andere WhatsApp-knop of de kopknop: site.js zet het paneel naast die knop (inline inset). */
.pd-zwevend__paneel { position: fixed; inset: auto 1.25rem 5.5rem auto; margin: 0; width: min(25rem, calc(100vw - 2.5rem)); max-height: calc(100vh - 7rem); overflow-y: auto; padding: 1.5rem; border: 0; background: var(--wp--preset--color--wit); color: var(--wp--preset--color--antraciet); box-shadow: 0 1rem 3rem color-mix(in srgb, var(--wp--preset--color--nacht) 25%, transparent); font-size: var(--wp--preset--font-size--klein); line-height: 1.5; }
.pd-zwevend__paneel p { margin: 0 0 0.75rem; }
.pd-zwevend__kop { font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; font-weight: 300; line-height: 1.25; padding-right: 2rem; }
.pd-zwevend__paneel { border-top: 4px solid var(--pd-whatsapp); pointer-events: auto; } /* Ook klikbaar als de zwevende knop zelf weg is (pointer-events erft). */
.pd-zwevend__paneel .pd-mensen { margin-bottom: 1.1rem; padding-right: 2.5rem; }
.pd-zwevend__paneel .pd-mensen__bij { margin: 0; }
.pd-zwevend__qr { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0 0.5rem; }
.pd-zwevend__qrvlak { flex: none; width: 8rem; padding: 0.4rem; background: var(--wp--preset--color--wit); outline: 1px solid var(--pd-lijn); }
.pd-zwevend__qrvlak svg { display: block; width: 100%; height: auto; }
.pd-zwevend__qr figcaption { font-size: 0.875rem; line-height: 1.45; }
.pd-zwevend__qr figcaption strong { display: block; margin-bottom: 0.3rem; font-size: 1rem; font-weight: 600; line-height: 1.3; } /* Scannen is de hoofdactie. */
.pd-zwevend__open { margin: 0 !important; }
.pd-zwevend__open a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; color: inherit; font-weight: 500; text-decoration-color: var(--pd-whatsapp); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.pd-zwevend__open .pd-icoon { font-size: 1.2rem; }
/* Vanuit de kopknop (site.js, is-beide): twee kopjes, WhatsApp en e-mail even zwaar. Anders alleen WhatsApp. */
.pd-zwevend__sub, .pd-zwevend__mail { display: none; }
.pd-zwevend__paneel.is-beide { border-top-color: var(--wp--preset--color--staalblauw); }
.pd-zwevend__paneel.is-beide .pd-zwevend__sub { display: block; margin: 0 0 0.35rem !important; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.pd-zwevend__paneel.is-beide .pd-zwevend__mail { display: block; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--pd-lijn); }
.pd-zwevend__mail p:last-child { margin: 0; }
.pd-zwevend__sluit { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; background: none; color: inherit; font-size: 1.25rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pd-zwevend { transition: none; } }
/* Infovak: label met icoon boven de waarde; leest sneller en de waarde krijgt de hele breedte. */
.pd-info__lijst > div { display: block; padding: 1rem 0; }
.pd-info__lijst dt { padding-top: 0; margin-bottom: 0.2rem; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 85%, transparent); }
.pd-info__lijst dd { padding-left: 1.625rem; font-size: 1.0625rem; }

.pd-agenda__groep span { margin-left: 0.75rem; font-weight: 400; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 75%, transparent); }

/* ---------- Ronde 4: roast-fixes ---------- */
/* Tekstpagina's (privacy, doe mee): kleinere tussenkoppen met lucht erboven, zodat de tekst de hoofdrol houdt. */
.pd-pagina .entry-content > h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin-top: var(--wp--preset--spacing--50); margin-bottom: 0.5rem; }
.pd-pagina .entry-content > h2 + * { margin-top: 0; }
.pd-contact__label { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }

/* Knoppen en links reageren rustig: alleen kleur en schaduw krijgen een overgang. */
.pd-knop, .wp-element-button, .pd-agenda__knop, .pd-form__knop { transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }

/* ---------- Beweging: uit de inhoud, alleen transform, nooit nodig om te lezen ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* Opening: de foto zakt terug naar ware grootte, het tekstvlak schuift erover, het nieuws komt binnen. */
	.pd-opening__foto { overflow: hidden; }
	.pd-opening__foto img { animation: pd-zak 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	.pd-opening__paneel { animation: pd-op 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
	.pd-opening .pd-volgende { animation: pd-binnen 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }

	@supports (animation-timeline: view()) {
		/* Agenda: elke activiteit komt licht omhoog als hij in beeld scrollt. Wat al in beeld staat, staat stil. */
		.pd-agenda__item { animation: pd-op linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
		/* Run in cijfers: de balken groeien uit tot hun echte lengte, de data wordt getekend. */
	}
}
@keyframes pd-zak { from { transform: scale(1.06); } }
@keyframes pd-op { from { transform: translateY(1.5rem); } }
@keyframes pd-binnen { from { transform: translateX(calc(100% + 2rem)); } }
.pd-opening { overflow-x: clip; }
/* Groepsfoto's: bredere uitsnede en bewuste focus, zodat er geen mensen aan de zijkant wegvallen. */
@media (min-width: 48rem) { .pd-agenda__beeld { aspect-ratio: 3 / 2; object-position: 50% 40%; } }
.pd-uitgelicht__beeld img { object-position: 50% 40%; }
@media (max-width: 59.99rem) { .pd-uitgelicht__beeld img { aspect-ratio: 3 / 2; } }

/* ---------- Ronde 4b: punten uit de roast ---------- */
/* Opening op desktop: de volgende activiteit vult de ruimte naast de H1, als blok met datum. */
@media (min-width: 60rem) {
	.pd-opening .pd-volgende { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; flex-direction: column; flex-wrap: nowrap; width: 18rem; margin-top: var(--wp--preset--spacing--50); }
	.pd-opening .pd-volgende__tekst { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.2rem; background: var(--wp--preset--color--warmwit); font-size: 1.0625rem; line-height: 1.35; }
	.pd-opening .pd-volgende__tekst strong { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 2.25rem; font-weight: 300; letter-spacing: 0; text-transform: none; line-height: 1; }
	@media (prefers-reduced-motion: no-preference) { .pd-opening .pd-volgende { animation-name: pd-op; } }
}


/* Terugblik: vast ritme. Knop altijd onder de tekst; op de telefoon de foto boven de titel. */
.pd-agenda--terugblik .pd-agenda__knop { grid-column: 2; grid-row: auto; justify-self: start; }
@media (max-width: 47.99rem) {
	.pd-agenda--terugblik .pd-agenda__beeld { display: block; grid-column: 1 / -1; grid-row: 1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; margin-bottom: 0.5rem; }
}
@media (min-width: 48rem) { .pd-agenda--terugblik .pd-agenda__item.heeft-beeld .pd-agenda__knop { grid-row: 2; } }

/* Sessiekeuze: directe, rustige bevestiging van je keuze. */

/* ---------- Diashow in de opening (galerij) ---------- */
.pd-opening .pd-diashow { display: grid !important; gap: 0 !important; flex-wrap: nowrap; margin: 0; padding: 0; }
.pd-diashow > .wp-block-image { grid-area: 1 / 1; width: 100% !important; margin: 0 !important; position: relative; opacity: 0; transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Langzaam overvloeien. */
.pd-diashow:not(.is-klaar) > .wp-block-image:first-child { opacity: 1; } /* Zonder script: de eerste foto. */
.pd-diashow.is-klaar > .wp-block-image { opacity: 0; }
.pd-diashow.is-klaar > .wp-block-image.is-actief { opacity: 1; z-index: 1; }
.pd-diashow { --pd-held-h: clamp(15rem, 44vh, 34rem); }
.pd-diashow > .wp-block-image { container-type: inline-size; }
.pd-diashow > .wp-block-image img { display: block; width: 100% !important; height: var(--pd-held-h) !important; object-fit: cover; object-position: 50% 30%; }
/* Met gemeten gezichten (blocks-home.php): het midden van de gezichten op 40% van de hoogte, dus boven het witte vlak.
   100cqw * ratio is de hoogte van de hele foto op deze breedte; de clamp houdt de foto binnen de rand. */
.pd-diashow > .wp-block-image img[style*="--pd-focus"] {
	object-position: 50% clamp(min(0px, var(--pd-held-h) - 100cqw * var(--pd-ratio)), 0.4 * var(--pd-held-h) - var(--pd-focus) * max(var(--pd-held-h), 100cqw * var(--pd-ratio)), 0px);
}
/* Bijschrift: klein label rechtsonder, zoals de fotocredit; de galerijverloop van WordPress eruit. */
.pd-diashow.wp-block-gallery > .wp-block-image figcaption.wp-element-caption {
	position: absolute; inset: auto 0.5rem 0.5rem auto; width: auto; max-width: calc(100% - 4.5rem); max-height: none; margin: 0; padding: 0.2rem 0.5rem;
	background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--warmwit); font-size: 0.75rem; line-height: 1.4; text-align: right; text-shadow: none; overflow: visible;
}
.pd-diashow figcaption a { color: inherit; text-underline-offset: 0.15em; }
.pd-diashow__knop { position: absolute; z-index: 2; left: 0.5rem; bottom: 0.5rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; padding: 0; background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--wit); cursor: pointer; }
.pd-diashow__knop svg { width: 1.1rem; height: 1.1rem; }
.pd-diashow__knop:hover { background: var(--wp--preset--color--oranje); color: var(--wp--preset--color--antraciet); }
@media (min-width: 60rem) { .pd-diashow__knop { left: auto; right: 0.5rem; bottom: auto; top: 0.5rem; } }
@media (prefers-reduced-motion: reduce) { .pd-diashow > .wp-block-image { transition: none; } }
.pd-diashow > .wp-block-image { display: block !important; } .pd-diashow > .wp-block-image img { flex: none !important; } /* Galerij-flex van WordPress uit: de foto houdt de hoogte van de opening. */
/* Focus per foto in de diashow: zitten de mensen onderin, kies dan "pd-focus-onder" als extra klasse op de afbeelding. */
.pd-diashow > .pd-focus-onder img { object-position: 50% 80%; }
.pd-diashow > .pd-focus-midden img { object-position: 50% 45%; }
.pd-diashow > .pd-focus-boven img { object-position: 50% 4%; } /* Gezichten bovenin (lopers): op brede schermen anders hoofden eraf. */

/* ---------- Menu met preview ---------- */
.pd-menu { display: flex; align-items: center; }
.pd-menu__lijst { display: none; list-style: none; margin: 0; padding: 0; gap: 1.75rem; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-menu__lijst a { text-decoration: none; padding-block: 0.5rem; }
.pd-menu__lijst a:hover, .pd-menu__lijst a[aria-current] { text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
.pd-menu__open, .pd-menu__sluit { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: inherit; font-size: 1.6rem; cursor: pointer; }
/* Zes menu-items (Blog en Over ons erbij, 23 okt) passen pas vanaf 70rem naast het logo en de knop; daaronder het
   paneel (hamburger). Bij 60rem schoof de pagina met zes items zijwaarts. */
@media (min-width: 70rem) { .pd-menu__lijst { display: flex; } .pd-menu__open { display: none; } }
.pd-menu__lijst a, .pd-kop__knop .wp-element-button { white-space: nowrap; }
.pd-menu__paneel { box-sizing: border-box; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 1rem var(--wp--preset--spacing--40) 2rem; border: 0; overflow-y: auto; background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--warmwit); }
.pd-menu__paneel::backdrop { background: var(--wp--preset--color--nacht); }
.pd-menu__sluit { margin-left: auto; color: var(--wp--preset--color--warmwit); }
.pd-menu__groot { list-style: none; margin: 1.5rem 0 2.5rem; padding: 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--warmwit) 20%, transparent); }
.pd-menu__groot li { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--warmwit) 20%, transparent); }
.pd-menu__groot a { display: grid; gap: 0.25rem; padding: 0.9rem 0; color: inherit; text-decoration: none; }
.pd-menu__label { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 2.25rem; line-height: 1.1; }
.pd-menu__groot a[aria-current] .pd-menu__label { color: var(--wp--preset--color--oranje); }
.pd-menu__preview { font-size: 0.875rem; color: color-mix(in srgb, var(--wp--preset--color--warmwit) 80%, transparent); }
/* Blijf op de hoogte direct onder de links: met zes items viel hij op de telefoon onder de vouw (revisie 24 okt). */
.pd-menu__hoogte { margin: 0 0 2rem; }
@media (max-height: 44rem) { .pd-menu__groot a { padding: 0.6rem 0; } .pd-menu__label { font-size: 1.75rem; } } /* Lage telefoon (iPhone SE). */
.pd-menu__paneel .pd-volgende { display: inline-flex; margin-bottom: 2rem; }
/* In het menu staat de oranje knop eronder; het label is daar een kopje, geen vlak, en de regel begint op de rand. */
.pd-menu__paneel .pd-volgende { flex-direction: column; gap: 0.3rem; }
.pd-menu__paneel .pd-volgende__label { padding: 0; background: none; color: var(--wp--preset--color--oranje); }
.pd-menu__paneel .pd-volgende__tekst { padding: 0; }
.pd-menu__park { font-size: var(--wp--preset--font-size--klein); }
.pd-menu__park a { color: inherit; }
@media (prefers-reduced-motion: no-preference) {
	.pd-menu__paneel:popover-open .pd-menu__groot li { animation: pd-op 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	.pd-menu__paneel:popover-open .pd-menu__groot li:nth-child(2) { animation-delay: 0.05s; }
	.pd-menu__paneel:popover-open .pd-menu__groot li:nth-child(3) { animation-delay: 0.1s; }
}

/* Kleine dingen met groot effect: zacht naar ankers springen (niet onder de kop), selectie in huisstijl. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 1.5rem; }
::selection { background: var(--wp--preset--color--oranje); color: var(--wp--preset--color--antraciet); }
.pd-sectie__kop-klein { margin: var(--wp--preset--spacing--50) 0 1rem; font-size: var(--wp--preset--font-size--groot); }


/* ---------- Papendorpse Run: drie getallen in een oranje band, meer niet ---------- */
/* In cijfers: lijnen, geen vlak (design.md). Drie gelijke kolommen over de hele breedte, op de telefoon rijen met het getal links. */
.pd-reeks { box-sizing: border-box; margin: clamp(1.5rem, 4vw, 3rem) auto var(--pd-ritme); color: var(--wp--preset--color--antraciet); }
.pd-reeks__kop { margin: 0 0 1.25rem; font-family: var(--wp--preset--font-family--body); font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-reeks__getallen { display: grid; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--pd-lijn-sterk); }
.pd-reeks__getallen li { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--pd-lijn); }
.pd-reeks__getallen strong { font-family: var(--wp--preset--font-family--display); font-size: 2.75rem; font-weight: 600; line-height: 1; color: var(--wp--preset--color--antraciet); }
.pd-reeks__getallen span { font-size: var(--wp--preset--font-size--normaal); line-height: 1.35; }
.pd-reeks__getallen a { display: contents; color: inherit; text-decoration: none; }
.pd-reeks__getallen a span { text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.pd-reeks__getallen a:hover span { color: var(--wp--preset--color--oranje-donker); }
@media (min-width: 48rem) {
	.pd-reeks__getallen { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--pd-lijn); }
	.pd-reeks__getallen li { grid-template-columns: none; align-content: start; gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 0; }
	.pd-reeks__getallen li + li { padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid var(--pd-lijn); }
	.pd-reeks__getallen strong { font-size: clamp(3.5rem, 6.5vw, 5.5rem); }
}
.pd-reeks__bron { margin: 1.25rem 0 0; font-size: 0.8125rem; }
.pd-reeks__bron a { color: inherit; }

/* ---------- Zoeken (papendorp/zoekresultaten) ---------- */
.pd-zoek__kop { margin-bottom: var(--wp--preset--spacing--30); }
.pd-zoek__formulier { max-width: 40rem; margin-bottom: var(--wp--preset--spacing--50); }
.pd-zoek__label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
.pd-zoek__rij { display: flex; gap: 0.5rem; }
.pd-zoek__veld { flex: 1 1 auto; min-width: 0; padding: 0.7rem 0.9rem; font: inherit; border: 1px solid var(--pd-lijn-sterk); border-radius: var(--pd-radius); background: var(--wp--preset--color--wit); }
.pd-zoek__veld:focus-visible { outline: 2px solid var(--wp--preset--color--oranje); outline-offset: 2px; }
.pd-zoek__groep { font-size: var(--wp--preset--font-size--kop); margin: var(--wp--preset--spacing--40) 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 3px solid var(--pd-lijn-sterk); }
.pd-zoek__lijst, .pd-zoek__paginas { list-style: none; margin: 0; padding: 0; }
.pd-zoek__item { display: grid; gap: 0.25rem 1.25rem; padding-block: var(--wp--preset--spacing--30); border-bottom: 1px solid var(--pd-lijn); }
.pd-zoek__datum { font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-zoek__titel { margin: 0; font-size: var(--wp--preset--font-size--groot); font-weight: 400; line-height: 1.25; } /* Zoals een titel in de agenda; "medium" bestaat niet in dit thema (titel was 14px, revisie 24 okt). */
.pd-zoek__titel a { text-decoration: none; }
.pd-zoek__titel a:hover { text-decoration: underline; }
.pd-zoek__meta, .pd-zoek__intro { margin: 0; }
.pd-zoek__meta { color: var(--pd-tekst-zacht, inherit); font-size: 0.9375rem; }
.pd-zoek__paginas li { padding-block: 0.6rem; border-bottom: 1px solid var(--pd-lijn); font-weight: 600; }
.pd-zoek__leeg { max-width: 40rem; }
@media (min-width: 48rem) {
	.pd-zoek__item { grid-template-columns: 7.5rem 1fr; }
	.pd-zoek__rij .pd-knop { flex: 0 0 auto; }
}
@media (max-width: 30rem) {
	.pd-zoek__rij { flex-direction: column; }
}

/* Evenementpagina: "Ook op de agenda" alleen als er iets anders op staat. */
.pd-evenement__meer:not(:has(.pd-agenda)) { display: none; }

/* ---------- Ronde 5: hipper, zelfde kleuren en logo (gesprek Anne 14 okt, B-019) ----------
 * Anne: "het moet wel een beetje hipper", "hip en happening", kleuren en logo blijven. Koppen gaan van Slab Light
 * naar Slab Semibold (de parksite blijft licht en zakelijk, de community is warmer en luider); oranje als vlak
 * in plaats van alleen labels; beweging alleen waar de inhoud iets doet (buren, getallen, foto's). */

/* Getallen en datums dragen de pagina: zwaar en strak. */
.pd-agenda__dag { font-weight: 700; letter-spacing: -0.03em; transition: color 0.2s ease; }
.pd-agenda__titel { font-weight: 600; }
.pd-cijfer { font-weight: 700; }
.pd-cijfer, .pd-reeks__getallen strong { letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pd-opsomming strong, .pd-menu__label, .pd-zwevend__kop, .pd-uitgelicht__tekst h2 { font-weight: 600; }
.pd-opening h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; }

/* Opening: meer foto, de volgende activiteit als nachtblauw blok met een grote oranje datum. */
/* Hoogte: zoveel foto als er past terwijl kop en knoppen in het eerste scherm blijven (assets/css/home.css, 17 okt). */
.pd-diashow > .wp-block-image img, .pd-opening__foto img { height: clamp(12rem, 30svh, 22rem) !important; }
/* De foto geeft de opening de ruimte die overblijft, zodat kop, intro en de WhatsApp-knop in het eerste scherm staan
   (17 okt); met de langere opening van 22 okt zat de knop 30 tot 60px onder de vouw. Het tekstvlak schuift minder ver
   over de foto en heeft minder lege ruimte boven de kop, zodat links de gezichten in beeld blijven (revisie 24 okt). */
@media (min-width: 60rem) { .pd-diashow > .wp-block-image img, .pd-opening__foto img { height: clamp(14rem, calc(100svh - 34.25rem), 38rem) !important; } }
.pd-volgende__tekst { background: var(--wp--preset--color--blauw-licht); color: var(--wp--preset--color--antraciet); } /* Licht sinds 19 okt. */
.pd-volgende__tekst strong { color: var(--wp--preset--color--antraciet); }
/* In het donkere menu geen licht strookje achter de tekst (leek geselecteerde tekst): wit op nacht. */
.pd-menu__paneel .pd-volgende__tekst, .pd-menu__paneel .pd-volgende__tekst strong { background: none; color: var(--wp--preset--color--wit); }
@media (min-width: 60rem) {
	.pd-opening .pd-volgende__tekst { background: var(--wp--preset--color--blauw-licht); color: var(--wp--preset--color--antraciet); padding: 1.1rem 1.25rem 1.4rem; }
	.pd-opening .pd-volgende__tekst strong { font-size: 3.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--wp--preset--color--antraciet); }
}

/* Buren: de namen van de bedrijven op het park, twee rijen op een oranje band. */
.pd-buren { margin-block: var(--wp--preset--spacing--50) 0 !important; padding-block: 1.125rem clamp(2rem, 4vw, 3.25rem); background: var(--wp--preset--color--blauw-licht); color: var(--wp--preset--color--antraciet); overflow-x: clip; } /* Was oranje; klant 19 okt: minder oranje, meer blauw. */
.pd-buren__kop { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; max-width: calc(72rem + 2 * var(--wp--preset--spacing--40)); margin: 0 auto 0.75rem; padding-inline: var(--wp--preset--spacing--40); }
.pd-buren__titel { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
/* Bekijk de bedrijven is een knop (rand, zoals Bekijk de events erboven): als vette onderstreepte tekst leek hij op
   de namen in de band (prikbord 23 okt, Steven). */
.pd-buren__link.pd-knop { min-height: 2.75rem; padding: 0 1rem; font-size: 0.8125rem; } /* 44px tikvlak. */
/* Een naam met een website is een link: rustig onderstreept bij aanwijzen, zodat de band leesbaar blijft. */
a.pd-buren__naam { color: inherit; text-decoration: none; }
a.pd-buren__naam:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
/* Meer lucht tussen kop, knop en de twee rijen (prikbord 24 okt: "meer afstand en de sectie mag meer ademen"). */
.pd-buren__kop { margin-bottom: clamp(1rem, 2.5vw, 1.75rem) !important; }
.pd-buren__band { display: grid; gap: clamp(0.35rem, 1vw, 0.6rem); }
.pd-buren__rij { display: flex; width: max-content; margin: 0; padding-left: var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--display); font-size: clamp(1.125rem, 1.9vw, 1.5rem); font-weight: 600; line-height: 1.35; letter-spacing: 0; white-space: nowrap; } /* Rustiger dan de H1 (17 okt): de band is achtergrond, geen tweede kop. */
/* Wat aan de rand wegloopt, vloeit uit in het oranje in plaats van hard afgekapt te staan. */
.pd-buren__band { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--wp--preset--spacing--40), #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--wp--preset--spacing--40), #000 calc(100% - 3rem), transparent); }
.pd-buren__rij + .pd-buren__rij { font-weight: 300; transform: translateX(-12rem); }
.pd-buren__naam::after { content: ""; display: inline-block; width: 0.3em; height: 0.3em; margin: 0 0.55em; background: var(--wp--preset--color--nacht); vertical-align: 0.2em; }

/* Agenda: bij hover groeit een oranje streep langs de rij en kleurt de datum mee. */
@media (min-width: 48rem) and (hover: hover) {
	.pd-agenda__item::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: calc(-1 * var(--wp--preset--spacing--30)); width: 4px; background: var(--wp--preset--color--oranje); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
	.pd-agenda__item:hover::before { transform: scaleY(1); }
	.pd-agenda__item:hover .pd-agenda__dag { color: var(--wp--preset--color--oranje-donker); }
}

@media (prefers-reduced-motion: no-preference) {
	/* Buren: de rijen lopen tegen elkaar in terwijl je scrolt. Staat de pagina stil, dan staat de band stil. */
	@supports (animation-timeline: view()) {
		.pd-buren__rij { animation: pd-band-links linear both; animation-timeline: view(); animation-range: cover; }
		.pd-buren__rij + .pd-buren__rij { animation-name: pd-band-rechts; }
	}
	/* Diashow: de foto die in beeld is, komt heel langzaam dichterbij. */
	.pd-diashow > .wp-block-image { overflow: hidden; }
	.pd-diashow.is-klaar > .wp-block-image.is-actief img { animation: pd-dichterbij 9s ease-out both; }
}
@keyframes pd-band-links { from { transform: translateX(0); } to { transform: translateX(-40vw); } }
@keyframes pd-band-rechts { from { transform: translateX(-50vw); } to { transform: translateX(-10vw); } }
@keyframes pd-dichterbij { from { transform: scale(1); } to { transform: scale(1.07); } }
/* Tussen 60 en ~80rem liep het witte openingsvlak over het blok Volgende activiteit (1024 breed): het vlak houdt ruimte vrij voor dat blok. */
@media (min-width: 60rem) {
	.pd-opening__paneel { width: min(calc(max(var(--pd-rand), (100cqw - 72rem) / 2) + 46rem), calc(100cqw - var(--pd-rand) - 20rem)); }
}

/* ---------- Ronde 6: toegankelijkheid uit de audit ---------- */
/* Alleen voor schermlezers (WordPress-conventie). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Browsers zonder popover (Safari 16, Firefox < 125): panelen verborgen tot site.js ze opent met .is-open (audit F043). */
@supports not selector(:popover-open) {
	.pd-menu__paneel:not(.is-open), .pd-zwevend__paneel:not(.is-open) { display: none; }
	.pd-menu__paneel.is-open { z-index: 100; }
	.pd-zwevend__paneel.is-open { z-index: 100; }
}

/* ---------- Eerder op Papendorp: onder een korte agenda, zodat de homepage met één activiteit niet leeg oogt ---------- */
.pd-eerder { margin-top: var(--wp--preset--spacing--50); }
.pd-eerder__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1.5rem; margin-bottom: 1rem; }
.pd-eerder__kop h3 { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-eerder__kop .pd-tekstlink { font-size: var(--wp--preset--font-size--klein); }
.pd-eerder__lijst { display: grid; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .pd-eerder__lijst { grid-template-columns: 1fr 1fr; } }
.pd-eerder__item a { display: grid; gap: 0.2rem; color: inherit; text-decoration: none; }
.pd-eerder__beeld { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; margin-bottom: 0.6rem; }
.pd-eerder__titel { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--groot); font-weight: 600; line-height: 1.25; }
.pd-eerder__datum { font-size: var(--wp--preset--font-size--klein); text-transform: capitalize; }
.pd-eerder__item a:hover .pd-eerder__titel { text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.pd-eerder__item { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.pd-eerder__beeld { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
	.pd-eerder__item a:hover .pd-eerder__beeld { transform: scale(1.03); }
}

/* ---------- Leeshulp (plugin zazu-leeshulp) ---------- */
/* Linksonder alleen als hij naast de inhoud past; smaller staat hij als Aa-knopje in de kop. Met tekst vanaf 106rem,
   net als de WhatsApp-knop rechts. */
.pd-kop__leeshulp { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--wp--preset--color--antraciet); cursor: pointer; }
.pd-kop__leeshulp .zl-icoon { width: 1.6rem; height: 1.6rem; }
.pd-kop__leeshulp:hover { color: var(--wp--preset--color--oranje-donker, #b46818); }
@media (min-width: 82rem) { .pd-kop__leeshulp { display: none; } }
@media (max-width: 81.99rem) { .zl-knop { display: none !important; } }
@media (max-width: 105.99rem) {
	.zl-knop { width: 3.5rem; min-height: 3.5rem; padding: 0; justify-content: center; }
	.zl-knop__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Het paneel opent vanuit de kop onder de kop, vanuit de zwevende knop erboven. */
@media (max-width: 81.99rem) { .zl-paneel { top: 4.75rem; bottom: auto; left: auto; right: 1rem; } }

/* Meer contrast: alle gedempte tekst in de volle kleur, lijnen donkerder. */
html.zl-contrast { --pd-lijn: color-mix(in srgb, var(--wp--preset--color--antraciet) 45%, transparent); }
html.zl-contrast :is(.pd-mensen__bij, .pd-zwevend__noot, .pd-whatsapp__noot, .pd-info__lijst dt, .pd-agenda__groep span, .pd-fotoreeks__foto, .pd-evenement__bijschrift, .pd-info__volgt dd, .pd-fotos__lead, .pd-fotos__bijschrift, .pd-terugzien__foto, .pd-fotoplek__bijschrift, .pd-bedrijven__rust-bijschrift, .pd-agenda__fotograaf, .pd-archiefmozaiek__foto, .pd-agenda__meta, .pd-agenda__intro, .pd-bijschrift, .wp-element-caption) { color: var(--wp--preset--color--antraciet) !important; }
html.zl-contrast :is(.pd-voet__kop, .pd-menu__preview, .pd-vlak--donker p) { color: var(--wp--preset--color--wit) !important; }
html.zl-contrast :is(.pd-volgende__meta, .pd-info__afstand, .pd-info__volgt dd) { color: var(--wp--preset--color--antraciet) !important; } /* Lichte vlakken sinds 19 okt. */
html.zl-contrast .wp-block-image figcaption.wp-element-caption { background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--wit) !important; }
/* Grotere tekst via de Leeshulp: mediaqueries rekenen met de standaardmaat van de browser, niet met de gekozen maat.
   Daarom schuiven de breekpunten van de kop mee (70rem keer 1,125 en 1,25), en wordt het merk op de telefoon kleiner. */
@media (min-width: 70rem) and (max-width: 78.74rem) {
	html[data-zl-grootte="groter"] .pd-menu__lijst, html[data-zl-grootte="groter"] .pd-kop .pd-kop__knop { display: none; }
	html[data-zl-grootte="groter"] .pd-menu__open { display: grid; }
}
@media (min-width: 70rem) and (max-width: 87.49rem) {
	html[data-zl-grootte="grootst"] .pd-menu__lijst, html[data-zl-grootte="grootst"] .pd-kop .pd-kop__knop { display: none; }
	html[data-zl-grootte="grootst"] .pd-menu__open { display: grid; }
}
@media (max-width: 39.99rem) {
	html[data-zl-grootte="groter"] .pd-merk { zoom: 0.9; }
	html[data-zl-grootte="grootst"] .pd-merk { zoom: 0.78; }
}
@media (max-width: 23.99rem) { html[data-zl-grootte="grootst"] .pd-merk { zoom: 0.66; } }
/* Met grotere tekst past de zwevende knop pas op heel brede schermen naast de inhoud; anders het Aa-knopje in de kop. */
@media (min-width: 82rem) and (max-width: 105.99rem) {
	html[data-zl-grootte] .zl-knop { display: none !important; }
	html[data-zl-grootte] .pd-kop__leeshulp { display: grid; }
	html[data-zl-grootte] .zl-paneel { top: 4.75rem; bottom: auto; left: auto; right: 1rem; }
}
/* Meer contrast: ook de dunne letter van intro's in gewone dikte. */
html.zl-contrast :is(.pd-lead, .pd-evenement__intro, .pd-opening .pd-lead) { font-weight: 400 !important; }

/* Agenda en terugblik op de telefoon: de datum op één regel boven de titel, zodat de tekst de hele breedte krijgt
   (in een smalle kolom naast de datum werden het regels van drie woorden). */
@media (max-width: 47.99rem) {
	.pd-agenda__item { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
	.pd-agenda__datum { flex-direction: row; align-items: baseline; gap: 0.5rem; }
	.pd-agenda__dag { font-size: 2.25rem; }
	.pd-agenda__maand, .pd-agenda__jaar { margin-top: 0; }
	.pd-agenda__knop, .pd-agenda--terugblik .pd-agenda__knop { grid-column: 1; }
}

/* Gezichten heel in beeld (B-025): elke foto met een gezichtsmeting snijdt uit op de hoogte van de gezichten, op elk
   formaat. Het percentage zet het gezicht op dezelfde hoogte in het kader als in de foto, dus het valt er nooit uit.
   De diashow rekent zelf (blocks-home.php, home.css). */
img[style*="--pd-focus"]:not(.pd-diashow img) { object-position: 50% calc(var(--pd-focus) * 100%) !important; }

/* ---------- Beweging (B-025): rustig, uit de inhoud ---------- */
/* Foto's van mensen komen zacht in beeld en zakken naar hun plek; vlakken en tegels schuiven een klein stukje op.
   Alleen waar de browser scrollgekoppelde animatie kent, niet bij minder beweging en niet met Beweging uit in de
   Leeshulp. Koppen bewegen nooit los, en wat al in beeld staat bij het laden staat er gewoon. */
@keyframes pd-zacht-op { from { translate: 0 1.75rem; } to { translate: 0 0; } } /* Alleen beweging, nooit doorzichtig: lezen hangt er niet van af. */
@keyframes pd-zak { from { scale: 1.07; } to { scale: 1; } }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		html:not(.zl-stil) :is(.pd-meedoen__keuze, .pd-terugzien__item, .pd-fotos__item, .pd-reekszin, .pd-archiefmozaiek__item) {
			animation: pd-zacht-op linear both; animation-timeline: view(); animation-range: entry 0% entry 50%;
		}
		html:not(.zl-stil) :is(.pd-meedoen__foto img, .pd-fotos__figuur img) {
			animation: pd-zak linear both; animation-timeline: view(); animation-range: entry 0% cover 50%;
		}
	}
}
.pd-fotos__figuur { overflow: hidden; }
/* Knoppen: een rustige overgang en een halve stap omhoog bij aanwijzen. */
@media (prefers-reduced-motion: no-preference) {
	:is(.wp-element-button, .pd-knop, .pd-form__knop) { transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease; }
	:is(.wp-element-button, .pd-knop, .pd-form__knop):hover { translate: 0 -2px; }
}