/* child.css — wersja konwersji OJS 3.3 (zmodyfikowane)
 *
 * W tym pliku uporządkowano sekcje styli, aby ułatwić orientację i
 * utrzymanie. Kolejne sekcje zawierają:
 *   1. Style ogólne (desktop domyślnie)
 *   2. Style dla menu użytkownika i primary menu
 *   3. Ustawienia desktopowe (>= 993 px) – wyrównanie elementów w jednej linii
 *   4. Sekcja mobilna (<= 992 px) – zgrupowane wszystkie reguły mobilne
 *   5. Dodatkowe breakpoints (<= 576 px i <= 575.98 px)
 *
 * Dodano komentarze w miejscach, które mogą wymagać dodatkowej uwagi.
 */

/* --------------------------------------------------------------------
 * 1. OGÓLNE STYLES
 * ------------------------------------------------------------------*/

/* Główny pasek nagłówka */
.pkp_structure_head {
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    background: none !important;
}

/* Przycisk hamburgera */
.pkp_site_nav_toggle {
    background: grey;
}

/* --------------------------------------------------
 *  HERO BANNER (platform-hero)
 *  Tło ustawiane względnie; logo centrowane.
 * ------------------------------------------------*/
.platform-hero{
  position:relative;
  /*min-height:320px;*/
  display:flex;
  align-items:center;
  justify-content:center;
  background-image: url("../images/tlo.png"); /* <— klucz: ścieżka względna */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.platform-hero__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:24px;
}
.platform-hero__logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.platform-hero__logo.is_img img{
  max-width:90%;
  max-height:160px;
  height:auto;
  width:auto;
  /*filter:drop-shadow(0 2px 8px rgba(0,0,0,.2));*/
}
.platform-hero__logo.is_text{
  font:700 2rem/1.1 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#000;
}

/* Opcjonalnie ukryj górne logo na stronie głównej */
body.pkp_page_index .pkp_site_name_wrapper .pkp_site_name{
  display:none;
}

/* --------------------------------------------------
 *  SEKCJA NAGŁÓWKA I TYTUŁU SEKCYJNEGO
 * ------------------------------------------------*/
/* Kontener sekcji */
.section-heading{
  display:block;
  text-align:center;
  padding:.5rem 0;
}

/* Sam nagłówek */
.section-heading h2{
  margin:0;
  font-family: Georgia, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:500;
  font-size:2.2rem;
  color:#000 !important;
}

/* --------------------------------------------------
 *  JOURNAL GRID
 *  Wyświetla dzienniki w 1/2/3 kolumnach zależnie od szerokości.
 * ------------------------------------------------*/
