/*
 * css/site.css — de stylesheet van de site, in de huisstijl van de
 * ddop-huisstijl-plugin (DEV-4375; milestone "Implement brand style", DEV-4374).
 *
 * Elke pagina laadt eerst /huisstijl/reference/ddop.css (een ongewijzigde
 * kopie uit de ddop-huisstijl-plugin, zie huisstijl/VERSION) en daarna dit
 * bestand. In de eigen <style> van een pagina staat alleen nog wat alleen bij
 * die pagina hoort. De nav-collapse v1-blokken blijven per pagina staan.
 *
 * Volgorde telt: de <style> van een pagina komt ná dit bestand en wint dus
 * bij gelijke specificiteit. Pagina's die van een regel hieronder afwijken,
 * houden alleen dat verschil in hun eigen <style>.
 *
 * Tijdens de uitrol stond de huisstijl in een apart, tijdelijk bestand dat
 * per pagina werd aangezet. Aan het eind van de milestone is dat bestand
 * hierin opgegaan (DEV-4848, besluit 20): per selector staat hier één regel.
 *
 * De waarden komen uit /huisstijl/reference/ddop.css (de ongewijzigde kopie
 * van de plugin). Geen hexwaarden, geen eigen maten. Waar de plugin geen
 * waarde heeft, staat een tussenoplossing uit bestaande tokens, gemarkeerd
 * met "ontwerpverzoek:".
 *
 * Besluitnummers verwijzen naar docs/Brand style implementation/
 * questions-archive.md.
 */

/* Lettertype — tussenoplossing. ontwerpverzoek: HUI-15.
   De plugin levert DM Sans als vier vaste bestanden, gesneden voor tekstmaten.
   Op koppen van 56px lopen die zo breed uit dat de kop op home na "De"
   afbreekt. Tot de plugin de variabele DM Sans meelevert (met optische maat,
   die letters op grote maten strakker maakt), gebruikt de site die variabele
   versie zelf, onder een eigen naam, zodat de vaste bestanden niet geladen
   worden. Zelf gehost (SIL Open Font License, css/fonts/OFL.txt), niet van
   Google: dat stuurt het IP-adres van elke bezoeker naar een derde partij.
   Besluit Anne 2026-10-05 (vraag 21l). Terug naar de plugin = deze twee
   blokken weg en "DM Sans Variable" uit de font-family hieronder. */
@font-face {
  font-family: "DM Sans Variable";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/DMSans-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans Variable";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/DMSans-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Twee oude sitekleuren blijven, alleen voor de Menu-knop in de
   nav-collapse v1-blokken van elke pagina. Die blokken blijven byte-gelijk
   (besluit 7); de kleuren gaan mee weg zodra dat blok de huisstijl krijgt. */
:root {
  --color-ddop-dark: #1D2849;
  --color-lightblue-2: #C7DCFC;
}

/* ── Tussenmaten (ontwerpverzoek: HUI-16) ────────────────────────────────── */

/* Het label boven een kop in twee maten, naar de maatlogica van de plugin
   (zoals de knoppen lg / md / sm hebben). De plugin heeft alleen de grote:
   --ui-caps-size (16px) is de lg. De site gebruikt de md: 12px, de caption-
   maat van de plugin, met verder alles van het plugin-label (besluit 21b).
   TUSSENOPLOSSING, ontwerpverzoek: HUI-16 — lg- en md-label in de plugin.
   Zodra de plugin ze heeft, vervallen deze regels en wijzen de selectors
   hieronder naar de plugin-tokens. Elke waarde verwijst naar een bestaand
   token; er is geen eigen maat bijgekomen. */
:root {
  --ui-caps-md-size: var(--body-caption-size);              /* 12px */
  --ui-caps-md-line-height: var(--ui-caps-line-height);
  --ui-caps-md-letter-spacing: var(--ui-caps-letter-spacing);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ── Typografie (besluit 4, BRAND.md §4) ─────────────────────────────────── */

body {
  /* "DM Sans Variable" vooraan: tijdelijk, ontwerpverzoek HUI-15 (zie boven). */
  font-family: "DM Sans Variable", var(--font-family);
  font-size: 1rem;                          /* = --body-base-size (16px) */
  line-height: var(--body-base-line-height);
  color: var(--text-primary);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
}

/* Koppen: de plugin-maten in rem (1rem = 16px, besluit 4), 700 en
   regelhoogte 1.2. De letterafstand van -0.01em op h1 t/m h4 komt uit
   ddop.css zelf. */
h1, h2, h3, h4, h5 {
  margin: 0 0 var(--space-16);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-wrap: balance;
}

/* De paginatitel is op deze site altijd de enige h1, in de hero of page-hero:
   de "hero"-trede van de plugin (56px = 3.5rem, regelhoogte 1.1).
   ontwerpverzoek: HUI-11 — de plugin heeft geen telefoonmaten. Tot het
   antwoord er is, zakt alleen de paginatitel op smal scherm naar 2rem, zoals
   de site al deed (besluit 4B). */
h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);      /* tot --heading-hero-size */
  line-height: var(--heading-hero-line-height);
  margin-bottom: var(--space-24);
}
h2 { font-size: 1.5rem; }                   /* = --heading-h2-size (24px) */
h3 { font-size: 1.25rem; }                  /* = --heading-h3-size (20px) */
h4, h5 { font-size: 1.125rem; }             /* = --heading-h4-size (18px) */

