/* Tiny Lives: de gedeelde vormgeving van de website (21-11-2026).
   Eén kop met menu, een live-strook, één voet, en dezelfde kleuren en letters op elke pagina.
   Kleur komt van het eiland zelf: de lagune, ondiep water, schuim, de schelp van de kreeft en de snavel van de eend.
   De oude namen (--zee, --zand, ...) wijzen naar dezelfde kleuren, zodat bestaande onderdelen meegaan. */
:root {
  --lagune: #0d3a42; --diep: #082a31; --ondiep: #cfe9e3; --schuim: #f3faf7; --schelp: #b93a1f; --schelp-tekst: #8f2a12; --snavel: #f2a81d;
  --inkt: #0f2a2f; --zacht: #3f5a5e; --lijn: #bcd8d2; --blad: #1c6a48; --papier: #f6ecd4;
  --zee: var(--lagune); --zand: var(--schuim); --zand-2: var(--ondiep); --koraal: var(--schelp-tekst); --koraal-tekst: var(--schelp-tekst); --zon: var(--snavel);
  --kop: "Bricolage Grotesque", "Trebuchet MS", sans-serif; --tekst: "Instrument Sans", system-ui, sans-serif; --hand: "Gochi Hand", "Comic Sans MS", cursive;
  --pad: clamp(16px, 4vw, 64px);
}
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

html { scroll-padding-top: 5rem; }
body { margin: 0; background: var(--schuim); color: var(--inkt); font-family: var(--tekst); font-size: 17px; line-height: 1.55; }
h1, h2, h3 { font-family: var(--kop); letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-weight: 700; }
h2 { font-weight: 650; }
p, li { text-wrap: pretty; }
a { color: var(--lagune); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--snavel); outline-offset: 3px; border-radius: 4px; }
.sla-over { position: absolute; left: -999px; top: 8px; background: var(--snavel); color: var(--inkt); padding: 8px 14px; border-radius: 8px; font-weight: 700; z-index: 50; }
.sla-over:focus { left: 8px; }

