/* =========================================================================
   H2 Centre for FID — Componenten
   Herbruikbare UI-onderdelen: glaskaart, toggle, voortgangsbalk, quiz-states.
   ========================================================================= */

/* --- Glassmorphism Card --- */
.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* --- Custom Toggle Checkbox --- */
.custom-toggle input:checked + div {
    border-color: #1D9E75;
    background-color: #E1F5EE;
    transform: scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(29, 158, 117, 0.2);
}
.custom-toggle input:checked + div .indicator {
    background-color: #1D9E75;
    border-color: #1D9E75;
}
.custom-toggle input:checked + div .indicator svg {
    opacity: 1;
}

/* --- Progress Bar --- */
.progress-bar-fill {
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Quiz answer states --- */
.quiz-option.locked { pointer-events: none; }
.quiz-option.correct { border-color: #0F6E56 !important; background-color: #E1F5EE !important; }
.quiz-option.incorrect { border-color: #A32D2D !important; background-color: #FCEBEB !important; opacity: 0.7; }

/* --- Mouse-hover animaties UITGESCHAKELD (op verzoek) ---
   Geen beweging/scale/zoom op muis-hover. Neutraliseert Tailwind utilities als
   hover:-translate-y-1, hover:scale-105 en group-hover:translate-x-1.
   Reveal-on-scroll blijft onaangeroerd; de checked-toggle scale (geen
   hover-animatie) wordt hieronder bewust opnieuw afgedwongen. */
/* Geen hover-BEWEGING (lift/scale), maar transitions blijven smooth.
   De hover-vertraging zat in de stagger-delays (zie globals.css), niet hier. */
*:hover { transform: none !important; }
.group:hover * { transform: none !important; }
.custom-toggle input:checked + div { transform: scale(1.02) !important; }

/* =========================================================================
   Regiokaart

   Een echte kaart van Nederland met klikbare provincies. Daaronder dezelfde
   keuze als lijst: kleine provincies halen op een telefoon het tikdoel van
   52 pixels uit de UX-specificatie niet, en dan moet er een tweede weg zijn.
   ========================================================================= */

.h2-kaart-houder {
    max-width: 340px;
    margin: 0 auto;
}

.h2-kaart {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.h2-kaart-regio path {
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linejoin: round;
    transition: fill 0.2s ease;
    cursor: pointer;
}

/* Hoe eerder aangesloten, hoe voller de kleur. */
.h2-kaart-regio.h2-zone-1 path { fill: #1D9E75; }
.h2-kaart-regio.h2-zone-2 path { fill: #A5DCC7; }
.h2-kaart-regio.h2-zone-3 path { fill: #CDEBE0; }
.h2-kaart-regio.h2-zone-4 path { fill: #E8E6DE; stroke-dasharray: 6 5; }

.h2-kaart-regio:hover path,
.h2-kaart-regio:focus-visible path { fill: #085041; }

.h2-kaart-regio:focus-visible { outline: none; }
.h2-kaart-regio:focus-visible path { stroke: #085041; stroke-width: 5; }

.h2-kaart-label {
    font-size: 26px;
    font-weight: 700;
    fill: #2C2C2A;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 5px;
    stroke-linejoin: round;
}

.h2-kaart-regio.h2-zone-1 .h2-kaart-label { fill: #ffffff; stroke: rgba(8, 80, 65, 0.5); }
.h2-kaart-regio:hover .h2-kaart-label,
.h2-kaart-regio:focus-visible .h2-kaart-label { fill: #ffffff; stroke: rgba(8, 80, 65, 0.6); }

/* --- Lijst onder de kaart --- */
.h2-regiolijst {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 620px;
    margin: 0 auto;
}

.h2-regio-knop {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(8, 80, 65, 0.15);
    background: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 600;
    color: #2C2C2A;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.h2-regio-knop.h2-zone-1 { background: #1D9E75; border-color: #1D9E75; color: #fff; }
.h2-regio-knop.h2-zone-2 { background: #E1F5EE; }
.h2-regio-knop.h2-zone-3 { background: #F4FBF8; }
.h2-regio-knop.h2-zone-4 { border-style: dashed; }

.h2-regio-knop:hover,
.h2-regio-knop:focus-visible { border-color: #1D9E75; background: #085041; color: #fff; }
.h2-regio-knop:focus-visible { outline: 2px solid #085041; outline-offset: 2px; }

/* Regiopagina */
.h2-regio-kop { border-left: 4px solid #1D9E75; padding-left: 16px; }