/*
Theme Name: ActOnData
Theme URI: https://actondata.nl
Author: ActOnData
Author URI: https://actondata.nl
Description: Blocktheme voor ActOnData. Presentatie only: templates, theme.json, patterns en CSS. Alle functionaliteit zit in de plugin actondata, zodat een themawissel niets sloopt. Zie het projectdoc bouwafspraken-code.md.
Version: 0.2.4
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: actondata
*/

/* ---------------------------------------------------------------------------
   Aaibaar én technisch.
   Aaibaar   = ronde hoeken, zachte vlakken, ruime regelafstand, warme lila tint.
   Technisch = strak raster, kleine hoofdletterlabels, exacte lijnen, geen schaduwsoep.

   De rode draad is letterlijk een draad: één doorlopende lijn over de pagina met
   een halte bij elke sectie — een roadmap. Elke halte eindigt met één actie.

   Mobile first: alles hieronder geldt vanaf de kleinste telefoon; media queries
   voegen alleen toe voor breder.
   --------------------------------------------------------------------------- */

:root {
	/* Waar de lijn staat: op smalle schermen tegen de rand, op brede schermen
	   40px links van de brede kolom (wideSize 1240px → halve breedte 620px). */
	--ad-flow-x: max(0.55rem, calc(50% - 660px));
	--ad-flow-dot: 13px;
	--ad-kolom: max(1.6rem, calc(50% - 620px));
}

/* De haltes staan links uitgelijnd tegen de lijn — een roadmap leest langs één
   rail, niet vanuit het midden. De brede blokken (kaartenrijen) vullen daarna de
   volle 1240px, dus de breedte van het scherm wordt wél gebruikt. */
.wp-block-group.ad-stop {
	padding-left: var(--ad-kolom) !important;
	padding-right: var(--ad-kolom) !important;
}

.ad-stop > :where(:not(.alignfull):not(.alignwide)) {
	margin-left: 0;
	margin-right: auto;
}

/* --- Typografische details ------------------------------------------------ */

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

p {
	text-wrap: pretty;
}

/* Het technische tegenwicht: klein label boven elke sectie. Dit is ook het
   ankerpunt van de halte op de lijn. */
.ad-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.4rem;
}

.ad-cijfers,
.wp-block-table td:last-child {
	font-variant-numeric: tabular-nums;
}

/* --- De flow: één lijn met haltes ----------------------------------------- */

.ad-sectie {
	position: relative;
	padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

/* De lijn zelf: per sectie een segment, maar omdat de secties tegen elkaar aan
   liggen leest het als één doorlopende draad. */
.ad-stop::before {
	content: "";
	position: absolute;
	left: var(--ad-flow-x);
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--lijn);
}

/* De halte: een punt op de lijn, op de hoogte van het sectielabel. Alleen 'left'
   wordt gezet — de verticale plek erft hij van het label zelf. */
.ad-stop > .ad-label::before {
	content: "";
	position: absolute;
	left: calc(var(--ad-flow-x) - (var(--ad-flow-dot) / 2) + 1px);
	margin-top: 0.3em;
	width: var(--ad-flow-dot);
	height: var(--ad-flow-dot);
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px var(--wp--preset--color--base);
}

/* Haltes op een gekleurd vlak: het ringetje neemt de vlakkleur over. */
.ad-stop.has-vlak-licht-background-color > .ad-label::before {
	box-shadow: 0 0 0 4px var(--wp--preset--color--vlak-licht);
}

.ad-stop.has-vlak-blauw-background-color > .ad-label::before {
	box-shadow: 0 0 0 4px var(--wp--preset--color--vlak-blauw);
}

/* Op donker draait het om: lijn en punt licht. */
.ad-stop.has-secondary-background-color::before {
	background: rgba(255, 255, 255, 0.28);
}

.ad-stop.has-secondary-background-color .ad-label {
	color: #fff;
}

.ad-stop.has-secondary-background-color > .ad-label::before {
	background: #fff;
	box-shadow: 0 0 0 4px var(--wp--preset--color--secondary);
}

/* Waar de lijn ophoudt: het laatste segment stopt bij de halte in plaats van
   door te lopen naar de onderrand. Een roadmap heeft een eindpunt. */
