/*
Theme Name: AdComPro
Theme URI: https://adcompro.app
Author: Altena Digital
Author URI: https://altena.digital
Description: Blok-theme voor de AdComPro-marketingsite. Redactionele "grootboek"-vormgeving: warm papier, inkt, één signaalkleur, haarlijnen als structuur en tabulaire cijfers. Alle pagina's zijn als blokken te beheren.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adcompro
Tags: full-site-editing, blocks, business, one-column, custom-colors, custom-logo, wide-blocks
*/

/*
 * Ontwerpuitgangspunt: dit is gereedschap voor bureaus die uren, budgetten en
 * marges bijhouden. De vormgeving leent daarom van het grootboek — haarlijnen,
 * uitgelijnde kolommen, cijfers in tabulaire mono — en niet van de generieke
 * SaaS-gradient. Kleur wordt schaars ingezet: papier en inkt dragen de pagina,
 * vermiljoen markeert alleen wat een actie of een getal van belang is.
 *
 * Verdeling van de drie letters — mono is het schaarste middel:
 *
 *   mono    alleen in de bedragenkolom van het staat-paneel, het superscript
 *           bij een prijs, code, en het vaste .adcompro.app-achtervoegsel in
 *           formulieren. Tabellen hebben hem niet nodig: die lijnen al uit op
 *           font-variant-numeric: tabular-nums, en dat is genoeg.
 *   serif   alleen de kop van een sectie (h1, h2), citaten en het grote cijfer.
 *   sans    al het andere, inclusief alle labels en kaarttitels.
 *
 * Eerder droeg de mono ook alle labels — sectiekopjes, eyebrows, tabelkoppen,
 * formulierlabels, de taalschakelaar. Dat waren er op de homepage ruim veertig,
 * elk in hoofdletters en wijd gespatieerd, en samen met een serif kaarttitel
 * stonden er drie letters in één kaartje van nog geen 300px breed. Het las als
 * ruis: de mono trok aandacht zonder iets te betekenen. Nu betekent hij één
 * ding — hier staat een getal — en dat maakt de rest van de pagina stil.
 *
 * Labels delen daarom één spatiëring (0.06em). Er stonden er zes verschillende
 * (0.14 / 0.12 / 0.10 / 0.08 / 0.06) voor wat visueel hetzelfde label is.
 *
 * Tokens staan in theme.json. Hier staat wat daar niet in past.
 */

/* ============================================================== Fundament */

html {
	scroll-behavior: smooth;

	/* De kopbalk blijft bovenaan hangen. Zonder deze marge springt een link
	   naar een anker precies zó ver dat de kop eronder verdwijnt. De balk is
	   op elk schermformaat 72px hoog; 5,5rem laat er wat lucht boven. */
	scroll-padding-top: 5.5rem;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
}

/* Instrument Serif heeft een hoge x-hoogte en smalle spatiëring; op grote
   maten mag er wat lucht af, anders vallen de koppen uit elkaar. */
:where(h1, h2, .acp-display) {
	font-feature-settings: "liga" 1, "kern" 1;
}

::selection {
	background: var(--wp--preset--color--signal);
	color: #fff;
}

/* ---------------------------------------------------------- Toegankelijk */

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
	border-radius: 2px;
}

