/* ===========================================================================
   01 — FUNDAMENT

   Reset, typografia bazowa i — co ważniejsze — KLASY POMOCNICZE PKP, które
   pełnią funkcję, a nie dekorację.

   ⚠ NAJWAŻNIEJSZA RZECZ W TYM PLIKU: `pkp_screen_reader`. Szablony PKP używają
     jej w 17 plikach do tekstów przeznaczonych wyłącznie dla czytników ekranu
     („Otwórz menu", „Wymagane", legendy pól). Motyw Default definiuje ją
     w `lib/pkp/styles/helpers.less`, którego my nie dziedziczymy. Pominięcie
     tej jednej reguły sprawia, że wszystkie te teksty stają się WIDOCZNE —
     natychmiastowa i bardzo widoczna regresja. To nie jest kosmetyka i dlatego
     nie czeka na fazę dostępności.
   =========================================================================== */

/* --- reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--eos-tlo);
  color: var(--eos-atrament);
  font-family: var(--eos-bezszeryf);
  font-size: var(--eos-pismo-16);
  line-height: var(--eos-interlinia-tekst);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* Obraz nigdy szerszy od kolumny — najczęstsza przyczyna przewijania
   w poziomie na telefonie. */
img, svg, video, iframe, embed, object { max-width: 100%; }
img, svg, video { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

/* --- typografia bazowa ---------------------------------------------------- */

a {
  color: var(--eos-blekit);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--eos-blekit-ciemny);
  text-decoration: underline;
}

/* ⚠ WIDOCZNY FOKUS. Motyw Default dawał go w spadku; budując od zera trzeba
   go zadeklarować, inaczej nawigacja klawiaturą staje się niemożliwa do
   śledzenia. `:focus-visible`, żeby nie pokazywać obwódki przy kliknięciu myszą. */
:focus-visible {
  outline: 2px solid var(--eos-blekit);
  outline-offset: 2px;
}

/* ⚠ OBWÓDKA FOKUSU MUSI ZMIENIAĆ KOLOR RAZEM Z TŁEM. Błękit `--eos-blekit`
   na atramencie daje 2,18:1, a wewnątrz paska ogłoszeniowego — 1,00:1, czyli
   znika całkowicie. Osoba nawigująca klawiaturą traci wtedy jedyną informację
   o tym, gdzie jest. Wyliczone dla wszystkich ciemnych powierzchni motywu. */
.eos_hero :focus-visible,
.eos_stopka :focus-visible,
.eos_karta--ciemna :focus-visible,
.eos_pelny_tekst :focus-visible,
.eos_tabela thead :focus-visible,
.header_view :focus-visible { outline-color: var(--eos-blekit-jasny); }
.eos_pasek :focus-visible { outline-color: var(--eos-tlo); }

::selection {
  background: var(--eos-blekit-jasny);
  color: var(--eos-atrament);
}

hr {
  border: 0;
  border-top: var(--eos-linia) solid var(--eos-atrament-12);
  margin: var(--eos-odstep-32) 0;
}

/* Tabele w treściach redakcyjnych przewijają się WEWNĄTRZ swojego pudełka,
   zamiast rozpychać stronę. */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: var(--eos-waga-zwykla); }

/* ⚠ DŁUGIE CIĄGI BEZ SPACJI (adresy URL w treściach redakcyjnych, numery kont,
   adresy e-mail) to druga najczęstsza przyczyna przewijania na telefonie.
   `anywhere` łamie je dopiero wtedy, gdy nie ma innego wyjścia. */
p, li, dd, dt, td, th, figcaption { overflow-wrap: anywhere; }

/* --- klasy pomocnicze PKP (kontrakt niepisany) ---------------------------- */

/* ⚠ Tekst wyłącznie dla czytników ekranu. Bez tej reguły staje się widoczny.
   Technika: element pozostaje w drzewie dostępności (nie `display: none`),
   ale jest przycięty do jednego piksela poza widokiem. */
.pkp_screen_reader,
.pkp_help_text--screenReader {
  position: absolute !important;
  /* Wymiary też z `!important`: ta klasa bywa doklejana do elementów, którym
     inne warstwy nadają szerokość (np. `legend` w formularzach). Przegrana
     w specyficzności oznacza tu nie „brzydko", tylko widoczny tekst i
     przepełnienie strony w poziomie. */
  width: 1px !important;
  height: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Odsyłacz „przejdź do treści" — ukryty, dopóki nie dostanie fokusu.
   To pierwszy element strony dla osoby nawigującej klawiaturą. */
.cmp_skip_to_content a {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--eos-odstep-12) var(--eos-odstep-20);
  background: var(--eos-atrament);
  color: var(--eos-tlo);
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-12);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
}
.cmp_skip_to_content a:focus {
  left: var(--eos-odstep-8);
  top: var(--eos-odstep-8);
  text-decoration: none;
}

/* Pozostałe pomocnicze z `lib/pkp/styles/helpers.less`, których szablony PKP
   używają bez zapowiedzi. */
.pkp_unstyled_list,
.pkp_nav_list { list-style: none; margin: 0; padding: 0; }

.pkp_helpers_clear::after { content: ""; display: table; clear: both; }

.pkp_helpers_align_left { text-align: left; }
.pkp_helpers_align_right { text-align: right; }
.pkp_helpers_align_center { text-align: center; }

.pkp_helpers_display_none,
.pkp_helpers_hidden { display: none; }

/* --- zachowanie ruchu ----------------------------------------------------- */

/* Uszanowanie ustawienia systemowego. Projekt nie ma animacji, ale przewijanie
   płynne i ewentualne przejścia mają być wyłączalne. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- druk ----------------------------------------------------------------- */

@media print {
  .pkp_structure_head,
  .pkp_structure_footer_wrapper,
  .eos_pasek { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
}