.ad-stop--eind::before {
	bottom: auto;
	height: clamp(2.5rem, 7vw, 5.5rem);
}

.ad-stop--eind > .ad-label::before {
	width: 19px;
	height: 19px;
	left: calc(var(--ad-flow-x) - 8px);
	background: var(--wp--preset--color--accent);
}

/* Ruimte voor de lijn zolang die nog dicht bij de tekst staat. Vanaf 1400px
   ligt de lijn buiten de kolom en is de inspringing niet meer nodig. */
@media (max-width: 480px) {
	:root {
		--ad-flow-x: 0.45rem;
		--ad-flow-dot: 11px;
		--ad-kolom: 1.35rem;
	}
}

/* --- Kaartjes: de orde van een planbord ----------------------------------- */

.ad-kaart {
	position: relative;
	background: #fff;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 16px;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	height: 100%;
	overflow: hidden;
	transition: transform 0.18s ease, border-color 0.18s ease;
}

/* Het greepje bovenaan: maakt er een kaartje van in plaats van een vlak. */
.ad-kaart::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent));
}

.ad-kaart:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--accent);
}

.wp-block-columns.ad-kaarten {
	gap: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.ad-kaart {
		transition: none;
	}
}

/* --- De baan met de punt, als achtergrondvorm ----------------------------- */

.ad-baan {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='88' fill='none' stroke='%237E00FF' stroke-opacity='0.3' stroke-width='4'/%3E%3Cpath d='M100 12 A88 88 0 0 1 188 100' fill='none' stroke='%23001EFF' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='188' cy='100' r='9' fill='%23001EFF'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right -4% top -16%;
	background-size: min(32%, 360px) auto;
}

.ad-baan--licht {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='88' fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='4'/%3E%3Cpath d='M100 12 A88 88 0 0 1 188 100' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='188' cy='100' r='9' fill='%23ffffff'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
	.ad-baan {
		background-size: min(78%, 300px) auto;
		background-position: right -26% top -12%;
	}
}

/* --- Tabellen ------------------------------------------------------------- */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--wp--preset--color--lijn);
	padding: 0.85rem 1rem;
	vertical-align: top;
}

.wp-block-table thead th {
	border-bottom-width: 2px;
	font-weight: 600;
	text-align: left;
}

/* --- Knoppen en links ----------------------------------------------------- */

.wp-block-button__link {
	padding: 0.85rem 1.6rem;
}

@media (max-width: 479px) {
	.wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* --- Navigatie ------------------------------------------------------------ */

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.25rem;
}

/* --- Focus: zichtbaar, in de huisstijlkleur ------------------------------- */

:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.has-secondary-background-color :where(a, button):focus-visible {
	outline-color: #fff;
}

/* --- Het logo in de koptekst ---------------------------------------------
   Woordmerk in Figtree, met de baan-met-punt als de O. Inline SVG, zodat het
   merk meeschaalt met de lettergrootte en op elk scherm scherp blijft.
   ------------------------------------------------------------------------- */

.ad-logo {
	display: inline-block;
	font-weight: 800;
	font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.15rem);
	letter-spacing: -0.015em;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.ad-logo:hover {
	opacity: 0.82;
}

/* De maat is gemeten aan Figtree 800, niet geschat: kaphoogte .70em, stam
   .1575em, en de eigen hoofdletter O van Figtree is .7325em breed met een
   counter van .4025em. Een SVG van .75em met een baan van 22 eenheden komt daar
   precies op uit — daardoor leest de O als letter en niet als gat. De vorige
   maat (.98em, baan 13.5) gaf een counter van .71em: bijna twee keer zo ruim
   als elke andere ronding in het woord. Zie visuele-richting.md, §4. */
.ad-logo svg {
	width: 0.75em;
	height: 0.75em;
	display: inline-block;
	vertical-align: baseline;
	margin-inline: 0.018em;
	margin-bottom: -0.019em;
}

.ad-logo--licht {
	color: #fff;
	font-size: 1.3rem;
}

/* --- Beeld ---------------------------------------------------------------- */

.ad-beeld {
	display: block;
	width: 100%;
	height: auto;
}

/* Het fotokader bij 'Over mij'. Als achtergrond in plaats van een <img>, zodat
   de verhouding vaststaat en de echte foto later alleen een andere URL is. */
