/* ==========================================================================
   Naglowek strony. Komponent wspoldzielony przez wszystkie podstrony.
   Wariant "Klinika" (D30, 28.08.2026): kapsula na szkle, zawsze jasna.
   Zastapil warianty --on-dark / --on-light z 24.08, oba martwe od tej zmiany.
   Zlota kreska na gorze okna (D30) USUNIETA D42 (01.09.2026), Jakub nie chcial
   jej widziec po scrollu. Zero markupu, zero CSS, zero JS dla niej od teraz.
   ========================================================================== */


.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-cream);
  color: var(--text-on-light);
  font-size: var(--fs-small);
}
.skip-link:focus {
  left: var(--space-5);
  top: var(--space-3);
  outline: var(--focus-width) solid var(--accent-deep);
  outline-offset: 2px;
}

/* --- naglowek, sticky od poczatku ----------------------------------------
   Header jest pierwszym elementem body, wiec bez przewijania stoi na gorze
   strony z padding-block-start jako odstepem od krawedzi okna. Po przekroczeniu
   progu (js/header.js) .is-scrolled zageszcza kapsule (padding-block-start
   32px->8px, kapsula 76px->62px) i skraca ten odstep.

   D42 (01.09.2026), bug "hero skacze przy scrollu": ta kompresja zmniejszala
   WLASNA wysokosc pudelka .site-header w normalnym przeplywie (sticky nie
   zdejmuje elementu z przeplywu, tylko przypina go wizualnie), o okolo 38px
   na desktopie i 4px na telefonie. .hero.on-dark liczy swoj margines/padding
   ze stalej --header-rest-h (stan spoczynku), wiec ten spadek wysokosci
   naglowka przesuwal .hero (i cala tresc w srodku) o dokladnie tyle w gore
   w momencie przekroczenia progu, mimo poprawki D39/D42 na hero. Naprawa:
   min-height ponizej blokuje wlasna wysokosc .site-header na tej samej
   stalej --header-rest-h NIEZALEZNIE od stanu .is-scrolled, wiec kompresja
   dzieje sie tylko WEWNATRZ tego pudelka (padding i kapsula), a pudelko samo
   nigdy sie nie kurczy i .hero nigdy nie rusza. Skutek uboczny: pod skompresowana
   kapsula zostaje niewidoczny (bez tla) pas pustej przestrzeni az do pelnej
   --header-rest-h, ktory bez pointer-events:none blokowalby klikniecia w
   tresc sekcji, ktora przewinie sie akurat pod ten pas, stad pointer-events
   nizej. */

.site-header {
  position: sticky;
  inset-block-start: var(--space-4);
  z-index: var(--z-header);
  padding-block-start: var(--space-6);
  min-height: var(--header-rest-h);
  pointer-events: none;
  transition: padding-block-start var(--dur) var(--ease);
}
.site-header.is-scrolled {
  padding-block-start: var(--space-2);
}

.site-header > .container {
  /* D62b: naglowek na 90%, sekcje zostaja na 95% */
  inline-size: var(--rama-w);
  position: relative;
  pointer-events: auto;
}

/* --- kapsula --------------------------------------------------------------
   min-height przez tokeny (--kapsula-h/--kapsula-h-scrolled/--kapsula-h-mobile,
   D42, tokens.css), zeby --header-rest-h mogl je policzyc w czystym CSS. */

.site-header__kapsula {
  position: relative;   /* kotwica dla wysrodkowanej nawigacji */
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--kapsula-h);
  padding-inline: var(--space-6);
  background: var(--szklo);
  border: var(--border-width) solid var(--szklo-ramka);
  border-radius: var(--radius-lg);
  color: var(--text-on-light);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  transition: min-height var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled .site-header__kapsula {
  min-height: var(--kapsula-h-scrolled);
  box-shadow: var(--shadow-kapsula);
}

/* --- logo ------------------------------------------------------------------
   Kapsula jest zawsze jasna, wiec jest tylko jedna wersja logo. Podmiana
   ciemne/jasne z 24.08 wypadla razem z kontekstami --on-dark/--on-light. */

