/* ==========================================================================
   Artemis Blue — patroon- en sjabloon-CSS
   --------------------------------------------------------------------------
   Aanvulling op style.css. Hier staat UITSLUITEND:
     a) de brug tussen de core-blokken en de componentklassen uit style.css;
     b) sectie-specifieke layout (header, footer, hero, stappen, faq, …).

   Regels die hier gelden:
     - Alles begint op 320px. Er zijn precies twee breekpunten: 48rem en 64rem,
       en die voegen alleen toe (mobile first, BRIEF R2).
     - Geen enkele nieuwe kleurwaarde. Alles verwijst naar de tokens uit style.css.
     - Niets herhalen wat style.css al doet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Motief als masker
   Het chevron-motief wordt op enkele plekken als CSS-masker gebruikt (opsommings-
   teken, eyebrow, stapaccent, faq-pijl). Dat is een vorm, geen kleur: de kleur komt
   uit background-color en dus uit een token. Betekenisdragende chevrons blijven
   inline SVG via artemisblue_icon() (BRIEF §3.4).
   -------------------------------------------------------------------------- */

:root {
	--ab-mask-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath fill='%23000' d='M11.5 0v11.7l-4-4.3L0 14Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. Brug naar de core-blokken
   -------------------------------------------------------------------------- */

/* Blokindelingen zetten marges op directe kinderen; onze secties en rasters
   regelen hun eigen ruimte. */
.ab-section {
	margin-block-start: 0;
}

.ab-grid > *,
.ab-site-header__inner > *,
.ab-nav-panel > *,
.ab-footer__grid > *,
.ab-product__grid > *,
.ab-overons__grid > *,
.ab-faq__list > *,
.ab-cta__grid > * {
	margin-block: 0;
}

.ab-container > .ab-grid,
.ab-container > .ab-faq__list {
	margin-block-start: 0;
}

.ab-section__actions {
	margin-top: var(--sp-6);
}

/* Knoppen: core levert de structuur (wp:buttons / wp:button), style.css levert de
   vormgeving. Hieronder alleen de vertaling — dezelfde tokens, geen nieuwe waarden. */
.ab-btn-row.wp-block-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.ab-btn-row .wp-block-button {
	width: 100%;
}

.ab-btn-row .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 100%;
	min-height: var(--control-h);
	padding: var(--sp-3) var(--sp-6);
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	color: var(--ab-text);
	font-family: var(--ab-font-body);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.ab-btn-row .wp-block-button__link:focus-visible {
	outline: 3px solid var(--ab-focus);
	outline-offset: 3px;
}

.ab-btn-row .ab-btn--primary .wp-block-button__link {
	background-color: var(--ab-blue);
	border-color: var(--ab-blue);
	color: var(--ab-blue-ink);
}

.ab-btn-row .ab-btn--primary .wp-block-button__link:hover {
	background-color: var(--ab-blue-bright);
	border-color: var(--ab-blue-bright);
	color: var(--ab-blue-ink);
}

.ab-btn-row .ab-btn--primary .wp-block-button__link:active {
	background-color: var(--ab-blue-deep);
	border-color: var(--ab-blue-deep);
	color: var(--ab-text);
	transform: translateY(1px);
}

.ab-btn-row .ab-btn--secondary .wp-block-button__link {
	border-color: var(--ab-line-bright);
	color: var(--ab-text);
}

.ab-btn-row .ab-btn--secondary .wp-block-button__link:hover {
	border-color: var(--ab-blue-bright);
	background-color: color-mix(in srgb, var(--ab-blue-bright) 8%, transparent);
}

.ab-btn-row .ab-btn--secondary .wp-block-button__link:active {
	transform: translateY(1px);
}

/* Eyebrow zonder losse SVG: het merkteken komt uit het masker.
   Staat er wél een <svg class="ab-eyebrow__mark">, dan blijft die leidend. */
.ab-eyebrow::before {
	content: "";
	flex: none;
	width: 0.75rem;
	height: 0.875rem;
	background-color: var(--ab-blue);
	-webkit-mask: var(--ab-mask-chevron) no-repeat center / contain;
	mask: var(--ab-mask-chevron) no-repeat center / contain;
}

.ab-eyebrow:has(.ab-eyebrow__mark)::before {
	display: none;
}

/* Idem voor .ab-list: core levert <ul class="wp-block-list ab-list">, het
   opsommingsteken komt uit het motief. Lijsten die de SVG al meesturen (de
   samenvatting op /bedankt/) krijgen er geen tweede bij. */
.ab-list > li::before {
	content: "";
	width: 0.75rem;
	height: 0.875rem;
	margin-top: 0.42em;
	background-color: var(--ab-blue);
	-webkit-mask: var(--ab-mask-chevron) no-repeat center / contain;
	mask: var(--ab-mask-chevron) no-repeat center / contain;
}

.ab-list > li:has(> svg)::before {
	display: none;
}

.ab-list a {
	color: var(--ab-blue-bright);
}

/* Zoekformulier (404 en zoekresultaten). */
.ab-search {
	max-width: 34rem;
	margin-block: var(--sp-5);
}

.ab-search .wp-block-search__label {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--ab-text);
	font-size: var(--fs-small);
	font-weight: 600;
}

