/*
Theme Name: AlfaBeth Connects
Template: generatepress
Description: Custom child theme voor de website van AlfaBeth Connects (Elsbeth Tiedemann).
Author: Joppe Wouts
Version: 3.1.0
Text Domain: alfabeth-connects
*/

/* ==========================================================================
   1. Design tokens — variant A "Warm redactioneel"
   Bron: Design system documentation/AlfaBeth Connects Design System/
   (tokens/colors.css, tokens/typography.css, tokens/spacing.css).
   Tokennamen identiek aan het design system; bij variant B/C/D alleen de
   semantische aliassen hieronder vervangen (zie tokens/colors.css in de export).
   ========================================================================== */

:root {
	/* Ruw palet — variant A "Warm redactioneel", v2-verfijning.
	   De merkankers (ink, groen, goud, warm papier, mint) staan vast; v2 voegt
	   alleen dieptetinten toe: een échte zandband (alt-secties waren voorheen
	   identiek aan de paginabg, waardoor de afwisseling onzichtbaar was), een
	   diep bosgroen voor CTA/footer, en een zachtgoud voor lijnen op donker. */
	--a-ink: #1f2a24;
	--a-green: #2e4a3c;
	--a-green-deep: #24392e;
	--a-forest-900: #1b2620;
	--a-gold: #b98a3d;
	--a-gold-soft: #c8a869;
	--a-bg-warm: #faf7f1;
	--a-bg-white: #ffffff;
	--a-bg-mint: #e9efe7;
	--a-bg-sand: #f3ecdd;

	/* Semantische aliassen */
	--color-fg: var(--a-ink);
	--color-fg-muted: #5b675f;
	--color-fg-subtle: #78827a;
	--color-fg-on-dark: #ffffff;
	--color-fg-on-dark-muted: rgba(255, 255, 255, 0.78);
	--color-primary: var(--a-green);
	--color-accent: var(--a-gold);
	--color-surface: var(--a-bg-white);
	--color-surface-sunken: var(--a-bg-warm);
	--color-surface-tint: var(--a-bg-mint);
	--color-surface-sand: var(--a-bg-sand);
	--color-surface-dark: var(--a-forest-900);
	--color-border: #e3dcc9;
	--color-border-strong: #d3caae;

	/* Groen verdiept bij hover; goud wordt lichter voor contrast met inkt. */
	--color-primary-hover: var(--a-green-deep);
	--color-accent-hover: var(--a-gold-soft);
	--color-field-border: #78827a;

	/* Typografie — Fraunces (display) + Newsreader (lange lees­tekst, nieuw in
	   v2) + Inter (interface-meubilair: nav, knoppen, labels, formulier). */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-text: 'Newsreader', Georgia, 'Times New Roman', serif;
	--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-heading: var(--font-display);
	--font-body: var(--font-text);

	/* Typografische schaal — v2. Display vloeit mee met het scherm (clamp),
	   leestekst blijft vast voor stabiele regellengte. Fraunces-optiek via de
	   opsz-as komt uit de font-load; hier alleen gewicht/grootte/lijnhoogte. */
	--text-eyebrow: 600 0.75rem/1 var(--font-ui);
	--text-eyebrow-tracking: 0.14em;
	--text-display-xl: 560 clamp(2.6rem, 5.4vw, 4rem)/1.04 var(--font-display);
	--text-display-l: 560 clamp(2rem, 3.6vw, 2.9rem)/1.1 var(--font-display);
	--text-display-m: 560 clamp(1.45rem, 2.2vw, 1.85rem)/1.2 var(--font-display);
	--text-display-quote: italic 400 clamp(1.35rem, 2.2vw, 1.75rem)/1.45 var(--font-display);
	--text-logo: 560 1.5rem/1 var(--font-display);
	--text-lead: 400 clamp(1.2rem, 1.8vw, 1.4rem)/1.5 var(--font-text);
	--text-body-l: 400 1.1875rem/1.68 var(--font-text);
	--text-body: 400 1.0625rem/1.7 var(--font-text);
	--text-body-relaxed: 400 1.0625rem/1.72 var(--font-text);
	--text-ui: 600 0.9375rem/1 var(--font-ui);
	--text-nav: 500 0.9375rem/1 var(--font-ui);
	--text-caption: 400 0.875rem/1.7 var(--font-ui);
	--text-caption-strong: 600 0.8125rem/1.3 var(--font-ui);

	/* Ideale leesbreedte voor lange lopende tekst (Newsreader ~17–19px). */
	--measure: 68ch;

	/* Spacing & radii. v2 herstelt het royale redactionele ritme (was 48px,
	   ooit teruggezet vanaf 96px) en maakt de sectiepadding vloeiend. */
	--space-section-y: clamp(4rem, 8vw, 7rem);
	--space-section-x: 80px;
	--radius-button: 6px;
	--radius-card: 12px;
	--radius-pill: 999px;
	--rule-gold-w: 44px;
	--shadow-outline-a: inset 0 0 0 1.5px var(--a-green);

	/* Schaduwen dragen de inktkleur van het papier, niet zwart. Zwart op warm
	   papier leest als vuil; een groen-getinte schaduw blijft in het palet. */
	--shadow-raised: 0 1px 2px rgba(31, 42, 36, 0.04), 0 10px 28px -14px rgba(31, 42, 36, 0.22);
	--shadow-lifted: 0 2px 4px rgba(31, 42, 36, 0.05), 0 22px 44px -20px rgba(31, 42, 36, 0.28);

	/* Theme-specifiek (niet in het design system gedefinieerd) */
	--ac-error: #b3413a;
	--ac-success: #3d7a4e;
	--ac-content-width: 1180px;
	--ac-gutter: 32px;
	--ac-section-pad: var(--space-section-y);
	--ac-focus-ring: 0 0 0 3px rgba(46, 74, 60, 0.18);
	--ac-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* z-index-schaal: nooit losse 9999-waarden verspreid door het bestand. */
	--z-base: 1;
	--z-raised: 10;
	--z-header: 100;
	--z-skiplink: 200;
}

