/*
Theme Name:  Rebrave
Theme URI:   https://rebrave.nl/
Author:      Rebrave
Author URI:  https://rebrave.nl/
Description: Rebrave WordPress Theme.
Version:     1.10.4
Requires at least: 6.9
Requires PHP: 8.0
License:     Copyright Rebrave. Alle rechten voorbehouden.
Text Domain: rebrave
*/

/* =========================================================================
   1. URBANIST — self-hosted, variabel (wght 100-900), uit de ontwerpbundle
   ========================================================================= */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(assets/fonts/Urbanist-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: 'Urbanist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(assets/fonts/Urbanist-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;
}

/* =========================================================================
   2. TOKENS
   ========================================================================= */
:root {
  /* De vier merkkleuren, exact uit "unbeaten design assets/Colors/Color Palette.svg".
     Alle overige tinten zijn mengsels van deze vier — geen vrije kleuren. */
  --rb-cream: #F5F5F5;
  --rb-paper: #ECECED;
  --rb-navy: #303841;
  --rb-ink: #303841;
  --rb-muted: #666B72;    /* 73% navy op cream: 4,93:1 op cream, 4,55:1 op paper */
  --rb-orange: #FF5722;
  --rb-teal: #76ABAE;
  --rb-line: #D9DBDC;
  --rb-black: #303841;
  /* Elk teal *vlak* in het thema is tame teal — de kleur uit het ontwerp. Geen
     donkerder mengsel: dat was precies wat de ontwerper als "te donker" aanwees.
     Cloud white erop is 2,35:1 en haalt AA niet; dat is een bewuste keuze, zie
     BESLISSINGEN.md, en dezelfde die het palet voor oranje al maakte. */
  --rb-teal-fg: #F5F5F5;    /* tekst op teal */
  /* Teal *tekst* op een licht vlak is wél teal-deep: tame teal komt daar op
     2,35:1 en is dan onleesbaar in plaats van alleen zwak. */
  --rb-teal-deep: #4D686F;

  /* donkere schil: menu-overlay, footer */
  --rb-shell: #303841;
  --rb-shell-fg: #F5F5F5;   /* cloud white: tekst op de donkere schil */
  /* De header is cloud white, zoals bladzijde 1 van de ontwerpfeedback. Niet
     doorschijnend: een cream balk met 6% navy erdoorheen leest als vuil wit,
     en de scheiding met een cream sectie eronder valt dan weg. Daarvoor is de
     haarlijn. */
  --rb-hd-bg: #F5F5F5;
  --rb-hd-fg: #303841;      /* 10,9:1 op cloud white */
  --rb-hd-line: #D9DBDC;

  /* maat en ritme */
  --rb-max: 1440px;
  --rb-gutter: clamp(18px, 4vw, 48px);
  /* Hoe ver de inhoudskolom van de schermrand af staat. Alleen voor decoratie
     die naar links buiten beeld moet lopen — nooit voor iets dat naar rechts
     groeit: 100vw telt de scrollbar mee. */
  --rb-inset: calc(var(--rb-gutter) + max(0px, (100vw - var(--rb-max)) / 2));
  /* De ruimte boven en onder een sectie, dus tussen twee secties dubbel. Volgt
     de breedte, niet de hoogte: met 9vh kreeg een telefoon (hoog en smal)
     152px tussen twee secties voor een kop van 30px. Sinds 1.7.3. */
  --rb-section-y: clamp(40px, 4.5vw, 64px);
  --rb-radius: 8px;
  --rb-radius-groot: 12px;   /* tot 0.15.0 tot 150px: te veel leegte tussen de blokken */
}

/* =========================================================================
   3. RESET
   ========================================================================= */
* { box-sizing: border-box; border-radius: 0; }
/* Afgerond, zoals het brandbook: 8px voor wat je aanklikt of invult, 12px voor
   kaarten en beeldvlakken. Banden over de hele breedte blijven recht. */
.rb-btn, .wp-block-button__link, .rb-chip, .rb-tag, .rb-filter a, .rb-menu__close, .rb-bericht__sluit,
.rb-formulier .forminator-input, .rb-formulier .forminator-textarea, .rb-formulier .forminator-button,
.rb-formulier select { border-radius: var(--rb-radius); }
/* Een raster van tegels (.rb-hairline) is als geheel rond, niet per tegel: anders
   ontstaan er gaatjes op de kruispunten van de voegen. */
.rb-stripe, .rb-beeldvlak, .rb-readon__grid, .rb-hairline, .rb-cta, .rb-scherm img, .rb-bericht { border-radius: var(--rb-radius-groot); }
.rb-hairline, .rb-readon__grid { overflow: hidden; }
#wpadminbar * { border-radius: revert; }

body {
  margin: 0;
  overflow-x: clip;              /* de footer-wig bloedt bewust links buiten beeld */
  background: var(--rb-cream);
  color: var(--rb-ink);
  font-family: 'Urbanist', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body.rb-menu-open { overflow: hidden; }

.rb-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* =========================================================================
   4. LAYOUT — sectie, shell, raster
   ========================================================================= */
/* Eén doos voor élke band, zodat alles op dezelfde linkerrand staat. De goot
   zit binnen de 1440 — dat is het ontwerpdoek: 1440 totaal, 48 goot, 1344
   inhoud. Wie hier een band bij zet, zet hem in dezelfde lijst. */
.rb-section,
.rb-shell,
.rb-header__inner,
.rb-melding__inner,
.rb-menu__inner,
.rb-hero__inner,
.rb-archive-head,
.rb-archive-body,
.rb-single-head,
.rb-single-media,
.rb-persoon {
  max-width: var(--rb-max);
  margin-inline: auto;
  padding-inline: var(--rb-gutter);
}
.rb-section { padding-block: var(--rb-section-y); }
/* Twee banden op dezelfde achtergrond onder elkaar: één keer ruimte, niet twee.
   Elke sectie heeft zijn ruimte boven én onder, dus telde die ertussen dubbel
   (128 px), en na de kop van een pagina kwam 45 + 64 px. Een gekleurde band
   houdt zijn eigen ruimte binnen de kleur, en de quickscan-balk regelt die zelf
   (.rb-cta-section). */
.rb-archive-head + .rb-section:not(.rb-section--bleed),
.rb-section:not(.rb-section--bleed) + .rb-section:not(.rb-section--bleed):not(.rb-cta-section) { padding-top: 0; }
/* een sprong naar een sectie (lees verder → /moed/#overtuigingen) landt onder de vaste header */
.rb-section[id],
.rb-belief[id] { scroll-margin-top: 72px; }

/* Doorbloedende achtergrond met een 1440-kern erin. De band zelf is vol en
   geeft zijn goot af aan de .rb-shell erbinnen — anders telt de goot dubbel
   en staat de kern er een goot naast. Idem .rb-hero en .rb-readon. */
.rb-section--bleed { max-width: none; margin-inline: 0; padding-inline: 0; }

.rb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--rb-grid-min, 300px), 1fr));
  gap: var(--rb-grid-gap, clamp(28px, 4vw, 56px));
}
.rb-grid--fill { grid-template-columns: repeat(auto-fill, minmax(var(--rb-grid-min, 320px), 1fr)); }
/* zes stuks: 3 + 3 op een breed scherm, niet 4 + 2 */
@media (min-width: 1000px) { .rb-grid--drie { grid-template-columns: repeat(3, 1fr); } }

/* kop + actie naast elkaar, actie rechts */
.rb-sectionhead {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: var(--rb-sectionhead-align, baseline);
  margin-bottom: var(--rb-sectionhead-gap, clamp(28px, 4vh, 44px));
}
/* Zonder kop of label ervoor: de link blijft rechts staan, waar hij in elke
   andere sectie staat. Niet alleen als hij het enige blok is: live stond er een
   lege alinea naast, achtergebleven in de editor, en dan schoof hij naar links. */
.rb-sectionhead > .rb-link-wrap:first-child { margin-left: auto; }
.rb-sectionhead > p:empty { display: none; }
/* Een kop met een korte zin eronder: minder ruimte tussen kop en zin, zoals bij
   laatste nieuws en denkwerk. Ook voor een sectie zonder eigen klasse. */
.rb-sectionhead:has(+ .rb-intro) { --rb-sectionhead-gap: clamp(20px, 3vh, 32px); }

/* =========================================================================
   5. TYPOGRAFIE-COMPONENTEN
   ========================================================================= */
/* Koppen staan in de zin-vorm waarin de redactie ze intypt, niet in kapitaal.
   Kapitaal maakte van elke kop een blok en dat vecht met de schuine vormen van
   het merk; de onderkast van Urbanist heeft de rondingen waar het merk om
   vraagt. Kapitaal blijft over voor de kleine woorden — kickers, chips, tags,
   labels, de voettekstkolommen: 11 tot 13px met positieve spatiëring.
   Meegemeten aan de visualisatie van de ontwerper (Urbanist 700, kaphoogte
   70px bij 100px korps): die zet de letterspatiëring op nul, niet op de -.04em
   die bij kapitaal hoorde. Vandaar -.01em op alle koppen — een haar aanhalen
   voor de grote maten, niet de strakke spatiëring van een kapitaalregel.
   Om dezelfde reden gaat de regelhoogte omhoog: een kapitaalregel is 0,70 em
   hoog en verdraagt .92, onderkast beslaat van stok tot staart 1,00 em en gaat
   daaronder over de regel eronder heen. De visualisatie zet 1,04; grote koppen
   staan nu op 1,04-1,06, de koppen rond 22px op 1,12. */
.rb-display {
  font-weight: 700;
  font-size: var(--rb-display-size, clamp(30px, 4.4vw, 64px));
  line-height: 1.05;
  margin: 0;
}
.rb-title {
  font-weight: 700;
  font-size: var(--rb-title-size, clamp(40px, 7vw, 96px));
  line-height: 1.04;
  margin: 0;
}
.rb-lead {
  font-weight: 500;
  font-size: var(--rb-lead-size, clamp(18px, 1.6vw, 22px));
  line-height: 1.35;
  margin: 0;
}
.rb-kicker {
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-kicker-c, var(--rb-orange));
}
/* Recht sinds 0.20.0: de -1,4° kanteling oogde niet als het merk. Het schuine
   zit in de vlakken (de wig, het nummer op een tegel), niet in de tekst. */
.rb-chip {
  display: inline-block;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;         /* het prototype zet 13px-tekst in een 16px-regelbox */
  background: var(--rb-chip-bg, var(--rb-navy));
  color: var(--rb-chip-fg, var(--rb-cream));
  margin: 0 0 26px;
}
.rb-sectionhead .rb-chip { margin-bottom: 0; }
.rb-chip--orange { --rb-chip-bg: var(--rb-orange); --rb-chip-fg: var(--rb-cream); }

/* Een beeldvlak voor een foto die de redactie later zet: een gewoon
   afbeeldingsblok met de klasse rb-beeldvlak. Zonder foto het gestreepte vlak
   (dezelfde streep als .rb-stripe) met een noot, via rebrave_leeg_beeldvlak()
   in inc/blocks.php; met foto vult die het kader, bijgesneden. In de editor toont het lege blok meteen Uploaden en
   Mediabibliotheek. */
.rb-beeldvlak {
  position: relative; overflow: hidden; margin: 0;
  aspect-ratio: var(--rb-beeld-ratio, 4/3);
  background: repeating-linear-gradient(135deg,
    var(--rb-stripe-a, #E6E7E8) 0 var(--rb-stripe-step, 16px),
    var(--rb-stripe-b, #EEEEEF) var(--rb-stripe-step, 16px) calc(var(--rb-stripe-step, 16px) * 2));
}
.rb-beeldvlak img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rb-beeldvlak--leeg::after {
  content: "[ beeld ]"; position: absolute; left: 20px; bottom: 20px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;  color: var(--rb-stripe-note-c, var(--rb-muted));
}
.rb-beeldvlak--breed { --rb-beeld-ratio: 21/9; }
.rb-beeldvlak--staand { --rb-beeld-ratio: 3/4; }
.rb-beeldvlak--boven { margin-bottom: clamp(32px, 5vh, 56px); }
.rb-archive-head .rb-beeldvlak { margin-top: clamp(40px, 6vh, 72px); }
/* Op de navy moedband: de donkere streep, en het vlak zo hoog als de tekst. */
.rb-moed .rb-beeldvlak {
  --rb-stripe-a: #424951; --rb-stripe-b: #3A414A; --rb-stripe-step: 18px;
  --rb-stripe-note-c: rgba(245, 245, 245, .7);   /* 5,05:1; zonder dit 2,52:1 */
  aspect-ratio: auto; min-height: 100%;
}

/* Labels en kleine kopjes in kleine letters: wat je aanklikt of wat een label is,
   is klein; wat je leest staat in zin-stijl (koppen, tegels, tekst). De termen
   zelf heten "Zorg" en "Engineering", want ze staan ook als paginakop; hier
   worden ze klein. Knoppen en links zijn in de bron al klein geschreven, zodat
   een woord als AI of BasePulse zijn hoofdletters houdt. */
.rb-kicker, .rb-tag, .rb-chip, .rb-filter a, .rb-row__type, .rb-cta__kicker, .rb-soort__kicker { text-transform: lowercase; }
/* De verzendknop van een formulier komt uit Forminator ("Inschrijven"); zonder
   afkortingen erin, dus hier mag de CSS hem klein maken. */
.rb-formulier .forminator-button-submit { text-transform: lowercase; }

/* rechte tag op een beeldvlak (niet gekanteld) */
.rb-tag {
  position: relative;          /* boven een uitgelichte afbeelding blijven */
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-cream);
  background: var(--rb-orange);
  padding: 6px 12px;
}
.rb-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-navy);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.rb-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--rb-orange);
}
/* Dezelfde teal als de pil in de header en de tealsectie. Hij stond op 80%
   dekking en dat gaf #8FBABC — een lichtere kleur die nergens anders in het
   thema voorkomt. Navy erop zakt daarmee van 5,61:1 naar 4,64:1 en blijft AA. */