/* ---------- de kop: één navigatie op elke breedte (smal: een uitklapmenu, breed: op een rij) ---------- */
.site-kop { position: sticky; top: 0; z-index: 30; background: var(--lagune); color: var(--schuim); view-transition-name: site-kop; }
.kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px var(--pad); }
.kop-binnen > * { flex-shrink: 0; white-space: nowrap; }
.merk { font: 750 1.45rem/1 var(--kop); color: var(--schuim); text-decoration: none; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; }
.merk svg { width: 30px; height: 30px; }
.site-nav { display: flex; align-items: center; }
.menu-knop { anchor-name: --menu-knop; font: 650 1rem var(--tekst); color: var(--lagune); background: var(--schuim); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.menu-knop svg { width: 18px; height: 18px; }
.site-menu { list-style: none; margin: 0; padding: 10px; }
.site-menu a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--inkt); text-decoration: none; font-weight: 600; }
.site-menu a:hover { background: var(--ondiep); }
.site-menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--schelp); font-weight: 700; }
.site-menu .kijk a { background: var(--schelp); color: #fff8f2; }
.site-menu .kijk a:hover { background: #9e2f17; }
.site-menu[popover] { position: fixed; inset: auto; inset-block-start: 4.2rem; inset-block-start: anchor(--menu-knop bottom); inset-inline-end: 1rem; inline-size: min(80dvw, 22rem); max-inline-size: calc(100dvw - 2rem); block-size: fit-content; max-block-size: calc(100dvh - 6rem); margin-block-start: 0.5rem; overflow: auto; border: 0; border-radius: 16px; background: var(--schuim); box-shadow: 0 18px 50px rgba(8, 42, 49, .35); }
.site-menu[popover]:not(:is(:popover-open, .\:popover-open)) { display: none; }
.site-kop.is-breed .menu-knop { display: none; }
.site-kop.is-breed .site-menu { position: static; display: flex; align-items: center; gap: 2px; inline-size: auto; max-inline-size: none; block-size: auto; max-block-size: none; overflow: visible; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.site-kop.is-breed .site-menu a { color: var(--schuim); padding: 8px 12px; }
.site-kop.is-breed .site-menu a:hover { background: rgba(243, 250, 247, .14); }
.site-kop.is-breed .site-menu a[aria-current="page"] { text-decoration-color: var(--snavel); }
.site-kop.is-breed .site-menu .kijk { margin-inline-start: 10px; }
.site-kop.is-breed .site-menu .kijk a { background: var(--snavel); color: var(--inkt); padding: 8px 16px; border-radius: 999px; }
.site-kop.is-breed .site-menu .kijk a:hover { background: #ffc045; }
.site-kop.is-meten * { transition: none !important; }
@media (forced-colors: active) { .site-menu a[aria-current="page"] { outline: 2px solid CanvasText; } }

/* ---------- de live-strook: wat ze nu doen, op elke pagina ---------- */
.nu-strook { background: var(--diep); color: #d7ece7; font-size: .95rem; padding: 7px var(--pad); display: flex; gap: 6px 26px; flex-wrap: wrap; align-items: baseline; min-height: 2.3rem; }
.nu-strook .klok { color: var(--snavel); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.nu-strook .klok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff5a4d; }
.nu-strook a { color: #f3faf7; font-weight: 700; text-decoration-thickness: 1px; }
.nu-strook span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- de paginakop van binnenpagina's ---------- */
.paginakop { background: var(--lagune); color: var(--schuim); padding: clamp(28px, 5vw, 56px) var(--pad) clamp(26px, 4vw, 44px); }
.paginakop h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1; margin: 0 0 12px; }
.paginakop p { color: #cfe5e0; margin: 0 0 6px; max-width: 64ch; font-size: 1.1rem; }
.paginakop .pager { margin-top: 16px; }

/* ---------- gedeelde bouwstenen ---------- */
.knop { display: inline-block; font: 700 1.05rem var(--tekst); padding: 12px 22px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; }
.knop.vol { background: var(--schelp); color: #fff8f2; }
.knop.vol:hover { background: #9e2f17; }
.knop.licht { background: var(--schuim); color: var(--lagune); }
.knop.licht:hover { background: #fff; }
.knop.donker { background: var(--lagune); color: var(--schuim); }
.knop.donker:hover { background: var(--diep); }
.band { padding: clamp(40px, 7vw, 96px) var(--pad); }
.band.ondiep { background: var(--ondiep); }
.band.lagune { background: var(--lagune); color: var(--schuim); }
.band.lagune a { color: var(--schuim); }
.band h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; margin: 0 0 18px; }
.zacht { color: var(--zacht); }
.hand { font-family: var(--hand); }

/* ---------- de voet ---------- */
.site-voet { background: var(--diep); color: #b9d6d0; padding: clamp(32px, 5vw, 56px) var(--pad) 36px; display: grid; gap: 28px clamp(24px, 6vw, 90px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.site-voet h2 { font: 650 1.05rem var(--kop); color: var(--schuim); margin: 0 0 10px; letter-spacing: 0; }
.site-voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-voet a { color: #e6f3f0; text-decoration: none; }
.site-voet a:hover { text-decoration: underline; }
.site-voet .eerlijk { grid-column: 1 / -1; border-top: 1px solid rgba(243, 250, 247, .16); padding-top: 18px; margin: 0; max-width: 90ch; }

/* Een kop met een echte opname van de uitzending erachter, over de hele breedte (27-11-2026, wens eigenaar). De opname ligt
   onder een donkere waas die links het dichtst is, zodat de tekst leesbaar blijft. Er hoort altijd een pauzeknop bij. */
.kop-video { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(340px, 46vh, 560px); align-content: end; }
.kop-video > video.achter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; z-index: -2; }
.kop-video::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 42, 49, .9) 0%, rgba(8, 42, 49, .68) 45%, rgba(8, 42, 49, .32) 100%), linear-gradient(0deg, rgba(8, 42, 49, .55), rgba(8, 42, 49, 0) 45%); }
.kop-video .video-balk { position: absolute; right: var(--pad); bottom: 12px; display: flex; gap: 12px; align-items: center; font-size: .9rem; color: #dcece8; }
.kop-video .video-balk button { font: 600 .9rem var(--tekst); color: var(--schuim); background: rgba(8, 42, 49, .6); border: 1px solid rgba(243, 250, 247, .45); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.kop-video .video-balk button:hover { background: rgba(8, 42, 49, .85); }
@media (max-width: 620px) { .kop-video .video-balk span { display: none; } }