.site-header__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  transition: opacity var(--dur) var(--ease);
}
.site-header__logo:hover { opacity: 0.74; }
.site-header__logo:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-light);
  outline-offset: var(--focus-offset);
}
.site-header__logo img { width: 174px; height: auto; }

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

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  /* 02.09.2026: nawigacja wysrodkowana w kapsule, nie doklejona do logo.
     Wysrodkowanie idzie przez pozycje absolutna, bo logo i prawa strona
     kapsuly maja rozne szerokosci (174 wobec okolo 330 px), wiec samo
     margin-inline: auto przesunieloby menu o kilkadziesiat pikseli w lewo
     od realnego srodka. Ponizej 1100 px miejsca juz nie starcza i menu
     wraca do przeplywu, patrz zapytanie medialne nizej. */
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

@media (max-width: 1100px) {
  /* Przy waskiej kapsule wysrodkowane menu zachodzi na logo i na przycisk,
     wiec wraca do przeplywu miedzy nimi. */
  .site-nav {
    position: static;
    transform: none;
    margin-inline: auto;
  }
}

.nav-link {
  /* D157, 03.09.2026: zgloszenie Jakuba, "tekst w nawigacji za maly na
     desktopie". Byl na --fs-small (dzielony z opisami/stopka w calym
     projekcie), teraz na dedykowany token --fs-nav (istnial w tokens.css od
     poczatku ale nikt go nie podpial pod .nav-link, uzywany byl --fs-small
     przez pomylke). --fs-nav 18->20px w tym samym ruchu. */
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--text-on-light);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--accent-deep); }
.nav-link:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-light);
  outline-offset: var(--focus-offset);
}

/* --- prawa strona: plakietka Instagrama plus CTA --------------------------
   Numer telefonu zszedl z paska desktopowego (D30), zostaje wylacznie
   w menu mobilnym i w sekcji kontakt/stopce, gdzie jest trescia, nie CTA. */

.site-header__aside {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
}

.site-header__plakietka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-sand);
  color: var(--accent-deep);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-header__plakietka:hover { background: var(--accent-deep); color: var(--text-on-dark); }
.site-header__plakietka:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-light);
  outline-offset: var(--focus-offset);
}
.site-header__plakietka svg { width: 19px; height: 19px; }

.site-header__cta { margin-inline-start: var(--space-2); white-space: nowrap; }

/* --- skrot do rezerwacji na telefonie ---------------------------------------
   02.09.2026 (D73). Zastepuje pelnowymiarowy przycisk stojacy pod kapsula:
   zajmowal cala szerokosc ekranu, na tablecie 730 px, i powtarzal wezwanie,
   ktore i tak stoi w hero. Ikona siedzi w kapsule obok burgera, wiec nie
   zabiera pionu i nie tworzy drugiego paska. */

.site-header__kalendarz {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 44px;      /* cel dotyku, nie rozmiar rysunku */
  block-size: 44px;
  margin-inline-start: auto;
  color: var(--text-on-light);
  transition: color var(--dur) var(--ease);
}
.site-header__kalendarz svg { inline-size: 22px; block-size: 22px; display: block; }
.site-header__kalendarz:hover { color: var(--accent-deep); }
.site-header__kalendarz:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-light);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* --- hamburger -------------------------------------------------------------
   Wlasny z-index nad overlay menu, inaczej burger renderuje sie pod panelem
   i staje sie niedotykalny (znalezione i naprawione 26.08.2026, zostaje). */