.ad-portret {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 6;
	border-radius: 16px;
	background: url("assets/img/portret-eric.webp") center / cover no-repeat;
}

/* De illustratie is versiering: op een telefoon komt hij ná de tekst en mag
   hij kleiner, zodat de boodschap bovenaan blijft staan. */
@media (max-width: 781px) {
	.ad-hero__beeld {
		margin-top: 1.5rem;
		max-width: 420px;
	}
}

/* Bij elke halte hetzelfde beeldidee als in de hero, maar een slag kleiner: de
   hero blijft daarmee het zwaarste beeld van de pagina. */
.ad-halte__beeld {
	max-width: 460px;
	margin-inline: auto;
}

/* Bij 'Over mij' staat het beeld ónder het fotokader, in dezelfde kolom. */
.ad-portret + .ad-halte__beeld {
	margin-top: 1.25rem;
	max-width: 100%;
}

/* Op een telefoon stapelen de kolommen. De beeldkolom schuift dan naar achteren,
   want de boodschap hoort bovenaan te staan — net als bij de hero. */
@media (max-width: 781px) {
	.wp-block-columns .ad-beeldkolom {
		order: 2;
	}

	.ad-halte__beeld {
		margin-top: 1.5rem;
		max-width: 380px;
	}
}

/* --- Kop van een kaart: icoon of tegel naast het label -------------------- */

.ad-kaartkop {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.5rem;
}

.ad-kaartkop .ad-label {
	margin-bottom: 0;
}

.ad-icoon {
	width: 44px;
	height: 44px;
	flex: none;
}

.ad-tegel {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 0.9rem;
	background: var(--wp--preset--color--vlak-blauw);
	color: var(--wp--preset--color--secondary);
	border: 1px solid var(--wp--preset--color--lijn);
}

/* --- De strook met opdrachtgevers en papieren ----------------------------- */

.ad-strook-label {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 1.3rem;
}

.ad-merken {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.9rem 2.2rem;
}

.ad-merk {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.ad-merk__tegel {
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	border-radius: 13px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.07);
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
}

.ad-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.7rem;
	margin: 1.6rem 0 0;
}

.ad-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 0.85rem;
}

.ad-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7da0ff;
	flex: none;
}

/* ===========================================================================
   VERTROUWENSLAAG — 21 augustus 2026
   Doel: de pagina leest als een dossier, niet als een brochure. Feiten links op
   één rand, bewijs als register, versiering naar de marge.
   Dit blok overschrijft bewust regels hierboven. Verwijder het en de site staat
   terug op 0.2.3. Zodra de richting vaststaat verhuizen de typografieregels naar
   theme.json — daar horen ze thuis.
   =========================================================================== */

:root {
	/* Nagerekend: 3,48:1 op wit, 3,21:1 op vlak-licht, 3,12:1 op vlak-blauw.
	   WCAG 1.4.11 vraagt 3:1 voor grafiek die betekenis draagt. De oude waarde
	   (kleur lijn, #E3E1EE) haalde 1,29:1 en was dus letterlijk onzichtbaar. */
	--ad-rail: #8B82BE;
	--ad-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ad-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	color-scheme: light;
	accent-color: var(--wp--preset--color--primary);

	/* De oorspronkelijke waarden rekenden met 50%, en een percentage rekent
	   tegen de containing block (1440 - 2x rootpadding = 1344), niet tegen het
	   scherm. Dat gaf 52 px padding terwijl de alignwide-kolom op 100 px landt:
	   label en kop stonden 48 px uit elkaar. Met vw klopt het wel. */
	--ad-flow-x: max(0.55rem, calc(50vw - 660px));
	--ad-kolom: max(1.6rem, calc(50vw - 620px));
}

/* --- 2b. Vollere vlakken -------------------------------------------------- */
/* De twee tintvlakken lagen op 2 procent van wit: het oog zag één lange witte
   baan in plaats van een ritme. Dieper gezet, en de gedempte tekst mee — die
   haalde op vlak-licht maar 4,28:1 en zakte dus al door de norm.
   html:root telt 0,1,1 en wint daarmee van de globale stijlen van WordPress,
   die later in de head worden afgedrukt. */