/* Sectiekop groter dan de plugin. BEWUSTE AFWIJKING van de huisstijl: de
   plugin-h2 is 1.5rem (--heading-h2-size), maar dan verschillen h2 en h3 te
   weinig. Op besluit van Anne (ledger 28, 28a B, 28b B) krijgt elke
   sectiekop deze klasse: 2rem op desktop, op een telefoon kleiner, tot
   1.5rem. Alleen sectiekoppen; kaarttitels, de titels in de vacaturelijst
   en de zoekresultaten houden de h2 van hierboven. Een klasse wint van de
   kale h2-regels hierboven, ook op plekken als .vacancy-content h2 die geen
   maat zetten. */
.heading-h2-size-lg { font-size: clamp(1.5rem, 4vw, 2rem); }

p { margin: 0 0 var(--space-16); max-width: 65ch; }
p:last-child { margin-bottom: 0; }

/* ── Links ───────────────────────────────────────────────────────────────── */

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --text-link haalt op --surface-accent maar 4,26:1: alleen grote tekst
   (BRAND.md §3). Een link in lopende tekst op een lichtblauw vlak krijgt
   daarom de tekstkleur en een onderstreping, zodat hij een link blijft.
   ontwerpverzoek: HUI-13 — linkkleur op --surface-accent. */
.page-intro p a,
.section-blue-bg .section-intro a,
.cta-content p a {
  color: var(--text-primary);
  text-decoration: underline;
}

/* 700 is alleen voor koppen en het eyebrow-label; nadruk is 600. */
strong, b { font-weight: var(--font-weight-semibold); }
.text-accent { color: var(--text-link); }

/* Eyebrow-label (besluit 5, 21b): het label van de plugin (.eyebrow: 700,
   kapitalen, --text-secondary) in de md-maat van hierboven, 12px. Nooit
   groen: --accent is geen tekstkleur (BRAND.md §2).
   ontwerpverzoek: HUI-16 — de md-maat van het label. */
