/* =========================================================================
   Al Bayaan — opmaak

   De tokens staan in theme.json en komen hier binnen als --wp--preset--*
   en --wp--custom--*. Er staan hieronder geen losse hexcodes, op één plek
   na: de SVG-patronen in een data-URI. Een data-URI is voor de browser een
   apart document en kan geen CSS-variabele van de pagina lezen. Die twee
   waarden staan daarom bovenaan bij elkaar, met de afspraak dat ze gelijk
   lopen met --wp--preset--color--goud. Zie docs/DECISIONS.md.

   Opzet van de pagina: witte bodem met gekleurde banden eroverheen.
   Elke sectie is een `.ab-band` in wit, crème, goud of nacht, en dáárin
   zit een `.ab-rail` die de breedte begrenst. Zo lijnt alles op dezelfde
   pixel uit terwijl de kleurvlakken over de volle breedte doorlopen.
   ========================================================================= */

:root {
	/* De enige twee hardgecodeerde kleuren in dit bestand. #C59C4F = goud. */
	--ab-patroon-ster: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23C59C4F' stroke-width='1'><path d='M80 6 L154 80 L80 154 L6 80 Z'/><path d='M80 32 L128 80 L80 128 L32 80 Z'/><circle cx='80' cy='80' r='32'/></g></svg>");
	--ab-patroon-boog: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='130' viewBox='0 0 110 130'><path d='M55 8 C55 38 98 50 98 84 L98 124 L12 124 L12 84 C12 50 55 38 55 8 Z' fill='none' stroke='%23C59C4F' stroke-width='1.2'/></svg>");
}

/* -------------------------------------------------------------------------
   Fundament
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

/* De focusring is `goud-diep` en niet `goud`. Goud haalt op wit 2,55:1 en op
   crème 2,46:1, en WCAG 1.4.11 vraagt 3:1 voor een bedieningselement dat je
   moet kúnnen zien; goud-diep haalt 5,04:1 op wit. Op de donkere banden zou
   goud-diep juist te weinig zijn (3,66:1 op nacht is nog wel genoeg, maar
   goud-licht leest daar veel duidelijker). Vandaar twee regels. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--goud-diep);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--klein);
}
.ab-band--nacht :focus-visible,
.ab-hero :focus-visible,
.ab-paginakop :focus-visible,
.ab-poort :focus-visible,
.ab-voet :focus-visible,
.ab-bovenbalk :focus-visible,
.ab-ingang:focus-visible {
	outline-color: var(--wp--preset--color--goud-licht);
}

/* `.screen-reader-text` staat er ook bij: WooCommerce zet op elke pagina een
   live region neer met die klasse, en de opmaak ervoor zit in een stylesheet
   die wij op niet-winkelpagina's bewust niet laden (inc/woocommerce.php).
   Zonder deze regel steekt dat blokje een pixel buiten de pagina uit en meldt
   `qc/veeg.mjs` op élke route horizontale overflow. */
.ab-visueel-verborgen,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ab-overslaan {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -140%);
	z-index: 100;
	background: var(--wp--preset--color--nacht);
	color: var(--wp--preset--color--goud-licht);
	padding: 12px 20px;
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--wp--custom--overgang);
}
.ab-overslaan:focus { transform: translate(-50%, 0); }

/* De rail. Eén breedte, één binnenmarge; alles wat links moet uitlijnen
   gebruikt deze klasse en niets anders. */
.ab-rail,
.ab-artikel,
.ab-kolommen {
	width: min(100% - 2 * var(--wp--custom--rail--pad), var(--wp--custom--rail--max));
	margin-inline: auto;
}

/* De banden. De kleur zit op de band, de breedtebegrenzing op de rail
   erbinnen. Zo loopt een vlak door tot de rand van het scherm. */
.ab-band { padding-block: var(--wp--preset--spacing--70); }
.ab-band--wit        { background: var(--wp--preset--color--wit); }
.ab-band--creme      { background: var(--wp--preset--color--creme); }
.ab-band--creme-diep { background: var(--wp--preset--color--creme-diep); }
.ab-band--nacht      { background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--creme); }
.ab-band--kort       { padding-block: var(--wp--preset--spacing--50); }

/* -------------------------------------------------------------------------
   Bovenbalk, kopbalk, navigatiebalk
   ------------------------------------------------------------------------- */

.ab-bovenbalk {
	background: var(--wp--preset--color--nacht);
	color: color-mix(in srgb, var(--wp--preset--color--creme) 74%, transparent);
	font-size: var(--wp--preset--font-size--chip);
}
.ab-bovenbalk .ab-rail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}
/* De links in deze balk zijn klein, maar het tapdoel eromheen niet: 44 pixels
   hoog, ook al is de tekst 12 pixels. Zie CLAUDE.md §8.1. */
.ab-bovenbalk a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--tap--maat);
}
.ab-bovenbalk__merk {
	color: var(--wp--preset--color--goud-licht);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	letter-spacing: .06em;
}
.ab-bovenbalk__links { display: flex; gap: var(--wp--preset--spacing--30); }
.ab-bovenbalk a { color: inherit; text-decoration: none; }
.ab-bovenbalk a:hover { color: var(--wp--preset--color--goud-licht); text-decoration: underline; }

.ab-kop {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--wit);
	border-block-end: 1px solid var(--wp--custom--lijn--licht);
}
.ab-kop--gescrold { box-shadow: var(--wp--custom--schaduw--balk); }

.ab-kop__rail {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-block-size: 78px;
	padding-block: 10px;
}

.ab-logo { display: block; flex: none; text-decoration: none; }
.ab-logo img { display: block; width: auto; }

/* De kopbalk krijgt een liggend merk: koepel plus woordmerk als echte tekst.
   Het getrokken woordmerk uit logo.svg is in de bron 25 pixels hoog; op deze
   maat blijft daar een grijze veeg van over. */
.ab-logo--kop { display: flex; align-items: center; gap: 12px; min-block-size: var(--wp--custom--tap--maat); }
.ab-logo--kop img { height: 46px; }
.ab-logo__woord { display: grid; gap: 1px; }
.ab-logo__naam {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--wp--preset--color--inkt);
}
.ab-logo__onder {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--goud-diep);
}
.ab-logo--voet img { height: 104px; }