.wp-block-search.ab-search .wp-block-search__inside-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.ab-search .wp-block-search__input {
	width: 100%;
	min-height: var(--control-h);
	padding: var(--sp-3) var(--sp-4);
	background-color: var(--ab-bg);
	/* SC 1.4.11: de rand begrenst het veld — --ab-text-subtle haalt 5,97:1 op --ab-bg. */
	border: 1px solid var(--ab-text-subtle);
	border-radius: var(--radius-sm);
	color: var(--ab-text);
	font-size: var(--fs-body);
}

.ab-search .wp-block-search__input::placeholder {
	color: var(--ab-text-subtle);
}

.ab-search .wp-block-search__input:focus-visible {
	outline: 3px solid var(--ab-focus);
	outline-offset: 1px;
	border-color: var(--ab-blue-bright);
}

.ab-search .wp-block-search__button {
	min-height: var(--control-h);
	padding: var(--sp-3) var(--sp-6);
	background-color: var(--ab-blue);
	border: 1px solid var(--ab-blue);
	border-radius: var(--radius-sm);
	color: var(--ab-blue-ink);
	font-size: var(--fs-body);
	font-weight: 600;
	cursor: pointer;
}

.ab-search .wp-block-search__button:hover {
	background-color: var(--ab-blue-bright);
	border-color: var(--ab-blue-bright);
}

/* Berichtenlijst en paginering — vangnet: deze site heeft geen blog. */
.wp-block-post-template.ab-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ab-archive .wp-block-post-title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-h3);
}

.ab-archive .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-query-pagination.ab-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

.ab-pagination .page-numbers,
.ab-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	min-width: var(--tap);
	padding-inline: var(--sp-3);
	border: 1px solid var(--ab-line-bright);
	border-radius: var(--radius-sm);
	color: var(--ab-text);
	text-decoration: none;
}

.ab-pagination .current {
	background-color: var(--ab-blue);
	border-color: var(--ab-blue);
	color: var(--ab-blue-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   2. Header
   Mobiel: merk links, knop "Menu" rechts, het paneel als volledig scherm.
   Zonder JavaScript is er geen paneel maar een gewone, uitgeklapte menubalk —
   daarom hangt het verbergen aan de klasse .js op <html>.
   -------------------------------------------------------------------------- */

.ab-site-header {
	position: relative;
	z-index: 60;
	background-color: var(--ab-bg);
	border-bottom: 1px solid var(--ab-line);
}

.ab-site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 4rem;
	padding-block: var(--sp-3);
}

.ab-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: var(--tap);
	color: var(--ab-text);
	text-decoration: none;
}

.ab-brand:hover {
	color: var(--ab-text);
}

