/**
 * GRIP — privacyverklaring (privacy.html). Golf 3, 2026-09-30.
 *
 * Was een inline <style>-blok in eigen violet (#7c3aed-header, violette
 * koppen, tabellen en focusring). Leunt nu op tokens.css: GRIP-merk
 * (magenta, logo-accentbalk), Inter/Plus Jakarta, warme neutralen, licht
 * en donker. Leesbreedte ongewijzigd (760px).
 * Contrast (licht): --text 13:1, --muted 5,7:1 op --surface; merklink
 * --brand-primary-text 6,04:1. Donker: --text 15:1, link 6,7:1.
 */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--surface);
}

a { color: var(--brand-primary-text); }
a:hover { color: var(--brand-solid-hover); }
[data-bs-theme="dark"] a:hover { color: var(--focus-ring); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    color: var(--on-brand);
    background: var(--brand-solid);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

/* Kop: neutraal vlak met het logo-palet als dunne accentbalk (zelfde taal
   als loan-sign.html), i.p.v. een volvlak violette balk. */
.site-header {
    position: relative;
    padding: var(--space-5) var(--space-6) var(--space-4);
    background: var(--surface-nav);
    border-bottom: 1px solid var(--hairline);
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--brand-gradient);
}
.site-header h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--text-strong);
}

nav.lang-switcher {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-6);
    background: var(--surface-2);
    border-bottom: 1px solid var(--hairline);
}
nav.lang-switcher a {
    padding: 0.25rem 0.75rem;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    border-radius: var(--radius-pill);
}
nav.lang-switcher a:hover { background: var(--fill-quiet-hover); color: var(--text-strong); }
nav.lang-switcher a[aria-current="page"] {
    color: var(--brand-primary-text);
    background: var(--brand-tint);
}

main { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem; }

section[lang] { display: none; }
section[lang].active { display: block; }

h2 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--text-strong);
    border-bottom: 1px solid var(--border);
}
h3 { margin-top: 1.5rem; margin-bottom: 0.25rem; font-size: 1.05rem; color: var(--text-strong); }

table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.5rem 0.75rem; text-align: left; border: 1px solid var(--border); }
th { font-weight: 600; color: var(--text-strong); background: var(--surface-2); }
tr:nth-child(even) td { background: var(--row-hover); }

code { color: var(--brand-primary-text); }

footer {
    margin-top: 3rem;
    padding: 1rem 1.5rem;
    font-size: 0.85rem;
    color: var(--muted);
    background: var(--surface-2);
    border-top: 1px solid var(--hairline);
}

@media (max-width: 600px) {
    main { padding: 1rem; }
    table { font-size: 0.8rem; }
    /* Brede tabellen scrollen in hun eigen vlak i.p.v. de pagina. */
    table { display: block; overflow-x: auto; }
}