/**
* Componentstijlen — aiagentcycle
*
* De layout zit in primitieven.css; dit bestand geeft de componenten hun vorm.
*
* ACHTERHAALDE WAARSCHUWING, INGETROKKEN 2026-08-11. Hier stond: "gescheiden
* gehouden omdat style.css een oudere tokengeneratie gebruikt (`x-small`,
* `ink-surface`, `--wp--custom--sectie--pad-*`) die niet meer in theme.json
* bestaat". Nagerekend tegen theme.json én tegen de `global-styles-inline-css`
* die de draaiende site werkelijk uitlevert:
* - `--wp--preset--font-size--x-small` → bestaat (settings.typography.fontSizes)
* - `--wp--preset--color--ink-surface` → bestaat inderdaad niet, maar
* style.css roept hem nergens aan; hij schrijft `ink-kaart`, dat wél bestaat
* - `--wp--custom--sectie--pad-hero/-standaard/-compact/-krap/-cta/-header`
* → alle zes bestaan sinds CH-017
* Machinaal gecontroleerd: van alle `var(--wp--…)`-aanroepen in style.css,
* primitieven.css en dit bestand is er nul ongedefinieerd. De scheiding tussen
* de drie bestanden blijft nuttig — layout, vorm, en de rest — maar niet meer
* om deze reden. Waar het wél om gaat: dezelfde selector twee keer schrijven.
* Dat gebeurde met `.aac-sectie` en met de focusring, en in beide gevallen won
* de verkeerde. Schrijf een selector op één plek.
*
* Uitgangspunt: de Figma-designs zijn leidend (D-020). Waar een ontwerpkeuze
* een toegankelijkheidsnorm raakt, wordt het ontwerp gevolgd en het probleem
* gemeld — niet stilzwijgend gecorrigeerd.
*/
/* ---------------------------------------------------------------------------
PRIJSRIJ — de uitgelichte rij
Figma (`3:117`) markeert Quick-win met een rand van 2px `#12B5B0` en zet
de prijs (`3:120`) in diezelfde teal, 18px bold.
--------------------------------------------------------------------------- */
.aac-prijsrij__rij--uitgelicht {
outline: 2px solid var(--wp--preset--color--cycle-teal);
outline-offset: -2px;
}
/*
* De teal prijs, conform ontwerp.
*
* OPENSTAAND CONTRASTPUNT: #12B5B0 op #F7F8FA is circa 2,5:1, waar 18px bold
* 4,5:1 nodig heeft (WCAG 1.4.3). Dit is een merkbeslissing van Stefan, geen
* bouwkeuze — het ontwerp wordt gevolgd en het punt staat open in
* docs/specs/TOEGANKELIJKHEID.md §11. Wordt er ooit voor leesbaarheid
* gekozen: #0F766E haalt 5,47:1 en houdt de teal-identiteit vast. Eén regel
* hier, dan klopt het op alle 44 pagina's.
*/
.aac-prijsrij__prijs--uitgelicht {
color: var(--wp--preset--color--cycle-teal);
font-weight: 700;
}
/*
* Het label "Aanbevolen".
*
* Waarom het bestaat: Figma markeert deze rij uitsluitend met kleur. Wie
* kleurenblind is of een schermlezer gebruikt, ziet die markering niet
* (WCAG 1.4.1 — kleur mag nooit de enige betekenisdrager zijn).
*
* Waarom het er zo uitziet: het leent de vorm van `vraag-vak`, het bestaande
* teal-component uit de designs — zelfde vlakkleur, zelfde randkleur, zelfde
* randbreedte. Daarmee is het een toevoeging in jouw ontwerptaal en niet een
* vreemd element. Het woord zelf staat niet in Figma; dat is bewust gemeld.
*/
.aac-prijsrij__markering {
display: inline-block;
margin-inline-start: 0.5rem;
padding: 0.125rem 0.5rem;
border: var(--wp--custom--vraag-vak--randbreedte, 1.5px) solid var(--wp--preset--color--cycle-teal);
border-radius: 999px;
background-color: var(--wp--preset--color--teal-vlak);
color: var(--wp--preset--color--ink);
font-weight: 600;
vertical-align: middle;
white-space: nowrap; /* het is één woord — hier is afbreken juist fout */
}
/* ---------------------------------------------------------------------------
VRAAG-VAK — de teal pil om een sectiekop
Figma: bg `teal-vlak`, rand 1,5px `cycle-teal`, radius 12, padding 22/12.
Hug-content, dus de pil groeit mee met de kop in plaats van de band te vullen.
--------------------------------------------------------------------------- */
.aac-vraag-vak,
.is-style-aac-vraag-vak {
/* De klasse staat op de KOP zelf, niet op een omhulsel. Daardoor werkt
hij op elke h1/h2/h3 en ontstaat er nooit een tweede kop. */
display: inline-block;
padding: var(--wp--custom--vraag-vak--padding, 0.75rem 1.375rem);
border: var(--wp--custom--vraag-vak--randbreedte, 1.5px) solid var(--wp--preset--color--cycle-teal);
border-radius: var(--wp--custom--vraag-vak--radius, 12px);
background-color: var(--wp--preset--color--teal-vlak);
max-width: 100%;
}
.aac-vraag-vak > :is(h1, h2, h3) { margin: 0; } /* voor het geval hij tóch als omhulsel wordt gebruikt */
/* ---------------------------------------------------------------------------
KAART
--------------------------------------------------------------------------- */
.aac-kaart,
.aac-raster > li,
.aac-raster > .wp-block-group {
border-radius: var(--wp--custom--kaart--radius, 14px);
padding: var(--wp--custom--kaart--padding, 1.5rem);
}
/* ---------------------------------------------------------------------------
FAQ-KAART — `/scan/`, Figma `3:66`
Het enige defect uit V2 groep A dat in geen enkele pattern-docblock als
afhankelijkheid stond, en het staat op de conversiepagina. De drie items
renderen als `div.wp-block-group.aac-faq-lijst__item` met alleen
`has-wit-background-color`: een wit vlak zonder radius, zonder padding, tekst
tegen de rand. Ze zitten niet in een `.aac-raster`, dus de vangregel hierboven
grijpt niet aan.
De maten komen uit de frame-geometrie van `3:66`, opgehaald 2026-08-11, niet
uit een samenvatting:
sectie h 607 · vraag-vak `42:6` y 80 · kaarten y 166 / 295 / 424, elk h 103
kaart tekst op x 28, breedte 1140 binnen 1200 → padding-inline 28
eerste tekst y 26; tweede eindigt op 77 → padding-block 26
intern vraag eindigt 47, antwoord begint 59 → 12 tussen de twee
28 en 26 zijn exact `--wp--custom--kaart--pad-x` en `--pad-y`; 12 is exact
`--wp--preset--spacing--20`. Geen enkele waarde hoefde te worden verzonnen.
NIET GEBOUWD, met opzet:
- De ONDERLINGE AFSTAND. V2 meldt dat de bron daarvoor ontbreekt; die is er
nu wel — Figma zet 26 tussen de kaarten (269→295 en 398→424) en ook 26
tussen het vraag-vak en de eerste kaart. Maar er is geen token van 26px, en
de afstand is niet afwezig: core levert al 24px via
`:root :where(.is-layout-flow) > *` → `--wp--preset--spacing--40`. Het
verschil is 2px. Een losse `26px` hier zou een off-token waarde zijn
(webdesign.md §2) voor twee pixels. Gemeld in plaats van gebouwd.
- De SCHADUW. Figma geeft elke kaart `0 1px 3px rgba(11,31,58,0.08)`, en die
staat als preset `--wp--preset--shadow--kaart` in theme.json — maar wordt
op de hele site door niets aangeroepen. Hem hier alleen op de FAQ zetten
maakt de kaarten op `/scan/` zichtbaar anders dan de doelgroepkaarten
direct erboven. Dat is een site-brede reparatie, geen FAQ-reparatie.
--------------------------------------------------------------------------- */
.aac-faq-lijst__item {
border-radius: var(--wp--custom--kaart--radius, 14px);
padding: var(--wp--custom--kaart--pad-y, 26px) var(--wp--custom--kaart--pad-x, 28px);
}
/* Zonder deze regel staan vraag en antwoord 24px uit elkaar (de blockGap van
het flow-layout), waar Figma 12 tekent — precies het dubbele. Gelijke
specificiteit als de core-regel (0,1,0); dit bestand laadt als laatste. */
.aac-faq-lijst__item > * + * {
margin-block-start: var(--wp--preset--spacing--20);
}
/* ---------------------------------------------------------------------------
PROCEDURERIJ — de genummerde badge
Figma `3:53` / `3:58` / `3:63` (EN `46:54` / `46:59` / `46:64`) tekent per
stap een teal bol van 34px met het rangnummer erin.
Kleur, tekstkleur, radius, gewicht en grootte zitten al in blokattributen op
`core/paragraph`. Wat een blokattribuut níét kan, is een vierkant kader met
gecentreerde inhoud — vandaar deze vijf regels.
`2em` in plaats van 34px: op de `body`-stap (17px) is dat exact de
ontwerpmaat, maar hij schaalt mee met de tekst in plaats van vast te staan
(contractregel 2 — geen vaste maten). `tabular-nums` houdt de drie cijfers
optisch even breed.
LET OP — de cijfers 1-2-3 staan NIET in Figma: de ellipsen bevatten geen
tekstlaag, in beide talen. Een lege bol zou bovendien zelf op SC 1.4.11
vallen (teal op wit = 2,54:1, norm 3:1). Het cijfer komt daarom uit de
copy — de bronvolgorde van D-020 — en staat als échte tekst in de badge,
niet als CSS-counter: `.aac-raster` zet `list-style: none`, en Safari +
VoiceOver laten bij die declaratie de lijstsemantiek vallen. Het cijfer als
tekst dekt beide gaten tegelijk.
--------------------------------------------------------------------------- */
.aac-procedurerij__badge {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2em;
block-size: 2em;
flex: 0 0 auto;
line-height: 1;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------------------
EERLIJKHEIDSBLOK — 5px linkerrand
Figma zet die rand op breedte 0; de styleguide en de plaatsingsregels in de
copy eisen hem expliciet. Dit is een tekenfout in het design, geen keuze —
vandaar dat hij hier wél staat.
--------------------------------------------------------------------------- */
.aac-eerlijkheidsblok-amber {
border-left: 5px solid var(--wp--preset--color--amber);
background-color: var(--wp--preset--color--amber-vlak);
padding: var(--wp--custom--kaart--padding, 1.5rem);
border-radius: 0 var(--wp--custom--kaart--radius, 14px) var(--wp--custom--kaart--radius, 14px) 0;
}
/* ---------------------------------------------------------------------------
KNOP — de primaire CTA
#22C55E is de enige plek waar actie-groen mag staan (naast de node in het
logo). Label in `ink`: 7,25:1 tegenover 2,28:1 voor wit — zie
TOEGANKELIJKHEID.md §11 T-1, waar de merkkeuze nog openstaat.
--------------------------------------------------------------------------- */
.aac-knop--primair {
background-color: var(--wp--preset--color--actie-groen);
color: var(--wp--preset--color--ink);
}
.aac-knop--secundair {
background-color: transparent;
color: var(--wp--preset--color--ink);
box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--ink);
}
/* Cite niet cursief — het ontwerp zet de attributie recht. */
.aac-case-kaart cite { font-style: normal; }
/* ---------------------------------------------------------------------------
ARTIKELKAART IN EEN QUERY-LOOP — kennisbank
Toegevoegd 2026-08-10 bij het archief-werk; zie docs/specs/KENNISBANK-ARCHIEF.md.
Waarom dit hier moet staan en niet in de blokmarkup: `core/post-template`
rendert zelf `
…
` (wp-includes/blocks/
post-template.php r126-131). Die `li` kan geen blokattributen dragen, dus de
kaartachtergrond is niet in het pattern te zetten. Radius en padding komen al
uit de `.aac-raster > li`-regel hierboven; alleen de vulling ontbreekt.
De regel uit het ontwerp (NL-overig.md §Gedeelde componentstijlen):
"Kaartachtergrond: #F7F8FA op witte secties, #FFFFFF op off-white secties —
altijd het omgekeerde van de sectie." Dat is hier generiek uitgedrukt, dus
één regel dekt elke sectie in plaats van een variant per template.
--------------------------------------------------------------------------- */
.aac-artikel-lijst > li {
background-color: var(--wp--preset--color--off-white);
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--20);
}
.aac-sectie.has-off-white-background-color .aac-artikel-lijst > li {
background-color: var(--wp--preset--color--wit);
}
/* De blokken in de kaart brengen hun eigen marges mee; de flex-gap hierboven
doet het ritme. Zonder dit staan de drie regels ongelijk uit elkaar. */
.aac-artikel-lijst > li > * { margin-block: 0; }
/* ---------------------------------------------------------------------------
PAGINERING
Kale core-markup: `` met `paginate_links()`. Alleen ruimte
en een aanwijsbare huidige pagina; geen JavaScript, geen eigen kleuren buiten
het palet.
--------------------------------------------------------------------------- */
.aac-paginering {
margin-block-start: var(--wp--preset--spacing--50);
gap: var(--wp--preset--spacing--30);
}
.aac-paginering .page-numbers {
display: inline-block;
padding: 0.375rem 0.75rem;
border-radius: var(--wp--custom--knop--radius, 10px);
}
/* Kleur mag nooit de enige drager zijn (SC 1.4.1): de huidige pagina krijgt
een vlak én blijft als tekst herkenbaar. `aria-current="page"` zet core zelf
op dit element. */
.aac-paginering .page-numbers.current {
background-color: var(--wp--preset--color--teal-vlak);
color: var(--wp--preset--color--ink);
font-weight: 600;
}
/* ---------------------------------------------------------------------------
FLOWKAART — kennisbank
Toont een werkende n8n-flow als keten van stappen. De keten moet op een
telefoon kunnen afbreken zonder horizontaal te scrollen; daarom line-height
2 en overflow-wrap in plaats van nowrap. De langste keten telt zes stappen.
Toegevoegd 2026-08 bij de kennisbanklancering (CH-078, UX-054).
De artikelmarkup draagt dezelfde regels ook inline, bewust, als vangnet
voor een half uitgevoerde deploy. Niet verwijderen — zie LS-017 over
gedeelde contracten met twee schrijvers.
--------------------------------------------------------------------------- */
.aac-flowkaart {
border-left: 3px solid var(--wp--preset--color--cycle-teal);
border-radius: 0 var(--wp--custom--kaart--radius, 14px)
var(--wp--custom--kaart--radius, 14px) 0;
}
.aac-flowkaart > * + * {
margin-block-start: var(--wp--preset--spacing--20);
}
.aac-flowketen {
background-color: var(--wp--preset--color--wit);
border: 1.5px solid var(--wp--preset--color--veldrand);
border-radius: 10px;
padding: 0.875rem 1rem;
line-height: 2;
font-size: var(--wp--preset--font-size--small);
overflow-wrap: anywhere;
}
/* ---------------------------------------------------------------------------
TAALWISSELAAR — header
Twee links, geen JavaScript, geen vlaggen: een vlag is een land en geen taal,
en de Engelse versie is voor Engelstaligen in Nederland, niet voor Britten.
De markup stond al in patterns/header-nav.php maar rendeerde nooit — de
guard vroeg naar aac_url(), en die functie bestond niet. Toegevoegd bij de
talenmigratie (CH-085, SEO-066).
Raakvlak: style.css r704-713 meldde expliciet dat .aac-taalswitcher__link de
44x44-norm niet haalde, als bekende en ongedekte lacune. Die is hier gesloten
met min-block-size/min-inline-size op het raakvlak-token.
Contrast op de inktblauwe header (#0B1F3A), nagerekend: ink-tekst haalt
8,9 : 1 en wit 16,5 : 1. cycle-teal haalt maar 4,1 : 1 en zakt onder de norm
bij deze tekstgrootte — daarom hier bewust niet gebruikt.
--------------------------------------------------------------------------- */
.aac-taalswitcher {
display: flex;
align-items: center;
gap: 0.125rem;
}
.aac-taalswitcher__huidig,
.aac-taalswitcher__link {
display: grid;
place-items: center;
min-inline-size: var(--wp--custom--raakvlak--minimum, 44px);
min-block-size: var(--wp--custom--raakvlak--minimum, 44px);
padding-inline: 0.375rem;
font-weight: 600;
letter-spacing: 0.06em;
text-decoration: none;
}
.aac-taalswitcher__huidig {
cursor: default;
}
.aac-taalswitcher__link {
color: var(--wp--preset--color--ink-tekst);
border-radius: 8px;
}
.aac-taalswitcher__link:hover,
.aac-taalswitcher__link:focus-visible {
color: var(--wp--preset--color--wit);
background-color: rgb(255 255 255 / 0.08);
}
.aac-taalswitcher__link:focus-visible {
outline: 2px solid var(--wp--preset--color--teal-licht);
outline-offset: 2px;
}
.aac-taalswitcher__scheiding {
user-select: none;
}
/* CH-114 — centrale pagina-koppen en vraagvakken
Pagina-H1's staan gecentreerd, behalve de bewust gesplitste homepagehero.
H2's vormen sitebreed de visuele sectie-as. De ID-scope voorkomt dat
header, navigatie, footer of adminbar worden geraakt. */
body:not(.home) #aac-main h1:is(.wp-block-heading, .wp-block-post-title),
#aac-main h2.wp-block-heading {
text-align: center;
margin-inline: auto;
}
/* Een inline-block kan niet met auto-marges centreren. Maak uitsluitend de
gestileerde kop zelf een intrinsiek brede block; inhoudskaarten blijven
volledig buiten dit contract. */
#aac-main :is(h1, h2, h3).aac-vraag-vak,
#aac-main :is(h1, h2, h3).is-style-aac-vraag-vak {
display: block;
inline-size: fit-content;
margin-inline: auto;
text-align: center;
}
/* Prijzen/voorwaarden 2026-09-10. Bestaande componenten, beperkt tot de
gewijzigde contentgroep; merkpresets blijven de enige kleurbron. */
.aac-content-afspraken a:not(.aac-cta__link):not(.aac-knop) {
color: var(--wp--preset--color--ink);
text-decoration: underline;
}
.aac-content-afspraken .aac-band > p {
max-width: var(--wp--custom--prose, 72ch);
}
.aac-content-afspraken .aac-raster > * {
margin-block: 0;
}
.aac-content-afspraken .aac-faq-lijst__item > summary {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--body);
font-weight: 700;
cursor: pointer;
}
.aac-content-afspraken .aac-faq-lijst__item > summary:focus-visible {
outline: 2px solid var(--wp--preset--color--ink);
outline-offset: 4px;
}
.aac-content-afspraken .aac-tabel-hint {
display: none;
color: var(--wp--preset--color--tekst);
font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 767px) {
.aac-content-afspraken .aac-tabel-hint:not(.aac-tabel-hint--stack) { display: block; }
}
.aac-content-afspraken :is(h1,h2,h3,th,td) { hyphens: auto; }
@media (max-width: 600px) {
.aac-content-afspraken h1 { font-size: var(--wp--preset--font-size--titel); }
.aac-content-afspraken .aac-tabel-stack > table { min-width: 0; }
.aac-content-afspraken .aac-tabel-stack :is(table,tbody,tr,th,td) {
display: block;
inline-size: 100%;
box-sizing: border-box;
}
.aac-content-afspraken .aac-tabel-stack thead {
position: absolute;
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
}
.aac-content-afspraken .aac-tabel-stack tr { margin-block-end: var(--wp--preset--spacing--30); }
.aac-content-afspraken .aac-tabel-stack td::before {
content: attr(data-label) ': ';
display: block;
font-weight: 700;
color: var(--wp--preset--color--ink);
}
}
.aac-content-afspraken :is(h2,h3)[id] {
scroll-margin-block-start: var(--wp--preset--spacing--70);
}
@media print {
.aac-content-afspraken details::details-content {
content-visibility: visible;
display: block;
}
.aac-content-afspraken details > :not(summary) { display: block !important; }
.aac-content-afspraken .aac-tabel-wrap { overflow: visible; }
}
main:has(.aac-content-afspraken) .aac-artikel-meta :is(a[rel="author"], .wp-block-post-terms a) {
color: var(--wp--preset--color--ink);
text-decoration: underline;
text-underline-offset: .15em;
}
/* Restore the native agreement components beneath existing EN layout rules. */
body.aac-en-figma-public #aac-main .aac-content-afspraken a:not(.wp-block-button__link) {
color: var(--wp--preset--color--ink);
}
body.aac-en-figma-public #aac-main .aac-content-afspraken .aac-knop {
text-decoration: none;
}
body.aac-en-figma-public #aac-main .aac-content-afspraken table {
border-collapse: collapse;
border-radius: 0;
}
body.aac-en-figma-public #aac-main .aac-content-afspraken th {
background: var(--wp--preset--color--teal-vlak);
color: var(--wp--preset--color--ink);
}
body.aac-en-figma-public #aac-main .aac-content-afspraken tbody th {
background: transparent;
}
.aac-content-afspraken .aac-raster ul.wp-block-list { list-style-type: disc; }
body.aac-en-figma-public .aac-content-afspraken :is(h2,h3)[id] { scroll-margin-block-start: 10rem; }
/* Give the existing mobile menu its own space beside the complete wordmark. */
@media (max-width: 781px) {
body.aac-en-figma-public .aac-header-nav .aac-header-nav__rij {
grid-template-columns: minmax(0, 1fr) 44px;
grid-template-rows: 44px auto;
}
body.aac-en-figma-public .aac-header-nav .aac-header-nav__acties > .wp-block-navigation {
grid-column: 2;
grid-row: 1;
}
body.aac-en-figma-public .aac-header-nav .aac-header-nav__acties > .aac-taalswitcher {
grid-column: 1;
grid-row: 2;
justify-self: start;
}
body.aac-en-figma-public .aac-header-nav .aac-header-nav__acties > .wp-block-buttons {
grid-column: 1 / -1;
grid-row: 2;
justify-self: end;
width: calc(100% - 120px) !important;
}
}
/* Existing Complianz controls: brand presentation only, unchanged consent state. */
body .cmplz-cookiebanner {
font-family: var(--wp--preset--font-family--inter), sans-serif !important;
background: var(--wp--preset--color--off-white) !important;
color: var(--wp--preset--color--ink) !important;
}
body .cmplz-cookiebanner :is(.cmplz-title,.cmplz-message,.cmplz-category-title) { color: var(--wp--preset--color--ink) !important; }
body .cmplz-cookiebanner .cmplz-links a {
color: var(--wp--preset--color--ink) !important;
text-decoration: underline;
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
min-height: 44px;
border: 1.5px solid var(--wp--preset--color--ink) !important;
background: var(--wp--preset--color--wit) !important;
color: var(--wp--preset--color--ink) !important;
font-family: inherit !important;
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-accept {
background: var(--wp--preset--color--actie-groen) !important;
}
body .cmplz-cookiebanner :is(button,a):focus-visible {
outline: 2px solid var(--wp--preset--color--ink) !important;
outline-offset: 3px;
}
/* Final review: preserve every column, accessible captions and unobscured footer. */
.aac-content-afspraken .aac-datatabel__tabel :where(th, td) { inline-size: auto; }
.aac-content-afspraken h1 mark.has-cycle-teal-color { color: var(--wp--preset--color--ink) !important; }
.aac-prose-lang--donker .aac-prose--juridisch .aac-inhoudsvisual figcaption { color: var(--wp--preset--color--ink-tekst); }
.aac-datatabel .aac-tabel-hint { display: none; color: var(--wp--preset--color--tekst); }
.aac-tabel-hint[data-aac-overflow="true"] { display: block !important; }
.aac-tabel-hint[data-aac-overflow="false"] { display: none !important; }
.aac-artikel-lijst :is(.wp-block-post-title a,.wp-block-post-terms a),
.aac-onderwerp-index a { color: var(--wp--preset--color--ink) !important; }
.aac-artikel-lijst .aac-kaart-beeld,
.aac-artikel-lijst .aac-kaart-beeld a,
.aac-artikel-lijst .aac-kaart-beeld img { height: auto !important; }
.aac-artikel-lijst .aac-kaart-beeld img { object-fit: contain !important; }
#cmplz-document :is(.cmplz-service-description,.cmplz-sharing-data) { box-sizing: border-box; max-inline-size: 100%; }
@media (max-width: 600px) {
body[data-cmplz] footer.aac-logo-footer { padding-bottom: calc(var(--wp--preset--spacing--60) + 64px + env(safe-area-inset-bottom)) !important; }
}
/* CMP screen-reader text anchor: retain accessible text, keep its 1px box inside its container. */
#cmplz-document .screen-reader-text { left: 0; right: auto; }
/* Restore the existing compact mobile header with the same two-row ordering as EN. */
@media (max-width: 781px) {
html[lang^="nl"] .aac-header-nav .aac-header-nav__rij {
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
grid-template-rows: 44px auto;
gap: 16px;
align-items: center;
}
html[lang^="nl"] .aac-header-nav .aac-header-nav__acties { display: contents; }
html[lang^="nl"] .aac-header-nav .aac-header-nav__acties > .wp-block-navigation {
grid-column: 2; grid-row: 1; margin: 0;
}
html[lang^="nl"] .aac-header-nav .aac-header-nav__acties > .aac-taalswitcher {
grid-column: 1; grid-row: 2; justify-self: start; margin: 0;
}
html[lang^="nl"] .aac-header-nav .aac-header-nav__acties > .wp-block-buttons {
grid-column: 1 / -1; grid-row: 2; justify-self: end;
width: calc(100% - 120px) !important; margin: 0;
}
}
/* Exact reviewed hero accents; retain the global teal palette. */
body.aac-en-figma-public #aac-main .aac-content-afspraken h1 mark.has-cycle-teal-color,
body.aac-en-figma-public #aac-main .aac-content-afspraken h1 mark.has-cycle-teal-color > span,
html[lang^="nl"] body.home h1 mark.has-cycle-teal-color,
html[lang^="nl"] body.home h1 mark.has-cycle-teal-color > span,
html[lang^="nl"] body.blog h1 mark.has-cycle-teal-color,
html[lang^="nl"] body.blog h1 mark.has-cycle-teal-color > span,
html[lang^="nl"] body.page-template-page-scan h1 mark.has-cycle-teal-color,
html[lang^="nl"] body.page-template-page-scan h1 mark.has-cycle-teal-color > span { color: var(--wp--preset--color--ink) !important; }
/* Preserve the cookie document's heading, description and chevron at narrow widths. */
@media (max-width: 600px) {
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy > summary > div {
grid-template: "heading label checkbox chevron" auto
"paragraph paragraph paragraph paragraph" auto
/ minmax(0, 1fr) 0 auto 25px;
gap: 6px;
}
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy > summary > div > :is(h3, p) {
min-width: 0;
overflow-wrap: anywhere;
}
}
/* Footer navigation follows the existing 44 by 44 px target contract. */
.aac-logo-footer .wp-block-navigation .wp-block-navigation-item__content { min-inline-size: var(--wp--custom--raakvlak--minimum); }
/* Pricing follow-up: explicit user feedback, 2026-09-10.
Scope stays on the two pricing pages; existing spacing/colour tokens. */
body:has(.aac-prijzenpagina) .wp-site-blocks > *,
#aac-main .aac-prijzenpagina > .aac-sectie {
margin-block: 0;
}
#aac-main .aac-prijzenpagina > .aac-sectie {
padding-block: var(--wp--preset--spacing--60);
}
#aac-main .aac-prijzenpagina .aac-band {
box-sizing: border-box;
width: 100%;
max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--style--root--padding-left));
padding-inline: var(--wp--style--root--padding-left);
margin-inline: auto;
}
#aac-main .aac-prijzenpagina :is(h1,h2) {
hyphens: none;
}
#aac-main .aac-prijzenpagina .aac-band > h3,
#aac-main .aac-prijzenpagina .aac-band > p:has(+ .aac-oplevering) {
text-align: center;
}
#aac-main .aac-prijzenpagina .aac-knop {
display: flex;
width: fit-content;
max-width: 100%;
margin-inline: auto;
justify-content: center;
text-align: center;
}
#aac-main .aac-prijzenpagina .aac-cta {
align-items: center;
justify-content: center;
}
#aac-main .aac-prijzenpagina .aac-cta__link {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: var(--wp--custom--raakvlak--minimum);
padding: var(--wp--custom--knop--padding);
font-size: var(--wp--custom--knop--label);
line-height: var(--wp--custom--knop--regelhoogte);
text-align: center;
}
#aac-main .aac-prijzenpagina .aac-raster > li {
min-width: 0;
display: flex;
flex-direction: column;
}
#aac-main .aac-prijzenpagina .aac-raster > li > .aac-knop {
margin-block-start: auto;
}
#aac-main .aac-prijzenpagina .aac-oplevering {
margin-block: var(--wp--preset--spacing--40);
padding: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#aac-main .aac-prijzenpagina .aac-oplevering > li {
padding: var(--wp--custom--kaart--padding);
background: var(--wp--preset--color--off-white);
border-radius: var(--wp--custom--kaart--radius);
}
#aac-main .aac-prijzenpagina .aac-oplevering h3 {
margin: 0 0 var(--wp--preset--spacing--10);
font-size: var(--wp--preset--font-size--lead);
text-align: left;
}
#aac-main .aac-prijzenpagina .aac-oplevering p { margin: 0; }
@media (min-width: 1024px) {
#aac-main .aac-prijzenpagina .aac-raster {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
#aac-main .aac-prijzenpagina > .aac-sectie { padding-block: var(--wp--preset--spacing--50); }
#aac-main .aac-prijzenpagina .aac-oplevering { grid-template-columns: minmax(0, 1fr); }
}
/* Candidate addition to the existing theme component stylesheet. */
.aac-prijzen-snelkeuze{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--wp--preset--spacing--20);margin-block:var(--wp--preset--spacing--30)}
@media(max-width:540px){.aac-prijzen-snelkeuze .aac-knop{width:100%;justify-content:center}}
/* Casefiguren (CH-252ba): brede beelden mogen buiten de leeskolom, tot de
bandbreedte. left + transform in plaats van marges, omdat de constrained
layout van core de marges met !important op auto zet. */
.aac-prose > .aac-figuur--breed {
position: relative;
left: 50%;
inline-size: min(var(--wp--style--global--wide-size, 1200px), calc(100vw - 3rem));
max-inline-size: none;
transform: translateX(-50%);
}
.aac-figuur img { border-radius: 12px; border: 1px solid var(--wp--preset--color--veldrand); }
.aac-figuur figcaption { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--grijs); }
.aac-case-faq { border: 1px solid var(--wp--preset--color--veldrand); border-radius: 12px; padding: var(--wp--preset--spacing--30); }
.aac-case-faq summary { font-weight: 700; color: var(--wp--preset--color--ink); cursor: pointer; }
/* Casepagina's: koppen links, gelijk met de leeskolom. De themaregel
#aac-main h2.wp-block-heading centreert (ID-specificiteit, zie CH-252ax). */
.single-aac_case #aac-main .aac-prose > h2.wp-block-heading { text-align: start; }
/* Vergrootknop van de core-lightbox: 20px is te klein als raakvlak (WCAG 2.5.8). */
.aac-figuur .lightbox-trigger { inline-size: var(--wp--custom--raakvlak--minimum, 2.75rem); block-size: var(--wp--custom--raakvlak--minimum, 2.75rem); }
/* CH-252bb: header met Koppelingen als hoofditem. Kleinere tussenruimte zodat
de header bij 1280px op één regel blijft en bij 1024px op twee, zoals vóór
het extra item (gemeten tegen productie 31-10). */
.aac-header-nav__acties { column-gap: var(--wp--preset--spacing--30); }
nav[aria-label="Hoofdnavigatie"] .wp-block-navigation__container { column-gap: 1.25rem; }
/* CH-252bc: artikelen links uitgelijnd op de leeskolom. Kruimelpad, titel en
meta krijgen dezelfde breedte als de tekst eronder, zodat de linkerrand
doorloopt; koppen links voor het scannen langs koppen (NN/g, layer-cake). */
.single-post .aac-kb-artikelkop > * { max-inline-size: 45rem; }
/* Wint van de themaregel body:not(.home) #aac-main h1:is(.wp-block-post-title). */
.single-post #aac-main .aac-kb-artikelkop h1.wp-block-post-title { text-align: start; }
.single-post .aac-kb-artikelkop .aac-artikel-meta { justify-content: flex-start; }
.single-post #aac-main .aac-prose > h2.wp-block-heading,
.single-post #aac-main .aac-prose > h3.wp-block-heading { text-align: start; }
.single-post .aac-prose .wp-block-table { overflow-x: auto; }
.single-post .aac-prose .wp-block-table table { font-size: var(--wp--preset--font-size--small); }
.single-post .aac-prose .wp-block-table th { text-align: start; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--wit); }
.single-post .aac-prose .wp-block-table td { vertical-align: top; }
.single-post .aac-prose .wp-block-details { border: 1px solid var(--wp--preset--color--veldrand); border-radius: 12px; padding: var(--wp--preset--spacing--30); }
.single-post .aac-prose .wp-block-details summary { font-weight: 700; color: var(--wp--preset--color--ink); }
/* CH-252bc: casekaarten. Titels ink met teal onderstreping (teal als tekst op
wit haalt 4,5:1 niet); de drie onderdelen als korte regels met vet label. */
[data-case-source] h3 a { color: var(--wp--preset--color--ink); text-decoration: underline; text-decoration-color: var(--wp--preset--color--cycle-teal); text-decoration-thickness: 0.125rem; text-underline-offset: 0.2em; }
[data-case-source] h3 a:hover { text-decoration-color: currentColor; }
.aac-case-delen { display: grid; gap: var(--wp--preset--spacing--10); margin: 0; }
.aac-case-delen div { display: block; }
.aac-case-delen dt { display: inline; font-weight: 700; color: var(--wp--preset--color--ink); }
.aac-case-delen dt::after { content: ": "; }
.aac-case-delen dd { display: inline; margin: 0; }
/* CH-252bc: geen witte strook van 24px tussen header, main en footer (de
blokafstand van wp-site-blocks). Elke sectie heeft zijn eigen padding. */
.wp-site-blocks > #aac-main,
.wp-site-blocks > #aac-main + * { margin-block-start: 0; }
/* CH-252bc: zelfde 24px (flow-layout van WordPress) tussen volle-breedtesecties in
de pagina-inhoud gaf een witte streep tussen elke twee gekleurde secties. */
:is(.is-layout-flow, .is-layout-constrained) > .alignfull:is(.aac-sectie, .has-background, .aac-home) { margin-block-start: 0; }
/* Lege alinea's (wpautop-restanten tussen secties op privacy en subverwerkers)
hebben geen hoogte maar wel 24px marge: een witte streep. */
.wp-block-post-content > p:empty { display: none; }
/* Scanformulier: velden stonden op content-box en liepen 26px buiten de kaart. */
.aac-scan__form :is(input, textarea, select) { box-sizing: border-box; max-inline-size: 100%; }
/* Scanhero: tekst bovenaan naast het formulier (niet verticaal gecentreerd met
250px leeg erboven); de kop staat zo direct links boven in het eerste scherm. */
.page-template-page-scan .aac-hero-formulier-split .aac-split { align-items: start; }
/* Twee secties met dezelfde achtergrond op rij: één sectieafstand, niet twee
(anders ontstaat een leeg vlak van ±250px). Ook over de grens tussen
pagina-inhoud en het slotblok of "Ook over …" van het sjabloon heen. */
.aac-sectie.has-wit-background-color + .aac-sectie.has-wit-background-color,
.aac-sectie.has-off-white-background-color + .aac-sectie.has-off-white-background-color,
.aac-sectie.has-teal-vlak-background-color + .aac-sectie.has-teal-vlak-background-color,
:is(.wp-block-post-content, .entry-content):has(> .aac-sectie.has-wit-background-color:last-child) + .aac-sectie.has-wit-background-color,
:is(.wp-block-post-content, .entry-content):has(> .aac-sectie.has-off-white-background-color:last-child) + .aac-sectie.has-off-white-background-color,
.aac-sectie:has(> .wp-block-post-content > .aac-sectie.has-off-white-background-color:last-child) + .aac-home > .aac-sectie.has-off-white-background-color:first-child { padding-block-start: 0; }
/* Oudere artikelen eindigen met een eigen gekleurde sectie (aac-content-afspraken);
dan geen witte band van de omhullende artikelsectie eronder, en bij gelijke
kleur sluit "Ook over …" er direct op aan. */
.single-post #aac-main > .aac-sectie:has(> .wp-block-post-content > .aac-content-afspraken:last-child > .aac-sectie:last-child),
.single-post #aac-main > .aac-sectie:has(> .wp-block-post-content > .aac-sectie:last-child) { padding-block-end: 0; }
.single-post #aac-main > .aac-sectie:has(> .wp-block-post-content > .aac-content-afspraken:last-child > .aac-sectie.has-off-white-background-color:last-child, > .wp-block-post-content > .aac-content-afspraken:last-child > .aac-prose-lang:last-child:not(.aac-prose-lang--donker)) + .aac-home > .aac-kb-verder:first-child { padding-block-start: 0; }
/* CH-252bc: scanhero. Kop links, op dezelfde rand als de tekst eronder (80% van
de fixaties valt links, NN/g); lijst los van de alinea. */
.page-template-page-scan #aac-main .aac-hero-formulier-split h1.wp-block-heading { text-align: start; }
.aac-hero-formulier-split .aac-checklist { margin-block-start: var(--wp--preset--spacing--30); }
/* CH-252bc: links in lopende tekst. De globale linkkleur cycle-teal haalt op wit
2,5:1 (WCAG 1.4.3 vraagt 4,5:1); ink met een teal onderstreping houdt het merk
en is leesbaar. Op ink-vlakken teal-licht. Specificiteit (0,1,1) via :where,
zodat een bestaande componentregel (bv. .aac-opl-hero__bewijs a) voorgaat.
Alleen op pagina's in de nieuwe stijl (.aac-home) en artikelen (.aac-prose),
die de linkstijl van de homepage volgen (.aac-home-link). De globale linkkleur
blijft een open merkbesluit: theme.json, DECISIONS.md D-020. */
:where(.aac-home, .aac-prose) :where(p, li, dd, td, figcaption) a:not([class]) { color: var(--wp--preset--color--ink); text-decoration: underline; text-decoration-color: var(--wp--preset--color--cycle-teal); text-decoration-thickness: 0.125rem; text-underline-offset: 0.2em; }
:where(.aac-home, .aac-prose) :where(p, li, dd, td, figcaption) a:not([class]):hover { text-decoration-color: currentColor; }
:where(.aac-home, .aac-prose) :where(.has-ink-background-color, .has-ink-kaart-background-color) :where(p, li, dd, td) a:not([class]) { color: var(--wp--preset--color--teal-licht); text-decoration-color: currentColor; }
.aac-artikel-meta a { color: var(--wp--preset--color--ink); text-decoration: underline; text-decoration-color: var(--wp--preset--color--cycle-teal); text-underline-offset: 0.2em; }
/* CH-252bc: contrast onder 4,5:1 uit de meetpoort. Grijs (#64748B) haalt op
off-white 4,48:1 en in een tabelrij op #F0F0F0 4,18:1; daar wordt het tekst.
Teal labels en zinnen op wit/off-white worden ink (teal blijft het accent in
streep en onderstreping). WordPress zet !important op .has-*-color, dus
deze regels ook. */
.has-off-white-background-color .has-grijs-color,
.single-post .aac-kb-artikelkop .has-grijs-color,
.single-post .has-off-white-background-color figcaption,
.single-post .aac-prose :is(td, td *) { color: var(--wp--preset--color--tekst) !important; }
.single-aac_case p.has-cycle-teal-color.has-micro-font-size,
.page-template-page-scan .aac-hero-formulier-split p.has-cycle-teal-color { color: var(--wp--preset--color--ink) !important; font-weight: 600; }
.aac-nb--op-wit .aac-nb__noot { color: var(--wp--preset--color--tekst); }
/* Secundaire knop (ink, transparant) op een inkbanner is onleesbaar (1:1). Het is
de enige actie in de banner, dus hij krijgt de primaire vorm, zoals in de
andere artikelen. */
.aac-cta-banner.has-ink-background-color .aac-knop--secundair { color: var(--wp--preset--color--ink); background-color: var(--wp--preset--color--actie-groen); border-color: var(--wp--preset--color--actie-groen); }
/* Vraagkop in oudere artikelen: kader over de volle tekstkolom, tekst links, zodat de
linkerrand van het artikel doorloopt. */
.single-post #aac-main .aac-prose > h2.aac-vraag-vak { box-sizing: border-box; inline-size: 100%; max-inline-size: var(--wp--style--global--content-size); text-align: start; }
/* Knopklasse op de core-buttonwrapper (oudere artikelen): pijl op dezelfde regel. */
.wp-block-button.aac-knop { display: inline-flex; align-items: center; padding: 0 1.25rem 0 0; }
.wp-block-button.aac-knop > .wp-block-button__link { padding-inline-end: 0.5rem; }