/* Het zoekveld in de kopbalk: veld plus een gouden vierkante knop, zoals op
   een portaalsite. Het is de snelste weg naar een antwoord en hoort dus niet
   achter een icoon verstopt te zitten. */
.ab-zoekbalk { flex: 1; max-inline-size: 400px; }
.ab-zoekbalk form,
.ab-zoekbalk .wp-block-search__inside-wrapper { display: flex; }
.ab-zoekbalk label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ab-zoekbalk input[type="search"] {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 44px;
	padding-inline: 14px;
	border: 1px solid var(--wp--custom--lijn--licht);
	border-inline-end: 0;
	border-radius: var(--wp--custom--radius--klein) 0 0 var(--wp--custom--radius--klein);
	background: var(--wp--preset--color--wit);
	font: inherit;
	font-size: var(--wp--preset--font-size--klein);
}
.ab-zoekbalk button {
	flex: none;
	inline-size: 52px;
	min-block-size: 44px;
	border: 0;
	border-radius: 0 var(--wp--custom--radius--klein) var(--wp--custom--radius--klein) 0;
	background: var(--wp--preset--color--goud);
	color: var(--wp--preset--color--nacht);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 0;
}
.ab-zoekbalk button:hover { background: var(--wp--preset--color--goud-diep); color: var(--wp--preset--color--wit); }

.ab-kop__acties { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }

.ab-icoonknop {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: var(--wp--custom--tap--maat);
	block-size: var(--wp--custom--tap--maat);
	border: 0;
	background: none;
	color: var(--wp--preset--color--inkt);
	cursor: pointer;
	border-radius: var(--wp--custom--radius--klein);
	text-decoration: none;
	transition: background var(--wp--custom--overgang), color var(--wp--custom--overgang);
}
.ab-icoonknop:hover { background: var(--wp--custom--vlak--goud-waas); color: var(--wp--preset--color--goud-diep); }

.ab-mand__teller {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 2px;
	min-inline-size: 18px;
	padding: 0 4px;
	background: var(--wp--preset--color--goud-diep);
	color: var(--wp--preset--color--wit);
	border-radius: var(--wp--custom--radius--pil);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.ab-hamburger { display: grid; gap: 4px; }
.ab-hamburger span { display: block; inline-size: 22px; block-size: 2px; background: currentColor; }

.ab-lade__opener { display: none; }

/* -------------------------------------------------------------------------
   Hoofdmenu — eigen balk onder de kopbalk
   ------------------------------------------------------------------------- */

.ab-navbalk {
	background: var(--wp--preset--color--wit);
	border-block-end: 2px solid var(--wp--preset--color--goud);
}
.ab-menu__lijst, .ab-menu__uitklap, .ab-voet__menu ul, .ab-lade__menu ul {
	list-style: none; margin: 0; padding: 0;
}
.ab-menu__lijst { display: flex; align-items: center; gap: 2px; }
.ab-menu__item { position: relative; }

.ab-menu__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 52px;
	padding-inline: 16px;
	color: var(--wp--preset--color--inkt);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	text-decoration: none;
	border-block-end: 3px solid transparent;
	transition: color var(--wp--custom--overgang), border-color var(--wp--custom--overgang), background var(--wp--custom--overgang);
}
.ab-menu__link:hover { color: var(--wp--preset--color--goud-diep); background: var(--wp--custom--vlak--goud-waas); }
.ab-menu__item--actief > .ab-menu__link {
	color: var(--wp--preset--color--goud-diep);
	border-block-end-color: var(--wp--preset--color--goud);
}

/* Het pijltje is een knop en geen versiering: hij moet met het toetsenbord en
   met een duim te bedienen zijn. Vandaar 44 pixels breed, met evenveel extra
   binnenmarge op de link ernaast zodat de knop de tekst niet afdekt. */
.ab-menu__knop {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: var(--wp--custom--tap--maat);
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}
.ab-menu__item--ouder > .ab-menu__link { padding-inline-end: 44px; }

.ab-menu__pijl {
	display: block;
	inline-size: 6px;
	block-size: 6px;
	margin-inline: auto;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform var(--wp--custom--overgang);
	color: var(--wp--preset--color--goud-diep);
}
.ab-menu__item--open > .ab-menu__knop .ab-menu__pijl { transform: rotate(225deg) translate(-2px, -2px); }

.ab-menu__uitklap {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 30;
	min-inline-size: 244px;
	padding: 6px;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--custom--lijn--licht);
	border-block-start: 3px solid var(--wp--preset--color--goud);
	box-shadow: var(--wp--custom--schaduw--kaart-hover);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--wp--custom--overgang), transform var(--wp--custom--overgang), visibility var(--wp--custom--overgang);
}
.ab-menu__uitklap .ab-menu__link {
	inline-size: 100%;
	min-block-size: 44px;
	padding-inline: 12px;
	border-block-end: 0;
	font-weight: 600;
}
.ab-menu__item--ouder:hover > .ab-menu__uitklap,
.ab-menu__item--ouder:focus-within > .ab-menu__uitklap,
.ab-menu__item--open > .ab-menu__uitklap {
	opacity: 1; visibility: visible; transform: translateY(0);
}

.ab-lade {
	position: fixed;
	inset-block-start: 78px;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 39;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--30) var(--wp--custom--rail--pad) var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--wit);
	border-block-start: 2px solid var(--wp--preset--color--goud);
}
.ab-lade[hidden] { display: none; }
body.ab-lade-open { overflow: hidden; }

