/* Nawigacja pielgrzymki — wspólna dla wszystkich stron dzieła.
 * Reguły stały wcześniej w <style> strony głównej i nie dało się ich użyć
 * nigdzie indziej: strona wspólnoty pokazywała gołe odnośniki zlepione
 * w jedną linię. Jeden plik, jedno miejsce do poprawienia. */

.ped-nav{position:sticky;top:0;z-index:9999;display:flex;flex-wrap:wrap;align-items:center;gap:4px;
 padding:9px 16px;background:#1B1D46;border-bottom:2px solid #E2B354;
 font:600 14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ped-nav a{color:#e8dfc9;text-decoration:none;padding:6px 12px;border-radius:18px;white-space:nowrap}
.ped-nav a:hover{background:#2A2D60;color:#fff}
.ped-nav a:focus-visible{outline:2px solid #E2B354;outline-offset:2px}
.ped-nav .ped-nav-marka{margin-right:auto;padding-left:0;font-weight:800;color:#fff;
 display:inline-flex;align-items:center;gap:10px}
/* ZNAKU DZIEŁA W PASKU NIE MA — dwa razy sprawdzone, dwa razy zdjęty.
   Pielgrzymka ma własny znak: rodzina idąca po otwartej księdze ku Jasnej
   Górze, z wieżą jasnogórską.

   28.08.2026 — znak poprzedni, rytowniczy: przy 34 px zamieniał się w plamkę.
   02.09.2026 — znak oficjalny, płaska sylweta: wstawiony na polecenie
   ks. Andrzeja w wysokości 40 px (poniżej rodzina zlewa się z wieżą —
   zmierzone: 28 px plama, 34 px postacie ledwie odróżnialne, 40 px widać
   pięć postaci, 48 px czytelne bez wysiłku). Po obejrzeniu ks. Andrzej
   polecił go zdjąć tego samego dnia.

   W pasku zostaje sam napis, czytelny w każdym rozmiarze. Znak stoi tam,
   gdzie ma miejsce: na czole strony głównej dzieła. */
.ped-nav .ped-nav-marka:hover{background:none;text-decoration:underline}
@media(max-width:520px){.ped-nav .ped-nav-marka::before{width:26px;height:34px}}
.ped-nav .ped-nav-teraz{background:#E2B354;color:#1B1D46}

/* Pasek nawigacji stoi na wierzchu, więc element przewinięty „na górę" chowa
   się pod nim — na zrzucie widać było tytuł modlitwy przecięty w pół.
   Zapas równy wysokości paska zostawia tytuł tam, gdzie go widać. */
.ped-modlitwa, .ped, section[id], [id] {
  scroll-margin-top: 5.5rem;
}


/* ── BARWY PASKA NIE ZALEŻĄ OD MOTYWU STRONY ───────────────────────────────
   Pasek jest granatowy zawsze — także wtedy, gdy strona jest biała. Do 2.09.2026
   jego odnośniki brały barwę ze zmiennej `--tekst`, czyli z palety STRONY.
   Po przestawieniu motywu domyślnego na maryjny `--tekst` stał się granatem
   i napisy „Zapisy", „Pomogę" zeszły do 1,88 : 1 — granat na granacie.
   Element, który sam maluje sobie tło, sam odpowiada za swój kolor.
   GRUNT PASKA ZMIENIONY 18.09.2026 na polecenie ks. Andrzeja: z czerni nocy
   #04101f na granat #1B1D46 - ten sam, którym pielgrzymkaed.pl maluje swoje
   ciemne plansze i którym stoi czoło ekranu „Ślad edukacji domowej". Pasek
   przestał być czarny i zaczął mówić barwą dzieła.

   Zmierzone po zmianie (18.09.2026, przeglądarka, strona główna i ekran
   roboczy, motyw jasny i ciemny systemu - wynik ten sam, bo pasek nie zależy
   od motywu):
       #e8dfc9 na #1B1D46   = 12,08 : 1   (odnośniki)
       #ffffff na #1B1D46   = 16,02 : 1   (marka „Edukacja domowa")
       #E2B354 na #1B1D46   =  8,25 : 1   („Wejdź")
       #1B1D46 na #E2B354   =  6,99 : 1   (pastylka bieżącej pozycji)
   Najazd rozjaśniono z #122a45 na #2A2D60, żeby był rozjaśnieniem TEGO
   granatu, a nie plamą w innym odcieniu. */
.ped-nav a.ped-nav-a,
.ped-nav a.ped-nav-marka { color: #e8dfc9; }
.ped-nav a.ped-nav-marka { color: #ffffff; }
.ped-nav a.ped-nav-a.ped-nav-teraz { background: #E2B354; color: #1B1D46; }
.ped-nav a.ped-nav-a.ped-nav-wejdz { color: #E2B354; border-color: #2b5a8f; }
.ped-nav a.ped-nav-a.ped-nav-wejdz:hover { color: #E2B354; border-color: #E2B354;
  text-decoration: underline; text-underline-offset: 3px; }
.ped-nav a.ped-nav-a:hover { background: #2A2D60; color: #ffffff; }

/* ── PASEK W WERSJACH JASNEJ I BIAŁO-CZERWONEJ ─────────────────────────────
   Reguła `:root:is([data-barwy="jasny"],[data-barwy="patriotyczny"]) .ped a`
   z `pielgrzymka.css` (szczegółowość 0,3,1) przebijała `.ped-nav a.ped-nav-a`
   (0,2,1) i malowała odnośniki paska błękitem maryjnym #2E4473. Na granatowym
   pasku (wtedy #04101f, dziś #1B1D46) daje to 1,99 : 1 przy wymaganych
   4,5 : 1 — czyli napisy
   „Mój kokpit", „Media", „Poprawki" praktycznie znikały.

   Zmierzone 6.09.2026 przeglądarką, na czterech ekranach dzieła i w obu
   jasnych wersjach; w maryjnej i ciemnej problemu nie było, bo tam błękit
   nie wchodzi. Dotykało to KAŻDEJ strony, której treść stoi w `.ped` —
   pasek był wtedy potomkiem `.ped` i łapał regułę pisaną dla treści.

   Zasada zostaje ta sama, co wyżej: kto sam maluje sobie tło, sam odpowiada
   za swój kolor. Zmienia się tylko szczegółowość (0,4,1), żeby zasada
   naprawdę wygrywała, a nie tylko była zapisana. */
:root .ped .ped-nav a.ped-nav-a,
:root .ped-nav a.ped-nav-a { color: #e8dfc9; }
:root .ped .ped-nav a.ped-nav-marka,
:root .ped-nav a.ped-nav-marka { color: #ffffff; }
:root .ped .ped-nav a.ped-nav-a.ped-nav-teraz,
:root .ped-nav a.ped-nav-a.ped-nav-teraz { background: #E2B354; color: #1B1D46; }
:root .ped .ped-nav a.ped-nav-a.ped-nav-wejdz,
:root .ped-nav a.ped-nav-a.ped-nav-wejdz { color: #E2B354; }
:root .ped .ped-nav a.ped-nav-a:hover,
:root .ped-nav a.ped-nav-a:hover { background: #2A2D60; color: #ffffff; }

/* ── MIEJSCE NA LOGOWANIE I NA ADRES ZALOGOWANEGO ──────────────────────────
   Wstawia je `pasek-konto.js`, jeden raz dla całego dzieła. Przed 18.09.2026
   odnośnik „Wejdź" był wpisany ręcznie w znacznikach i stał na 24 stronach
   z 43 - na pozostałych 19 nie było się gdzie zalogować.

   ADRES E-MAIL BYWA DŁUGI. Najdłuższy w bazie kont dzieła ma 34 znaki
   i przy siedmiu pozycjach paska rozpycha go na drugi wiersz. Dlatego adres
   dostaje granicę szerokości i wielokropek, a pełne brzmienie zostaje
   w podpowiedzi (`title`) i pod palcem na telefonie. */
.ped-nav a.ped-nav-a.ped-nav-konto {
  color: #E2B354; border: 1px solid #3A3F7A; border-radius: 18px;
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.ped-nav a.ped-nav-a.ped-nav-konto[href]:hover {
  border-color: #E2B354; background: #2A2D60; color: #E2B354;
}
/* Bez adresu docelowego to nie jest odnośnik, tylko informacja, kto jest
   zalogowany - i nie ma prawa udawać, że gdzieś prowadzi. */
.ped-nav a.ped-nav-a.ped-nav-konto:not([href]) { cursor: default; }
@media (max-width: 520px) {
  .ped-nav a.ped-nav-a.ped-nav-konto { max-width: 15ch; }
}

/* ── TRZY PASKI PRZY NAZWIE DZIEŁA ─────────────────────────────────────────
   Wstawia je `pasek-konto.js`, ten sam plik dla wszystkich 43 stron dzieła.
   Wykaz podstron stoi w skrypcie, nie w znacznikach, bo w znacznikach był
   inny na prawie każdej stronie - a na ekranach roboczych nie było go wcale.

   GNIAZDO MA `position: relative`, żeby rozwinięta lista opadła POD pasek,
   a nie wepchnęła się między odnośniki. Sam pasek ma `z-index: 9999`, więc
   lista wystająca poza jego wysokość i tak stoi nad treścią strony. */
.ped-nav .ped-nav-gniazdo { position: relative; display: inline-flex; margin-right: 14px; }

.ped-nav .ped-nav-menu {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 34px; padding: 0 9px; cursor: pointer;
  background: transparent; border: 1px solid #3A3F7A; border-radius: 9px;
}
/* SZEROKOŚĆ KRESEK PODANA WPROST. Pierwsza wersja liczyła na `align-items:
   stretch` w kolumnie giętkiej - zmierzone 18.09.2026 przeglądarką: kreski
   miały szerokość 0 px i guzik był pustym obrysem w obu stanach. Barwy były
   poprawne, więc z arkusza wyglądało to na zrobione. Element, który ma być
   widoczny, podaje swój rozmiar sam. */
.ped-nav .ped-nav-menu .ped-nav-kreska {
  display: block; width: 100%; align-self: stretch;
  height: 2px; border-radius: 2px; background: #e8dfc9;
  transition: background .15s;
}
.ped-nav .ped-nav-menu:hover { background: #2A2D60; border-color: #E2B354; }
.ped-nav .ped-nav-menu:hover .ped-nav-kreska { background: #E2B354; }
.ped-nav .ped-nav-menu.otwarte { background: #E2B354; border-color: #E2B354; }
.ped-nav .ped-nav-menu.otwarte .ped-nav-kreska { background: #1B1D46; }
.ped-nav .ped-nav-menu:focus-visible { outline: 2px solid #E2B354; outline-offset: 2px; }

.ped-nav .ped-nav-lista {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 1;
  min-width: 212px; padding: 7px; border-radius: 13px;
  background: #1B1D46; border: 1px solid #3A3F7A;
  box-shadow: 0 14px 34px rgba(4, 6, 24, .46);
}
/* Pozycje w liście to nie pastylki paska: pełna szerokość, jedna pod drugą,
   bo tak się czyta wykaz. Reguły `.ped-nav a` mają 0,1,1 i przemalowałyby je,
   więc te mają 0,3,1. */
.ped-nav .ped-nav-lista a.ped-nav-poz {
  display: block; padding: 9px 13px; border-radius: 8px; white-space: nowrap;
  color: #e8dfc9; text-decoration: none; font-weight: 500;
}
.ped-nav .ped-nav-lista a.ped-nav-poz:hover { background: #2A2D60; color: #ffffff; }
.ped-nav .ped-nav-lista a.ped-nav-poz.teraz { background: #E2B354; color: #1B1D46; }
.ped-nav .ped-nav-lista a.ped-nav-poz:focus-visible {
  outline: 2px solid #E2B354; outline-offset: -2px;
}

/* Na telefonie pasek łamie się na kilka wierszy, a menu ma zostać przy nazwie
   dzieła - dlatego lista otwiera się od lewej krawędzi gniazda i nie szerzej
   niż ekran. */
@media (max-width: 520px) {
  .ped-nav .ped-nav-lista { min-width: 0; width: max-content; max-width: calc(100vw - 32px); }
}