/* ==========================================================================
   Nagłówek — sections/header.php
   ==========================================================================
   Chrom komponentu na tokenach --ds-* z design-system.css. Układ przez
   utilities Bootstrapa TAM, gdzie ich breakpointy (sm/md/lg/xl = 576/768/
   992/1200) nie mają znaczenia (np. .d-flex, .gap-3 w megamenu, .row w
   panelu mobilnym). Przełączniki mobile/desktop nagłówka używają WŁASNEGO
   breakpointu 1024px — to breakpoint "desktop" z DESIGN-SYSTEM.md, celowo
   inny niż Bootstrapowe lg=992px (patrz komentarz w design-system.css) —
   dlatego są tu, a nie jako .d-lg-flex/.d-none w markupie.
   ========================================================================== */

/* Baner trybu testowego zapisów (Signup::isTestMode(), zapis.php nie
   zapisuje do bazy) — pasek NAD .hdr-root, nie w niej: zostaje widoczny
   nawet gdy nagłówek chowa się na scrollu (.hdr-root.is-hidden), bo to
   ostrzeżenie ma dotyczyć całej wizyty, nie tylko górnego ekranu. */
.hdr-test-banner {
  background-color: var(--ds-color-warning-tint);
  color: var(--ds-color-warning-ink);
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-weight-semi);
  text-align: center;
  padding: 8px var(--ds-space-4);
}

.hdr-root {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--ds-color-canvas);
  transition: transform var(--ds-duration-base) var(--ds-ease-out-soft),
              box-shadow var(--ds-duration-base) var(--ds-ease-out-soft);
}
.hdr-root.is-hidden { transform: translateY(-100%); }
.hdr-root.is-scrolled { box-shadow: var(--ds-shadow-sm); }

/* Link "przejdź do treści" — poza kadrem, dopóki nie dostanie fokusa */
.hdr-skip {
  position: absolute;
  left: var(--ds-space-4);
  top: 8px;
  z-index: 1040;
  transform: translateY(-250%);
  transition: transform var(--ds-duration-base) var(--ds-ease-out-soft);
}
.hdr-skip:focus { transform: none; }

.hdr-ic { width: 22px; height: 22px; flex: none; }
.hdr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── A. belka górna (tylko desktop) ──────────────────────────────────── */
/* Zwija się z 36px do 0 na scrollu (patrz .is-scrolled niżej) — to jedyne
   miejsce w nagłówku, które zmienia własną wysokość nad scrollTop. Bez
   `overflow-anchor: none` na html (design-system.css → "Baza dokumentu")
   przeglądarka kompensowała ten skok layoutu przesuwając scrollY o te same
   ~36px, co zbijało wynik poniżej progu OFF w header.js, zdejmowało
   .is-scrolled, .hdr-top wracał do 36px, scrollY wracał nad próg ON — pasek
   "skakał" przy delikatnym scrollu. Ustawienie `overflow-anchor: none`
   TYLKO tutaj (albo na .hdr-root) nie wystarczyło — zmierzone empirycznie,
   działa dopiero globalnie na html. */
.hdr-top {
  display: none;
  background-color: var(--ds-color-canvas);
  border-bottom: 1px solid var(--ds-color-hairline-cool);
  height: 36px;
  overflow: hidden;
  transition: height var(--ds-duration-base) var(--ds-ease-out-soft),
              opacity var(--ds-duration-base) var(--ds-ease-out-soft);
}
@media (min-width: 1024px) { .hdr-top { display: block; } }
.hdr-root.is-scrolled .hdr-top { height: 0; opacity: 0; }

.hdr-soc {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ds-radius-xs);
  color: var(--ds-color-ink-muted);
  transition: color var(--ds-duration-base) var(--ds-ease-out-soft);
}
.hdr-soc .hdr-ic { width: 18px; height: 18px; }
.hdr-soc:hover { color: var(--ds-color-primary); }
.hdr-top-rating strong { color: var(--ds-color-ink); }
.hdr-google-ic { width: 16px; height: 16px; flex: none; }
.hdr-dot { width: 3px; height: 3px; border-radius: var(--ds-radius-full); background-color: var(--ds-color-ink-faint); flex: none; }