@media (max-width: 820px) {
	:root {
		--ac-gutter: 20px;
	}
}

/* GeneratePress' eigen kleursysteem mappen op de DS-tokens, zodat GP's
   dynamische CSS (nav-hover, links, achtergronden) automatisch meekleurt. */
:root {
	--contrast: var(--color-fg);
	--contrast-2: var(--color-fg-muted);
	--contrast-3: var(--color-border);
	--base: var(--color-surface-tint);
	--base-2: var(--color-surface-sunken);
	--base-3: var(--color-surface);
	--accent: var(--color-primary);
}

/* Content-container transparant: de pagina is warm papier, wit is voor kaarten. */
.one-container .container {
	background-color: transparent;
}

#content {
	padding: 0;
}

/* ==========================================================================
   2. Basis — achtergrond, tekst, typografie
   ========================================================================== */

/* Ankerlinks glijden i.p.v. springen; `scroll-margin-top` houdt een aangesprongen
   kop vrij van de bovenrand. Respecteert de reduced-motion-voorkeur (zie §9). */
html {
	scroll-behavior: smooth;
	/* Container-query units meten de bruikbare viewport zonder scrollbar. */
	container-type: inline-size;
}

body {
	background-color: var(--color-surface-sunken);
	color: var(--color-fg);
	font: var(--text-body-relaxed);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
}

/* Koppen in Fraunces. Op grote display-maten een lichte negatieve tracking:
   hoog-contrast serif zet op grootte anders te los. Altijd roman — nooit
   cursief (cursieve koppen zijn een AI-tell); nadruk komt van kleur/gewicht.

   v3: `text-wrap: balance` verdeelt een kop over even lange regels en haalt
   losse weeswoorden weg. `break-word` i.p.v. `anywhere` — `anywhere` breekt
   ook middenin een kort woord als er toevallig ruimte tekort is. */
h1, h2, h3, h4, h5, h6 {
	color: var(--color-fg);
	font-style: normal;
	overflow-wrap: break-word;
	text-wrap: balance;
	min-width: 0;
	scroll-margin-top: 96px;
}

h1 {
	font: var(--text-display-xl);
	letter-spacing: -0.015em;
}

h2 {
	font: var(--text-display-l);
	letter-spacing: -0.01em;
}

h3 {
	font: var(--text-display-m);
	letter-spacing: -0.005em;
}

/* Lange lopende tekst leest het prettigst binnen een begrensde kolom.
   Alleen tekstblokken, niet de layout-groepen (die regelen hun eigen breedte). */
.entry-content p:not([class]),
.ac-hero-body p:not([class]),
.ac-chapter-body p:not([class]) {
	max-width: var(--measure);
}

/* `pretty` laat de laatste regel van een alinea niet als één woord eindigen. */
p, li, figcaption, blockquote {
	text-wrap: pretty;
}

/* Selectie in merkkleur i.p.v. het systeemblauw. */
::selection {
	background-color: rgba(185, 138, 61, 0.28);
	color: var(--color-fg);
}

/* Grotere intro-alinea (hero, leads) */
.ac-lead {
	font: var(--text-lead);
	color: var(--color-fg);
	max-width: 40ch;
}

/* Subteksten en labels */
.ac-muted {
	color: var(--color-fg-muted);
}

.ac-small,
small {
	font-size: 14px;
	line-height: 1.5;
}

/* Eyebrow-label boven koppen: dezelfde inktkleur, onderscheid via schaal. */
.ac-kicker {
	display: block;
	font: var(--text-eyebrow);
	letter-spacing: var(--text-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--color-fg);
	margin-bottom: 14px;
}

/* Links in lopende tekst */
.entry-content a:not(.button):not(.wp-block-button__link) {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s var(--ac-ease), text-decoration-color 0.2s var(--ac-ease);
}

.entry-content a:not(.button):not(.wp-block-button__link):hover {
	color: var(--color-primary-hover);
	text-decoration-thickness: 2px;
}

/* Tekst-CTA "Lees meer →" / "Meer over mij →" */
.ac-more-link {
	font: var(--text-caption-strong);
	color: var(--color-primary);
	text-decoration: none;
}

.ac-more-link:hover {
	color: var(--color-primary-hover);
}

/* Zichtbare focus voor toetsenbordnavigatie */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Layout — container, secties
   ========================================================================== */

.grid-container {
	max-width: var(--ac-content-width);
	padding-left: var(--ac-gutter);
	padding-right: var(--ac-gutter);
}

/* Vlakke, afwisselende sectiebanden (warm papier / wit / mint) */
.ac-section {
	padding-top: var(--ac-section-pad);
	padding-bottom: var(--ac-section-pad);
}

.ac-section--surface {
	background-color: var(--color-surface);
}

.ac-section--alt {
	background-color: var(--a-bg-sand);
}

.ac-section--tint {
	background-color: var(--color-surface-tint);
}

/* Full-bleed breakout: de hele pagina zit in één gedeelde .grid-container
   (GeneratePress "one-container"-layout), dus zonder dit blijven
   sectiebanden ingesloten rechthoeken met zichtbare marge i.p.v. randloze
   banden. .ac-mission uitgezonderd — die is bewust een smalle 700px-kaart. */
.ac-section--surface,
.ac-section--alt,
.ac-section--tint,
.ac-rule,
.ac-cta-band {
	width: 100cqw;
	margin-left: calc(50% - 50cqw);
	margin-right: calc(50% - 50cqw);
}

