/* De wegwijzer: zwevende knop + paneel met een scripted keuzemenu.
 *
 * ---------------------------------------------------------------------------
 * WAAROM DIT BESTAND ZIJN EIGEN TOKENS HEEFT (contrastmeting 2026-08-02)
 * ---------------------------------------------------------------------------
 * De eerste versie gebruikte de Bootstrap-utilities `bg-body-secondary` en
 * `bg-label-primary`. Dat leverde een botbubbel van 1.81:1 op, ver onder de
 * 4.5:1 die WCAG 1.4.3 vraagt. De oorzaak zit in de laagopbouw van dit thema:
 *
 * 1. De site draait standaard op `data-bs-theme="dark"`; de "warme klei"-huid
 *    is een donkere terracotta schil (`--bs-body-bg: #9C462F`).
 * 2. Binnen die schil maakt rl-theme.css elk papieren oppervlak weer LICHT:
 *    de regel die begint met `html[data-bs-theme="dark"] body.rl-front .card`
 *    zet `--bs-body-color` terug op #5C4F43 (donkerbruin op wit papier).
 * 3. `bg-body-secondary` leest echter `--bs-secondary-bg`, en die komt uit het
 *    `[data-bs-theme=dark]`-blok van Vuexy's core.css: #76778E, een grijspaars.
 *
 * Resultaat: lichte-oppervlaktetekst (#5C4F43) op een donkere-thema-achtergrond
 * (#76778E). Precies de doorlek die je vermoedt als je 1.81:1 meet. Hetzelfde
 * gold voor de bezoekersbubbel via `bg-label-primary`.
 *
 * De les: binnen dit paneel is geen enkele Bootstrap-oppervlakteutility veilig,
 * want achtergrond en tekstkleur komen uit twee verschillende themalagen. Elke
 * bubbel, knop en melding hieronder zet daarom ALTIJD achtergrond en voorgrond
 * samen, uit één gedocumenteerd paar.
 *
 * Waarom de waarden hier lokaal staan en niet als `var(--rl-sand-bg)`: die
 * tokens bestaan alleen binnen `body.rl-front` (en binnen de papierregel).
 * De wegwijzer draait ook op de 404, en die pagina heeft die klasse niet. Een
 * `var()` naar een niet-gedefinieerde token maakt de hele declaratie ongeldig
 * en dan valt de kleur stil terug op iets onvoorspelbaars. Er komt hieronder
 * dus GEEN nieuwe kleur bij: elke waarde is een bestaande paletkleur, met de
 * rl-theme.css-token erachter waar hij vandaan komt.
 *
 * De gemeten verhoudingen staan per regel als `rl-contrast:`-annotatie.
 * `tests_wegwijzer.py` leest dit bestand, rekent ze opnieuw uit en faalt als
 * een latere themawijziging onder 4.5:1 duikt.
 */

.rl-wegwijzer {
  /* rl-contrast: --ww-ink op --ww-paper >= 4.5 */
  --ww-paper: #FFFFFF;      /* --rl-paper */
  --ww-ink: #5C4F43;        /* --rl-body, lichte papierwaarde */
  /* rl-contrast: --ww-ink-sterk op --ww-paper >= 4.5 */
  --ww-ink-sterk: #2E241D;  /* --rl-heading, lichte papierwaarde */
  --ww-rand: #E6D8C6;       /* --rl-border, lichte papierwaarde */
  /* rl-contrast: --ww-ink op --ww-bot-bg >= 4.5 */
  --ww-bot-bg: #F0E4D3;     /* --rl-sand-bg */
  /* rl-contrast: --ww-ink-sterk op --ww-jij-bg >= 4.5 */
  --ww-jij-bg: #F4DDD4;     /* --rl-blush-bg */
  /* rl-contrast: --ww-actie op --ww-paper >= 4.5 */
  /* rl-contrast: --ww-actie-op op --ww-actie >= 4.5 */
  /* rl-contrast: --ww-actie op --ww-bot-bg >= 4.5 */
  --ww-actie: #9C4221;      /* --rl-accent */
  --ww-actie-op: #FFF8F2;   /* --rl-on-primary, lichte papierwaarde */

  /* De zwevende knop staat NIET op papier maar op de paginaondergrond, dus die
   * draait wel mee met het thema. */
  /* rl-contrast: --ww-knop-fg op --ww-knop-bg >= 4.5 */
  --ww-knop-bg: #9C4221;    /* --rl-accent */
  --ww-knop-fg: #FFF8F2;    /* --rl-on-primary */

  /* Onder de cookiebanner (z-index 10999). De banner mag er nooit achter
   * verdwijnen; zolang hij zichtbaar is verbergt het script de knop sowieso. */
  position: fixed;
  z-index: 10998;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: max(1rem, env(safe-area-inset-right));
}

