/**
 * psiako.pl — base / utilities.
 *
 * Wartości poniżej to standardowa technika dostępności WordPressa (clip),
 * nie wartości designu — pozostają surowe (1px / -1px / rect(...)).
 */

/* Motyw nadrzędny ukrywa .screen-reader-text przez display:none —
   przywracamy dostępność dla czytników standardową techniką clip-path
   (bez przestarzałego `clip` — `clip-path: inset(50%)` wystarcza). */
.screen-reader-text,
.sr-only {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  overflow-wrap: normal;
}

/* Skip link (WCAG 2.4.1) — ukryty, widoczny po sfokusowaniu klawiaturą.
   Wartości layoutu = tokeny; ukrycie = ta sama technika co .sr-only. */
.psiako-skip-link {
  position: absolute;
  z-index: var(--z-toast);
  top: -100vh;
  left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  text-decoration: none;
  clip-path: inset(50%);
}

.psiako-skip-link:focus {
  top: var(--space-2);
  clip-path: none;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Cel dotykowy min. 24×24 px (WCAG 2.5.8) — przycisk „pokaż hasło" WC (22 px domyślnie) */
.show-password-input,
button.show-password-input {
  min-width: 24px;
  min-height: 24px;
}

/* Focus/anchor scroll — rezerwuj miejsce na przyklejony nagłówek, żeby sfokusowany
   element ani cel skip-linku nie chował się pod headerem (WCAG 2.4.11 Focus Not Obscured). */
html {
  scroll-padding-top: calc(var(--header-height) + var(--space-3));
}

/* Off-canvas panele (minikoszyk `position: fixed; translateX(100%)`) potrafią rozciągnąć
   `scrollWidth` → poziomy scroll (WCAG 1.4.10 Reflow). `clip` (nie `hidden`) nie tworzy
   kontekstu przewijania — `position: sticky` w środku dalej działa. */
html,
body {
  overflow-x: clip;
}

/* ── Widoczny fokus klawiaturowy (WCAG 2.4.7 Focus Visible) ───────────────────
   Jeden spójny pierścień dla CAŁEGO frontu. `!important` celowo — kryterium 2.4.7
   nie podlega negocjacji, żaden komponent nie może wyłączyć wskaźnika fokusu.
   `:focus-visible` = tylko nawigacja klawiaturą. */
/* stylelint-disable declaration-no-important */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}

/* Kontrolki na zdjęciu / ciemnym tle — jasny pierścień + ciemny „cień" dla kontrastu na każdym tle */
.psiako-gallery__arrow:focus-visible,
.psiako-gallery__zoom:focus-visible,
.psiako-gallery__dot:focus-visible,
.psiako-lightbox__close:focus-visible,
.psiako-lightbox__nav:focus-visible,
.psiako-lightbox__dot:focus-visible,
.hero-dot:focus-visible,
.hero-prev:focus-visible,
.hero-next:focus-visible,
.hero-pause:focus-visible,
.psiako-cslider__arrow:focus-visible {
  outline: 2px solid var(--color-on-dark) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgb(0 0 0 / 45%) !important;
}

/* Ograniczenie ruchu globalnie (WCAG 2.3.3 / 2.2.2) — łapie też komponenty
   parenta/wtyczek z surowymi wartościami transition (tokeny motion → 0 są już
   w tokens.css). `!important` konieczne by przebić inline/wysoką specyficzność. */
@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;
  }
}
/* stylelint-enable declaration-no-important */