.ab-brand__mark {
	flex: none;
	width: auto;
	height: 1.75rem;
	color: var(--ab-blue);
}

.ab-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.ab-brand__name {
	font-family: var(--ab-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ab-brand__payoff {
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ab-text-muted);
}

.ab-nav-toggle,
.ab-nav-close {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: var(--tap);
	min-width: var(--tap);
	padding: var(--sp-2) var(--sp-4);
	background-color: transparent;
	border: 1px solid var(--ab-line-bright);
	border-radius: var(--radius-sm);
	color: var(--ab-text);
	font-size: var(--fs-small);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.ab-nav-toggle:hover,
.ab-nav-close:hover {
	border-color: var(--ab-blue-bright);
	background-color: color-mix(in srgb, var(--ab-blue-bright) 8%, transparent);
}

.ab-nav-toggle__icon,
.ab-nav-close__icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

/* Zonder JavaScript is er niets te openen of te sluiten. */
.no-js .ab-nav-toggle,
.no-js .ab-nav-close {
	display: none;
}

.ab-nav-panel {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	width: 100%;
}

.js .ab-nav-panel {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	gap: var(--sp-5);
	padding: var(--sp-5) var(--gutter) var(--sp-8);
	background-color: var(--ab-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.js .ab-nav-panel.is-open {
	display: flex;
}

.ab-nav-close {
	align-self: flex-end;
}

/* Achtergrond staat stil zolang het paneel open is. */
.ab-nav-is-open,
.ab-nav-is-open body {
	overflow: hidden;
}

.ab-nav {
	width: 100%;
}

.ab-nav ul.wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.ab-nav.wp-block-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--ab-line);
	color: var(--ab-text);
	font-weight: 600;
	text-decoration: none;
}

.ab-nav.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--ab-blue-bright);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* Actieve pagina: kleur én een zichtbare onderlijn (kleur mag nooit het enige
   signaal zijn, standaard §10). De markering komt van artemisblue_nav_mark_current()
   in functions.php: die zet aria-current="page" op de exacte pagina, aria-current="true"
   op de bovenliggende route, en current-menu-item op de <li> in beide gevallen. */
.ab-nav.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.ab-nav.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--ab-blue-bright);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.ab-site-header__cta {
	width: 100%;
}

/* --------------------------------------------------------------------------
   3. Footer
   -------------------------------------------------------------------------- */

.ab-site-footer {
	padding-block: var(--sp-8) var(--sp-6);
	background-color: var(--ab-bg-alt);
	border-top: 1px solid var(--ab-line);
}

.ab-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}

.ab-footer__grid > * {
	margin-block: 0;
}

.ab-brand--static {
	cursor: default;
}

.ab-footer__tagline {
	margin: var(--sp-4) 0 0;
	max-width: 36ch;
	color: var(--ab-text-muted);
	font-size: var(--fs-small);
}

.ab-footer__title {
	margin: 0 0 var(--sp-3);
	max-width: none;
	font-family: var(--ab-font-body);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ab-text-muted);
}

.ab-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-1);
}

.ab-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--ab-text-muted);
	text-decoration: none;
}

.ab-footer__links a:hover,
.ab-footer__links a:focus-visible {
	color: var(--ab-text);
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.ab-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--ab-line);
}

.ab-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.ab-footer__mail,
.ab-footer__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: var(--tap);
	color: var(--ab-blue-bright);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ab-footer__mail:hover span,
.ab-footer__phone:hover span {
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.ab-footer__mail-icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

.ab-footer__meta p {
	margin: 0;
	max-width: none;
}

/* --------------------------------------------------------------------------
   4. Kruimelpad
   -------------------------------------------------------------------------- */

.ab-breadcrumb {
	padding-top: var(--sp-5);
}

.ab-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Geen rij-gap: de links zijn zelf al --tap hoog, anders wordt een afgebroken pad te hoog. */
	gap: 0 var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-small);
	color: var(--ab-text-muted);
}

.ab-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.ab-breadcrumb__item + .ab-breadcrumb__item::before {
	content: "/";
	color: var(--ab-text-subtle);
}

