/* RAEV — pagina-scaffolding.
   Tokens + componenten staan in raev-base.css; hier alleen opbouw op paginaniveau.

   ÉÉN BRON voor mockups én theme:
     mockups : <link rel="stylesheet" href="raev-pages.css">
     theme   : assets/css/raev-pages.css, geënqueued na raev-base

   Samengevoegd op 20/07 uit mockup-chrome.css + de inline $chrome uit functions.php.
   Zet nieuwe pagina-brede regels HIER, niet in een <style> of inline — anders
   drijven mockup en theme uit elkaar. */

/* ============================================================
   1 · HEADER / FOOTER — gedeeld door alle pagina's
   ============================================================ */

/* Logo (sinds 22/07). In WordPress via the_custom_logo(); in de mockups als <img class="custom-logo">.
   Hoogte stuurt, breedte volgt — de volledige compositie is 4.35:1.

   MÉT baseline "vind talent dichtbij" (keuze Elke, 22/07). Hoogte is daarop afgestemd:
   de baseline staat op drie regels, dus elke regel is ±1/3 van de logohoogte. Op 44px
   wordt dat ±15px per regel — leesbaar. Ga je lager dan ~36px, dan slibt ze dicht.
   Onder 860px klapt de nav in een hamburger, dus daar is breedte geen probleem. */
.custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.custom-logo { height: 44px; width: auto; display: block; }
@media (min-width: 1200px) { .custom-logo { height: 52px; } }

/* Cream-variant voor de donkere footer; het navy logo zou daar wegvallen.
   De oranje baseline blijft oranje — die leest goed op navy. */
.footer-logo { height: 48px; width: auto; display: block; }

/* Tekst-wordmark = terugval als er géén logo is ingesteld (en in oude mockups). */
.wordmark { font-family: var(--raev-font-heading); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--raev-blue-700); letter-spacing: -.02em; text-decoration: none; }
.wordmark b { color: var(--raev-orange-600); }
.header-cta { margin-left: auto; white-space: nowrap; }
.raev-nav ul { display: contents; list-style: none; margin: 0; padding: 0; }
/* Scheiding vóór het werkgevers-item. Een WP-menu kent geen los divider-element, dus
   krijgt dat menu-item de klasse raev-nav-sep en tekenen we de streep ervoor. */
.raev-nav .menu-item.raev-nav-sep { display: flex; align-items: center; }
.raev-nav .menu-item.raev-nav-sep::before { content: ""; width: 1px; height: 20px;
  background: var(--raev-border-default); margin-right: var(--raev-space-lg); }

.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--raev-space-2xl);
  padding-block: var(--raev-space-4xl); }
.footer-cols h4 { color: var(--raev-cream-0); font: var(--raev-text-h5); margin-bottom: var(--raev-space-md); }
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font: var(--raev-text-small); }

/* ============================================================
   2 · PAGINA-OPBOUW — hero, secties, grids, banden
   ============================================================ */

.hero { background: linear-gradient(180deg, var(--raev-cream-0), var(--raev-blue-50)); }
.hero__inner { max-width: 760px; }
.hero h1 { margin-bottom: var(--raev-space-md); }
.hero__sub { font: var(--raev-text-h4); color: var(--raev-blue-700); margin-bottom: var(--raev-space-md); }

.chips { display: flex; flex-wrap: wrap; gap: var(--raev-space-sm); margin-top: var(--raev-space-lg); }
.chip { font: var(--raev-text-small); border: 1px solid var(--raev-border-strong);
  border-radius: var(--raev-radius-md); padding: 6px 14px; color: var(--raev-blue-700); background: #fff; }
.chip:hover { background: var(--raev-orange-50); border-color: var(--raev-orange-400); }

.textlink { color: var(--raev-blue-700); font-weight: 600; }
.textlink:hover { color: var(--raev-orange-600); }

.sec-head { max-width: 640px; margin-bottom: var(--raev-space-2xl); }
.sec-head--row { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--raev-space-lg); max-width: none; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raev-space-2xl); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--raev-space-2xl); }
.usp-grid { column-gap: var(--raev-space-5xl); row-gap: var(--raev-space-3xl); }
.center { text-align: center; }
.mt-lg { margin-top: var(--raev-space-2xl); }

