/**
 * Matematyka ósmoklasisty: Shared a11y stylesheet
 * Wersja: 0.1.0
 *
 * Globalne reguły dostępności wymagane przez WCAG 2.1 AA:
 *  - 2.4.7 Focus Visible: każdy fokusowalny element musi mieć widoczny wskaźnik focus
 *  - 2.5.5 Target Size (AA): tap targets >= 44x44 CSS px (z wyjątkami)
 *  - 1.4.13 Content on Hover or Focus: focus-visible nie zasłania kontentu
 *
 * Importujemy ten plik PRZED CSS-em modułu żeby dało się nadpisać per-element.
 * Używamy :where() żeby specificity było 0: moduł może łatwo dostosować.
 */

/* === FOCUS-VISIBLE ===
 * Reguły wcześniej: brak. Tap-highlight był ustawiony na transparent w * regule
 * a żaden plik nie dodawał :focus-visible. Czytnik ekranu / klawiatura nie miały
 * wskaźnika focus.
 *
 * Używamy :focus-visible (nie :focus) żeby nie pokazywać outline po klikach myszą,
 * tylko po Tabie / nawigacji klawiaturowej.
 */
:where(button, a, [role="button"], [role="tab"], summary, label[for],
       input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #B461FF);
  outline-offset: 2px;
  border-radius: 6px;
  /* Subtelny dodatkowy ring na ciemnym tle żeby było widać */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

/* Specjalny case: textarea/input mają już własną ramkę, focus-offset zewnętrzny */
:where(textarea, input[type="text"], input[type="search"]):focus-visible {
  outline-offset: 2px;
  /* nie rób border-radius forcing: niech się dostosuje */
}

/* Skip-link dla użytkowników klawiatury (jeśli kiedyś dodamy) */
.skip-to-content:focus {
  position: fixed; top: 12px; left: 12px; z-index: 99999;
  padding: 12px 18px; background: var(--accent, #B461FF); color: white;
  border-radius: 8px; text-decoration: none; font-weight: 600;
}

/* === SCREEN READER ONLY ===
 * Klasa do dodawania kontekstu wyłącznie dla AT.
 */
.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;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static; width: auto; height: auto; padding: inherit; margin: inherit;
  overflow: visible; clip: auto; white-space: normal;
}

/* === REDUCED MOTION ===
 * (W większości plików już jest, ale dla pewności globalnie też.)
 */
@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;
  }
}