.ac-section--surface > .wp-block-group__inner-container,
.ac-section--alt > .wp-block-group__inner-container,
.ac-section--tint > .wp-block-group__inner-container,
.ac-cta-band > .wp-block-group__inner-container {
	max-width: var(--ac-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ac-gutter);
	padding-right: var(--ac-gutter);
}

/* Smalle leeskolom (Wie ik ben) */
.ac-narrow {
	max-width: 680px;
}

/* ==========================================================================
   4. Knoppen — primair, secundair, accent (goud)
   Spec: components/buttons/Button.jsx — weight 600, padding 15×28,
   radius 8px, geen border; secundair = inset 1.5px groene stroke.
   ========================================================================== */

/* Selectors gespiegeld aan GP's dynamische CSS
   (a.wp-block-button__link:not(.has-background)) om die te overtroeven. */
.button,
a.button,
button:not(.menu-toggle),
input[type="submit"],
.wp-block-button__link,
a.wp-block-button__link:not(.has-background),
.wpcf7-submit {
	font: var(--text-ui);
	font-size: 16px;
	background-color: var(--color-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--radius-button);
	padding: 15px 28px;
	text-decoration: none;
	/* transform i.p.v. top/left: blijft op de compositor, geen layout-herberekening */
	transition: background-color 0.18s var(--ac-ease), color 0.18s var(--ac-ease),
		transform 0.1s var(--ac-ease), box-shadow 0.18s var(--ac-ease);
}

/* Ingedrukt: 1px zakken. Fysieke bevestiging dat de klik is aangekomen —
   zonder schaalsprong, die op een redactionele pagina te speels leest. */
.button:active,
a.button:active,
button:not(.menu-toggle):active,
input[type="submit"]:active,
.wp-block-button__link:active,
a.wp-block-button__link:not(.has-background):active,
.wpcf7-submit:active {
	transform: translateY(1px);
}

.button:hover,
.button:focus,
a.button:hover,
a.button:focus,
button:not(.menu-toggle):hover,
input[type="submit"]:hover,
input[type="submit"]:focus,
.wp-block-button__link:hover,
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus,
.wpcf7-submit:hover {
	background-color: var(--color-primary-hover);
	color: #ffffff;
}

/* Secundaire knop: transparant, groene tekst, 1.5px inset stroke
   (class staat op de wrapper-div van het button-block) */
.wp-block-button.ac-button--secondary a.wp-block-button__link:not(.has-background),
.ac-button--secondary .wp-block-button__link,
a.ac-button--secondary {
	background-color: transparent;
	color: var(--color-primary);
	box-shadow: var(--shadow-outline-a);
}

.wp-block-button.ac-button--secondary a.wp-block-button__link:not(.has-background):hover,
.wp-block-button.ac-button--secondary a.wp-block-button__link:not(.has-background):focus,
.ac-button--secondary .wp-block-button__link:hover,
a.ac-button--secondary:hover,
a.ac-button--secondary:focus {
	background-color: rgba(46, 74, 60, 0.08);
	color: var(--color-primary);
}

/* Accentknop (goud, ink-tekst) — CTA-band */
.wp-block-button.ac-button--cta a.wp-block-button__link:not(.has-background),
.ac-button--cta .wp-block-button__link,
a.ac-button--cta {
	background-color: var(--color-accent);
	color: var(--color-fg);
	padding: 16px 32px;
}

.wp-block-button.ac-button--cta a.wp-block-button__link:not(.has-background):hover,
.wp-block-button.ac-button--cta a.wp-block-button__link:not(.has-background):focus,
.ac-button--cta .wp-block-button__link:hover,
a.ac-button--cta:hover,
a.ac-button--cta:focus {
	background-color: var(--color-accent-hover);
	color: var(--color-fg);
}

/* ==========================================================================
   5. Header en footer
   Template: header op warm papier zonder rand; footer als donker ink-vlak.
   ========================================================================== */

.site-header {
	background-color: var(--color-surface-sunken);
	padding-top: 12px;
	padding-bottom: 12px;
}



.main-title a,
.site-branding .main-title {
	font: var(--text-logo);
	color: var(--color-fg);
}

/* Tweede woord van het woordmerk in groen (Figma 6:3). De span wordt door
   het `generate_site_title_output`-filter in functions.php aangebracht. */
.main-title-accent {
	color: var(--color-primary);
}

.main-navigation,
.main-navigation .main-nav {
	background-color: transparent;
}

.main-navigation a {
	font: var(--text-nav);
	color: var(--color-fg);
}

.main-navigation a:hover {
	color: var(--color-primary);
}

/* Actief menu-item: groen, semibold en onderstreept (Figma 80:10).
   WordPress zet `current-menu-item` zelf op het item dat bij de huidige
   pagina hoort (`current-menu-ancestor` bij een toekomstige subpagina), dus
   dit is puur styling — geen PHP nodig.

   Selector gespiegeld aan GP's dynamische CSS
   (.main-navigation .main-nav ul li[class*="current-menu-"] > a) om die te
   overtroeven. De CTA valt erbuiten: die is al een groene knop met witte
   tekst en moet er op /contact/ hetzelfde uitzien als elders. */
.main-navigation .main-nav ul li.current-menu-item:not(.ac-nav-cta) > a,
.main-navigation .main-nav ul li.current-menu-ancestor:not(.ac-nav-cta) > a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.site-footer {
	background-color: var(--color-surface-dark);
	font: var(--text-caption);
	color: var(--color-fg-on-dark-muted);
}

.site-info {
	background-color: transparent;
	padding-top: 48px;
	padding-bottom: 48px;
}

.inside-site-info.grid-container {
	display: block;
}

.site-footer a {
	color: var(--color-fg-on-dark-muted);
}

.site-footer a:hover {
	color: var(--color-fg-on-dark);
}