.ab-breadcrumb a {
	/* WCAG 2.2 SC 2.5.8: hetzelfde raakvlak als elke andere link in het thema. */
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--ab-text-muted);
	text-decoration: none;
}

.ab-breadcrumb a:hover,
.ab-breadcrumb a:focus-visible {
	color: var(--ab-text);
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.ab-breadcrumb [aria-current="page"] {
	color: var(--ab-text);
}

/* --------------------------------------------------------------------------
   5. Hero
   De hoogte is bewust krap: op 375x667 moeten H1, uitleg en de primaire knop
   zonder scrollen in beeld staan (BRIEF §4.2, punt 8).
   -------------------------------------------------------------------------- */

.ab-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--sp-7) var(--sp-8);
	border-bottom: 1px solid var(--ab-line);
}

/* Fijn raster: puur CSS-gradiënten, geen afbeelding en dus geen extra verzoek. */
.ab-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, var(--ab-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--ab-line) 1px, transparent 1px);
	background-size: 3rem 3rem;
	opacity: 0.45;
}

/* Het raster dooft naar onderen uit, zodat de sectiegrens rustig blijft. */
.ab-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(to bottom, transparent 35%, var(--ab-bg));
}

.ab-hero__watermark {
	position: absolute;
	top: -1.5rem;
	right: -3rem;
	z-index: 0;
	width: 16rem;
	max-width: 55%;
	color: var(--ab-blue);
	opacity: 0.07;
	pointer-events: none;
}

.ab-hero__watermark svg {
	width: 100%;
	height: auto;
}

.ab-hero__inner {
	position: relative;
	z-index: 2;
}

.ab-hero__title {
	margin-bottom: var(--sp-4);
}

.ab-hero__lead {
	margin-bottom: var(--sp-5);
}

.ab-hero__actions.wp-block-buttons {
	margin: 0 0 var(--sp-5);
}

.ab-hero__proof {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	max-width: 48ch;
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
	background-color: var(--ab-surface);
	border: 1px solid var(--ab-line-bright);
	border-radius: var(--radius-sm);
	color: var(--ab-text-muted);
	font-size: var(--fs-small);
}

.ab-hero__proof svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.1em;
	color: var(--ab-success);
}

/* --------------------------------------------------------------------------
   6. Truststrip
   -------------------------------------------------------------------------- */

.ab-trust__grid {
	gap: var(--sp-5);
}

.ab-trust__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding-left: var(--sp-4);
	border-left: 2px solid var(--ab-line-bright);
}

.ab-trust__icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-bottom: var(--sp-1);
	color: var(--ab-blue);
}

.ab-trust__title {
	margin: 0;
	max-width: none;
	color: var(--ab-text);
	font-family: var(--ab-font-display);
	font-size: var(--fs-body);
	font-weight: 600;
}