.rb-mark {
  background: linear-gradient(transparent 34%, var(--rb-teal) 34%,
              var(--rb-teal) 90%, transparent 90%);
}

/* =========================================================================
   6. KNOPPEN — de varianten uit het ontwerp staan als blokstijl in sectie 18;
   deze twee zitten in de schil en zijn dus geen kernblok.
   ========================================================================= */
.rb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
/* Eén knopmaat in het hele thema: 16px, Medium, zin-stijl (sinds 0.16.0, het
   brandbook; daarvoor 600 in kleine letters). Nooit klein én kapitaal. De maten komen uit bladzijde 1 van
   haar feedback: pillen 37px hoog, knoptekst 16px. */
.rb-btn--label   { background: var(--rb-cream); color: var(--rb-orange); font-size: 16px; font-weight: 500; padding: 16px 28px; white-space: nowrap; }
.rb-btn--pill    { font-size: 16px; font-weight: 500; padding: 8px 22px; min-height: 37px; justify-content: center; }
/* Beide pillen dragen cloud white op hun merkkleur, zoals in het ontwerp:
   2,90:1 op oranje en 2,35:1 op teal. Allebei onder AA — een bewuste keuze in
   lijn met wat het palet voor oranje al vastlegde. */
.rb-btn--pill-oranje { background: var(--rb-orange); color: var(--rb-cream); }
.rb-btn--pill-teal   { background: var(--rb-teal);   color: var(--rb-cream); }
/* Open menu of huidige pagina: navy, het enige vlak dat beide pillen zonder
   contrastverlies kunnen worden (10,9:1 met cloud white erop). */
.rb-btn--pill.is-active { background: var(--rb-navy); color: var(--rb-cream); }
/* Hover staat bij elkaar onderaan sectie 18, voor alle knopsoorten tegelijk. */

/* =========================================================================
   7. HAIRLINE-RASTER — tegels met 1px voeg in de sectiekleur
   ========================================================================= */
.rb-hairline {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
  background: var(--rb-hairline-line, var(--rb-line));
  border: 1px solid var(--rb-hairline-line, var(--rb-line));
}
.rb-hairline > * {
  flex: 1 1 var(--rb-hairline-min, 260px);
  background: var(--rb-hairline-cell, var(--rb-cream));
}

/* =========================================================================
   8. ARTIKELRIJ
   ========================================================================= */
.rb-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(14px, 3vw, 40px);
  align-items: baseline;
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--rb-line);
  padding: clamp(18px, 3vh, 30px) 0;
  transition: opacity .18s;
}
.rb-row:hover { opacity: .55; }
/* Elke rij is een eigen grid, dus zonder vaste breedte begint de titel waar het
   label ophoudt — en springt hij per rij. 9em past "28 september" en de
   langste soort; een datum met jaartal erbij duwt alleen zijn eigen rij op. */
.rb-row__type  { font-size: 13px; font-weight: 700; color: var(--rb-orange); white-space: nowrap; min-width: 9em; }
.rb-row__title { font-size: clamp(20px, 3.2vw, 44px); font-weight: 500; line-height: 1.05; color: var(--rb-navy); }
.rb-row__meta  { font-size: 13px; color: var(--rb-muted); white-space: nowrap; }

/* =========================================================================
   9. BEELDVLAK — gestreepte placeholder, of de uitgelichte afbeelding
   ========================================================================= */
.rb-stripe {
  --rb-stripe-pad: 20px;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--rb-stripe-ratio, 4/3);
  display: flex;
  align-items: flex-start;
  padding: var(--rb-stripe-pad);
  background: repeating-linear-gradient(135deg,
    var(--rb-stripe-a, #E6E7E8) 0 var(--rb-stripe-step, 16px),
    var(--rb-stripe-b, #EEEEEF) var(--rb-stripe-step, 16px) calc(var(--rb-stripe-step, 16px) * 2));
}
.rb-stripe--card { --rb-stripe-ratio: 3/2; --rb-stripe-pad: 18px; }
.rb-stripe--wide { --rb-stripe-ratio: 21/9; --rb-stripe-step: 18px; --rb-stripe-pad: 22px; align-items: flex-end; }
.rb-stripe__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* De fotolook (inc/fotolook.php): de body krijgt `rb-fotolook--<look>`, de
   filters staan onderaan de pagina. Alleen op `.rb-foto`: een uitgelichte
   afbeelding of een beeldvlak, niet een schermafbeelding (daar wordt wit beige).
   Een portret blijft eerst zwart-wit (die regel is specifieker); bij hover komt
   de look erbij. */
.rb-fotolook--zacht       { --rb-fotolook: url(#rb-look-zacht); }
.rb-fotolook--film        { --rb-fotolook: url(#rb-look-film); }
.rb-fotolook--film-korrel { --rb-fotolook: url(#rb-look-film-korrel); }
.rb-foto { filter: var(--rb-fotolook, none); }
/* Een stilstaande murmuratie over de foto (inc/overlay.php), per bericht gekozen.
   De vorm staat in assets/overlay/<uitsnede>.svg; hier alleen waar hij ligt. Het
   vak is de omtrek van de vorm (de viewBox van het bestand) met een breedte in
   procenten van de foto, zit vast aan een hoek of rand en schuift een stuk naar
   buiten: zo ligt hij op een kaart (3:2) en op de brede kop (21:9) in dezelfde
   hoek. Het
   beeldvlak knipt af wat buiten valt (overflow: hidden). De lijn blijft 1,4px op
   elke maat (non-scaling-stroke in het bestand). */
.rb-overlay {
  --rb-overlay-maat: 1;
  position: absolute; inset: auto;
  width: calc(var(--rb-overlay-breedte, 75%) * var(--rb-overlay-maat) * var(--rb-overlay-vlak, 1)); height: auto;
  overflow: visible; pointer-events: none;
  stroke-width: 1.4px; color: var(--rb-orange);
  transform: translate(var(--rb-overlay-x), var(--rb-overlay-y)) rotate(var(--rb-overlay-draai, 0deg));
}
.rb-overlay--rechtsboven { top: 0; right: 0;    --rb-overlay-x: 30%;  --rb-overlay-y: -30%; }
.rb-overlay--linksonder  { bottom: 0; left: 0;  --rb-overlay-x: -30%; --rb-overlay-y: 30%;  --rb-overlay-breedte: 80%; }
.rb-overlay--rechts      { top: 50%; right: 0;  --rb-overlay-x: 40%;  --rb-overlay-y: -50%; --rb-overlay-draai: -20deg; }
.rb-overlay--linksboven  { top: 0; left: 0;     --rb-overlay-x: -32%; --rb-overlay-y: -32%; --rb-overlay-breedte: 70%; --rb-overlay-draai: 15deg; }
.rb-overlay--rechtsonder { bottom: 0; right: 0; --rb-overlay-x: 30%;  --rb-overlay-y: 32%;  --rb-overlay-breedte: 80%; }
.rb-overlay--links       { top: 50%; left: 0;   --rb-overlay-x: -40%; --rb-overlay-y: -50%; --rb-overlay-draai: 10deg; }
.rb-overlay--klein { --rb-overlay-maat: .7; }
/* De brede kop (21:9) is half zo hoog als hij breed is: daar is hetzelfde
   percentage van de breedte veel meer van de foto. */
.rb-stripe--wide .rb-overlay { --rb-overlay-vlak: .5; }
.rb-overlay--groot { --rb-overlay-maat: 1.35; }
.rb-overlay--tame-teal   { color: var(--rb-teal); }
.rb-overlay--cloud-white { color: var(--rb-cream); }
.rb-stripe__note {
  position: absolute;
  left: var(--rb-stripe-pad);
  bottom: var(--rb-stripe-pad);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--rb-stripe-note-c, var(--rb-muted));
}
.rb-stripe__num {
  position: absolute; right: 16px; bottom: 14px;
  font-size: 34px; font-weight: 700; color: rgba(48, 56, 65, .16);
}

/* =========================================================================
   10. HEADER
   ========================================================================= */
.rb-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--rb-hd-bg);
  color: var(--rb-hd-fg);
  border-bottom: 1px solid var(--rb-hd-line);
}
.rb-header__inner {
  padding-block: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
}
.rb-wordmark {
  /* Het officiële woordmerk als SVG (rebrave_woordmerk()), in de tekstkleur.
     27px hoog is even groot als het tekstlogo op 36px was: in het ontwerp is het
     woordmerk 118px breed in een balk van 68px. */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--rb-hd-fg);
}
.rb-wordmark svg { display: block; height: 27px; width: auto; }
/* De logokleur uit de Customizer (Site-identiteit). Oranje is de standaard;
   oranje en teal halen op cloud white geen 4,5:1, maar een logo hoeft dat niet. */
.rb-wordmark--night-blue { color: var(--rb-navy); }
.rb-wordmark--orange { color: var(--rb-orange); }
.rb-wordmark--tame-teal { color: var(--rb-teal); }
/* Twee gevulde pillen tegen elkaar, gescheiden door de balk zelf: geen rand,
   want op cloud white heeft een gevuld vlak er geen nodig. */
.rb-header__pills { display: flex; align-items: stretch; gap: 6px; }
/* Het vergrootglas: alleen het icoon, geen derde kleurvlak naast de pillen.
   Even hoog als een pil, zodat hij een gewoon tikdoel is. */
.rb-zoekknop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 37px; min-height: 37px; padding: 0; border: 0; background: none;
  color: var(--rb-hd-fg); cursor: pointer;
}
.rb-zoekknop .rb-loep { width: 22px; height: 22px; }
@media (hover: hover) { .rb-zoekknop:hover { color: var(--rb-orange); } }

/* De mededeling (inc/mededeling.php): een smalle balk boven de header. Niet
   sticky — hij scrolt mee weg, zodat de header niet hoger wordt. De kleur komt
   uit de Customizer; op alle drie is de tekst cloud white. */
.rb-melding {
  color: var(--rb-shell-fg);
  font-size: 15px;
  line-height: 1.4;
}
.rb-melding[hidden] { display: none; }
.rb-melding--night-blue { background: var(--rb-navy); }
.rb-melding--orange { background: var(--rb-orange); }
.rb-melding--tame-teal { background: var(--rb-teal); color: var(--rb-teal-fg); }
.rb-melding__inner {
  position: relative;
  padding-block: 10px;
  /* ruimte voor het kruisje, aan beide kanten zodat de tekst gecentreerd blijft */
  padding-inline: calc(var(--rb-gutter) + 32px);
  text-align: center;
}
.rb-melding__tekst { margin: 0; }
.rb-melding__link {
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rb-melding__link:hover { text-decoration-thickness: 2px; }
.rb-melding__sluit {
  position: absolute;
  right: calc(var(--rb-gutter) - 6px);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: .8;
}
.rb-melding__sluit:hover { opacity: 1; }
.rb-melding a:focus-visible,
.rb-melding__sluit:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 600px) {
  .rb-melding { font-size: 14px; }
}

/* =========================================================================
   11. MENU-OVERLAY "direct vinden"
   ========================================================================= */
.rb-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  /* Dekking en blur komen uit de Customizer (rebrave_menu_stijl()) als
     variabelen op dit element; de terugval is de standaard. Night blue met de
     achtergrond vaag erdoorheen. */
  background: rgba(48, 56, 65, var(--rb-menu-dekking, .86));
  backdrop-filter: blur(var(--rb-menu-blur, 22px)) saturate(115%);
  color: var(--rb-shell-fg);
  overflow-y: auto;
  animation: fadeUp .35s both;
}

/* Zonder backdrop-filter zou je door een halftransparante laag naar een scherpe
   achtergrond kijken; dan liever dekkend. */
@supports not (backdrop-filter: blur(1px)) {
  .rb-menu { background: var(--rb-shell); }
}
.rb-menu__inner { padding-block: 20px 64px; }
.rb-menu__top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: clamp(28px, 5vh, 56px);
}
.rb-menu__title { font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); }
.rb-menu__close { border: 1px solid rgba(245, 245, 245, .45); background: none; cursor: pointer; font-size: 13px; font-weight: 500; padding: 11px 20px; }
.rb-menu__grid {
  --rb-hairline-line: rgba(245, 245, 245, .14);
  /* Doorschijnend, zodat de vage achtergrond ook ín de tegels te zien is en niet
     alleen in de 1px-voegen. */
  --rb-hairline-cell: rgba(48, 56, 65, .28);
  --rb-hairline-min: 280px;
  background: rgba(245, 245, 245, .14);
}
/* Zoeken in het menu: één grote regel in de letter van het menu, met een lijn
   eronder, en een pijl om te zoeken. Op een telefoon zonder pijl: het
   toetsenbord heeft er al een knop voor. */