.site-footer a:focus-visible,
.ac-cta-band a:focus-visible {
	outline-color: var(--a-gold-soft);
	outline-offset: 5px;
}

/* Footer: merk links, bedrijfsgegevens rechts (zie referentie-HTML footer) */
.copyright-bar {
	display: flex;
	justify-content: space-between;
	gap: 32px;
}

.ac-footer-brand {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ac-footer-name {
	font: 600 20px var(--font-display);
	color: #ffffff;
}

.ac-footer-tagline {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
}

.ac-footer-info {
	font: var(--text-caption);
	color: rgba(255, 255, 255, 0.75);
	text-align: right;
}

@media (max-width: 820px) {
	.copyright-bar {
		flex-direction: column;
		gap: 24px;
	}

	.ac-footer-info {
		text-align: left;
	}
}

/* ==========================================================================
   6. Lijsten — custom marker met gouden streepje (Wat ik bied)
   ========================================================================== */

.ac-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.ac-list li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
}

.ac-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 16px;
	height: 2px;
	background-color: var(--color-accent);
}

/* ==========================================================================
   6b. Servicekaart — witte kaart met gouden accent-rule
   Spec: components/cards/ServiceCard.jsx — geen rand/schaduw, de 40×3px
   rule is de enige flourish.
   ========================================================================== */

.ac-card {
	background-color: var(--color-surface);
	border-radius: var(--radius-card);
	padding: 36px 32px;
	/* Grid rekt cards naar de hoogte van de langste in de rij (default
	   align-items:stretch); flex + p{flex:1} houdt titel/tekst bovenaan en
	   verankert de link onderaan, ongeacht tekstlengte per kaart. */
	display: flex;
	flex-direction: column;
}

.ac-card::before {
	content: "";
	display: block;
	width: var(--rule-gold-w);
	height: 3px;
	border-radius: 2px;
	background-color: var(--color-accent);
	margin-bottom: 18px;
}

.ac-card h3 {
	font-size: 1.375rem;
	line-height: 1.25;
	letter-spacing: -0.005em;
	margin-bottom: 12px;
}

.ac-card p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-fg-muted);
	margin-bottom: 16px;
	flex: 1;
}

.ac-card .ac-more-link {
	font-size: 14px;
}

/* ==========================================================================
   6c. Paginacomponenten — hero, quote, CTA-band, portret, contact
   ========================================================================== */

/* Hero: expliciete gridkolommen houden de leesmaat en het portret in balans. */
.ac-hero {
	/* Overtroeft WordPress' !important flex-layout op het kolommenblok. */
	display: grid !important;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	padding-top: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
	gap: clamp(2rem, 5vw, 4.5rem);
}

.ac-hero > .wp-block-column.is-vertically-aligned-center {
	align-self: start;
	min-width: 0;
}

.ac-hero h1 {
	margin-bottom: 24px;
}

.ac-hero-buttons {
	margin-top: 32px;
	gap: 16px;
}

@media (max-width: 980px) {
	.ac-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.ac-hero > .wp-block-column {
		width: 100%;
	}

	.ac-hero .ac-portrait {
		max-width: 32rem;
	}
}

/* Portretfoto's: kaart-radius (16px, template hero/over-mij) */
.ac-portrait img {
	border-radius: var(--radius-card);
	max-width: 100%;
	height: auto;
}