html:root {
	--wp--preset--color--vlak-licht: #F4EDFF;
	--wp--preset--color--vlak-blauw: #E8ECFF;
	--wp--preset--color--gedempt: #5F5590; /* 6,59:1 op wit, 5,77:1 op vlak-licht */
}

/* --- 1. Eén rail, één linkerrand ------------------------------------------ */

.ad-stop::before {
	background: var(--ad-rail);
}

/* WordPress' eigen .is-layout-constrained > :where(...) telt 0,2,0 en won van
   de oorspronkelijke regel (0,1,0). Daardoor stond elk label 270 px rechts van
   zijn eigen haltepunt. Met de klasse erbij telt deze 0,2,0 én komt hij later. */
.wp-block-group.ad-stop > :where(:not(.alignfull):not(.alignwide)) {
	margin-left: 0;
	margin-right: auto;
}

/* De naad tussen twee opeenvolgende haltes dicht: de rail loopt door. */
.ad-stop + .ad-stop {
	margin-top: 0;
}

.ad-label {
	font-variant-numeric: tabular-nums;
}

/* Belt en bretels: WordPress drukt zijn eigen layoutregel later in de head af
   dan dit bestand, dus gelijke specificiteit verliest. Dit geldt voor élk direct
   kind van een halte — niet alleen het label, ook de opdrachtgeversstrook en de
   knoppenrijen stonden daardoor gecentreerd in plaats van op de linkerrand. */
.wp-block-group.ad-stop > :not(.alignfull):not(.alignwide) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.ad-strook-label {
	max-width: none;
}

/* --- 2. Typografie: gewicht draagt de hiërarchie -------------------------- */

.ad-stop h1 {
	font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3.35rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.ad-stop h3 {
	font-weight: 600;
}

/* 32 em = 70 tekens in Figtree (gemiddelde tekenbreedte 0,4583 em, gewogen naar
   Nederlandse letterfrequentie). In em, zodat de maat klopt als de letter
   meeschaalt. contentSize blijft 760 px — die draagt ook beeld en tabellen. */
.ad-stop p,
.ad-stop li {
	max-width: 32em;
}

.ad-kaart p,
.ad-kaart li {
	max-width: none;
}

/* Licht op donker vraagt meer lucht. */
.has-secondary-background-color p {
	line-height: 1.72;
	letter-spacing: 0.005em;
}

.has-secondary-background-color a:where(:not(.wp-element-button)) {
	color: #A9B6FF; /* 8,4:1 op #120275; de erfelijke primary haalde 2,04:1 */
}

/* De directe contactroute naast de knop: één regel, groot genoeg om te lezen en
   te tikken. Het nummer in tabular-nums zodat de cijfers rustig staan. */
.ad-contact {
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ad-contact a {
	display: inline-block;
	padding-block: 0.35rem; /* aanraakvlak naar 44 px */
}

/* --- 3. De hero eindigt in feiten ----------------------------------------- */

.ad-stop:has(.ad-hero__beeld) p.has-small-font-size {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--lijn);
	max-width: 44em;
	font-size: 0.95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.005em;
	/* WordPress drukt zijn presetkleur-klassen af mét !important, dus de
	   has-gedempt-color op deze alinea wint zonder dit. */
	color: var(--wp--preset--color--secondary) !important;
}

/* Beeld terug op formaat: de verkleining van vanochtend maakte de pagina
   strenger dan bedoeld. */
.ad-hero__beeld {
	max-width: none;
	margin-left: auto;
}

.ad-halte__beeld {
	max-width: 500px;
}

/* Van vijf halte-illustraties naar vier. De stijgende baan bij halte 4 herhaalt
   de hero het meest letterlijk, en die sectie heeft het register er direct
   onder — daar draagt de volle breedte zichzelf. Halte 2 stond zonder beeld als
   een muur tekst en heeft de zijne terug. */
.ad-beeldkolom:has(img[src*="halte-4"]) {
	display: none;
}

.wp-block-columns:has(img[src*="halte-4"]) > .wp-block-column:not(.ad-beeldkolom) {
	flex-basis: 100% !important;
}

/* --- 4. Bewijs is een register, geen kaartenbak --------------------------- */
/* Haak: de loopbaankaarten bevatten .ad-tegel, de aanpakkaarten .ad-icoon.
   Geen inhoudswijziging nodig. */

.ad-kaarten:has(.ad-tegel) {
	display: block;
}

.ad-kaarten:has(.ad-tegel) > .wp-block-column {
	margin: 0;
}

.ad-kaart:has(.ad-tegel) {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	column-gap: 2rem;
	align-items: baseline;
	background: none;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--lijn);
	border-radius: 0;
	padding: 1.15rem 0;
	height: auto;
}

