/* ══════════════════════════════════════════════════════════════
   a11y.css — dostepnosc: skip link, widoczny fokus, .sr-only

   Ladowany z includes/head.php JAKO OSTATNI arkusz, juz po styles.css
   i po $pageCss. To jest celowe: kilka plikow (styles.css, payment.css,
   contactus.css, support.css) ustawia na polach `outline: none` bez
   zadnego zamiennika, wiec fokus klawiaturowy byl tam niewidoczny.
   Ten plik musi wygrac kaskade, zeby go przywrocic.

   WCAG 2.1 AA: 2.4.1 (Bypass Blocks), 2.4.7 (Focus Visible),
   1.4.11 (Non-text Contrast) — pierscien fokusu ma kontrast >= 3:1
   zarowno na ciemnym tle strony, jak i na jasnych kartach formularzy.
   ══════════════════════════════════════════════════════════════ */

:root {
  --a11y-ring: #0cb5d2;
}

/* ── Skip link ──────────────────────────────────────────────────
   Poza ekranem do czasu otrzymania fokusu. Nie uzywamy display:none
   ani visibility:hidden — te wykluczyly by go z kolejnosci tabulacji,
   czyli dokladnie z tego, do czego sluzy.                          */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translateY(-120%);
  padding: .7rem 1.25rem;
  border: 2px solid var(--a11y-ring);
  border-radius: 0 0 .6rem 0;
  background: #05010a;
  color: #fff;
  font-family: var(--font, inherit);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ── Widoczny fokus klawiaturowy ────────────────────────────────
   :focus-visible, nie :focus — mysz i dotyk nie dostaja pierscienia,
   bo to zmienialoby wyglad strony przy zwyklym klikaniu.

   JEDEN cienki kontur, nic wiecej. Wczesniej bylo tu outline + halo
   z box-shadow (+ trzeci cien w modalach), czyli trzy pierscienie
   i ok. 8 px grubosci. Do tego `border-radius: inherit` nadpisywalo
   wlasne zaokraglenie elementu wartoscia rodzica, wiec zafokusowany
   przycisk potrafil zmienic ksztalt.

   `outline` sam podaza za `border-radius` elementu — nic nie trzeba
   ustawiac, byle mu tego nie psuc.                                  */
:focus-visible {
  outline: 2px solid var(--a11y-ring);
  outline-offset: 2px;
}

/* Na jasnych kartach (platnosc, kontakt, wsparcie, newsletter) cyjan
   ma na bieli tylko ok. 2,5:1. Ciemniejszy odcien daje 4,5:1 przy tej
   samej grubosci — WCAG 1.4.11 wymaga 3:1 dla elementow nietekstowych. */
.pay-input:focus-visible,
.contact-input:focus-visible,
.contact-textarea:focus-visible,
.support-input:focus-visible,
.support-textarea:focus-visible,
.settings-input:focus-visible,
.newsletter-input:focus-visible,
.newsletter-select:focus-visible {
  outline-color: #0a7f93;
  outline-offset: 1px;
}

/* Kontenery, ktore fokusujemy programowo (cel skip linka, modale
   z js/a11y.js) — maja przyjac fokus, ale nie rysowac obwodki. */
#main-content:focus,
[data-a11y-dialog]:focus {
  outline: none;
}

/* ── Tekst tylko dla czytnikow ekranu ───────────────────────────
   Dla etykiet, ktorych projekt graficzny nie przewiduje, a ktore
   pole formularza musi miec (WCAG 3.3.2 Labels or Instructions).   */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Wariant, ktory staje sie widoczny po otrzymaniu fokusu. */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ── Zamkniete overlaye znikaja z kolejnosci tabulacji ──────────
   .modal-overlay i #cookie-modal w stanie zamknietym byly tylko
   przezroczyste (opacity:0 + pointer-events:none), a #cookie-bar
   tylko zsuniety za krawedz ekranu. Mysz ich nie widziala, ale
   klawiatura owszem: Tab wchodzil w niewidoczne pola logowania,
   rejestracji i w przyciski zgody na cookies na kazdej stronie.
   visibility:hidden usuwa je z kolejnosci tabulacji i z drzewa
   dostepnosci. WCAG 2.4.3 (Focus Order), 2.4.7 (Focus Visible).

   Opoznienie przejscia visibility trzyma dotychczasowe zanikanie:
   przezroczystosc schodzi przez 0.18s, dopiero potem element
   znika. Bez tego modal gasilby sie skokowo.                      */
.modal-overlay {
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.modal-overlay:not(.open) {
  visibility: hidden;
}
.modal-overlay.open {
  visibility: visible;
  transition: opacity .18s ease, visibility 0s linear 0s;
}

#cookie-modal {
  transition: opacity .25s ease, visibility 0s linear .25s;
}
#cookie-modal:not(.cm-open) {
  visibility: hidden;
}
#cookie-modal.cm-open {
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}

#cookie-bar:not(.cb-visible) {
  visibility: hidden;
}
#cookie-bar.cb-visible {
  visibility: visible;
}

/* ── Kursor na sterowaniach udawanych divem ────────────────────── */
[role="button"],
[role="checkbox"] {
  cursor: pointer;
}

/* ── NIE dodawac tu globalnego prefers-reduced-motion ───────────
   Byla tu regula gaszaca `*` przez animation-duration/.01ms !important.
   U kogokolwiek z wlaczonym ograniczeniem animacji w systemie psula
   cala strone naraz: znikaly animacje pojawiania sie sekcji, Swiper
   przeskakiwal slajdy natychmiast zamiast przewijac, a autoplay
   karuzeli funkcji przestawal byc widoczny. Selektor `*` z !important
   trafia takze w przejscia, na ktorych opiera sie logika bibliotek —
   to nie jest bezpieczny sposob realizacji tego wymagania.

   Poza tym WCAG 2.3.3 (Animation from Interactions) to poziom AAA,
   a nie AA, wiec EAA tego nie wymaga. Jesli kiedys wracamy do tematu:
   wyliczyc konkretne dekoracje (tlo hero, czastki), nigdy `*`,
   i wylaczyc autoplay Swipera jego wlasnym API, a nie CSS-em.        */