/* In de smalle leeskolom (Wie ik ben): hoogte begrenzen, gezicht in beeld */
.ac-narrow .ac-portrait img {
	max-height: 460px;
	width: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* Home hero-portret: vaste crop conform DS-maatvoering (460x575) */
.ac-hero .ac-portrait img {
	height: 575px;
	width: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* Home about-teaser-portret: vaste crop conform DS-maatvoering (380x460) */
.ac-about .ac-portrait img {
	height: 460px;
	width: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

@media (max-width: 820px) {
	.ac-hero .ac-portrait img,
	.ac-about .ac-portrait img {
		height: auto;
		max-height: 460px;
	}
}

/* Pull-quote (referentie): Fraunces italic in groen, gecentreerd */
.ac-quote {
	font: var(--text-display-quote);
	color: var(--color-primary);
	text-align: center;
	border: none;
	margin: 0 auto;
	max-width: 820px;
	padding: 0;
}

.ac-quote cite,
.ac-quote-source {
	display: block;
	font: var(--text-caption-strong);
	font-style: normal;
	color: var(--color-fg-subtle);
	margin-top: 20px;
}

/* Missie-sectie (Home). v3: niet langer een gecentreerde kolom maar een
   redactionele twee­koloms opmaak — kop links, tekst rechts. Alles centreren
   op elke sectie maakt een pagina symmetrisch en vlak; zie §9.2. */
.ac-mission {
	max-width: 100vw;
}

/* Diensten-index (Home) — zie §9.3. De oude `.ac-services-grid` (3 gelijke
   kaartkolommen) is vervallen; de klasse blijft gedefinieerd voor het geval
   er nog oude blokinhoud in de database staat. */
.ac-services-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
}

/* CTA-band (Home, onderaan): donkergroen vlak, witte tekst, gouden knop.
   Full-bleed (zie breakout hierboven), geen rand/radius/margin — vloeit
   direct in aangrenzende secties, conform referentie-HTML section:nth-child(7). */
.ac-cta-band {
	background-color: var(--color-primary);
	color: var(--color-fg-on-dark);
	text-align: center;
	padding-top: 88px;
	padding-bottom: 88px;
}

.ac-cta-band h2 {
	color: var(--color-fg-on-dark);
	margin-bottom: 12px;
}

.ac-cta-band p {
	font: var(--text-body-l);
	color: rgba(255, 255, 255, 0.85);
}

.ac-cta-band .wp-block-buttons {
	justify-content: center;
	margin-top: 24px;
}

/* Knop in de CTA-band standaard goud (accent op donkergroen) */
.ac-cta-band .wp-block-button__link,
.ac-cta-band a.wp-block-button__link:not(.has-background) {
	background-color: var(--color-accent);
	color: var(--color-fg);
	padding: 16px 32px;
}

.ac-cta-band .wp-block-button__link:hover,
.ac-cta-band a.wp-block-button__link:not(.has-background):hover,
.ac-cta-band a.wp-block-button__link:not(.has-background):focus {
	background-color: var(--color-accent-hover);
	color: var(--color-fg);
}

/* LinkedIn-logolink (footer + contactpagina). Monochroom via currentColor,
   zodat hetzelfde merk werkt op donkere footer en op warm papier. */
.ac-linkedin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	vertical-align: middle;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.ac-linkedin-icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

.ac-linkedin-label {
	line-height: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ac-linkedin:hover,
.ac-linkedin:focus-visible {
	color: var(--color-primary-hover);
}

/* In de footer staat het logo naast de tekstregel: iets kleiner en optisch
   uitgelijnd op de x-hoogte van de gegevens ernaast. */
.ac-footer-info .ac-linkedin-icon {
	width: 18px;
	height: 18px;
}

.site-footer .ac-linkedin {
	color: rgba(255, 255, 255, 0.75);
}

.site-footer .ac-linkedin:hover,
.site-footer .ac-linkedin:focus-visible {
	color: #ffffff;
}

/* Contactpagina: logo + profiel-URL als één link, in de tekstkleur. */
.ac-contact .ac-linkedin {
	color: var(--color-primary);
}

.ac-contact .ac-linkedin .ac-linkedin-label {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Alleen zichtbaar voor screenreaders (GP levert deze class niet altijd mee) */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Contact: kolommen met ruimte ertussen */
.ac-contact {
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: var(--space-section-y);
}

.ac-contact > .wp-block-column {
	min-width: 0;
}

.ac-contact .ac-colophon {
	border-top: 1px solid var(--color-border-strong);
	padding-top: 1.5rem;
}

.ac-contact .ac-linkedin {
	max-width: 100%;
}

.ac-contact .ac-linkedin-label {
	line-height: 1.5;
}

/* Nav-CTA "Neem contact op" als knop in het menu.
   Selector matcht GP's .main-navigation .main-nav ul li a op specificity.
   Spec: Button size "nav" — 12×24px, 15px, weight 600. */
.main-navigation .main-nav ul li.ac-nav-cta a {
	font: var(--text-ui);
	background-color: var(--color-primary);
	color: #ffffff;
	border-radius: var(--radius-button);
	line-height: normal;
	padding: 12px 24px;
	margin: 12px 0 12px 12px;
	transition: background-color 0.2s var(--ac-ease), transform 0.1s var(--ac-ease);
}

.main-navigation .main-nav ul li.ac-nav-cta a:active {
	transform: translateY(1px);
}

.main-navigation .main-nav ul li.ac-nav-cta.current-menu-item a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.menu-toggle {
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--radius-button);
	transition: background-color 0.2s var(--ac-ease);
}

.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle[aria-expanded="true"] {
	background-color: var(--color-surface-tint);
}

.main-navigation .main-nav ul li.ac-nav-cta a:hover,
.main-navigation .main-nav ul li.ac-nav-cta a:focus {
	background-color: var(--color-primary-hover);
	color: #ffffff;
}

@media (max-width: 820px) {
	.main-navigation .ac-nav-cta a {
		margin: 8px 0;
	}
}

/* ==========================================================================
   6d. Paginasjablonen — Wie ik ben & Wat ik bied
   Bron: Figma "AlfaBeth Connects — Website design", frames `wie-ik-ben`
   (79:4) en `wat-ik-bied` (80:4). Maatvoering 1:1 uit die frames.
   ========================================================================== */

/* Geneste groepsblokken krijgen van GeneratePress standaard 30px padding op
   hun `__inner-container`. Voor de lay-outgroepen hieronder is dat dubbele
   inspringing (de sectieband levert de gutter al) en het laat een grid zelfs
   buiten zijn rechterpadding lopen. Vandaar: nul. */
.ac-page-hero > .wp-block-group__inner-container,
.ac-page-hero-media > .wp-block-group__inner-container,
.ac-page-hero-text > .wp-block-group__inner-container,
.ac-hero-head > .wp-block-group__inner-container,
.ac-hero-body > .wp-block-group__inner-container,
.ac-page-header > .wp-block-group__inner-container,
.ac-chapter-head > .wp-block-group__inner-container,
.ac-chapter-body > .wp-block-group__inner-container,
.ac-services-grid > .wp-block-group__inner-container,
.ac-card > .wp-block-group__inner-container,
.ac-method > .wp-block-group__inner-container,
.ac-method-text > .wp-block-group__inner-container,
.ac-method-card > .wp-block-group__inner-container,
.ac-closing > .wp-block-group__inner-container {
	padding: 0;
}

/* Kolomstapels: WP-groepsblokken zetten hun kinderen in flow met eigen
   blokmarges; deze stapels gebruiken flex + gap zodat de verticale ritmes
   exact de gaps uit de Figma-frames volgen. */
.ac-page-hero-text > .wp-block-group__inner-container,
.ac-hero-head > .wp-block-group__inner-container,
.ac-hero-body > .wp-block-group__inner-container,
.ac-chapter-head > .wp-block-group__inner-container,
.ac-chapter-body > .wp-block-group__inner-container,
.ac-method-text > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ac-page-hero-text > .wp-block-group__inner-container > *,
.ac-hero-head > .wp-block-group__inner-container > *,
.ac-hero-body > .wp-block-group__inner-container > *,
.ac-chapter-head > .wp-block-group__inner-container > *,
.ac-chapter-body > .wp-block-group__inner-container > *,
.ac-method-text > .wp-block-group__inner-container > * {
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
}

.ac-page-hero-text > .wp-block-group__inner-container { gap: 32px; }
.ac-hero-head > .wp-block-group__inner-container { gap: 12px; }
.ac-hero-body > .wp-block-group__inner-container { gap: 24px; }
.ac-chapter-head > .wp-block-group__inner-container { gap: 28px; }
.ac-chapter-body > .wp-block-group__inner-container { gap: 24px; }
.ac-method-text > .wp-block-group__inner-container { gap: 24px; }

/* Haarlijn tussen header en pagina-hero (Figma 79:13 / 80:13) */
.ac-rule {
	height: 1px;
	border: none;
	background-color: rgba(31, 42, 36, 0.15);
	margin-top: 0;
	margin-bottom: 0;
	opacity: 1;
}

/* --- Pagina-hero met portret (Wie ik ben, Figma 79:14) ------------------- */

.ac-page-hero {
	padding-top: 64px;
	padding-bottom: 96px;
}

.ac-page-hero > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 460px 1fr;
	gap: 72px;
	align-items: start;
}

.ac-page-hero h1 {
	font-size: clamp(2.1rem, 3.6vw, 3rem);
	line-height: 1.12;
	margin-bottom: 0;
}

.ac-page-hero .ac-portrait img {
	height: 575px;
	width: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* Openingscitaat in de hero (Figma 79:23) */
.ac-hero-quote {
	font: var(--text-lead);
	color: var(--color-fg);
}

.ac-page-hero p:not(.ac-hero-quote):not(.ac-kicker):not(.ac-portrait-caption) {
	font-size: 16px;
	line-height: 1.65;
}

/* Bijschrift onder het portret (Figma 79:17) */
.ac-portrait-caption {
	font: 400 16px/1.4 var(--font-display);
	color: var(--color-fg-muted);
	text-align: center;
	margin-top: 16px;
}

/* --- Hoofdstuksectie: smalle kolom met kop + citaat, brede tekstkolom ---- */
/* (Figma 79:27 "Journalistiek" en 79:39 "Vopak") */

.ac-chapter > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 80px;
	align-items: start;
}

.ac-chapter h2 {
	font-size: clamp(1.75rem, 2.8vw, 2.25rem);
	line-height: 1.18;
	margin-bottom: 0;
}

.ac-chapter p {
	line-height: 1.7;
}

/* Ingesprongen citaat in de kopkolom — geen rand, alleen inspringing
   (Figma 79:32: padding-left 24px, geen border of vlak). */
.ac-chapter .ac-chapter-quote {
	font: 400 18px/1.5 var(--font-display);
	color: var(--color-fg);
	padding: 20px 0 20px 24px;
	margin: 0;
}

/* Sfeerbeeld in de kopkolom (Figma 79:44) */
.ac-chapter-figure img {
	border-radius: 12px;
	aspect-ratio: 11 / 10;
	height: auto;
	width: 100%;
	object-fit: cover;
	object-position: 50% 32%;
}

/* --- Afsluitende sectie (Figma 79:49) ----------------------------------- */

.ac-closing {
	text-align: center;
}

.ac-closing > .wp-block-group__inner-container {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.ac-closing .ac-kicker {
	margin-bottom: 16px;
}

.ac-closing h2 {
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	margin-bottom: 40px;
}

.ac-closing p {
	font: var(--text-body-l);
}

/* Slotcitaat met witruimte, zonder cursief of scheidingslijnen (WIEB-M10). */
.ac-closing .ac-closing-quote {
	font: 400 26px/1.35 var(--font-display);
	color: var(--color-fg);
	text-align: center;
	border: none;
	padding: 16px 0;
	margin: 40px 0 0;
	max-width: none;
}

/* --- Paginakop zonder beeld (Wat ik bied, Figma 80:14) ------------------ */

.ac-page-header {
	padding-top: 80px;
	padding-bottom: 64px;
}

.ac-page-header h1 {
	line-height: 1.06;
	margin-bottom: 16px;
}

/* Deck/introzin onder de paginakop. v2: rustige roman Newsreader i.p.v. een
   cursieve display-regel (cursieve deck op display-maat leest als een AI-tell). */
.ac-page-lead {
	font: var(--text-lead);
	color: var(--color-fg);
	max-width: 46ch;
	margin-bottom: 0;
}

/* De lead volgt de kolombreedte en haarlijn van het dienstenraster. */
.ac-service-lead {
	max-width: calc(50% - 32px);
	border-top: 1px solid var(--color-border);
	padding-top: 20px;
	margin-top: 28px;
}

/* Geen mobiele font-size-overrides meer: alle koppen hierboven schalen zelf
   mee via clamp(). Alleen het slotcitaat heeft nog een vaste maat. */
@media (max-width: 820px) {
	.ac-closing .ac-closing-quote { font-size: 20px; }
	.ac-service-lead { max-width: 100%; }
}

@media (max-width: 980px) {
	.ac-page-hero > .wp-block-group__inner-container,
	.ac-chapter > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ac-page-hero .ac-portrait img {
		height: auto;
		max-height: 460px;
	}
}

/* --- Werkwijze met zijkaart (Figma 80:53) ------------------------------- */

.ac-method > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr 460px;
	gap: 80px;
	align-items: center;
}

.ac-method h2 {
	font-size: 36px;
	line-height: 1.2;
	margin-bottom: 24px;
}

.ac-method p {
	line-height: 1.7;
	color: rgba(31, 42, 36, 0.8);
}

/* Zijkaart "Internationaal inzetbaar" — enige kaart mét rand in het DS */
.ac-method-card {
	background-color: var(--color-surface);
	border: 1px solid rgba(31, 42, 36, 0.15);
	border-radius: var(--radius-card);
	padding: 40px;
}

.ac-method-card .ac-kicker {
	font-size: 12px;
	letter-spacing: 1.4px;
	margin-bottom: 12px;
}

.ac-method-card h3 {
	font-size: 24px;
	color: var(--color-primary);
	margin-bottom: 12px;
}

.ac-method-card p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-fg-muted);
	margin-bottom: 32px;
}

