/* ==========================================================================
   nis2-naglowek.css - pasek gorny, ten sam na kazdej stronie

   Ladowany PO nis2-marka.css, PRZED lokalnym <style> strony.

   Powod powstania (29.07.2026): pasek gorny byl budowany osobno na kazdej
   stronie i rozjechal sie na pieciu wartosciach naraz. Znak marki mial na
   podstronach 19 px i wage 800, na landingu 14 px i wage 600, do tego inny
   odstep liter. Wysokosc paska rozniła sie o piec pikseli. Przy przejsciu
   miedzy stronami gora ekranu drgala.

   Wartosci sa zmierzone na landingu, bo to on jest punktem odniesienia:
   klient wchodzi z reklamy albo z wyszukiwarki na strone glowna i dopiero
   stamtad schodzi nizej. Zobacz docs/SPOJNOSC-WIZUALNA.md.

   Selektory obejmuja obie konwencje nazw, bo landing pisze .pasek i .znak,
   a podstrony .topbar i .brand-name. Przepisanie HTML na jedna konwencje
   to osobna robota; do tego czasu jeden arkusz obsluguje obie.
   ========================================================================== */

/* --- przeskok do tresci ---------------------------------------------------
   Pierwszy element w tabulacji. Poza ekranem, dopoki nie dostanie ogniska. */

.skip,
.przeskok {
  position: absolute;
  left: 14px;
  top: 10px;
  z-index: 100;
  transform: translateY(-140%);
  padding: 10px 14px;
  background: var(--atrament);
  color: #fff;
  border-radius: var(--promien-maly);
  text-decoration: none;
}

.skip:focus,
.przeskok:focus { transform: translateY(0); }

/* --- pasek ---------------------------------------------------------------- */

/* Cztery nazwy na jeden element, bo kazda strona nazwala pasek inaczej:
   landing .gora, kwalifikator .top, szkolenia i webinar .topbar. */
.topbar,
.pasek,
.gora,
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .93);
  border-bottom: 1px solid var(--wlos);
  backdrop-filter: blur(10px);
}

/* Rozwiniete menu na telefonie ma position: fixed i ma sie rozciagnac na
   caly ekran. Nie robilo tego: backdrop-filter tworzy blok zawierajacy dla
   elementow fixed, wiec menu liczylo sie wzgledem paska wysokiego na 71 px,
   nie wzgledem okna. Wychodzilo z tego 28 px bialego paska zaslaniajacego
   naglowek, z linkami przycietymi poza widokiem.

   Rozmycie znika tylko na czas otwartego menu. Wtedy i tak nie ma czego
   rozmywac, bo tresc jest zaslonieta. */
body.nav-open .topbar,
body.nav-open .pasek,
body.nav-open .gora,
body.nav-open .top { backdrop-filter: none; }

.topbar > .wrap,
.gora > .miara,
.pasek > .miara,
.pasek > .wrap {
  max-width: var(--miara, 1280px);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
  min-height: 71px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* --- znak marki -----------------------------------------------------------
   Wersaliki z rozstrzelona spacja. Waga 600, nie 800: przy wersalikach
   i odstepie liter 800 czyta sie jak krzyk, a to tylko nazwa. */

.brand-name,
.znak {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-family: var(--pismo-naglowek);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--atrament);
  text-decoration: none;
  margin-right: -.55em;
  white-space: nowrap;
}

.znak-blok {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.znak-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--szept);
  text-decoration: none;
}

.znak-by__slowo {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.znak-by img {
  display: block;
  width: auto;
  height: 12px;
}

/* --- nawigacja ------------------------------------------------------------ */

.nav,
.nawi,
.nawigacja {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a,
.nawi a,
.nawigacja a {
  padding: 10px 12px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--szept);
  text-decoration: none;
}

.nav a:hover,
.nawi a:hover,
.nawigacja a:hover { color: var(--atrament); }

.gora__telefon {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  color: var(--atrament);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

.gora__telefon:hover { color: var(--wynik-ciemny); }

@media (min-width: 921px) and (max-width: 1160px) {
  .znak-by { display: none; }
  .znak { letter-spacing: .1em; margin-right: -.1em; }
}

/* --- przycisk menu --------------------------------------------------------
   Widoczny tylko na waskim ekranie. Trzy kreski, ktore przy otwarciu skladaja
   sie w krzyzyk, wiec stan jest widac bez czytania etykiety. */

.menu,
.menu-toggle {
  display: none;
  flex: 0 0 42px;
  margin-left: auto;
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--wlos-mocny);
  border-radius: var(--promien-maly);
  cursor: pointer;
}

.menu span, .menu span::before, .menu span::after,
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--atrament);
  transform: translateX(-50%);
  transition: .18s;
}

