/* ============================================================
   Fun4All Loop — gedeelde toegankelijkheidsregels
   Wordt op elke pagina geladen, ná de eigen stijl van de pagina,
   zodat deze regels altijd winnen.

   Doel: de site moet ook goed werken voor mensen die slecht zien,
   met een toetsenbord werken of een schermlezer gebruiken.
   ============================================================ */

/* ── 1. Zichtbare focus ──────────────────────────────────────
   Wie met de Tab-toets door de site gaat, moet altijd kunnen
   zien waar hij is. Een dubbele rand (donker + wit) blijft
   zichtbaar op zowel lichte als donkere vlakken. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #1A1A2E !important;
    outline-offset: 2px !important;
    border-radius: 4px;
    box-shadow: 0 0 0 6px #FFD700 !important;
}

/* Op donkere vlakken de kleuren omdraaien */
footer :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.cta-band :where(a, button):focus-visible,
.contact :where(a, button):focus-visible {
    outline-color: #FFFFFF !important;
    box-shadow: 0 0 0 6px #1A1A2E !important;
}

/* ── 2. Links herkenbaar zonder kleur ────────────────────────
   Kleur alleen is niet genoeg: wie kleurenblind is of slecht
   ziet, moet een link ook aan de streep kunnen herkennen. */
main p a:not([class]),
main li a:not([class]),
.faq-section a:not([class]),
.intro-section a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* ── 3. Klik- en tikvlakken groot genoeg (min. 44 x 44 px) ── */
:where(nav a, .nav-links a, .mobile-menu a, .btn-register, button, .cat-btn) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-links a, .mobile-menu a { padding-top: .55rem; padding-bottom: .55rem; }

/* ── 4. Rustig leesbare lopende tekst ───────────────────────
   Grotere regelafstand en niet te lange regels leest een stuk
   makkelijker, zeker bij vergroting of dyslexie. */
main p { line-height: 1.75; }
main p, main li { hyphens: none; word-break: normal; overflow-wrap: break-word; }

/* ── 5. Meegroeien bij inzoomen ─────────────────────────────
   Tekst mag nooit worden afgekapt als iemand tot 200% inzoomt. */
h1, h2, h3, h4, p, li, label, button, a { overflow-wrap: break-word; }

/* ── 6. Extra contrast als het besturingssysteem daarom vraagt ── */
@media (prefers-contrast: more) {
    :root {
        --text-body: #1A1A2E;
        --orange: #A32F14;
        --purple: #452C7D;
        --green: #14603B;
        --pink: #8F2758;
    }
    main p, main li { color: #1A1A2E; }
    :where(input, select, textarea) { border-color: #1A1A2E !important; }
    .card, .value-card, .goal-item, .route-card, .help-card, .package-card,
    .why-item, .offer-item, .product-card { border: 2px solid #1A1A2E; }
}

/* ── 7. Minder beweging als iemand dat instelt ────────────── */
@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;
    }
    .fade-in { opacity: 1 !important; transform: none !important; }
}

/* ── 8. Alleen voor schermlezers ───────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}