/* Citaatvlakje onderin de zijkaart (Figma 80:63) */
.ac-method-card .ac-method-quote {
	font: 400 20px/1.35 var(--font-display);
	color: var(--color-fg);
	background-color: var(--color-surface-sunken);
	border: none;
	border-radius: var(--radius-button);
	padding: 20px 24px;
	margin: 0;
	max-width: none;
}

@media (max-width: 980px) {
	.ac-method > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.ac-method-card {
		padding: 32px;
	}
}

/* ==========================================================================
   7. Formulieren — basis + Contact Form 7-states
   Geen formulierspec in het design system (geen formulier in de frames);
   opgebouwd uit de tokens. CF7's eigen aria-gedrag niet overschrijven.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea,
select {
	background-color: var(--color-surface);
	color: var(--color-fg);
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-button);
	padding: 12px 14px;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.2s var(--ac-ease), box-shadow 0.2s var(--ac-ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
	box-shadow: var(--ac-focus-ring);
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

label {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--color-fg);
}

/* CF7: labels als blok, velden volle breedte */
.wpcf7 label {
	display: block;
	margin-bottom: 18px;
	font-family: var(--font-ui);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	font-size: 16px;
}

.wpcf7 textarea {
	min-height: 180px;
	resize: vertical;
}

/* CF7: veld met validatiefout */
.wpcf7 .wpcf7-not-valid {
	border-color: var(--ac-error);
}