.menu span,
.menu-toggle span { top: 50%; margin-top: -1px; }

.menu span::before, .menu-toggle span::before { top: -6px; left: 0; transform: none; }
.menu span::after,  .menu-toggle span::after  { top: 6px;  left: 0; transform: none; }

.menu[aria-expanded="true"] span,
.menu-toggle[aria-expanded="true"] span { background: transparent; }

.menu[aria-expanded="true"] span::before,
.menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }

.menu[aria-expanded="true"] span::after,
.menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* --- nawigacja na telefonie -----------------------------------------------
   Ten sam <nav> co na szerokim ekranie, rozwijany spod paska. Bez
   position: fixed, bo pasek ma backdrop-filter, ktory tworzy blok
   zawierajacy dla elementow fixed: menu liczyloby sie wzgledem paska
   wysokiego na 71 px zamiast wzgledem okna. Tak wlasnie bylo zepsute
   menu na webinarze.

   Prog 920 px musi zgadzac sie z progiem w assets/js/nis2-menu.js. Rozjazd
   o jeden piksel daje stan, w ktorym przycisk juz widac, a nawigacja
   jeszcze stoi w pasku. */

/* Selektory celuja w pasek jako rodzica, czyli maja wage (0,2,0). Sam `.nav`
   nie wystarczy: arkusz w <style> strony ma wlasne `.nav { display: flex }`
   o tej samej wadze i stoi pozniej, wiec linki ustawialy sie w rzedzie
   zamiast w kolumnie. */

@media (max-width: 920px) {
  /* Zawsze ostatni w pasku, niezaleznie od miejsca w HTML. Na landingu
     przycisk stoi zaraz po znaku marki i wchodzil miedzy znak a akcje. */
  .menu,
  .menu-toggle { display: block; order: 9; }

  .topbar .nav, .topbar .nawi,
  .gora .nawi,  .gora .nawigacja,
  .top .nawi,   .top .nav,
  .pasek .nawi, .pasek .nawigacja {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 8px clamp(20px, 5vw, 48px) 20px;
    background: var(--tlo);
    border-bottom: 1px solid var(--wlos);
    font-size: var(--t-tekst);
    z-index: 50;
  }

  .topbar .nav[hidden], .topbar .nawi[hidden],
  .gora .nawi[hidden],  .gora .nawigacja[hidden],
  .top .nawi[hidden],   .top .nav[hidden],
  .pasek .nawi[hidden], .pasek .nawigacja[hidden] { display: none; }

  .topbar .nav a, .topbar .nawi a,
  .gora .nawi a,  .gora .nawigacja a,
  .top .nawi a,   .top .nav a,
  .pasek .nawi a, .pasek .nawigacja a {
    padding-block: 14px;
    border-bottom: 1px solid var(--wlos);
  }
}

@media (max-width: 720px) {
  .gora .miara { gap: 8px; }
  .gora > .miara > .dzialanie {
    display: inline-flex;
    order: 3;
    min-height: 42px;
    padding: 9px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
  .gora__telefon { display: none; }
}

/* Przy 320 px logo, telefon i menu nie mieszczą się razem w 280 px treści.
   Menu i CTA są ważniejsze od numeru w nagłówku; telefon zostaje dostępny w stopce. */
@media (max-width: 340px) {
  .gora > .miara > .dzialanie {
    min-width: 52px;
    padding-inline: 8px;
    font-size: 0;
  }
  .gora > .miara > .dzialanie::after {
    content: "Umów";
    font-size: 12px;
  }
}

/* Powyzej progu nawigacja stoi w pasku niezaleznie od atrybutu, ktory
   zostal po zwezeniu okna. */
@media (min-width: 921px) {
  .topbar .nav[hidden], .topbar .nawi[hidden],
  .gora .nawi[hidden],  .gora .nawigacja[hidden],
  .top .nawi[hidden],   .top .nav[hidden],
  .pasek .nawi[hidden], .pasek .nawigacja[hidden] { display: flex; }
}