.eyebrow {
  display: inline-block;
  font-size: var(--ui-caps-md-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--ui-caps-md-line-height);
  letter-spacing: var(--ui-caps-md-letter-spacing);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ── Focusring (BRAND.md §3) ─────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* Op het donkere vlak van de footer is de ring wit. */
footer :focus-visible { outline-color: var(--border-focus-on-inverse); }

.container {
  width: 100%;
  max-width: var(--width-default);
  margin-inline: auto;
  padding-inline: var(--space-responsive);
}

/* ── Header en navigatie (B7, SH2) ───────────────────────────────────────── */

.site-header {
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-16);
  flex-wrap: wrap;
}
/* Ingeklapte header op de telefoon (nav-collapse v1): het menu en de taalkeuze
   krimpen naar hoogte 0 maar houden elk een eigen rij, en de rij-afstand van
   de header-container bleef dan twee keer staan. Zonder rij-afstand sluit de
   balk strak om logo en Menu-knop (vraag 42). Staat bewust buiten het
   nav-collapse v1-blok, dat ongemoeid blijft (besluit 7). */
.site-header.collapsed > .container { row-gap: 0; }
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
/* Het kleurenlogo van de plugin in de header. SITE-UITZONDERING op de maten
   van de topbalk van de plugin (3.5rem / 2.5rem, components.md, Horizontale
   navigatie): op besluit van Anne (2026-10-05, vraag 40) één hoogte van
   2.1rem op elke schermbreedte, met 1rem ruimte rechts. Vervangt besluit 21g.
   Proportioneel (viewBox 200 × 57). Logomaten zijn geen tokens. De vrije ruimte
   eromheen (minstens 1/8 van de hoogte, BRAND.md §12) zit ruim in de padding
   van de header en deze marge. */
.nav-brand img { height: 2.1rem; width: auto; margin-right: 1rem; }
.nav { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
/* Alle menulinks staan op 600, zoals in de brede balk van de plugin; het
   actieve item verschilt alleen in kleur (besluit 21f). De blauwe
   onderstreping vervalt (BRAND.md §9). De rand zelf blijft transparant staan,
   zodat de hoogte van de balk niet verandert. */
.nav-item {
  color: var(--nav-item-text);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-4) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast);
}
.nav-item:hover, .nav-item.active { text-decoration: none; }
.nav-item:hover { color: var(--nav-item-text-hover); }
.nav-item.active { color: var(--nav-item-text-active); }

/* De taalkeuze heeft geen component in de plugin.
   ontwerpverzoek: HUI-14 — taalkeuze in de header. Tussenoplossing:
   de gekozen taal in de vlak- en tekstkleur van de primaire knop, de andere
   in --text-secondary. Padding naar de schaal (4 / 12). */
.lang-switch { display: flex; gap: var(--space-4); align-items: center; font-size: 0.875rem; margin-left: auto; }
.lang-switch a { padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); color: var(--text-secondary); }
.lang-switch a.current { background: var(--action-primary-surface); color: var(--action-primary-text); }
.lang-switch a:hover { text-decoration: none; color: var(--text-primary); }
.lang-switch a.current:hover { background: var(--action-primary-surface-hover); color: var(--action-primary-text); }

/* ── Knoppen (BRAND.md §8) ───────────────────────────────────────────────── */

/* Hoogte is leidend: height met box-sizing, de padding is de controle.
   Geen lift meer bij aanwijzen. */
.btn-lg, .btn-md, .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  /* inline-flex laat de spatie tussen label en pijl (<span>→</span>) vallen;
     de gap zet ze 8px uit elkaar (DEV-4860). */
  gap: var(--space-8);
}
.btn-lg {
  height: var(--button-height-lg);
  padding: var(--button-padding-block-lg) var(--button-padding-inline-lg);
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
}
.btn-md {
  height: var(--button-height-md);
  padding: var(--button-padding-block-md) var(--button-padding-inline-md);
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
}
.btn-sm {
  height: var(--button-height-sm);
  padding: var(--button-padding-block-sm) var(--button-padding-inline-sm);
  font-size: var(--button-font-size-sm);
  line-height: var(--button-line-height-sm);
}
/* Op een telefoon mag het label van een knop over meer regels lopen, zodat
   een lang label ("Bekijk hoe samenwerken eruitziet") niet breder wordt dan
   het scherm (Anne, ledger 48c A). De vaste hoogte wordt een minimumhoogte
   en de ruimte boven en onder het label wordt kleiner: een knop van één
   regel blijft daardoor precies even hoog, met het label op dezelfde plek.
   Een label over twee regels staat gecentreerd. */
