/**
 * Technik Informatyk: 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;
}

/* === TARGET SIZE (WCAG 2.5.5 AA): Etap 11 naprawa F1 ===
 * Wszystkie kontrolki interaktywne muszą mieć minimum 44×44 CSS px.
 * Używam :where() żeby specificity było 0, można nadpisać per-element jeśli
 * design wymaga (np. dense table inline buttons).
 *
 * Audyt F1 wymienił konkretne miejsca: .topbar-action, .change-btn, .breadcrumb,
 * .chip, .opt-btn, .self-eval-item, .quiz-next, .quiz-btn, .search-clear.
 * Reguła globalna pokrywa wszystkie + przyszłe komponenty.
 */
:where(button,
       [role="button"],
       [role="checkbox"],
       [role="radio"],
       a.breadcrumb,
       a.btn-like,
       label.btn-like,
       .chip,
       .opt-btn,
       .self-eval-item,
       .topbar-action,
       .change-btn,
       .quiz-next,
       .quiz-btn) {
  min-height: 44px;
}
/* Wyjątek: clear button w search input, minimum 36×36 z większym hit-area
 * przez padding (nie ma sensu być pełnowymiarowy bo to inline w input). */
.search-clear {
  min-width: 36px;
  min-height: 36px;
}

/* === 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;
  }
}