.usp__icon { width: 52px; height: 52px; border-radius: var(--raev-radius-md);
  background: var(--raev-orange-100); color: var(--raev-orange-700);
  display: grid; place-items: center; margin-bottom: var(--raev-space-md); }
/* Was: white-space:nowrap om de 3 USP-titels op één lijn te houden zodat de bodies uitlijnen.
   Dat brak zodra de titels langer werden (herschrijving 08/26): tussen 861px en ~1000px zijn
   de kolommen smal én mocht de tekst niet afbreken -> horizontale overloop op tablet.
   Nu mag de titel afbreken; de uitlijning van de bodies blijft behouden doordat elke titel
   twee regels hoog gereserveerd krijgt. */
.usp h3 { font-family: var(--raev-font-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.3;
  color: var(--raev-text-heading); margin-bottom: var(--raev-space-md); min-height: 2.6em;
  text-wrap: balance; }

/* Donkere band — max 2 per pagina, anders verliest ze haar nadruk. */
.band-dark { background: var(--raev-blue-700); color: var(--raev-cream-0); }
.band-dark h2 { color: var(--raev-cream-0); }
.band-dark .muted { color: var(--raev-skyblue-200); }
.band-soft { background: var(--raev-cream-50); }

.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--raev-space-3xl); align-items: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--raev-space-md); margin-top: var(--raev-space-lg); }
/* Beeld uit een ACF-afbeeldingsveld. */
.raev-beeld { display: block; width: 100%; height: auto; border-radius: var(--raev-radius-lg); }

/* Placeholder zolang er geen beeld gekozen is — nooit een leeg gat of gebroken img.
   --donker staat op een blauwe band, --licht op cream/wit. */
.ph-visual { border-radius: var(--raev-radius-lg); min-height: 220px; background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 12px, rgba(255,255,255,.03) 12px, rgba(255,255,255,.03) 24px); }
.ph-visual--donker { background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 12px, rgba(255,255,255,.03) 12px, rgba(255,255,255,.03) 24px); }
.ph-visual--licht { background:
  repeating-linear-gradient(45deg, var(--raev-blue-100), var(--raev-blue-100) 12px, var(--raev-blue-50) 12px, var(--raev-blue-50) 24px); }

.linklist { display: flex; flex-wrap: wrap; gap: var(--raev-space-sm) var(--raev-space-lg); }
.linklist a { color: var(--raev-blue-700); }
.linklist a:hover { color: var(--raev-orange-600); }

.alert-band { background: var(--raev-blue-50); border-top: 1px solid var(--raev-blue-100);
  border-bottom: 1px solid var(--raev-blue-100); }
.alert-form { display: flex; flex-wrap: wrap; gap: var(--raev-space-md); max-width: 520px; }
.alert-form .raev-field { flex: 1 1 240px; }

/* ============================================================
   3 · VACATURES — lijst, kaart, detail
   ============================================================ */

/* min(280px, 100%) i.p.v. 280px: onder ~328px schermbreedte past een kolom van 280px niet
   meer naast de containerpadding en liep de lijst horizontaal over. Met min() krimpt de
   kolom mee in plaats van de pagina te verbreden. */
.raev-vacgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--raev-space-2xl); margin-top: var(--raev-space-2xl); }

.raev-vaccard { transition: transform .14s ease, box-shadow .14s ease; }
.raev-vaccard:hover { transform: translateY(-3px); box-shadow: var(--raev-shadow-lg); }
.raev-vaccard__title a { color: inherit; text-decoration: none; }
.raev-vaccard:hover .raev-vaccard__title a { color: var(--raev-orange-600); }
.raev-vaccard__cta { align-self: flex-start; margin-top: auto; font: var(--raev-text-small); font-weight: 600;
  color: var(--raev-blue-700); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: gap .12s ease, color .12s ease; }
.raev-vaccard:hover .raev-vaccard__cta { color: var(--raev-orange-600); gap: 10px; }

/* Taxonomie-badges zijn klikbaar (gemeente/sector/contracttype). */
.raev-badge[href] { text-decoration: none; transition: filter .12s ease; }
.raev-badge[href]:hover { filter: brightness(.93); }

