/* educatie.io — de publieke site (landing + over).
 *
 * Dit is bewust een tweede, losstaand designsysteem: de app is Material 3 in
 * blauw (tokens.css), de site is een werkschrift in groen/oranje met harde
 * offset-schaduwen. De twee raken elkaar niet — de sitepagina's erven van
 * templates/educatie/basis.html en laden tokens.css/componenten.css/style.css
 * níet. Zie ADR-0022.
 *
 * De waarden hieronder komen uit het Claude-Design-project
 * "educatie.io Design System" (3b1d87f9-6c1b-4081-a3e8-001079137f8c). Voeg
 * geen losse hex toe: zet hem hier bij de tokens.
 */

/* ==================================================================
 * Tokens
 * ================================================================== */

.site {
    /* --- Groen: de hoofdkleur (#35BA00 komt uit de oude educatie.css) --- */
    --green-700: #1f6e00;
    --green-600: #2a9400;
    --green-500: #35ba00;
    --green-400: #5fd62e;
    --green-200: #c6f0b0;
    --green-100: #e9f8df;

    /* --- Oranje: de tweede stem (#FF7C00, idem) --- */
    --orange-700: #a84d00;
    --orange-600: #d96400;
    --orange-500: #ff7c00;
    --orange-200: #ffd9b0;
    --orange-100: #ffeedb;

    /* --- Inkt: warm bijna-zwart. Doet alle tekst, randen en schaduwen --- */
    --ink-900: #141410;
    --ink-800: #23231d;
    --ink-700: #39392f;

    /* --- Steen: de enige neutralen --- */
    --stone-500: #7a7a6c;
    --stone-300: #c4c4b8;
    --stone-200: #e0e0d6;
    --stone-100: #eeeee7;
    --paper: #faf9f5;
    --wit: #ffffff;

    /* --- Rollen --- */
    --text-strong: var(--ink-900);
    --text-body: var(--ink-700);
    --text-muted: var(--stone-500);
    --text-link: var(--green-700);
    --text-link-hover: var(--orange-600);

    /* --- Typografie --- */
    --font-core: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --text-2xs: 12px;
    --text-xs: 13px;
    --text-sm: 15px;
    --text-base: 16px;
    --text-xl: 21px;
    --text-2xl: 26px;
    --text-4xl: 40px;
    --text-5xl: 50px;
    --tracking-tight: -0.015em;
    --tracking-snug: -0.005em;
    --tracking-label: 0.1em;

    --type-display: 700 var(--text-5xl) / 1.1 var(--font-core);
    --type-h1: 700 var(--text-4xl) / 1.1 var(--font-core);
    --type-h2: 600 var(--text-2xl) / 1.25 var(--font-core);
    --type-h3: 600 var(--text-xl) / 1.25 var(--font-core);
    --type-lead: 400 var(--text-xl) / 1.5 var(--font-core);
    --type-body: 400 var(--text-base) / 1.65 var(--font-core);
    --type-small: 400 var(--text-sm) / 1.5 var(--font-core);
    --type-label: 600 var(--text-2xs) / 1 var(--font-core);
    --type-code: 400 var(--text-xs) / 1.5 var(--font-mono);

    /* --- Ruimte (basis 4px) --- */
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 12px;
    --space-6: 16px;
    --space-7: 20px;
    --space-8: 24px;
    --space-9: 32px;
    --space-10: 40px;
    --space-11: 48px;
    --space-12: 64px;
    --space-13: 80px;
    --space-14: 96px;

    /* --- Hoeken: bijna vierkant --- */
    --radius-xs: 2px;
    --radius-sm: 3px;

    /* --- Randen: 1.5px inkt is de standaard, 3px groen is de merkbalk --- */
    --stroke-hair: 1px;
    --stroke-thin: 1.5px;
    --stroke-thick: 2px;
    --stroke-heavy: 3px;

    /* --- Maten --- */
    --container-lg: 1080px;
    --gutter-page: clamp(20px, 5vw, 64px);
    --hoogte-navbar: 72px;

    /* --- Schaduw: hard, geen blur. Nooit blur op iets ín de pagina --- */
    --shadow-hard-xs: 1px 1px 0 var(--ink-900);
    --shadow-hard-sm: 2px 2px 0 var(--ink-900);
    --shadow-hard-md: 4px 4px 0 var(--ink-900);
    --shadow-hard-lg: 6px 6px 0 var(--ink-900);
    --ring-focus: 0 0 0 3px var(--green-200);

    /* --- Arcering: de enige decoratieve vulling --- */
    --hatch-ink: repeating-linear-gradient(45deg, var(--stone-200) 0 2px, transparent 2px 7px);

    /* --- Beweging: kort en mechanisch, geen bounce --- */
    --duration-fast: 130ms;
    --duration-base: 190ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-control:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

/* ==================================================================
 * Basis
 * ================================================================== */

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

body.site {
    margin: 0;
    background: var(--paper);
    color: var(--text-body);
    font: var(--type-body);
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

/* Ook hier nul specificiteit: een kop in het inkt-blok moet papierkleurig
 * kunnen worden zonder dat de basisregel hem terugtrekt naar inkt. */
:where(.site) :where(h1, h2, h3) {
    margin: 0;
    color: var(--text-strong);
    letter-spacing: var(--tracking-tight);
}

:where(.site) :where(p, ul) {
    margin: 0;
}

/* Nul specificiteit (`:where`), zodat elke componentklasse — .knop, .wordmerk,
 * .instap — de kleur zonder gevecht overneemt. Zonder dit wint de basisregel
 * van een enkele klasse en wordt elke knoptekst groen. */
:where(.site) :where(a) {
    color: var(--text-link);
    text-decoration: none;
    transition: var(--transition-control);
}

:where(.site) :where(a:hover) {
    color: var(--text-link-hover);
}

.site ::selection {
    background: var(--green-200);
    color: var(--ink-900);
}

.site :focus-visible {
    outline: var(--stroke-thick) solid var(--green-600);
    outline-offset: 2px;
}

/* Iconen zijn Lucide-lijnglyphs; ze nemen currentColor over en staan altijd
 * naast een label (nooit als enige betekenisdrager). */
.site .ico {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Maat komt van de plek waar het icoon staat, niet van een losse klasse. */
.instap__icoon .ico {
    width: 32px;
    height: 32px;
}

.site-footer__mail .ico {
    width: 16px;
    height: 16px;
}

/* ==================================================================
 * Schil: navbar, canvas, footer
 * ================================================================== */

.site-navbar {
    display: flex;
    align-items: center;
    gap: var(--space-9);
    height: var(--hoogte-navbar);
    padding: 0 var(--gutter-page);
    background: var(--paper);
    border-bottom: var(--stroke-heavy) solid var(--green-500);
}

.site-navbar__nav {
    display: flex;
    align-items: center;
    gap: var(--space-7);
    margin-left: auto;
}

.site-navbar__link {
    font: 600 var(--text-sm) / 1 var(--font-core);
    color: var(--text-body);
    padding-bottom: var(--space-2);
    border-bottom: var(--stroke-thick) solid transparent;
}

.site-navbar__link:hover {
    color: var(--ink-900);
}

.site-navbar__link.is-actief {
    color: var(--ink-900);
    border-bottom-color: var(--green-500);
}

/* Het wordmerk is de identiteit — er is geen logobestand. */
.wordmerk {
    font: 800 var(--text-xl) / 1 var(--font-core);
    letter-spacing: var(--tracking-tight);
    color: var(--ink-900);
}

.wordmerk:hover {
    color: var(--ink-900);
}

.wordmerk__io {
    color: var(--green-500);
}

.wordmerk--inverse {
    color: var(--paper);
}

.wordmerk--inverse:hover {
    color: var(--paper);
}

.site-sectie {
    padding: 0 var(--gutter-page) var(--space-13);
}

.site-sectie--eerste {
    padding-top: var(--space-14);
}

.site-sectie--laatste {
    padding-bottom: var(--space-14);
}

.site-breed {
    max-width: var(--container-lg);
    margin: 0 auto;
}

.site-footer {
    background: var(--ink-900);
    color: var(--stone-300);
    padding: var(--space-12) var(--gutter-page);
    border-top: var(--stroke-heavy) solid var(--green-500);
}

.site-footer__kolommen {
    max-width: var(--container-lg);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-11);
}

.site-footer__kolom {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.site-footer__kop {
    font: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--green-400);
}

.site-footer__kolom p,
.site-footer__kolom a {
    font: var(--type-small);
    color: var(--stone-300);
}

.site-footer__kolom a:hover {
    color: var(--green-400);
}

.site-footer__voet {
    max-width: var(--container-lg);
    margin: var(--space-11) auto 0;
    padding-top: var(--space-6);
    border-top: var(--stroke-hair) solid var(--ink-700);
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    font: var(--type-code);
    color: var(--stone-500);
}

.site-footer__mail {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--stone-500);
}

/* ==================================================================
 * Hero
 * ================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-14) var(--gutter-page) var(--space-12);
}

/* De arcering ligt achter de hero op halve dekking — geen ruis, geen beeld. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hatch-ink);
    opacity: 0.5;
    pointer-events: none;
}

.hero__inhoud {
    position: relative;
    max-width: var(--container-lg);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
}

.hero__titel {
    font: var(--type-display);
    max-width: 900px;
}

.hero__lead {
    font: var(--type-lead);
    max-width: 660px;
    color: var(--text-body);
}

/* Het groene streepje onder de kop: dezelfde 3px-balk als in de navbar. */
.merkbalk {
    height: var(--stroke-heavy);
    width: 200px;
    background: var(--green-500);
}

/* ==================================================================
 * Badge
 * ================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    height: 22px;
    padding: 0 var(--space-4);
    font: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    border: var(--stroke-hair) solid var(--ink-900);
    border-radius: var(--radius-xs);
    background: var(--stone-100);
    color: var(--ink-800);
}

.badge--accent {
    background: var(--green-500);
    color: var(--ink-900);
}

.badge--zacht {
    background: var(--green-100);
    color: var(--green-700);
    border-color: var(--green-600);
}

.badge--secundair {
    background: var(--orange-500);
    color: var(--ink-900);
}

/* ==================================================================
 * Knoppen — groen en oranje krijgen altijd inkt-tekst, nooit wit
 * ================================================================== */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    height: 42px;
    padding: 0 var(--space-7);
    font: 700 var(--text-sm) / 1 var(--font-core);
    letter-spacing: var(--tracking-snug);
    border: var(--stroke-thin) solid var(--ink-900);
    border-radius: var(--radius-xs);
    background: var(--green-500);
    color: var(--ink-900);
    box-shadow: var(--shadow-hard-sm);
    cursor: pointer;
    transition: var(--transition-control);
}