.journal-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px){
  .journal-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
  .journal-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Karta czasopisma */
.journal-card {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .75rem;
  background: #fff;
  padding: .9rem;
  width: 100%;
  display: flex;
  gap: .9rem;
  transition: box-shadow .2s ease;
  height: 100%;
}
.journal-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

/* Miniatura */
.journal-thumb img{
  width: 96px;
  height: 128px;
  object-fit: cover;
  border-radius: .5rem;
  border: 1px solid rgba(0,0,0,.08);
}

/* Część tekstowa */
.journal-body{ flex:1; min-width:0; }
.journal-title{
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.journal-title a{ text-decoration: none; }
.journal-spacer{ height: .9rem; }
.journal-meta{ font-size:.95rem; color:#444; }
.journal-meta div{ line-height: 1.25; }

/* --------------------------------------------------
 *  NAWIGACJA I MENU
 * ------------------------------------------------*/

/* =========================
   USER MENU (górne) — zawsze białe
   ========================= */
.pkp_site_nav_user_top,
.pkp_site_nav_user_top a {
  color:#fff !important;
}

.pkp_site_nav_user_top a:link,
.pkp_site_nav_user_top a:visited,
.pkp_site_nav_user_top a:hover,
.pkp_site_nav_user_top a:focus,
.pkp_site_nav_user_top a:active {
  color:#000000 !important;
  text-decoration: none; /* nie podkreślaj; zmień na underline, jeśli chcesz */
}
/* Aktywne linki w user menu */
#navigationUserWrapper > ul.pkp_navigation_user > li > a:active,
#navigationUserWrapper > ul.pkp_navigation_user > li > a:focus{
  color:#000 !important;
}

/* Ikony i przyciski w user menu */
.pkp_site_nav_user_top .fa,
.pkp_site_nav_user_top .pkp_search {
  color:#fff !important;
}

/* =========================
   PRIMARY MENU (pod banerem) — zawsze czarne
   ========================= */
.pkp_site_nav_primary_bottom,
.pkp_site_nav_primary_bottom a {
  color:#000 !important;
}

.pkp_site_nav_primary_bottom a:link,
.pkp_site_nav_primary_bottom a:visited,
.pkp_site_nav_primary_bottom a:hover,
.pkp_site_nav_primary_bottom a:focus,
.pkp_site_nav_primary_bottom a:active {
  color:#000 !important;
  text-decoration: none;
}

/* Uściślenie pod drzewo menu w OJS */
.pkp_site_nav_primary_bottom .pkp_navigation_primary a {
  color:#000 !important;
}

/* Ikona lupy/link „Szukaj” w wierszu primary */
.pkp_site_nav_primary_bottom .pkp_navigation_search_wrapper a,
.pkp_site_nav_primary_bottom .pkp_navigation_search_wrapper .fa {
  color:#000 !important;
}

/* TOP-LEVEL user menu – pozostaje biały */
#navigationUserWrapper > ul.pkp_navigation_user > li > a {
  color:#000000 !important;
}

/* SUBMENU (dowolna głębokość) – czarne linki na białym tle */
.pkp_site_nav_user_top .pkp_navigation_user ul {
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
  padding:.25rem 0;
  z-index: 5; /* ponad baner */
}
.pkp_site_nav_user_top .pkp_navigation_user ul li a,
.pkp_site_nav_user_top .pkp_navigation_user ul li a:link,
.pkp_site_nav_user_top .pkp_navigation_user ul li a:visited,
.pkp_site_nav_user_top .pkp_navigation_user ul li a:hover,
.pkp_site_nav_user_top .pkp_navigation_user ul li a:focus,
.pkp_site_nav_user_top .pkp_navigation_user ul li a:active {
  color:#000 !important;
  text-decoration: none;
  display:block;
  padding:8px 12px;
}
/* subtelny hover w dropdownach */
.pkp_site_nav_user_top .pkp_navigation_user ul li a:hover,
.pkp_site_nav_user_top .pkp_navigation_user ul li a:focus {
  background: rgba(0,0,0,.04);
}

/* Zabij szerokość:max-content z core dla wrappera primary */
.has_site_logo .pkp_site_nav_primary_bottom .pkp_navigation_primary_wrapper{
  width: 100% !important;
  box-sizing: border-box;
}

/* Rząd primary ma się rozciągać na 100% */
.pkp_site_nav_primary_bottom .pkp_navigation_primary_row{
  width: 100%;
  display: block;
}

/* Wrapper nawigacji w primary menu z ograniczoną szerokością */
.pkp_site_nav_primary_bottom .pkp_head_wrapper{
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0px;
}

/* Usuń ewentualne zewnętrzne paddingi na <nav> */
.pkp_site_nav_primary_bottom{
  padding-left: 0;
  padding-right: 0;
}

/* domyślnie ukryj sklonowane primary w user menu (desktop) */
#navigationUser .mobile-primary{ display:none; }

/*
 * Placeholder dla opcji dostępności. Po dodaniu treści (np. przyciski
 * kontrastu czy powiększenia) ten element zostanie wyświetlony jako
 * inline-flex, dzięki czemu nie wpływa na układ linii. Obecnie pusty.
 */
.accessibility-options{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

/* --------------------------------------------------
 *  USTAWIENIA DESKTOPOWE (>= 993 px)
 * ------------------------------------------------*/

@media (min-width: 993px){
  /* Wyrównanie primary menu i wyszukiwarki do jednej linii */
  .pkp_site_nav_primary_bottom .pkp_navigation_primary_wrapper{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  .pkp_site_nav_primary_bottom .pkp_navigation_primary{
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: .75rem;
  }
  .pkp_site_nav_primary_bottom .pkp_navigation_search_wrapper .pkp_search{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    line-height: 1.2;
    padding: .25rem 0;
    text-decoration: none;
  }
  .pkp_site_nav_primary_bottom .pkp_navigation_search_wrapper .fa{
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: .5px;
  }
  .pkp_site_nav_primary_bottom .pkp_navigation_search_wrapper{
    margin-left: auto;
  }

  /*
   * Layout nagłówka dla desktopu: ustawiamy flexbox na wrapperze
   * nagłówka, aby logo, nawigacja użytkownika i selektor języka
   * znajdowały się w jednym wierszu. Pasek nawigacji użytkownika
   * zostaje przesunięty maksymalnie w prawo dzięki margin-left:auto.
   */
  .pkp_head_wrapper{
    display:flex !important;
    align-items:center;
  }
  .pkp_site_nav_user_top{
    margin-left:auto !important;
  }

  /* Desktop: pokaż wersję obok user menu; dopchnij do prawej */
  .pkp_site_nav_user_top{
    display:flex;
    align-items:center;
    gap:.75rem;
    justify-content:flex-end;
  }
  .lang-switch--desktop{ display:block; }
  .lang-switch--mobile{ display:none; }
  /* Biała wersja przy białym user menu */
  .lang-switch--desktop .lang-switch__btn{
    border-color: rgba(255,255,255,.6);
    color:#000000;
  }

  /* DESKTOP: język + user w jednej linii, język po lewej */
  .pkp_site_nav_user_top{
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: nowrap !important;
    clear: none !important;
  }
  /* Wyłącz float i szerokość na wrapperze user menu */
  #navigationUserWrapper{
    float: none !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    flex: 0 0 auto !important;
  }
  /* Samo UL user menu w jednej linii */
  #navigationUser{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #navigationUser > li{ flex: 0 0 auto; white-space: nowrap; }
  /* Język po lewej, user menu po prawej */
  .lang-switch--desktop{
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    order: 1; /* język po lewej */
  }
  .pkp_site_nav_user_top > #navigationUserWrapper{ order: 2; }

  /*
   * Wewnętrzny wrapper dla elementów paska użytkownika (język, dostępność,
   * menu użytkownika). Dzięki temu można łatwo ustawić kolejność
   * poszczególnych komponentów i zachować je w jednej linii przy prawej krawędzi.
   */
  .user-bar-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.75rem;
  }
    
    
  .user-bar-right > .lang-switch--desktop{ order:1; }
  .user-bar-right > .accessibility-options{ order:2; }
  .user-bar-right > #navigationUserWrapper{ order:3; }
}

/* --------------------------------------------------
 *  KOMPONENT – SELECTOR JĘZYKA (ogólne)
 * ------------------------------------------------*/
/* Ustawienie kontekstowe */
.pkp_head_wrapper{ position: relative; }

.lang-switch{
  position: relative;
  font-size: 14px;
}
.lang-switch__btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: transparent;
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  padding:.25rem .6rem;
  border-radius:.6rem;
  cursor:pointer;
}
.lang-switch__btn img{
  width:20px;
  height:auto;
  display:block;
}
.lang-switch__caret{ line-height:1; }

