/* ============================================================
   RAYDO · site-chrome.css
   The ONE header + footer, shared by every page. Self-contained:
   defines its own fallback token subset so it renders correctly
   even on a page (legal, kennis, 404) that never loads the full
   RDS token file — and on a page that DOES (the /hoe-het-werkt/
   cluster), these declarations simply agree with the page's own,
   later ones, so nothing visibly changes.

   The header no longer floats transparent over a hero image: some
   pages (privacy, kennis, 404) have no dark hero behind it, so one
   readable, always-solid header is the standard, everywhere. A
   thin shadow appears once the page scrolls, as a scroll cue only.
   ============================================================ */
:root{
  --rds-sage-500:#2f8f81;
  --rds-sage-700:#1f6b60;
  --rds-sage-900:#123e37;
  --rds-ink:#232a27;
  --rds-ink-soft:#535d58;
  --rds-ink-dim:#6f6a5e;
  --rds-bg-tint:#f7faf9;
  --rds-surface-raised:#ffffff;
  --rds-rule:#e6ebe8;
  --rds-rule-soft:#eef2f0;
  --rds-font-display:"Raydo Kin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --rds-font-body:"Raydo Kin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --rds-weight-medium:500;
  --rds-weight-semi:600;
  --rds-ease-settle:cubic-bezier(.22,1,.36,1);
  --rds-z-sticky:50;
  --rds-z-overlay:60;
  --rds-radius-xs:5px;
  --rds-radius-sm:12px;
  --rds-radius-md:16px;
  --rds-radius-pill:999px;
  --rds-elev-3:0 18px 44px -20px rgba(18,62,55,.28);
  --rds-action-ink:var(--rds-sage-700);
  --rds-text-body:.95rem;
  --rds-text-sm:.92rem;
  --rds-text-micro:.72rem;
  --rds-text-caption:.86rem;
  --rds-tracking-label:.12em;
  --rds-border-hair:1px;
  --rds-focus-outline:2px solid var(--rds-sage-500);
  --rds-focus-offset:3px;
  --rds-motion-base:220ms;
  --rds-motion-travel:6px;
}

/* ---------- header ---------- */
.site-top{
  position:fixed;top:0;left:0;right:0;z-index:var(--rds-z-sticky);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rds-rule);
  transition:box-shadow 450ms var(--rds-ease-settle);
}
.site-top.scrolled{box-shadow:0 1px 0 var(--rds-rule),var(--rds-elev-3)}
.top-in{
  max-width:1200px;margin:0 auto;padding:16px clamp(20px,4vw,48px);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);
}
.site-top .lockup{display:inline-flex;align-items:center;gap:12px;color:var(--rds-ink);text-decoration:none}
.site-top .lockup .word{font-family:var(--rds-font-display);font-weight:var(--rds-weight-semi);font-size:1.2rem;letter-spacing:-.02em}
.site-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);margin-left:auto}
.site-nav a{font-size:var(--rds-text-body);font-weight:var(--rds-weight-medium);color:var(--rds-ink-soft);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--rds-sage-700)}
.site-nav a[aria-current="page"]{color:var(--rds-ink);border-bottom-color:var(--rds-sage-500);font-weight:var(--rds-weight-semi)}

/* "Hoe het werkt" dropdown — click to open, never hover */
.nav-drop{position:relative;display:flex}
.nd-btn{display:flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;
  font-family:var(--rds-font-body);font-size:var(--rds-text-body);font-weight:var(--rds-weight-medium);
  color:var(--rds-ink-soft);padding:4px 0;border-bottom:2px solid transparent}
.nd-btn:hover{color:var(--rds-sage-700)}
.nd-btn:focus-visible{outline:var(--rds-focus-outline);outline-offset:var(--rds-focus-offset)}
.nav-drop.is-open .nd-btn{color:var(--rds-sage-700)}
.nd-caret{width:8px;height:8px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform var(--rds-motion-base) var(--rds-ease-settle)}
.nav-drop.is-open .nd-caret{transform:rotate(225deg) translate(-2px,-2px)}
.nd-panel{position:absolute;top:calc(100% + 14px);left:0;min-width:220px;z-index:var(--rds-z-overlay);
  margin:0;padding:8px;display:grid;gap:2px;
  background:var(--rds-surface-raised);border:var(--rds-border-hair) solid var(--rds-rule);border-radius:var(--rds-radius-md);
  box-shadow:var(--rds-elev-3);
  opacity:0;transform:translateY(calc(var(--rds-motion-travel) * -1));pointer-events:none;
  transition:opacity var(--rds-motion-base) var(--rds-ease-settle),transform var(--rds-motion-base) var(--rds-ease-settle)}
.nav-drop.is-open .nd-panel{opacity:1;transform:none;pointer-events:auto}
.nd-panel a{display:block;padding:9px 12px;border-radius:var(--rds-radius-xs);
  font-size:var(--rds-text-body);font-weight:var(--rds-weight-medium);color:var(--rds-ink);border-bottom:0;text-decoration:none}
.nd-panel a:hover{background:var(--rds-bg-tint);color:var(--rds-sage-700)}
.nd-panel a[aria-current="page"]{color:var(--rds-action-ink);font-weight:var(--rds-weight-semi)}

