/* chrome.css – wspólny pasek nawigacji portalu i podstron oraz dwa helpery a11y.
   -------------------------------------------------------------------
   E3 (2026-09-12, docs/spojnosc-podstron-plan.md). Do tej pory `.nav*` istniało
   w CZTERECH kopiach: portal.html, fundacja.html, zrodla.html, kontakt-ekspert.html.
   Nie były to kopie tego samego – rozjechały się w osobne projekty pod tymi samymi
   nazwami klas: klasa A miała `backdrop-filter: blur(12px) saturate(1.4)` i wordmark
   z gradientem obciętym do tekstu (`-webkit-text-fill-color: transparent`), czyli
   dokładnie to, co rebrand „Dziennik energetyczny" usunął z portalu. Kanonem jest
   wersja portalu; ten plik jest jej jedynym egzemplarzem.

   Czego tu NIE ma, bo jest specyficzne dla portalu i zostaje w jego <style>:
   `.nav__links`, dropdown i `.nav__caret`, `.drawer`, `.hamburger`,
   `.is-ticker-hidden .nav`, pozycjonowanie pod tickerem.

   Pasek podstron-narzędziowych (`.topbar*`) ma własny arkusz topbar.css – wspólny
   jest język i tokeny, nie klasy (CLAUDE.md § Reguły kodowania: bez mieszania
   namespace'ów BEM między modułami).
   ===================================================================== */

/* ---------- A11y ---------- */
.skip-link {
  position: absolute; top: -999px; left: 1rem; z-index: 9999;
  background: var(--c-teal-deep); color: var(--on-accent); padding: .6rem 1rem;
  border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- STANY WSPÓLNE ---------- */
/* Generyczne oznaczenie linka do strony, której jeszcze nie ma – nie klikalny,
   wyciszony, ale nadal widoczny (nie chowamy, żeby było wiadomo, że się pojawi).
   Klasę wypuszcza `footer.js` (linki stopki i ikony social ze `status:'planned'`)
   oraz `foundation.js` (`.about__doc`), czyli KAŻDA strona ze stopką – dlatego
   reguła mieszka w chrome.css, nie w inline <style> portalu. Wcześniej stała
   tylko w portal.html i na podstronach pozycje „planned" wyglądały jak zwykłe,
   klikalne linki do `#` (samo `aria-disabled` mówi czytnikowi, nie oku i nie myszy).
   Ikony social mają mocniejsze `.icon-btn[aria-disabled]` z controls.css (opacity .4);
   stąd bierze się tylko `pointer-events`. */
.is-coming-soon { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ---------- NAV ---------- */
/* Domyślnie `sticky` u góry – tak działa na podstronach. Portal ma nad paskiem
   ticker i nadpisuje pozycjonowanie u siebie. Powierzchnia `--card-bg` (biały pas
   na szarej stronie, jak pasek wyszukiwania Navera) – ta sama decyzja co w R3
   i ten sam kolor co `.topbar`. Bez `backdrop-filter`: rebrand zdjął glass. */
.nav {
  position: sticky; top: 0; inset-inline: 0; z-index: 300;
  background: var(--card-bg);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--t-base), border-color var(--t-base);
}

.nav__wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--nav-h); padding-inline: var(--px); }

.nav__logo { display: flex; flex-direction: column; gap: 2px; }
.nav__logo-top { font-family: var(--f-head); font-size: .58rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--c-teal-deep); }
/* Wordmark = h1 portalu (na podstronach span), jedna linia. Krój siedzi w obrysach
   lockupu SVG, nie w tokenie – dlatego reguła nie ustawia font-family. */
/* Wordmark jako maska CSS, nie tekst. Lockup (znak Fundacji + „DZIEŃ Z ENERGIĄ") jest
   jednym plikiem SVG malowanym kolorem `--accent`, więc motyw ciemny obsługuje się sam,
   a plik idzie raz i siedzi w cache – inline'owanie SVG w 35 stronach byłoby złym interesem.
   Tekst ZOSTAJE w dokumencie (SEO, czytniki ekranu), tylko jest wypchnięty poza kadr
   klasyczną podmianą obrazkową; dlatego `overflow:hidden` i `white-space:nowrap`.

   Od rebrandingu paska lockup pochodzi z rodziny Fundacji Entegra
   (`tools/build_entegra_logo.py`): sześcian w perspektywie plus wersaliki w Interze.
   Poprzedni plik `dzienzenergia-lockup-h.svg` niósł szeryf w obrysach – teraz wordmark
   paska jest bezszeryfowy i krojem zgodny z kickerem nad nim. Wysokość kadru została
   ta sama (proporcja 903,58 / 120 zamiast 1459,6 / 165,3), więc rytm paska się nie ruszył;
   zmieniła się tylko szerokość, policzona z nowej proporcji.

   Lockup idzie jako `background-image` w pełnej palecie marki, nie jako maska w barwie
   akcentu: maska spłaszczała trójbarwny znak (granat/morski/miedź) do jednego błękitu
   `--accent`, który do marki nie należy. Plik nie zgaduje motywu (README-entegra.md),
   więc paletę nocną wybiera tu reguła `[data-theme="dark"]` – tak samo jak hero
   w `fundacja.html`. Wersja `-mono` zostaje dla miejsc, gdzie znak ma iść w barwie
   otoczenia (pas końcowy fundacji). */