/* Zoek/filterbalk: dominante zoek-input, gelijke hoogtes, knop met nadruk. */
.raev-searchbar { align-items: center; padding: var(--raev-space-sm); }
.raev-searchbar .raev-field { min-height: 48px; }
/* Het zoekveld krijgt een eigen rij. Alles op één rij paste niet: dan werd of het
   placeholder-tekstje of het langste filterlabel afgekapt, afhankelijk van wie er ruimte kreeg. */
.raev-searchbar input.raev-searchbar__q { flex: 1 1 100%; }
/* flex-basis 150px kapte het langste label af ("Alle contracttypes" werd "Alle contracttyp").
   Basis "auto" mag hier NIET: .raev-field heeft width:100%, en dan claimt elke select een
   volle regel en valt de balk uit elkaar. Een vaste, ruimere basis lost allebei op. */
.raev-searchbar select.raev-field { flex: 1 1 200px; background: #fff; cursor: pointer; }
.raev-searchbar .raev-searchbar__submit { flex: 0 0 auto; min-height: 48px; }

/* Detailpagina */
.raev-detailgrid { display: flex; gap: var(--raev-space-3xl); align-items: flex-start; }
.raev-detailgrid__main { flex: 1 1 60%; min-width: 0; }
.raev-detailgrid__side { flex: 0 0 320px; }
.raev-jobhero { background: linear-gradient(180deg, var(--raev-cream-0), var(--raev-blue-50));
  border-bottom: 1px solid var(--raev-blue-100); }
.raev-jobhero__title { margin: var(--raev-space-sm) 0 var(--raev-space-xs); text-wrap: balance; }
.raev-jobhero__company { font: var(--raev-text-h5); color: var(--raev-text-heading); }
.raev-jobhero__cta { margin-top: var(--raev-space-lg); }
.raev-jobhero__meta { display: flex; align-items: center; gap: var(--raev-space-lg); flex-wrap: wrap;
  margin-top: var(--raev-space-md); font: var(--raev-text-small); color: var(--raev-text-muted); }

/* Geldigheids-chip — draagt de USP "geen dode vacatures". */
.raev-validity { display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  padding: 5px 13px; border-radius: var(--raev-radius-pill); }
.raev-validity::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.raev-validity--ok { color: var(--raev-success); background: var(--raev-success-bg); }
.raev-validity--soon { color: var(--raev-warning); background: var(--raev-warning-bg); }
.raev-validity--exp { color: var(--raev-error); background: var(--raev-error-bg); }

.raev-applycard { border-color: var(--raev-orange-200); }
.raev-applycard .raev-btn { width: 100%; justify-content: center; }
.raev-sidecard + .raev-sidecard { margin-top: var(--raev-space-lg); }
.raev-share { display: flex; flex-wrap: wrap; gap: var(--raev-space-sm); }
/* Kleiner dan een gewone knop: delen is een secundaire actie en mocht visueel niet
   even zwaar wegen als de sollicitatieknop. .raev-btn geeft 18px + ruime padding mee. */
.raev-share a { flex: 1 1 auto; justify-content: center;
  font: 600 0.875rem/1.4 var(--raev-font-body);
  padding: var(--raev-space-sm) var(--raev-space-md); }

/* Witte ring: anders te weinig contrast op de blauwe band. */
.raev-whatsapp { color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35), var(--raev-shadow-lg); }

.raev-prose > *:first-child { margin-top: 0; }
.raev-prose h3 { margin-top: var(--raev-space-2xl); font: var(--raev-text-h3); color: var(--raev-text-heading); }
.raev-prose ul { padding-left: 1.15em; margin-bottom: var(--raev-space-lg); }
.raev-prose li { margin-bottom: 6px; }
.raev-prose li::marker { color: var(--raev-orange-600); }

/* ============================================================
   4 · CONTENTPAGINA-COMPONENTEN
   Komen op meerdere pagina's terug, dus hier en niet in een <style> per pagina.
   ============================================================ */

/* Keuzekaart (2 werkgever-modellen) — voor-werkgevers, vacature-plaatsen.
   Gelijke hoogte met de knop onderaan uitgelijnd. */