.ab-lade__menu .ab-menu__lijst { flex-direction: column; align-items: stretch; gap: 0; }
.ab-lade__menu .ab-menu__item { border-block-end: 1px solid var(--wp--custom--lijn--licht); }
.ab-lade__menu .ab-menu__link {
	inline-size: 100%;
	min-block-size: 52px;
	padding-inline: 0;
	font-size: var(--wp--preset--font-size--basis);
	border-block-end: 0;
}
.ab-lade__menu .ab-menu__knop { inline-size: 48px; }
.ab-lade__menu .ab-menu__uitklap {
	position: static;
	display: none;
	opacity: 1; visibility: visible; transform: none;
	border: 0; box-shadow: none; background: none;
	padding: 0 0 8px 14px;
	min-inline-size: 0;
}
.ab-lade__menu .ab-menu__item--open > .ab-menu__uitklap { display: block; }
.ab-lade__zoek { margin-block-end: var(--wp--preset--spacing--30); }

/* -------------------------------------------------------------------------
   Knoppen
   ------------------------------------------------------------------------- */

.ab-knop,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding: 13px 26px;
	background: var(--wp--preset--color--goud);
	color: var(--wp--preset--color--nacht);
	border: 2px solid var(--wp--preset--color--goud);
	border-radius: var(--wp--custom--radius--klein);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--wp--custom--overgang), border-color var(--wp--custom--overgang), color var(--wp--custom--overgang);
}
.ab-knop:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
	background: var(--wp--preset--color--goud-diep);
	border-color: var(--wp--preset--color--goud-diep);
	color: var(--wp--preset--color--wit);
}
.ab-knop svg { flex: none; }

.ab-knop--donker { background: var(--wp--preset--color--nacht); border-color: var(--wp--preset--color--nacht); color: var(--wp--preset--color--creme); }
.ab-knop--donker:hover { background: var(--wp--preset--color--goud-diep); border-color: var(--wp--preset--color--goud-diep); }

.ab-knop--stil { background: transparent; color: var(--wp--preset--color--inkt); border-color: var(--wp--preset--color--inkt); }
.ab-knop--stil:hover { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--wit); border-color: var(--wp--preset--color--inkt); }

.ab-knop--wit { background: transparent; color: var(--wp--preset--color--wit); border-color: var(--wp--preset--color--wit); }
.ab-knop--wit:hover { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--nacht); }

/* Ook de kleine knop haalt de 44 pixels. Hij is smaller en zachter van toon
   dan de gewone knop, maar een tapdoel van 40 is een tapdoel van 40. */
.ab-knop--klein { min-block-size: var(--wp--custom--tap--maat); padding: 10px 18px; font-size: var(--wp--preset--font-size--chip); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.ab-hero {
	position: relative;
	background: var(--wp--preset--color--nacht);
	color: var(--wp--preset--color--wit);
	overflow: hidden;
}
/* Het beeldvlak rechts. Tot er foto's zijn (docs/BLOCKED.md) staat hier het
   geometrische patroon met een koepelsilhouet eroverheen, in goud op nacht.
   Zodra er een foto is, wordt dit een `background-image` op hetzelfde element
   en hoeft er verder niets te veranderen. */
.ab-hero__vlak {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: 56%;
	background-image: var(--ab-patroon-ster);
	background-size: 132px;
	opacity: .55;
}
.ab-hero__koepel {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 6%;
	inline-size: min(34%, 430px);
	color: var(--wp--preset--color--goud);
	opacity: .75;
	pointer-events: none;
}
.ab-hero__koepel svg { display: block; inline-size: 100%; block-size: auto; }
/* De overgang van beeldvlak naar tekstvlak. Zonder deze laag botst de tekst
   op het patroon en wordt hij onleesbaar. */
.ab-hero__waas {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		var(--wp--preset--color--nacht) 34%,
		color-mix(in srgb, var(--wp--preset--color--nacht) 74%, transparent) 58%,
		color-mix(in srgb, var(--wp--preset--color--nacht) 40%, transparent) 100%);
}
.ab-hero__rail { position: relative; padding-block: var(--wp--preset--spacing--70); }
.ab-hero__tekst { max-inline-size: 40rem; }
.ab-hero__label {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--goud-licht);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ab-hero__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--wit);
}
.ab-hero__streep {
	inline-size: 68px;
	block-size: 4px;
	margin: var(--wp--preset--spacing--30) 0;
	background: var(--wp--preset--color--goud);
	border: 0;
}
.ab-hero__intro {
	margin: 0;
	max-inline-size: 48ch;
	font-size: var(--wp--preset--font-size--lead);
	color: color-mix(in srgb, var(--wp--preset--color--creme) 88%, transparent);
}
.ab-hero__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: var(--wp--preset--spacing--50); }

/* -------------------------------------------------------------------------
   USP-strip: vier korte beloften met een icoon
   ------------------------------------------------------------------------- */

.ab-usp {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
}
.ab-usp__item { display: flex; align-items: flex-start; gap: 14px; }
.ab-usp__icoon {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border: 2px solid var(--wp--preset--color--goud);
	border-radius: var(--wp--custom--radius--klein);
	color: var(--wp--preset--color--goud-diep);
}
.ab-usp__titel {
	margin: 0 0 2px;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.ab-usp__tekst { margin: 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--grijs); }

/* -------------------------------------------------------------------------
   Sectiekoppen
   ------------------------------------------------------------------------- */

.ab-sectiekop { margin-block-end: var(--wp--preset--spacing--50); }
.ab-sectiekop--midden { text-align: center; }
.ab-sectiekop__label {
	margin: 0 0 8px;
	color: var(--wp--preset--color--goud-diep);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.ab-sectiekop__titel { margin: 0; }
.ab-sectiekop__intro {
	margin: 12px auto 0;
	max-inline-size: 58ch;
	color: var(--wp--preset--color--grijs);
}
.ab-sectiekop--midden .ab-sectiekop__streep {
	inline-size: 60px;
	block-size: 3px;
	margin: var(--wp--preset--spacing--30) auto 0;
	background: var(--wp--preset--color--goud);
	border: 0;
}
.ab-band--nacht .ab-sectiekop__label { color: var(--wp--preset--color--goud-licht); }
.ab-band--nacht .ab-sectiekop__intro { color: color-mix(in srgb, var(--wp--preset--color--creme) 78%, transparent); }

.ab-sectievoet { margin-block-start: var(--wp--preset--spacing--50); text-align: center; }

.ab-leeg {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--creme);
	border: 1px dashed var(--wp--custom--lijn--goud);
	color: var(--wp--preset--color--grijs);
	text-align: center;
}