.nav__logo-main {
  display: block; width: clamp(159px, 14.1vw, 198px); aspect-ratio: 903.58 / 120;
  background: url(../images/logo/entegra-portal-lockup.svg) no-repeat left center / contain;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
[data-theme="dark"] .nav__logo-main {
  background-image: url(../images/logo/entegra-portal-lockup-noc.svg);
}
.nav__logo-main { margin: 0; }

.nav__link { position: relative; color: var(--c-fg-muted); font-size: .78rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; transition: color var(--t-fast); }
.nav__link::after { content: ''; position: absolute; bottom: -4px; inset-inline: 0; height: 2px; background: var(--c-teal); border-radius:0; transform: scaleX(0); transition: transform var(--t-fast); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--c-fg); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: .6rem; }

/* CTA paska („Wesprzyj") to .btn.btn--primary.btn--sm z controls.css (U3, 2026-09-18);
   .nav__cta zostaje jako hak do ułożenia na wąskim ekranie (reguła niżej). */

/* Wariant „tylko powrót" (kontakt-ekspert.html): .back-link z controls.css (U4). */

/* ---------- FOOTER ---------- */
/* E3/D4 (wariant a): pełna, czterokolumnowa stopka wszędzie tam, gdzie strona ma `.nav`
   i siatkę `.footer__grid` – portal.html, fundacja.html, zrodla.html. Strony z jedną
   linią (kontakt-ekspert.html) dostają `.footer--slim`. Ten sam podział hub/wnętrze
   co D2 (tło) i D3 (promienie).

   Do E3 istniały trzy różne stopki pod tymi samymi klasami: portal ciemny granat,
   fundacja i zrodla jasne `--c-bg-elev` z siatką `2fr repeat(3,1fr)` i logo
   w gradiencie obciętym do tekstu. Kanonem jest portal. */
.footer {
  /* Ciemna powierzchnia niezależna od motywu – akcent musi być tu wariantem ciemnym,
     inaczej nagłówki kolumn mają 2,27:1 zamiast wymaganych 4,5:1. */
  --c-teal-bright: #69A9E6;
  background: var(--ink-deep); color: #fff;
  padding: 3rem var(--px) 1.75rem;
  position: relative; z-index: 1;
}
/* Wrapper transparentny dla grid-layoutu (kolumny z JS lecą wprost jako grid-items). */
.footer__cols-wrap { display: contents; }
/* Siatka niezależna od liczby kolumn: marka dostaje 2fr, każda kolumna z footer.js
   tworzy własny tor 1fr. Portal ma w footer.json dwie kolumny, fundacja i zrodla trzy –
   sztywne `2fr 1fr 1fr` zawijało tę trzecią do drugiego wiersza. */
.footer__grid { display: grid; grid-auto-flow: column; grid-template-columns: 2fr; grid-auto-columns: 1fr; gap: 2.75rem; margin-bottom: 2.25rem; }
.footer__logo { font-family: var(--f-head); font-size: 1.05rem; font-weight: 800; margin-bottom: .35rem; }
.footer__logo span { color: var(--c-teal-bright); }
.footer__tag { font-size: .75rem; color: rgba(148,163,184,.8); font-style: italic; font-weight: 300; margin-bottom: 1rem; }
.footer__socials { display: flex; gap: .5rem; }
/* Na dotyku każda ikona ma obszar trafienia --tap (controls.css, „CEL DOTYKOWY"): 32 px koła
   + 2 × 6 px. Przy odstępie .5rem obszary sąsiadów nachodziłyby na siebie o 4 px. */
@media (pointer: coarse) { .footer__socials { gap: calc(var(--tap) - 32px); } }
/* Ikony społecznościowe: kształt i rozmiar z .icon-btn.icon-btn--sm (controls.css, U4); tu tylko
   barwy ciemnej stopki (niezależnej od motywu). Selektor z .footer i podwojoną klasą bije
   taflę Aero `[data-surface] .icon-btn`, która na granacie dałaby białe koło. */