.acp-on-ink :where(a, button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ================================================================= Header */

/* De balk blijft bovenaan hangen, wijkt bij het naar beneden lezen, en komt
 * terug zodra de bezoeker een klein stukje omhoog gaat.
 *
 * Het `sticky` staat op de omhulling van het sjabloondeel en niet op <header>
 * zelf. Die omhulling is precies zo hoog als de balk, en een sticky element
 * komt nooit buiten zijn ouder: stond het op <header>, dan schoof de balk bij
 * de eerste pixel scrollen mee het beeld uit. Dat zag eruit als een balk die
 * niet blijft plakken, terwijl de regel er wel stond.
 *
 * Wegschuiven gebeurt met `transform` en niet met `top`: dat loopt op de
 * compositor, en het laat de blur op de achtergrond heel.
 */
.acp-header-slot {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Staat er focus in de balk, dan blijft hij staan. Een toetsenbordgebruiker
   die door het menu tabt, mag niet naar een weggeschoven link springen. */
.acp-header-slot.is-verborgen:not(:focus-within) {
	transform: translateY(-100%);
}

.acp-header {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Papier en blur liggen op een laag eronder, niet op de balk zelf.
 *
 * `backdrop-filter` maakt van een element het referentiekader voor alles wat
 * eronder `position: fixed` is. Stond hij op .acp-header, dan werd het
 * overlaymenu daarin opgesloten: 390x71px, precies de balk, met overflow
 * verborgen. De menulijst is 279px hoog, dus je zag alleen het eerste item
 * staan en verder niets. Op een pseudo-element doet de blur zijn werk zonder
 * dat de balk dat kader wordt.
 */
.acp-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	backdrop-filter: saturate(160%) blur(10px);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
}

/* De balk ligt écht over de tekst heen, dus die 12% doorzicht leunt volledig
   op de blur erachter. Waar die niet werkt (oudere browser, of "verminder
   transparantie" in het systeem) leest de tekst eronder dwars door de balk. */
@supports not (backdrop-filter: blur(1px)) {
	.acp-header::before {
		background: var(--wp--preset--color--paper);
	}
}

/* De balk op één regel houden zolang er geen ruimte is voor het hele menu.
 *
 * Uitgeklapt vraagt de balk het woordmerk, zeven menu-items, de taalkeuze en
 * de proefknop naast elkaar. Met de Franse labels erbij (die zijn de langste)
 * kwam dat op ruim 1260px; sinds de taalkeuze een uitklapje is (één taalcode breed) past het vanaf zo'n 1190px. Daaronder brak hij af in twee of drie regels, en
 * dat werd 118 tot 177px hoog. Op een telefoon 166px, een vijfde van het
 * scherm. Zolang de balk gewoon wegscrolde viel dat niet op; nu hij blijft
 * hangen wel.
 *
 * Tot 1189px valt het menu daarom terug op de hamburger, precies zoals hij dat
 * onder 600px uit zichzelf al deed. De twee regels hieronder draaien de
 * omslag van het navigatieblok terug; core zet die op `min-width: 600px`.
 *
 * Met het menu ingeklapt is er tot aan de telefoon ruimte genoeg voor merk,
 * taalkeuze, proefknop en hamburger naast elkaar. De proefknop blijft dus
 * staan waar hij staat: die is op een marketingsite het hele punt van de balk.
 */
@media (max-width: 1189px) {
	.acp-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

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

	.acp-header .wp-block-group {
		flex-wrap: nowrap;
	}

	.acp-header .acp-wordmark {
		flex: 0 0 auto;
	}

	/* De hamburger hoort in de rechterhoek, niet klem tussen het merk en de
	   knop. */
	.acp-header .wp-block-navigation {
		order: 1;
	}
}

/* Het overlaymenu zelf.
 *
 * Dit was nooit vormgegeven, en dat viel niet op: het zat opgesloten in de
 * balk (zie de opmerking bij .acp-header::before) en was dus onzichtbaar. Nu
 * het opengaat hoort het bij de rest van de site: papier, inkt, en haarlijnen
 * als structuur in plaats van een zwevend lijstje.
 */
.acp-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.acp-header .is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding-top: 3rem;
}

.acp-header .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: stretch;
}

.acp-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.acp-header .is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Een regel van 56px is met een duim te raken. De vier klassen zijn nodig, geen
   opsmuk: core zet `padding: 0` op deze link met evenveel klassen, en met
   minder verliest deze regel het. De overlaykleuren staan om dezelfde reden op
   het navigatieblok zelf (overlayBackgroundColor/overlayTextColor in de
   sjabloondelen) en niet hier: core's eigen wit-op-zwart wint anders. */
.acp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 1.1rem;
	font-size: 1.125rem;
	text-align: left;
}

.acp-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.5rem;
	right: 1.5rem;
	color: var(--wp--preset--color--ink);
}

/* Het submenu in het overlaymenu: plat tussen de andere regels, alleen wat
   ingesprongen. Core centreert het, laat het krimpen tot zijn inhoud en geeft
   het een eigen blok-afstand; dat oogt in deze lijst als een losgeslagen
   paneel. De lange selector is nodig omdat core zijn overlay-regels met vier
   klassen schrijft; met minder verliest deze het. */
.acp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 0 0 1.25rem;
}

/* Op een telefoon moeten er nog twee dingen uit.
 *
 * De taalkeuze: die staat voluit onder een kopje in de voettekst, en een
 * bezoeker is via zijn browsertaal al in de goede taal beland.
 *
 * En het woord "AdComPro". Het beeldmerk blijft staan en linkt naar huis; de
 * letters blijven bestaan voor schermlezers, ze zijn alleen niet meer te zien.
 * Een link zonder naam is namelijk geen link.
 */
@media (max-width: 640px) {
	.acp-header .acp-lang--compact {
		display: none;
	}

	.acp-header .acp-wordmark b,
	.acp-header .acp-wordmark span {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
		border: 0;
	}
}

/* Op de smalste toestellen wint de proefknop het van de ruimte: iets minder
   lucht eromheen en in de marge scheelt genoeg om hem op één regel te houden.
   De langste is "Essai gratuit d'un mois". */
@media (max-width: 380px) {
	.acp-header {
		padding-right: 1rem;
		padding-left: 1rem;
	}

	.acp-header .wp-block-button__link {
		padding-right: 0.8rem;
		padding-left: 0.8rem;
		font-size: 0.8125rem;
	}
}