.ab-trust__text {
	margin: 0;
	max-width: none;
	color: var(--ab-text-muted);
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   7. Probleem en uitkomst
   -------------------------------------------------------------------------- */

.ab-probleem__col h3 {
	margin-bottom: var(--sp-3);
}

.ab-probleem__col--straks {
	border-color: var(--ab-line-bright);
}

/* --------------------------------------------------------------------------
   8. Zo werkt het
   De nummers komen uit een teller: een stap toevoegen of verwijderen kan nooit
   een verkeerd nummer opleveren.
   -------------------------------------------------------------------------- */

.ab-steps {
	counter-reset: ab-step;
}

.ab-step {
	position: relative;
	padding-top: var(--sp-5);
	border-top: 2px solid var(--ab-line);
}

.ab-step::before {
	counter-increment: ab-step;
	content: counter(ab-step, decimal-leading-zero);
	display: block;
	margin-bottom: var(--sp-3);
	color: var(--ab-blue-bright);
	font-family: var(--ab-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

/* Het chevron-accent naast het stapnummer. */
.ab-step::after {
	content: "";
	position: absolute;
	top: calc(var(--sp-5) + 0.3rem);
	left: 2.1rem;
	width: 0.6rem;
	height: 0.7rem;
	background-color: var(--ab-blue);
	-webkit-mask: var(--ab-mask-chevron) no-repeat center / contain;
	mask: var(--ab-mask-chevron) no-repeat center / contain;
}

.ab-step__title {
	margin-bottom: var(--sp-2);
}

.ab-step p {
	margin: 0;
	color: var(--ab-text-muted);
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   9. Phoneforce
   -------------------------------------------------------------------------- */

.ab-product__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}

.ab-product__grid > * {
	margin-block: 0;
}

.ab-product__aside {
	padding: var(--sp-5);
	background-color: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--radius);
}

.ab-product__icon {
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--sp-4);
	color: var(--ab-blue);
}

.ab-product__claim {
	margin-bottom: var(--sp-3);
	color: var(--ab-text);
	font-family: var(--ab-font-display);
	font-size: var(--fs-h3);
	line-height: 1.3;
}

.ab-product__aside .ab-note {
	margin: 0;
}

/* --------------------------------------------------------------------------
   10. Prijs
   -------------------------------------------------------------------------- */

.ab-prijs__rules {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--ab-line);
}

.ab-prijs__rules .ab-note {
	margin: var(--sp-4) 0 0;
}

/* --------------------------------------------------------------------------
   11. Over Artemis Blue
   .ab-portrait is de plek voor een ECHTE foto. Zolang die er niet is, staat er een
   neutraal merkvlak — geen stockfoto en geen placeholdertekst.
   -------------------------------------------------------------------------- */

.ab-overons__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}

.ab-overons__grid > * {
	margin-block: 0;
}

.ab-portrait {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 20rem;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--radius-lg);
}

.ab-portrait svg {
	width: 36%;
	height: auto;
	color: var(--ab-blue);
	opacity: 0.16;
}

/* Zodra hier een echte foto staat (wp:image met class ab-portrait). */
.ab-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   12. Veelgestelde vragen
   core/details is native toegankelijk: toetsenbord, schermlezer en werkt zonder JS.
   -------------------------------------------------------------------------- */

.ab-faq__list {
	display: grid;
	gap: var(--sp-3);
}

.ab-faq__item {
	background-color: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--radius);
}

.ab-faq__item.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: var(--tap);
	padding: var(--sp-4) var(--sp-5);
	color: var(--ab-text);
	font-family: var(--ab-font-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.ab-faq__item > summary::-webkit-details-marker {
	display: none;
}

.ab-faq__item > summary::after {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 0.8rem;
	background-color: var(--ab-blue);
	-webkit-mask: var(--ab-mask-chevron) no-repeat center / contain;
	mask: var(--ab-mask-chevron) no-repeat center / contain;
	transition: transform var(--dur) var(--ease);
}

.ab-faq__item[open] > summary::after {
	transform: rotate(90deg);
}

.ab-faq__item > summary:hover {
	color: var(--ab-blue-bright);
}

.ab-faq__item > summary:focus-visible {
	outline: 3px solid var(--ab-focus);
	outline-offset: -3px;
}

.ab-faq__item > :not(summary) {
	padding-inline: var(--sp-5);
}

.ab-faq__item > :last-child {
	padding-bottom: var(--sp-5);
	margin-bottom: 0;
}

.ab-faq__item p {
	color: var(--ab-text-muted);
}

/* --------------------------------------------------------------------------
   13. Afsluitende CTA met formulier
   -------------------------------------------------------------------------- */

.ab-cta__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}

.ab-cta__grid > * {
	margin-block: 0;
}

.ab-cta__mail {
	margin: var(--sp-5) 0 0;
	color: var(--ab-text-muted);
	font-size: var(--fs-small);
}

.ab-cta__form {
	padding: var(--sp-5);
	background-color: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--radius);
}

.ab-cta__form .ab-field:last-of-type {
	margin-bottom: var(--sp-5);
}

