/* ===========================================================================
   03 — NAGŁÓWEK

   Pasek ogłoszeniowy + dwa rzędy nawigacji z makiety.

   Rząd 1: sygnatura · menu górne (About/Access/Submit/Contact) · konto
   Rząd 2: menu główne (Current issue, Archive, Editorial board, …) · szukajka

   ⚠ DWA POZIOMY NAWIGACJI WYMAGAJĄ TRZECIEGO OBSZARU MENU. OJS zna domyślnie
     tylko `primary` i `user`; obszar `eosTop` deklaruje wtyczka motywu.
     Bez tego oba poziomy musiałyby dzielić jedno menu i rząd 1 zostawał pusty.
   =========================================================================== */

/* --- pasek ogłoszeniowy --------------------------------------------------- */

/* Treść bierze się z najnowszego ogłoszenia czasopisma. Brak ogłoszeń = brak
   paska; to poprawny stan, nie usterka. */
.eos_pasek {
  background: var(--eos-blekit);
  color: var(--eos-tlo);
}
.eos_pasek_tresc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eos-odstep-24);
  flex-wrap: wrap;
  padding-top: 11px;
  padding-bottom: 11px;
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-18);
  text-transform: uppercase;
}
.eos_pasek a {
  color: var(--eos-tlo);
  border-bottom: var(--eos-linia) solid var(--eos-tlo-50);
  padding-bottom: 2px;
}
/* ⚠ ODSTĘPSTWO OD MAKIETY, ŚWIADOME. Makieta zostawia tu globalne
   `a:hover{color:#050554}` — granat na błękicie #1717de daje kontrast 1,8:1,
   czyli odsyłacz po najechaniu staje się NIECZYTELNY. Zamiast ciemnienia
   rozjaśniamy kreskę. Ten sam wyjątek zrobiliśmy w stopce (04). */
.eos_pasek a:hover,
.eos_pasek a:focus {
  color: var(--eos-tlo);
  border-bottom-color: var(--eos-tlo);
  text-decoration: none;
}

/* --- ramy nagłówka -------------------------------------------------------- */

.pkp_structure_head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--eos-tlo);
  border-bottom: var(--eos-linia) solid var(--eos-atrament-14);
}

/* ⚠ UKŁAD ELASTYCZNY, NIE SIATKA. Siatka dobiera szerokość kolumn do
   NAJSZERSZEJ zawartości — dolny rząd nawigacji rozpychał przez to cały
   nagłówek daleko poza kontener (zmierzone w poprzedniej wersji: 1896 px
   przy dostępnych 1160). W układzie elastycznym z `flex-basis: 100%` na dolnym
   rzędzie problem nie występuje: rząd zajmuje pełną szerokość rodzica. */
.eos_naglowek_tresc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--eos-odstep-32);
  padding-top: var(--eos-odstep-18);
}

/* --- sygnatura ------------------------------------------------------------ */

.eos_sygnatura {
  display: flex;
  flex-direction: column;
  gap: var(--eos-odstep-4);
  color: var(--eos-atrament);
  flex: 0 0 auto;
}
.eos_sygnatura:hover,
.eos_sygnatura:focus { color: var(--eos-atrament); text-decoration: none; }

.eos_sygnatura_glowna {
  font-family: var(--eos-szeryf);
  font-style: italic;
  /* Makieta nie nadaje wagi — zostaje domyślna 400. Przy zmiennej Lorze
     różnica wobec 500 jest widoczna, więc to nie jest drobiazg. */
  font-weight: var(--eos-waga-zwykla);
  font-size: var(--eos-pismo-30);
  line-height: var(--eos-interlinia-1);
}
.eos_sygnatura_podtytul {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-10);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
  color: rgba(0, 0, 28, .62);
  white-space: nowrap;
}

/* --- menu (wspólna typografia) -------------------------------------------- */

.eos_menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--eos-etykieta);
  text-transform: uppercase;
}
.eos_menu > li { margin: 0; }

/* ⚠ UKŁAD SIEDZI NA `<nav>`, NIE NA `<ul>`. Opakowanie menu w punkt
   orientacyjny wsunęło nowy element między kontener elastyczny a listę —
   gdyby `margin-left: auto` i `flex` zostały na liście, przestałyby cokolwiek
   robić i cały rząd 1 zbiłby się do lewej krawędzi. */
.eos_nawigacja_gora,
.eos_nawigacja_konto { display: flex; flex: 0 0 auto; }
.eos_nawigacja_gora { margin-left: auto; }
.eos_nawigacja_konto { margin-left: var(--eos-odstep-32); position: relative; }