@media (max-width: 639px) {
  .btn-lg, .btn-md, .btn-sm { height: auto; white-space: normal; text-align: center; }
  .btn-lg { min-height: var(--button-height-lg); padding-block: var(--space-8); }
  .btn-md { min-height: var(--button-height-md); padding-block: var(--space-4); }
  .btn-sm { min-height: var(--button-height-sm); padding-block: var(--space-4); }
}

/* Primair: aanwijzen maakt donkerder, indrukken nog donkerder. Nooit lichter. */
.btn-darkblue { background: var(--action-primary-surface); color: var(--action-primary-text); }
.btn-darkblue:hover {
  background: var(--action-primary-surface-hover);
  color: var(--action-primary-text);
  text-decoration: none;
}
.btn-darkblue:active { background: var(--action-primary-surface-active); }

/* Secundair: 1px rand in de actiekleur, doorzichtig in rust. */
.btn-outline {
  background: transparent;
  border-color: var(--action-secondary-border);
  color: var(--action-secondary-text);
}
.btn-outline:hover {
  background: var(--action-secondary-surface-hover);
  border-color: var(--action-secondary-border-hover);
  color: var(--action-secondary-text-hover);
  text-decoration: none;
}
.btn-outline:active {
  background: var(--action-secondary-surface-active);
  border-color: var(--action-secondary-border-active);
  color: var(--action-secondary-text-active);
}

/* ── Aanklikbare kaart (patroon regel 7; Anne, 34 en 34a A) ───────────────── */

/* Een kaart die naar een andere pagina leidt, is in zijn geheel klikbaar:
   de kaart is zelf de <a>, of de titellink (.card-clickable__link) strekt
   zich over de hele kaart uit. Bij aanwijzen krijgt de kaart --surface-hover,
   --border-strong en een lift van 0.125rem, zonder schaduw. De lift is een
   bewuste afwijking van de plugin, die geen lift kent (Anne, 33 en 34a A).
   Vlak, rand, hoek en binnenruimte van de kaart in rust staan bij de pagina.
   Een kaart die nergens heen leidt, krijgt deze klasse niet. */
.card-clickable {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.card-clickable:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-0.125rem);
  text-decoration: none;
}
.card-clickable__link::after { content: ""; position: absolute; inset: 0; }
.card-clickable__link:hover { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .card-clickable { transition: none; } }

/* ── Vlakken: geen gradiënten (besluit 2) ────────────────────────────────── */

.page-hero {
  padding: 3rem 0 2rem;
  background: var(--surface-accent);
}
.page-intro { max-width: 51.25rem; text-align: center; margin: 0 auto; }
.page-intro h1 { margin-bottom: var(--space-16); }
/* Lopende tekst buiten de koppen staat op de drie tekstmaten van de plugin,
   gekozen naar wat de tekst doet (besluit 21d): body 16px voor lopende tekst
   en intro's, small 14px voor bijzaak, caption 12px voor hints en de kleine
   regel onderaan. */
.page-intro p { font-size: var(--body-base-size); color: var(--text-secondary); margin: 0 auto; max-width: 65ch; }
@media (min-width: 640px) {
  .page-hero { padding: 4rem 0 3rem; }
}

/* ── Vacaturepagina's (vacatures/*.html, DEV-4861) ───────────────────────── */

/* Koppen en namen zijn donker, alleen links zijn blauw (vraag 39 B). */

/* Kruimelpad op het lichtblauwe vlak van de page-hero. --text-link haalt daar
   maar 4,26:1, te weinig voor 14px: de links krijgen de tekstkleur en een
   onderstreping, zoals .page-intro p a hierboven. Het scheidingsteken in
   --text-secondary, nooit --text-muted op een getint vlak.
   ontwerpverzoek: HUI-13 — linkkleur op --surface-accent. */
