/* ============================================================
   publiek/basis.css - de basis van elke openbare pagina.

   Hier staan de kleuren en maten (bovenaan, in :root), de
   achtergrond, de breedte van de pagina en de paar dingen die
   overal terugkomen: pictogrammen en de neon-knop.

   Elke bouwsteen heeft zijn eigen blad in deze map:
     menu.css  kop.css  cijfers.css  filters.css  werkbalk.css
     kaart.css  voet.css
   Een kleur veranderen doe je hier, op een plek.
   ============================================================ */

:root {
    /* achtergrond en vlakken */
    --nacht: #060818;
    --vlak: #0b0f2e;
    --vlak-hoog: #10143c;
    --vlak-diep: #080b24;

    /* randen */
    --rand: #23285f;
    --rand-neon: #5b3fd6;

    /* kleuren */
    --paars: #7c3aed;
    --paars-licht: #a78bfa;
    --blauw: #3b82f6;
    --cyaan: #38bdf8;
    --groen: #34d399;
    --goud: #fbbf24;

    /* tekst */
    --tekst: #f3f4ff;
    --tekst-zacht: #aab1d8;
    --tekst-dof: #6c73a0;

    /* maten */
    --breedte: none;   /* geen grens: de pagina gebruikt het hele scherm */
    --rand-ruimte: clamp(14px, 2.4vw, 42px);
    --rond: 12px;
    --rond-klein: 8px;

    --gloed: 0 0 0 1px rgba(124, 58, 237, .18), 0 0 24px rgba(109, 40, 217, .22);

    /* hoeveel de pagina vergroot wordt; zie 'breed scherm' onderaan */
    --vergroot: 1;
}

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

html { color-scheme: dark; }

body {
    margin: 0;
    zoom: var(--vergroot);
    /* gedeeld door de vergroting, anders wordt de pagina hoger dan het scherm */
    min-height: calc(100vh / var(--vergroot));
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 500px at 12% 420px, rgba(76, 29, 149, .22), transparent 70%),
        radial-gradient(900px 600px at 95% 900px, rgba(30, 64, 175, .16), transparent 70%),
        var(--nacht);
    color: var(--tekst);
    font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--paars-licht); }

h1, h2, h3 { margin: 0; line-height: 1.15; }

img { max-width: 100%; }

.pagina {
    width: 100%;
    max-width: var(--breedte);
    margin: 0 auto;
    padding: 0 var(--rand-ruimte) 56px;
    flex: 1;
}

/* pictogrammen staan netjes naast tekst en krimpen niet mee */
.icoon { flex: none; vertical-align: middle; }

/* tekst die alleen een schermlezer voorleest */
.alleen-voorlezen {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* met het toetsenbord meteen naar de inhoud */
.naar-inhoud {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 100;
    padding: 8px 14px;
    border-radius: var(--rond-klein);
    background: var(--paars);
    color: #fff;
    text-decoration: none;
}
.naar-inhoud:focus { top: 10px; }

:focus-visible {
    outline: 2px solid var(--cyaan);
    outline-offset: 2px;
}

/* de knop met de gloed: 'View walkthrough' en dergelijke */
.knop-neon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #6d5cf0;
    border-radius: var(--rond-klein);
    background: linear-gradient(180deg, #3d2bd0 0%, #2a1ba6 100%);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 14px rgba(99, 60, 240, .35);
    transition: background .15s, box-shadow .15s, transform .15s;
}
.knop-neon:hover {
    background: linear-gradient(180deg, #5440ee 0%, #3525c4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 20px rgba(124, 92, 255, .6);
}
.knop-neon .icoon { transition: transform .15s; }
.knop-neon:hover .icoon { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ------------------------------------------------ breed scherm
   De pagina is getekend voor een scherm van ongeveer 1600 breed.
   Op een breder scherm wordt alles in dezelfde verhouding groter
   (menu, kop, kaarten, tekst), zodat de pagina het hele scherm
   vult en de kaarten niet klein blijven. Het werkt als het
   inzoomen van de browser, in kleine stapjes.

   Elke regel: vanaf deze schermbreedte, deze vergroting. De
   vergroting is steeds de breedte gedeeld door 1600. */
@media (min-width: 1720px) { :root { --vergroot: 1.075; } }
@media (min-width: 1850px) { :root { --vergroot: 1.156; } }
@media (min-width: 1990px) { :root { --vergroot: 1.242; } }
@media (min-width: 2140px) { :root { --vergroot: 1.335; } }
@media (min-width: 2300px) { :root { --vergroot: 1.436; } }
@media (min-width: 2470px) { :root { --vergroot: 1.543; } }
@media (min-width: 2650px) { :root { --vergroot: 1.659; } }
@media (min-width: 2850px) { :root { --vergroot: 1.783; } }
@media (min-width: 3070px) { :root { --vergroot: 1.917; } }
@media (min-width: 3300px) { :root { --vergroot: 2.061; } }
@media (min-width: 3540px) { :root { --vergroot: 2.216; } }
@media (min-width: 3810px) { :root { --vergroot: 2.382; } }
@media (min-width: 4100px) { :root { --vergroot: 2.56; } }