/* Menubalk en voettekst (staan als sjabloon in tools/build_shell.py; niet met de hand in de pagina's aanpassen).
   Beide hebben een eigen achtergrondkleur over de volle breedte; de inhoud blijft binnen 980px.
   De kleur pas je hieronder aan met --bar-bg. */
:root{
  --bar-bg:#1b1c1a;
  --bar-ink:#f5f5f3;
  --bar-ink-2:#c9c9c3;
  --bar-muted:#93948e;
  --bar-border:rgba(255,255,255,.14);
  --bar-hover:rgba(255,255,255,.10);
  --bar-active:rgba(255,255,255,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bar-bg:#070707; }
}
:root[data-theme="dark"]{ --bar-bg:#070707; }

/* de balken lopen tot de rand van het scherm, dus geen standaardmarge van de browser */
body{ margin:0; }

/* ---------------------------------------------------------------- menubalk */
.site-header{ background:var(--bar-bg); border-bottom:1px solid var(--bar-border); }
.site-header-inner{ max-width:980px; margin:0 auto; padding:10px 20px; }
.site-header .navbar{ margin:0; }
.site-header .nav-link{ color:var(--bar-ink-2); }
.site-header .nav-link:not(.is-soon):not(.active):hover{ background:var(--bar-hover); color:var(--bar-ink); }
.site-header .nav-link.active{ background:var(--bar-active); color:var(--bar-ink); }
.site-header .nav-link.is-soon{ color:var(--bar-muted); }
.site-header .nav-link .soon-tag{ background:var(--bar-hover); color:var(--bar-muted); }
.site-header .theme-toggle{ background:transparent; border-color:var(--bar-border); color:var(--bar-ink); }
.site-header .theme-toggle:hover{ background:var(--bar-hover); }
.site-header .nav-link:focus-visible,
.site-header .theme-toggle:focus-visible{ outline:2px solid var(--bar-ink); outline-offset:2px; }

/* ---------------------------------------------------------------- voettekst */
footer.site-footer{
  display:block;
  margin:0;
  padding:0;
  background:var(--bar-bg);
  color:var(--bar-muted);
  border-top:1px solid var(--bar-border);
  font-size:13px;
  line-height:1.6;
}
.site-footer-inner{ max-width:980px; margin:0 auto; padding:38px 20px 24px; display:flex; flex-direction:column; gap:26px; }
.site-footer a{ color:var(--bar-ink-2); text-decoration:none; }
.site-footer a:hover{ color:var(--bar-ink); text-decoration:underline; text-underline-offset:3px; }
.site-footer a:focus-visible{ outline:2px solid var(--bar-ink); outline-offset:2px; border-radius:3px; }

.footer-cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:28px 32px; }
.footer-col h2{
  margin:0 0 12px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--bar-muted);
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer-brand .fb-name{ margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-weight:600; font-size:19px; line-height:1.2; color:var(--bar-ink); }
.footer-brand p{ margin:0; max-width:34ch; }

.footer-notes{ display:flex; flex-direction:column; gap:6px; padding-top:22px; border-top:1px solid var(--bar-border); font-size:12px; }
.footer-notes > div:empty{ display:none; }

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 28px;
  padding-top:22px;
  padding-right:60px; /* ruimte voor de knop "naar boven", die rechtsonder over de pagina zweeft */
  border-top:1px solid var(--bar-border);
  font-size:12px;
}

@media (max-width:760px){
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-col:last-child{ grid-column:1 / -1; } /* "Over de site" heeft lange links: de volle breedte */
  .site-footer-inner{ padding-top:30px; }
}