/* ZIT — zitten.app
   Palet overgenomen uit lib/theme.ts ("Indigo op zand", 29 juli 2026), zodat de
   site en de app dezelfde kleuren dragen. Geen externe fonts of scripts: de app
   belooft "geen tracking", en een Google-Fonts-verzoek zou bezoekers-IP's naar
   een derde partij sturen. Systeemletters zijn hier goed genoeg. */

:root {
  --achtergrond: #F8F5EC;
  --vlak: #FDFBF5;
  --tekst: #26221E;
  --tekst-secundair: #5F5A52;
  --tekst-tertiair: #7A6A63;
  --actie: #3F4E7A;
  --actie-licht: #DAE0F4;
  --rand: #E2DDD2;
  --breedte: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --achtergrond: #1A1815;
    --vlak: #24211D;
    --tekst: #F0EBE0;
    --tekst-secundair: #B8B0A4;
    --tekst-tertiair: #9A9084;
    --actie: #A8B4DC;
    --actie-licht: #2C3350;
    --rand: #3A352E;
  }
}

/* Nunito 800 ExtraBold — hetzelfde bestand dat de app gebruikt
   (node_modules/@expo-google-fonts/nunito). Zelf gehost, niet van een CDN:
   zie de opmerking bovenaan. Nunito staat onder de SIL Open Font License; die
   licentie ligt hiernaast als Nunito-OFL.txt en moet meegeleverd blijven.
   TTF in plaats van WOFF2 omdat er geen converter op deze Mac staat — 130 kB
   in plaats van ~40 kB. Wil je dat later kleiner: `fonttools` kan het.

   Alleen dit ene gewicht: het draagt de merknaam en niets anders op de pagina
   gebruikt Nunito. De koppen staan bewust in de systeemletter — dat is sneller
   en het houdt het merk onderscheidend van de lopende tekst. Tot 30 juli 2026
   stond hier ook 700 Bold; dat werd na de merknaam-wijziging door niets meer
   gebruikt en is verwijderd. */
@font-face {
  font-family: 'Nunito';
  src: url('Nunito_800ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.omslag { max-width: var(--breedte); margin: 0 auto; }

/* --- kop ---
   Exact het merkblok uit de app (app/index.tsx `logoRij`, ook in login.tsx en
   welcome.tsx): beeldmerk links, daarnaast "ZIT" in Nunito 800 ExtraBold op 28px
   met letterSpacing 1 in indigo, en daaronder de tagline in 12px cursief. De
   ruimte tussen logo en tekst is 24px, want de app zet gap:12 op de rij én
   marginLeft:12 op de tekstkolom.

   Maten en kleuren hier niet "verbeteren": het merk moet op de site hetzelfde zijn
   als op het scherm van de gebruiker. Wijzigt het in de app, dan hier mee — en
   omgekeerd. (30 juli 2026 van 22px Nunito 700 in tekstkleur naar dit, omdat de
   naam op 22px verdween naast het beeldmerk van 72px.) */

header { padding: 3rem 0 2.5rem; }

.merk {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  text-decoration: none;
  color: inherit;
}

.beeldmerk {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

/* De app kent geen donkere modus, dus het logobestand is indigo op transparant.
   Op een donkere achtergrond is dat te donker; deze filter tilt het naar
   dezelfde lichtere indigo die de rest van de donkere modus gebruikt. */
@media (prefers-color-scheme: dark) {
  .beeldmerk { filter: brightness(1.75) saturate(0.85); }
}

.merktekst { display: flex; flex-direction: column; justify-content: center; }

h1 {
  margin: 0;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--actie);
}

.tagline {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 18px;
  font-style: italic;
  color: var(--tekst-secundair);
}

/* --- tekst --- */

h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

h3 { margin: 1.75rem 0 0.35rem; font-size: 1rem; font-weight: 700; }

/* Paginakop op subpagina's: de merkregel eronder mag niet wegvallen, dus geen
   extra bovenmarge zoals de gewone h2 die verderop in de tekst staat. */
.paginakop { margin-top: 0; }

p { margin: 0 0 1rem; }

.intro { font-size: 1.1875rem; line-height: 1.6; }

a { color: var(--actie); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; }

.stil { color: var(--tekst-secundair); }
.klein { font-size: 0.9375rem; }

/* --- kaart --- */

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 1.25rem 1.375rem;
  margin: 0 0 1rem;
}

.kaart h3:first-child { margin-top: 0; }
.kaart p:last-child { margin-bottom: 0; }

/* De AI-kanttekening staat in de app permanent in beeld; hier krijgt hij
   dezelfde status — zichtbaar, niet weggemoffeld in kleine lettertjes. */
.kanttekening {
  background: var(--actie-licht);
  border-radius: 12px;
  padding: 0.875rem 1.125rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--tekst);
}

/* --- voet --- */

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rand);
  color: var(--tekst-tertiair);
  font-size: 0.9375rem;
}

footer nav { margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }

@media (max-width: 30rem) {
  header { padding-top: 2.5rem; }
  .intro { font-size: 1.125rem; }
  /* Géén h1-regel hier: de merknaam staat vast op 22px, gelijk aan de app. */
}