.knop:hover {
    color: var(--ink-900);
}

.knop--secundair {
    background: var(--orange-500);
}

.knop--inkt {
    background: var(--ink-900);
    color: var(--paper);
}

.knop--inkt:hover {
    color: var(--paper);
}

.knop--licht {
    background: var(--paper);
    border-color: var(--paper);
}

.knop--outline {
    background: transparent;
    box-shadow: none;
}

.knop--outline:hover {
    background: var(--ink-900);
    color: var(--paper);
}

.knop--klein {
    height: 32px;
    padding: 0 var(--space-5);
    font-size: var(--text-xs);
}

/* Opgepakt worden: schaduw groeit, element schuift een pixel naar de kier. */
.knop:not(.knop--outline):not([disabled]):hover {
    box-shadow: var(--shadow-hard-md);
    transform: translate(-1px, -1px);
}

.knop:not([disabled]):active {
    box-shadow: var(--shadow-hard-xs);
    transform: translate(1px, 1px);
}

.knop[disabled],
.knop.is-uit {
    opacity: 0.42;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* ==================================================================
 * Kaarten
 * ================================================================== */

/* De grote instaptegels: de hele tegel is de link, met een accentbalk bovenop. */
.instap {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-9);
    background: var(--wit);
    border: var(--stroke-thin) solid var(--ink-900);
    border-top: var(--space-2) solid var(--green-500);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hard-md);
    color: var(--text-body);
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.instap:hover {
    color: var(--text-body);
    box-shadow: var(--shadow-hard-lg);
    transform: translate(-2px, -2px);
}