.modelcard { display: flex; flex-direction: column; }
.modelcard__num { font: var(--raev-text-h5); color: var(--raev-orange-700); margin-bottom: var(--raev-space-sm); }
.modelcard p { flex: 1 1 auto; }
.modelcard .raev-btn { align-self: flex-start; margin-top: var(--raev-space-lg); }

/* Genummerde stap — vacature-plaatsen, job-alert. Het cijfer IS de structuur:
   alleen gebruiken waar de volgorde echt iets betekent. */
.step__num { width: 44px; height: 44px; border-radius: 50%;
  background: var(--raev-orange-700); color: var(--raev-cream-0);
  font: var(--raev-text-h5); display: grid; place-items: center; margin-bottom: var(--raev-space-md); }
.step h3 { font-family: var(--raev-font-heading); font-weight: 700; font-size: 1.25rem;
  line-height: 1.3; color: var(--raev-text-heading); margin-bottom: var(--raev-space-md); }

/* FAQ op <details> — voor-werkgevers, vacature-plaatsen, flexi-studenten. */
.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--raev-border-default); }
.faq summary { cursor: pointer; list-style: none; padding: var(--raev-space-lg) 0;
  font: var(--raev-text-h5); color: var(--raev-text-heading);
  display: flex; justify-content: space-between; gap: var(--raev-space-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--raev-orange-600); font-weight: 700; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 var(--raev-space-lg); max-width: 68ch; }

/* Testimonial — rendert alleen bij een echt citaat (zie page-voor-werkgevers.php). */
.testi { border: 1px solid var(--raev-border-default); border-radius: var(--raev-radius-lg);
  padding: var(--raev-space-3xl); background: #fff; max-width: 780px;
  margin-inline: auto; text-align: center; }
.testi blockquote { font: var(--raev-text-h4); color: var(--raev-text-heading);
  margin: 0 0 var(--raev-space-lg); }
.testi figcaption { font: var(--raev-text-small); color: var(--raev-text-muted); }

/* Prijsblok — vacature-plaatsen. Rustig, geen "aanbieding"-gevoel. */
.pricebox { border: 1px solid var(--raev-orange-200); background: var(--raev-orange-50);
  border-radius: var(--raev-radius-lg); padding: var(--raev-space-3xl); max-width: 780px; }
.pricebox h2 { margin-top: 0; }

/* Manifest / merkverhaal — werk-dicht-bij-huis, over-ons.
   De opener is groter dan een gewone hero: dit is het merkverhaal, geen zoekpagina. */
.manifest h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); line-height: 1.08; text-wrap: balance; }
.manifest__inner { max-width: 820px; }

/* Before/After naast elkaar leesbaar houden: het verleden gedempt, het heden vol. */
.story__before { color: var(--raev-text-muted); }
.story__after { color: var(--raev-text-body); }

/* De onderbouwde mening — het enige stuk waar RAEV expliciet positie kiest. */
.story__mening { border-left: 3px solid var(--raev-orange-600);
  padding-left: var(--raev-space-lg); margin-top: var(--raev-space-xl);
  font: var(--raev-text-h4); color: var(--raev-text-heading); }

/* Anker-statistiek. */
.stat__num { font-family: var(--raev-font-heading); font-weight: 700;
  font-size: clamp(4rem, 2rem + 9vw, 8rem); line-height: 1; color: var(--raev-orange-500);
  letter-spacing: -.03em; }
.stat__note { font: var(--raev-text-small); color: var(--raev-skyblue-200); opacity: .85;
  margin-top: var(--raev-space-lg); }

/* Merkzin (de witte raaf) vlak vóór een slot-CTA op een donkere band. */
.raafline { font: var(--raev-text-h4); color: var(--raev-orange-400);
  margin-bottom: var(--raev-space-sm); }

/* Gecentreerd tekstblok voor uitspraken (missie, naamverklaring, overtuiging).
   Bewust zonder kader: dit is een statement, geen feature-blok. */
.missie { max-width: 720px; margin-inline: auto; }

/* Openingsverhaal op de vertrouwenspagina: eerste alinea leidt binnen. */
.story p { font-size: 1.0625rem; }
.story .hero__sub { font: var(--raev-text-h4); color: var(--raev-blue-700); }

