/* ============================================================
   HAJLAJTY — assets/styles/layout.css
   ------------------------------------------------------------
   GLOBALNA POWŁOKA (shell): topbar, sidebar off-canvas + scrim,
   dyskretne scrollbary, app-shell (desktop) i stopka.
   Wyekstrahowane 1:1 z monolitu „Hajlajty - Skrót Meczu.html"
   (sekcje 3–5, 9 oraz STOPKA). Style WIDOKU pojedynczego meczu
   (watch / player16 / ibar / zakładki) NIE są tutaj — żyją w
   match-single.css (slice match-display). Tokeny i reset są w
   tokens.css / base.css (ładowane przed tym plikiem).
============================================================ */

/* ============================================================
   TOP BAR
============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center;
  background: var(--bg);
}
.topbar__inner {
  display: grid;
  /* Bez wyszukiwarki (strona pojedynczego meczu): dwie kolumny — logo | ikony */
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
  max-width: none;
  padding-inline: var(--space-xs);
}
.topbar__left  { display: flex; align-items: center; gap: var(--space-sm); justify-self: start; }
.topbar__right { display: flex; align-items: center; gap: var(--space-2xs); justify-self: end; }

@media (max-width: 768px) {
  .topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding-inline: var(--gutter);
  }
  .topbar__left  { gap: var(--space-3xs); }
  .topbar__left > .icon-btn:first-child { margin-left: -11px; }
  .topbar__right { gap: var(--space-3xs); }
  .topbar__right > .icon-btn:last-child { margin-right: -11px; }
}

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--text);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover  { background: var(--surface-2); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.logo {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding-inline: 6px;
  font-weight: 800; font-size: 25px; letter-spacing: -0.04em; line-height: 1;
  color: var(--text);
}
.logo__text { display: inline-flex; }
.logo__y { color: var(--accent); }
.logo__play { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent); transition: transform var(--t-med); }
.logo:hover .logo__play { transform: scale(1.12); }

[data-theme="dark"]  .theme-toggle .sun  { display: block; }
[data-theme="dark"]  .theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .sun  { display: none; }
[data-theme="light"] .theme-toggle .moon { display: block; }

/* ============================================================
   SIDEBAR (off-canvas) + SCRIM
============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 70;
  background: var(--scrim);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
}
.scrim.is-open { opacity: 1; visibility: visible; }

.sidebar {
  position: fixed; top: 0; left: 0; z-index: 80;
  width: var(--sidebar-w); max-width: 84vw; height: 100dvh;
  background: var(--bg); box-shadow: var(--shadow);
  transform: translateX(-100%);
  transition: transform var(--t-med);
  display: flex; flex-direction: column;
  /* Lewy padding --space-2xs (8px) < prawy/górny --space-sm (16px): ikony linków
     siadają bliżej lewej krawędzi. Dotyczy KAŻDEGO sidebara (drawer single/mobile
     ORAZ stały ≥1100) — świadomie spójnie po zniesieniu zasady „single bez zmian"
     (decyzja z hotfixa: single ma wyglądać tak jak archiwa). */
  padding: var(--space-sm) var(--space-sm) var(--space-lg) var(--space-2xs);
  overflow-y: auto;
}
.sidebar.is-open { transform: translateX(0); }

/* Pasek admina WP zepycha treść (w tym topbar) w dół przez margin-top na <html>,
   ale drawer .sidebar jest position:fixed i to przesunięcie IGNORUJE — przez co
   jego logo siedzi wyżej niż logo topbara. Offsetujemy drawer o wysokość paska
   admina (46px na wąskich, 32px od 783px) i skracamy wysokość, by dół menu nie
   wychodził poza ekran. Dotyczy TYLKO trybu drawera (<1100px); od 1100px sidebar
   jest position:static i przesunięcie go nie dotyczy. Na froncie bez paska admina
   (publiczny użytkownik) reguła nie działa — tam oba logo są równo z natury. */
@media (max-width: 1099px) {
  .admin-bar .sidebar { top: 46px; height: calc(100dvh - 46px); }
}
@media (min-width: 783px) and (max-width: 1099px) {
  .admin-bar .sidebar { top: 32px; height: calc(100dvh - 32px); }
}