.wpcf7 .wpcf7-not-valid:focus {
	outline-color: var(--ac-error);
}

.wpcf7 form.submitting .wpcf7-submit {
	cursor: progress;
	background-color: var(--color-primary-hover);
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ac-error);
	margin-top: 4px;
}

/* CF7: response-balk (success/error) */
.wpcf7 form .wpcf7-response-output {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-radius: var(--radius-button);
	border: 1px solid var(--color-border);
	font-size: 15px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ac-success);
	color: var(--ac-success);
	background-color: var(--color-surface);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--ac-error);
	color: var(--ac-error);
	background-color: var(--color-surface);
}

/* ==========================================================================
   8. Diensten-index,
   contact-colofon, navigatie-detail, bewegingsrespect.
   ========================================================================== */

/* --- Diensten-index (Wat ik bied) --------------------------------------
   Bolletjes onderscheiden diensten zonder rangorde (HOME-M03). De bestaande
   nummerblokken zijn verborgen, ook voor schermlezers; de lege pseudo-elementen
   zijn decoratief. Beide pagina's gebruiken dezelfde bolletjes. */
.ac-service-list > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 64px;
	row-gap: 0;
	padding: 0;
}

/* Elk item: bolletje links, titel + omschrijving rechts. */
.ac-service-item {
	border-top: 1px solid var(--color-border);
}

.ac-service-item > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 22px;
	row-gap: 4px;
	padding: 28px 0;
}

.ac-service-item .ac-service-num {
	display: none;
}

.ac-service-item > .wp-block-group__inner-container::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-primary);
	margin-top: 8px;
}

.ac-service-item h3 {
	grid-column: 2;
	align-self: center;
	font-size: 1.3rem;
	line-height: 1.25;
	letter-spacing: -0.005em;
	margin: 0;
}

.ac-service-item p:not(.ac-service-num) {
	grid-column: 2;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-fg-muted);
	margin: 0;
	max-width: 46ch;
}

@media (max-width: 820px) {
	.ac-service-list > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}

/* --- Contact-colofon: bedrijfsgegevens als redactioneel colofon ---------- */
.ac-contact .ac-colophon p {
	margin: 0 0 20px;
	font-size: 1rem;
	line-height: 1.5;
}

.ac-contact .ac-colophon strong {
	display: block;
	font: var(--text-caption-strong);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-fg-muted);
	margin-bottom: 4px;
}

/* Het label staat al op een eigen regel (display: block); de <br> die in de
   blokinhoud volgt zou een tweede lege regel toevoegen. */
.ac-contact .ac-colophon strong + br {
	display: none;
}

/* --- Navigatie-detail: onderstreping groeit bij hover -------------------- */
.main-navigation .main-nav ul li:not(.ac-nav-cta) > a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.18s var(--ac-ease), color 0.18s var(--ac-ease);
}

.main-navigation .main-nav ul li:not(.ac-nav-cta) > a:hover {
	text-decoration-color: var(--color-accent);
}

/* Bewust géén scroll-/laadanimatie: puur-CSS onthulling zonder scroll-trigger
   laat álle secties tegelijk bij het laden infaden — een globale flits zonder
   nut voor secties onder de vouw. Redactionele rust wint; de enige beweging is
   de nav-onderstreping bij hover hierboven. */

/* ==========================================================================
   9. v3 "Redactioneel v3" — papierkorrel, gebroken raster, dieptelagen,
   interactie-states en de ontbrekende pagina's (404, skip-link).
   ========================================================================== */