/* Bij 320px (de oudste toestellen die nog langskomen) zijn de Nederlandse en
   Franse knop ook daarmee nog te lang voor één regel. Nog een maatje kleiner
   en minder ruimte tussen knop en hamburger houdt ze heel. Wordt een knoptekst
   ooit langer, dan is dit de plek waar hij als eerste afbreekt. */
@media (max-width: 340px) {
	.acp-header .wp-block-group {
		gap: 0.6rem;
	}

	.acp-header .wp-block-button__link {
		padding-right: 0.6rem;
		padding-left: 0.6rem;
		font-size: 0.75rem;
	}
}

/* Het woordmerk.
 *
 * Eén schreefloze letter, in twee kleuren: "Ad" in inkt, "ComPro" in
 * vermiljoen. Dat spiegelt het beeldmerk ernaast, dat precies zo is opgebouwd
 * (linkerbeen inkt, rechterbeen vermiljoen). Eerder stond hier een serif naast
 * een mono; die combinatie hoorde bij een andere vormtaal dan de geometrische
 * vlakken van het merk en botste ermee.
 *
 * Bewust niet het display-lettertype: dat is voor koppen. Het woordmerk deelt
 * zijn letter met de lopende tekst en hoort daarmee bij de pagina in plaats
 * van erbovenop te liggen.
 */
.acp-wordmark {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.acp-wordmark b {
	font-weight: inherit;
}

.acp-wordmark span {
	color: var(--wp--preset--color--signal);
}

.acp-mark {
	flex: 0 0 auto;
	margin-right: 0.6em;
	align-self: center;
}

/* Op donkere ondergrond wisselt alleen het inkt-deel van kleur; het
   vermiljoen blijft staan, net als in het beeldmerk. */
.acp-footer .acp-wordmark {
	color: var(--wp--preset--color--paper);
}

.acp-nav a {
	position: relative;
	text-decoration: none;
	padding-block: 0.35rem;
}

/* Onderstreping groeit vanuit links — één beweging, geen kleurwissel. */
.acp-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--signal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.acp-nav a:hover::after,
.acp-nav .current-menu-item > a::after {
	transform: scaleX(1);
}

.acp-nav .current-menu-item > a {
	color: var(--wp--preset--color--ink);
}

/* Het uitklapmenu onder "Hulp", alleen in de uitgeklapte (desktop)weergave.
 * In het overlaymenu staat hetzelfde submenu plat tussen de andere regels en
 * hoort er geen zwevend paneel te zijn — vandaar de :not(.is-menu-open).
 * Core zet er zelf al papier en een rand op; hier alleen de huisstijl:
 * haarlijnkleur, geen afronding, wat lucht, en een lichte schaduw zodat het
 * paneel loskomt van de tekst eronder. */
.acp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	padding: 0.5rem 0;
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	box-shadow: 0 10px 24px rgba(23, 20, 15, 0.07);
}

.acp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a {
	padding: 0.55rem 1.1rem;
}

/* De groei-onderstreping van de hoofdlinks staat de volle breedte van het
   paneel in de weg; in het uitklapmenu volstaat de kleurwissel. */
.acp-nav .wp-block-navigation__submenu-container a::after {
	content: none;
}

.acp-nav .wp-block-navigation__submenu-container a:hover {
	color: var(--wp--preset--color--signal);
}

/* ======================================================== Taalschakelaar */

/* De schakelaar zegt iets over de pagina, hij wijst niet naar een volgende
   stap. Daarom klein en in dezelfde toon als de andere labels, en niet in de
   vormgeving van de navigatie ernaast: dan zou hij om aandacht vragen die hij
   niet verdient. */
.acp-lang {
	display: inline-flex;
	align-items: center;
	/* Vier talen passen op één regel naast de navigatie, maar op een smal
	   scherm mogen ze afbreken in plaats van de kop uit elkaar te duwen. */
	flex-wrap: wrap;
	row-gap: 0.2em;
	gap: 0.45em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-faint);
}

/* De taal waarin je nu leest, is geen link en gedraagt zich ook niet zo. */
.acp-lang__nu {
	color: var(--wp--preset--color--ink);
}

.acp-lang__naar {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.acp-lang__naar:hover,
.acp-lang__naar:focus-visible {
	color: var(--wp--preset--color--signal);
}

.acp-lang__streep {
	opacity: 0.45;
}

/* Compact (de kopbalk): alleen de huidige taal is zichtbaar, met een pijltje.
 * De andere talen zitten in een uitklapje dat opent bij aanwijzen of
 * toetsenbordfocus — zelfde paneelstijl als het Hulp-menu ernaast. Zo kost de
 * schakelaar één taalcode aan ruimte in plaats van vier. */
.acp-lang--compact {
	position: relative;
	flex-wrap: nowrap;
	gap: 0.3em;
}

.acp-lang__pijl {
	flex: 0 0 auto;
	color: var(--wp--preset--color--ink-faint);
	transition: transform 0.2s ease;
}

/* De huidige taal is in de kopbalk een knop (tikken opent het paneel op een
   touchscreen); hij mag er niet als knop uitzien, want hij hoort bij de
   navigatie ernaast. */
.acp-lang--compact .acp-lang__nu {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin: 0;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	touch-action: manipulation;
}

.acp-lang--compact .acp-lang__nu:focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 2px;
}