.sidebar__head {
  display: flex; align-items: center; gap: var(--space-sm);
  /* Logo w drawerze (single/mobile) ma siedzieć DOKŁADNIE tam, gdzie logo
     topbara na stronie głównej/archiwum. Stąd: ta sama wysokość co topbar
     (pionowe centrowanie logo na tej samej osi), start od górnej krawędzi
     (kasujemy górny padding sidebara ujemnym marginesem) i brak dodatkowego
     wcięcia bocznego (logo flush do lewej grupy, jak hamburger+logo w topbarze).
     Na stronie głównej/archiwum ten head i tak jest display:none — zmiana
     dotyczy wyłącznie drawera. */
  height: var(--topbar-h);
  margin-top: calc(-1 * var(--space-2xs));
  padding-inline: 0;
  margin-bottom: var(--space-sm);
}
.sidebar__group { padding: var(--space-sm) 0; border-top: 1px solid var(--border); }
.sidebar__group:first-of-type { border-top: none; padding-top: 0; }
.sidebar__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); padding: var(--space-2xs) var(--space-sm);
}
.nav-link {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--r-sm);
  color: var(--text); font-weight: 600; font-size: 15px;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-link svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.nav-link:hover { background: var(--surface-2); }
.nav-link.is-active { background: var(--accent-soft); color: var(--accent-strong); }
[data-theme="dark"] .nav-link.is-active { color: var(--accent); }
.nav-link .badge-live { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--live); }

/* ---- Mobile (drawer): wyrównanie głowy sidebara do topbara ----
   Na ≤768px drawer nakłada się na header, więc hamburger+logo w
   `.sidebar__head` muszą siedzieć DOKŁADNIE tam, gdzie w `.topbar__left`
   (inaczej „przeskakują" w prawo przy otwarciu menu). Topbar (mobile) sadza
   glif hamburgera na `--gutter`: `padding-inline: var(--gutter)` +
   `icon-btn { margin-left: -11px }` (11px = wewn. padding icon-btn 44↔22).
   Baza drawera startowała od `--space-2xs` (8px) bez korekty -11 → glif @19px
   i logo dalej w prawo; a że `--gutter` jest responsywne (clamp 16–40px),
   rozjazd wręcz zmieniał znak w tym paśmie. Odtwarzamy tu ten sam przepis, żeby
   głowa drawera ŚLEDZIŁA `--gutter`:
   - head padding-left = `--gutter - --space-2xs` (dokłada do 8px bazowego
     paddingu `.sidebar` → efektywnie `--gutter`), padding-right 0;
   - `icon-btn { margin-left: -11px }` — glif hamburgera na `--gutter`;
   - gap `--space-3xs` (jak `.topbar__left` na mobile) — logo na tej samej osi.
   Konsekwencja (spójny lewy inset pod hamburgerem+logo): `.nav-link` dostaje
   ten sam efektywny lewy inset — ikony i teksty linków licują z glifem @`--gutter`.

   PION: głowa ma być wyśrodkowana na TEJ SAMEJ osi co topbar (72px @ top:0 →
   środek 36px). Baza kasowała górny padding `.sidebar` tylko w połowie
   (`margin-top: -(--space-2xs)` = -8px przy paddingu -(--space-sm) = 16px) →
   głowa startowała @8px, więc przy pełnej wysokości siedziałaby 8px NIŻEJ. Do
   tego `.sidebar__head` to domyślny element flex w kolumnie o `height:100dvh;
   overflow-y:auto` — przy treści wyższej niż ekran `flex-shrink` zbijał jej
   wysokość < 72px, a że top jest zakotwiczony, środek wjeżdżał ~1–2px NAD oś
   topbara (efekt zależny od wysokości viewportu → niestabilny). Domykamy pion
   deterministycznie: `flex: 0 0 auto` (realne 72px, bez kurczenia) + margin-top
   kasujący CAŁY górny padding (`-(--space-sm)`) → głowa @top:0, środek 36px =
   oś topbara. Działa też z paskiem admina (drawer dostaje `top:46/32px`, głowa
   podąża). Poziomy offset paska admina (`.admin-bar .sidebar { top }`) nietknięty.

   SCOPE ≤768px celowo: ≥1100px (stałe menu) `.sidebar__head` jest display:none,
   a ikona `.nav-link` MUSI zostać @24px (padding-left 16 + `.sidebar` 8) —
   nie regresować. */