.breadcrumb { font-size: var(--body-small-size); color: var(--text-secondary); margin-bottom: var(--space-16); }
.breadcrumb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.breadcrumb-list li { display: inline-flex; align-items: center; gap: var(--space-8); }
.breadcrumb-list li:not(:last-child)::after { content: "/"; color: var(--text-secondary); }
.breadcrumb-list a { color: var(--text-primary); text-decoration: underline; }
.vacancy-hero-intro { max-width: 47.5rem; }
.vacancy-hero-intro h1 { color: var(--text-primary); margin-bottom: var(--space-16); }
.vacancy-hero-intro .subtitle { font-size: var(--body-base-size); color: var(--text-secondary); margin: 0; }

/* ── Taalnotitie (EN-pagina's) ───────────────────────────────────────────── */

/* Op wit, met een dunne rand en de blauwe balk links (Anne, vraag 33a B).
   Op wit haalt --text-link 5,98:1, dus de links zijn gewone links: blauw,
   normaal gewicht, onderstreept bij aanwijzen. De marge eromheen hoort bij
   de pagina. */
.language-note {
  max-width: 47.5rem;
  padding: var(--space-16) var(--space-24);
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--action-primary-surface);
  border-radius: var(--radius-sm);
  font-size: var(--body-base-size);
  color: var(--text-primary);
}
.language-note p { margin: 0; max-width: none; }
.language-note a { color: var(--text-link); font-weight: var(--font-weight-regular); text-decoration: none; }
.language-note a:hover { text-decoration: underline; }

.section { padding: 3rem 0; }
.section-alt { padding: 3rem 0; background: var(--surface-muted); }
.section-blue-bg {
  background: var(--surface-accent);
  padding: 3rem 0;
}
@media (min-width: 768px) {
  .section { padding: 4rem 0; }
}

/* Vacaturetekst. Op smal scherm is de ene kolom minmax(0, 1fr), zodat niets
   erin (ook de zijbalk niet) de pagina breder maakt dan het scherm. */
.vacancy-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
@media (min-width: 900px) {
  .vacancy-detail-layout { grid-template-columns: minmax(0, 1fr) 18.75rem; gap: var(--space-48); }
}
.vacancy-content .vacancy-section { margin-bottom: var(--space-32); }
.vacancy-content .vacancy-section:last-child { margin-bottom: 0; }
.vacancy-content h2 { color: var(--text-primary); margin-bottom: var(--space-16); }
.vacancy-content .vacancy-intro p { font-size: var(--body-base-size); color: var(--text-secondary); }
.vacancy-content ul { padding-left: var(--space-20); margin: 0 0 var(--space-16); }
.vacancy-content ul li { margin-bottom: var(--space-4); }

/* Zijbalk: een kaart (besluit 8, vraag 37a A): wit, 1px --border-subtle,
   --radius-md, geen schaduw. Op een telefoon heeft hij geen eigen marge en
   staat hij in de ene kolom hierboven, die nooit breder wordt dan het scherm
   (vraag 37a). De kop krijgt de h3-trede. */
.vacancy-sidebar {
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-self: start;
  position: sticky;
  top: 5.625rem;
}
/* Op een telefoon 16px binnenruimte, zodat de details-lijst ook op 320px
   binnen de kaart past (vraag 46a B). */