.acp-lang--compact.is-open .acp-lang__pijl,
.acp-lang--compact:has(.acp-lang__paneel:focus-within) .acp-lang__pijl {
	transform: rotate(180deg);
}

@media (hover: hover) {
	.acp-lang--compact:hover .acp-lang__pijl {
		transform: rotate(180deg);
	}
}

.acp-lang__paneel {
	position: absolute;
	top: 100%;
	right: -0.75rem;
	z-index: 110;
	min-width: 9.5rem;
	padding: 0.5rem 0;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	box-shadow: 0 10px 24px rgba(23, 20, 15, 0.07);
	/* Dicht = doorzichtig en ongevoelig voor de muis, maar NIET visibility:
	   hidden: dat zou de links uit de tabvolgorde halen, en juist de
	   toetsenbordfocus op zo'n link (:focus-within) moet het paneel openen. */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Toetsenbord: zodra een taal in het paneel focus krijgt (Tab vanaf de knop),
   is het open. Focus op de knop zelf opent niet — anders kan een klik hem
   nooit meer sluiten zolang de knop focus houdt. */
.acp-lang--compact.is-open .acp-lang__paneel,
.acp-lang--compact .acp-lang__paneel:focus-within {
	opacity: 1;
	pointer-events: auto;
}

/* Aanwijzen opent alleen op apparaten die echt een aanwijzer hebben; op een
   touchscreen "plakt" :hover na een tik en zou het paneel nooit meer sluiten. */
@media (hover: hover) {
	.acp-lang--compact:hover .acp-lang__paneel {
		opacity: 1;
		pointer-events: auto;
	}
}

/* In het paneel staan de talen voluit; de brede letterspatiëring van de
   labelstijl staat hele woorden in de weg. */
.acp-lang__paneel .acp-lang__naar {
	display: block;
	padding: 0.45rem 1.1rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: normal;
	color: var(--wp--preset--color--ink-soft);
}

.acp-lang__paneel .acp-lang__naar:hover,
.acp-lang__paneel .acp-lang__naar:focus-visible {
	color: var(--wp--preset--color--signal);
}

/* In de voettekst staat de schakelaar onder een kopje, tussen de andere
   lijsten. Daar is hij een kolom en erft hij de kleuren van de footer. */
.acp-lang--lijst {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	margin-top: 1rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: inherit;
	letter-spacing: normal;
}

.acp-footer .acp-lang--lijst .acp-lang__nu {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 45%, transparent);
}

/* ============================================================ Grootboek */

/* Haarlijn met een label erop, zoals een kolomkop in een staat. */
.acp-rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
}

.acp-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--rule);
}

/* Bovenaan een sectie zorgt de sectie zelf voor de ruimte eromheen — daar is
   margin:0 juist goed. Maar staat de haarlijn middenin een lopende kolom, dan
   opent hij een nieuw onderdeel en plakt hij nu tegen de alinea erboven: die
   margin:0 wist óók de afstand die WordPress tussen broers en zussen zet.
   Alleen in dat geval geven we de ruimte gericht terug. */
:where(.is-layout-flow, .is-layout-constrained) > * + .acp-rule {
	margin-top: var(--wp--preset--spacing--50);
}

/* Na een scheidingslijn niet: die heeft zijn eigen ruimte al meegebracht en
   samen worden het twee gaten achter elkaar. */
:where(.is-layout-flow, .is-layout-constrained) > .wp-block-separator + .acp-rule {
	margin-top: 0;
}

/* Genummerde reeks: het cijfer staat buiten de tekstkolom, als regelnummer. */
.acp-numbered {
	counter-reset: acp-line;
}

.acp-numbered > * {
	position: relative;
	counter-increment: acp-line;
}

/* Het volgnummer is een label, geen bedrag: het telt de regels, er valt niets
   aan uit te lijnen. Daarom sans, net als de andere labels. */
.acp-numbered > *::before {
	content: counter(acp-line, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--signal);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

/* Cijfer met gewicht: prijzen, percentages, uren. */
.acp-figure {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 1.6rem + 4vw, 4.25rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums lining-nums;
}

.acp-figure sup,
.acp-figure small {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.3em;
	font-weight: 500;
	letter-spacing: 0.06em;
	vertical-align: super;
	color: var(--wp--preset--color--ink-faint);
}

/* Meta-label: klein, halfvet, licht gespatieerd. Dit is het label dat het
   vaakst voorkomt — tientallen keren op één pagina — en juist daarom moet het
   de rustigste vorm hebben die nog leesbaar is. */
.acp-meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
}