.instap__icoon {
    display: flex;
    color: var(--green-500);
}

.instap__titel {
    font: var(--type-h2);
}

.instap__tekst {
    flex: 1;
}

.instap--secundair {
    border-top-color: var(--orange-500);
}

.instap--secundair .instap__icoon {
    color: var(--orange-500);
}

/* Nog niet af: staat er wel, doet niets, en zegt dat er eerlijk bij. */
.instap--binnenkort {
    border-top-color: var(--stone-300);
    box-shadow: var(--shadow-hard-sm);
    cursor: default;
}

.instap--binnenkort:hover {
    box-shadow: var(--shadow-hard-sm);
    transform: none;
}

.instap--binnenkort .instap__icoon {
    color: var(--stone-500);
}

.instap__kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
}

/* Het schaakbord van de overzichtspagina: wit en steen om en om. */
.infokaart {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-8);
    background: var(--wit);
    border: var(--stroke-thin) solid var(--ink-900);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hard-sm);
}

.infokaart--wissel {
    background: var(--stone-100);
}

.infokaart__titel {
    font: var(--type-h3);
}

.infokaart__lijf {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    flex: 1;
}

.infokaart__lijf ul {
    padding-left: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.infokaart__voet {
    padding-top: var(--space-5);
    border-top: var(--stroke-hair) solid var(--stone-200);
}

.infokaart__link {
    font: 700 var(--text-sm) / 1 var(--font-core);
    border-bottom: var(--stroke-thin) solid var(--orange-200);
    padding-bottom: 2px;
}

.infokaart__link:hover {
    border-bottom-color: var(--orange-500);
}

/* Het inkt-blok onderaan een pagina. Vlak, geen gradient. */
.inktblok {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-12);
    background: var(--ink-900);
    border-radius: var(--radius-sm);
}