/* Kontakt — celowo w odcieniu czerni, nie marki: to link informacyjny, nie CTA */
.hdr-contact-link {
  color: var(--ds-color-ink);
  font-family: var(--ds-font-body);
  font-weight: 500;
  background-image: linear-gradient(var(--ds-color-ink), var(--ds-color-ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--ds-duration-link) var(--ds-ease-out-soft), color var(--ds-duration-link) var(--ds-ease-out-soft);
}
.hdr-contact-link:hover { background-size: 100% 2px; }

/* ── B. pasek główny ──────────────────────────────────────────────────── */
.hdr-main {
  height: 60px;
  background-color: var(--ds-color-canvas);
  border-bottom: 1px solid var(--ds-color-hairline);
}
@media (min-width: 1024px) { .hdr-main { height: 68px; } }

.hdr-logo { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.hdr-logo img { height: 32px; width: auto; }
@media (min-width: 1024px) { .hdr-logo img { height: 38px; } }
.hdr-wordmark {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 17px; /* wordmark trzymany na stałe — nie skaluje się z .text-heading-3 */
  letter-spacing: -0.02em;
  color: var(--ds-color-ink);
  line-height: 1;
  white-space: nowrap;
}
.hdr-wordmark i { color: var(--ds-color-primary); font-style: normal; }

.hdr-nav-desktop { display: none; }
.hdr-actions-desktop { display: none; }
.hdr-actions-mobile { display: flex; }
@media (min-width: 1024px) {
  /* flex-grow zajmuje całą wolną przestrzeń między logiem a akcjami po prawej,
     więc linki menu centrują się w tej przestrzeni, zamiast trzymać się loga.
     Gdy w menu został tylko jeden link (patrz $hdrNav w header.php — reszta
     pozycji jest tam czasowo zakomentowana), "wycentrowanie" jednej pozycji
     w tej przestrzeni wygląda jak przypadkowe odsunięcie od loga, więc wtedy
     link trzyma się lewej strony jak logo. */
  .hdr-nav-desktop { display: flex; flex: 1 1 auto; justify-content: center; }
  .hdr-nav-desktop:has(> .hdr-nav-link:only-child) { justify-content: flex-start; }
  .hdr-actions-desktop { display: flex; flex: none; }
  .hdr-actions-mobile { display: none; }
}

.hdr-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: none;
  background: none;
  border-radius: var(--ds-radius-xs);
  font-family: var(--ds-font-body);
  font-size: 15px; /* = .text-body */
  font-weight: 500;
  color: var(--ds-color-ink-secondary);
  white-space: nowrap;
  transition: color var(--ds-duration-base) var(--ds-ease-out-soft);
}
.hdr-nav-link:hover { color: var(--ds-color-ink); }
.hdr-nav-link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ds-duration-link) var(--ds-ease-out-soft);
}
.hdr-nav-link.is-active { color: var(--ds-color-ink); }
.hdr-nav-link.is-active::after { transform: scaleX(1); }
.hdr-chev { display: inline-flex; color: var(--ds-color-ink-faint); transition: transform var(--ds-duration-base) var(--ds-ease-out-soft); }
.hdr-chev svg { width: 16px; height: 16px; }
.hdr-nav-link[aria-expanded="true"] .hdr-chev { transform: rotate(180deg); }
.hdr-nav-link[aria-expanded="true"] { color: var(--ds-color-ink); }

/* 1024–1365px: pięć pozycji menu + CTA muszą się zmieścić obok siebie w jednym
   rzędzie — chowamy wordmark, plakietkę i chevron. Zakres szerszy niż
   breakpoint "desktop" (1024–1279) z DESIGN-SYSTEM.md, bo przy realnej
   długości etykiet menu (np. „Wyniki kursantów") 1280px to wciąż za mało,
   żeby CTA zmieściło się w jednej linii. Dostęp do panelu ucznia jest tu
   zawsze ikoną 44×44px, bez wariantu tekstowego — dwa warianty tego samego
   linku nie mieściły się obok pełnego menu przy żadnej rozsądnej szerokości. */
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .hdr-main .hdr-wordmark { display: none; }
  /* Plakietka chowa się tylko, gdy faktycznie walczy o miejsce z resztą menu —
     przy jednym linku (patrz komentarz przy .hdr-nav-desktop wyżej) miejsca
     jest pod dostatek, więc plakietka zostaje widoczna. */
  .hdr-nav-desktop:not(:has(> .hdr-nav-link:only-child)) .hdr-nav-badge { display: none; }
  .hdr-nav-link { padding: 0 8px; }
  .hdr-chev { display: none; }
}

.hdr-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-ink);
  transition: background-color var(--ds-duration-base) var(--ds-ease-out-soft);
}
.hdr-icon-btn:hover { background-color: var(--ds-color-canvas-warm); color: var(--ds-color-ink); }

/* ── C. megamenu (desktop) ────────────────────────────────────────────── */
.hdr-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: var(--ds-color-canvas);
  border-bottom: 1px solid var(--ds-color-hairline);
  box-shadow: var(--ds-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ds-duration-base) var(--ds-ease-out-soft),
              transform var(--ds-duration-base) var(--ds-ease-out-soft),
              visibility var(--ds-duration-base);
}
.hdr-root.is-mega-open .hdr-mega { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 1023.98px) { .hdr-mega { display: none; } }

