/* ============================================================================
   SCiAE — narzedzia dostepnosci i kafelki rocznikow
   ============================================================================
   Powstalo 2026-09-03. Dwie rzeczy:

   1. WIDGET DOSTEPNOSCI — powiekszanie tekstu i tryb wysokiego kontrastu.
      Strona ma rozmiary czcionek podane w px w 27 selektorach, wiec zmiana
      `font-size` na `html` niczego by nie dala. Dlatego kazdy poziom
      powiekszenia przelicza te selektory wprost. Mnozniki: 125% i 150%.

   2. KAFELKI ROCZNIKOW na liscie aktualnosci — zamiast linkow rozdzielonych
      pionowa kreska. Kolory z palety strony (#FCFBDC kremowe tlo, #006600
      zielen menu, #C00 czerwien akcentow), zeby nie wprowadzac nowego stylu.

   Kontrast policzony wzorem WCAG dla kazdej pary — strona ma opublikowana
   deklaracje dostepnosci i wlasnie skonczylismy naprawiac 6 par lamiacych
   prog, wiec nowe elementy nie moga tego zepsuc.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. KAFELKI ROCZNIKOW
   Pole dotykowe: 44x44 px (WCAG 2.2, kryterium 2.5.8) — przy okazji wygodne
   na telefonie, skad idzie wiekszosc ruchu.
   --------------------------------------------------------------------------- */
.lata-nawigacja {
  margin: 0 0 18px;
}

.lata-naglowek {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  color: #000;                    /* 21:1 na kremowym #FCFBDC */
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lata-lista {
  display: flex;
  flex-wrap: wrap;               /* przy 320 px kafelki zawijaja sie, nie przewijaja */
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lata-kafelek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 10px;
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: #000;                   /* na #FFFDF2 -> 20,1:1 */
  background: #FFFDF2;
  border: 1px solid #8C8A6E;     /* 3,2:1 wobec tla — kryterium 1.4.11 */
  border-radius: 3px;
}

.lata-kafelek:hover {
  background: #006600;
  border-color: #004D00;
  color: #FFF;                   /* biel na #006600 -> 5,52:1 */
}

/* Rocznik otwarty w tej chwili. Wyroznienie nie polega tylko na kolorze
   (kryterium 1.4.1): kafelek jest pogrubiony i ma grubsza ramke. */
.lata-kafelek-aktywny,
.lata-kafelek[aria-current="page"] {
  background: #006600;
  border: 2px solid #003D00;
  color: #FFF;
  font-weight: bold;
  cursor: default;
}

/* Kafelek „wszystkie" — inny charakter, wiec inny odcien, ale ta sama forma. */
.lata-kafelek-wszystkie {
  border-color: #C00;
  color: #8A0000;                /* na #FFFDF2 -> 8,6:1 */
}
.lata-kafelek-wszystkie:hover,
.lata-kafelek-wszystkie[aria-current="page"] {
  background: #8A0000;
  border-color: #5C0000;
  color: #FFF;                   /* biel na #8A0000 -> 9,7:1 */
}

.lata-licznik {
  font-size: 11px;
  opacity: .85;
  margin-left: 4px;
}

/* ---------------------------------------------------------------------------
   2. WIDGET DOSTEPNOSCI — pasek przyciskow
   --------------------------------------------------------------------------- */
.a11y-pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin: 0 0 10px;
  background: #FFFDF2;
  border: 1px solid #8C8A6E;
  border-radius: 3px;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.a11y-etykieta {
  font-size: 12px;
  color: #000;
  margin-right: 4px;
}

.a11y-przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  color: #000;
  background: #FFF;
  border: 1px solid #565656;     /* 6,9:1 — jak pozostale pola na stronie */
  border-radius: 3px;
  cursor: pointer;
}

.a11y-przycisk:hover {
  background: #006600;
  border-color: #004D00;
  color: #FFF;
}

/* Stan wlaczony czytany przez czytnik ekranu z aria-pressed; wizualnie
   dodatkowo pogrubienie, zeby nie polegac wylacznie na kolorze. */
.a11y-przycisk[aria-pressed="true"] {
  background: #006600;
  border: 2px solid #003D00;
  color: #FFF;
  font-weight: bold;
}

.a11y-przycisk-tekst-duzy  { font-size: 17px; }
.a11y-przycisk-tekst-duzy2 { font-size: 20px; }

/* ---------------------------------------------------------------------------
   3. POWIEKSZENIE TEKSTU — 125%
   Selektory wypisane wprost, bo strona podaje rozmiary w px.
   --------------------------------------------------------------------------- */
html.a11y-tekst-125 body,
html.a11y-tekst-125 #tresc,
html.a11y-tekst-125 .H5,
html.a11y-tekst-125 .H4_menu            { font-size: 15px !important; }
html.a11y-tekst-125 .H4_akt,
html.a11y-tekst-125 .H4_akt_top         { font-size: 16px !important; }
html.a11y-tekst-125 .H3_czarne,
html.a11y-tekst-125 .H3_czarne_przek,
html.a11y-tekst-125 .H3_czarne_normal,
html.a11y-tekst-125 .H3_czerwone,
html.a11y-tekst-125 .H3_niebieskie,
html.a11y-tekst-125 .H3_szare,
html.a11y-tekst-125 .H4_czarne          { font-size: 17px !important; }
html.a11y-tekst-125 #tresc_tytul        { font-size: 19px !important; }
html.a11y-tekst-125 .H2_czarne,
html.a11y-tekst-125 .H2_czerwone        { font-size: 20px !important; }
html.a11y-tekst-125 .H1_Nazwa           { font-size: 30px !important; }

