/* nubeslist.nl - stijlsysteem */

/* Het lettertype. Dit bestand wordt door scripts/maak-paginas.mjs geschreven
   en is leeg zolang de woff2-bestanden er niet zijn. */
@import url("/assets/lettertype.css");

/*
  De kleuren komen uit de vormgeving van de campagnelanding, zodat iemand die
  via een advertentie binnenkomt en doorklikt naar de site niet het gevoel
  krijgt dat hij bij een ander bedrijf is beland.

  Twee dingen zijn daarbij uit elkaar getrokken. Diepblauw is de kleur van
  tekst, koppen en het merk; groenblauw is de kleur van doen - knoppen, vinkjes
  en alles waar de bezoeker op klikt. Daardoor is op elke pagina in één
  oogopslag te zien waar de volgende stap zit, ook zonder de tekst te lezen.
*/
:root {
  --blauw-900: #0b1250;
  --blauw-800: #131c5a;
  --blauw-700: #1b2a6b;
  --blauw-600: #24347f;
  --blauw-500: #4fb3f6;
  --blauw-100: #eaf1fc;
  --blauw-50: #f3f7fd;

  /* De kleur van handelen. Alleen voor knoppen, vinkjes en wat er gebeurt. */
  --actie: #0e9486;
  --actie-donker: #0b7f73;
  --actie-zacht: #e4f5f2;

  --groen-600: #1f7a4d;
  --groen-100: #e9f6ee;
  --oranje-600: #b86a00;
  --oranje-100: #fff4e3;
  --rood-600: #b3261e;
  --rood-100: #fbe4e2;
  --paars-600: #5b3fa6;
  --paars-100: #ece5fb;
  --grijs-600: #6b769f;
  --grijs-100: #eef1f7;

  --tekst: #0b1250;
  --tekst-zacht: #56628f;
  --achtergrond: #ffffff;
  --vlak: #ffffff;
  --papier: #f3f7fd;
  --rand: #e3e9f5;
  --rand-sterk: #cfe0f2;

  --radius: 16px;
  --radius-klein: 12px;
  --schaduw: 0 1px 2px rgba(11, 18, 80, .04), 0 20px 50px rgba(11, 18, 80, .08);
  --schaduw-klein: 0 1px 2px rgba(11, 18, 80, .06);
  --breedte: 1120px;
  /* Figtree als het er is (public/assets/figtree-*.woff2, zie docs/livegang.md),
     anders het lettertype van het systeem. */
  --font: Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Geen donkere variant: dit merk is wit met blauw, op elk apparaat gelijk.
     Anders ziet iemand met een donkere telefoon precies het omgekeerde. */
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); font-weight: 800; }
h3 { font-size: 1.16rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--blauw-600); text-underline-offset: 3px; text-decoration-color: rgba(11, 18, 80, .35); }