.rb-zoek {
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid rgba(245, 245, 245, .45); padding-bottom: 12px;
  margin-bottom: clamp(28px, 5vh, 48px);
  transition: border-color .15s;
}
.rb-zoek:focus-within { border-bottom-color: var(--rb-shell-fg); }
.rb-zoek .rb-loep { width: clamp(22px, 2.4vw, 30px); height: auto; flex: none; opacity: .9; }
.rb-zoek input {
  flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: 0; background: none;
  color: var(--rb-shell-fg); font: inherit; font-size: clamp(22px, 2.6vw, 34px); font-weight: 500;
}
.rb-zoek input::placeholder { color: rgba(245, 245, 245, .6); }
.rb-zoek__ga {
  flex: none; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--rb-shell-fg); font: inherit; font-size: clamp(22px, 2.6vw, 34px); font-weight: 500;
  transition: color .15s;
}
.rb-zoek__ga:hover, .rb-zoek__ga:focus-visible { color: var(--rb-orange); }
@media (max-width: 640px) { .rb-zoek__ga { display: none; } }
.rb-menu__contact { padding: 22px 26px 26px; min-height: 172px; display: flex; flex-direction: column; justify-content: center; }
.rb-menu__contact .rb-kicker { margin-bottom: 10px; }
.rb-menu__contact a { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.rb-menu__contact span { font-size: 14px; color: rgba(245, 245, 245, .6); }
/* Nadruk uit *sterretjes*. Oranje waar dat kan; op de oranje wig zou oranje
   onzichtbaar zijn, dus daar cloud white. */
.rb-nadruk { color: var(--rb-orange); font-weight: 700; }   /* brandbook: Medium met het accent in Bold */
.rb-wedge-text .rb-nadruk { color: var(--rb-cream); }

/* De slotregel staat hier zonder punten, net als in de footer, dus draagt de
   regelafbreking de scheiding tussen de twee zinnen. Op 22ch paste "Wij maken
   moed Steeds" nog op de eerste regel en brak hij op de verkeerde plek; smaller
   plus `text-wrap: balance` verdeelt hem over twee even lange regels — ook als
   de redactie er een andere regel van maakt. Cloud white, net als de
   menu-items erboven; de nadruk blijft oranje. */
.rb-menu__slogan {
  font-weight: 500; font-size: clamp(20px, 3vw, 34px); line-height: 1.3;
  color: var(--rb-shell-fg); margin: clamp(36px, 6vh, 64px) 0 0; max-width: 16ch;
  text-wrap: balance;
}
.rb-tile {
  position: relative; overflow: hidden; text-align: left;
  padding: 22px 26px 26px; min-height: 172px;
  display: flex; flex-direction: column; gap: 23px;
  transition: background .18s, color .18s;
}
.rb-tile:hover { background: var(--rb-orange); color: var(--rb-black); }
.rb-tile__num {
  display: flex; align-items: center; justify-content: space-between;
  /* .45 gaf 2,7:1 op een doorschijnende tegel; .90 is de laagste die AA haalt
     (4,7:1 gemeten op de lichtste achtergrond). */
  font-size: 12px; font-weight: 700; opacity: .9;
}
.rb-tile__num::after {
  content: ""; display: inline-block; width: 26px; height: 9px;
  background: currentColor; clip-path: polygon(0 0, 88% 0, 100% 100%, 12% 100%); opacity: .9;
}
.rb-tile__label { display: block; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.05; }
.rb-tile__desc  { display: block; margin-top: 12px; font-size: 13px; opacity: .82; line-height: 1.5; }
/* Het label hangt vast onder het nummer, niet onderaan de tegel. Onderaan
   groeide een label van twee regels ("Rebrave Academy") naar boven en stond
   het hoger dan zijn buren; zo groeit het naar beneden en beginnen alle labels
   op één lijn. */

/* =========================================================================
   12. HERO
   ========================================================================= */
.rb-hero {
  position: relative;
  overflow: hidden;
  background: var(--rb-shell);
  min-height: min(86vh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 9vh, 120px);
}
/* Hier stonden twee schuine banen: teal-deep op 44% en oranje op 15% breed. Ze
   zijn weg. De ontwerper vroeg waarom de teal in de hero donkerder oogt — dat
   waren zij: teal-deep is 41% teal op navy, en de murmuratie liep er met 45%
   dekking overheen. Twee overlays op dezelfde plek. In haar tekening is de hero
   één vlak night blue en komt de teal terug in de lijnen zelf, op volle sterkte. */

/* De murmuratie; de generator zet er zelf een <canvas> in.
   Bewust geen `position` op deze basisklasse: elke plek zet zijn eigen. Toen die
   hier wél stond, overschreef hij bij gelijke specificiteit een variant die
   eerder in dit bestand staat. */
.rb-flock canvas { display: block; width: 100%; height: 100%; }

/* De zwermmodus (inc/zwerm.php): alleen de murmuratie over het hele scherm,
   met rechtsonder het woordmerk in oranje. De sluitknop valt weg na een paar
   seconden stilstand (.is-stil) en komt terug zodra de muis beweegt. */
.rb-zwerm { position: fixed; inset: 0; z-index: 1000; background: var(--rb-navy); outline: none; }
.rb-zwerm[hidden] { display: none; }
.rb-zwerm__flock { position: absolute; inset: 0; }
.rb-zwerm__merk {
  position: absolute; right: clamp(24px, 4vw, 64px); bottom: clamp(20px, 4vw, 56px);
  color: var(--rb-orange); pointer-events: none;
}
.rb-zwerm__merk svg { display: block; height: clamp(30px, 3.7vw, 60px); width: auto; }
.rb-zwerm__sluit {
  position: absolute; top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px);
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid rgba(245, 245, 245, .3); border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 14px; color: var(--rb-shell-fg); cursor: pointer;
  transition: opacity .6s;
}
.rb-zwerm__sluit kbd { font: inherit; font-size: 12px; opacity: .6; }
.rb-zwerm__sluit:focus-visible { outline: 2px solid var(--rb-teal); outline-offset: 2px; }
.rb-zwerm.is-stil .rb-zwerm__sluit:not(:focus-visible) { opacity: 0; }
.rb-zwerm.is-stil { cursor: none; }
html.rb-zwerm-open { overflow: hidden; }
/* Party mode: linksonder een klein label met wat er luistert; de stip ervoor
   groeit mee met het volume (--rb-party-niveau, 0–1, uit zwerm.js). */
.rb-zwerm__party {
  position: absolute; left: clamp(24px, 4vw, 64px); bottom: clamp(20px, 4vw, 56px); margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--rb-shell-fg); opacity: .8;
}
.rb-zwerm__party:empty { display: none; }
.rb-zwerm.is-party .rb-zwerm__party::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rb-orange);
  transform: scale(calc(1 + var(--rb-party-niveau, 0) * 1.6)); transition: transform .08s linear;
}

/* Een onzichtbaar vlakje achter "© Rebrave", voor wie het weet en geen F heeft
   (mobiel). Geen kleur, geen hover, geen handje; alleen een focusrand voor wie
   er met Tab langs komt. Groot genoeg voor een vinger. */
.rb-zwerm-knop {
  display: inline-block; width: 28px; height: 28px; margin-left: 2px; padding: 0; vertical-align: middle;
  border: 0; border-radius: 50%; background: transparent; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.rb-zwerm-knop:focus { outline: none; }
.rb-zwerm-knop:focus-visible { outline: 2px solid var(--rb-teal); outline-offset: -6px; }
/* De murmuratie ligt achter de tekst; de hero-inhoud staat er met een hogere
   z-index bovenop. Maat en plek zijn vrij instelbaar: de generator centreert
   altijd in zijn kader, dus bepaalt het kader waar de figuur staat.
   x/y zijn het middelpunt als percentage van de hero; w/h de maat. Boven 100%
   loopt de figuur buiten beeld — de hero heeft overflow:hidden. */
.rb-hero__flock {
  position: absolute;
  z-index: 1;
  width: var(--rb-flock-w, 100%);
  height: var(--rb-flock-h, 100%);
  left: var(--rb-flock-x, 50%);
  top: var(--rb-flock-y, 50%);
  transform: translate(-50%, -50%);
}
.rb-hero__inner { position: relative; z-index: 2; width: 100%; }
.rb-hero__title {
  /* Het woordmerk als tekst (het staat in de pagina-inhoud): "re" Bold, "brave"
     Medium en -0,015em, zoals het officiële logo. Gemeten tegen de SVG uit de
     brandguidelines; alleen de stok van de b is in het font iets langer. */
  font-weight: 500; font-size: clamp(48px, 11vw, 152px); line-height: .92;
  letter-spacing: -.015em; margin: 0; color: var(--rb-orange);
}
.rb-hero__title strong { font-weight: 700; }
.rb-hero__sub {
  font-weight: 500; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.2;  color: var(--rb-shell-fg); max-width: 26ch; margin: clamp(26px, 4.5vh, 44px) 0 0;
  animation: fadeUp .7s both .15s;
}
.rb-hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(28px, 5vh, 48px); animation: fadeUp .7s both .3s;
}

/* De uitgelichte knop (inc/uitgelicht.php): de derde in de rij. Hij draagt de
   stijl van *direct naar wat je zoekt* (`is-style-rebrave-outline`), dus rust en
   hover zijn per definitie gelijk aan die knop. Hier staat alleen wat erbij komt:
   het oranje rondje met het afspeelteken, en minder binnenruimte, zodat het
   rondje de knop niet hoger maakt dan zijn buurman. */
.rb-uitgelicht__icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rb-orange); color: var(--rb-cream);
}
.rb-uitgelicht__icoon svg { margin-left: 2px; }   /* optisch midden van een driehoek */
.is-style-rebrave-outline.rb-uitgelicht > .wp-block-button__link:has(.rb-uitgelicht__icoon) {
  padding: 9.5px 30px 9.5px 10px; gap: 12px;   /* 32px rondje + 2 × 9,5 = de hoogte van de buurman */
}

/* De lightbox: de film groot in 16:9, zo breed als het scherm toelaat. */
.rb-lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: clamp(56px, 8vh, 88px) clamp(16px, 4vw, 64px);
  border: 0; background: transparent;
  display: none; align-items: center; justify-content: center;
}
.rb-lightbox[open] { display: flex; animation: rb-lightbox-in .35s cubic-bezier(.16, .84, .28, 1); }
.rb-lightbox::backdrop { background: rgba(28, 33, 39, .94); backdrop-filter: blur(6px); }
.rb-lightbox__speler {
  width: min(100%, calc((100vh - 2 * clamp(56px, 8vh, 88px)) * 16 / 9), 1600px);
  aspect-ratio: 16 / 9; background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.rb-lightbox__speler :is(iframe, video, mave-player) { display: block; width: 100%; height: 100%; border: 0; }
.rb-lightbox__speler video { object-fit: contain; background: #000; }
.rb-lightbox__sluit {
  position: fixed; top: clamp(12px, 2.5vh, 28px); right: clamp(12px, 2.5vw, 32px);
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(245, 245, 245, .35); border-radius: 50%;
  background: transparent; color: var(--rb-cream); cursor: pointer;
  transition: background .18s, color .18s;
}
.rb-lightbox__sluit:hover { background: var(--rb-orange); border-color: var(--rb-orange); }
.rb-lightbox-open { overflow: hidden; }
@keyframes rb-lightbox-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rb-lightbox[open] { animation: none; } }

/* =========================================================================
   13. HOME
   ========================================================================= */
/* De kantelvraag (home-vraag): stap 2 van het narratief, op de lichtgrijze band
   zodat hij zich onderscheidt van het statement op licht erboven. */
.rb-vraag { background: var(--rb-paper); }

/* Het drieluik op /moed/: de leraar, de wijkverpleegkundige, de ambtenaar. */
.rb-drieluik { --rb-grid-min: 240px; margin-top: clamp(40px, 6vh, 72px); }
.rb-drieluik__bij { font-size: 14px; line-height: 1.5; color: var(--rb-muted); margin: 12px 0 0; max-width: 34ch; }

/* De praktijkverhalen onder een cluster op /wat-we-doen/ (blok
   rebrave/cluster-verhalen): een korte lijst, gescheiden door een haarlijn. */
.rb-cluster-verhalen { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rb-line); }
.rb-cluster-verhalen .rb-kicker { margin: 0 0 8px; }
.rb-cluster-verhalen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rb-cluster-verhalen a { font-size: 16px; font-weight: 500; line-height: 1.35; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .18s; }
.rb-cluster-verhalen a:hover,
.rb-cluster-verhalen a:focus-visible { text-decoration-color: currentColor; }

/* De cirkel (blok rebrave/cirkel): hoe de clusters in elkaar grijpen. De SVG
   komt uit bin/make-cirkel.php; de murmuratie ligt in het vrije vak in het
   midden, in procenten van de viewBox (2085.57 × 1581.87): x 510–1410 en
   y 480–1180. Daar raakt hij geen tekst (zie het preset `cirkel`). */
.rb-cirkel { margin: clamp(40px, 7vh, 88px) auto; max-width: 1100px; }
.rb-cirkel__beeld { position: relative; }
.rb-cirkel__doek { position: relative; }
.rb-cirkel__svg { display: block; width: 100%; height: auto; }
.rb-cirkel__zwerm { position: absolute; left: 24.45%; top: 30.34%; width: 43.15%; height: 44.25%; }
.rb-cirkel__ring { transform-box: view-box; }
.rb-cirkel__ring--mee { animation: rb-cirkel-mee 120s linear infinite; }
.rb-cirkel__ring--tegen { animation: rb-cirkel-mee 120s linear infinite reverse; }
@keyframes rb-cirkel-mee { to { transform: rotate(360deg); } }
/* Bij minder beweging staan de ringen stil. De algemene regel bovenin maakt
   een animatie alleen extreem kort, en een oneindige draai flikkert dan. */
@media (prefers-reduced-motion: reduce) {
  .rb-cirkel__ring { animation: none !important; }
}
/* De stappen in woorden: op een groot scherm alleen voor schermlezers. */
.rb-cirkel__stappen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.rb-cirkel__stappen ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.rb-cirkel__stappen li { font-size: 15px; line-height: 1.5; }
.rb-cirkel__stappen strong { display: block; font-weight: 700; }
.rb-cirkel__stappen .rb-kicker { margin: 0 0 10px; }
/* Op een telefoon wordt de kleinste tekst in de figuur zo'n 4px. Daar valt het
   detail weg en blijven de ringen, de zwerm en de clusternamen over, ingezoomd
   op de ring (x 320–1790, y 190–1530). De namen worden 1,4× zo groot; de
   uitsnede is net breed genoeg voor "Consultancy". De stappen staan dan als
   regels eronder. */