/* -------------------------------------------------------------------------
   Rasters en kaarten
   ------------------------------------------------------------------------- */

.ab-raster { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: 1fr; }

.ab-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--basis);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--overgang), border-color var(--wp--custom--overgang);
}

/* De hele kaart is het tapdoel, niet alleen de titelregel.
   Een titel van 24 pixels hoog is op een telefoon geen doel maar een gok; met
   deze overlay is de kaart zelf aanklikbaar (CLAUDE.md §8.1). Het blijft één
   link in de tabvolgorde: de beeldlink erboven staat op aria-hidden en
   tabindex -1, zie ab_kaart_beeldlink() in inc/weergave.php. */
.ab-kaart__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Alles wat zelf een link is moet bóven de overlay blijven, anders vangt de
   kaart die kliks af. */
.ab-kaart .ab-chip--link,
.ab-kaart__knop,
.ab-kaart__pijl { position: relative; z-index: 2; }
.ab-kaart--product .ab-kaart__voet { border-block-start: 0; padding-block-start: 0; }
.ab-kaart__knop { inline-size: 100%; }
.ab-kaart:hover { box-shadow: var(--wp--custom--schaduw--kaart-hover); border-color: var(--wp--preset--color--goud); }
.ab-band--creme .ab-kaart, .ab-band--creme-diep .ab-kaart { border-color: var(--wp--custom--lijn--goud); }

.ab-kaart__link { display: block; text-decoration: none; }
.ab-kaart__beeld {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--creme-diep);
}
.ab-kaart__beeld--staand { aspect-ratio: 4 / 5; }
.ab-kaart__beeld .ab-beeld__foto { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* De beeldplaceholder. Vier varianten op de post-id, zodat een raster van
   twaalf kaarten niet twaalf keer hetzelfde vlak toont.
   Bewust een verzadigd gouden vlak en geen bleke doos: op een witte kaart valt
   een lichte placeholder weg en oogt de kaart stuk. Dit leest als een bewuste
   vorm tot er foto's zijn (docs/BLOCKED.md). */
.ab-beeld__plaats {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background-color: color-mix(in srgb, var(--wp--preset--color--goud) 30%, var(--wp--preset--color--creme-diep));
	background-image: var(--ab-patroon-ster);
	background-size: 128px;
	background-position: center;
}
.ab-beeld__plaats--2 { background-image: var(--ab-patroon-boog); background-size: 96px 114px; }
.ab-beeld__plaats--3 { background-size: 92px; background-position: 32% 44%; }
.ab-beeld__plaats--4 { background-image: var(--ab-patroon-boog); background-size: 74px 88px; background-position: 68% 58%; }
.ab-beeld__merk {
	position: absolute;
	inset: 0;
	background: linear-gradient(155deg,
		color-mix(in srgb, var(--wp--preset--color--nacht) 34%, transparent),
		transparent 55%,
		color-mix(in srgb, var(--wp--preset--color--goud) 34%, transparent));
}

.ab-kaart__body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: var(--wp--preset--spacing--30); }
.ab-kaart__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ab-kaart__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--kop-4);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.ab-kaart__titel a { color: inherit; text-decoration: none; }
.ab-kaart__titel a:hover { color: var(--wp--preset--color--goud-diep); }
.ab-kaart__tekst { margin: 0; color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--klein); }
.ab-kaart__vraaglabel { color: var(--wp--preset--color--goud-diep); font-weight: 700; }
.ab-kaart__voet {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	gap: 8px; margin: auto 0 0; padding-block-start: 10px;
	border-block-start: 1px solid var(--wp--custom--lijn--licht);
}
.ab-kaart__meta { color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--chip); }
.ab-kaart__prijs {
	color: var(--wp--preset--color--goud-diep);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--klein);
}
.ab-kaart__wanneer { margin: 0; font-size: var(--wp--preset--font-size--klein); font-weight: 600; color: var(--wp--preset--color--inkt); }

.ab-kaart--evenement { flex-direction: row; }
.ab-kaart__datum {
	display: grid; align-content: center; justify-items: center; gap: 2px;
	flex: none; inline-size: 92px; padding: var(--wp--preset--spacing--30) 8px;
	background: var(--wp--preset--color--goud);
	color: var(--wp--preset--color--nacht);
}
.ab-kaart__dag { font-family: var(--wp--preset--font-family--kop); font-size: 32px; font-weight: 800; line-height: 1; }
.ab-kaart__maand { font-family: var(--wp--preset--font-family--kop); font-size: var(--wp--preset--font-size--chip); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.ab-kaart--geweest .ab-kaart__datum { background: var(--wp--preset--color--creme-diep); color: var(--wp--preset--color--grijs); }

.ab-kaart--vacature { flex-direction: row; align-items: center; }
.ab-kaart__pijl {
	display: grid; place-items: center; flex: none;
	inline-size: 62px; align-self: stretch;
	color: var(--wp--preset--color--nacht);
	background: var(--wp--preset--color--creme);
	font-size: 22px; text-decoration: none;
	transition: background var(--wp--custom--overgang), color var(--wp--custom--overgang);
}
.ab-kaart__pijl:hover { background: var(--wp--preset--color--goud); }

.ab-chip {
	display: inline-block;
	padding: 4px 9px;
	background: var(--wp--preset--color--goud);
	color: var(--wp--preset--color--nacht);
	font-family: var(--wp--preset--font-family--kop);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.5;
	border-radius: 3px;
}
.ab-chip--stil {
	background: var(--wp--preset--color--creme-diep);
	color: var(--wp--preset--color--grijs);
}
/* Een chip die naar een archief linkt is een zelfstandig tapdoel en niet een
   link in een lopende zin; die krijgt dus wél de volle 44 pixels. */
.ab-chip--link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--tap--maat);
	padding-inline: 12px;
	text-decoration: none;
}
.ab-chip--link:hover { background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--goud-licht); }