.eos_menu_gora {
  gap: var(--eos-odstep-30);
  font-size: var(--eos-pismo-12);
  letter-spacing: var(--eos-swiatlo-16);
}
.eos_menu_gora > li > a { color: var(--eos-atrament-75); }
.eos_menu_gora > li > a:hover,
.eos_menu_gora > li > a:focus { color: var(--eos-atrament); text-decoration: none; }

/* Menu użytkownika: „Register" jako jedyny przycisk w nagłówku — to jedyne
   wezwanie do działania w tym pasie. */
.eos_menu_konto {
  gap: var(--eos-odstep-30);
  font-size: var(--eos-pismo-12);
  letter-spacing: var(--eos-swiatlo-16);
}
/* R4 — pionowa kreska rozdzielająca grupy rzędu 1. W makiecie są dwie
   (przed szukajką i przed „Log in"); u nas szukajka stoi w rzędzie 2, więc
   zostaje jedna: między nawigacją górną a kontem. */
.eos_nawigacja_konto::before {
  content: "";
  position: absolute;
  left: calc(var(--eos-odstep-32) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--eos-atrament-16);
}

.eos_menu_konto > li > a { color: var(--eos-atrament-75); }
.eos_menu_konto > li > a:hover { color: var(--eos-atrament); text-decoration: none; }

/* ⚠ SELEKTOR PO ADRESIE, NIE PO KLASIE — I TO NIE JEST SZTUCZKA.
   Rdzeniowy `navigationMenu.tpl` nadaje KAŻDEJ pozycji tę samą klasę
   przekazaną w `liClass`; nie ma żadnego sposobu, żeby z szablonu odróżnić
   „Register" od „Log in". Poprzednia reguła celowała w `.eos_konto_rejestracja`,
   która nigdy nie powstawała — jedyne wezwanie do działania w nagłówku
   renderowało się jako zwykły tekst. Adres pozycji rejestracji jest ustalony
   przez router OJS-a i nie zależy od nazwy nadanej w panelu. */
.eos_menu_konto a[href*="/user/register"] {
  background: var(--eos-atrament);
  color: var(--eos-tlo);
  padding: 11px var(--eos-odstep-20);
  display: inline-block;
}
.eos_menu_konto a[href*="/user/register"]:hover,
.eos_menu_konto a[href*="/user/register"]:focus {
  background: var(--eos-blekit-ciemny);
  color: var(--eos-tlo);
  text-decoration: none;
}

/* --- drugi rząd ----------------------------------------------------------- */

/* ⚠ LINIA NAD RZĘDEM 2 IDZIE OD KRAWĘDZI DO KRAWĘDZI OKNA, a sam rząd
   zostaje w kontenerze. W makiecie to osobny pas pełnej szerokości; u nas
   rząd musi siedzieć w tym samym elastycznym pojemniku co rząd 1, więc kreskę
   rysuje pseudoelement rozciągnięty na 100vw. `overflow-x: clip` na `body`
   (arkusz 02) przycina ewentualny nadmiar szerokości paska przewijania. */
.eos_naglowek_rzad2 {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  margin-top: var(--eos-odstep-18);
  display: flex;
  align-items: center;
  gap: var(--eos-odstep-16);
  min-width: 0;
}
.eos_naglowek_rzad2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  border-top: var(--eos-linia) solid var(--eos-atrament-10);
}

.eos_menu_glowne {
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--eos-odstep-32);
  min-width: 0;
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-16);
}
.eos_menu_glowne > li { position: relative; }
.eos_menu_glowne > li > a {
  display: inline-block;
  padding: 13px 0;
  color: var(--eos-atrament-70);
  border-bottom: var(--eos-linia-nawigacja) solid transparent;
  white-space: nowrap;
}
/* R8 — najechanie tylko ciemni tekst. Kreska pod pozycją jest w makiecie
   sygnałem „tu jesteś", a nie „tu jest kursor"; łączenie obu robiło z niej
   szum. */
.eos_menu_glowne > li > a:hover,
.eos_menu_glowne > li > a:focus {
  color: var(--eos-atrament);
  text-decoration: none;
}

/* ⚠ `.eos_biezaca` NADAJE SKRYPT (js/eos.js), NIE RDZEŃ. `navigationMenu.tpl`
   nie wystawia `.current` ani `aria-current` — reguła oparta na `.current`
   nigdy się nie uruchamiała i podświetlenia bieżącej strony po prostu nie było. */
.eos_menu_glowne > li.eos_biezaca > a {
  color: var(--eos-atrament);
  border-bottom-color: var(--eos-blekit);
}

/* --- szukajka ------------------------------------------------------------- */