@media (max-width: 700px) {
  .rb-cirkel__beeld { overflow: hidden; aspect-ratio: 1470 / 1340; }
  .rb-cirkel__doek { position: absolute; width: 141.88%; left: -21.77%; top: -14.18%; }
  .rb-cirkel__detail { display: none; }
  .rb-cirkel__naam { transform-box: fill-box; transform-origin: center; transform: scale(1.4); }
  .rb-cirkel__stappen { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-top: 24px; }
}

.rb-featured { --rb-grid-min: 320px; --rb-grid-gap: clamp(28px, 4vw, 64px); align-items: center; }
.rb-featured__dek { font-weight: 400; font-size: clamp(19px, 2.2vw, 28px); line-height: 1.35; margin: 0 0 22px; }
.rb-featured__title {
  font-weight: 700; font-size: clamp(28px, 4.2vw, 58px);
  line-height: 1.06; margin: 0 0 20px;
}
.rb-featured-rest { margin-top: clamp(40px, 6vh, 72px); }

.rb-essay__head {
  --rb-display-size: clamp(30px, 4.4vw, 64px);
  max-width: 30ch;
  margin: 0 0 clamp(32px, 5vw, 60px);
}
.rb-essay { --rb-grid-min: 300px; --rb-grid-gap: clamp(24px, 4vw, 64px); max-width: 1280px; }
.rb-essay p:where(:not([class*="rb-"])) { font-size: 16px; line-height: 1.7; margin: 0; }
/* twee alinea's in één kolom krijgen lucht; een losse alinea niet */
.rb-essay > * > p + p:where(:not([class*="rb-"])) { margin-top: 20px; }
.rb-essay strong { font-weight: 700; }
.rb-essay p a:where(:not([class])) { color: var(--rb-orange); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.rb-essay .rb-essay__close {
  font-weight: 700; font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.15; margin: 20px 0 0;
}
/* bovenaan een kolom lijnt de slotzin uit met de kolom ernaast */
.rb-essay > * > .rb-essay__close:first-child { margin-top: 0; }
/* Na de algemene .wp-block-buttons { margin: 0 } verderop, dus specifieker. */
.rb-essay .rb-essay__actions { margin-top: 30px; }
/* Onder een essay als geheel (Wat is eigenlijk nog ons werk?, 1.7.1). */
.rb-essay + .rb-essay__actions { margin-top: clamp(32px, 4vw, 48px); }

.rb-moed { background: var(--rb-navy); color: var(--rb-shell-fg); padding-block: clamp(56px, 11vh, 140px); }
.rb-moed__grid { --rb-grid-min: 320px; --rb-grid-gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.rb-moed p:where(:not([class*="rb-"])) { font-size: 18px; line-height: 1.7; color: rgba(245, 245, 245, .82); margin: 0 0 20px; max-width: 48ch; }
.rb-moed .rb-moed__title {
  --rb-display-size: clamp(30px, 4.6vw, 68px);
  font-size: var(--rb-display-size);
  line-height: 1;
  color: inherit;
  max-width: none;
  margin: 0 0 28px;
}
.rb-moed .rb-btn { margin-top: 30px; }
.rb-moed p strong { color: var(--rb-shell-fg); font-weight: 700; }

/* BasePulse. De tweede helft van de kop staat dun op een eigen regel, zoals op
   de dia: "Eén werkruimte. / Al je kennis". De redactie maakt dat met cursief. */
.rb-moed__title em,
.rb-title em { font-style: normal; font-weight: 500; display: block; }

/* De zeven lagen van de AI Workspace: genummerd, met een haarlijn ertussen.
   Het laatste nummer is oranje, zoals op de dia. */
.rb-lagen { list-style: none; counter-reset: laag; margin: 8px 0 32px; padding: 0; max-width: 48ch; }
.rb-lagen li {
  counter-increment: laag;
  display: grid; grid-template-columns: 44px 1fr; align-items: baseline;
  font-size: 18px; font-weight: 500; padding: 11px 0;
  border-bottom: 1px solid rgba(245, 245, 245, .14);
}
.rb-lagen li::before { content: counter(laag, decimal-leading-zero); font-size: 14px; font-weight: 700; color: var(--rb-teal); }
.rb-lagen li:last-child::before { color: var(--rb-orange); }
.rb-moed .rb-lagen li { color: var(--rb-shell-fg); }

/* De schermafbeelding van BasePulse: als een scherm, op zijn eigen formaat (hij
   wordt niet opgerekt, dan blijft hij scherp), links op de lijn van de pagina. */
.rb-scherm-sectie { padding-top: 0; }
.rb-scherm { margin: 0; max-width: max-content; }
.rb-scherm img { display: block; max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rb-line); box-shadow: 0 24px 60px -24px rgba(48, 56, 65, .35); }

/* De AI Workspace-plaat (BasePulse), de donkere versie uit het ontwerp "Rebrave
   AI Workspace in één plaat". Links de legenda (de zeven lagen), rechts de plaat
   die zich laag voor laag opbouwt; assets/js/werkruimte.js doet de beweging.
   Zonder script staat alles er gewoon. Alleen themakleuren: waar het ontwerp
   tussentinten had, staat nu een rand of een themakleur. */
.rb-werkruimte {
  --ws-ease: cubic-bezier(.22, 1, .36, 1);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
  gap: clamp(32px, 4vw, 64px); align-items: center; margin-top: 8px;
}
@media (max-width: 900px) { .rb-werkruimte { grid-template-columns: 1fr; } }
.rb-werkruimte__routes { display: none; }

/* legenda */
.rb-werkruimte__lagen { margin: 0; max-width: none; }
.rb-werkruimte__lagen li { cursor: default; transition: opacity .3s var(--ws-ease); outline-offset: 4px; }
.rb-werkruimte__lagen li::before,
.rb-werkruimte__lagen li:last-child::before { color: var(--rb-teal); transition: color .3s var(--ws-ease); }
.rb-werkruimte__lagen li.is-nu::before,
.rb-werkruimte__lagen li.is-focus::before { color: var(--rb-orange); }
.rb-werkruimte.is-animeert .rb-werkruimte__lagen li:not(.is-gebouwd) { opacity: .25; }
.rb-werkruimte.heeft-focus .rb-werkruimte__lagen li:not(.is-focus) { opacity: .4; }

/* de plaat schaalt mee met zijn eigen breedte */
.rb-werkruimte__plaat { container-type: inline-size; display: flex; flex-direction: column; gap: 10px; color: var(--rb-shell-fg); }
.rb-werkruimte__plaat > * { font-size: clamp(9px, 1.55cqi, 18px); }
.rb-werkruimte__plaat p { margin: 0; }
.rb-werkruimte__plaat strong { display: block; font-weight: 700; line-height: 1.1; }

.rb-werkruimte__vraag {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  background: var(--rb-teal); color: var(--rb-navy); border-radius: 999px; padding: .55em .55em .55em 1.7em;
}
.rb-werkruimte__vraagtekst { font-size: 1.3em; font-weight: 700; min-width: 0; transition: opacity .24s; }
.rb-werkruimte__actie { flex: none; background: var(--rb-navy); color: var(--rb-shell-fg); border-radius: 999px; padding: .55em 1.1em; font-size: 1.1em; font-weight: 700; white-space: nowrap; transition: opacity .24s; }
.rb-werkruimte.is-wissel .rb-werkruimte__vraagtekst,
.rb-werkruimte.is-wissel .rb-werkruimte__actie { opacity: 0; }

.rb-werkruimte__experts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.rb-werkruimte__expert { background: transparent; border: 1.5px solid var(--rb-muted); border-radius: 1.2em; padding: 1em 1.1em .8em; box-shadow: inset 0 0 0 3px transparent; transition: box-shadow .3s var(--ws-ease); }
.rb-werkruimte__expert strong { font-size: 1.3em; margin-bottom: .3em; }
.rb-werkruimte__expert span { color: var(--rb-line); }
.rb-werkruimte__expert.is-route { box-shadow: inset 0 0 0 3px var(--rb-orange); }

.rb-werkruimte__orchestrator,
.rb-werkruimte__gateway,
.rb-werkruimte__hosting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4em 1.2em; border-radius: 1.2em; padding: 1.05em 1.6em; }
.rb-werkruimte__orchestrator { background: var(--rb-orange); color: var(--rb-navy); }
.rb-werkruimte__orchestrator strong { font-size: 1.6em; }
.rb-werkruimte__som { font-size: 1.1em; font-weight: 700; }
.rb-werkruimte__gateway { border: 1.5px solid var(--rb-line); }
.rb-werkruimte__gateway strong { font-size: 1.5em; }
.rb-werkruimte__gateway span, .rb-werkruimte__hosting span { font-size: 1.1em; color: var(--rb-line); }

.rb-werkruimte__bronnen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6em; padding-bottom: .9em; }
.rb-werkruimte__bron { position: relative; display: flex; flex-direction: column; gap: .4em; }
.rb-werkruimte__bron > * { transition-delay: inherit; }
.rb-werkruimte__agent,
.rb-werkruimte__systeem { border-radius: 1em; color: var(--rb-navy); box-shadow: inset 0 0 0 3px transparent; transition: box-shadow .3s var(--ws-ease), opacity .5s var(--ws-ease), transform .5s var(--ws-ease); }
.rb-werkruimte__agent { background: var(--rb-teal); padding: .6em .7em; font-size: .95em; font-weight: 700; }
.rb-werkruimte__systeem { flex: 1; display: flex; flex-direction: column; justify-content: center; background: var(--rb-cream); padding: .8em .7em; }
.rb-werkruimte__systeem strong { font-size: 1.2em; }
.rb-werkruimte__systeem span { font-size: .9em; color: var(--rb-muted); }
.rb-werkruimte__bron.is-route .rb-werkruimte__agent,
.rb-werkruimte__bron.is-route .rb-werkruimte__systeem { box-shadow: inset 0 0 0 3px var(--rb-teal-deep); }
.rb-werkruimte__bron.is-actie .rb-werkruimte__agent,
.rb-werkruimte__bron.is-actie .rb-werkruimte__systeem { box-shadow: inset 0 0 0 3px var(--rb-orange); }
.rb-werkruimte__badge {
  position: absolute; left: 50%; bottom: -.9em; transform: translateX(-50%);
  background: var(--rb-teal); color: var(--rb-navy); border-radius: 999px; padding: .2em .7em;
  font-size: .85em; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .3s var(--ws-ease);
}
.rb-werkruimte__bron.is-route .rb-werkruimte__badge { opacity: 1; transition-delay: inherit; }
.rb-werkruimte__bron.is-actie .rb-werkruimte__badge { background: var(--rb-orange); }
/* zonder script: geen badges, want er loopt geen vraag */
.rb-werkruimte:not(.is-animeert) .rb-werkruimte__bron:not(.is-route) .rb-werkruimte__badge { opacity: 0; }

.rb-werkruimte__hosting { position: relative; overflow: hidden; margin-top: .4em; border: 1.5px solid var(--rb-muted); }
.rb-werkruimte__hosting::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--rb-orange), var(--rb-teal)); }
.rb-werkruimte__hosting strong { font-size: 1.4em; }

/* de opbouw: een laag schuift in zodra hij aan de beurt is */
.rb-werkruimte.is-animeert .rb-werkruimte__plaat [data-laag] { opacity: 0; transform: translateY(-28px); transition: opacity .5s var(--ws-ease), transform .5s var(--ws-ease), box-shadow .3s var(--ws-ease); }
.rb-werkruimte.is-animeert .rb-werkruimte__plaat [data-laag].is-gebouwd { opacity: 1; transform: none; }
.rb-werkruimte.heeft-focus .rb-werkruimte__plaat [data-laag].is-gebouwd:not(.is-focus) { opacity: .18; }

@container (max-width: 560px) {
  .rb-werkruimte__bronnen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.4em; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-werkruimte *, .rb-werkruimte *::before { transition: none !important; }
}
/* Uit de standaard sinds 0.18.0, maar een pagina die de redactie aanpaste kan
   de alinea nog hebben: zonder deze regel staat hij navy op navy.
   Specifieker dan de flow-layout van WordPress, die de bovenmarge op 0 zet. */
.rb-werkruimte + .rb-werkruimte__past { margin: clamp(32px, 5vh, 56px) 0 0; max-width: 60ch; font-size: 18px; line-height: 1.7; color: rgba(245, 245, 245, .82); }


