/* Wspólny pasek nawigacyjny serwisu (lib/nav.php) — PLAN-album-b2c.md, Etapy 2b i 3a.
   ---------------------------------------------------------------------------------------
   OSOBNY ARKUSZ, a nie blok w site.css, bo pasek stoi na stronach o DWÓCH różnych arkuszach:
   publicznych (site.css) i logowania/rejestracji (account/account.css). Wpisanie tych reguł
   do obu skończyłoby się rozjechaniem wyglądu przy pierwszej zmianie — pasek ma wyglądać
   identycznie wszędzie, więc ma jedno źródło. Kosztem jest jedno dodatkowe, drobne żądanie.

   Kolory bierze ze zmiennych motywu (--fg, --accent, --muted, --line), które definiują OBA
   arkusze pod tymi samymi nazwami; dlatego ten plik nie ustala własnej palety.

   Przyklejony do góry, żeby wejście do usług i logowanie były w zasięgu na całej długości
   strony. Na telefonie pozycje usług i wybór języka chowają się pod przyciskiem menu — do
   2026-09-11 po prostu ZNIKAŁY, więc z telefonu nie dało się przejść do Albumu ani do
   dokumentów (zgłoszenie TM). Rozwijanie robi pole wyboru, nie skrypt: pasek stoi także
   na stronach, które żadnego skryptu nie wczytują. */

.fc-nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.fc-nav-in{max-width:960px;margin:0 auto;padding:9px 18px;display:flex;align-items:center;gap:14px}
.fc-nav-logo{display:block;flex:none}
.fc-nav-logo img{height:26px;display:block}
.fc-nav-links{display:flex;gap:18px;flex:1;flex-wrap:wrap}
.fc-nav-links a{color:var(--muted);text-decoration:none;font-size:14.5px;padding:5px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.fc-nav-links a:hover{color:var(--fg)}
.fc-nav-links a.on{color:var(--fg);font-weight:600;border-bottom-color:var(--accent)}
.fc-nav-lang{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:14px;
  background:#fff;color:var(--fg);max-width:132px}
.fc-nav-login{background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
  font-size:14.5px;padding:9px 16px;border-radius:8px;white-space:nowrap}

/* Strony logowania i rejestracji mają wyśrodkowaną, wąską kolumnę (.auth) i własny odstęp
   od góry. Pasek jest pełnej szerokości, więc odstęp trzeba mu odebrać, inaczej nad paskiem
   zostaje pusty pas. Reguła stoi tutaj, bo dotyczy współistnienia paska z tym układem. */
.fc-nav + .auth{padding-top:22px}

/* Przycisk menu: na szerokim ekranie go nie ma, bo wszystkie pozycje są widoczne.
   Pole wyboru zostaje w drzewie (nie `display:none`), żeby dało się do niego dojść
   klawiszem Tab; jest tylko odsunięte poza obraz. */
.fc-nav-tog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fc-nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:40px;height:36px;padding:8px 8px;border:1px solid var(--line);border-radius:9px;
  background:#fff;cursor:pointer;flex:none}
.fc-nav-burger span{display:block;height:2px;background:var(--fg);border-radius:2px}
.fc-nav-tog:focus-visible+.fc-nav-burger{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:820px){
  .fc-nav-in{flex-wrap:wrap;gap:10px;padding:8px 14px}
  .fc-nav-logo{order:1;margin-right:auto}
  .fc-nav-logo img{height:23px}
  .fc-nav-login{order:2;padding:8px 12px;font-size:13.5px}
  .fc-nav-burger{order:3;display:flex}

  /* Pozycje i język schodzą pod pasek, każde na całą szerokość — palcem trafia się
     w wiersz, nie w odnośnik wielkości słowa. */
  .fc-nav-links{order:4;flex-basis:100%;display:none;flex-direction:column;gap:0;
    padding:2px 0 6px}
  .fc-nav-links a{padding:12px 2px;font-size:15.5px;border-bottom:1px solid var(--line)}
  .fc-nav-links a:last-child{border-bottom:0}
  .fc-nav-links a.on{border-bottom-color:var(--line);color:var(--accent)}
  .fc-nav-lang{order:5;flex-basis:100%;display:none;max-width:none;margin-bottom:8px}

  .fc-nav-tog:checked~.fc-nav-links{display:flex}
  .fc-nav-tog:checked~.fc-nav-lang{display:block}
}