[data-bs-theme="dark"] .rl-wegwijzer {
  /* Het paneel blijft papier (rl-theme.css doet dat in het donkere thema ook
   * voor elke .card), dus alleen de zwevende knop keert om. De accentkleur
   * haalt tegen de terracotta pagina-achtergrond maar 1.11:1 en zou daar
   * onzichtbaar zijn. */
  /* rl-contrast: --ww-knop-fg op --ww-knop-bg >= 4.5 */
  --ww-knop-bg: #F5C98A;    /* --rl-primary, donkere themawaarde */
  --ww-knop-fg: #2E241D;    /* --rl-heading, lichte papierwaarde */
}

/* --- de zwevende knop --------------------------------------------------- */

.rl-wegwijzer-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Ruim boven de 44 bij 44 CSS-pixels die WCAG 2.5.5 vraagt. */
  min-block-size: 2.75rem;
  padding-inline: 1.125rem;
  box-shadow: var(--rl-shadow-float, 0 16px 40px rgba(0, 0, 0, .16));
  /* Voorgrond en achtergrond samen, met !important omdat .btn-primary zijn
   * eigen --bs-btn-*-tokens meebrengt die per thema van kleur wisselen. Juist
   * die hovervariant (#93402A op #EAB973) haalde 3.89:1. */
  background-color: var(--ww-knop-bg) !important;
  border-color: var(--ww-knop-bg) !important;
  color: var(--ww-knop-fg) !important;
}

.rl-wegwijzer-knop:hover,
.rl-wegwijzer-knop:focus,
.rl-wegwijzer-knop:active {
  /* Geen aparte hoverkleur: die was precies het probleem. De knop reageert met
   * schaduw en focusring, niet met een tweede, ongemeten kleurenpaar. */
  background-color: var(--ww-knop-bg) !important;
  border-color: var(--ww-knop-bg) !important;
  color: var(--ww-knop-fg) !important;
}

/* De knop staat over wisselende achtergronden, dus een dubbele focusring:
 * een binnenring in de paginakleur en een buitenring in de knopkleur.
 * outline: none staat hier nergens; de Vuexy-focusring blijft daarnaast staan. */
.rl-wegwijzer-knop:focus-visible {
  box-shadow:
    0 0 0 3px var(--bs-body-bg),
    0 0 0 6px var(--ww-knop-bg);
}

.rl-wegwijzer-knop .icon-base {
  font-size: 1.25rem;
}

/* Eenmalige, subtiele entree per tabblad. Wie het paneel al eens heeft
 * gesloten (sessionStorage-vlag) krijgt hem niet meer. */
.rl-wegwijzer-knop.rl-wegwijzer-entree {
  animation: rl-wegwijzer-in 240ms ease-out;
}

@keyframes rl-wegwijzer-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

/* --- het paneel --------------------------------------------------------- */

.rl-wegwijzer .rl-wegwijzer-paneel {
  position: fixed;
  inset-block-end: 4.5rem;
  inset-inline-end: 1rem;
  inline-size: 22.5rem;
  max-inline-size: calc(100vw - 2rem);
  max-block-size: min(35rem, calc(100vh - 6rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Het paneel is altijd papier, ook op de 404 waar body.rl-front ontbreekt.
   * Zo staat elke bubbel en knop hieronder op een bekende ondergrond. */
  background-color: var(--ww-paper);
  color: var(--ww-ink);
  border: 1px solid var(--ww-rand);
  box-shadow: var(--rl-shadow-float, 0 16px 40px rgba(0, 0, 0, .16));
  animation: rl-wegwijzer-in 160ms ease-out;
}

.rl-wegwijzer .rl-wegwijzer-paneel[hidden] {
  display: none;
}

.rl-wegwijzer .rl-wegwijzer-kop,
.rl-wegwijzer .rl-wegwijzer-voet {
  background-color: var(--ww-paper);
  border-color: var(--ww-rand);
  color: var(--ww-ink);
}

.rl-wegwijzer-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.rl-wegwijzer .rl-wegwijzer-titel {
  color: var(--ww-ink-sterk);
}

.rl-wegwijzer-titel:focus-visible {
  outline: 2px solid var(--ww-actie);
  outline-offset: 2px;
}

.rl-wegwijzer .rl-wegwijzer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--ww-paper);
}