.lang-switch__menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width: 180px;
  background:#fff;
  color:#000;
  border:1px solid rgba(0,0,0,.12);
  border-radius:.6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding:.35rem 0;
  z-index: 50;
}
.lang-switch.is-open .lang-switch__menu{ display:block; }
.lang-switch__menu li{ list-style:none; }
.lang-switch__menu a{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .75rem;
  color:#000;
  text-decoration:none;
}
.lang-switch__menu a:hover{ background: rgba(0,0,0,.05); }
.lang-switch__menu img{ width:20px; height:auto; }

/* Mobile/desktop visibility for lang switch */
@media (min-width: 993px){
  .lang-switch--desktop{ display:block; }
  .lang-switch--mobile{ display:none; }
  .lang-switch--desktop .lang-switch__btn{
    border-color: rgba(255,255,255,.6);
    color:#000000;
  }
}
@media (max-width: 992px){
  .lang-switch--desktop{ display:none; }
  .lang-switch--mobile{
    display:block;
    position:absolute;
    top:.5rem;
    right:.75rem;
  }
  .lang-switch--mobile .lang-switch__btn{
    border:1px solid rgba(0,0,0,.25);
    color:#000;
    background:#fff;
  }
}

/* --------------------------------------------------
 *  4. STYLES MOBILNE (<= 992 px)
 *  Wszystkie reguły dotyczące widoku na urządzeniach mobilnych
 *  zostały zgrupowane w jednym bloku. Jeśli dodajesz nowe
 *  reguły mobilne, umieść je poniżej w tym samym bloku.
 * ------------------------------------------------*/