@media (max-width: 639px) { .vacancy-sidebar { padding: var(--space-16); } }
.vacancy-sidebar h3 { font-size: 1.25rem; margin: 0 0 var(--space-8); color: var(--text-primary); } /* = --heading-h3-size */
.vacancy-sidebar dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8) var(--space-16);
  font-size: var(--body-small-size);
}
.vacancy-sidebar dt { color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
.vacancy-sidebar dd { margin: 0; color: var(--text-primary); }
.vacancy-sidebar .vacancy-apply {
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.vacancy-sidebar .vacancy-apply a:not(.btn-sm) { color: var(--text-link); font-weight: var(--font-weight-semibold); }
.vacancy-sidebar .vacancy-apply .btn-sm { width: 100%; margin-top: var(--space-4); }
/* De knoptekst blijft leesbaar: deze regel wint van de linkkleur hierboven
   (VSG §23). */
.vacancy-sidebar .vacancy-apply .btn-sm.btn-darkblue,
.vacancy-sidebar .vacancy-apply .btn-sm.btn-darkblue:hover {
  color: var(--action-primary-text);
}
/* Een hint is caption (12px), besluit 21d. */
.vacancy-apply__hint { font-size: var(--body-caption-size); color: var(--text-secondary); margin: var(--space-4) 0 0; }
.vacancy-apply__hint a { color: var(--text-link); font-weight: var(--font-weight-semibold); }

/* Solliciteren. DEV-4521: de kolom was 1fr (minimaal "auto"), zodat de eigen
   breedte van het bestandsveld het raster breder maakte dan een telefoon.
   minmax(0, …) houdt alles binnen het scherm. */
.solliciteren-anchor { display: block; height: 0; visibility: hidden; scroll-margin-top: 5.625rem; }
.solliciteren-section { padding: var(--space-48) 0; background: var(--surface-muted); }
@media (min-width: 768px) {
  .solliciteren-section { padding: var(--space-64) 0; }
}
.solliciteren-intro { max-width: 47.5rem; margin: 0 auto var(--space-32); }
.solliciteren-intro h2 { color: var(--text-primary); margin-bottom: var(--space-8); }
.solliciteren-intro p { color: var(--text-secondary); margin: 0; max-width: none; }
.solliciteren-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-32);
  max-width: 62.5rem;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .solliciteren-grid {
    grid-template-columns: minmax(0, 16.25rem) minmax(0, 1fr);
    gap: var(--space-48);
    align-items: start;
  }
}
/* "Vragen"-kaart en formulier zijn kaarten (besluit 8): wit, 1px
   --border-subtle, --radius-md, geen schaduw. */
.vragen-card {
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-self: start;
}
/* "Vragen over deze vacature?" is een label boven een blok: het label van
   .eyebrow hierboven (besluit 21b), md-maat, nooit groen.
   ontwerpverzoek: HUI-16 — de md-maat van het label. */
.vragen-card .vragen-eyebrow {
  font-size: var(--ui-caps-md-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--ui-caps-md-line-height);
  letter-spacing: var(--ui-caps-md-letter-spacing);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.vragen-person { display: flex; align-items: center; gap: var(--space-16); }
/* De initiaal: --surface-accent met --text-primary (patroon). */
.vragen-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--body-base-size);
  flex-shrink: 0;
}
.vragen-person strong { color: var(--text-primary); font-size: var(--body-base-size); font-weight: var(--font-weight-semibold); }
.vragen-contacts { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--body-base-size); }
.vragen-contacts a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-link);
  font-weight: var(--font-weight-semibold);
}
/* Lucide-iconen bij een link: --icon-sm in --icon-link, geen opacity
   (BRAND.md §13). */
.vragen-contacts svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--icon-link); }
.apply-form-wrapper {
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-24);
}
@media (min-width: 640px) { .apply-form-wrapper { padding: var(--space-32); } }
.apply-form { display: flex; flex-direction: column; gap: var(--space-16); }
@media (min-width: 768px) {
  .section-alt, .section-blue-bg { padding: 4rem 0; }
}
.section-title { text-align: center; margin-bottom: var(--space-16); }
.section-intro {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--space-48);
  color: var(--text-secondary);
  font-size: var(--body-base-size);
}
.prose-wrap { max-width: 47.5rem; margin: 0 auto; }
.prose-wrap h2 { margin-bottom: var(--space-24); }
.prose-wrap p { color: var(--text-primary); max-width: none; margin-bottom: var(--space-16); }
.bulletpoints-list {
  list-style: none;
  padding: 0;
  margin: var(--space-24) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.icon-chevron::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.step-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: var(--space-32) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.step-list li {
  counter-increment: step;
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-16);
  align-items: start;
}
.step-list li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--action-primary-surface);
  color: var(--action-primary-text);
  border-radius: 50%;
  font-weight: var(--font-weight-semibold);
  font-size: var(--body-base-size);
}
.step-list strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  font-size: var(--body-base-size);
}