/* Het citaat naast "waar het verschil zit": groot, in teal, onderaan uitgelijnd. */
.rb-moed .rb-moed__citaat { color: var(--rb-teal); align-self: end; }
.rb-moed p a:where(:not([class])) { color: var(--rb-teal); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Drie soorten AI naast elkaar: chatbot, persoonlijke agent, AI Workspace. De
   iconen zijn van Phosphor (MIT, zie assets/LICENSE-phosphor.txt) en volgen de
   tekstkleur. Alleen themakleuren; de AI Workspace is de donkere kaart. */
.rb-soorten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
@media (max-width: 900px) { .rb-soorten { grid-template-columns: 1fr; } }
.rb-soort { background: var(--rb-cream); border: 1px solid var(--rb-line); border-radius: 18px; padding: 28px; }
.rb-soort--workspace { background: var(--rb-navy); border-color: var(--rb-navy); color: var(--rb-shell-fg); }
.rb-soort__iconen { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.rb-soort__icoon { width: 44px; height: 44px; padding: 16px; box-sizing: content-box; border-radius: 50%; background: var(--rb-paper); color: var(--rb-navy); }
.rb-soort--agent .rb-soort__icoon { color: var(--rb-teal-deep); }
.rb-soort--workspace .rb-soort__icoon { background: transparent; border: 1.5px solid var(--rb-teal); color: var(--rb-orange); }
.rb-soort__plus { font-size: 28px; font-weight: 700; color: var(--rb-teal); }
.rb-soort__kicker { font-size: 13px; font-weight: 700; color: var(--rb-muted); margin: 0 0 14px; }
.rb-soort--workspace .rb-soort__kicker { color: var(--rb-orange); }
.rb-soort h3 { font-size: clamp(22px, 2vw, 26px); margin: 0 0 4px; }
.rb-soort dl { margin: 0; }
.rb-soort dt { font-size: 13px; font-weight: 700; color: var(--rb-muted); margin-top: 14px; }
.rb-soort--workspace dt { color: var(--rb-teal); }
.rb-soort dd { margin: 2px 0 0; font-size: 16px; line-height: 1.45; }
.rb-soort--workspace dd { font-weight: 700; }

/* De voorbeeldvraag uit de dia: de vraag in een tealkleurige balk, de actie
   die de workspace klaarzet als donker label erin. */
.rb-voorbeeldvraag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; background: var(--rb-teal); border-radius: 999px; padding: 12px 12px 12px 32px; margin: 0 0 10px; }
.rb-voorbeeldvraag p { margin: 0; }
.rb-voorbeeldvraag .rb-voorbeeldvraag__vraag { font-size: clamp(17px, 1.8vw, 22px); font-weight: 500; color: var(--rb-navy); }
.rb-voorbeeldvraag .rb-voorbeeldvraag__actie { background: var(--rb-navy); color: var(--rb-cream); border-radius: 999px; padding: 10px 22px; font-weight: 500; font-size: 16px; }
.rb-voorbeeldvraag__noot { font-size: 14px; font-weight: 500; color: var(--rb-orange); margin: 0 0 clamp(32px, 5vh, 56px); }
@media (max-width: 700px) { .rb-voorbeeldvraag { border-radius: 24px; padding: 18px; } }

.rb-beliefs { background: var(--rb-paper); }
.rb-beliefs__grid { --rb-grid-min: 280px; }
.rb-belief { border-top: 3px solid var(--rb-navy); padding-top: 24px; }
.rb-belief__num { font-size: 56px; font-weight: 700; color: var(--rb-orange); line-height: 1; margin: 0 0 20px; }
.rb-belief h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.15; margin: 0 0 14px; }
.rb-belief p:where(:not([class*="rb-"])) { font-size: 16px; line-height: 1.65; margin: 0 0 16px; }

/* Laatste nieuws krijgt dezelfde kop als de inzichten, maar zonder de grote
   titel eronder: het is een melding, geen denkwerk. */
.rb-insights .rb-sectionhead,
.rb-news .rb-sectionhead,
.rb-vacatures .rb-sectionhead { --rb-sectionhead-gap: clamp(20px, 3vh, 32px); }

.rb-cta-section { padding-block: 0 clamp(56px, 10vh, 120px); }
/* Na een gekleurde band (overtuigingen, moed, vraag) zou de balk er tegenaan
   plakken: die band heeft zijn ruimte binnen de kleur. De balk is een kader op
   zichzelf, dus dezelfde ruimte erboven als bij elke andere sectie. */
.rb-section--bleed + .rb-cta-section { padding-top: var(--rb-section-y); }
/* De quickscanbalk was een vol oranje vlak en schreeuwde het hardst van de hele
   pagina. Nu tame teal met navy erop: nog steeds één gekleurd blok tussen de
   cream secties, maar zonder de felheid. Meegenomen: elke combinatie hier haalt
   nu AA. Op oranje deed geen enkele dat — cloud white 2,90:1, puur wit 3,16:1,
   night blue 3,76:1. Op teal is navy 4,64:1 en de knop 10,9:1.
   Oranje blijft de actiekleur van het thema; het is alleen geen vlak meer dat
   een halve schermbreedte beslaat. */
.rb-cta {
  background: var(--rb-teal); color: var(--rb-navy);
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3.5vw, 48px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
}
.rb-cta__kicker { font-size: 13px; font-weight: 700; color: var(--rb-navy); margin: 0 0 10px; }
.rb-cta .rb-cta__title { margin: 0; color: var(--rb-navy); font-weight: 700; font-size: clamp(22px, 2.8vw, 38px); line-height: 1.06; margin: 0; }
.rb-cta p:where(:not([class*="rb-"])) { font-size: 15px; line-height: 1.6; color: var(--rb-navy); margin: 10px 0 0; max-width: 48ch; }
/* De knop is navy op teal (4,64:1 als vlak, 10,9:1 voor het label). Een cream
   knop zou op teal op 2,35:1 staan en een oranje knop op 1,24:1 — die laatste
   heeft praktisch geen rand meer tegen de band. Twee selectors, want de
   homepagebalk zet de knop zelf neer en /communities/ doet het met een
   blokstijl; alleen hier binnen, elders blijft het label-knopje cream. */
.rb-cta .rb-btn--label,
.rb-cta .is-style-rebrave-label > .wp-block-button__link { background: var(--rb-navy); color: var(--rb-cream); }

/* Zoeken op een lichte pagina (resultaten, 404): het veld zoals een veld in
   een formulier, met een navy knop ernaast. */
.rb-zoekveld { display: flex; gap: 10px; max-width: 640px; margin-top: 8px; }
.rb-archive-head .rb-lead + .rb-zoekveld { margin-top: 28px; }
.rb-zoekveld input {
  flex: 1; min-width: 0; padding: 12px 14px;
  border: 1.5px solid var(--rb-muted); border-radius: var(--rb-radius);
  background: var(--rb-cream); color: var(--rb-ink); font: inherit; font-size: 18px;
  transition: border-color .15s, box-shadow .15s;
}
.rb-zoekveld input::placeholder { color: var(--rb-muted); }
.rb-zoekveld input:focus { outline: 0; border-color: var(--rb-navy); box-shadow: 0 0 0 3px rgba(255, 87, 34, .35); }
.rb-zoekveld .rb-btn--label { background: var(--rb-navy); color: var(--rb-cream); padding: 12px 22px; font-size: 15px; }
.rb-zoek-aantal { margin: 18px 0 0; font-size: 15px; color: var(--rb-muted); }
/* `search` is de body-klasse van WordPress op de resultatenpagina. */
body.search .rb-archive-head .rb-title { margin-bottom: 22px; }

/* =========================================================================
   14. ARCHIEF EN KAART
   ========================================================================= */
.rb-archive-head { padding-block: clamp(48px, 9vh, 110px) clamp(32px, 5vh, 56px); }
.rb-archive-head .rb-title { margin-bottom: 26px; max-width: 18ch; }
.rb-archive-head .rb-lead { max-width: 36ch; }
.rb-archive-body { padding-block: 0 clamp(56px, 10vh, 120px); }
.rb-cards { --rb-grid-min: 320px; }

.rb-card { display: flex; flex-direction: column; }
.rb-card .rb-stripe { margin-bottom: 20px; }
.rb-card__meta { font-size: 13px; color: var(--rb-muted); margin-bottom: 10px; }
.rb-card__title { font-size: clamp(23px, 2.6vw, 34px); font-weight: 700; line-height: 1.08; margin: 0 0 12px; }
.rb-card p:where(:not([class*="rb-"])) { font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.rb-card:hover .rb-card__title { color: var(--rb-orange); }

.rb-pagination { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(40px, 6vh, 72px); }

/* De filterrij boven /verhalen/ en /inzichten/ (rebrave_archief_filter()). Zelfde
   vakjes als de paginering hieronder, zodat er geen nieuw element bijkomt dat om
   aandacht vraagt: omlijnd, en navy voor wat er nu staat. */
.rb-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vh, 44px); }
.rb-filter a {
  border: 1px solid var(--rb-line); padding: 12px 18px;
  font-size: 13px; font-weight: 700;  transition: border-color .18s, background .18s, color .18s;
}
.rb-filter a:hover { border-color: var(--rb-navy); }
.rb-filter a[aria-current] { background: var(--rb-navy); color: var(--rb-cream); border-color: var(--rb-navy); }
.rb-pagination .page-numbers {
  border: 1px solid var(--rb-line); padding: 12px 18px;
  font-size: 13px; font-weight: 700;}
.rb-pagination .current { background: var(--rb-navy); color: var(--rb-cream); border-color: var(--rb-navy); }

/* =========================================================================
   15. VERHAAL-DETAIL
   ========================================================================= */
.rb-single-head { padding-block: clamp(36px, 6vh, 72px) clamp(28px, 4vh, 48px); }
.rb-back { display: block; width: fit-content; font-size: 14px; font-weight: 700; color: var(--rb-muted); margin-bottom: 28px; }
.rb-single-head .rb-title { --rb-title-size: clamp(38px, 6.6vw, 96px); margin-bottom: 26px; max-width: 16ch; }
.rb-single-head .rb-lead { --rb-lead-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; margin-bottom: 30px; max-width: 36ch; }
.rb-single-meta {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: 13px; font-weight: 700; color: var(--rb-muted);
  border-top: 1px solid var(--rb-line); border-bottom: 1px solid var(--rb-line); padding: 16px 0;
}

.rb-prose { max-width: 720px; margin: 0 auto; padding: clamp(44px, 7vh, 88px) clamp(18px, 4vw, 32px); }
/* Zonder openingsbeeld volgt de tekst direct op de kop, die al ruimte onder
   zich heeft; met 88 px erbij en de marge van een tussenkop werd dat ~180 px.
   Met een beeld blijft de ruimte tussen beeld en tekst. */
.rb-single-head + .rb-prose { padding-top: clamp(20px, 3vh, 32px); }
.rb-prose > :first-child { margin-top: 0; }
.rb-prose > p { font-size: 19px; line-height: 1.75; margin: 0 0 26px; }
.rb-prose > h2 { font-weight: 700; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.12; margin: 44px 0 20px; }
.rb-prose > h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.15; margin: 36px 0 16px; }
.rb-prose > ul, .rb-prose > ol { font-size: 19px; line-height: 1.75; margin: 0 0 26px; padding-left: 22px; }
.rb-prose > figure { margin: 40px 0; }
.rb-prose > blockquote { margin: 44px 0; padding-left: 24px; border-left: 3px solid var(--rb-orange); }
.rb-prose > blockquote p { font-weight: 500; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; margin: 0; }
.rb-prose > blockquote cite { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: var(--rb-muted); margin-top: 18px; }
.rb-prose a { color: var(--rb-orange); text-decoration: underline; text-underline-offset: 3px; }
.rb-prose .is-style-rebrave-lead { font-weight: 500; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.3; margin-bottom: 40px; }

.rb-readon { background: var(--rb-paper); padding-block: clamp(44px, 8vh, 100px); }
.rb-readon__grid { --rb-hairline-min: 260px; }
.rb-readon__tile { padding: 26px; transition: background .18s; }
.rb-readon__tile:hover { background: var(--rb-cream); }
.rb-readon__tile h3 { font-weight: 700; font-size: 22px; line-height: 1.12; margin: 0; color: var(--rb-navy); }
.rb-readon__tile--dark { background: var(--rb-navy); color: var(--rb-shell-fg); }
.rb-readon__tile--dark h3 { color: inherit; }
.rb-readon__tile--dark:hover { background: var(--rb-orange); }
.rb-readon__tile--dark .rb-kicker { --rb-kicker-c: var(--rb-teal); }

/* =========================================================================
   16. FOOTER
   ========================================================================= */
.rb-footer { background: var(--rb-shell); color: var(--rb-shell-fg); padding-block: clamp(48px, 9vh, 110px) 40px; position: relative; overflow: hidden; }
/* De murmuratie rechtsboven in de footer, deels buiten beeld — de tegenhanger
   van de hero. Een `<img>` met een gebakken SVG: de vorm staat stil, dus er is
   niets te animeren. `object-fit: contain` doet wat de generator zelf deed —
   uniform schalen en centreren in het kader — zodat een andere schermbreedte de
   figuur niet uitrekt maar er lucht omheen laat.

   Deze vier waarden zijn narekenbaar, niet geschat. De maatstaf is de hoogte van
   de wig, want die staat in beide plaatjes en is in beide even hoog ten opzichte
   van de footer. In het ontwerp begint de figuur 0,61 wighoogte rechts van de
   punt van de wig, steekt hij 0,22 boven de wigtop uit, eindigt hij 0,91 eronder
   en is hij 1,13 wighoogte hoog. Het thema rendert 0,61 / 0,22 / 0,91 / 1,13.

   Van kader naar figuur: de generator centreert in zijn kader en schaalt met één
   factor (`project()` neemt de kleinste van breedte en hoogte), dus de inkt zit
   op een vaste plek in het kader — gemeten met de kolommen even op
   `visibility:hidden`: 0,8217 × de kaderhoogte hoog, en het midden ligt 0,6531
   kaderhoogte rechts van de linkerrand van de inkt. Daaruit volgen deze vier.
   De verhouding breedte:hoogte van het kader (1,417) hoort erbij: verander je
   die, dan kan de andere zijde gaan binden en klopt de schaal niet meer. */