@media (max-width: 992px){
  /* USER MENU w hamburgerze – domyślnie ukryty, pokazuje się po otwarciu */
  .pkp_site_nav_user_top{ display: none; }
  #headerNavigationContainer.is-open .pkp_site_nav_user_top{ display: block; }

  /* Wygląd rozwiniętego user menu na mobile */
  .pkp_site_nav_user_top .pkp_navigation_user{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:.5rem;
    margin:.5rem 0;
    padding:.25rem 0;
    z-index:10; /* ponad hero */
  }
  .pkp_site_nav_user_top ul{
    list-style:none;
    margin:0;
    padding:0;
  }
  .pkp_site_nav_user_top li{
    display:block;
    border-top:1px solid rgba(0,0,0,.06);
    padding-left: 15px; /* zduplikowane z drugiego bloku */
  }
  .pkp_site_nav_user_top li:first-child{
    border-top:none;
    padding-left: 15px;
  }

  /* Wymuszamy czarny tekst w linkach (np. „Zaloguj”) */
  #navigationUserWrapper > ul.pkp_navigation_user > li > a,
  #navigationUserWrapper > ul.pkp_navigation_user > li > a:link,
  #navigationUserWrapper > ul.pkp_navigation_user > li > a:visited,
  #navigationUserWrapper > ul.pkp_navigation_user > li > a:hover,
  #navigationUserWrapper > ul.pkp_navigation_user > li > a:focus,
  #navigationUserWrapper > ul.pkp_navigation_user > li > a:active{
    color:#000 !important;
    background:transparent !important;
    border-color: rgba(0,0,0,.2) !important;
  }
  .pkp_site_nav_user_top .pkp_navigation_user > li > a.cmp_button,
  .pkp_site_nav_user_top .pkp_navigation_user > li > a.pkp_button,
  .pkp_site_nav_user_top .pkp_navigation_user > li > a.pkp_button_primary{
    color:#000 !important;
    background:transparent !important;
    border-color: rgba(0,0,0,.2) !important;
  }

  /* PRIMARY POD BANEREM — schowaj na mobile (żeby nie było duplikatu) */
  .pkp_site_nav_primary_bottom{ display:none !important; }

  /* PRIMARY W HAMBURGERZE — pokaż (to jest sklonowane <ul id="navigationPrimary">) */
  #navigationUser .mobile-primary{ display:block; }
  .pkp_site_nav_user_top .mobile-primary{ margin:.5rem 0; }
  .pkp_site_nav_user_top .mobile-primary .nav-section-title{
    font-weight:700;
    padding:8px 12px;
    color:#000;
    border-top:1px solid rgba(0,0,0,.08);
  }
  .pkp_site_nav_user_top .mobile-primary .pkp_navigation_primary{
    list-style:none;
    margin:0;
    padding:.25rem 0;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:.5rem;
  }
  .pkp_site_nav_user_top .mobile-primary .pkp_navigation_primary > li{
    border-top:1px solid rgba(0,0,0,.06);
  }
  .pkp_site_nav_user_top .mobile-primary .pkp_navigation_primary > li:first-child{
    border-top:none;
  }
  .pkp_site_nav_user_top .mobile-primary .pkp_navigation_primary > li > a{
    display:block;
    padding:10px 12px;
    color:#000 !important;
    text-decoration:none;
  }

  /* Dostosowanie nagłówka sekcji na urządzeniach mobilnych */
  .section-heading {
    display: block;
    text-align: center;
    padding: .5rem 0;
    padding-top: 15px;
  }
}