/* Hoofdletters werken tot een handvol woorden. Staat er een hele zin, dan
   blijft die in gewone zetting: een voetnoot hoort leesbaar te zijn, niet
   geschreeuwd. */
.acp-meta--zin {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	line-height: 1.6;
}

/* ================================================================== Hero */

.acp-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Ruitjespapier, heel licht — geeft het vlak textuur zonder ruis.
   De vervaging loopt tot voorbij de rand door, zodat het raster nergens
   met een zichtbare rechte kant ophoudt. */
.acp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--wp--preset--color--rule) 1px, transparent 1px),
		linear-gradient(to bottom, var(--wp--preset--color--rule) 1px, transparent 1px);
	background-size: 88px 88px;
	opacity: 0.32;
	mask-image: radial-gradient(140% 120% at 50% -10%, #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 100%);
	-webkit-mask-image: radial-gradient(140% 120% at 50% -10%, #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 100%);
	pointer-events: none;
}

.acp-hero > * {
	position: relative;
	z-index: 1;
}

/* Eén geënsceneerde opkomst bij het laden; daarna laat de pagina je met rust. */
.acp-reveal > * {
	animation: acp-rise 0.7s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

.acp-reveal > *:nth-child(1) { animation-delay: 0.02s; }
.acp-reveal > *:nth-child(2) { animation-delay: 0.10s; }
.acp-reveal > *:nth-child(3) { animation-delay: 0.18s; }
.acp-reveal > *:nth-child(4) { animation-delay: 0.26s; }
.acp-reveal > *:nth-child(5) { animation-delay: 0.34s; }
.acp-reveal > *:nth-child(6) { animation-delay: 0.42s; }

@keyframes acp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Accent in de kop: cursieve serif in signaalkleur. */
.acp-accent {
	font-style: italic;
	color: var(--wp--preset--color--signal);
}

/* ================================================================ Panelen */

/* Het "staat"-paneel: een lijst regels met bedragen, uitgelijnd op de rand. */
.acp-ledger {
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--lift);
}

.acp-ledger__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.95rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.acp-ledger__row:last-child {
	border-bottom: 0;
}

.acp-ledger__row:nth-child(even) {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 55%, transparent);
}

/* Het label mag krimpen tot de beschikbare ruimte, maar niet verder dan zijn
   woorden: zonder min-width:0 en met een nowrap-bedrag ernaast perst flexbox
   de tekst anders letter voor letter af. */
.acp-ledger__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ink-soft);
	overflow-wrap: break-word;
}

.acp-ledger__label strong {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.acp-ledger__value {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Op smalle kolommen onder elkaar in plaats van naast elkaar. */
@media (max-width: 640px) {
	.acp-ledger__row {
		flex-direction: column;
		gap: 0.35rem;
	}
}

.acp-ledger__value--signal { color: var(--wp--preset--color--signal); }
.acp-ledger__value--forest { color: var(--wp--preset--color--forest); }

/* ------------------------------------------------ Hero-paneel: verdieping */

/* Warme gloed achter het paneel: signaal rechtsboven, bos linksonder, beide
   zó licht dat je ze pas ziet als ze weg zijn. Ligt ónder het raster. */
.acp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(42rem 30rem at 82% 38%, color-mix(in srgb, var(--wp--preset--color--signal) 9%, transparent) 0%, transparent 70%),
		radial-gradient(34rem 26rem at 8% 92%, color-mix(in srgb, var(--wp--preset--color--forest) 7%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

/* Korte signaalstreep vóór het eerste label in de hero-kolom. */
.acp-hero .acp-reveal > .acp-meta:first-child {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.acp-hero .acp-reveal > .acp-meta:first-child::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: var(--wp--preset--color--signal);
}

/* Het paneel in de hero: een blad met een tweede blad erachter, een
   accentrand bovenaan en een diepere schaduw dan de kaarten verderop. */
.acp-hero .acp-ledger {
	position: relative;
	border-top: 3px solid var(--wp--preset--color--signal);
	box-shadow: var(--wp--preset--shadow--deep);
}
.acp-hero .acp-ledger::before {
	content: "";
	position: absolute;
	inset: 0.75rem -0.75rem -0.75rem 0.75rem;
	z-index: -1;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--paper-deep);
	opacity: 0.8;
}
.acp-hero .acp-ledger__row:first-child {
	background: var(--wp--preset--color--paper);
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}
/* Groene stip vóór de maand: "dit is de stand van nu". */
.acp-hero .acp-ledger__row:first-child .acp-meta:first-child::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--forest);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--forest) 18%, transparent);
	vertical-align: 1px;
}
.acp-hero .acp-ledger__row:first-child .acp-meta:last-child {
	color: var(--wp--preset--color--ink);
}
.acp-hero .acp-ledger__value {
	font-size: 1.0625rem;
}

