/* =========================================================================
   BASE.CSS
   Design tokens, reset, typografie, layout helpers, reduced motion.
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
    --bg: #c9d09a;
    --bg-deep: #b8c186;
    --dark: #2F4F4F;
    --paper: #faf7ed;
    --paper-soft: #fefcf6;
    --accent: #c08552;
    --accent-deep: #8b5a3c;
    --ink: #1f2820;
    --line: rgba(47, 79, 79, 0.18);
    --warn: #8b3a2a;
    --warn-deep: #6e2b1f;

    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
}


/* =========================================================================
   2. RESET, BASE & TYPOGRAFIE
   ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

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

html { scroll-behavior: smooth; background: var(--dark); overflow-x: hidden; }

body {
    font-family: 'General Sans', sans-serif;
    background-color: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    /* Geen overflow-x: hidden hier: dat maakt body een knipvlak en kapt het
       uitklapmenu af op korte pagina's (zoals de kassa). html vangt het al af. */
    overflow-wrap: break-word;
}

/* Vloeiende overgang tussen pagina's in plaats van een wit scherm (View Transitions).
   Browsers die dit niet kennen, zoals Firefox, laden de pagina gewoon zoals altijd.
   De header heeft een eigen view-transition-name (header.css) en blijft dus staan. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.2s; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* Het hidden-attribuut wint altijd, ook van display-regels op knoppen en kaarten */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
    font-family: 'Clash Display', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* Gouden regel: een h1 of h2 breekt nooit uit zichzelf naar een nieuwe regel.
   Een <br> in de opmaak breekt wel, dus de koppen met .accent-block houden
   hun twee regels. Past een kop niet in zijn kolom, dan verkleint
   static/js/kop-passend.js hem tot hij past. */
h1, h2 {
    white-space: nowrap;
    hyphens: manual;
    overflow-wrap: normal;
}


/* =========================================================================
   3. LAYOUT HELPERS
   ========================================================================= */
.wrapper { width: min(1240px, 92%); margin: auto; position: relative; }


/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .accent-block,
    .notification-bar,
    .summary-card,
    .event-date,
    .step-card,
    .step-card:nth-child(1),
    .step-card:nth-child(2),
    .step-card:nth-child(3) {
        transform: none;
    }
}