.ad-kaart:has(.ad-tegel) > .ad-kaartkop {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.ad-kaart:has(.ad-tegel) > :not(.ad-kaartkop) {
	grid-column: 2;
}

/* De kaart is een wp:group met constrained layout: zijn kinderen krijgen
   margin-inline auto en max-width 760 px. In een kolom van 390 px viel dat niet
   op, in een registerregel van 1070 px staat alles ineens gecentreerd. */
.ad-kaart:has(.ad-tegel) > * {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: none;
}

.ad-kaart:has(.ad-tegel) p {
	max-width: 42em;
}

/* De omvangregel onder elke registerregel: feiten over de opdracht zelf, niet
   over de opdrachtgever. Iets ruimer eronder, zodat hij bij zijn eigen regel
   hoort en niet bij de volgende. */
.ad-kaart:has(.ad-tegel) p.has-gedempt-color {
	margin-top: 0.35rem;
	font-variant-numeric: tabular-nums;
}

.ad-kaart:has(.ad-tegel) .ad-tegel {
	display: none; /* nep-logotegel; de periode doet het werk */
}

.ad-kaart:has(.ad-tegel) .ad-label {
	color: var(--wp--preset--color--secondary);
	font-size: 0.8rem;
}

.ad-kaart:has(.ad-tegel) h3 {
	margin-top: 0;
}

@media (max-width: 599px) {
	.ad-kaart:has(.ad-tegel) {
		grid-template-columns: 1fr;
		row-gap: 0.35rem;
	}

	.ad-kaart:has(.ad-tegel) > :not(.ad-kaartkop) {
		grid-column: 1;
	}
}

/* --- 5. Minder kader, geen verloop ---------------------------------------- */

.ad-kaart::before {
	display: none; /* het enige verloop op de site */
}

.ad-kaart:hover {
	transform: none;
	border-color: var(--wp--preset--color--lijn);
}

/* De opdrachtgeversstrook: namen op een rij, geen tegels en geen pillen. */
.ad-strook-label,
.ad-merken,
.ad-badges {
	text-align: left;
	justify-content: flex-start;
}

.ad-merk__tegel {
	display: none;
}

.ad-merken {
	gap: 0.6rem 1.5rem;
}

.ad-merk + .ad-merk,
.ad-badge + .ad-badge {
	border-left: 1px solid rgba(255, 255, 255, 0.28);
	padding-left: 1.5rem;
}

.ad-badges {
	gap: 0.5rem 1.5rem;
	margin-top: 1.2rem;
}

.ad-badge {
	border: 0;
	border-radius: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.78);
}

.ad-badge::before {
	display: none;
}

/* --- 6. Eén actie per halte ----------------------------------------------- */
/* Een <a> zonder href is geen link: niet focusbaar, niet in de tabvolgorde, en
   voor een screenreader onzichtbaar. Weg tot de doelpagina bestaat. */

.wp-block-button:has(> a:not([href])) {
	display: none;
}

.wp-block-buttons:not(:has(.wp-block-button__link[href])) {
	display: none;
}

/* --- 7. Beweging: één moment, en indrukfeedback --------------------------- */

.wp-block-button__link {
	transition: transform 160ms var(--ad-ease-out), background-color 160ms ease;
}

.wp-block-button__link:active {
	transform: scale(0.97);
}

