/*
Theme Name: Skizie
Author: Mave Media
Description: Eigen theme voor skizie.com. Inhoud komt uit bouw_skizie.py; het theme levert het kader.
Version: 0.1.0
Text Domain: skizie
*/

/* ===== Tokens ===== */
:root {
  --sk-den: #1D3A3F;          /* hoofdkleur: diep dennengroen-blauw */
  --sk-den-diep: #0F2427;
  --sk-sneeuw: #F6F4EE;       /* achtergrond */
  --sk-wit: #FFFFFF;
  --sk-ink: #1B2226;          /* tekst */
  --sk-ink-zacht: #39464A;
  --sk-ink-mute: #4A5559;
  --sk-lijn: #DDD8CC;
  --sk-lijn-zacht: #ECE8DE;
  --sk-ijs: #E3ECEE;          /* lichte vlakken */
  --sk-gloed: #C4532F;        /* alpengloed: alleen voor de boekknop en 'goedkoopst' */
  --sk-gloed-tekst: #A6432A;  /* gloed als tekstkleur (contrast >= 4.5:1) */
  --sk-ok: #2E7D4F;
  --sk-piste-groen: #3E9A5C;
  --sk-piste-blauw: #3B7FD1;
  --sk-piste-rood: #D24B3E;
  --sk-piste-zwart: #0B0F10;

  --sk-kop: 'Manrope', system-ui, sans-serif;
  --sk-tekst: 'Instrument Sans', system-ui, sans-serif;
  --sk-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --sk-radius-sm: 10px;
  --sk-radius: 14px;
  --sk-radius-lg: 18px;
  --sk-container: 1200px;
  --sk-gutter: 24px;
  --sk-schaduw: 0 10px 30px rgba(29, 58, 63, 0.12);
}

/* ===== Basis ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sk-sneeuw);
  color: var(--sk-ink);
  font-family: var(--sk-tekst);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--sk-den); text-underline-offset: 3px; }
a:hover { color: var(--sk-den-diep); }
:focus-visible { outline: 3px solid var(--sk-gloed); outline-offset: 2px; }
.sk-icon { flex: none; display: inline-block; vertical-align: middle; }

.sk-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--sk-wit); padding: 10px 14px; border-radius: var(--sk-radius-sm); }
.sk-skip:focus { left: 8px; }

.sk-container { width: 100%; max-width: var(--sk-container); margin: 0 auto; padding-inline: var(--sk-gutter); }
.sk-pagina { padding-block: 28px 80px; }

/* ===== Typografie ===== */
.sk-kicker {
  font-family: var(--sk-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-gloed-tekst);
}
.sk-h1, .sk-pagina h1 {
  font-family: var(--sk-kop); font-weight: 800; font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05; letter-spacing: -0.03em; color: var(--sk-den); margin: 10px 0 12px;
}
.sk-h2, .sk-pagina h2 {
  font-family: var(--sk-kop); font-weight: 750; font-size: clamp(24px, 3vw, 30px);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--sk-den); margin: 6px 0 18px;
}
.sk-pagina h3 { font-family: var(--sk-kop); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; margin: 24px 0 8px; }
.sk-lead { font-size: 19px; line-height: 1.5; color: var(--sk-ink-zacht); max-width: 640px; margin: 0; }
.sk-cijfer { font-family: var(--sk-kop); font-weight: 800; letter-spacing: -0.02em; }

/* ===== Masthead ===== */
.sk-masthead { background: var(--sk-den); color: var(--sk-sneeuw); }
.sk-masthead__rij { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 18px; }
.sk-logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.sk-logo:hover { color: inherit; }
.sk-logo__naam { font-family: var(--sk-kop); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.sk-nav__lijst { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 28px; flex-wrap: wrap; }
.sk-nav__lijst a { color: var(--sk-sneeuw); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 0; display: inline-block; }
.sk-nav__lijst a:hover, .sk-nav__lijst .current-menu-item > a { text-decoration: underline; color: var(--sk-sneeuw); }

/* ===== Kruimelpad ===== */
.sk-kruimel {
  font-family: var(--sk-mono); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sk-ink-mute); display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.sk-kruimel a { color: var(--sk-ink-mute); }
.sk-kruimel [aria-current] { color: var(--sk-ink); }

/* ===== Footer ===== */
.sk-voet { background: var(--sk-den); color: var(--sk-sneeuw); margin-top: 40px; }
.sk-voet a { color: var(--sk-sneeuw); }
.sk-voet__rij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-block: 36px 20px; }
.sk-voet__merk p { margin: 10px 0 0; max-width: 380px; opacity: 0.85; font-size: 14.5px; }
.sk-voet__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.sk-voet__klein {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  border-top: 1px solid rgba(246, 244, 238, 0.18); padding-block: 16px 28px; font-size: 13px; opacity: 0.8;
}

/* ===== Correcties 10-11 ===== */
/* Footer altijd onderaan, ook bij korte pagina's */
body { min-height: 100vh; display: flex; flex-direction: column; }
.sk-main { flex: 1 0 auto; }
/* Lucht onder het kruimelpad */
.sk-kruimel { margin-bottom: 22px; }
/* Losse H2 in lopende tekst: ruimte erboven. Na een kicker blijft hij er dichtbij. */
.sk-pagina h2 { margin-top: 40px; }
.sk-pagina .sk-kicker + h2, .sk-pagina .sk-kicker + .sk-h2 { margin-top: 6px; }
/* Footerlijn even breed als de inhoud */
.sk-voet__klein { width: calc(100% - 2 * var(--sk-gutter)); max-width: calc(var(--sk-container) - 2 * var(--sk-gutter)); padding-inline: 0; }