/* -------------------------------------------------------------------------
   Ingangen: drie brede kaarten met kleurvlak
   ------------------------------------------------------------------------- */

.ab-ingangen { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: 1fr; }
.ab-ingang {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--nacht);
	color: color-mix(in srgb, var(--wp--preset--color--creme) 84%, transparent);
	text-decoration: none;
	border-block-start: 4px solid var(--wp--preset--color--goud);
	overflow: hidden;
	transition: background var(--wp--custom--overgang);
}
.ab-ingang::after {
	content: "";
	position: absolute;
	inset-block-start: -30px;
	inset-inline-end: -30px;
	inline-size: 150px;
	block-size: 150px;
	background-image: var(--ab-patroon-ster);
	background-size: 120px;
	opacity: .22;
	pointer-events: none;
}
.ab-ingang:hover { background: var(--wp--preset--color--nacht-zacht); }
.ab-ingang__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--kop-3);
	font-weight: 800;
	color: var(--wp--preset--color--wit);
}
.ab-ingang__tekst { margin: 0; font-size: var(--wp--preset--font-size--klein); }
.ab-ingang__meer {
	margin: auto 0 0;
	padding-block-start: 14px;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--goud-licht);
}

/* -------------------------------------------------------------------------
   Promoband met vinkjes
   ------------------------------------------------------------------------- */

.ab-promo { display: grid; gap: var(--wp--preset--spacing--50); align-items: center; grid-template-columns: 1fr; }
.ab-promo__titel { margin: 0 0 12px; }
.ab-promo__tekst { margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--grijs); }
.ab-promo__lijst { list-style: none; margin: 0 0 var(--wp--preset--spacing--40); padding: 0; display: grid; gap: 10px; }
.ab-promo__lijst li { position: relative; padding-inline-start: 34px; font-size: var(--wp--preset--font-size--klein); }
.ab-promo__lijst li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 2px;
	inline-size: 20px;
	block-size: 20px;
	background: var(--wp--preset--color--goud);
	border-radius: 50%;
}
.ab-promo__lijst li::after {
	content: "";
	position: absolute;
	inset-inline-start: 7px;
	inset-block-start: 7px;
	inline-size: 5px;
	block-size: 9px;
	border: 2px solid var(--wp--preset--color--nacht);
	border-block-start: 0;
	border-inline-start: 0;
	transform: rotate(45deg);
}
.ab-promo__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-promo__prijzen { display: grid; gap: 12px; }
.ab-promo__prijs {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--custom--lijn--goud);
	border-radius: var(--wp--custom--radius--basis);
	text-decoration: none;
	color: var(--wp--preset--color--inkt);
	transition: border-color var(--wp--custom--overgang), box-shadow var(--wp--custom--overgang);
}
.ab-promo__prijs:hover { border-color: var(--wp--preset--color--goud); box-shadow: var(--wp--custom--schaduw--kaart); }
.ab-promo__prijs strong { font-family: var(--wp--preset--font-family--kop); font-weight: 800; }
.ab-promo__prijs span {
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--kop-3);
	font-weight: 800;
	color: var(--wp--preset--color--goud-diep);
}

/* -------------------------------------------------------------------------
   Citaatband
   ------------------------------------------------------------------------- */

.ab-citaat { position: relative; overflow: hidden; text-align: center; }
.ab-citaat::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ab-patroon-ster);
	background-size: 160px;
	opacity: .12;
}
.ab-citaat__rail { position: relative; max-inline-size: 820px; }
.ab-citaat__label {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--goud-licht);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.ab-citaat__tekst {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--kop-3);
	font-weight: 700;
	line-height: 1.4;
}
.ab-citaat__bron {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--goud-licht);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Paginakop
   ------------------------------------------------------------------------- */

.ab-paginakop {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--nacht);
	color: var(--wp--preset--color--wit);
	padding-block: var(--wp--preset--spacing--60);
}
.ab-paginakop::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: 46%;
	background-image: var(--ab-patroon-ster);
	background-size: 160px;
	opacity: .18;
	pointer-events: none;
	mask-image: linear-gradient(to left, black, transparent);
}
.ab-paginakop__rail { position: relative; }
.ab-paginakop__titel { margin: 0; max-inline-size: 22ch; color: var(--wp--preset--color--wit); }
.ab-paginakop__intro {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-inline-size: 62ch;
	color: color-mix(in srgb, var(--wp--preset--color--creme) 82%, transparent);
	font-size: var(--wp--preset--font-size--lead);
}

/* -------------------------------------------------------------------------
   Artikel, cursus, les
   ------------------------------------------------------------------------- */

.ab-artikel { padding-block: var(--wp--preset--spacing--60); }

/* Links uitlijnen en niet centreren: de leeskolom moet op dezelfde pixel
   beginnen als de paginakop erboven. Een gecentreerde kolom onder een links
   uitgelijnde titel leest als twee losse pagina's. */
.ab-artikel__lees > *,
.entry-content > * {
	max-inline-size: var(--wp--custom--lees--breedte);
	margin-inline: 0 auto;
}
.ab-artikel__lees > .alignwide, .ab-artikel__lees > .alignfull,
.entry-content > .alignwide, .entry-content > .alignfull { max-inline-size: none; }

/* Een link midden in een alinea is bij 16 pixels tekst maar 20 pixels hoog te
   raken. WCAG 2.2 stelt daar 24 als ondergrens (SC 2.5.8, de inline-uitzondering
   ontslaat hem van de 44 maar niet van de 24). Verticale binnenmarge vergroot
   het raakvlak zonder de regelafstand te veranderen: inline padding telt niet
   mee in de regelhoogte. */
.ab-artikel__lees a,
.entry-content a,
.ab-gegevens__nb a,
.ab-leeg a {
	padding-block: 4px;
}

.ab-kolommen {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
	padding-block: var(--wp--preset--spacing--60);
}

