/* ============================================================
 * accessibility.css
 *
 * Stellt sichtbare Tastatur-Fokus-Indikatoren wieder her
 * (Audit-Befund F8.H01 - WCAG 2.1 AA, 2.4.7 "Focus Visible").
 *
 * Strategie: an verschiedenen Stellen im Projekt steht
 * `outline: none` (teils mit !important). Wir ueberschreiben das
 * mit `:focus-visible`-Selektoren, die NUR bei Tastatur-Fokus greifen
 * (keine Maus-Klicks). Spezifitaet hoch + !important, damit auch die
 * !important-Setzungen in styles.css (Z. 2397, 2571) ueberschrieben werden.
 *
 * Diese Datei wird in includes/header.php als letztes CSS eingebunden,
 * damit der CSS-Cascade-Order stimmt.
 * ============================================================ */

:root {
    /* Fokus-Ring leitet sich aus dem Primary-Token ab – ein zentraler
       Theme-Wechsel zieht den Fokus-Ring automatisch mit. */
    --ofira-focus-ring-color:         color-mix(in srgb, var(--color-primary-600) 22%, transparent);
    --ofira-focus-ring-color-strong:  var(--color-primary-600);
    --ofira-focus-ring-color-warning: color-mix(in srgb, var(--color-warning-600) 55%, transparent);
}

/* Tastatur-Fokus fuer "echte" Aktionselemente (Buttons, Links, fokussierbare
   Rollen). Diese haben keine eigene Border und brauchen daher einen sichtbaren
   Ring, damit Tastatur-Navigation klar erkennbar ist. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--ofira-focus-ring-color-strong) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px var(--ofira-focus-ring-color) !important;
}

/* Formularfelder bekommen einen DEUTLICH zurueckhaltenderen Fokus:
   nur Border-Farb-Wechsel + dezenter 2px-Halo. Kein zusaetzlicher
   Outline-Doppelrahmen – die Felder haben bereits eine eigene Border,
   ein wuchtiger blauer Aussenring drumherum wirkte unruhig.            */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none !important;
    border-color: var(--ofira-focus-ring-color-strong) !important;
    box-shadow:   0 0 0 2px var(--ofira-focus-ring-color) !important;
}

/* Ausnahme: Command-Palette / globale Suche. Das geoeffnete Modal IST
   bereits der Fokus-Kontext (Overlay + Backdrop + aria-modal). Ein
   zusaetzlicher Halo um das Suchfeld waere visuelles Rauschen.
   Wir resetten die Focus-Visible-Effekte hier explizit zurueck.       */
.cmd-palette-input:focus,
.cmd-palette-input:focus-visible,
.cmd-palette-field:focus-within {
    outline:      none !important;
    box-shadow:   none !important;
    border-color: var(--form-border) !important;
}

/* Skip-Links muessen auch im hidden-Zustand fokussierbar sein */
.skip-link:focus,
.skip-link:focus-visible {
    outline: 2px solid var(--ofira-focus-ring-color-strong) !important;
    outline-offset: 2px !important;
    background: #fff !important;
    color: #111 !important;
}

/* Bei Maus-Klick (kein :focus-visible-Match) keinen Ring zeigen,
   damit das normale Hover/Active-Design nicht stoert. */
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Leichte Hervorhebung fuer Login-/Reset-Formular-Felder, damit
   die Pflichteingaben optisch gut auffindbar sind, ohne den
   Standard-Fokus-Ring zu verlieren. */
.login-page input:focus-visible,
.login-page select:focus-visible {
    outline-color: var(--ofira-focus-ring-color-strong) !important;
}

/* Hochkontrast-Vorlieben respektieren: hier explizit doch dicker, weil
   User mit `prefers-contrast: more` aktiv staerkere visuelle Indikatoren
   wuenschen. */
@media (prefers-contrast: more) {
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible,
    [role="button"]:focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 3px !important;
        box-shadow: 0 0 0 5px var(--ofira-focus-ring-color) !important;
    }
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .form-control:focus-visible,
    .form-select:focus-visible {
        outline: 2px solid currentColor !important;
        outline-offset: 1px !important;
        box-shadow: 0 0 0 3px var(--ofira-focus-ring-color) !important;
    }
}

/* Reduzierte Bewegung respektieren - keine Animationen auf Fokus */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}