.rl-wegwijzer-voet {
  flex: 0 0 auto;
}

/* --- het transcript ----------------------------------------------------- */

.rl-wegwijzer-log > li {
  /* Geen vaste hoogtes: de tekst moet blijven werken bij text-spacing-
   * overrides en bij 200 procent zoom. */
  margin-block-end: 0.75rem;
}

.rl-wegwijzer-log > li:last-child {
  margin-block-end: 0;
}

.rl-wegwijzer-bubbel {
  display: inline-block;
  max-inline-size: 90%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--rl-radius-tile, 1rem);
}

/* Altijd achtergrond en voorgrond samen; zie de kop van dit bestand. */
.rl-wegwijzer .rl-wegwijzer-bubbel-bot {
  background-color: var(--ww-bot-bg);
  color: var(--ww-ink);
}

.rl-wegwijzer .rl-wegwijzer-bubbel-jij {
  background-color: var(--ww-jij-bg);
  color: var(--ww-ink-sterk);
}

.rl-wegwijzer-bubbel:focus-visible {
  outline: 2px solid var(--ww-actie);
  outline-offset: 2px;
}

.rl-wegwijzer-rij-keuze {
  text-align: end;
}

/* De permanente voetregel scrolt nooit weg; hij staat in de card-footer. */
.rl-wegwijzer-voetregel {
  color: var(--ww-ink);
  font-size: 0.8125rem;
  margin-block-start: 0.5rem;
  margin-block-end: 0;
}

/* --- de keuzeknoppen ---------------------------------------------------- */

.rl-wegwijzer-keuze {
  display: block;
  inline-size: 100%;
  text-align: start;
  margin-block-end: 0.5rem;
  white-space: normal;
  /* btn-outline-primary tekende de tekst in --bs-primary (#C4593A): 4.34:1 op
   * wit, net te licht. De accentkleur haalt ruim boven de norm. */
  background-color: var(--ww-paper) !important;
  border-color: var(--ww-actie) !important;
  color: var(--ww-actie) !important;
}

.rl-wegwijzer-keuze:hover,
.rl-wegwijzer-keuze:focus,
.rl-wegwijzer-keuze:active {
  background-color: var(--ww-actie) !important;
  border-color: var(--ww-actie) !important;
  color: var(--ww-actie-op) !important;
}

.rl-wegwijzer-keuze:last-child {
  margin-block-end: 0;
}

/* --- formulier en kleine tekst ------------------------------------------- */

/* .form-text tekent standaard in --bs-secondary-color (#8A7861): 4.25:1 op wit
 * en dus onvoldoende voor tekst onder 18pt. */
.rl-wegwijzer .form-text,
.rl-wegwijzer-paneel .form-text,
.rl-wegwijzer-paneel label,
.rl-wegwijzer-paneel p {
  color: var(--ww-ink);
}

.rl-wegwijzer-paneel .form-control {
  background-color: var(--ww-paper);
  color: var(--ww-ink);
  border-color: var(--ww-rand);
}

.rl-wegwijzer-paneel .btn-primary {
  background-color: var(--ww-actie) !important;
  border-color: var(--ww-actie) !important;
  color: var(--ww-actie-op) !important;
}

/* Het lokveld (honeypot) staat buiten beeld maar blijft in de DOM staan, net
 * als op de bedrijvenpagina. Geen display:none, want dat vullen sommige bots
 * juist niet in. */
.rl-wegwijzer-honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* --- mobiel: volledig scherm -------------------------------------------- */

@media (max-width: 575.98px) {
  .rl-wegwijzer-paneel {
    position: fixed;
    inset: 0;
    inline-size: auto;
    max-inline-size: none;
    max-block-size: none;
    border-radius: 0;
    padding-block-start: env(safe-area-inset-top);
    padding-block-end: env(safe-area-inset-bottom);
  }
  /* Kop vastgeplakt bovenaan, keuzeknoppen onderaan binnen duimbereik, het
   * transcript scrollt ertussen. Zo blijft de sluitknop altijd bereikbaar en
   * scrolt de permanente voetregel nooit weg. */
  .rl-wegwijzer-kop,
  .rl-wegwijzer-voet {
    position: sticky;
    z-index: 1;
  }
  .rl-wegwijzer-kop { inset-block-start: 0; }
  .rl-wegwijzer-voet { inset-block-end: 0; }
}

/* --- bewegingsvoorkeur --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rl-wegwijzer-knop.rl-wegwijzer-entree,
  .rl-wegwijzer-paneel {
    animation: none;
  }
}