.burger {
  display: none;
  position: relative;
  z-index: var(--z-modal);
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger__kreska {
  display: block;
  width: 24px;
  height: 1px;
  margin-inline: auto;
  background: var(--text-on-light);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.burger:hover .burger__kreska { background: var(--accent-deep); }
.burger:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-light);
  outline-offset: var(--focus-offset);
}
.burger[aria-expanded="true"] .burger__kreska:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__kreska:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__kreska:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- menu na telefonie, szuflada z prawej + scrim --------------------------
   D154, 03.09.2026: przebudowane od zera na zgloszenie Jakuba, po przegladzie
   trzech makiet (off-canvas / szuflada z lewej jak Lumira / autorski wariant
   spod kapsuly). Wybrana szuflada, ale z PRAWEJ (nie z lewej jak w referencji),
   z ikonka Instagrama i CTA w jednym wierszu pod "Kontakt", bez telefonu.
   Zastepuje dawna karte rozwijana spod kapsuly (D74/D75, 02.09.2026).

   `.menu-mobilne` to teraz caly SCRIM (pelna szerokosc/wysokosc ponizej
   naglowka), nie sama karta. Dzieki temu klik w tlo poza panelem dalej
   zamyka menu przez ISTNIEJACY mechanizm w header.js (`e.target === menu`),
   zero zmian w JS. Panel wlasciwy to zagniezdzony `.menu-mobilne__panel`.

   Pozycja, D166, 03.09.2026: szuflada idzie od SAMEJ GORY strony, nie spod
   kapsuly. Zgloszenie Jakuba: "od samej gory strony jak bylo w wariancie
   najpierw". Do tej daty (D154) scrim zaczynal sie na `--header-rest-h`, zeby
   kapsula z logo i X zostawala nad nim geometrycznie, czyli po prostu wyzej na
   ekranie. Po przesunieciu na zero ta geometria juz nic nie zalatwia i kapsula
   musi wygrywac kontekstem stakowania, patrz `.site-header > .container` w
   zapytaniu mobilnym nizej. */

/* Ruch, D169, 03.09.2026. Do tej daty panel pojawial sie od razu w docelowym
   miejscu: element nazywal sie szuflada, a zachowywal jak przelacznik. Stan
   spoczynku (bez `.jest-otwarte`) to panel odsuniety za prawa krawedz i scrim
   przezroczysty, klase doklada `header.js` klatke po zdjeciu `hidden`.
   Globalny blok `prefers-reduced-motion` w tokens.css sciaga czasy do zera,
   wiec osoba z wylaczonym ruchem dostaje dawne zachowanie natychmiastowe. */

.menu-mobilne {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  background: transparent;
  z-index: var(--z-scrim);
  transition: background-color var(--dur-slow) var(--ease);
}
.menu-mobilne[hidden] { display: none; }
/* Przez czas wyjazdu scrim jest juz przezroczysty, ale wciaz lezy na calym
   oknie, wiec bez tego lykalby klikniecia w tresc przez te 400 ms. */
.menu-mobilne:not(.jest-otwarte) { pointer-events: none; }
.menu-mobilne.jest-otwarte {
  background: color-mix(in srgb, var(--surface-dark) 50%, transparent);
}

.menu-mobilne__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 82%;
  max-inline-size: 340px;
  overflow-y: auto;
  /* D166: gora panelu siega teraz pod kapsule, wiec pierwsza pozycja listy
     dostaje odsuniecie rowne wysokosci naglowka, zeby nie chowala sie za nia.
     Linki zostaja przez to dokladnie tam, gdzie stały przed zmiana. */
  padding: calc(var(--header-rest-h) + var(--space-4)) var(--space-5) var(--space-5);
  background: var(--surface-cream-hi);
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
  color: var(--text-on-light);
  box-shadow: var(--shadow-kapsula);
  /* Wyjazd liczony wlasna szerokoscia panelu, nie procentem okna, bo przy
     `max-inline-size` te dwie wartosci rozjezdzaja sie powyzej 415 px okna
     i panel zatrzymywalby sie w kadrze zamiast schodzic z ekranu. */
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
.menu-mobilne.jest-otwarte .menu-mobilne__panel { transform: translateX(0); }

.menu-mobilne__nav { display: flex; flex-direction: column; }

.menu-mobilne__link {
  font-family: var(--font-display);
  font-size: var(--fs-nav-mobile);
  line-height: 1.2;
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--line-on-light-soft);
  color: var(--text-on-light);
  transition: color var(--dur) var(--ease);
}
.menu-mobilne__link:hover { color: var(--accent-deep); }
.menu-mobilne__link:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-light);
  outline-offset: var(--focus-offset);
}