/* --- 9.1 Papierkorrel ---------------------------------------------------
   Een volledig vlak kleurvlak leest digitaal en steriel; dit merk gaat over
   papier en drukwerk. Een vaste, zeer lichte ruislaag over de hele viewport
   breekt die vlakheid zonder dat je hem als effect herkent. `pointer-events:
   none` zodat er niets onder onklikbaar wordt. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: var(--z-raised);
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 9.2 Missie: kop links, tekst rechts --------------------------------
   Was een gecentreerde kolom. Alles centreren maakt een pagina symmetrisch en
   vlak; een asymmetrische kop/tekst-verdeling geeft de sectie richting en
   sluit aan op de hoofdstuk-opmaak van "Wie ik ben". */
.ac-mission > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: 80px;
	align-items: start;
}

.ac-mission h2 {
	margin: 0;
	text-align: left;
}

.ac-mission p {
	text-align: left;
	margin: 0;
	max-width: var(--measure);
}

.ac-mission p + p {
	margin-top: 20px;
}

@media (max-width: 980px) {
	.ac-mission > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}
}

/* --- 9.3 Diensten-index (Home) ------------------------------------------
   Vervangt het raster van drie gelijke witte kaarten — de meest generieke
   opmaak die er is, en op Home bovendien een doublure van de dienstenpagina.
   Home toont nu een compacte inhoudsopgave (bolletje + titel + één regel);
   de volledige omschrijvingen staan op "Wat ik bied".

   Twee uitgelijnde kolommen geven lange dienstnamen voldoende ruimte.
   Het bolletje staat naast de titel, zoals op de volledige dienstenpagina. */
.ac-index > .wp-block-group__inner-container,
.ac-index-item > .wp-block-group__inner-container {
	padding: 0;
}

.ac-index {
	margin-top: 40px;
}

.ac-index > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 64px;
	row-gap: 0;
}

.ac-index-item {
	border-top: 1px solid var(--color-border-strong);
	padding: 1.75rem 0;
}

.ac-index-item > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr);
	column-gap: 22px;
}

.ac-index-item h3,
.ac-index-item p {
	grid-column: 2;
}

.ac-index-num {
	display: none;
}

.ac-index-item > .wp-block-group__inner-container::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-primary);
	grid-column: 1;
	grid-row: 1 / span 2;
	margin-top: 8px;
}

.ac-index-item h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.25;
	margin: 0 0 8px;
}

.ac-index-item p:not(.ac-index-num) {
	font: var(--text-caption);
	color: var(--color-fg-muted);
	margin: 0;
}

@media (max-width: 820px) {
	.ac-index > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
}

/* --- 9.4 Home-hero: leesritme en diepte ---------------------------------
   Drie alinea's van gelijk gewicht naast een portret lezen als een muur.
   De eerste alinea wordt de lead (groter, donkerder); de rest zakt naar de
   normale leesmaat. Het portret krijgt een getinte schaduw en staat op
   dezelfde bovenlijn als de tekstkolom. */
.ac-hero-lead {
	font: var(--text-lead);
	color: var(--color-fg);
	max-width: 46ch;
}

.ac-hero .ac-portrait img {
	box-shadow: var(--shadow-lifted);
}

.ac-hero .ac-portrait {
	margin-top: 0;
}

@media (max-width: 820px) {
	.ac-hero-lead {
		max-width: none;
	}
}

/* --- 9.5 Donkere banden: één gradatie i.p.v. twee losse vlakken ----------
   De CTA-band en de footer staan direct op elkaar. Twee verschillende
   donkerten zonder relatie leest als een fout; nu loopt het van diep bosgroen
   naar bijna-inkt, met één gouden haarlijn als scheiding. */
.ac-cta-band {
	background-color: var(--a-green-deep);
	padding-bottom: calc(var(--space-section-y) * 1.15);
	padding-top: var(--space-section-y);
	border-top: 1px solid rgba(200, 168, 105, 0.28);
}

.site-footer {
	border-top: 1px solid rgba(200, 168, 105, 0.18);
}

/* Optische verticale ritmering: onderpadding iets ruimer dan boven, zodat een
   sectie niet naar beneden lijkt te zakken. */
.ac-section {
	padding-bottom: calc(var(--ac-section-pad) * 1.1);
}

/* --- 9.6 Skip-link ------------------------------------------------------
   GeneratePress levert de link, maar niet in de huisstijl. Zichtbaar zodra
   hij focus krijgt — de eerste tab-stop van de pagina. */
.screen-reader-text:focus,
a.screen-reader-shortcut:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: var(--z-skiplink);
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
	overflow: visible;
	background-color: var(--color-primary);
	color: #ffffff;
	font: var(--text-ui);
	padding: 12px 20px;
	border-radius: var(--radius-button);
	text-decoration: none;
}

/* --- 9.7 404 ------------------------------------------------------------
   Zie 404.php in dit child theme. Doodlopend eind vermijden: kop, uitleg en
   drie echte routes terug de site in. */
.ac-404 {
	padding-top: var(--space-section-y);
	padding-bottom: calc(var(--space-section-y) * 1.15);
	max-width: 620px;
}

.ac-404 h1 {
	font: var(--text-display-l);
	letter-spacing: -0.01em;
	margin-bottom: 16px;
}

.ac-404 p {
	font: var(--text-body-l);
	color: var(--color-fg-muted);
	margin-bottom: 32px;
}

.ac-404-links {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border-strong);
}

.ac-404-links li {
	border-bottom: 1px solid var(--color-border);
}

.ac-404-links a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font: var(--text-display-m);
	font-size: 1.25rem;
	color: var(--color-fg);
	text-decoration: none;
	transition: color 0.18s var(--ac-ease);
}

.ac-404-links a::after {
	content: "→";
	font: var(--text-ui);
	color: var(--color-accent);
	transition: transform 0.18s var(--ac-ease);
}

.ac-404-links a:hover,
.ac-404-links a:focus-visible {
	color: var(--color-primary);
}

.ac-404-links a:hover::after,
.ac-404-links a:focus-visible::after {
	transform: translateX(4px);
}

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

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