.rb-footer__flock {
  position: absolute; z-index: 0; pointer-events: none;
  top: 0.2%; right: -10.1%; width: 35.4%; height: 53.1%;   /* 35,4 / 53,1 = 1,417 */
  object-fit: contain;
}
.rb-footer > .rb-shell { position: relative; z-index: 1; }
.rb-footer__wedge-wrap { position: relative; margin-bottom: clamp(40px, 7vh, 80px); }
.rb-wedge {
  position: absolute; top: -6%; height: 112%;
  /* Voorbij de schermrand, hoe breed het scherm ook is. Met alleen -8vw haalt
     de wig de rand niet meer zodra de kolom op 1440 vastloopt (vanaf ~1714px). */
  left: calc(-8vw - var(--rb-inset));
  /* 76vw: op een smalle laptop loopt hij anders door de murmuratie, die op
     ~75% van de breedte begint. 340px: daaronder past de slotregel niet meer. */
  width: calc(min(92%, 1020px, max(76vw, 340px)) + var(--rb-inset));
  background: var(--rb-orange); clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%);
  transform: scaleX(.06); transform-origin: left center;
  transition: transform 1.15s cubic-bezier(.16, .84, .28, 1);
}
.rb-wedge-text {
  position: relative; font-weight: 500;
  font-size: clamp(30px, 6vw, 90px); line-height: 1.04;  margin: 0; max-width: 15ch; text-wrap: balance;
  padding: clamp(18px, 3vw, 40px) clamp(10px, 1.4vw, 20px) clamp(18px, 3vw, 40px) 0;
  color: var(--rb-navy); opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease .45s, transform .7s cubic-bezier(.16, .84, .28, 1) .45s;
}
.rb-footer.is-open .rb-wedge { transform: none; }
/* `translateY(0)` en niet `none`: met `none` valt de transform helemaal weg, de
   browser laat de eigen laag los en hertekent de letters uitgelijnd op het
   pixelraster. Dat hertekenen zie je als een sprong op het moment dat de
   beweging klaar is. Een transform die nul is houdt dezelfde tekenweg aan, dus
   waar de tekst tijdens de beweging staat is ook waar hij blijft staan. */
.rb-footer.is-open .rb-wedge-text { opacity: 1; transform: translateY(0); }

/* Drie vaste blokken: contact, nieuwsbrief, verantwoording. Altijd open, ook op
   een telefoon: daar onder elkaar. */
.rb-footer__cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  /* Geen lijn naar het copyright (sinds 1.7.6): de ruimte scheidt al genoeg. */
  padding-bottom: clamp(32px, 5vh, 56px);
}
.rb-footer__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rb-footer__col .rb-kicker { --rb-kicker-c: var(--rb-teal); margin-bottom: 4px; }
.rb-footer__col a, .rb-footer__col span { font-size: 15px; }
.rb-footer__col a:hover { color: var(--rb-orange); }
.rb-footer__muted { color: rgba(245, 245, 245, .6); }
.rb-footer__alles { margin-top: 6px; color: var(--rb-teal); }
.rb-footer__col a.rb-footer__alles:hover { color: var(--rb-orange); }
/* De zin boven het nieuwsbriefformulier: copy, dus een eigen regelhoogte. */
.rb-footer__nieuwsbrief { margin: 0; font-size: 15px; line-height: 1.45; }
.rb-footer__col .rb-formulier { width: 100%; max-width: 420px; }

.rb-footer__bottom { padding-top: 24px; font-size: 13px; color: rgba(245, 245, 245, .6); }   /* 5,03:1 */

/* =========================================================================
   17. KLEINE SCHERMEN
   ========================================================================= */
@media (max-width: 640px) {
  .rb-footer__cols { grid-template-columns: 1fr; }
  .rb-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .rb-row__type { grid-column: 1 / -1; min-width: 0; }
  .rb-header__inner { gap: 10px; }
  .rb-hero { min-height: 0; }
  /* De murmuratie boven het woordmerk in plaats van erachter (1.7.4): op een
     telefoon liep hij door de ondertitel en de knoppen. Het kader staat in het
     midden; de figuur zwaait daar zo'n 25px omheen, maar staat over een cyclus
     gemiddeld precies in het midden. Gaat boven de Customizer-instellingen
     (die zetten --rb-flock-*), want die zijn voor een breed scherm. */
  .rb-hero { padding-top: min(calc(72vw + 8px), 380px); }
  .rb-hero__flock { width: 190%; height: min(84vw, 440px); left: 50%; top: -6vw; transform: translateX(-50%); }
  /* De knoppen onder elkaar, over de volle breedte: naast elkaar waren ze krap. */
  .rb-hero__actions { flex-direction: column; align-items: stretch; }
  .rb-hero__actions .wp-block-button__link { width: 100%; justify-content: center; }
  /* De footer-murmuratie rechtsonder (1.7.5). Met de maten van desktop werd hij
     in de hoge, gestapelde footer klein en schoof hij in de contactgegevens. Nu
     in de lege ruimte naast *verantwoording*; de footer wordt niet hoger. */
  .rb-footer__flock { top: auto; bottom: -4%; right: -18%; width: min(85%, 380px); height: min(62vw, 280px); }
}

/* sectorentegels en de intro/uitro van een sectie */
.rb-principes { --rb-hairline-min: 340px; }  /* zes stuks: 3 + 3, niet 5 + 1 */

/* Een tabel van rijen: per rij een kop, een tekst en tot drie kolommen. Tot
   0.14.0 de vier velden op /wat-we-doen/; nu de principes op /hoe-wij-ai-gebruiken/,
   contact en de routebeschrijving. De groep draagt nog rb-hairline (dat staat in
   post_content), maar de tegels zijn weg: geen voegen. Op een telefoon staan de
   kolommen onder elkaar. */
.rb-velden { display: block; gap: 0; overflow: visible; background: none; border: 0; }
.rb-velden > * { background: none; }
.rb-veld { border-top: 3px solid var(--rb-navy); padding: 24px 0 28px; }
.rb-veld:last-child { border-bottom: 1px solid var(--rb-line); }
.rb-veld__titel { font-size: clamp(22px, 2.2vw, 26px); font-weight: 700; line-height: 1.15; margin: 0 0 12px; }
.rb-veld p:where(:not([class*="rb-"])) { font-size: 15px; line-height: 1.6; margin: 0; }
.rb-veld > p:nth-child(2) { font-size: 16px; }
.rb-veld > p:nth-child(n+3) { border-top: 1px solid var(--rb-line); padding-top: 12px; margin-top: 12px; }

@media (min-width: 900px) {
  .rb-veld { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; column-gap: 32px; row-gap: 6px; padding: 28px 0 32px; }
  .rb-veld__titel { grid-column: 1; grid-row: 1; margin: 0; }
  .rb-veld > p:nth-child(2) { grid-column: 1; grid-row: 2; }
  .rb-veld > p:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .rb-veld > p:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
  .rb-veld > p:nth-child(5) { grid-column: 4; grid-row: 1 / span 2; }
  .rb-veld > p:nth-child(n+3) { border-top: 0; margin-top: 0; padding-top: 4px; }
  /* een veld zonder team-voorbeelden (de opbouw van vóór 0.10.0, of door de
     redactie ingekort): de tekst krijgt de breedte, niet één smalle kolom */
  .rb-veld > p:nth-child(2):last-child { grid-column: 1 / -1; max-width: 72ch; }
}
.rb-intro { font-size: 16px; line-height: 1.7; max-width: 68ch; margin: 0 0 clamp(32px, 5vh, 56px); }
/* Gewone alinea's die de redactie zelf in een sectie zet: de letter van een
   intro, in een leesbare kolom. Zonder dit stonden ze klein en over de hele
   breedte. "Gewoon" is: geen eigen rb-klasse, zoals elders in dit bestand. Niet
   "zonder klasse": WordPress zet er op rebrave.nl `wp-block-paragraph` op, en
   dan greep de regel daar niet (1.10.4). */
.rb-section > p:where(:not([class*="rb-"])) { font-size: 16px; line-height: 1.7; max-width: 68ch; margin: 0 0 1em; }
.rb-section > p:where(:not([class*="rb-"])):last-child { margin-bottom: 0; }
/* Een link in die alinea's, en in een intro, oranje en onderstreept zoals in
   een artikel (.rb-prose): `a { color: inherit }` haalt de kleur overal weg.
   Niet op een gekleurde band; daar heeft elke band zijn eigen linkkleur. */
.rb-section:not(.rb-section--bleed) > p:where(:not([class*="rb-"])) a,
.rb-section:not(.rb-section--bleed) .rb-intro a { color: var(--rb-orange); text-decoration: underline; text-underline-offset: 3px; }
/* De uitro sluit een sectie af en moet daarom verder van het raster af staan dan
   de kolommen van elkaar. Twee redenen waarom dat niet zo was:
   de marge rekende in `vh` — op een scherm van 800px hoog is 5vh 40px, minder dan
   de 56px die het raster tussen twee kolommen laat — en de bovenkant van het
   raster heeft een streep van 3px die het oog het werk uit handen neemt, de
   onderkant niet. Nu in `vw`, dezelfde as als `--rb-grid-gap`, en ruimer dan die
   gap. De intro hoeft dat niet: die grenst aan die streep. */
.rb-uitro {
  --rb-uitro-top: clamp(56px, 7vw, 104px);
  font-size: 18px; line-height: 1.7; max-width: 68ch; margin: var(--rb-uitro-top) 0 0;
}
.rb-beliefs .rb-intro { margin-bottom: clamp(32px, 5vh, 56px); }
/* tekst en een rij kolommen onder elkaar in één sectie (Wij, Moed) */
.rb-essay + .rb-beliefs__grid,
.rb-beliefs__grid + .rb-essay { margin-top: clamp(32px, 5vh, 56px); }
/* en dan dezelfde kolommen: anders schuift de tekst eronder op een breed
   scherm onder de kolom erboven uit (de essay stopt op 1280, de rij niet) */
.rb-essay:has(+ .rb-beliefs__grid),
.rb-beliefs__grid + .rb-essay { --rb-grid-min: 280px; --rb-grid-gap: clamp(28px, 4vw, 56px); max-width: none; }

/* de uitgebreide vorm van een overtuiging (/moed/): nummer naast de tekst */
.rb-plekken-uit { display: flex; flex-direction: column; gap: clamp(40px, 6vh, 72px); }
.rb-plek-uit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 56px);
  border-top: 3px solid var(--rb-navy);
  padding-top: 24px;
}
.rb-plek-uit__num { font-size: 56px; font-weight: 700; color: var(--rb-orange); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; min-width: 2ch; }
.rb-plek-uit__titel { font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; line-height: 1.06; margin: 0 0 16px; }
.rb-plek-uit p:where(:not([class*="rb-"])) { font-size: 18px; line-height: 1.7; margin: 0 0 16px; }
/* een overtuiging in zijn geheel (/moed/): lange tekst, dus een leesbare regel */
.rb-belief-uit p:where(:not([class*="rb-"])) { max-width: 72ch; }
/* breed genoeg: de titel links, de tekst rechts, zodat de regel leesbaar blijft
   en de rechterkant niet leeg */
@media (min-width: 1000px) {
  .rb-belief-uit > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .rb-belief-uit .rb-plek-uit__titel { margin: 0; }
}