.hdr-mega-inner { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; padding: 24px 0 18px; }
.hdr-mega-right { padding-left: 24px; border-left: 1px solid var(--ds-color-hairline); }
.hdr-mega-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.hdr-mega-foot { border-top: 1px solid var(--ds-color-hairline); padding: 14px 0; }
.hdr-mega-eyebrow { margin-bottom: 12px; }
.hdr-mega-note { color: var(--ds-color-ink-muted); }

.hdr-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-ink);
  transition: background-color var(--ds-duration-base) var(--ds-ease-out-soft);
}
.hdr-tile:hover { background-color: var(--ds-color-canvas-warm); color: var(--ds-color-ink); }
.hdr-tile-name { font-family: var(--ds-font-body); font-size: 15px; /* = .text-body */ font-weight: 500; line-height: 1.3; }

/* ── D. panel mobilny (Bootstrap offcanvas) ──────────────────────────── */
.hdr-drawer { --bs-offcanvas-width: 100vw; }
/* flex-shrink: 0 — bez tego Bootstrap potrafi ścisnąć ten pasek poniżej naturalnej
   wysokości, gdy zawartość .hdr-drawer-scroll (flex-grow, bez min-height) jest
   wyższa niż okno: to ona ma się przewijać, nie belka z logo i krzyżykiem. */
.hdr-drawer-bar { flex-shrink: 0; min-height: 60px; border-bottom: 1px solid var(--ds-color-hairline); }
.hdr-drawer-scroll { padding-top: 16px; }
.hdr-drawer-foot {
  flex: none;
  background-color: var(--ds-color-cta-solar-tint);
  border-top: 1px solid var(--ds-color-hairline);
  padding: 12px var(--ds-space-4) calc(12px + env(safe-area-inset-bottom));
}

.hdr-accordion .accordion-item { border: none; }
.hdr-sec-trig.accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  min-height: 52px;
  border-bottom: 1px solid var(--ds-color-hairline);
  background: none;
  box-shadow: none;
  font-family: var(--ds-font-display);
  font-size: 16px; /* = .hdr-mlink — mieć ten sam wygląd co pozostałe pozycje panelu mobilnego */
  font-weight: 600;
  color: var(--ds-color-ink);
}
.hdr-sec-trig.accordion-button:not(.collapsed) { background: none; color: var(--ds-color-ink); box-shadow: none; }
.hdr-sec-trig.accordion-button::after { content: none; }
.hdr-sec-trig.accordion-button:focus { box-shadow: none; }
.hdr-sec-trig[aria-expanded="true"] .hdr-chev { transform: rotate(180deg); }
/* Ten trigger to jedyna pozycja accordionu, więc jest naraz first-of-type
   (Bootstrap zaokrągla górę zawsze) i last-of-type (zaokrągla dół, gdy
   .collapsed) — chcemy prostą linię jak w .hdr-mlink, nie "pigułkę". */
.hdr-accordion .accordion-item:first-of-type > .accordion-header .hdr-sec-trig.accordion-button,
.hdr-accordion .accordion-item:last-of-type > .accordion-header .hdr-sec-trig.accordion-button.collapsed {
  border-radius: 0;
}

.hdr-mtile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-color-canvas);
  color: var(--ds-color-ink);
  min-height: 96px;
  height: 100%;
}
.hdr-mtile:hover, .hdr-mtile:active { background-color: var(--ds-color-canvas-warm); color: var(--ds-color-ink); }
.hdr-mtile-name { font-family: var(--ds-font-body); font-size: 15px; /* = .text-body */ font-weight: 500; line-height: 1.3; margin-top: auto; }

.hdr-mlinks { margin-top: 8px; }
.hdr-mlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--ds-color-hairline);
  font-family: var(--ds-font-display);
  font-size: 16px; /* pół stopnia nad .text-title — nagłówek sekcji w panelu mobilnym */
  font-weight: 600;
  color: var(--ds-color-ink);
}
.hdr-mlink:hover { color: var(--ds-color-primary-ink); }
.hdr-arw { color: var(--ds-color-ink-faint); display: inline-flex; }
.hdr-arw svg { width: 18px; height: 18px; }

.hdr-guar {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background-color: var(--ds-color-canvas-warm);
  border-radius: var(--ds-radius-lg);
  padding: 16px;
}
.hdr-guar-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-color-success-tint);
  color: var(--ds-color-success-ink);
}
.hdr-guar-mark svg { width: 16px; height: 16px; }
.hdr-brandline { color: var(--ds-color-ink-muted); text-align: center; padding: 20px 8px 4px; }

/* Pierścień fokusu klawiaturą — spójny w całym nagłówku */
.hdr-root a:focus-visible,
.hdr-root button:focus-visible,
.hdr-drawer a:focus-visible,
.hdr-drawer button:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 3px;
}