/* De merkclaim bij de naamverklaring — de omkering van de uitdrukking. */
.claim { font: var(--raev-text-h4); color: var(--raev-orange-700);
  margin-block: var(--raev-space-lg); }

/* Kaderregel met werkingsgebied. */
.geo-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raev-space-md);
  border: 1px solid var(--raev-orange-200); background: var(--raev-orange-50);
  border-radius: var(--raev-radius-md); padding: var(--raev-space-lg) var(--raev-space-xl);
  margin-top: var(--raev-space-xl); font: var(--raev-text-small); color: var(--raev-text-heading); }

/* Slotregel/tagline vlak boven de CTA-knoppen. */
.tagline { font: var(--raev-text-h5); color: var(--raev-text-heading);
  margin-top: var(--raev-space-lg); }

/* Contactpagina: formulier links, gegevens/WhatsApp/kaart rechts.
   Mobiel stapelt: kernantwoord -> split -> formulier -> gegevens -> WhatsApp -> kaart. */
.contactgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--raev-space-3xl); align-items: start; }
.splitcard { display: flex; flex-direction: column; }
.splitcard p { flex: 1 1 auto; }
.splitcard .raev-btn { align-self: flex-start; margin-top: var(--raev-space-lg); }
.sidecard + .sidecard { margin-top: var(--raev-space-lg); }
.sidecard h3 { font: var(--raev-text-h5); color: var(--raev-text-heading); margin-top: 0; margin-bottom: var(--raev-space-md); }
.datalist { display: grid; gap: 10px; font: var(--raev-text-small); }
.datalist a { color: var(--raev-blue-700); font-weight: 600; }
.privacyline { font: var(--raev-text-small); color: var(--raev-text-muted); margin-top: var(--raev-space-md); }
.maph { min-height: 220px; border-radius: var(--raev-radius-md); display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--raev-blue-100), var(--raev-blue-100) 12px, var(--raev-blue-50) 12px, var(--raev-blue-50) 24px);
  color: var(--raev-blue-500); font: var(--raev-text-small); text-align: center; padding: var(--raev-space-md); }
@media (max-width: 860px) { .contactgrid { grid-template-columns: 1fr; } }

/* Infokaart — flexi/studenten. Compacte uitlegblokjes onder de intro. */
.infocard h3 { font: var(--raev-text-h5); color: var(--raev-text-heading); margin-top: 0; margin-bottom: var(--raev-space-sm); }
.infocard p { font: var(--raev-text-small); margin: 0; }

/* Contactregel onder een slot-CTA — vacature-plaatsen, contact. */
.contactline { display: flex; flex-wrap: wrap; gap: var(--raev-space-lg); justify-content: center;
  margin-top: var(--raev-space-xl); font: var(--raev-text-small); color: var(--raev-text-muted); }
.contactline a { color: var(--raev-blue-700); font-weight: 600; }

/* Pagina's met langere USP-titels dan home draaien de nowrap terug. */
.usp--wrap h3 { white-space: normal; min-height: 0; }

/* ============================================================
   5 · RESPONSIVE — samengevoegd uit beide bronnen
   ============================================================ */

@media (min-width: 861px) {
  .raev-detailgrid__side { position: sticky; top: var(--raev-space-xl); }
  .raev-header .raev-burger { display: none; }
}