@media (max-width: 640px) {
  .rb-plek-uit { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================================
   17b. MENSEN, NETWERKEN, LEERAANBOD
   ========================================================================= */
.rb-personen { --rb-grid-min: 230px; --rb-grid-gap: clamp(20px, 3vw, 36px); }
.rb-person { display: block; }
.rb-stripe--portret { --rb-stripe-ratio: 3/4; --rb-stripe-step: 14px; margin-bottom: 16px; }
.rb-person__naam { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; }
.rb-person__rol { display: block; margin-top: 4px; font-size: 14px; color: var(--rb-muted); }
@media (hover: hover) { .rb-person:hover .rb-person__naam { color: var(--rb-orange); } }

/* Een portret staat in rust in zwart-wit en komt bij hover in kleur. Zo staat
   de pagina rustig en licht de persoon op waar je bent. Geldt voor het overzicht
   én voor de detailpagina, en voor beide portretten als er twee zijn — de
   kleurwissel zit op `.rb-stripe__img`, niet op één van de twee.

   Op een touchscreen is er geen hover. Daar zet ui.js `.is-in-beeld` op het
   portret dat midden op het scherm staat, zodat scrollen doet wat hover doet. */
:is(.rb-stripe--portret, .rb-stripe--portret-groot) .rb-stripe__img {
  /* Een portret in 3:4 (1080 × 1440, zoals de pasfoto's) past precies. Wijkt
     de verhouding af, dan blijft het bovenste deel staan: daar zit het hoofd. */
  object-position: 50% 20%;
  filter: grayscale(1);
  transition: filter .28s ease;
}
/* De hover alleen waar echt gehoverd kan worden. Een telefoon houdt :hover vast
   na een tik, tot je ergens anders tikt: dan bleef het portret in kleur terwijl
   het al terug was naar de eerste foto, en een kaart op /wij/ bleef in kleur na
   de terugweg. Op touch komt de kleur alleen van .is-in-beeld. */
:is(.rb-person:focus-visible, .is-in-beeld) .rb-stripe__img { filter: none; }
/* Met de fotolook aan: in kleur mét de look. */
:is(.rb-person:focus-visible, .is-in-beeld) .rb-stripe__img.rb-foto { filter: var(--rb-fotolook, none); }
@media (hover: hover) {
  :is(.rb-person:hover, .rb-stripe--portret-groot:hover) .rb-stripe__img { filter: none; }
  :is(.rb-person:hover, .rb-stripe--portret-groot:hover) .rb-stripe__img.rb-foto { filter: var(--rb-fotolook, none); }
}

/* Twee portretten in één vlak: het serieuze ligt onder, het lachende erboven.
   Beide zijn .rb-stripe__img, dus ze liggen al op elkaar. */
.rb-stripe--wissel .rb-stripe__img--hover { opacity: 0; transition: opacity .28s ease; }
/* Alleen waar echt gehoverd kan worden. Op een touchscreen zou de tweede foto
   pas ná de tik verschijnen; daar wisselt hij in beeld (.is-in-beeld). */
@media (hover: hover) {
  /* Op de kaart telt de hele kaart, op de detailpagina het beeldvlak zelf —
     daar is geen link omheen. */
  .rb-person:hover .rb-stripe--wissel .rb-stripe__img--hover,
  .rb-stripe--wissel:hover .rb-stripe__img--hover { opacity: 1; }
}
/* Met het toetsenbord telt het net zo goed, ook zonder muis. */
.rb-person:focus-visible .rb-stripe--wissel .rb-stripe__img--hover,
.is-in-beeld .rb-stripe--wissel .rb-stripe__img--hover,
.rb-stripe--wissel.is-in-beeld .rb-stripe__img--hover { opacity: 1; }

/* portret- en feitenlayout van één Rebraver */
.rb-persoon {
  padding-block: clamp(36px, 6vh, 72px) clamp(48px, 8vh, 110px);
}
.rb-persoon__grid { --rb-grid-min: 300px; --rb-grid-gap: clamp(28px, 4vw, 64px); align-items: start; }
.rb-stripe--portret-groot { --rb-stripe-ratio: 3/4; --rb-stripe-step: 18px; align-items: flex-end; }
.rb-persoon__naam {
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 64px); line-height: 1.05;  margin: 0 0 22px; max-width: 14ch; overflow-wrap: break-word;
}
.rb-persoon__rol { font-weight: 400; font-size: clamp(19px, 2.4vw, 30px); line-height: 1.3; margin: 0 0 30px; }
.rb-persoon__tekst > p { font-size: 18px; line-height: 1.7; margin: 0 0 20px; }
.rb-persoon__tekst > blockquote { margin: 0 0 20px; padding: 0; border: 0; }
.rb-persoon__tekst > blockquote p { font-size: 18px; line-height: 1.7; margin: 0; }
.rb-persoon__tekst a { color: var(--rb-orange); text-decoration: underline; text-underline-offset: 3px; }
/* Werkt aan en domeinen als één regel onder de functie (1.1.1); tot dan twee
   tegels onder de bio, waar ze bij een lange bio ver wegzakten. Wordt de regel
   te lang, dan breekt hij tussen de twee feiten, en binnen een feit pas als het
   echt moet. */
.rb-persoon__feiten {
  display: flex; flex-wrap: wrap; gap: 4px 28px;
  font-size: 15px; line-height: 1.7; margin: -14px 0 28px;
}
.rb-feit .rb-kicker { margin-right: 8px; }
/* De knoppen staan direct onder naam en rol, boven de bio: een lange bio duwde
   ze (en het berichtformulier) ver onder de foto, buiten beeld. */
.rb-persoon__acties { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 32px; }
/* Het bericht aan een Rebraver (inc/bericht.php). Op een groot scherm een kader
   dat openklapt onder de knoppen (`show()`) en de bio omlaag duwt, op een
   telefoon een venster over de pagina (`showModal()`); zie assets/js/ui.js. Een
   <dialog> zonder `open` is verborgen, dus zonder script staat er niets. */
.rb-bericht {
  position: relative; margin: -4px 0 32px; padding: 28px; width: auto; max-width: none;
  border: 1px solid var(--rb-line); background: var(--rb-cream); color: var(--rb-ink);
}
.rb-bericht:modal {
  margin: auto; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px);
  overflow: auto; padding: 32px 24px 24px; border: 0;
}
.rb-bericht::backdrop { background: rgba(48, 56, 65, .55); backdrop-filter: blur(6px); }
.rb-bericht__sluit {
  position: absolute; top: 16px; right: 16px; border: 1px solid var(--rb-line); background: none;
  font: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px; cursor: pointer; color: inherit;
}
.rb-bericht__kop { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.15; margin: 0 96px 8px 0; }
.rb-bericht__uitleg { font-size: 16px; line-height: 1.55; margin: 0 0 20px; }
.rb-persoon__werk { margin-top: clamp(48px, 8vh, 96px); }
.rb-btn--oranje { background: var(--rb-orange); color: var(--rb-cream); }
/* Dezelfde knopmaat als de rest (sectie 6): 16px, Medium, zin-stijl. Deze knop
   was bij die ronde overgeslagen en stond nog op 13px/700 kapitaal. De verticale
   marge is 14px in plaats van 16px, want zijn rand van 1,5px moet erbij op om
   naast de oranje labelknop op dezelfde hoogte te staan — zelfde correctie als
   bij `is-style-rebrave-dark`. */
.rb-btn--omlijnd {
  border: 1.5px solid var(--rb-navy); color: var(--rb-navy);
  font-size: 16px; font-weight: 500; padding: 14px 26px;
}

.rb-netwerken { --rb-hairline-min: 280px; }
.rb-netwerk { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 32px; }
.rb-netwerk__naam { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.1; }
.rb-netwerk__dek { font-size: 15px; line-height: 1.6; color: var(--rb-ink); }
.rb-netwerk .rb-more { margin-top: 6px; font-size: 14px; }

.rb-lerenlijst { --rb-hairline-min: 280px; }
.rb-leren { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 32px; }
.rb-leren__titel { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.15; }
.rb-leren__dek { font-size: 15px; line-height: 1.6; color: var(--rb-ink); }
.rb-leren:hover, .rb-netwerk:hover { background: var(--rb-cream); }

/* =========================================================================
   17c. AGENDA
   Dezelfde hairline-tegel als communities en leeraanbod, met de datum als
   eerste regel. Die staat in navy en niet in oranje: de kicker erboven is al
   oranje, en de datum is informatie in plaats van een label.
   ========================================================================= */
.rb-agenda { --rb-hairline-min: 300px; }
.rb-evenement { display: flex; flex-direction: column; gap: 8px; padding: 28px 26px 32px; }
.rb-evenement__wanneer { font-size: 18px; font-weight: 700; color: var(--rb-navy); }
.rb-evenement__waar { font-size: 14px; color: var(--rb-muted); }
.rb-evenement__titel { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.15; margin-top: 6px; }
.rb-evenement__dek { font-size: 15px; line-height: 1.6; color: var(--rb-ink); }
.rb-evenement .rb-more { margin-top: 6px; font-size: 14px; }
.rb-evenement:hover { background: var(--rb-cream); }

/* Het beeld sluit de tegel af: een band tot aan de randen, dus met de padding
   van de tegel eraf. `margin-top: auto` duwt hem naar beneden, zodat de banden
   van tegels naast elkaar op één lijn staan ook als de teksten verschillen. */
.rb-evenement__beeld {
  --rb-stripe-ratio: 21/9;
  margin: auto -26px -32px;
}

/* De aanmeldknop lijnt met de tekst erboven (720px, zoals .rb-prose), niet met
   de volle paginabreedte. */

/* De aanmeldknop lijnt met de tekst erboven (720px, zoals .rb-prose), niet met
   de volle paginabreedte. */
.rb-evenement-aanmelden {
  max-width: 720px; margin-inline: auto;
  padding: 0 clamp(18px, 4vw, 32px) clamp(44px, 7vh, 88px);
}

/* Vacatures: dezelfde kaarten als het leeraanbod. Zonder vacature een open
   sollicitatie, met de knop onder de regel; met vacatures één regel eronder. */
.rb-vacatures-leeg .rb-lead { max-width: 36ch; margin: 0 0 24px; }
.rb-vacatures-open { margin: 28px 0 0; font-size: 15px; color: var(--rb-muted); }
.rb-vacatures-open .rb-more { margin-left: .3em; }

/* =========================================================================
   17d. FORMULIEREN
   De formulieren zijn van Forminator; de vormgeving is van hier. Forminator
   staat op de stijl `none` en zijn eigen stylesheets laden niet (inc/
   formulier.php), dus deze regels hoeven met niets te vechten. Zijn formulier
   begint op display: none; zijn script zet het aan.
   ========================================================================= */

/* --- het uitklappaneel: een klik op de knop klapt het formulier eronder open ---
   Een grid-rij van 0fr naar 1fr: zo animeert de hoogte naar wat de inhoud nodig
   heeft, zonder dat iemand die hoogte hoeft te kennen. Dicht is het paneel ook
   onzichtbaar voor toetsenbord en schermlezer (visibility), pas nadat het
   dichtklappen klaar is. */
.rb-uitklapper {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.16, .84, .28, 1);
}
.rb-uitklapper__binnen {
  min-height: 0; overflow: hidden; visibility: hidden;
  transition: visibility 0s linear .4s;
}
.rb-uitklapper.is-open,
.rb-uitklapper:target { grid-template-rows: 1fr; }
.rb-uitklapper.is-open > .rb-uitklapper__binnen,
.rb-uitklapper:target > .rb-uitklapper__binnen { visibility: visible; transition-delay: 0s; }
.rb-uitklapper__inhoud {
  max-width: 560px; padding-top: 28px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.16, .84, .28, 1);
}
.rb-uitklapper.is-open .rb-uitklapper__inhoud,
.rb-uitklapper:target .rb-uitklapper__inhoud { opacity: 1; transform: none; }
.rb-uitklapper__inhoud:focus { outline: 0; }
.rb-uitklapper__melding {
  margin: 0 0 24px; padding: 14px 18px;
  background: var(--rb-teal); color: var(--rb-navy); font-size: 15px; line-height: 1.5;
}
/* Een losse link zonder eigen plek: het paneel wacht hier tot de eerste klik. */
.rb-formulier-wacht { display: none; }

/* De knop wijst naar beneden, en omhoog als het formulier open is. */
.rb-uitklapknop::after { content: "\2193"; display: inline-block; transition: transform .25s ease; }
.rb-uitklapknop[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Na het versturen verdwijnt de knop; `.rb-btn` zet display en zou `hidden` winnen. */
.rb-uitklapknop[hidden] { display: none; }
/* Zonder knop erboven hoeft de bevestiging niet op afstand te staan. */
.rb-uitklapper .is-verstuurd { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .rb-uitklapper__inhoud { transform: none; }
}

/* --- de velden --- */
.rb-formulier .forminator-ui { font-family: inherit; color: var(--rb-ink); margin: 0; }
.rb-formulier .forminator-ui:not(form) { display: none; }   /* lege voorloper van Forminator */
.rb-formulier .forminator-row { display: flex; flex-wrap: wrap; gap: 22px 20px; margin: 0 0 22px; }
.rb-formulier .forminator-col { flex: 1 1 220px; min-width: 0; }
/* Verborgen velden, en velden met een voorwaarde die (nog) niet geldt. */
.rb-formulier .forminator-hidden { display: none; }
.rb-formulier .forminator-field { display: flex; flex-direction: column; }
.rb-formulier .forminator-label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 500; }
.rb-formulier .forminator-required { display: none; }
.rb-formulier .forminator-input,
.rb-formulier .forminator-textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--rb-muted); border-radius: var(--rb-radius);
  background: var(--rb-cream); color: var(--rb-ink);
  font: inherit; font-size: 16px; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.rb-formulier .forminator-textarea { min-height: 96px; resize: vertical; }
.rb-formulier .forminator-input:focus,
.rb-formulier .forminator-textarea:focus { outline: 0; border-color: var(--rb-navy); box-shadow: 0 0 0 3px rgba(255, 87, 34, .35); }
/* Forminator zet de uitleg boven het veld; hier staat hij eronder, bij het veld. */
.rb-formulier .forminator-field > div:has(> .forminator-description) { order: 3; }
.rb-formulier .forminator-description {
  display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--rb-muted);
}
.rb-formulier .forminator-description:empty { display: none; }
.rb-formulier .forminator-checkbox {
  display: inline-flex; gap: 10px; align-items: baseline; margin: 0 0 8px; font-size: 16px; cursor: pointer;
}
.rb-formulier .forminator-checkbox input { accent-color: var(--rb-orange); width: 18px; height: 18px; margin: 0; flex: none; position: relative; top: 3px; }
.rb-formulier .forminator-checkbox-box { display: none; }
/* Keuzerondjes (de quickscan): de vraag groot, de antwoorden als vakken onder
   elkaar die je overal aantikt. Het gekozen vak krijgt een oranje rand. */
.rb-formulier [role="radiogroup"] > .forminator-label {
  display: block; margin: 0 0 18px; font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.3;
}
.rb-formulier .forminator-radio {
  display: flex; gap: 12px; align-items: center; margin: 0 0 10px; padding: 14px 18px;
  border: 1.5px solid var(--rb-line); border-radius: var(--rb-radius); background: var(--rb-cream);
  font-size: 16px; cursor: pointer; transition: border-color .15s;
}
.rb-formulier .forminator-radio:hover { border-color: var(--rb-navy); }
.rb-formulier .forminator-radio:has(input:checked) { border-color: var(--rb-orange); }
.rb-formulier .forminator-radio:has(input:focus-visible) { outline: 2px solid var(--rb-navy); outline-offset: 2px; }
.rb-formulier .forminator-radio input { accent-color: var(--rb-orange); width: 18px; height: 18px; margin: 0; flex: none; }
.rb-formulier .forminator-radio-bullet { display: none; }
.rb-formulier .forminator-has_error .forminator-input,
.rb-formulier .forminator-has_error .forminator-textarea { border-color: var(--rb-orange); }
.rb-formulier .forminator-error-message {
  display: block; order: 4; margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--rb-orange);
  font-size: 14px; font-weight: 500; color: var(--rb-ink);
}
.rb-formulier .forminator-error-message:empty { display: none; }
/* Uploaden. Met de stijl `none` tekent Forminator een kaal bestandsveld, zonder
   eigen knop. Het veld blijft dus zichtbaar; de kiesknop krijgt de omlijnde
   knopstijl van het thema, de bestandsnaam staat ernaast. */
.rb-formulier .forminator-file-upload { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rb-formulier .forminator-file-upload input[type="file"] {
  max-width: 100%; font: inherit; font-size: 15px; color: var(--rb-muted); cursor: pointer;
}
.rb-formulier .forminator-file-upload input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 12px 20px;
  border: 1.5px solid var(--rb-navy); border-radius: var(--rb-radius); background: transparent; color: var(--rb-navy);
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background .2s, color .2s;
}
.rb-formulier .forminator-file-upload input[type="file"]:hover::file-selector-button { background: var(--rb-navy); color: var(--rb-cream); }
.rb-formulier .forminator-file-upload input[type="file"]:focus-visible { outline: 2px solid var(--rb-navy); outline-offset: 3px; }
.rb-formulier .forminator-upload--remove {
  padding: 0; border: 0; background: none; color: var(--rb-ink);
  font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer;
}
.rb-formulier .forminator-has_error input[type="file"]::file-selector-button { border-color: var(--rb-orange); }
.rb-formulier .forminator-row-last { margin: 30px 0 0; }
.rb-formulier .forminator-button-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border: 0; border-radius: var(--rb-radius);
  background: var(--rb-orange); color: var(--rb-cream);
  font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  transition: background .2s, color .2s;
}
.rb-formulier .forminator-button-submit::after { content: "\2192"; }
/* Formulieren in stappen (de quickscan): "volgende" zoals de verstuurknop,
   "vorige" omlijnd, en een dunne voortgangsbalk. Forminator zet de knoppen
   rechts; hier staan ze links, vorige eerst, onder het laatste veld. */