/* Voortgangsbalk onder een regel (budget verbruikt). --p = percentage. */
.acp-ledger__bar {
	display: block;
	width: 100%;
	height: 4px;
	margin-top: 0.6rem;
	background: var(--wp--preset--color--rule);
	overflow: hidden;
}
.acp-ledger__bar i {
	display: block;
	height: 100%;
	width: var(--p, 0%);
	background: linear-gradient(90deg, var(--wp--preset--color--forest), var(--wp--preset--color--signal));
	transform-origin: left;
	animation: acp-bar 1.1s 0.55s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}
@keyframes acp-bar {
	from { transform: scaleX(0); }
	to   { transform: none; }
}

/* De regels komen één voor één op, ná de tekstkolom. */
.acp-hero .acp-ledger__row {
	animation: acp-rise 0.6s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}
.acp-hero .acp-ledger__row:nth-child(1) { animation-delay: 0.30s; }
.acp-hero .acp-ledger__row:nth-child(2) { animation-delay: 0.38s; }
.acp-hero .acp-ledger__row:nth-child(3) { animation-delay: 0.46s; }
.acp-hero .acp-ledger__row:nth-child(4) { animation-delay: 0.54s; }
.acp-hero .acp-ledger__row:nth-child(5) { animation-delay: 0.62s; }

@media (prefers-reduced-motion: reduce) {
	.acp-hero .acp-ledger__row,
	.acp-ledger__bar i,
	.acp-reveal > * { animation: none; }
}
@media (max-width: 781px) {
	.acp-hero .acp-ledger::before { inset: 0.5rem -0.5rem -0.5rem 0.5rem; }
}

/* Kaart: rand in plaats van schaduw. De lift komt pas bij hover. */
.acp-card {
	position: relative;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--rule);
	padding: 1.75rem;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.acp-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--signal) 40%, var(--wp--preset--color--rule));
	box-shadow: var(--wp--preset--shadow--lift);
}

/* Streepje linksboven als accent; groeit mee bij hover. */
.acp-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--signal);
	transition: width 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.acp-card:hover::before {
	width: 64px;
}

/* ================================================================ Titels */

/* Kaarttitels staan in de schreefloze letter (theme.json). Eén uitzondering:
   in de donkere sectie zijn de h3's geen titels maar vragen die je hardop
   stelt — geciteerde tekst dus. Daar doet de serif wat hij hoort te doen,
   en omdat het er vier zijn op de hele pagina blijft het een accent in plaats
   van een tweede lettertype dat overal meeloopt. */
.acp-on-ink .acp-grid :where(h3) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* Een kop die toevallig een link is, blijft een kop: inkt, niet signaalkleur.
   Die is gereserveerd voor dingen waar je op klikt om iets te dóen. */
.wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--signal), var(--wp--preset--color--signal));
	background-size: 0% 1px;
	background-position: left 92%;
	background-repeat: no-repeat;
	transition: background-size 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.2s ease;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--signal);
	background-size: 100% 1px;
}

/* ============================================================== Inhoud */

.acp-prose {
	max-width: 68ch;
}

.acp-prose :where(h2) { margin-top: 3rem; }
.acp-prose :where(h3) { margin-top: 2.25rem; }
.acp-prose :where(h4) { margin-top: 1.75rem; }

.acp-prose :where(p, li) {
	color: var(--wp--preset--color--ink-soft);
}

.acp-prose :where(ul, ol) {
	padding-left: 1.35rem;
}

.acp-prose :where(li) + :where(li) {
	margin-top: 0.45rem;
}

.acp-prose :where(li)::marker {
	color: var(--wp--preset--color--signal);
}

/* Tabellen krijgen het grootboek-uiterlijk: alleen horizontale lijnen. */
.acp-prose :where(table),
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.wp-block-table :where(th, td) {
	padding: 0.7rem 0.9rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	text-align: left;
}

.wp-block-table :where(th) {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
	border-bottom-color: var(--wp--preset--color--ink);
}

/* Brede tabellen scrollen zelf; de pagina blijft staan. */
.wp-block-table {
	overflow-x: auto;
}

/* Op een telefoon is een tabel van vijf kolommen geen tabel meer: hij wordt
   geplet tot onleesbaar (table blijft namelijk width:100%, dus scrollen komt er
   niet eens van). Daarom valt de tabelvorm hier weg en wordt elke RIJ een
   blokje: de eerste cel is de kop, daaronder staat per kolom het label met de
   waarde. Die labels komen uit de kolomkoppen en worden bij het renderen als
   data-label meegegeven — zie adcompro_tabel_kolomlabels() in functions.php. */
