/* ==========================================================================
   ComplianceGuard — thema "Instrument"
   Donker is de standaard; de schakelaar in de kop zet [data-thema="licht"].
   Componenten gebruiken uitsluitend variabelen, nooit een vaste kleur.
   ========================================================================== */

@import url("tokens.css");

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--grond);
    color: var(--tekst);
    font-family: var(--sans);
    font-size: var(--t-m);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--hoek-klein);
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
    font-weight: 600;
}
h1 { font-size: clamp(2rem, 5vw, var(--t-4xl)); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.4vw, var(--t-3xl)); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-l); }

p { margin: 0; }

.container { max-width: var(--maat); margin: 0 auto; padding: 0 var(--marge); }

/* Bovenkopje: klein, monospace, gespatieerd */
.eyebrow {
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.lead { font-size: var(--t-l); color: var(--tekst-2); max-width: 62ch; }
.stil { color: var(--tekst-2); }
.gedempt { color: var(--tekst-3); }

/* --- Kop en navigatie ------------------------------------------------ */
.kop {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--grond) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lijn);
}
@supports not (backdrop-filter: blur(10px)) {
    .kop { background: var(--grond); }
}

.kop-binnen {
    max-width: var(--maat); margin: 0 auto; padding: 0 var(--marge);
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 88px;
}

.merk {
    display: flex; align-items: center; gap: 0.6rem;
    font-weight: 600; font-size: var(--t-l); letter-spacing: -0.02em;
    color: var(--tekst); text-decoration: none; flex: none;
}
.merk:hover { text-decoration: none; }
.merk img { height: 60px; width: auto; display: block; }

/* Twee varianten van het logo: het origineel heeft een witte achtergrond en
   grijze tekst, wat op een donkere grond een wit blok met onleesbare letters
   oplevert. Beide zijn transparant; de donkere heeft opgelichte tekst. */
.merk .logo-donker { display: block; }
.merk .logo-licht  { display: none; }
[data-thema="licht"] .merk .logo-donker { display: none; }
[data-thema="licht"] .merk .logo-licht  { display: block; }

.hoofdmenu {
    display: flex; align-items: center; gap: 1.75rem;
    margin: 0 auto; padding: 0; list-style: none;
}
.hoofdmenu a {
    color: var(--tekst-2); font-size: var(--t-s); font-weight: 500;
    white-space: nowrap; padding: 0.4rem 0;
}
.hoofdmenu a:hover { color: var(--tekst); text-decoration: none; }
.hoofdmenu a[aria-current="page"] { color: var(--tekst); }

.kop-acties { display: flex; align-items: center; gap: 0.6rem; flex: none; }

/* Schakelaars: taal en thema, zelfde maat en vorm */
.schakel {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    height: 34px; padding: 0 0.7rem;
    background: transparent; color: var(--tekst-2);
    border: 1px solid var(--lijn); border-radius: var(--hoek);
    font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer;
}
.schakel:hover { color: var(--tekst); border-color: var(--lijn-sterk); text-decoration: none; }
.schakel svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Het pictogram wisselt mee met het thema */
.icoon-maan { display: none; }
.icoon-zon  { display: block; }
[data-thema="licht"] .icoon-maan { display: block; }
[data-thema="licht"] .icoon-zon  { display: none; }

/* --- Knoppen --------------------------------------------------------- */
.knop {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.72rem 1.35rem;
    font-family: var(--sans); font-size: var(--t-s); font-weight: 600;
    border: 1px solid transparent; border-radius: var(--hoek);
    background: var(--accent); color: var(--accent-op);
    cursor: pointer; white-space: nowrap;
}
.knop:hover { text-decoration: none; filter: brightness(1.08); }
.knop-leeg {
    background: transparent; color: var(--tekst); border-color: var(--lijn-sterk);
}
.knop-leeg:hover { background: var(--vlak-op); filter: none; }

/* --- Hero ------------------------------------------------------------ */
.hero { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-raster {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-tekst > * + * { margin-top: 1.15rem; }
.hero-knoppen { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.normen { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.norm {
    font-family: var(--mono); font-size: var(--t-xs); color: var(--tekst-3);
    border: 1px solid var(--lijn); border-radius: var(--hoek-klein);
    padding: 0.3rem 0.6rem; letter-spacing: 0.03em;
}

/* --- Meetblok: het risicobeeld --------------------------------------- */
.meetblok {
    background: var(--vlak); border: 1px solid var(--lijn);
    border-radius: var(--hoek); box-shadow: var(--schaduw);
    overflow: hidden;
}
.meetblok-kop {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--lijn);
    background: var(--vlak-op);
}
.meetblok-kop .titel {
    font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--tekst-3);
}
.stip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--mono); font-size: var(--t-xs); color: var(--goed);
}
.stip::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}

.metingen { margin: 0; padding: 0.4rem 1.1rem 0.9rem; }
.meting {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: 0.7rem 0;
}
.meting + .meting { border-top: 1px solid var(--lijn); }
.meting dt { margin: 0; font-size: var(--t-s); color: var(--tekst-2); }
.meting dd {
    margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: var(--t-m); font-weight: 500; color: var(--tekst);
}
.meting dd.is-goed     { color: var(--goed); }
.meting dd.is-aandacht { color: var(--aandacht); }
.meting dd.is-kritiek  { color: var(--kritiek); }