.omhulsel { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------- navigatie -- */
.balk {
  position: sticky; top: 0; z-index: 30;
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}
/* Doorschijnend alleen waar de vervaging het ook echt doet; anders schemert
   de donkere banner erdoorheen zodra de pagina eronder doorschuift. */
@supports (backdrop-filter: blur(10px)) {
  .balk {
    background: color-mix(in srgb, var(--vlak) 94%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
  }
}
.balk__inhoud { display: flex; align-items: center; gap: 16px; height: 64px; }
/* Het woordmerk is tekst: het laadt niets, blijft scherp en kleurt mee met de
   pagina waar het in staat. Het puntje is het accent uit het logo. */
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.merk__woord {
  display: inline-flex; align-items: baseline; color: var(--tekst);
  font-weight: 800; font-size: 1.2rem; letter-spacing: -.025em; line-height: 1; white-space: nowrap;
}
.merk__punt {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blauw-500);
  margin-left: 3px; align-self: flex-start; margin-top: 2px; flex: none;
}
.merk__teken { width: 32px; height: 32px; flex: none; }
.balk nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.balk nav a {
  color: var(--tekst-zacht); text-decoration: none; font-size: .93rem; font-weight: 560;
  padding: 8px 12px; border-radius: 8px;
}
.balk nav a:hover { color: var(--tekst); background: var(--grijs-100); }
.balk nav a.knop--primair { color: #fff; }
.nav-kort { display: none; }
@media (max-width: 720px) {
  .nav-lang { display: none; }
  .nav-kort { display: inline; }
}

/* ------------------------------------------------------------- menuknop -- */
/* Op een telefoon paste de balk niet, en toen verdwenen er links. Nu klapt
   alles uit achter één knop; de oproep tot actie blijft wel staan. */
.menuknop { display: none; }

@media (max-width: 860px) {
  .balk--met-menu .balk__inhoud { flex-wrap: wrap; height: auto; padding-block: 10px; }

  .balk--met-menu .menuknop {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    margin-left: 8px; order: 3;
    width: 42px; height: 42px; padding: 0 10px; flex: none;
    background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: 10px;
    cursor: pointer;
  }
  .balk--met-menu .menuknop:hover { border-color: var(--blauw-500); }
  .menuknop__streep {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--tekst); transition: transform .18s, opacity .18s;
  }
  .balk--open .menuknop__streep:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .balk--open .menuknop__streep:nth-child(2) { opacity: 0; }
  .balk--open .menuknop__streep:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Het paneel zelf.
     Niet de hele nav op display:none zetten: dan is de hoofdknop ook weg, en
     een kind kan niet ontsnappen aan een verborgen ouder. Daarom blijft de nav
     staan en verbergen we alleen de regels die niet in de balk horen. */
  /* [merk] ... [hoofdknop] [menuknop] - de menuknop uiterst rechts, waar een
     duim hem zoekt. Open schuift het paneel als laatste naar de nieuwe regel. */
  .balk--met-menu nav { order: 2; margin-left: auto; gap: 4px; }
  .balk--met-menu nav > *:not(.knop--primair) { display: none; }

  .balk--open nav {
    order: 4; margin-left: 0;
    width: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 0 4px; margin-top: 8px; border-top: 1px solid var(--rand);
  }
  /* Even zwaar als de verbergregel hierboven (twee klassen plus een element),
     en hij staat erna - anders wint het verbergen en gaat het paneel wel open
     maar blijft het leeg. */
  .balk--met-menu.balk--open nav > * { display: flex; }
  .balk--open nav a { padding: 12px 10px; border-radius: 10px; font-size: 1rem; }
  .balk--open nav a.knop { justify-content: flex-start; }
  /* In de balk moet de knoptekst kort ("Starten"), in het open paneel is er
     ruimte voor de hele zin - en dan hoort de korte versie weg, anders staat
     er "Controleer mijn briefStarten". */
  .balk--open nav .nav-lang { display: inline; }
  .balk--open nav .nav-kort { display: none; }

  /* De hoofdknop staat altijd in de balk; alleen in het open menu schuift hij
     mee in de kolom. */
  .balk--met-menu nav a.knop--primair { padding: 9px 14px; font-size: .88rem; }
  .balk--open nav a.knop--primair { width: 100%; padding: 12px 10px; font-size: 1rem; }
}
@media (max-width: 420px) {
  .balk--met-menu nav a.knop--primair { padding: 8px 11px; font-size: .82rem; }
}
}
.balk nav a.knop--primair:hover { color: #fff; background: var(--actie-donker); }

/* ---------------------------------------------------------------- knoppen -- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: .97rem; font-weight: 700; text-decoration: none;
  cursor: pointer; transition: background .15s, border-color .15s, transform .08s;
}
.knop:active { transform: translateY(1px); }
.knop--primair { background: var(--actie); color: #fff; }
.knop--primair:hover { background: var(--actie-donker); }
.knop--zacht { background: var(--vlak); color: var(--tekst); border-color: var(--rand-sterk); }
.knop--zacht:hover { border-color: var(--actie); color: var(--actie-donker); }
.knop--stil { background: transparent; color: var(--tekst-zacht); padding: 10px 14px; }
.knop--stil:hover { background: var(--grijs-100); color: var(--tekst); }
.knop--klein { padding: 8px 13px; font-size: .88rem; }
.knop[disabled] { opacity: .5; cursor: not-allowed; }
.knop--gevaar { background: var(--rood-100); color: var(--rood-600); }

/* ----------------------------------------------------------------- vlakken -- */
.kaart {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schaduw-klein);
}
.kaart--ruim { padding: 26px; }