/* --------------------------------------------------
 *  5. DODATKOWE BREAKPOINTY (małe ekrany)
 *  Specyficzne poprawki dla jeszcze mniejszych rozdzielczości.
 * ------------------------------------------------*/
/* Minimalne wysokości hero na bardzo małych urządzeniach */
@media (max-width: 576px){
  .platform-hero{ min-height:220px; }
  .platform-hero__logo.is_img img{ max-height:120px; }
}

/* Mniejsze miniatury dla wąskich ekranów (uporządkowane w sekcji mobilnej) */
@media (max-width: 575.98px){
  .journal-thumb img{ width: 80px; height: 106px; }
}









/* =========================================================
   HN TOPBAR (neutralne, nowe klasy – zero kolizji z OJS)
   ========================================================= */

/* Desktopowy układ – jeden rząd, wyrównanie do prawej */
@media (min-width: 993px){

  /* Pasek topbar jako elastyczny „klocek” po prawej stronie headera */
  .hn-topbar{
    display: flex;
    margin-left: auto;          /* wypchnij na prawą krawędź w wierszu headera */
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Grupa: JĘZYK (po lewej) + ACCESS (środek) + USER (po prawej) */
  .hn-topbar__group{
    display: flex;
    align-items: center;
    justify-content: flex-end;  /* trzymamy się prawej */
    gap: .75rem;
    flex-wrap: nowrap;          /* jeden rząd, bez łamania */
    min-width: 0;               /* pozwala elastycznie się „kurczyć” */
  }

  /* Klocki wewnątrz – nie rozpychają się kosztem innych */
  .hn-topbar__lang,
  .hn-topbar__access,
  .hn-topbar__user{
    position: relative;         /* kotwica dla dropdownu */
    flex: 0 0 auto;
    min-width: 0;
    z-index: 1;
  }

  /* KOLEJNOŚĆ: język (1) - access (2) - user (3)
     => rosnące user menu przesuwa selektor JĘZYKA w LEWO, ale wszystko zostaje w jednym rzędzie */
  .hn-topbar__lang   { order: 1; }
  .hn-topbar__access{ order: 2; }
  .hn-topbar__user  { order: 3; }

  /* Unikamy kolizji z core: wymuś rząd na UL user menu, zero floatów/szerokości */
  .hn-topbar__user .pkp_nav_list{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: .75rem;
    margin: 0; padding: 0; list-style: none;
    float: none !important;
    width: auto !important;
    min-width: 0;
    white-space: nowrap;
  }
  /* (opcjonalnie) elipsy na bardzo długich etykietach */
  .hn-topbar__user .pkp_nav_list > li > a{
    display: inline-block;
    max-width: 20ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ––– Komponent językowy (HN) ––– */
  .hn-langbtn{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,.6);
    color: #000;                /* u Ciebie czarny topbar – zostaje spójny */
    padding: .25rem .6rem;
    border-radius: .6rem;
    cursor: pointer;
    line-height: 1;
  }
  .hn-langbtn__flag{ width: 20px; height: auto; display: block; }
  .hn-langbtn__caret{ line-height: 1; }

  .hn-langmenu{
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: #fff;
    color: #000;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: .35rem 0;
    z-index: 10;                /* nad user-menu */
  }
  .hn-langmenu li{ list-style: none; }
  .hn-langmenu a{
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
  }
  .hn-langmenu a:hover{ background: rgba(0,0,0,.05); }
  .hn-langmenu__flag{ width: 20px; height: auto; }

  /* prosta obsługa otwierania via klasę .is-open (JS już masz – tylko podmień selektory) */
  .hn-topbar__lang.is-open .hn-langmenu{ display: block; }
}

/* Mobile – zostawiasz jak masz (lang-switch--mobile), ten blok nic nie psuje */

/* === HN LANG: widoczność desktop/mobile === */
@media (max-width: 992px){
  /* Na mobile pokazujemy tylko stary selektor: .lang-switch--mobile */
  .hn-topbar__lang{ display: none !important; }
  .lang-switch--mobile{ display: block !important; }
}

@media (min-width: 993px){
  /* Na desktopie ukrywamy mobilny */
  .lang-switch--mobile{ display: none !important; }
}