/* ==========================================================================
   LEJO interactieve kaart · basis en huisstijl-tokens
   Bron: Lejo huisstijlgids (2018, karakters.be)
   Primair: grijsgroen · Secundair: geel + groen · Neutraal: grijs
   ========================================================================== */

@font-face {
    font-family: "Alpha Echo";
    src: url("../assets/fonts/alpha-echo.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Huisstijlkleuren (altijd 100 % dekking) */
    --c-teal: #415c66;
    --c-teal-deep: #2f454d;
    --c-yellow: #eec216;
    --c-yellow-deep: #d6ad10;
    --c-green: #8cb63c;
    --c-green-deep: #77a02f;
    --c-gray: #9babb0;
    --c-orange: #d0661c;
    --c-blue: #28a4cf;

    /* Neutralen voor oppervlakken en tekst */
    --c-ink: #1f2f35;
    --c-ink-soft: #4b5c63;
    --c-paper: #ffffff;
    --c-paper-2: #f3f6f7;
    --c-line: #dfe6e9;

    /* Typografie */
    --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: "Alpha Echo", "Roboto", system-ui, sans-serif;
    --fs-base: 17px;
    --lh-body: 1.45;

    /* Beweging: één uitloop-curve voor alles, zodat het als één systeem voelt */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 180ms;
    --dur-base: 380ms;
    --dur-slow: 620ms;

    /* Maatvoering */
    --radius: 14px;
    --radius-pill: 999px;
    --touch: 56px;
    --shadow-1: 0 2px 8px rgba(31, 47, 53, 0.10);
    --shadow-2: 0 10px 30px rgba(31, 47, 53, 0.18);
    --shadow-3: 0 24px 60px rgba(31, 47, 53, 0.28);

    --pane-w: clamp(380px, 38vw, 540px);
    --drawer-w: clamp(320px, 30vw, 400px);
    --nav-h: 76px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --z-map: 1;
    --z-tools: 20;
    --z-slide: 30;
    --z-topbar: 40;
    --z-drawer: 50;
    --z-pane: 60;
    --z-nav: 70;
    --z-overlay: 90;
    --z-lightbox: 100;
}

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

html {
    /* --fs-scale komt van de URL-optie ?zoom= : grotere letters op een tv of beamer. */
    font-size: calc(var(--fs-base) * var(--fs-scale, 1));
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--c-ink);
    background: var(--c-paper-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Geen dubbeltik-zoom op de kaart; tekst blijft selecteerbaar en het contextmenu werkt gewoon. */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior: none;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { -webkit-user-drag: none; }

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    touch-action: manipulation;
}
button:disabled { cursor: default; }

a { color: var(--c-teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }

h1, h2, h3, h4, p, ul, dl, figure { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
    outline: 3px solid var(--c-yellow);
    outline-offset: 3px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
    width: 1.35em;
    height: 1.35em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1000;
    padding: .6rem 1rem;
    background: var(--c-yellow);
    color: var(--c-ink);
    border-radius: var(--radius-pill);
    font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ---- Display-typografie in huisstijl: Alpha Echo in gekleurd kader, tekst wit ---- */
.display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35em;
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
}
.tag {
    display: inline-block;
    padding: .28em .55em .2em;
    color: var(--c-paper);
    background: var(--c-teal);
    border-radius: 3px;
    transform-origin: center;
}
.tag--teal { background: var(--c-teal); }
.tag--green { background: var(--c-green); }
.tag--yellow { background: var(--c-yellow); color: var(--c-teal-deep); }
.tag--tilt-left { transform: rotate(-2deg); }
.tag--tilt-right { transform: rotate(2deg); }

/* ---- Knoppen ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--touch);
    padding: .8rem 1.6rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    letter-spacing: .01em;
    background: var(--c-teal);
    color: var(--c-paper);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.btn:active { transform: scale(.97); box-shadow: none; }
.btn--primary { background: var(--c-yellow); color: var(--c-teal-deep); }
.btn--primary:active { background: var(--c-yellow-deep); }
.btn--ghost { background: transparent; color: var(--c-paper); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
.btn--ghost:active { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 2px var(--c-paper); }
.btn--lg { font-size: 1.15rem; padding: 1rem 2.2rem; min-height: 64px; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--c-teal);
    background: var(--c-paper-2);
    transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.icon-btn:active { transform: scale(.92); background: var(--c-line); }

/* ---- Bewegingsreductie ---- */
@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
    *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}