.footer .icon-btn.footer__social { background: rgba(21,94,156,.1); border-color: rgba(21,94,156,.2); color: rgba(148,163,184,.9); box-shadow: none; }
.footer .icon-btn.footer__social:hover { background: rgba(21,94,156,.25); color: var(--c-teal-bright); border-color: var(--c-teal-bright); }
/* `.footer__col h4` – portal; `.footer h4` – zapasowo, gdy footer.js wyrenderuje
   nagłówek kolumny bez wrappera (tak działa na fundacja.html i zrodla.html). */
.footer__col h4, .footer h4 { font-family: var(--f-head); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-teal-bright); margin-bottom: .9rem; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer__links a { font-size: .78rem; color: rgba(148,163,184,.85); transition: color var(--t-fast); }
.footer__links a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.4rem; border-top: 1px solid rgba(21,94,156,.12); flex-wrap: wrap; gap: .9rem; }
.footer__copy { font-size: .7rem; color: rgba(148,163,184,.8); line-height: 1.7; }
.footer__legal { display: flex; gap: 1.35rem; }
.footer__legal a { font-size: .7rem; color: rgba(148,163,184,.8); transition: color var(--t-fast); }
.footer__legal a:hover { color: rgba(148,163,184,.9); }

/* Wariant jednolinijkowy – strona bez `.footer__grid`. Ta sama rola co `.page-footer`
   na podstronach-narzędziowych, tylko renderowana przez footer.js. */
.footer--slim {
  --c-teal-bright: var(--accent);
  background: transparent; color: var(--c-fg-muted);
  border-top: 1px solid var(--c-border);
  padding: 1.5rem var(--px);
  text-align: center; font-size: .8rem;
}
.footer--slim .footer__bottom { justify-content: center; padding-top: 0; border-top: 0; }
.footer--slim .footer__copy, .footer--slim .footer__legal a { color: var(--c-fg-muted); }
.footer--slim .footer__legal a:hover { color: var(--accent); }

@media (max-width: 1100px) { .footer__grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px)  { .footer__grid { grid-auto-flow: row; grid-template-columns: 1fr; } }

/* Atrybut `hidden` ma wygrywać z układem komponentu.
   -----------------------------------------------------------------------------
   Reguła przeglądarki to `[hidden] { display: none }` o zerowej specyficzności,
   więc KAŻDA klasa komponentu z własnym `display` ją kasuje. Tak właśnie przeciekł
   na produkcję przełącznik motywu: `#themeBtn` ma w markupie `hidden` (motyw ciemny
   jest zawieszony – MOTYW_CIEMNY w core.js), ale `.icon-btn { display: inline-flex }`
   z arkusza strony okazało się mocniejsze i guzik był widoczny mimo wyłącznika.
   Zamiast łatać pojedynczy przypadek domykamy regułę raz, dla całego serwisu –
   `hidden` w markupie ma znaczyć „nie ma tego na stronie". */
[hidden] { display: none !important; }

/* [ROBOCZE 2026-09-17] Pasek podstron generowanych z `data-site-nav` wypychał stronę
   w bok przy 390 px: fundacja.html miała 484 px treści w 390 px okna, zrodla.html 397 px.
   Winowajcą prawa strona nawigacji (linki + CTA) plus dolna granica clampu wordmarku
   (186 px), które razem nie mieszczą się w telefonie.

   portal.html rozwiązuje to u siebie inaczej – chowa `.nav__links` przy ≤768 px
   i pokazuje hamburger z szufladą. Te podstrony nie mają ani hamburgera, ani szuflady,
   więc schowanie linków zabrałoby im jedyną nawigację. Do czasu właściwej wersji
   mobilnej zwężamy zamiast chować: nic nie znika, pasek zostaje jednowierszowy
   i trzyma --nav-h.

   Selektor celuje WYŁĄCZNIE w `.nav[data-site-nav]`, więc strona główna jest nietknięta.
   To rozwiązanie tymczasowe – przy robieniu wersji mobilnej ten blok wyleci razem
   z decyzją, jak nawigacja podstron ma wyglądać na telefonie. */
@media (max-width: 768px) {
  .nav[data-site-nav] .nav__logo-main { width: clamp(132px, 34vw, 186px); }
  .nav[data-site-nav] .nav__logo-top { font-size: .5rem; letter-spacing: .16em; }
  .nav[data-site-nav] .nav__right { gap: .35rem; min-width: 0; }
  .nav[data-site-nav] .nav__link { font-size: .68rem; white-space: nowrap; }
  .nav[data-site-nav] .nav__cta { padding: .4rem .6rem; font-size: .66rem; }
}