@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .usp-grid { column-gap: var(--raev-space-2xl); }
  .sec-head--row { flex-direction: column; align-items: flex-start; gap: var(--raev-space-sm); }
  .split { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }

  /* Mobiel menu */
  .raev-header { position: relative; }
  .raev-nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0; background: var(--raev-cream-0);
    border-bottom: 1px solid var(--raev-border-default); box-shadow: var(--raev-shadow-md);
    padding: var(--raev-space-md) var(--raev-space-xl) var(--raev-space-lg); z-index: 20; }
  .raev-nav.is-open { display: flex; }
  .raev-nav a { width: 100%; padding-block: 10px; }
  .raev-nav__divider { display: none; }
  .raev-burger { display: inline-flex; }
  .header-cta { display: none; }

  .raev-detailgrid { flex-direction: column; }
  .raev-detailgrid__side { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 640px) {
  .raev-searchbar { flex-direction: column; align-items: stretch; }
  .raev-searchbar .raev-field,
  .raev-searchbar .raev-searchbar__submit { width: 100%; flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* Juridische pagina's. De tekst komt uit de blokeditor en kan lang zijn (het privacybeleid
   telt ruim 20.000 tekens), dus een leesbare regellengte en lucht rond de tussenkoppen.
   Deze klassen hadden voordien geen enkele stijl. */
.legal { max-width: 70ch; }
.legal h2, .legal h3, .legal h4 { margin-top: var(--raev-space-2xl); margin-bottom: var(--raev-space-md); }
.legal h2:first-child, .legal h3:first-child { margin-top: 0; }
.legal p, .legal li { margin-bottom: var(--raev-space-md); }
.legal ul, .legal ol { padding-left: 1.3em; margin-bottom: var(--raev-space-lg); }

/* ---------------------------------------------------------------- Gravity Forms
   De formulieren stonden ongestyled: het Orbital-thema van Gravity Forms levert hier een
   stylesheet van 0 bytes, dus er viel niets te overschrijven en de knop kreeg de blauwe
   browserstijl. Daarom mappen we hun markup zelf op onze tokens — zelfde velden en knoppen
   als de rest van de site. Openstaand punt sinds 20/07. */

.gform_wrapper .gform_fields { display: grid; gap: var(--raev-space-lg); }
.gform_wrapper .gfield_label {
  display: block; font: 600 0.9375rem/1.4 var(--raev-font-body);
  color: var(--raev-text-heading); margin-bottom: var(--raev-space-sm);
}
.gform_wrapper .gfield_required { color: var(--raev-orange-600); font-weight: 600; }

/* Invoervelden: exact dezelfde vorm als .raev-field elders op de site. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%; font: var(--raev-text-body-md); color: var(--raev-text-body);
  background: #fff; border: 1px solid var(--raev-input-border);
  border-radius: var(--raev-radius-md); padding: var(--raev-space-md) var(--raev-space-lg);
}
.gform_wrapper textarea { min-height: 160px; resize: vertical; }
.gform_wrapper select { cursor: pointer; }
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus {
  outline: 0; border-color: var(--raev-input-border-focus);
  box-shadow: 0 0 0 3px var(--raev-blue-100);
}

/* Meerkeuze (job-alert: gemeenten en sectoren). */
.gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio { display: grid; gap: var(--raev-space-sm); }
.gform_wrapper .gchoice { display: flex; align-items: center; gap: var(--raev-space-sm); }
.gform_wrapper .gchoice label { font: var(--raev-text-body-md); margin: 0; }

/* Verzendknop: dezelfde vorm als .raev-btn--primary. */
.gform_wrapper .gform_footer { margin-top: var(--raev-space-xl); }
.gform_wrapper .gform_button {
  display: inline-flex; align-items: center; gap: var(--raev-space-sm);
  font: var(--raev-text-h5); cursor: pointer; border: 0;
  padding: var(--raev-space-md) var(--raev-space-xl);
  border-radius: var(--raev-radius-md); text-decoration: none;
  background: var(--raev-btn-primary-bg); color: var(--raev-btn-primary-text);
  transition: background-color .15s ease;
}
.gform_wrapper .gform_button:hover { background: var(--raev-btn-primary-bg-hover); }

/* Foutmeldingen en beschrijvingen. */
.gform_wrapper .gfield_description { font: var(--raev-text-small); color: var(--raev-text-muted); margin-top: var(--raev-space-sm); }
.gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message {
  font: var(--raev-text-small); color: var(--raev-error); margin-top: var(--raev-space-sm);
}
.gform_wrapper .gfield_error input, .gform_wrapper .gfield_error textarea, .gform_wrapper .gfield_error select {
  border-color: var(--raev-input-border-error); background: var(--raev-input-bg-error);
}
.gform_wrapper .gform_validation_errors {
  border: 1px solid var(--raev-input-border-error); background: var(--raev-input-bg-error);
  border-radius: var(--raev-radius-md); padding: var(--raev-space-md) var(--raev-space-lg);
  margin-bottom: var(--raev-space-lg);
}
.gform_confirmation_message {
  border-radius: var(--raev-radius-md); padding: var(--raev-space-lg);
  background: var(--raev-cream-50); font: var(--raev-text-body-md);
}