/* Pole wyszukiwania w rzędzie 2 — kreska pod spodem, jak w makiecie. */
.eos_szukajka {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--eos-odstep-8);
  border-bottom: var(--eos-linia) solid var(--eos-atrament-50);
  padding-bottom: 5px;
}
.eos_szukajka_ikona {
  font-size: var(--eos-pismo-12);
  line-height: 1;
  /* ⚠ `-60`, NIE `-50`. Przy tym stopniu `-50` to 3,85:1 — poniżej 4,5:1. */
  color: var(--eos-atrament-60);
}
/* ⚠ POLE MUSI ZDJĄĆ Z SIEBIE STYL FORMULARZY (arkusz 07 daje mu białe tło,
   ramkę i 16 px). W nagłówku ma być kreską, nie kontrolką. */
.eos_szukajka input[type="search"] {
  width: 88px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-14);
  text-transform: uppercase;
  color: var(--eos-atrament);
}
.eos_szukajka input[type="search"]::placeholder { color: var(--eos-atrament-60); opacity: 1; }
.eos_szukajka input[type="search"]:focus { outline: 0; box-shadow: none; }
/* Kreska podświetla się, gdy pole ma fokus — to jedyny wskaźnik, bo obwódkę
   zdejmujemy powyżej. */
.eos_szukajka:focus-within { border-bottom-color: var(--eos-blekit); }

/* --- podmenu i menu mobilne ----------------------------------------------- */

/* ⚠ TE REGUŁY PEŁNIĄ FUNKCJĘ, NIE DEKORACJĘ. Podmenu jest domyślnie zwinięte
   CSS-em i rozwijane skryptem (`js/eos.js`). Bez nich wszystkie podmenu byłyby
   rozwinięte naraz — to samo dotyczy menu mobilnego. */
.eos_menu_glowne li > ul {
  display: none;
  position: absolute;
  z-index: 30;
  min-width: 220px;
  margin-top: var(--eos-odstep-8);
  padding: var(--eos-odstep-12) 0;
  background: var(--eos-biel);
  border: var(--eos-linia) solid var(--eos-atrament-12);
  list-style: none;
}
.eos_menu_glowne li.eos_podmenu_otwarte > ul { display: block; }
.eos_menu_glowne li > ul a {
  display: block;
  padding: var(--eos-odstep-8) var(--eos-odstep-20);
  color: var(--eos-atrament-75);
  white-space: nowrap;
}
.eos_menu_glowne li > ul a:hover { color: var(--eos-atrament); text-decoration: none; }

.eos_podmenu_przycisk {
  border: 0;
  background: transparent;
  padding: 0 0 0 6px;
  cursor: pointer;
  color: inherit;
  line-height: 1;
}
.eos_podmenu_przycisk::after { content: "▾"; font-size: 10px; }

/* Przycisk menu mobilnego — ukryty na desktopie, pokazywany w warstwie
   responsywnej (09). */
.pkp_site_nav_toggle {
  display: none;
  align-items: center;
  gap: var(--eos-odstep-10);
  /* ⚠ `-50`, NIE `-28`. Granica kontrolki to element nietekstowy: WCAG 1.4.11
     wymaga 3:1, a `-28` na pergaminie daje 1,97:1 — obrys przycisku jest
     wtedy praktycznie niewidoczny. Wyliczone, nie oszacowane. */
  border: var(--eos-linia) solid var(--eos-atrament-50);
  background: transparent;
  padding: var(--eos-odstep-8) var(--eos-odstep-14);
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
  cursor: pointer;
}

/* --- pasek panelu nawigacji (tylko telefon, patrz 09) --------------------- */

/* Domyślnie schowane: na desktopie panel jest zwykłym rzędem nagłówka — nie ma
   czego zamykać ani czego rozdzielać etykietami. Pokazuje je warstwa 09. */
.eos_panel_pasek,
.eos_panel_etykieta { display: none; }

.eos_panel_tytul {
  font-family: var(--eos-szeryf);
  font-style: italic;
  font-size: var(--eos-pismo-26);
  line-height: var(--eos-interlinia-1);
}
.eos_panel_zamknij {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
  background: transparent;
  border: var(--eos-linia) solid var(--eos-atrament-50);
  color: var(--eos-atrament);
  padding: var(--eos-odstep-10) var(--eos-odstep-16);
  cursor: pointer;
}
.eos_panel_zamknij::after { content: "\00a0\00d7"; }
.eos_panel_zamknij:hover { background: var(--eos-atrament); color: var(--eos-tlo); }

/* Trzy kreski przycisku menu — rysowane obramowaniem, bez pliku i bez
   biblioteki ikon (motyw nie ładuje żadnej). */
.eos_kreski {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: relative;
}
.eos_kreski::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 100%;
  border-top: 2px solid currentColor;
}