@media (max-width: 640px) {
	.acp-table--stack table,
	.acp-table--stack tbody,
	.acp-table--stack tr,
	.acp-table--stack td {
		display: block;
		width: 100%;
	}

	/* De koprij staat nu per cel; als rij is hij overbodig. */
	.acp-table--stack thead {
		display: none;
	}

	.acp-table--stack tr {
		padding: 0.9rem 0;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}

	.acp-table--stack tr:last-child {
		border-bottom: 0;
	}

	.acp-table--stack td {
		padding: 0.15rem 0;
		border: 0;
	}

	.acp-table--stack td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.72rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink-faint);
	}

	/* De eerste cel is de naam van de rij, geen label/waarde-paar. */
	.acp-table--stack td:first-child {
		margin-bottom: 0.45rem;
		font-weight: 600;
		font-size: 1rem;
	}

	.acp-table--stack td:first-child::before {
		content: none;
	}

	/* Vier of meer kolommen (de vergelijkingstabel): de waarden zijn kort — een
	   vinkje of een pakketnaam — dus label links, waarde rechts. Dat scheelt de
	   helft aan hoogte tegenover label-boven-waarde. */
	.acp-table--wide td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.28rem 0;
		text-align: right;
	}

	.acp-table--wide td::before {
		flex: 0 0 auto;
		text-transform: none;
		letter-spacing: 0.02em;
		font-size: 0.82rem;
	}

	.acp-table--wide td:first-child {
		display: block;
		text-align: left;
	}
}

.acp-prose :where(img) {
	border: 1px solid var(--wp--preset--color--rule);
}

/* ============================================================== Op inkt */

.acp-on-ink {
	color: var(--wp--preset--color--paper);
}

.acp-on-ink :where(h1, h2, h3, h4, strong) {
	color: var(--wp--preset--color--paper);
}

.acp-on-ink :where(p, li) {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 78%, transparent);
}

.acp-on-ink :where(a) {
	color: var(--wp--preset--color--paper);
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--paper) 45%, transparent);
	text-underline-offset: 0.2em;
}

.acp-on-ink :where(a):hover {
	text-decoration-color: currentColor;
}

.acp-on-ink .acp-meta,
.acp-on-ink .acp-rule {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 62%, transparent);
}

.acp-on-ink .acp-rule::after {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 22%, transparent);
}

/* ================================================================ Footer */

.acp-footer {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 14%, transparent);
}

/* Footerlijsten zijn navigatie, geen opsomming — dus geen bolletjes. */
.acp-footer :where(ul) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acp-footer :where(li) + :where(li) {
	margin-top: 0.55rem;
}

.acp-footer :where(a) {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 72%, transparent);
	text-decoration: none;
}

.acp-footer :where(a):hover {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ================================================================ Knoppen */

.wp-block-button__link {
	transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

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

/* Omlijnd, voor secundaire acties. */
.wp-block-button.is-style-acp-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
}

.wp-block-button.is-style-acp-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Omlijnd op donkere grond. */
.acp-on-ink .wp-block-button.is-style-acp-outline .wp-block-button__link {
	color: var(--wp--preset--color--paper);
	border-color: color-mix(in srgb, var(--wp--preset--color--paper) 55%, transparent);
}

.acp-on-ink .wp-block-button.is-style-acp-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--paper);
}

/* Tekstknop met pijl, voor tertiaire acties. */
.wp-block-button.is-style-acp-link .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--signal);
	padding-inline: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
}

.wp-block-button.is-style-acp-link .wp-block-button__link::after {
	content: " \2192";
	transition: margin-left 0.22s ease;
}

.wp-block-button.is-style-acp-link .wp-block-button__link:hover::after {
	margin-left: 0.3em;
}

/* ================================================================ Formulier */

.acp-field {
	display: block;
	margin-bottom: 1.1rem;
}

.acp-field > label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
}

.acp-field input[type="text"],
.acp-field input[type="email"],
.acp-field input[type="tel"],
.acp-field input[type="number"],
.acp-field select,
.acp-field textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.acp-field input:focus,
.acp-field select:focus,
.acp-field textarea:focus {
	border-color: var(--wp--preset--color--signal);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--signal) 16%, transparent);
	outline: none;
}

.acp-field small {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-faint);
}

/* Vaste achtervoegsels, zoals ".adcompro.app" achter het subdomein. */
.acp-affix {
	display: flex;
	align-items: stretch;
}

.acp-affix input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.acp-affix__tag {
	display: flex;
	align-items: center;
	padding: 0 0.9rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-faint);
	background: var(--wp--preset--color--paper-deep);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 0;
	white-space: nowrap;
}

/* ================================================================ Diversen */

.acp-grid {
	display: grid;
	gap: 1px;
	background: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
}

/* Rasterlijnen ontstaan uit de 1px gap — geen dubbele randen. */
.acp-grid > * {
	background: var(--wp--preset--color--paper);
	padding: 1.75rem;
}