.ab-gegevens {
	align-self: start;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--custom--lijn--goud);
	border-block-start: 4px solid var(--wp--preset--color--goud);
	border-radius: var(--wp--custom--radius--basis);
}
.ab-gegevens__lijst { margin: 0; display: grid; gap: 14px; }
.ab-gegevens__regel { display: grid; gap: 2px; }
.ab-gegevens__regel dt {
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--goud-diep);
}
.ab-gegevens__regel dd { margin: 0; font-size: var(--wp--preset--font-size--klein); }
.ab-gegevens__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--wp--preset--spacing--30) 0 0; }
.ab-gegevens__nb { margin: var(--wp--preset--spacing--30) 0 0; color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--klein); }
.ab-gegevens .ab-knop { inline-size: 100%; margin-block-start: var(--wp--preset--spacing--30); }

.ab-vraag {
	margin-block-end: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--creme);
	border-inline-start: 4px solid var(--wp--preset--color--goud);
}
.ab-vraag__label {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--goud-diep);
}
.ab-vraag__tekst { margin: 0; font-size: var(--wp--preset--font-size--lead); }
.ab-bron { margin-block-start: var(--wp--preset--spacing--40); color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--klein); font-style: italic; }

.ab-lessen { margin-block-start: var(--wp--preset--spacing--50); }
.ab-lessen__kop { margin: 0 0 var(--wp--preset--spacing--30); }
.ab-lessen__lijst {
	list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--basis);
	overflow: hidden;
	background: var(--wp--preset--color--wit);
}
.ab-les {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--20);
	padding: 14px var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--custom--lijn--licht);
	min-block-size: 58px;
}
.ab-les:nth-child(even) { background: var(--wp--preset--color--creme); }
.ab-les:last-child { border-block-end: 0; }
.ab-les__nummer {
	flex: none; display: grid; place-items: center;
	inline-size: 30px; block-size: 30px;
	background: var(--wp--preset--color--goud);
	color: var(--wp--preset--color--nacht);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 800;
	border-radius: 3px;
}
.ab-les--dicht .ab-les__nummer { background: var(--wp--preset--color--creme-diep); color: var(--wp--preset--color--grijs); }
.ab-les__tekst { display: grid; gap: 2px; flex: 1; }
/* `min-block-size` en niet een hogere binnenmarge: met padding hangt de hoogte
   af van de regelhoogte van de titel, en die verschilt per breedte. Zo kwam de
   regel op 43 pixels uit in plaats van 44 — één pixel, maar wel elke keer
   opnieuw uitrekenen. Deze vorm haalt de norm ongeacht de letter. */
.ab-les__titel {
	display: flex;
	align-items: center;
	min-block-size: var(--wp--custom--tap--maat);
	padding-block: 4px;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--inkt);
}
a.ab-les__titel:hover { color: var(--wp--preset--color--goud-diep); text-decoration: underline; }
.ab-les__meta { color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--chip); }
.ab-les--dicht .ab-les__titel { color: var(--wp--preset--color--grijs); }
.ab-les__staat { flex: none; position: relative; inline-size: 22px; block-size: 22px; }
.ab-les__staat--open::before {
	content: ""; display: block;
	inline-size: 0; block-size: 0;
	margin: 5px 0 0 7px;
	border-block: 6px solid transparent;
	border-inline-start: 10px solid var(--wp--preset--color--goud-diep);
}
.ab-les__staat--slot::before {
	content: ""; display: block;
	inline-size: 13px; block-size: 10px;
	margin: 8px auto 0;
	border: 2px solid var(--wp--preset--color--grijs);
	border-radius: 2px;
}
.ab-les__staat--slot::after {
	content: ""; position: absolute;
	inset-block-start: 2px; inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 8px; block-size: 7px;
	border: 2px solid var(--wp--preset--color--grijs);
	border-block-end: 0;
	border-start-start-radius: 4px;
	border-start-end-radius: 4px;
}

.ab-poort {
	margin-block-start: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--nacht);
	color: var(--wp--preset--color--creme);
	border-block-start: 4px solid var(--wp--preset--color--goud);
	text-align: center;
}
.ab-poort__slot {
	display: block; position: relative;
	inline-size: 34px; block-size: 25px;
	margin: 0 auto 18px;
	border: 3px solid var(--wp--preset--color--goud);
	border-radius: 3px;
}
.ab-poort__slot::before {
	content: ""; position: absolute;
	inset-block-start: -15px; inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 20px; block-size: 16px;
	border: 3px solid var(--wp--preset--color--goud);
	border-block-end: 0;
	border-start-start-radius: 10px;
	border-start-end-radius: 10px;
}
.ab-poort__titel { margin: 0 0 10px; color: var(--wp--preset--color--wit); }
.ab-poort__tekst { margin: 0 auto; max-inline-size: 50ch; color: color-mix(in srgb, var(--wp--preset--color--creme) 84%, transparent); }
.ab-poort__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: var(--wp--preset--spacing--40); }
.ab-poort .ab-knop--stil { background: transparent; color: var(--wp--preset--color--wit); border-color: var(--wp--custom--lijn--op-donker); }
.ab-poort .ab-knop--stil:hover { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--nacht); border-color: var(--wp--preset--color--wit); }

/* De videospeler */
.ab-video { margin-block: var(--wp--preset--spacing--30); }
.ab-video__start {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--30);
	inline-size: 100%; padding: 0;
	border: 1px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--basis);
	background: var(--wp--preset--color--nacht);
	color: var(--wp--preset--color--creme);
	cursor: pointer; overflow: hidden; text-align: start;
	transition: border-color var(--wp--custom--overgang);
}
.ab-video__start:hover { border-color: var(--wp--preset--color--goud); }
.ab-video__vlak {
	position: relative; flex: none;
	display: grid; place-items: center;
	inline-size: 46%; max-inline-size: 320px;
	aspect-ratio: 16 / 9;
	background-image: var(--ab-patroon-ster);
	background-size: 160px;
	background-color: color-mix(in srgb, var(--wp--preset--color--goud) 22%, var(--wp--preset--color--nacht));
}
.ab-video__driehoek {
	inline-size: 0; block-size: 0;
	border-block: 16px solid transparent;
	border-inline-start: 26px solid var(--wp--preset--color--goud);
	margin-inline-start: 6px;
}
.ab-video__label {
	display: grid; gap: 4px;
	padding-inline-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--kop-4);
	font-weight: 800;
	color: var(--wp--preset--color--goud-licht);
}
.ab-video__sub {
	font-family: var(--wp--preset--font-family--tekst);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
	color: color-mix(in srgb, var(--wp--preset--color--creme) 78%, transparent);
}
.ab-video__frame { inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; border: 0; border-radius: var(--wp--custom--radius--basis); display: block; }
.ab-video__melding { margin: 10px 0 0; color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--chip); }
.ab-video__ontbreekt {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--creme);
	border: 1px dashed var(--wp--custom--lijn--goud);
	text-align: center; color: var(--wp--preset--color--grijs);
}