@media (max-width: 768px) {
  .sidebar__head {
    padding-inline: calc(var(--gutter) - var(--space-2xs)) 0;
    gap: var(--space-3xs);
    margin-top: calc(-1 * var(--space-sm));
    flex: 0 0 auto;
  }
  .sidebar__head > .icon-btn:first-child { margin-left: -11px; }
  .nav-link { padding-left: calc(var(--gutter) - var(--space-2xs)); }
}

/* ============================================================
   DYSKRETNE SCROLLBARY
============================================================ */
.sidebar, .content {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--t-med);
}
.sidebar.is-scrolling, .content.is-scrolling { scrollbar-color: var(--scrollthumb) transparent; }
.sidebar::-webkit-scrollbar, .content::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar::-webkit-scrollbar-track, .content::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb {
  background: transparent; border-radius: var(--r-pill);
  border: 2px solid transparent; background-clip: padding-box;
  transition: background var(--t-med);
}
.sidebar.is-scrolling::-webkit-scrollbar-thumb, .content.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--scrollthumb); background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-button, .content::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ============================================================
   APP SHELL (desktop ≥1100px)
============================================================ */
.shell { display: block; }
.content { display: block; }

@media (min-width: 1100px) {
  html, body { height: 100%; }
  body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .topbar { position: static; flex: 0 0 auto; }

  /* Treść headera zawężona do tego samego pasma co kolumny widoku poniżej.
     Na pojedynczym meczu --watch-max definiuje match-single.css; na innych
     widokach fallback do --container utrzymuje spójną szerokość. */
  .topbar__inner {
    max-width: var(--watch-max, var(--container));
    margin-inline: auto;
    padding-inline: var(--page-horizontal-margin, var(--gutter));
  }

  /* Ciasny klaster nagłówka (logo tuż przy hamburgerze) na WSZYSTKICH widokach
     ≥1100px — także single, żeby jego topbar wyglądał jak na archiwach (decyzja
     z hotfixa). Geometria dokładnego wyrównania odnosi się do widoków z trwałym
     menu, gdzie ikony linków sidebara stoją PONIŻEJ hamburgera (sidebar
     padding-left 8 + nav-link padding-left 16 → ikona @24px; margin -3 sadza
     ikonę hamburgera na tej samej osi; logo padding --space-3xs=4px domyka tekst
     logo na osi etykiet @61px). Na single sidebar to drawer (nie stoi pod
     hamburgerem), więc te same reguły dają po prostu identyczny, ciasny klaster
     w zawężonym pasmie watch — bez wyrównania do fizycznej krawędzi ekranu. */
  .topbar__left { gap: 0; }
  .topbar__left > .icon-btn:first-child { margin-left: -3px; }
  .logo { padding-inline: var(--space-3xs); }

  .shell { flex: 1 1 auto; min-height: 0; width: 100%; display: block; }
  .content { height: 100%; overflow-y: auto; overflow-x: hidden; }

  /* Stopka licuje z tym samym pasmem bezpieczeństwa co treść. */
  .content .footer > .container {
    max-width: var(--watch-max, var(--container));
    margin-inline: auto;
    padding-inline: var(--page-horizontal-margin, var(--gutter));
  }
}

