/**
 * Pasek dostepnosci: reset stylow przycisku.
 *
 * Kontrolki A− / A / A+ / kontrast byly elementami <a> i zostaly zamienione na
 * <button>, zeby dzialaly z klawiatury (audyt WCAG 05.08.2026, ustalenie 1.1).
 * Przycisk ma jednak wlasne style przegladarki: tlo `buttonface` (#f0f0f0) i ramke.
 * Efekt uboczny wylapany skanem: tekst #6e6e6e na tym tle daje 4,47:1 przy
 * wymaganych 4,5:1 (SC 1.4.3) — czyli naprawa jednego kryterium naruszyla drugie.
 *
 * Przywracamy wyglad sprzed zmiany: brak tla i ramki, przez co tekst wraca na
 * biale tlo naglowka i kontrast jest taki sam jak przed przebudowa.
 */

.fonts-small-js,
.fonts-middle-js,
.fonts-big-js,
.contrast-js {
  background: transparent;
  border: 0;
  padding: 0 4px;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Wskaznik fokusu musi zostac widoczny — bez niego naprawa klawiatury nie ma sensu. */
.fonts-small-js:focus-visible,
.fonts-middle-js:focus-visible,
.fonts-big-js:focus-visible,
.contrast-js:focus-visible {
  outline: 2px solid #1F3B63;
  outline-offset: 2px;
}

/* Stan wcisniety byl dotad sygnalizowany klasa `active` nadawana przez main.js.
   Utrzymujemy to samo wyroznienie rowniez dla stanu ARIA, zeby oba byly spojne. */
.fonts-small-js[aria-pressed="true"],
.fonts-middle-js[aria-pressed="true"],
.fonts-big-js[aria-pressed="true"],
.contrast-js[aria-pressed="true"] {
  font-weight: 700;
}

/**
 * Complianz: przycisk zgody na osadzona mape Google (`/kontakt/`) ma tlo #808080,
 * co przy bialym tekscie 14 px daje 3,94:1 przy wymaganych 4,5:1 (SC 1.4.3).
 * Nie ruszamy plikow wtyczki, bo aktualizacja by je nadpisala — przyciemniamy tlo
 * w motywie. #6e6e6e z bialym tekstem daje 5,09:1, czyli z zapasem.
 * `!important` jest konieczne, bo wtyczka wstawia wlasny arkusz po naszym.
 */
.cmplz-blocked-content-notice,
.cmplz-blocked-content-notice.cmplz-accept-category {
  background-color: #6e6e6e !important;
}

/**
 * Reflow przy 320 px — SC 1.4.10.
 *
 * Audyty wskazywaly na tabele, ale po ich opakowaniu w kontener przewijalny strony
 * DALEJ przewijaly sie w poziomie. Bisekcja (chowanie elementow i pomiar scrollWidth,
 * zamiast czytania getBoundingClientRect, ktore przy elementach pozycjonowanych
 * absolutnie wprowadza w blad) wskazala prawdziwego winowajce: NAGLOWKI.
 *
 * Zmierzone przed poprawka: /site-search 328 px, /bip2/?id=45 423 px, ?id=49 529 px.
 *
 * Dwie przyczyny:
 *  1. `h1.ptitle` jest kontenerem flex z ozdobna zolta kreska `::after` o SZTYWNEJ
 *     szerokosci 130 px i marginesie 26 px. Razem z tekstem nie miesci sie w 320 px.
 *  2. Tresc naglowkow redakcja skleja twardymi spacjami (`Oplaty i&nbsp;skladki
 *     na&nbsp;fundusze`), przez co dlugie frazy nie maja gdzie sie zlamac.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tresc redakcyjna: dlugie adresy URL uzyte jako TEKST linku nie maja spacji,
   wiec przy waskim ekranie wypychaja strone. Zmierzone: /bip2/?id=22 (odnosnik do
   adobe.com) 606 px, /bip2/?id=46 (restrukturyzacja.ideabank.pl) 388 px,
   /o-nas/akty-prawne/ 384 px przy oknie 375 px. */
.page_right p,
.page_right li,
.page_right a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Lista zalacznikow BIP: dlugie nazwy plikow nie mialy gdzie sie zlamac
   i zostawialy jeszcze 7 px przewijania na /bip2/?id=49. */
.bip-zalaczniki,
.bip-zalaczniki a,
.attachments,
.attachments a,
.download .disc {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

@media (max-width: 575.98px) {
  /* Ozdobnik ma ustapic tresci, a nie odwrotnie. */
  .page_right h1.ptitle::after {
    flex: 0 1 auto;
    min-width: 0;
    width: 60px;
  }

  .page_right h1.ptitle {
    flex-wrap: wrap;
  }
}