/*
 * "Klare taal" jargon decoder skin.
 * Reads the warm-stone tokens from main.css (--clay, --ink, --line, --fd,
 * --dark-text, --dark-accent). Nothing here renders until the visitor turns the
 * mode on: the only always-present element is the nav toggle.
 */

/* Screen-reader-only live region. */
.rd-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Nav toggle ------------------------------------------------------- *
 * Lives next to the NL/EN switcher and inherits the same dark->light nav
 * colour flip (mirrors the .rd-lang rules in redesign.css). */
.rd-decode-toggle{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fd);font-size:13.5px;font-weight:500;line-height:1;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius:999px;
  padding:7px 13px;
  cursor:pointer;
  opacity:.82;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .25s ease,color .35s ease,background .25s ease,border-color .25s ease;
}
.rd-decode-toggle:hover{opacity:1}
.rd-decode-ico{flex:none;display:block}
.rd-decode-toggle[aria-pressed="true"]{
  background:var(--clay);border-color:var(--clay);color:#f3efe7;opacity:1;
}
.rd-decode-toggle[aria-pressed="true"]:hover{filter:brightness(.96)}

/* Dark hero nav (light text) then back to ink once scrolled, same as .rd-lang. */
body.rd-darknav .rd-decode-toggle{color:rgba(247,242,234,.85)}
body.rd-darknav .rd-decode-toggle[aria-pressed="true"]{color:#f3efe7}
body.rd-darknav.rd-scrolled .rd-decode-toggle{color:var(--ink-soft)}

/* Tight laptop widths: keep the icon, drop the word to avoid crowding the pill. */
@media (min-width:881px) and (max-width:1040px){
  .rd-decode-label{display:none}
  .rd-decode-toggle{padding:7px 9px}
}

/* ---- Decoded term ----------------------------------------------------- *
 * A quiet dotted underline in clay that leans toward the surrounding text
 * colour, so it stays legible on both warm-stone and dark sections. */
.rd-term{
  font:inherit;color:inherit;background:none;border:0;padding:0 1px;margin:0;
  cursor:help;
  -webkit-tap-highlight-color:transparent;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-color:color-mix(in srgb, var(--clay) 72%, currentColor);
  text-decoration-thickness:1.6px;
  text-underline-offset:3px;
  border-radius:3px;
  transition:background .15s ease,text-decoration-color .15s ease;
}
.rd-term:hover,.rd-term[aria-expanded="true"]{
  text-decoration-color:var(--clay);
  background:color-mix(in srgb, var(--clay) 14%, transparent);
}
.rd-term:focus-visible{outline:2px solid var(--clay);outline-offset:2px}

/* ---- Marquee becomes decodable in decode mode ------------------------- *
 * The homepage integration marquee scrolls, so its tool names can't be tapped.
 * In decode mode, freeze it into the same calm static wrapped grid it already
 * uses on mobile, so every name can be read and decoded. */
.rd-decode .rd-marq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:14px 40px}
.rd-decode .rd-marq-track .rd-wm{margin-right:0}
.rd-decode .rd-marq-track .rd-wm[aria-hidden]{display:none}
.rd-decode .rd-marq-mask{-webkit-mask:none;mask:none}

/* ---- Popover ---------------------------------------------------------- *
 * Dark warm card (matches the contact section), so the explanation reads as a
 * deliberate aside rather than a browser tooltip. */
.rd-pop{
  position:absolute;z-index:80;
  box-sizing:border-box;width:max-content;max-width:300px;
  padding:13px 34px 14px 16px;
  background:var(--ink);color:var(--dark-text);
  border:1px solid rgba(247,242,234,.22);
  border-radius:14px;
  box-shadow:0 18px 42px -16px rgba(20,16,12,.7),0 0 0 1px rgba(20,16,12,.5);
  font-family:var(--fd);font-size:14px;line-height:1.5;
  opacity:0;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease;
  pointer-events:none;
}
.rd-pop.is-open{opacity:1;transform:none;pointer-events:auto}
.rd-pop[hidden]{display:none}

/* Diamond arrow, inherits the card fill + border, nudged to the term centre. */
.rd-pop::before{
  content:"";position:absolute;left:var(--rd-arrow,50%);width:12px;height:12px;
  background:var(--ink);
  border:1px solid rgba(247,242,234,.22);
  transform:translateX(-50%) rotate(45deg);
}
.rd-pop[data-place="bottom"]::before{top:-6px;border-right:0;border-bottom:0}
.rd-pop[data-place="top"]::before{bottom:-6px;border-left:0;border-top:0}

.rd-pop-eyebrow{display:block;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--dark-accent);margin:0 0 5px}
.rd-pop-def{margin:0;color:var(--dark-text)}
.rd-pop-close{
  position:absolute;top:9px;right:9px;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;color:rgba(247,242,234,.55);cursor:pointer;border-radius:6px;
  transition:color .15s ease,background .15s ease;
}
.rd-pop-close:hover{color:var(--dark-text);background:rgba(247,242,234,.1)}

/* ---- First-run hint --------------------------------------------------- */
.rd-decode-hint{
  position:fixed;left:50%;bottom:26px;z-index:90;
  max-width:min(92vw,440px);
  padding:11px 20px;
  background:var(--ink);color:var(--dark-text);
  border:1px solid rgba(247,242,234,.16);border-radius:999px;
  box-shadow:0 16px 36px -16px rgba(20,16,12,.65);
  font-family:var(--fd);font-size:13.5px;line-height:1.4;text-align:center;
  opacity:0;transform:translate(-50%,8px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
.rd-decode-hint.is-in{opacity:1;transform:translate(-50%,0)}

/* ---- Mobile overlay --------------------------------------------------- *
 * Inside the full-page menu the toggle sits as its own row, cream on dark,
 * matching the overlay's .rd-lang / .rd-navcta treatment. */
@media (max-width:880px){
  .rd-navpanel .rd-decode-toggle{
    align-self:flex-start;margin-top:16px;
    font-size:1rem;padding:11px 18px;
    color:rgba(247,242,234,.85);
    border-color:color-mix(in srgb, #f3efe7 32%, transparent);
  }
  .rd-navpanel .rd-decode-label{display:inline}
  .rd-navpanel .rd-decode-toggle[aria-pressed="true"]{
    background:var(--dark-accent);border-color:var(--dark-accent);color:var(--ink);
  }
  .rd-pop{max-width:min(86vw,300px)}
}

@media (prefers-reduced-motion:reduce){
  .rd-decode-toggle,.rd-term,.rd-pop,.rd-decode-hint{transition:none}
  .rd-pop{transform:none}
}