/* ============================================================
   WIDOKI Z TRWAŁYM MENU (strona główna + archiwa list + terminarz)
   ------------------------------------------------------------
   Sidebar off-canvas (drawer, sekcja wyżej) jest domyślny dla single „mecz"
   (skupiony widok watch — menu chowane). Na STRONIE GŁÓWNEJ, ARCHIWACH LIST oraz
   TERMINARZU (MVP-c — pełnoekranowy widok listy, sidebar domyślnie widoczny) menu
   ma być STAŁE (jak w projekcie). Przy ≥1100px shell staje się dwukolumnowy
   (sidebar | treść), a sidebar przestaje być wysuwany. Bramkowane klasami body
   (.home / .post-type-archive z body_class(); .hajlajty-terminarz dokłada slice
   match-lists; .hajlajty-tabela-rozgrywek dokłada slice standings-view MVP-e),
   więc single (.single-mecz) bez zmian.
   Mobile (<1100px) bez zmian — wszędzie ten sam drawer pod hamburgerem.
============================================================ */
@media (min-width: 1100px) {
  /* Dwie kolumny FLUID — sidebar przy lewej krawędzi, treść wypełnia RESZTĘ
     szerokości ekranu (minmax(0,1fr) pozwala kolumnie się kurczyć i rozlewać
     siatkę kart na całą dostępną powierzchnię, nie tylko do --container). */
  body.home .shell,
  body.post-type-archive .shell,
  body.hajlajty-terminarz .shell,
  body.hajlajty-tabela-rozgrywek .shell,
  body.hajlajty-reprezentacje .shell,
  body.hajlajty-faza-pucharowa .shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    transition: grid-template-columns var(--t-med);
  }

  /* P-h/3 — zwinięcie „jak YouTube": hamburger (klasa body.nav-collapsed z
     layout.js) kurczy kolumnę sidebara do wąskiej SZYNY (rail) z samymi IKONAMI
     linków — etykiety, nagłówki sekcji i teaser „wkrótce" znikają, ikony zostają
     klikalne i nawigują. Transition grid-template-columns (wyżej) animuje
     zwężenie. Dotyczy tylko widoków z trwałym menu; single (drawer) chowa się w
     całości osobną gałęzią w layout.js. */
  body.home.nav-collapsed .shell,
  body.post-type-archive.nav-collapsed .shell,
  body.hajlajty-terminarz.nav-collapsed .shell,
  body.hajlajty-tabela-rozgrywek.nav-collapsed .shell,
  body.hajlajty-reprezentacje.nav-collapsed .shell,
  body.hajlajty-faza-pucharowa.nav-collapsed .shell { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }

  /* Sidebar zostaje WIDOCZNY (koniec z opacity/pointer-events z poprzedniej
     wersji, które chowały całe menu); wąski symetryczny padding pod rail. */
  body.home.nav-collapsed .sidebar,
  body.post-type-archive.nav-collapsed .sidebar,
  body.hajlajty-terminarz.nav-collapsed .sidebar,
  body.hajlajty-tabela-rozgrywek.nav-collapsed .sidebar,
  body.hajlajty-reprezentacje.nav-collapsed .sidebar,
  body.hajlajty-faza-pucharowa.nav-collapsed .sidebar { padding-inline: var(--space-2xs); }

  /* Etykiety linków w trwałym menu NIE zawijają się — dzięki temu przy animacji
     szerokości (rozwijanie z railu) tekst pojawia się przycięty do bieżącej
     szerokości i płynnie się odsłania, zamiast zawijać w wielolinijkowy blok
     w wąskiej kolumnie i skakać wysokością. Współpracuje z overflow-x:hidden
     na sidebarze. */
  body.home .sidebar .nav-link,
  body.post-type-archive .sidebar .nav-link,
  body.hajlajty-terminarz .sidebar .nav-link,
  body.hajlajty-tabela-rozgrywek .sidebar .nav-link,
  body.hajlajty-reprezentacje .sidebar .nav-link,
  body.hajlajty-faza-pucharowa .sidebar .nav-link { white-space: nowrap; }

  /* Rail: ikona linku zostaje (ma explicit width/height), goły węzeł tekstowy
     gaśnie przez font-size:0. NIE centrujemy ikony ani nie zerujemy jej paddingu
     — ikona ma zostać DOKŁADNIE tam, gdzie w stanie rozwiniętym (x=24px: sidebar
     padding-left 8 + nav-link padding-left 16), żeby przy animacji szerokości
     kolumny nie „odskakiwała" w bok i z powrotem. W szynie 72px i tak wypada
     niemal na środku (środek ikony 34.5 vs środek szyny 36). Nazwa dostępna to
     nadal ten węzeł tekstowy (czytniki ekranu ignorują font-size), więc a11y
     zachowane bez title/aria-label. Nieoscope'owane selektory body.nav-collapsed
     są bezpieczne, bo klasa występuje TYLKO na widokach z trwałym menu: skrypt
     anti-FOUC (header.php) odtwarza ją wszędzie, ale layout.js zdejmuje ją na
     stronach spoza trwałego menu (isPersistentNavPage) — inaczej rail „zjadałby"
     tekst w drawerze na single. */
  body.nav-collapsed .nav-link { font-size: 0; }
  /* Etykiety sekcji, badge LIVE i cały teaser „wkrótce" (ostatnia grupa
     sidebara — patrz coming-soon.php) znikają w trybie rail. */
  body.nav-collapsed .sidebar__label,
  body.nav-collapsed .nav-link .badge-live,
  body.nav-collapsed .sidebar .sidebar__group:last-child { display: none; }

  /* Topbar pełnej szerokości — logo licuje z lewą krawędzią, nad sidebarem
     (na single topbar pozostaje zawężony do pasma widoku). */
  body.home .topbar__inner,
  body.post-type-archive .topbar__inner,
  body.hajlajty-terminarz .topbar__inner,
  body.hajlajty-tabela-rozgrywek .topbar__inner,
  body.hajlajty-reprezentacje .topbar__inner,
  body.hajlajty-faza-pucharowa .topbar__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--space-sm);
  }

  /* Ciasny klaster nagłówka (topbar__left gap 0, hamburger -3, logo padding
     --space-3xs) żyje teraz w ogólnym bloku ≥1100 wyżej — wspólny dla single i
     widoków z trwałym menu. Tu zostają już tylko różnice specyficzne dla trwałego
     menu (pełna szerokość topbara wyżej, statyczny sidebar niżej). */

  /* Sidebar STAŁY: statyczna kolumna z własnym scrollem (nie drawer). */
  body.home .sidebar,
  body.post-type-archive .sidebar,
  body.hajlajty-terminarz .sidebar,
  body.hajlajty-tabela-rozgrywek .sidebar,
  body.hajlajty-reprezentacje .sidebar,
  body.hajlajty-faza-pucharowa .sidebar {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    height: 100%;
    box-shadow: none;
    overflow-y: auto;
    /* Podczas animacji szerokości kolumny (rozwijanie z railu) etykiety linków
       mają być PRZYCINANE do bieżącej szerokości sidebara, nie zawijać się ani
       nie wylewać na kolumnę treści — patrz white-space:nowrap na nav-link niżej. */
    overflow-x: hidden;
    /* border-right: 1px solid var(--border); */
    transition: opacity var(--t-med);
    /* Lewy padding 8px pochodzi teraz z bazowego `.sidebar` (wspólny dla drawera
       i menu stałego) — override tutaj już niepotrzebny. */
  }

  /* Logo żyje w topbarze; nagłówek sidebara (z „zamknij") zbędny. Hamburger
     ZOSTAJE widoczny — służy do zwijania/rozwijania stałego menu. */
  body.home .sidebar__head,
  body.post-type-archive .sidebar__head,
  body.hajlajty-terminarz .sidebar__head,
  body.hajlajty-tabela-rozgrywek .sidebar__head,
  body.hajlajty-reprezentacje .sidebar__head,
  body.hajlajty-faza-pucharowa .sidebar__head { display: none; }

  /* Treść WYPEŁNIA kolumnę: zdejmujemy max-width/centrowanie .container w .content
     (inaczej lista zostaje w pasie --container = ~3 karty mimo szerokiego ekranu). */
  body.home .content main.container,
  body.post-type-archive .content main.container,
  body.hajlajty-terminarz .content main.container,
  body.hajlajty-tabela-rozgrywek .content main.container,
  body.hajlajty-reprezentacje .content main.container,
  body.hajlajty-faza-pucharowa .content main.container,
  body.home .content .footer > .container,
  body.post-type-archive .content .footer > .container,
  body.hajlajty-terminarz .content .footer > .container,
  body.hajlajty-tabela-rozgrywek .content .footer > .container,
  body.hajlajty-reprezentacje .content .footer > .container,
  body.hajlajty-faza-pucharowa .content .footer > .container {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--gutter);
  }

  /* Scrim niepotrzebny przy stałym menu (zwijanie idzie przez grid, nie drawer). */
  body.home .scrim,
  body.post-type-archive .scrim,
  body.hajlajty-terminarz .scrim,
  body.hajlajty-tabela-rozgrywek .scrim,
  body.hajlajty-reprezentacje .scrim,
  body.hajlajty-faza-pucharowa .scrim { display: none !important; }
}

/* ============================================================
   STOPKA
============================================================ */
.footer { border-top: 1px solid var(--border); background: var(--bg); padding-block: var(--space-xl); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-lg); }
.footer__brand { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 320px; }
.footer__tag { color: var(--text-muted); font-size: 14px; }
.footer__col h4 { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-sm); }
.footer__col a { display: block; padding: 6px 0; color: var(--text-muted); font-weight: 600; font-size: 14px; transition: color var(--t-fast); }
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 13px; font-weight: 600;
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  :root { --topbar-h: 64px; }
  .logo { font-size: 22px; }
  .footer__grid { grid-template-columns: 1fr; }
}