/* ── Formulier (BRAND.md §9, components.md Formulier) ────────────────────── */

.form-row { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row label { font-size: var(--ui-label-size); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
/* Het sterretje is geen link, dus niet blauw (Anne, vraag 39 B). */
.form-row label .required { color: var(--text-primary); }
/* Het veld staat op wit, 40px hoog, rand --input-border (= --border-strong). */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row select,
.form-row textarea {
  box-sizing: border-box;
  height: var(--input-height);
  padding: 0 var(--space-8);
  font-family: inherit;
  font-size: 1rem;                          /* = --body-base-size */
  color: var(--input-text);
  background: var(--input-surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
  width: 100%;
}
/* Focus: de rand wordt blauw EN de ring komt erbovenop (BRAND.md §3). */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--input-border-focus);
}
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.form-row textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.5;
  height: auto;
  padding: var(--space-8);
}
.form-row-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
@media (min-width: 700px) {
  .form-row-grid { grid-template-columns: 1fr 1fr; }
}
/* Bestandsveld (cv bij een sollicitatie). min-width: 0 en max-width: 100%
   houden het veld binnen zijn kolom op een telefoon (DEV-4521). */
.form-row input[type="file"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: var(--body-small-size);
  color: var(--text-secondary);
  padding: var(--space-4) 0;
}
/* De kiesknop is een kleine secundaire knop (btn-outline, sm; BRAND.md §8). */
.form-row input[type="file"]::file-selector-button {
  box-sizing: border-box;
  height: var(--button-height-sm);
  padding: var(--button-padding-block-sm) var(--button-padding-inline-sm);
  margin-right: var(--space-16);
  font-family: inherit;
  font-size: var(--button-font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--button-line-height-sm);
  border: 1px solid var(--action-secondary-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--action-secondary-text);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.form-row input[type="file"]::file-selector-button:hover {
  background: var(--action-secondary-surface-hover);
  border-color: var(--action-secondary-border-hover);
  color: var(--action-secondary-text-hover);
}
.form-row input[type="file"]::file-selector-button:active {
  background: var(--action-secondary-surface-active);
  border-color: var(--action-secondary-border-active);
  color: var(--action-secondary-text-active);
}
/* Toestemmingsvakje naast de tekst (Anne, vraag 35a A). .form-row zet de
   richting op kolom, waardoor het vakje los boven de tekst stond. De 4px
   bovenmarge zet het vakje (1rem) op de eerste tekstregel (22,4px hoog). */
.form-row-checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-8); }
.form-row-checkbox input[type="checkbox"] {
  margin-top: var(--space-4);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--action-primary-surface);
}
/* De toestemmingstekst is lopende tekst, geen veldlabel: small, regular,
   niet de 600 van .form-row label hierboven (besluit 21d). */
.form-row-checkbox label {
  font-size: var(--body-small-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--body-small-line-height);
  color: var(--text-secondary);
}
.form-row-checkbox label a { color: var(--text-link); font-weight: var(--font-weight-semibold); }
.hp-field { position: absolute; left: -624.9375rem; width: 0.0625rem; height: 0.0625rem; overflow: hidden; }

/* ── Meldingen (besluit 1, BRAND.md §10, components.md Meldingen) ────────── */

/* Tekst in -text, icoon en rand in -accent, vlak in -surface. Elk soort
   melding heeft een eigen icoonvorm (Lucide, inline in de pagina). */
