/* Bedrijfssite kliktlab.nl: lettertypen (zelf gehost, dus geen verzoeken naar Google), de basis en het menu boven de
   presentaties. De kleuren volgen de pagina rond de films (film.css), in licht en donker. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/sora-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sora-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* Menu en startpagina: een rustige balk in de kleuren van de pagina. */
:root {
  --s-achtergrond: #e8eff0;
  --s-vlak: #f5f8f8;
  --s-inkt: #1b2a38;
  --s-zacht: #566a7a;
  --s-lijn: #cbd8dc;
  --s-accent: #23747c;
  --s-titel: 'Sora', 'Manrope', system-ui, sans-serif;
  --s-tekst: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s-rand-links: max(16px, env(safe-area-inset-left, 0px));
  --s-rand-rechts: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --s-achtergrond: #0d151c;
    --s-vlak: #15212a;
    --s-inkt: #e4edf0;
    --s-zacht: #9cb0bb;
    --s-lijn: #26363f;
    --s-accent: #6cc0c8;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --s-achtergrond: #0d151c;
  --s-vlak: #15212a;
  --s-inkt: #e4edf0;
  --s-zacht: #9cb0bb;
  --s-lijn: #26363f;
  --s-accent: #6cc0c8;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--s-achtergrond);
  color: var(--s-inkt);
  font-family: var(--s-tekst);
  padding-left: var(--s-rand-links);
  padding-right: var(--s-rand-rechts);
}
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- Menu boven de presentaties ---------- */
.site-balk {
  margin-inline: calc(-1 * var(--s-rand-links)) calc(-1 * var(--s-rand-rechts));
  padding-inline: var(--s-rand-links) var(--s-rand-rechts);
  border-bottom: 1px solid var(--s-lijn);
}
.site-nav { max-width: 1240px; margin: 0 auto; padding-block: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.site-merk { display: inline-flex; align-items: baseline; gap: 10px; color: var(--s-inkt); text-decoration: none; font: 400 19px/1 var(--s-titel); letter-spacing: -0.01em; }
.site-merk span { font: 600 11px/1 var(--s-tekst); letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-accent); }
.site-menu { list-style: none; margin: 0; padding: 2px; display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-menu::-webkit-scrollbar { display: none; }
.site-menu a { display: inline-flex; padding: 9px 13px; border-radius: 999px; color: var(--s-zacht); text-decoration: none; font: 500 15px/1 var(--s-tekst); white-space: nowrap; }
.site-menu a:hover { color: var(--s-inkt); background: var(--s-vlak); }
.site-menu a[aria-current='page'] { color: var(--s-inkt); background: var(--s-vlak); box-shadow: inset 0 0 0 1px var(--s-lijn); }
.site-taal { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--s-lijn); }
.site-taal a { padding: 7px 10px; border-radius: 999px; color: var(--s-zacht); text-decoration: none; font: 600 12px/1 var(--s-tekst); letter-spacing: 0.08em; }
.site-taal a:hover { color: var(--s-inkt); }
.site-taal a[aria-current='true'] { background: var(--s-inkt); color: var(--s-achtergrond); }
.site-nav a:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .site-nav { gap: 10px 16px; }
  .site-menu { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; margin-inline: -2px; }
  .site-taal { margin-left: auto; }
}

/* Een presentatie die nog volgt: alleen de kop. */
.pagina.later { min-height: 50vh; justify-content: center; }

/* In de exportstand (video maken) alleen het beeld. */
html.export .site-balk { display: none !important; }

/* ---------- Startpagina en taalkeuze ---------- */
.start-pagina { max-width: 1240px; margin: 0 auto; min-height: 100svh; padding-block: 48px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.start-merk { margin: 0; font: 600 12px/1.2 var(--s-tekst); letter-spacing: 0.18em; text-transform: uppercase; color: var(--s-accent); }
.start-pagina h1 { margin: 0; max-width: 18ch; font: 300 clamp(32px, 6vw, 64px)/1.08 var(--s-titel); letter-spacing: -0.02em; text-wrap: balance; }
.start-pagina p { margin: 0; max-width: 60ch; color: var(--s-zacht); font-size: 17px; line-height: 1.55; }
.start-pagina a { color: var(--s-accent); text-underline-offset: 3px; }
.start-pagina a:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; border-radius: 4px; }
.start-keuze { display: flex; flex-wrap: wrap; gap: 10px; }
.start-keuze a { display: inline-flex; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--s-lijn); background: var(--s-vlak); color: var(--s-inkt); text-decoration: none; font: 600 15px/1 var(--s-tekst); }