@keyframes ad-rail-tekent {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

.ad-stop:has(.ad-hero__beeld)::before {
	transform-origin: top;
	animation: ad-rail-tekent 700ms var(--ad-ease-out) 120ms both;
}

@media (prefers-reduced-motion: reduce) {
	.ad-stop:has(.ad-hero__beeld)::before { animation: none; }
	.wp-block-button__link:active { transform: none; }
}

/* --- 8. Browservlakken uit het eigen palet -------------------------------- */

::selection {
	background: #E4DBFF;
	color: var(--wp--preset--color--secondary);
}

:where(input, textarea) {
	caret-color: var(--wp--preset--color--primary);
}

a {
	text-underline-offset: 0.16em;
	text-decoration-thickness: 0.06em;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.55rem; /* aanraakvlak naar 44 px */
}

/* ===========================================================================
   STIJLGIDS — 7 september 2026
   Foto laat zien wat er echt is, illustratie legt uit wat je niet kunt
   fotograferen, nooit allebei in dezelfde sectie. Onderbouwing en meetwaarden
   staan in de stijlgids; dit blok voert hem uit. Verwijder het en de site staat
   terug op de vertrouwenslaag van 21 augustus.
   =========================================================================== */

/* 1. Bijna rechte hoeken. 16 px is de afronding van een app-icoon; onder een
   foto van een meterkast leest dat als een screenshot van iets anders.
   Gemeten bij de referenties: Sioux 3-5 px, Philips 2 px, ASML 0 px. */
.ad-kaart,
.ad-portret {
	border-radius: 2px;
}

/* 2. De kop groot én licht in plaats van groot én zwaar. De maat klopte al
   (tot 3,35 rem); alleen het gewicht stond te hoog. Alle drie de referenties
   zetten hun display op 300-350. h2 en verder komen uit theme.json. */
.ad-stop h1 {
	font-weight: 300;
	letter-spacing: -0.032em;
}

/* 3. Halte 3 verliest zijn beeld. Die sectie heeft de drie aanpakkaarten met
   iconen al; een vierde tekening erbij maakt de pagina een tekeningenreeks.
   Zelfde haak als bij halte 4 hierboven. */
.ad-beeldkolom:has(img[src*="halte-3"]) {
	display: none;
}

.wp-block-columns:has(img[src*="halte-3"]) > .wp-block-column:not(.ad-beeldkolom) {
	flex-basis: 100% !important;
}

/* 4. Foto's volgen de vorm van de rest: rechte hoek, geen schaduw, geen kader.
   Breedte en hoogte komen van .ad-beeld. */
.ad-foto {
	border-radius: 2px;
}

/* 5. Plaatshouder voor het portret, 7 september: uitsnede uit de foto met Wil
   van Alius BV. Daglicht van opzij, open boord, een echte plek — regel voor
   regel het briefje uit hoofdstuk 4 van de stijlgids, waar de studio-opname
   die er stond precies op stukliep. Nog steeds een plaatshouder: 220 x 264,
   opgeschaald, en uitgesneden uit een handdrukfoto.
   Het oude bestand blijft staan; deze regel weghalen zet hem terug. */
.ad-portret {
	background-image: url("assets/img/portret-eric-2026.webp");
}

/* ===========================================================================
   FOTO + STATUSKAART — 21 september 2026 (proef)
   De foto laat zien wat iedereen ziet, het kaartje wat de projectmanager ziet:
   de staat van het project eronder. Foto's in duotoon (donkerblauw → wit, lila
   verloop) zodat losse stockfoto's één serie worden. Zie het projectdoc
   beeld-foto-statuskaart.md.
   Botst bewust met STIJLGIDS regel "nooit foto én illustratie in één sectie" —
   ter beoordeling. Verwijder dit blok + de vijf <figure>'s en het is terug.
   =========================================================================== */

.ad-fotokaart {
	position: relative;
	max-width: 500px;
	margin: 0 auto 64px;
}

.ad-fotokaart__beeld {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: 2px;
	overflow: hidden;
	isolation: isolate;
	background: #fff;
}

.ad-fotokaart__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15) brightness(1.05);
}

.ad-fotokaart__beeld::after,
.ad-fotokaart__beeld::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ad-fotokaart__beeld::after {
	background: var(--wp--preset--color--secondary);
	mix-blend-mode: screen;
}

.ad-fotokaart__beeld::before {
	z-index: 1;
	background: linear-gradient(135deg, transparent 45%, rgba(126, 0, 255, 0.35));
	mix-blend-mode: multiply;
}

