/* ==========================================================================
   OFF website — huisstijl en bouwblokken
   Alles wat met uiterlijk te maken heeft staat in dit ene bestand.
   Pas je hier iets aan, dan verandert het op elke pagina.

   1. Huisstijl (kleuren, letter, maten)      -> :root
   2. Basis (pagina, koppen, tekst)
   3. Woordmerk
   4. Kop en menu
   5. Secties en indeling
   6. Bouwblokken: knoppen, kaarten, lijsten, status
   7. Voettekst

   Kleuren komen uit de app (off-pilot, src/theme/tokens.ts).
   Groen betekent OFF, rood betekent ON. Nooit omdraaien.
   ========================================================================== */

/* 1. Huisstijl ------------------------------------------------------------- */
:root {
  /* Kleuren */
  --achtergrond: #090B0A;
  --vlak: #121514;
  --vlak-hoger: #181C1A;
  --tekst: #F4F6F5;
  --tekst-zacht: #9BA19D;
  --lijn: #232826;
  --groen: #34D46A;
  --groen-zacht: #12301F;
  --rood: #E5484D;

  /* Letter */
  --letter: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --tekstgrootte: 17px;

  /* Maten */
  --paginabreedte: 1080px;
  --tekstbreedte: 640px;
  --rand: 16px;            /* ruimte aan de zijkant op telefoon */
  --sectie-ruimte: 56px;   /* ruimte boven en onder elk blok */
  --hoek: 18px;            /* afronding van kaarten */
}

/* 2. Basis ----------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--letter);
  font-size: var(--tekstgrootte);
  line-height: 1.55;
}

a { color: inherit; }

h1 { font-size: clamp(40px, 8vw, 72px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
h2 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; margin-bottom: 16px; }
h3 { font-size: 20px; margin-bottom: 8px; }
p + p { margin-top: 12px; }

.inleiding { font-size: 20px; color: var(--tekst-zacht); max-width: var(--tekstbreedte); margin-top: 20px; }
.tekst { color: var(--tekst-zacht); max-width: var(--tekstbreedte); }
.zacht { color: var(--tekst-zacht); }
.groen { color: var(--groen); }

/* 3. Woordmerk: vette letters met een groene stip rechtsboven -------------- */
.woordmerk {
  display: inline-flex;
  align-items: flex-start;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1.05;
  text-decoration: none;
}
.woordmerk::after {
  content: "";
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  background: var(--groen);
  margin-left: 1px;
  margin-top: -0.12em;
}

/* 4. Kop en menu ----------------------------------------------------------- */
.kop {
  max-width: var(--paginabreedte);
  margin: 0 auto;
  padding: 20px var(--rand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.kop .woordmerk { font-size: 30px; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; }
.menu a { color: var(--tekst-zacht); text-decoration: none; font-size: 15px; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--tekst); }

/* Balk bovenaan zolang de teksten nog niet definitief zijn. */
.concept { background: var(--groen-zacht); color: var(--groen); font-size: 13px; text-align: center; padding: 6px var(--rand); }

/* 5. Secties en indeling --------------------------------------------------- */
main { max-width: var(--paginabreedte); margin: 0 auto; padding: 0 var(--rand); }

section { padding: var(--sectie-ruimte) 0; border-top: 1px solid var(--lijn); }
section:first-child { border-top: 0; }

/* Blok met een statuslabel boven de kop (openingsblok van een pagina of een los blok). */
.opening .status { margin-bottom: 20px; }

/* Citaat of grote uitspraak, bijvoorbeeld op de visiepagina. */
.uitspraak { font-size: clamp(24px, 4vw, 32px); font-weight: 700; line-height: 1.3; max-width: 800px; }
.uitspraak .groen { font-weight: 800; }

/* 6. Bouwblokken ----------------------------------------------------------- */

/* Knoppen: .knop is groen, .knop.tweede is een omlijnde knop. */
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.knop {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  background: var(--groen);
  color: var(--achtergrond);
}
.knop.tweede { background: transparent; color: var(--tekst); border: 1px solid var(--lijn); }

/* Kaarten: zetten zich vanzelf naast elkaar als er ruimte is. */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--hoek); padding: 24px; }
.kaart .nummer { color: var(--groen); font-weight: 800; font-size: 14px; margin-bottom: 8px; display: block; }
.kaart p { color: var(--tekst-zacht); }

/* Lijsten met een stip: groen voor wat wel, rood (.niet) voor wat niet. */
ul.lijst { list-style: none; margin-top: 16px; }
ul.lijst li { padding: 10px 0 10px 28px; border-top: 1px solid var(--lijn); position: relative; color: var(--tekst-zacht); }
ul.lijst li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--groen); }
ul.lijst.niet li::before { background: var(--rood); }

/* Statuslabel: altijd met tekst erbij, nooit alleen kleur. .on maakt hem rood. */
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--vlak-hoger); font-weight: 700; font-size: 15px; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--groen); }
.status.on::before { background: var(--rood); }

/* 7. Voettekst ------------------------------------------------------------- */
.voet { max-width: var(--paginabreedte); margin: 0 auto; padding: 40px var(--rand); border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; color: var(--tekst-zacht); font-size: 15px; }
.voet .woordmerk { font-size: 22px; color: var(--tekst); }
.ondertekening { margin-top: 24px; }
.ruimte-boven { margin-top: 20px; }