.label-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 640;
  background: var(--grijs-100); color: var(--grijs-600); white-space: nowrap;
}
.label-chip--blauw { background: var(--blauw-100); color: var(--blauw-600); }
.label-chip--groen { background: var(--groen-100); color: var(--groen-600); }
.label-chip--oranje { background: var(--oranje-100); color: var(--oranje-600); }
.label-chip--rood { background: var(--rood-100); color: var(--rood-600); }
.label-chip--paars { background: var(--paars-100); color: var(--paars-600); }

.melding {
  border-radius: var(--radius-klein); padding: 14px 16px; margin: 0 0 16px;
  border: 1px solid var(--rand); background: var(--grijs-100); font-size: .93rem;
}
.melding strong { display: block; margin-bottom: 2px; }
.melding--let-op { background: var(--oranje-100); border-color: color-mix(in srgb, var(--oranje-600) 30%, transparent); color: var(--oranje-600); }
.melding--fout { background: var(--rood-100); border-color: color-mix(in srgb, var(--rood-600) 30%, transparent); color: var(--rood-600); }
.melding--goed { background: var(--groen-100); border-color: color-mix(in srgb, var(--groen-600) 30%, transparent); color: var(--groen-600); }
.melding--info { background: var(--blauw-50); border-color: var(--blauw-100); color: var(--tekst); }
.melding p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- formulier -- */
.veld { margin-bottom: 20px; }
.veld > label, .veld__kop {
  display: block; font-weight: 640; font-size: .95rem; margin-bottom: 6px;
}
.veld__hulp { font-size: .86rem; color: var(--tekst-zacht); margin: 0 0 8px; }
/* Onder een gevoelig veld: wat gebeurt er met dit nummer. */
.veld__slot {
  display: flex; gap: 7px; align-items: baseline;
  font-size: .84rem; color: var(--groen-600); margin: 7px 0 0;
}
.veld__slot-teken { flex: none; font-size: .8rem; }
.veld__fout { font-size: .86rem; color: var(--rood-600); margin-top: 6px; font-weight: 560; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .97rem;
  color: var(--tekst); background: var(--vlak);
  border: 1px solid var(--rand-sterk); border-radius: var(--radius-klein);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .keuze:focus-within {
  outline: 2px solid var(--blauw-500); outline-offset: 1px;
}
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tekst-zacht) 50%), linear-gradient(135deg, var(--tekst-zacht) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.keuzes { display: grid; gap: 10px; }
.keuzes--twee { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.keuze {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; cursor: pointer;
  border: 1px solid var(--rand-sterk); border-radius: var(--radius-klein); background: var(--vlak);
  transition: border-color .15s, background .15s;
}
.keuze:hover { border-color: var(--blauw-500); }
.keuze input { margin: 3px 0 0; accent-color: var(--blauw-600); flex: none; width: 17px; height: 17px; }
.keuze__tekst { font-weight: 580; font-size: .95rem; }
.keuze__uitleg { display: block; font-weight: 400; font-size: .85rem; color: var(--tekst-zacht); margin-top: 2px; }
.keuze:has(input:checked) { border-color: var(--blauw-600); background: var(--blauw-50); box-shadow: inset 0 0 0 1px var(--blauw-600); }

.rij { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------------------------------------------------------------- tijdlijn -- */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li { position: relative; padding: 0 0 20px 30px; border-left: 2px solid var(--rand); }
.tijdlijn li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tijdlijn li::before {
  content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--vlak); border: 2px solid var(--rand-sterk);
}
.tijdlijn li[data-status="gehaald"]::before { background: var(--blauw-600); border-color: var(--blauw-600); }
.tijdlijn__datum { font-weight: 680; font-size: .95rem; }
.tijdlijn__label { font-size: .9rem; color: var(--tekst-zacht); }
.tijdlijn__toelichting { font-size: .83rem; color: var(--tekst-zacht); margin-top: 3px; }

/* -------------------------------------------------------------------- tabel -- */
.tabel-omhulsel { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--rand); background: var(--vlak); }
table.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tabel th {
  text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tekst-zacht); padding: 12px 14px; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
table.tabel td { padding: 13px 14px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
table.tabel tr:last-child td { border-bottom: none; }
table.tabel tbody tr { cursor: pointer; }
table.tabel tbody tr:hover { background: var(--blauw-50); }
.bedrag { font-variant-numeric: tabular-nums; font-weight: 680; white-space: nowrap; }

.verborgen { display: none !important; }
.alleen-schermlezer {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.voet {
  margin-top: 64px; padding: 32px 0; border-top: 1px solid var(--rand);
  font-size: .87rem; color: var(--tekst-zacht);
}
.voet a { color: var(--tekst-zacht); }
.voet__merk { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.voet__merk svg { width: 26px; height: 26px; flex: none; }
.voet__merk .merk__woord { font-size: 1.1rem; }
/* Links onder elkaar op mobiel, naast elkaar zodra het past; geen scheidingstekens. */
.voet__links { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.voet__links a { text-decoration: none; font-weight: 560; }
.voet__links a:hover { color: var(--blauw-600); text-decoration: underline; }

/* --------------------------------------------------------------- mobiel -- */
/* De merknaam bleef hier weg onder 380px, uit de tijd dat de hele navigatie
   in de balk moest passen. Met het uitklapmenu staat er nog maar [merk]
   [hoofdknop] [menuknop], en dan is er ruimte genoeg: een site waarvan je de
   naam niet ziet is een site die je niet onthoudt. */
@media (max-width: 380px) {
  .merk { font-size: .92rem; }
  .merk__teken { width: 28px; height: 28px; }
  .balk nav .knop--klein { padding: 8px 10px; font-size: .84rem; }
}

@media (max-width: 720px) {
  /* Hier stond dat de inhoudelijke links "wijken": display:none. Dat was geen
     responsief ontwerp maar verlies - "Hoe het werkt", "Kosten" en "Vragen"
     waren op een telefoon niet te bereiken. Ze zitten nu in het uitklapmenu;
     alleen zonder javascript wijken ze nog, want dan is er geen menu. */
  .balk:not(.balk--met-menu) nav a.nav-secundair { display: none; }
  .balk__inhoud { gap: 8px; }
  .balk nav { gap: 2px; }
  .knop--klein { padding: 8px 11px; }
  .merk { font-size: .96rem; }
  .lade { padding: 20px 16px; }
  .kop-rij .rechts { width: 100%; margin-left: 0; }
}

/* ------------------------------------------------- dynamische veldeisen -- */
.veld__vereist { font-weight: 400; font-size: .85rem; color: var(--tekst-zacht); }
.veld__reden { font-size: .84rem; color: var(--tekst-zacht); margin: 4px 0 8px; }
.veld__reden:empty { display: none; }


/* ------------------------------------------------------------- whatsapp -- */
/* De zwevende knop, alleen op een telefoon. Daar staat WhatsApp ook, en daar
   is hij het verschil tussen "ik zoek het later wel uit" en een gesprek. Op
   een groot scherm zou hij alleen in de weg zitten.

   De vraag over cookies staat onderin over de hele breedte; zolang die er is,
   zou deze knop eroverheen liggen. */
.wa-zweef {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40; display: none; align-items: center; gap: 8px;
  padding: 13px 18px; border-radius: 999px;
  background: #25d366; color: #fff; text-decoration: none;
  font-weight: 800; font-size: .95rem;
  box-shadow: 0 6px 20px rgba(11, 18, 80, .22);
}
.wa-zweef svg path { fill: #fff; }
.wa-zweef:focus-visible { outline: 3px solid var(--tekst); outline-offset: 3px; }
@media (max-width: 860px) { .wa-zweef { display: inline-flex; } }
body:has(.nb-toestemming) .wa-zweef { display: none; }