/* Het statuskaartje hangt over de hoek, naar de tekst toe. */
.ad-sk {
	position: absolute;
	left: -32px;
	bottom: -64px;
	width: 50%;
	min-width: 200px;
	display: block;
	padding: 10px 10px 6px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 2px;
	color: var(--wp--preset--color--secondary);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* Nooit zijwaarts over de rand: op tussenbreedtes schuift het kaartje dan over
   de lopende tekst. Alleen naar onderen, waar de beeldkolom leeg is. */
.ad-sk {
	left: 12px;
}

/* Beeld links van de tekst (halte 2 en 4): direct eronder volgt nog inhoud,
   dus daar blijft het kaartje helemaal binnen de foto. */
.ad-fotokaart--r {
	margin-bottom: 0;
}

.ad-fotokaart--r .ad-sk {
	left: auto;
	right: 12px;
	bottom: 12px;
}

.sk-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	margin: 2px 2px 4px;
}

.sk-lbl {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gedempt);
}

.sk-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 7px 2px 6px;
	border: 1px solid rgba(0, 30, 255, 0.25);
	border-radius: 2px;
	background: #F0F2FF;
	color: var(--wp--preset--color--primary);
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
}

.sk-pill i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.sk-pill--stop {
	color: var(--wp--preset--color--accent);
	background: #F9F4FF;
	border-color: rgba(126, 0, 255, 0.25);
}

.sk-pill--stop i {
	background: none;
	border: 1.5px solid currentColor;
}

.sk-g {
	display: block;
	width: 100%;
	height: auto;
	margin: 2px 0 4px;
	overflow: visible;
}

.sk-tak {
	opacity: 1;
}

/* Alleen bij vastgelopen vervagen de takken: ze lopen dood. */
.ad-sk:has(.sk-pill--stop) .sk-tak {
	opacity: 0.55;
}

.sk-rij {
	display: grid;
	grid-template-columns: 58px 1fr auto;
	align-items: center;
	gap: 8px;
	margin: 0 2px 5px;
	font-size: 11px;
}

.sk-bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--wp--preset--color--vlak-blauw);
	overflow: hidden;
}

.sk-bar--leeg {
	background: repeating-linear-gradient(90deg, var(--wp--preset--color--lijn) 0 4px, transparent 4px 8px);
}

.sk-bar em {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--wp--preset--color--secondary);
	transform-origin: left;
}

.sk-st {
	font-size: 10.5px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.sk-st.nee { color: var(--wp--preset--color--accent); }
.sk-st.ok2 { color: var(--wp--preset--color--primary); }
.sk-rij:has(.ok2) .sk-bar em { background: var(--wp--preset--color--primary); }

/* Beweging: native scroll-gestuurd, geen JavaScript. Zonder ondersteuning
   (Firefox) of met minder-beweging staat meteen de eindtoestand er. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ad-sk {
			view-timeline-name: --sk;
		}

		.sk-baan,
		.sk-bar em,
		.sk-tak,
		.sk-pill,
		.sk-punt {
			animation-timeline: --sk;
			animation-fill-mode: both;
			animation-timing-function: linear;
		}

		.sk-baan  { stroke-dasharray: 100; animation-name: sk-teken; animation-range: entry 60% cover 40%; }
		.sk-bar em { animation-name: sk-vul;  animation-range: entry 80% cover 45%; }
		.sk-tak   { animation-name: sk-in;   animation-range: entry 70% cover 40%; }
		.ad-sk:has(.sk-pill--stop) .sk-tak { animation-name: sk-tak; animation-range: cover 30% cover 55%; }
		.sk-pill  { animation-name: sk-in;   animation-range: cover 45% cover 55%; }
		.sk-punt  { animation-name: sk-in;   animation-range: cover 38% cover 46%; }

		@keyframes sk-teken { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
		@keyframes sk-vul   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
		@keyframes sk-tak   { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0.55; } }
		@keyframes sk-in    { from { opacity: 0; } to { opacity: 1; } }
	}
}

/* De hero blijft het zwaarste beeld van de pagina. */
.ad-fotokaart--hero {
	max-width: 640px;
	margin-right: 0;
}

/* Telefoon: kaartje naar binnen, anders valt het buiten beeld. */
@media (max-width: 781px) {
	.ad-fotokaart {
		max-width: 420px;
		margin-top: 1.5rem;
	}

	.ad-sk,
	.ad-fotokaart--r .ad-sk {
		left: 12px;
		right: auto;
		width: 58%;
	}
}