.inktblok__titel {
    font: var(--type-h1);
    color: var(--paper);
}

.inktblok__tekst {
    font: var(--type-lead);
    color: var(--stone-300);
    max-width: 660px;
}

.inktblok__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-4);
}

/* ==================================================================
 * Roosters en sectiekopjes
 * ================================================================== */

.rooster {
    display: grid;
    gap: var(--space-8);
}

.rooster--2 {
    grid-template-columns: repeat(2, 1fr);
}

.rooster--3 {
    grid-template-columns: repeat(3, 1fr);
}

.sectiekop {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.sectiekop__label {
    font: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.sectiekop__lijn {
    flex: 1;
    height: 1px;
    background: var(--stone-300);
}

.paginakop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    max-width: 840px;
    margin-bottom: var(--space-11);
}

.paginakop__titel {
    font: var(--type-display);
}

.paginakop__lead {
    font: var(--type-lead);
    color: var(--text-body);
}

/* ==================================================================
 * Smallere schermen — één kolom onder 720px (readme: Layout)
 * ================================================================== */

@media (max-width: 960px) {
    .rooster--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__kolommen {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .site {
        --text-5xl: 34px;
        --text-4xl: 28px;
    }

    .rooster--2,
    .rooster--3,
    .site-footer__kolommen {
        grid-template-columns: 1fr;
    }

    .site-navbar {
        height: auto;
        flex-wrap: wrap;
        gap: var(--space-5);
        padding: var(--space-5) var(--gutter-page);
    }

    .site-navbar__nav {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .inktblok {
        padding: var(--space-9);
    }

    .site-footer__voet {
        flex-direction: column;
    }
}

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

/* Eén hulpklasse, zodat een template geen inline stijl nodig heeft. */
.site .ruimte-boven {
    margin-top: var(--space-12);
}