.site-end{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.site-top .nav-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--rds-font-body);font-weight:var(--rds-weight-medium);font-size:.92rem;
  background:var(--rds-sage-700);color:#fff;border:none;cursor:pointer;text-decoration:none;
  border-radius:var(--rds-radius-pill);padding:10px 20px;white-space:nowrap;
  transition:background .25s
}
.site-top .nav-cta:hover{background:var(--rds-sage-900);text-decoration:none}

/* NL/EN switcher */
.langswitch{display:inline-flex;align-items:center;border:1px solid var(--rds-rule);border-radius:999px;overflow:hidden;line-height:1;flex:0 0 auto}
.langswitch a{padding:6px 11px;font-size:.8rem;font-weight:var(--rds-weight-semi);color:var(--rds-ink-soft);text-decoration:none}
.langswitch a:hover{background:var(--rds-bg-tint);color:var(--rds-sage-700)}
.langswitch a[aria-current="true"]{background:var(--rds-sage-700);color:#fff}

/* ---------- mobile menu — toggle stays last in .site-end, so it is
   always the top-right element on every page that uses this header ---------- */
.nav-toggle{display:none;width:42px;height:42px;flex:0 0 auto;border:0;background:transparent;
  cursor:pointer;padding:0;place-items:center;border-radius:var(--rds-radius-sm)}
.nav-toggle:focus-visible{outline:var(--rds-focus-outline);outline-offset:var(--rds-focus-offset)}
.nav-toggle i{display:block;position:relative;width:20px;height:2px;border-radius:2px;
  background:var(--rds-ink);transition:background 160ms linear}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:20px;height:2px;
  border-radius:2px;background:var(--rds-ink);transition:transform 260ms var(--rds-ease-settle)}
.nav-toggle i::before{top:-6px}
.nav-toggle i::after{top:6px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

.nav-scrim{position:absolute;top:100%;left:0;right:0;height:100vh;background:rgba(13,47,42,.34);
  opacity:0;pointer-events:none;transition:opacity 260ms var(--rds-ease-settle);z-index:1}
.nav-sheet{position:absolute;top:100%;left:0;right:0;z-index:2;
  background:var(--rds-surface-raised);border-bottom:1px solid var(--rds-rule);
  box-shadow:0 26px 48px -30px rgba(13,47,42,.42);
  display:grid;gap:2px;padding:14px clamp(20px,4vw,48px) 20px;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity 240ms var(--rds-ease-settle),transform 260ms var(--rds-ease-settle)}
.nav-sheet a{font-size:1rem;color:var(--rds-ink);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--rds-rule-soft)}
.nav-sheet a:hover{color:var(--rds-sage-700)}
.nav-sheet a[aria-current="page"]{font-weight:var(--rds-weight-semi)}
.nav-sheet a:last-of-type{border-bottom:0}
.nav-sheet .sheet-end{display:flex;align-items:center;gap:16px;margin-top:16px}
.nav-sheet .sheet-end .langswitch a{border-bottom:0}
.site-top.is-open .nav-scrim{opacity:1;pointer-events:auto}
.site-top.is-open .nav-sheet{opacity:1;transform:translateY(0);pointer-events:auto}

/* the house breakpoint: home and the /hoe-het-werkt/ cluster already
   agreed on 768px before this file existed — kept as canonical here. */
@media (max-width:768px){
  .nav-toggle{display:grid}
  .site-nav,.site-end>.langswitch{display:none}
}
@media (min-width:769px){
  .nav-scrim,.nav-sheet{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav-sheet,.nav-scrim,.nav-toggle i,.nav-toggle i::before,.nav-toggle i::after{transition-duration:1ms}
}

/* ---------- footer ---------- */
.site-foot{background:var(--rds-bg-tint);border-top:1px solid var(--rds-rule);padding:56px 0 44px}
.foot-in{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.foot-col{display:grid;gap:10px;align-content:start}
.foot-col .h{display:block;font-size:var(--rds-text-micro);letter-spacing:var(--rds-tracking-label);text-transform:uppercase;color:var(--rds-ink-dim);font-weight:var(--rds-weight-semi);margin-bottom:2px}
.foot-col a{font-size:var(--rds-text-sm);color:var(--rds-ink-soft);text-decoration:none}
.foot-col a:hover{color:var(--rds-ink)}
.foot-col--brand .lockup{display:inline-flex;align-items:center;color:var(--rds-ink);text-decoration:none}
.foot-col--brand .lockup .word{font-family:var(--rds-font-display);font-weight:var(--rds-weight-semi);font-size:1.05rem;letter-spacing:-.02em}
.foot-col--brand .fb{max-width:46ch;color:var(--rds-ink-soft);font-size:.92rem;margin-top:12px}
.foot-note{margin-top:28px;color:var(--rds-ink-dim);font-size:var(--rds-text-caption);max-width:74ch}
.foot-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot-rule{margin-top:16px;padding-top:20px;border-top:1px solid var(--rds-rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:var(--rds-text-caption);color:var(--rds-ink-dim)}