/* .KWARTZ – przełącznik języka PL | EN (.lang-switch).
   Znaczniki: _wdrozenie/szablony/naglowek.html (PL, tylko przy "en_aktywne": true) i naglowek.en.html.
   Położenie w DOM ustawia scripts/nav.js: od 1440 px ostatni element .header__inner (za CTA),
   356–1439 px zaraz za logami (przed ikoną telefonu), poniżej 356 px pierwsza pozycja menu
   #main-navigation z klasą .lang-switch--menu. Bez JS element stoi za CTA.
   Tryb roboczy: plik ładują tylko strony /en/ (i kopie z _wdrozenie/podglad-en.py).
   Przy aktywacji EN reguły przechodzą do styles/components.css (bundel site.min.css),
   a ten plik znika (_wdrozenie/jezyki/AKTYWACJA.md). Tylko tokeny z tokens.css, bez !important. */

.lang-switch { display: inline-flex; align-items: center; flex: none; gap: var(--s-1); font-family: var(--font-head); font-size: var(--fs-sm); line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
/* bieżący język: zwykły tekst; --ink na bieli 17:1 */
.lang-switch__current { color: var(--ink); }
.lang-switch__sep { color: var(--slate); }
/* drugi język: link jak pozycje menu; --slate na bieli 5,8:1 */
.lang-switch__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--slate); text-decoration: none; transition: color var(--t-fast); }
.lang-switch__link:hover { color: var(--ink); }
.lang-switch__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }
.lang-switch__full { display: none; }

/* Od 1440 px: „PL | EN” jako ostatni element paska. Pole kliknięcia 44 × 44 px daje
   ::before, więc pasek nie rośnie (przy 1440 px zapas między logami a menu to ok. 23 px). */
@media (min-width: 1440px){
  .lang-switch { margin-left: calc(var(--s-3) - var(--s-5)); }
  .lang-switch__link { position: relative; padding-inline: 2px; }
  .lang-switch__link::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}

/* 356–1439 px: kwadrat 44 × 44 z kodem drugiego języka, w stylu ikony telefonu.
   Kolejność: loga | przełącznik | telefon | hamburger (order jak .switch, a w DOM przełącznik
   stoi za logami). Margines „auto” przechodzi z ikony telefonu na przełącznik. */
@media (max-width: 1439px){
  .header__inner > .lang-switch { order: 1; margin-left: auto; gap: 0; }
  .lang-switch + .header-phone--icon { margin-left: 0; }
  .header__inner > .lang-switch .lang-switch__current { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .header__inner > .lang-switch .lang-switch__sep { display: none; }
  .header__inner > .lang-switch .lang-switch__link { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); }
}

/* Poniżej 356 px pasek nie mieści trzeciego pola 44 px z zachowaniem marginesu 14 px
   (14 + 178 logów + 3 × (6 + 44) + 14 = 356): nav.js przenosi przełącznik do menu.
   Zanim skrypt to zrobi, element stojący jeszcze za menu jest ukryty (strona błędu bez menu
   zostawia go w pasku). Bez JS (brak klasy .js) link zostaje w pasku. */
@media (max-width: 355px){
  .js .header__inner > .nav ~ .lang-switch { display: none; }
}

/* Pierwsza pozycja rozwiniętego menu: „English version” (albo „English website”) / „Wersja polska”.
   Odstępy, obramowanie i kolor dziedziczy z reguł .header.nav-open .nav a (components.css). */
.lang-switch--menu { display: flex; width: 100%; margin: 0; gap: 0; }
.lang-switch--menu .lang-switch__current { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.lang-switch--menu .lang-switch__sep,
.lang-switch--menu .lang-switch__code { display: none; }
.lang-switch--menu .lang-switch__link { flex: 1 1 auto; justify-content: flex-start; width: 100%; padding-inline: 2px; }
.lang-switch--menu .lang-switch__full { display: inline; }