/* ==========================================================================
   ComplianceGuard — overgangslaag
   Voor de pagina's die nog op de oude opmaak draaien. Deze stylesheet komt
   ná css/style.css en zet alleen de kleuren om naar het thema; de opbouw
   van die pagina's blijft ongemoeid tot ze aan de beurt zijn voor een
   herbouw. Verdwijnt zodra de laatste pagina over is.
   ========================================================================== */

@import url("tokens.css");

body {
    background: var(--grond);
    color: var(--tekst);
    font-family: var(--sans);
}

/* --- Plekken waar de oude stylesheet een vaste lichte kleur zet -------- */
header {
    background: color-mix(in srgb, var(--grond) 92%, transparent) !important;
    border-bottom: 1px solid var(--lijn);
}
@supports not (color-mix(in srgb, red 50%, transparent)) {
    header { background: var(--grond) !important; }
}

.form-group input,
.form-group select,
.form-group textarea,
.form-group select option {
    background: var(--vlak) !important;
    color: var(--tekst);
    border-color: var(--lijn-sterk);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--tekst-3); }

.cookie-banner { background: var(--vlak) !important; border-top: 1px solid var(--lijn); }
.app-window-bar { background: var(--vlak-op) !important; }
.risk-meter-marker { background: var(--tekst) !important; }

/* --- Onderdelen die op een donkere grond anders moeten ----------------- */
.usp-card,
.feature-card,
.info-block,
.pricing-card,
.contact-item,
.article-card {
    background: var(--vlak);
    border: 1px solid var(--lijn);
}

.section-badge {
    color: var(--accent);
    background: var(--accent-zacht);
}

.cta-button,
.btn-primary {
    background: var(--accent);
    color: var(--accent-op);
}

footer { background: var(--vlak); border-top: 1px solid var(--lijn); }
footer a { color: var(--tekst-2); }
footer a:hover { color: var(--tekst); }

/* Tabellen in de juridische pagina's */
table { border-color: var(--lijn); }
th { background: var(--vlak-op); color: var(--tekst); }
td { border-color: var(--lijn); color: var(--tekst-2); }

/* --- Themaschakelaar in de bestaande navigatie ------------------------- */
.thema-knop {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; width: 38px; padding: 0;
    background: transparent; color: var(--tekst-2);
    border: 1px solid var(--lijn); border-radius: 5px;
    cursor: pointer; flex: none;
}
.thema-knop:hover { color: var(--tekst); border-color: var(--lijn-sterk); }
.thema-knop svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.thema-knop .icoon-maan { display: none; }
.thema-knop .icoon-zon  { display: block; }
[data-thema="licht"] .thema-knop .icoon-maan { display: block; }
[data-thema="licht"] .thema-knop .icoon-zon  { display: none; }

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

/* --- Logo in twee varianten ------------------------------------------- */
.logo .logo-donker { display: block; }
.logo .logo-licht  { display: none; }
[data-thema="licht"] .logo .logo-donker { display: none; }
[data-thema="licht"] .logo .logo-licht  { display: block; }