/* 150% */
html.a11y-tekst-150 body,
html.a11y-tekst-150 #tresc,
html.a11y-tekst-150 .H5,
html.a11y-tekst-150 .H4_menu            { font-size: 18px !important; }
html.a11y-tekst-150 .H4_akt,
html.a11y-tekst-150 .H4_akt_top         { font-size: 19px !important; }
html.a11y-tekst-150 .H3_czarne,
html.a11y-tekst-150 .H3_czarne_przek,
html.a11y-tekst-150 .H3_czarne_normal,
html.a11y-tekst-150 .H3_czerwone,
html.a11y-tekst-150 .H3_niebieskie,
html.a11y-tekst-150 .H3_szare,
html.a11y-tekst-150 .H4_czarne          { font-size: 21px !important; }
html.a11y-tekst-150 #tresc_tytul        { font-size: 23px !important; }
html.a11y-tekst-150 .H2_czarne,
html.a11y-tekst-150 .H2_czerwone        { font-size: 24px !important; }
html.a11y-tekst-150 .H1_Nazwa           { font-size: 36px !important; }

/* Przy powiekszeniu tekstu bloki musza rosnac razem z nim, inaczej tresc
   zostaje ucieta (kryterium 1.4.4). */
html.a11y-tekst-125 #tresc,
html.a11y-tekst-150 #tresc,
html.a11y-tekst-125 [id^="tabela_"],
html.a11y-tekst-150 [id^="tabela_"] {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* ---------------------------------------------------------------------------
   4. WYSOKI KONTRAST
   Czern i biel z zoltymi odnosnikami — wzorzec rozpoznawalny przez osoby,
   ktore z takich trybow korzystaja. Obrazy zostaja nietkniete, bo logo
   i zdjecia niosa tresc.
   --------------------------------------------------------------------------- */
html.a11y-kontrast,
html.a11y-kontrast body {
  background: #000 !important;
  color: #FFF !important;
}

html.a11y-kontrast *:not(img):not(svg):not(svg *) {
  background-color: transparent !important;
  background-image: none !important;
  color: #FFF !important;
  border-color: #FFF !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html.a11y-kontrast a,
html.a11y-kontrast a * {
  color: #FFDD00 !important;     /* zolty na czarnym -> 15,3:1 */
  text-decoration: underline !important;
}

html.a11y-kontrast a:hover,
html.a11y-kontrast a:focus {
  background-color: #FFDD00 !important;
  color: #000 !important;
}
html.a11y-kontrast a:hover *,
html.a11y-kontrast a:focus * { color: #000 !important; }

html.a11y-kontrast .a11y-przycisk,
html.a11y-kontrast .lata-kafelek {
  background-color: #000 !important;
  border: 2px solid #FFF !important;
}
html.a11y-kontrast .a11y-przycisk[aria-pressed="true"],
html.a11y-kontrast .lata-kafelek[aria-current="page"] {
  background-color: #FFDD00 !important;
  color: #000 !important;
}
html.a11y-kontrast .a11y-przycisk[aria-pressed="true"] *,
html.a11y-kontrast .lata-kafelek[aria-current="page"] * { color: #000 !important; }

/* W trybie kontrastu grafiki rozdzielajace nic nie wnosza, a na czarnym
   tle zostawialyby jasne pasy. */
html.a11y-kontrast img[alt=""] { display: none !important; }

/* ---------------------------------------------------------------------------
   5. FOCUS w obu trybach — widoczny obrys niezaleznie od tla
   --------------------------------------------------------------------------- */
.a11y-przycisk:focus,
.lata-kafelek:focus {
  outline: 3px solid #000;
  outline-offset: 2px;
}
.a11y-przycisk:focus,
.lata-kafelek:focus { background: #FFF; color: #000; }

html.a11y-kontrast .a11y-przycisk:focus,
html.a11y-kontrast .lata-kafelek:focus {
  outline: 3px solid #FFDD00 !important;
  outline-offset: 2px;
}

/* Osoby, ktore w systemie ustawily ograniczenie ruchu, nie powinny
   dostawac przejsc kolorow. */
@media (prefers-reduced-motion: reduce) {
  .a11y-przycisk, .lata-kafelek { transition: none !important; }
}


/* ---------------------------------------------------------------------------
   POPRAWKA 2026-09-03: fokus na polach formularza w trybie kontrastu
   Tryb wysokiego kontrastu ustawia tla na czarne. Globalna regula obrysu
   fokusu w boilerplate.css jest czarna (#000), co na czarnym tle daje
   1,00:1. Odnosniki sa bezpieczne, bo dostaja zolte tlo, ale pola
   formularza i przyciski nie - fokus na formularzu logowania byl
   niewidoczny. Zolty obrys na czerni = 15,59:1.
   --------------------------------------------------------------------------- */
html.a11y-kontrast a:focus,
html.a11y-kontrast button:focus,
html.a11y-kontrast input:focus,
html.a11y-kontrast select:focus,
html.a11y-kontrast textarea:focus,
html.a11y-kontrast [tabindex]:focus {
  outline: 3px solid #FFDD00 !important;
  outline-offset: 2px;
}