.form-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-24);
  font-size: 1rem;                          /* = --body-base-size */
}
.form-notice__icon {
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: var(--space-4);               /* centreert het icoon op de eerste regel */
}
.form-notice p { margin: 0; max-width: none; }
.form-notice--success {
  background: var(--status-success-surface);
  border: 1px solid var(--status-success-accent);
  color: var(--status-success-text);
}
.form-notice--success .form-notice__icon { color: var(--status-success-accent); }
.form-notice--error {
  background: var(--status-error-surface);
  border: 1px solid var(--status-error-accent);
  color: var(--status-error-text);
}
.form-notice--error .form-notice__icon { color: var(--status-error-accent); }
/* Een link in een melding: onderstreept, in de kleur van de meldingstekst. */
.form-notice a { color: inherit; text-decoration: underline; font-weight: 600; }
.form-notice[hidden] { display: none; }
/* Een hint onder een veld is caption (12px), besluit 21d. */
.form-help { font-size: var(--body-caption-size); color: var(--input-text-hint); margin: 0; }
.form-actions { margin-top: var(--space-8); }

/* ── CTA-band: licht (besluit 3) ─────────────────────────────────────────── */

.page-cta {
  padding: 4rem 0;
  background: var(--surface-accent);
  color: var(--text-primary);
}
.cta-content { text-align: center; max-width: 50rem; margin: 0 auto; }
.cta-content h2 { color: var(--text-primary); margin-bottom: var(--space-16); }
.cta-content p {
  color: var(--text-secondary);
  margin-bottom: var(--space-32);
  max-width: none;
  font-size: var(--body-base-size);
}
/* De gewone primaire knop, geen variant. */
.cta-content .btn-lg { background: var(--action-primary-surface); color: var(--action-primary-text); }
.cta-content .btn-lg:hover { background: var(--action-primary-surface-hover); color: var(--action-primary-text); }
.cta-content .btn-lg:active { background: var(--action-primary-surface-active); }
@media (min-width: 640px) {
  .page-cta { padding: 5rem 0; }
}

/* ── Footer (C15, components.md Footer) ──────────────────────────────────── */

/* Eén tekstkleur op donker: --text-on-inverse. Hiërarchie komt van grootte en
   gewicht, niet van een lichtere tint wit. De groene bovenrand is een
   decoratieve rand in --accent, wat de plugin toestaat (BRAND.md §2).
   Tekstmaten (besluit 21d, keuze 24a B): de kolomkoppen blijven de h4-trede
   (18px), de tekst en links in de kolommen zijn body (16px), de regel onderaan
   is small (14px). Zo komt het verschil van grootte, niet van kleur. */
footer {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-top: 3px solid var(--accent);
  padding: 3rem 0 1.5rem;
  font-size: var(--body-base-size);
}
footer a { color: var(--text-on-inverse); text-decoration: none; }
footer a:hover { color: var(--text-on-inverse); text-decoration: underline; }
/* Het witte logo van de plugin. Proportioneel geschaald (viewBox 200 × 57),
   met minstens een achtste van de logohoogte vrij eromheen (BRAND.md §12).
   Logomaten zijn geen tokens. In de footer blijft het 2rem hoog, de maat van
   vóór besluit 21g; dat besluit gaat over de header. */
.footer-brand {
  display: block;
  height: 2rem;
  width: auto;
  margin-bottom: var(--space-16);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-48); margin-bottom: var(--space-32); }
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer-column h4 { color: var(--text-on-inverse); font-size: 1.125rem; font-weight: var(--font-weight-bold); margin: 0 0 var(--space-16); }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column li { margin-bottom: var(--space-8); }
.footer-about p {
  color: var(--text-on-inverse);
  font-size: var(--body-base-size);
  line-height: 1.6;
  margin: 0 0 var(--space-16);
  max-width: 38ch;
}
.footer-bottom {
  border-top: 1px solid var(--border-on-inverse);
  padding-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-16);
  font-size: var(--body-small-size);
  color: var(--text-on-inverse);
}