@media (min-width: 782px) {
	.acp-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.acp-grid--2 { grid-template-columns: repeat(2, 1fr); }
	/* Vier naast elkaar wordt op een tablet te smal om te lezen; daar blijft
	   het bij twee kolommen staan tot er echt ruimte is. */
	.acp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
	.acp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Op een donkere sectie loopt het raster mee in de donkere tint, anders staat
   er een wit vlak midden in de zwarte band. */
.acp-on-ink .acp-grid {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 16%, var(--wp--preset--color--ink));
	border-color: color-mix(in srgb, var(--wp--preset--color--paper) 16%, var(--wp--preset--color--ink));
}
.acp-on-ink .acp-grid > * {
	background: var(--wp--preset--color--ink);
}

/* De editor toont dezelfde breedtes als de voorkant. */
.editor-styles-wrapper .acp-prose {
	max-width: 68ch;
}

/* ===== Handboek (/nl/handboek): opmaak van de hoofdstukinhoud ===== */
.hb-inhoud{font-size:1.02rem;line-height:1.62;}
.hb-inhoud h3{font-size:1.35rem;margin:2.1rem 0 .5rem;letter-spacing:-.01em;}
.hb-inhoud h4{font-size:1.05rem;margin:1.5rem 0 .4rem;}
.hb-inhoud p{margin:0 0 .9rem;max-width:74ch;}
.hb-inhoud ul,.hb-inhoud ol{margin:0 0 1rem;padding-left:1.4rem;max-width:74ch;}
.hb-inhoud li{margin:.25rem 0;}
.hb-inhoud code{background:#f2f4f8;padding:.1em .35em;border-radius:4px;font-size:.88em;}
.hb-inhoud b.ui{background:#eef1f5;border:1px solid #cfd6e0;border-radius:5px;padding:1px 6px;font-weight:600;font-size:.86em;white-space:nowrap;}
.hb-inhoud .tabelwrap{overflow-x:auto;margin:.9rem 0 1.4rem;border:1px solid #e2e7ee;border-radius:10px;background:#fff;}
.hb-inhoud table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:560px;margin:0;}
.hb-inhoud th{text-align:left;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:#6b7684;padding:10px 14px;border-bottom:1px solid #e2e7ee;background:#f7f8fa;font-weight:600;white-space:nowrap;}
.hb-inhoud td{padding:9px 14px;border-bottom:1px solid #e2e7ee;vertical-align:top;color:#3d4855;}
.hb-inhoud tr:last-child td{border-bottom:0;}
.hb-inhoud td:first-child{color:#151d28;font-weight:600;white-space:nowrap;}
.hb-inhoud td.vrij:first-child{white-space:normal;}
.hb-inhoud table.breed td:first-child{width:210px;}
.hb-inhoud .let,.hb-inhoud .tip,.hb-inhoud .rol{border-radius:9px;padding:13px 16px;margin:1.1rem 0;font-size:.94rem;max-width:74ch;}
.hb-inhoud .let{background:#fdf0e8;border-left:3px solid #c2551f;}
.hb-inhoud .tip{background:#e8f6ee;border-left:3px solid #1a7f4b;}
.hb-inhoud .rol{background:#eaefff;border-left:3px solid #1f4fd8;}
.hb-inhoud .let p:last-child,.hb-inhoud .tip p:last-child,.hb-inhoud .rol p:last-child{margin-bottom:0;}
.hb-inhoud .pad{font-size:.82rem;color:#6b7684;margin:-.2rem 0 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.hb-inhoud .pad b{color:#3d4855;font-weight:600;}

/* ===== Schermafbeeldingen uit het handboek: subtiel tonen, vergroten via klik ===== */
.hb-schermafbeelding{max-width:640px;margin-left:auto;margin-right:auto;}
.hb-schermafbeelding img{border:1px solid #d9dee6;border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.06);cursor:zoom-in;}
.hb-schermafbeelding figcaption{text-align:center;font-size:.82rem;color:#6b7684;}

/* ============================================================== Nieuws */

/* Het overzicht: kaarten onder elkaar, in de leesbreedte van de tekstkolom.
   Titel als kop die je aanklikt (zelfde onderstreep-animatie als post-title),
   datum erboven als meta, samenvatting eronder. */
.acp-nieuws {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.acp-nieuws__titel {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

.acp-nieuws__titel a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--signal), var(--wp--preset--color--signal));
	background-size: 0% 1px;
	background-position: left 92%;
	background-repeat: no-repeat;
	transition: background-size 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.2s ease;
}

.acp-nieuws__titel a:hover {
	color: var(--wp--preset--color--signal);
	background-size: 100% 1px;
}

.acp-nieuws__samenvatting {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
}

.acp-nieuws__link {
	margin: 1rem 0 0;
	font-weight: 600;
}