.ab-kruimel { margin-block-end: var(--wp--preset--spacing--20); }
.ab-kruimel a {
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
.ab-kruimel a:hover { text-decoration: underline; }

.ab-lesnav {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
	margin-block: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--wp--preset--color--goud);
}
.ab-lesnav a { display: grid; gap: 2px; max-inline-size: 46%; text-decoration: none; font-weight: 700; color: var(--wp--preset--color--inkt); }
.ab-lesnav a:hover { color: var(--wp--preset--color--goud-diep); }
.ab-lesnav a span {
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--wp--preset--color--goud-diep);
}
.ab-lesnav__volgende { text-align: end; margin-inline-start: auto; }
.ab-les__materiaal { margin-block: var(--wp--preset--spacing--30); }

.ab-formulier {
	margin-block-start: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--creme);
	border-block-start: 4px solid var(--wp--preset--color--goud);
}
.ab-formulier--los { margin-block-start: var(--wp--preset--spacing--40); }
.ab-formulier__kop { margin: 0 0 var(--wp--preset--spacing--30); }

.ab-formulier .ff-el-input--label label { font-weight: 700; }
.ab-formulier .ff-el-form-control {
	min-block-size: 46px;
	padding: 11px 14px;
	border: 1px solid var(--wp--custom--lijn--goud);
	border-radius: var(--wp--custom--radius--klein);
	background: var(--wp--preset--color--wit);
	font: inherit;
	color: var(--wp--preset--color--inkt);
}
.ab-formulier .ff-btn-submit {
	min-block-size: 48px;
	padding: 13px 26px;
	background: var(--wp--preset--color--goud);
	color: var(--wp--preset--color--nacht);
	border: 0;
	border-radius: var(--wp--custom--radius--klein);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}
.ab-formulier .ff-btn-submit:hover { background: var(--wp--preset--color--goud-diep); color: var(--wp--preset--color--wit); }

/* -------------------------------------------------------------------------
   Account en winkel
   ------------------------------------------------------------------------- */

/* WooCommerce zet zijn eigen formulieren in de gewone inhoudskolom neer. Die
   is 72 tekens breed en dat is voor een inlogscherm naast een registratie te
   smal; vandaar dat die pagina's de hele rail krijgen. */
.woocommerce-account .ab-artikel__lees > *,
.woocommerce-cart .ab-artikel__lees > *,
.woocommerce-checkout .ab-artikel__lees > * { max-inline-size: none; }

.ab-lidmaatschap {
	padding: 14px 18px;
	border-inline-start: 4px solid var(--wp--preset--color--goud);
	background: var(--wp--preset--color--creme);
}
.ab-lidmaatschap--verlopen { border-inline-start-color: var(--wp--preset--color--grijs); }

.ab-cursuslijst { list-style: none; margin: var(--wp--preset--spacing--30) 0 0; padding: 0; display: grid; gap: 10px; }
.ab-cursuslijst__item {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-block-size: var(--wp--custom--tap--maat);
	padding: 12px 16px;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--custom--lijn--goud);
	border-radius: var(--wp--custom--radius--klein);
}
.ab-cursuslijst__item a { font-weight: 700; text-decoration: none; }
.ab-cursuslijst__item a:hover { text-decoration: underline; }
.ab-cursuslijst__meta { color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--chip); }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation a {
	display: block;
	min-block-size: var(--wp--custom--tap--maat);
	padding: 12px 16px;
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--inkt);
	border-inline-start: 3px solid transparent;
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--creme);
	border-inline-start-color: var(--wp--preset--color--goud);
	color: var(--wp--preset--color--goud-diep);
	font-weight: 700;
}
/* De productkaarten van WooCommerce dezelfde vorm geven als de kaarten van het
   thema. Twee dingen om te weten voordat u hieraan sleutelt:

   1. De winkel draait op de blok-sjablonen van WooCommerce, niet op de
      klassieke lus. De lijstitems dragen daardoor zowel `product type-product`
      als `wc-block-product`, en de opmaak komt uit `wc-blocks-style` en
      `woocommerce-blocktheme` — niet uit `woocommerce-general`.
   2. Deze regels staan hier en niet in een `wp_add_inline_style()`, omdat
      albayaan.css als laatste stylesheet wordt ingeladen. Daarmee winnen ze
      een gelijkspel op specificiteit zonder !important. */
/* Twee bedieningselementen die WooCommerce standaard te klein neerzet: het
   oogje in het wachtwoordveld en de link "wachtwoord vergeten". Beide zijn
   zelfstandige doelen en vallen dus onder de 44-pixelregel. */
.woocommerce .show-password-input,
.woocommerce-page .show-password-input {
	inline-size: var(--wp--custom--tap--maat);
	block-size: var(--wp--custom--tap--maat);
	background-position: center;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inset-inline-end: 0;
}
.woocommerce-LostPassword a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--tap--maat);
}
/* Deze staat wél midden in een zin, dus geldt de AA-ondergrens van 24 en niet
   de 44 van een zelfstandig doel. Zie CLAUDE.md §8.1. */
.woocommerce-privacy-policy-link { padding-block: 4px; }

.woocommerce ul.products { gap: var(--wp--preset--spacing--40); }