/* --------------------------------------------------------------------------
   14. 404 en zoekresultaten
   -------------------------------------------------------------------------- */

.ab-error__routes {
	margin-block: var(--sp-6);
}

.ab-page-title {
	max-width: 24ch;
}

.ab-empty {
	padding: var(--sp-5);
	background-color: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--radius);
}

.ab-empty > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   15. Vanaf 48rem (768px)
   ========================================================================== */

@media (min-width: 48rem) {
	/* De header wordt hier sticky: op mobiel is schermhoogte kostbaarder dan
	   een altijd zichtbaar menu (standaard §3.2). */
	.ab-site-header {
		position: sticky;
		top: 0;
	}

	.ab-site-header__inner {
		flex-wrap: nowrap;
		gap: var(--sp-5);
	}

	.ab-nav-toggle,
	.ab-nav-close {
		display: none;
	}

	.ab-nav-panel,
	.js .ab-nav-panel {
		position: static;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--sp-5);
		width: auto;
		margin-left: auto;
		padding: 0;
		background-color: transparent;
		overflow: visible;
	}

	.ab-nav {
		width: auto;
	}

	.ab-nav ul.wp-block-navigation__container {
		flex-direction: row;
		align-items: center;
		gap: var(--sp-5);
	}

	.ab-nav.wp-block-navigation .wp-block-navigation-item__content {
		padding: var(--sp-2) 0;
		border-bottom: 0;
	}

	.ab-site-header__cta {
		width: auto;
	}

	.ab-btn-row.wp-block-buttons {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sp-4);
	}

	.ab-btn-row .wp-block-button,
	.ab-btn-row .wp-block-button__link {
		width: auto;
	}

	/* Dezelfde selector als de basisregel: media queries verhogen de specificiteit niet,
	   dus met .ab-search (0-2-0) zou de column-regel hierboven (0-3-0) blijven winnen. */
	.wp-block-search.ab-search .wp-block-search__inside-wrapper {
		flex-direction: row;
		align-items: stretch;
	}

	.ab-search .wp-block-search__input {
		flex: 1 1 auto;
		width: auto;
	}

	.ab-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-6) var(--sp-5);
	}

	.ab-footer__legal {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--sp-5);
	}

	.ab-footer__meta {
		text-align: right;
	}

	.ab-hero {
		padding-block: var(--sp-8) var(--sp-9);
	}

	.ab-cta__grid,
	.ab-product__grid,
	.ab-overons__grid {
		gap: var(--sp-7);
	}

	.ab-cta__form {
		padding: var(--sp-6);
	}
}

/* ==========================================================================
   16. Vanaf 64rem (1024px)
   ========================================================================== */

@media (min-width: 64rem) {
	.ab-footer__grid {
		grid-template-columns: 1.6fr repeat(3, 1fr);
		gap: var(--sp-7);
	}

	.ab-hero__watermark {
		width: 26rem;
		max-width: 40%;
	}

	.ab-hero__inner {
		max-width: 52rem;
	}

	.ab-product__grid {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
	}

	.ab-overons__grid {
		grid-template-columns: 20rem 1fr;
		align-items: center;
		gap: var(--sp-8);
	}

	.ab-cta__grid {
		grid-template-columns: 1fr 1.1fr;
		align-items: start;
		gap: var(--sp-8);
	}

	.ab-faq__list {
		max-width: 56rem;
	}

	.ab-step p {
		font-size: var(--fs-body);
	}
}

/* ==========================================================================
   Merkvideo — loopt vanzelf, zonder geluid (patterns/video.php)
   ========================================================================== */

.ab-videoblok__head {
	text-align: center;
	margin-inline: auto;
	max-width: 44rem;
}

.ab-videoblok__head .ab-eyebrow {
	justify-content: center;
}

/* Het kader dat de video draagt. */
.ab-video {
	margin: 0;
	max-width: 60rem;
	margin-inline: auto;
	border: 1px solid var(--ab-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--ab-bg);
}

.ab-video__el {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background-color: var(--ab-bg);
}