/* Rzad telefon + CTA jako KOLEJNA pozycja listy (nie osobna stopka), ten
   sam padding-block co linki wyzej, wiec odstep od "Kontakt" jest identyczny
   jak miedzy pozostalymi pozycjami. "Kontakt" przestaje byc ostatnim
   dzieckiem i odzyskuje wlasna kreske pod spodem. Ikona telefonu z
   wypelnieniem, ten sam styl co w starym dropdownie (D75), zgloszenie
   Jakuba 03.09.2026: "zamiast przycisku Instagrama, ikonka telefonu jak na
   poprzednim dropdownie". */
.menu-mobilne__stopka {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.menu-mobilne__telefon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--btn-h-md);
  block-size: var(--btn-h-md);
  border-radius: 50%;
  background: var(--surface-sand);
  color: var(--accent-deep);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.menu-mobilne__telefon svg { inline-size: 20px; block-size: 20px; display: block; }
.menu-mobilne__telefon:hover { background: var(--accent-deep); color: var(--text-on-dark); }
.menu-mobilne__telefon:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-light);
  outline-offset: var(--focus-offset);
}

.menu-mobilne__stopka .btn { flex: 1 1 auto; }


body.menu-otwarte { overflow: hidden; }

/* --- telefon i tablet ------------------------------------------------------ */