.woocommerce ul.products li.product,
.woocommerce ul.products li.wc-block-product {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--basis);
	overflow: hidden;
	text-align: start;
	padding: 0 0 var(--wp--preset--spacing--30);
	transition: box-shadow var(--wp--custom--overgang), border-color var(--wp--custom--overgang);
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.wc-block-product:hover {
	border-color: var(--wp--preset--color--goud);
	box-shadow: var(--wp--custom--schaduw--kaart-hover);
}
.woocommerce ul.products li.product img,
.woocommerce ul.products li.wc-block-product img {
	margin: 0 0 var(--wp--preset--spacing--30);
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}
.woocommerce ul.products li.product > *:not(img):not(a),
.woocommerce ul.products li.wc-block-product > *:not(img):not(a),
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.wc-block-product .wc-block-components-product-name,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.wc-block-product .wc-block-components-product-price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.wc-block-product .wp-block-button {
	margin-inline: var(--wp--preset--spacing--30);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.wc-block-product .wc-block-components-product-name {
	display: block;
	padding: 0;
	margin-block-end: 6px;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--kop-4);
	font-weight: 800;
	line-height: 1.25;
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.wc-block-product .wc-block-components-product-price {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--goud-diep);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 800;
}

/* -------------------------------------------------------------------------
   Voettekst
   ------------------------------------------------------------------------- */

.ab-voet {
	background: var(--wp--preset--color--nacht);
	color: color-mix(in srgb, var(--wp--preset--color--creme) 82%, transparent);
	position: relative;
	overflow: hidden;
}
.ab-voet::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 4px;
	background: var(--wp--preset--color--goud);
}
.ab-voet__rail { position: relative; display: grid; gap: var(--wp--preset--spacing--50); padding-block: var(--wp--preset--spacing--60); }
.ab-voet__merk { display: grid; gap: 14px; justify-items: start; }
.ab-voet__zin { margin: 0; font-size: var(--wp--preset--font-size--klein); max-inline-size: 40ch; }

.ab-voet__kolommen { display: grid; gap: var(--wp--preset--spacing--50); }
.ab-voet__kop {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--goud-licht);
}
.ab-voet__kolom p { margin: 0 0 12px; font-size: var(--wp--preset--font-size--klein); }
.ab-voet__nb { color: color-mix(in srgb, var(--wp--preset--color--creme) 58%, transparent); }
.ab-voet a { color: inherit; text-decoration: none; }
.ab-voet a:hover { color: var(--wp--preset--color--goud-licht); text-decoration: underline; }

.ab-voet__menu ul { display: grid; gap: 9px; }
.ab-voet__menu .ab-menu__uitklap, .ab-voet__menu .ab-menu__knop { display: none; }
.ab-voet__menu .ab-menu__link {
	min-block-size: var(--wp--custom--tap--maat); padding: 0;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
	color: inherit; background: none; border: 0;
}
.ab-voet__menu .ab-menu__link:hover { color: var(--wp--preset--color--goud-licht); background: none; }

.ab-voet__onder { border-block-start: 1px solid var(--wp--custom--lijn--op-donker); }
.ab-voet__rail--onder {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 12px; padding-block: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--chip);
}
.ab-voet__rail--onder p { margin: 0; }
.ab-voet__klein { display: flex; gap: 18px; }
/* Ook de breedte, niet alleen de hoogte: "Privacy" is zo kort dat het tapdoel
   op 42 pixels uitkwam. */
.ab-voet__klein a,
.ab-voet__kolom a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--custom--tap--maat);
	min-inline-size: var(--wp--custom--tap--maat);
}
.ab-voet__kolom a { justify-content: flex-start; }

/* -------------------------------------------------------------------------
   Breekpunten. Mobiel eerst: alles hierboven geldt vanaf 360px.
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ab-navbalk { display: none; }
	.ab-lade__opener { display: grid; }
	.ab-zoekbalk { display: none; }
	.ab-kop__cta { display: none; }
	.ab-bovenbalk__merk { display: none; }
	.ab-lade .ab-zoekbalk { display: block; }
}

/* Op 360 pixels past het liggende merk plus drie tapdoelen niet in één regel:
   dat kostte zeven pixels horizontale overflow. De ondertitel gaat eruit en de
   koepel wordt kleiner; de naam blijft staan, want dat is het merk. */
@media (max-width: 420px) {
	.ab-kop__rail { gap: var(--wp--preset--spacing--10); min-block-size: 66px; }
	.ab-logo--kop { gap: 8px; }
	.ab-logo--kop img { height: 36px; }
	.ab-logo__naam { font-size: 17px; }
	.ab-logo__onder { display: none; }
	.ab-lade { inset-block-start: 66px; }
}

@media (min-width: 600px) {
	.ab-raster--2, .ab-raster--3, .ab-raster--4 { grid-template-columns: repeat(2, 1fr); }
	.ab-ingangen { grid-template-columns: repeat(3, 1fr); }
	.ab-usp { grid-template-columns: repeat(2, 1fr); }
	.ab-voet__kolommen { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.ab-lade { display: none !important; }
	.ab-raster--3 { grid-template-columns: repeat(3, 1fr); }
	.ab-raster--4 { grid-template-columns: repeat(4, 1fr); }
	.ab-usp { grid-template-columns: repeat(4, 1fr); }
	.ab-kolommen { grid-template-columns: minmax(0, 1fr) 340px; }
	.ab-voet__rail { grid-template-columns: 300px 1fr; gap: var(--wp--preset--spacing--70); }
	.ab-promo { grid-template-columns: 1fr 380px; }
	.ab-hero__rail { padding-block: var(--wp--preset--spacing--80); }
}

/* Onder de 380px is de datumkolom van een evenementkaart te breed voor de
   titel ernaast. Dan liever onder elkaar dan een titel van drie letters. */
@media (max-width: 379px) {
	.ab-kaart--evenement { flex-direction: column; }
	.ab-kaart__datum { inline-size: 100%; grid-auto-flow: column; gap: 8px; padding-block: 10px; }
	.ab-video__start { flex-direction: column; align-items: stretch; }
	.ab-video__vlak { inline-size: 100%; max-inline-size: none; }
	.ab-video__label { padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); }
}