.rb-formulier .forminator-pagination-footer { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start !important; margin-top: 30px; }
.rb-formulier .forminator-button-next {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border: 0; background: var(--rb-orange); color: var(--rb-cream);
  font: inherit; font-size: 16px; font-weight: 500; text-transform: lowercase; cursor: pointer; transition: background .2s;
}
.rb-formulier .forminator-button-next::after { content: "\2192"; }
.rb-formulier .forminator-button-next:hover { background: var(--rb-navy); }
.rb-formulier .forminator-button-back {
  padding: 14.5px 26px; border: 1.5px solid var(--rb-navy); background: none; color: var(--rb-navy);
  font: inherit; font-size: 16px; font-weight: 500; text-transform: lowercase; cursor: pointer;
}
.rb-formulier .forminator-button-back:hover { background: var(--rb-navy); color: var(--rb-cream); }
.rb-formulier :is(.forminator-button-next, .forminator-button-back):focus-visible { outline: 2px solid var(--rb-navy); outline-offset: 3px; }
.rb-formulier .forminator-pagination-progress { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; }
.rb-formulier .forminator-progress-label { min-width: 3.5ch; font-size: 13px; font-weight: 700; color: var(--rb-orange); }
.rb-formulier .forminator-progress-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--rb-line); overflow: hidden; }
.rb-formulier .forminator-progress-bar > span { display: block; height: 100%; background: var(--rb-orange); transition: width .3s ease; }
.rb-formulier .forminator-field > .forminator-button { align-self: flex-start; }
.rb-formulier .forminator-button-submit:hover { background: var(--rb-navy); color: var(--rb-cream); }
.rb-formulier .forminator-button-submit:focus-visible { outline: 2px solid var(--rb-navy); outline-offset: 3px; }
/* Het meldingsvak bovenin: leeg is het weg; een fout zoals de foutregels. De
   bevestiging krijgt een eigen vlak met een vinkje, zodat hij niet leest als nog
   een regel uitleg: het is het antwoord op wat de bezoeker net deed. Na een paar
   seconden vervaagt hij langzaam (assets/js/formulier.js). */
.rb-formulier .forminator-response-message:not(.forminator-show) { display: none; }
.rb-formulier .forminator-response-message.forminator-error {
  margin: 0 0 22px; padding-left: 10px; border-left: 3px solid var(--rb-orange);
  font-size: 15px; font-weight: 500;
}
.rb-formulier .forminator-response-message.forminator-error ul { display: none; }   /* de lijst per veld is voor schermlezers; de velden tonen het zelf */
.rb-formulier .forminator-response-message.forminator-error p { margin: 0; }
.rb-formulier .forminator-response-message.forminator-success {
  position: relative; margin: 0;
  padding: 24px 28px 24px 76px; background: var(--rb-paper); border-left: 3px solid var(--rb-orange);
  font-size: 18px; line-height: 1.55; transition: opacity 1.6s ease;
}
.rb-formulier .forminator-response-message.forminator-success::before {
  content: ""; position: absolute; left: 24px; top: 26px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rb-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.rb-formulier .forminator-response-message.forminator-success p { margin: 0 0 10px; }
.rb-formulier .forminator-response-message.forminator-success p:last-child { margin-bottom: 0; }
.rb-formulier .forminator-response-message.is-weg { opacity: 0; }
.rb-formulier .forminator-response-message:focus { outline: 0; }
/* Verstuurd: de velden weg, alleen de bevestiging. */
.rb-formulier.is-verstuurd .forminator-row,
.rb-formulier.is-verstuurd .forminator-pagination-footer,
.rb-formulier.is-verstuurd .forminator-pagination-progress { display: none; }
/* Eén veld: veld en knop naast elkaar. Forminator zet display op het formulier
   zelf (inline), dus hier met !important. */
.rb-formulier form.rb-kort { display: flex !important; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.rb-formulier form.rb-kort > .forminator-response-message { flex: 1 1 100%; }
.rb-formulier form.rb-kort > .forminator-row { margin: 0; }
.rb-formulier form.rb-kort > .forminator-row:not(.forminator-row-last) { flex: 1 1 240px; }
.rb-formulier form.rb-kort .forminator-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rb-formulier form.rb-kort .forminator-button-submit { padding-block: 14px; }
.rb-formulier.is-verstuurd form.rb-kort { gap: 0; }
@media (max-width: 640px) {
  .rb-formulier .forminator-response-message.forminator-success { padding: 64px 20px 20px; }
  .rb-formulier .forminator-response-message.forminator-success::before { left: 20px; top: 20px; }
}
/* In de footer, op de donkere schil. */
.rb-footer .rb-formulier .forminator-row { margin-bottom: 16px; }
.rb-footer .rb-formulier form.rb-kort > .forminator-row { margin: 0; }
.rb-footer .rb-formulier .forminator-input {
  padding: 10px 12px; font-size: 15px; background: transparent; color: var(--rb-shell-fg); border-color: rgba(245, 245, 245, .6);
}
.rb-footer .rb-formulier .forminator-input::placeholder { color: rgba(245, 245, 245, .45); }
.rb-footer .rb-formulier .forminator-input:focus { border-color: var(--rb-shell-fg); }
.rb-footer .rb-formulier .forminator-label { font-size: 14px; }
.rb-footer .rb-formulier .forminator-description { color: rgba(245, 245, 245, .6); }
.rb-footer .rb-formulier .forminator-error-message,
.rb-footer .rb-formulier .forminator-response-message { color: var(--rb-shell-fg); }
.rb-footer .rb-formulier .forminator-button-submit { padding: 12px 20px; font-size: 15px; }
.rb-footer .rb-formulier .forminator-button-submit:hover { background: var(--rb-cream); color: var(--rb-navy); }
.rb-footer .rb-formulier .forminator-response-message.forminator-success {
  padding: 18px 18px 18px 60px; font-size: 15px; background: rgba(245, 245, 245, .08);
}
.rb-footer .rb-formulier .forminator-response-message.forminator-success::before { left: 16px; top: 18px; width: 28px; height: 28px; background-size: 16px; }

/* --- /contact/: formulier met de gegevens ernaast, daaronder de route --- */
.rb-contact__wij { font-size: 16px; margin: 18px 0 0; }
.rb-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.rb-contact__gegevens p:where(:not([class*="rb-"])) { font-size: 16px; line-height: 1.6; margin: 0 0 6px; }
.rb-contact__gegevens .rb-kicker { color: var(--rb-orange); margin: 28px 0 6px; }
.rb-contact__gegevens .rb-kicker:first-child { margin-top: 0; }
.rb-contact__telefoon { font-size: 28px; font-weight: 700; margin: 0; }
.rb-contact__route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: clamp(32px, 5vh, 56px); }
/* WordPress zet een bovenmarge op elk blok na het eerste (is-layout-flow); in een
   raster zakken de kolommen daardoor ongelijk. */
.rb-contact > *, .rb-contact__route > * { margin-block: 0; }
.rb-contact__route p:where(:not([class*="rb-"])) { font-size: 16px; line-height: 1.6; margin: 0; }
.rb-contact__route .rb-kicker { color: var(--rb-orange); margin: 0 0 6px; }
/* De plattegrond (blok rebrave/plattegrond): op cream white, zoals de pagina. Op
   een telefoon is hij klein; een tik opent hem op een eigen scherm. */
.rb-plattegrond { margin: 0; }
.rb-plattegrond__groot { display: block; }
.rb-plattegrond__svg { display: block; width: 100%; height: auto; }
.rb-plattegrond__tip { display: none; font-size: 14px; color: var(--rb-muted); margin-top: 8px; }
@media (max-width: 800px) {
  .rb-contact, .rb-contact__route { grid-template-columns: 1fr; }
  .rb-plattegrond__tip { display: block; }
}

/* --- het formulier onder een evenement, zonder knop --- */
.rb-evenement-aanmelden__titel {
  margin: 0 0 24px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.12;}


/* In de editor: een formulierblok zonder formulier zegt waarom. */
.rb-formulier-leeg { padding: 20px; border: 1.5px dashed var(--rb-muted); color: var(--rb-muted); font-size: 15px; }

/* =========================================================================
   18. KERNBLOKKEN — de homepage is bewerkbare WordPress-content
   De redacteur typt tekst; alle vormgeving komt hiervandaan.
   ========================================================================= */

/* WordPress' layout-laag zet marges tussen blokken; die vervangen wij per component. */
.rb-grid > *,
.rb-hairline > *,
.rb-sectionhead > * { margin-block: 0; }

.rb-shell > * + * { margin-block-start: 0; }
/* Uitgezonderd: de uitro sluit een sectie af en heeft juist lucht nodig. Deze
   regel moet er staan omdat de reset hierboven even zwaar weegt als `.rb-uitro`
   en later komt — de marge dáár werd dus stil weggegooid. */
.rb-shell > .rb-uitro { margin-block-start: var(--rb-uitro-top); }

/* alinea's die een componentrol hebben, dragen geen eigen marge */
.rb-link-wrap,
.rb-stripe__note { margin: 0; }
.rb-belief p:where(:not([class*="rb-"])):last-child,
.rb-cta p:where(:not([class*="rb-"])):last-child { margin-bottom: 0; }

.rb-link-wrap { align-self: baseline; }

/* koppen uit de editor dragen dezelfde componentklassen */
.rb-belief h3 { margin-top: 0; }

/* tekstmarkering komt uit de editor als <mark> */
mark.rb-mark { color: inherit; }

/* knoppen: kernblok core/button met een Rebrave-blokstijl */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.wp-block-button > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}

.is-style-rebrave-solid   > .wp-block-button__link { background: var(--rb-orange); color: var(--rb-cream); font-size: 16px; font-weight: 500; padding: 16px 30px; }
.is-style-rebrave-outline > .wp-block-button__link { border: 1px solid rgba(245, 245, 245, .45); color: var(--rb-shell-fg); font-size: 16px; font-weight: 500; padding: 16px 30px; }
/* In de hero een vlak in navy: de murmuratie loopt achter de knoppen langs, en
   door een doorzichtige knop liep hij dwars door de tekst. Waar geen zwerm
   achter staat, ziet hij er net zo uit. Vóór de hover hieronder, zodat die met
   dezelfde specificiteit wint. */
.rb-hero .is-style-rebrave-outline > .wp-block-button__link { background: var(--rb-navy); }
.is-style-rebrave-ghost   > .wp-block-button__link { border: 1px solid rgba(245, 245, 245, .35); color: var(--rb-shell-fg); font-size: 15px; font-weight: 500; padding: 15px 26px; }
.is-style-rebrave-dark    > .wp-block-button__link { border: 1.5px solid var(--rb-teal-fg); color: var(--rb-teal-fg); font-size: 16px; font-weight: 500; padding: 14px 26px; white-space: nowrap; }
.is-style-rebrave-label   > .wp-block-button__link { background: var(--rb-cream); color: var(--rb-orange); font-size: 16px; font-weight: 500; padding: 16px 28px; white-space: nowrap; }

/* Hover, voor élke knop in het thema — pillen, blokknoppen, de knoppen in de
   schil. De knop wordt vol in het sterkste paar dat het palet heeft: navy en
   cloud white, 10,9:1. Op een licht vlak wordt hij navy, op een donker of
   gekleurd vlak cloud white. Eén idee, twee richtingen.

   Dekking alleen (82%) was hiervoor te stil: op een oranje pil zie je een paar
   procent grijs erbij en verder niets, en dan weet je niet of je ergens overheen
   staat. Een kleurwissel is onmiskenbaar en houdt de tekst leesbaar — bij een
   doffere knop zakt het contrast juist. */
.rb-btn:hover,
.wp-block-button > .wp-block-button__link:hover {
  background: var(--rb-navy);
  color: var(--rb-cream);
  border-color: var(--rb-navy);
  opacity: 1;
}
/* De banden waar de achtergrond zelf donker of gekleurd is: daar zou navy juist
   wegvallen, dus gaat de knop de andere kant op. */
:is(.rb-hero, .rb-cta, .rb-moed, .rb-menu, .rb-footer)
  :is(.rb-btn, .wp-block-button__link):hover {
  background: var(--rb-cream);
  color: var(--rb-navy);
  border-color: var(--rb-cream);
}

.rb-hero__actions { margin-top: clamp(28px, 5vh, 48px); animation: fadeUp .7s both .3s; }
.rb-moed__actions { margin-top: 30px; }

/* de editor toont dezelfde secties; alleen de buitenkant verschilt */
.editor-styles-wrapper .rb-hero { min-height: 0; }

.rb-flock--blok { position: relative; min-height: var(--rb-flock-hoogte, 60vh); }

/* In de editor draait de generator niet. Toon dan een hint in plaats van een
   leeg vak, zodat de redacteur ziet dat er iets staat. */
.editor-styles-wrapper .rb-flock--blok {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(115deg,
    transparent 0 7px, rgba(48, 56, 65, .07) 7px 8px);
  outline: 1px dashed var(--rb-line);
  outline-offset: -1px;
}
.editor-styles-wrapper .rb-flock--blok::after {
  content: "murmuratie — draait op de site";
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-muted);
}