@media (max-width: 900px) {
  .site-header { padding-block-start: var(--space-3); inset-block-start: var(--space-2); }

  /* 02.09.2026 (D72): kapsula na telefonie idzie na 95 procent okna, tak jak
     rama na desktopie. Do tej daty .container dokladal ponizej 600px wlasny
     padding 20px z kazdej strony, wiec kapsula konczyla sie na 310 z 390,
     czyli 79 procent, i byla wyraznie wezsza od reszty strony w proporcji.
     Padding zdjety tylko dla naglowka, sekcje zostaja jak byly. */
  .site-header > .container {
    inline-size: 95%;
    padding-inline: 0;
  }

  /* D166, 03.09.2026. Szuflada menu zaczyna sie teraz na y=0, wiec przechodzi
     POD kapsula i bez tej reguly przykrywa logo oraz burger-jako-X.
     Mechanizm, ktory to psul, jest niewidoczny w kodzie kapsuly: `.burger` ma
     `z-index: var(--z-modal)` (400), a mimo to przegrywal ze scrimem o 150,
     bo `.site-header__kapsula` ma `backdrop-filter` (szklo), a kazdy
     backdrop-filter inny niz `none` TWORZY kontekst stakowania. Burger byl
     wiec zamkniety w kontekscie kapsuly, a sama kapsula miala w kontekscie
     `.container` z-index `auto`, czyli zero, i przegrywala ze scrimem.
     Do 03.09.2026 nie bylo tego widac, bo scrim zaczynal sie pod kapsula.
     Naprawa idzie na kapsule, nie na burger: to ona jest tym kontekstem.
     Objaw przy braku tej reguly: X widac, klik nie dochodzi, Playwright mowi
     "intercepts pointer events" (PRZEKAZANIE.md pulapki 12, 19 i 41). */
  .site-header__kapsula {
    z-index: var(--z-overlay);
  }

  /* D167, 03.09.2026: przy otwartym menu kapsula gubi samo szklo, zostaja
     tylko logo i X. Zgloszenie Jakuba: "widac te kapsule nawet jak rozwiniemy
     ten dropdown, a tak nie powinno byc... chcialbym, zeby bylo widac X na tej
     wysuwanej szufladzie menu i logo".
     `z-index` powyzej zostaje i to on trzyma teraz kontekst stakowania, bo
     razem ze szklem znika `backdrop-filter`, ktory ten kontekst tworzyl do tej
     pory (pulapka 41). Bez tamtej reguly X wracalby pod panel w chwili
     otwarcia, czyli dokladnie wtedy, kiedy jest potrzebny. */
  /* D182, 03.09.2026: selektor musi wygrac z `.site-header.is-scrolled
     .site-header__kapsula` (0,3,0), ktora dokłada `box-shadow` po przewinieciu
     strony. Do tej pory ta regula miala 0,2,1, czyli przegrywala, i cien
     kapsuly zostawal na wierzchu wysunietej szuflady: przy menu otwartym po
     przewinieciu widac bylo zaokraglone pudelko z cieniem lezace na panelu.
     Przy menu otwartym na samej gorze strony bledu nie bylo, bo tam
     `.is-scrolled` nie ma i cienia nie ma czym dolozyc. Zgloszenie Jakuba ze
     zrzutu z telefonu. */
  body.menu-otwarte .site-header .site-header__kapsula,
  body.menu-otwarte .site-header.is-scrolled .site-header__kapsula {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* D169: szklo schodzi i wraca w tym samym czasie co wyjazd panelu, inaczej
     przy zamykaniu kapsula odzyskuje tlo natychmiast i miga na wpol wysunietej
     szufladzie. `backdrop-filter` celowo poza lista: przejscie rozmycia jest
     kosztowne na telefonie, a i tak nie widac go pod panelem. */
  .site-header__kapsula {
    transition: min-height var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                background-color var(--dur-slow) var(--ease),
                border-color var(--dur-slow) var(--ease);
  }

  /* D169: przy otwartym menu zostaja logo i X, zgodnie ze zgloszeniem z D167.
     Ikona kalendarza wypada, bo to samo wezwanie stoi juz przyciskiem w
     panelu. Chowana widocznoscia, nie `display`, zeby X nie przesunal sie w
     bok w chwili otwarcia: palec celuje w miejsce, ktore widzial przed
     dotknieciem, a `display: none` oddaje burgerowi auto-margines kalendarza
     i przesuwa go o cala jego szerokosc. */
  body.menu-otwarte .site-header__kalendarz {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .site-header__kalendarz {
    transition: color var(--dur) var(--ease),
                opacity var(--dur-slow) var(--ease),
                visibility var(--dur-slow) var(--ease);
  }

  /* D169: logo gasnie razem z wyjazdem szuflady, zostaje sam X. Zgloszenie
     Jakuba 03.09.2026: "po wysunieciu ukrywamy jeszcze logo z szuflady".
     Zamyka pozycje 9 z PIPELINE.md: logo ma 142 px i zaczyna sie na x=26, a
     szuflada z prawej siega tylko do x=70, wiec lewy skrawek zawsze lezal na
     przyciemnieniu i kraw. panelu tnela je w pionie przez litery. Zdjecie logo
     na czas otwarcia usuwa problem u zrodla, zamiast lagodzic go tlem albo
     jasniejszym scrimem. Widocznoscia, nie `display`, zeby nie oddac miejsca
     logo pozostalym elementom kapsuly i nie przesunac X w bok. */
  body.menu-otwarte .site-header__logo {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .site-header__logo {
    transition: opacity var(--dur-slow) var(--ease),
                visibility var(--dur-slow) var(--ease);
  }

  .site-header__kapsula { min-height: var(--kapsula-h-mobile); padding-inline: var(--space-4); gap: var(--space-3); }
  /* D111, 03.09.2026: bez tej reguly .site-header.is-scrolled .site-header__kapsula
     (baza, wyzsza specificznosc, 3 klasy wobec 1) wygrywalaby nad regula
     wyzej takze na telefonie i po przewinieciu mobile "pozyczaloby" nowa,
     wieksza wartosc desktopowego scrolla (--kapsula-h-scrolled). Ta sama
     specificznosc, ale nizej w pliku, wiec wygrywa i trzyma mobile na jednej
     stalej wysokosci niezaleznie od stanu scrolla, tak jak przed D111. */
  .site-header.is-scrolled .site-header__kapsula { min-height: var(--kapsula-h-mobile); }
  .site-nav,
  .site-header__aside { display: none; }

  .burger { display: flex; }

  .site-header__logo img { width: 142px; }

  .site-header__kalendarz { display: flex; }
  /* Burger stoi tuz przy ikonie, wiec to ona zbiera wolne miejsce po logo. */
  .burger { margin-inline-start: 0; }
}