/* Districts, przelacznik jezyka w pasku gornym.
   Osobny plik, zeby nie ruszac styl.css ani _shared.css na produkcji.
   Kolory pochodza wylacznie ze zmiennych palety strony, zaden nowy odcien nie wchodzi. */

.pasek-prawa {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 22px);
}

.jezyki {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pismo);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.jezyki .jezyk {
  color: var(--ciemne-cichy);
  text-decoration: none;
  padding: 4px 1px;
  transition: color 0.2s ease;
}

.jezyki .jezyk:hover,
.jezyki .jezyk:focus-visible {
  color: var(--ciemne-tekst);
}

.jezyki .jezyk-aktywny {
  color: var(--ciemne-tekst);
  font-weight: 600;
}

.jezyki .jezyk-kropka {
  color: var(--ciemne-cichy);
  opacity: 0.55;
}

.pasek-gora.na-jasnym .jezyki .jezyk {
  color: var(--jasne-cichy);
}

.pasek-gora.na-jasnym .jezyki .jezyk:hover,
.pasek-gora.na-jasnym .jezyki .jezyk:focus-visible,
.pasek-gora.na-jasnym .jezyki .jezyk-aktywny {
  color: var(--jasne-tekst);
}

.pasek-gora.na-jasnym .jezyki .jezyk-kropka {
  color: var(--jasne-cichy);
}

/* Pasek gorny na telefonie jest zajety w calosci przez logo i przycisk pobierania.
   Zmierzone na zywej stronie: przy 390 pikselach zostaje 9 pikseli luzu, a przy 386 juz osiem,
   i przycisk lamie sie na dwie linie. Taki zapas jest za maly, zeby na nim polegac,
   bo wystarczy inna czcionka systemowa. Dlatego ponizej 560 pikseli przelacznik znika z paska,
   a jego role przejmuje odnosnik w stopce, obok informacji prawnych. */
@media (max-width: 560px) {
  .pasek-gora .jezyki { display: none; }
  .pasek-prawa { margin-left: 0; }
}

/* Wyrownanie ukladu miedzy jezykami. Element ma w srodku oba napisy nalozone
   na siebie; drugi jest niewidoczny i pomijany przez czytniki ekranu, ale zajmuje
   miejsce. Dzieki temu rozmiar elementu jest taki sam po polsku i po angielsku. */
.bl { display: inline-grid; vertical-align: top; max-width: 100%; }
.bl.bl-blok { display: grid; }
.bl > .bl-a,
.bl > .bl-b { grid-area: 1 / 1; min-width: 0; }
.bl > .bl-b { visibility: hidden; pointer-events: none; user-select: none; }
/* Przyciski maja tekst wysrodkowany przez flex, a napisy w komorce siatki
   dziedzicza wyrownanie do lewej, wiec krotszy napis trzeba wysrodkowac jawnie. */
.guzik .bl > * { text-align: center; }

/* Po zmianie jezyka tresc juz byla na ekranie, wiec przy tym jednym wczytaniu
   elementy pojawiaja sie od razu, bez animacji wejscia (jak przy ograniczonym ruchu). */
.zmiana-jezyka .odslona,
.zmiana-jezyka .start-uklon,
.zmiana-jezyka .start-hud,
.zmiana-jezyka .start-cichy { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }

/* Odnosniki prawne w stopce: miejsce zajmuje tylko napis w biezacym jezyku. Odstepy miedzy
   odnosnikami sa rowne, a linia po najechaniu ma szerokosc napisu. Wyjatek od wyrownania
   jezykow (decyzja wlasciciela 24.10): po zmianie jezyka odnosniki w stopce moga sie przesunac. */
.stopka-prawne a > .bl > .bl-b { display: none; }