/* Balkje onder een meting, toont verhouding zonder een grafiek te zijn */
.balkje { height: 3px; background: var(--lijn); border-radius: 2px; overflow: hidden; }
.balkje span { display: block; height: 100%; background: var(--goed); }

/* --- Secties en kaarten ---------------------------------------------- */
.sectie { padding: clamp(3rem, 6vw, 5rem) 0; }
.sectie-rand { border-top: 1px solid var(--lijn); }

.sectie-kop { max-width: 62ch; margin-bottom: 2.5rem; }
.sectie-kop > * + * { margin-top: 0.8rem; }

.raster { display: grid; gap: 1rem; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.kaart {
    background: var(--vlak); border: 1px solid var(--lijn);
    border-radius: var(--hoek); padding: 1.4rem;
}
.kaart > * + * { margin-top: 0.7rem; }
.kaart h3 { font-size: var(--t-l); }
.kaart p { font-size: var(--t-s); color: var(--tekst-2); }

.kaart-link { display: block; color: inherit; }
.kaart-link:hover { border-color: var(--lijn-sterk); text-decoration: none; }
.kaart-link:hover h3 { color: var(--accent); }

/* Nummering waar de volgorde iets betekent */
.kaart .nummer {
    font-family: var(--mono); font-size: var(--t-xs); color: var(--tekst-3);
    letter-spacing: 0.1em;
}

/* --- Prijsblok -------------------------------------------------------- */
.prijskaart {
    background: var(--vlak); border: 1px solid var(--lijn);
    border-radius: var(--hoek); padding: 1.75rem;
    display: flex; flex-direction: column; gap: 0.9rem;
}
.prijskaart.uitgelicht { border-color: var(--accent); box-shadow: var(--schaduw); }
.prijskaart .merkje {
    align-self: flex-start;
    font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent);
    background: var(--accent-zacht); border-radius: var(--hoek-klein);
    padding: 0.25rem 0.55rem;
}
.bedrag { display: flex; align-items: baseline; gap: 0.15rem; }
.bedrag .euro { font-family: var(--mono); font-size: var(--t-xl); color: var(--tekst-2); }
.bedrag .getal {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: var(--t-4xl); font-weight: 500; letter-spacing: -0.03em; color: var(--tekst);
}
.bedrag .periode { font-size: var(--t-s); color: var(--tekst-3); margin-left: 0.3rem; }

.kenmerken { margin: 0; padding: 0; list-style: none; }
.kenmerken li {
    position: relative; padding: 0.35rem 0 0.35rem 1.25rem;
    font-size: var(--t-s); color: var(--tekst-2);
}
.kenmerken li::before {
    content: ""; position: absolute; left: 0; top: 0.95rem;
    width: 8px; height: 1px; background: var(--accent);
}

/* --- Voettekst -------------------------------------------------------- */
.voet {
    border-top: 1px solid var(--lijn); padding: 3rem 0 2.5rem;
    color: var(--tekst-2); font-size: var(--t-s);
}
.voet-raster {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem; margin-bottom: 2.5rem;
}
.voet h4 {
    font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--tekst-3); font-weight: 500;
    margin-bottom: 0.8rem;
}
.voet ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.voet a { color: var(--tekst-2); }
.voet a:hover { color: var(--tekst); }
.voet-onder {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding-top: 1.5rem; border-top: 1px solid var(--lijn);
    font-size: var(--t-xs); color: var(--tekst-3);
}

/* --- Mobiel ----------------------------------------------------------- */
.menu-knop { display: none; }

@media (max-width: 900px) {
    .hero-raster { grid-template-columns: 1fr; }
    .merk img { height: 46px; }
    .merk span { display: none; }
    .hoofdmenu {
        display: none;
        position: absolute; top: 68px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--vlak); border-bottom: 1px solid var(--lijn);
        padding: 0.5rem var(--marge) 1rem;
    }
    .hoofdmenu.open { display: flex; }
    .hoofdmenu a { padding: 0.7rem 0; border-bottom: 1px solid var(--lijn); }
    .menu-knop { display: inline-flex; }
    .kop-binnen { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Aanvullende onderdelen homepage --------------------------------- */
.meetblok-voet {
    padding: 0.7rem 1.1rem; border-top: 1px solid var(--lijn);
    background: var(--vlak-op);
    font-family: var(--mono); font-size: var(--t-xs); color: var(--tekst-3);
}

/* Vergelijking traditioneel tegenover ComplianceGuard */
.vergelijk .kaart.is-uitgelicht {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-zacht), transparent 60%), var(--vlak);
}
.vergelijk .kaart.is-uitgelicht .nummer { color: var(--accent); }

/* Cijferblok */
.cijfer {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.03em;
    color: var(--tekst); line-height: 1.1;
}
.cijfer-label {
    font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--tekst-3);
}

/* Afsluitende oproep */
.oproep { max-width: 62ch; }
.oproep > * + * { margin-top: 1rem; }