/* 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.
 */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Merriweather:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Source+Sans+3:ital,wght@0,300..900;1,300..900&display=swap');
/* Inter (nagłówki) + Cardo (body) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');




.fa-caret-down:before {
    content: "\f0d7";
    font-size: 10px;
}




@media (min-width: 992px) {
    .pkp_navigation_primary .dropdown-menu a:focus, .pkp_navigation_primary .dropdown-menu a:hover {
        border-color: #007CBF;
    }
}

.cmp_button_wire, .obj_galley_link {
    display: inline-block;
    padding: 0 1em;
    background: #fff;
    border: 1px solid #007CBF;
    border-radius: 3px;
    font-size: .93rem;
    line-height: calc(2.143rem - 2px);
    color: #007CBF;
    text-decoration: none;
}

.cmp_button_wire:hover, .cmp_button_wire:focus, .obj_galley_link:hover, .obj_galley_link:focus {
    background: #007CBF;
    color: #fff;
}










@media (min-width: 992px) {
 .hn-topbar__user .pkp_navigation_user [aria-haspopup]::after {
    content: "\f0d7"; /* caret-down */
    font-family: "Font Awesome 6 Free"; /* nazwa fontu w FA6 */
    font-weight: 900; /* solid */
    display: inline-block;
    margin-left: 0.4em;
    border: none !important; /* nadpisuje stary trójkąt */
    width: auto;
    height: auto;
     font-size: 10px;
  }
}




/* Przywrócenie punktatorów w Additional Content */
.block_additional .content ul,
.block_additional .content ol {
    list-style: disc;
    margin-left: 1.5em;
    padding-left: 0;
}

.pkp_structure_footer_wrapper {
    background: #f7f7fc;
    margin-top: 40px;
}



/* 1) Przyciski/form controls niech dziedziczą font jak zwykły tekst */
button, input, select, textarea {
  font: inherit;            /* obejmuje family/size/weight/line-height */
}

/* 2) Konkretnie dla selektora języka */
.hn-topbar__lang .hn-langbtn {
  font-family: inherit;     /* albo wprost: var(--pkp-primary-font, inherit); */
  font-size: inherit;
  line-height: inherit;
  background: none;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* 3) Na wszelki wypadek dociśnij label (gdyby coś nadpisywało) */
.hn-topbar__lang .hn-langbtn__label {
  font: inherit;
}




/* --------------------------------------------------------------------
 * 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:200px;
  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:250px;
  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;
}

/* --------------------------------------------------
 *  CUSTOMIZATION: POSITION JOURNAL LOGO ON HERO
 *
 *  The default layout centers the journal logo within the hero banner. For
 *  this theme we want the logo to sit flush against the left-hand side of
 *  the banner, underneath the header. To achieve this we override the
 *  alignment on the flex container that wraps the logo and constrain its
 *  maximum width to mirror the layout used by the header and main body.
 *  On narrow screens the logo will automatically scale down via the
 *  existing max‑height rule defined above. See the accompanying media
 *  query below for additional mobile tweaks.
 */
.platform-hero__inner {
  /* Align the inner content to the start of the flex container */
  justify-content: flex-start;
  /* Constrain the width so the logo aligns with the rest of the page content */
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  /* Remove the default horizontal padding so the logo lines up
   * exactly with the page content. Vertical padding comes from the
   * original rule defined above (24px), leaving top and bottom
   * spacing intact. */
  padding-left: 0;
  padding-right: 0;
}



/* Reduce the maximum height of the logo on tablets and smaller devices to
 * avoid oversized branding on narrow viewports. The logo will retain its
 * aspect ratio thanks to the existing CSS, so only the height cap is
 * required. */
@media (max-width: 768px) {
  .platform-hero__logo.is_img img {
    max-height: 180px;
  }
}

/* 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%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);  
}
.journal-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

/* Miniatura */
.journal-thumb img{
  /*width: 96px;*/
  height: 150px;
  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
 * ------------------------------------------------*/

/* === Ujednolicenie rozmiaru czcionki w USER MENU (desktop i mobile) === */

/* Bazowy rozmiar dla paska (zmień na 15px/0.9375rem, jeśli chcesz mniejsze) */
.hn-topbar { font-size: 1rem; }

/* Core OJS pomniejsza user menu – nadpisujemy to TYLKO w topbarze */
.hn-topbar .pkp_nav_list,
.hn-topbar .pkp_navigation_user,
.hn-topbar #navigationUser {
  font-size: 1em !important;   /* 1em względem .hn-topbar = 1rem */
  line-height: 1.25;
    
}

/* Linki/przyciski w user menu */
.hn-topbar .pkp_nav_list > li > a,
.hn-topbar .pkp_nav_list > li > a.cmp_button,
.hn-topbar .pkp_nav_list > li > a.pkp_button,
.hn-topbar .pkp_nav_list > li > a.pkp_button_primary {
  font-size: 1em !important;
  line-height: 1.25;
}

/* Pozycje w dropdownach user menu */
.hn-topbar .pkp_navigation_user ul li a {
  font-size: 1em !important;
  line-height: 1.25;
}

/* (opcjonalnie) ikona/lupa i inne elementy – żeby nie wyglądały „drobniej” */
.hn-topbar .fa,
.hn-topbar .pkp_search {
  font-size: 1em;
  line-height: 1;
}


/* =========================
   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;
    border-bottom: 1px solid #ccc; /* cienka szara linia */
}

/* 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;
  }

    .pkp_site_nav_user_top .hn-logo {
    display: none !important;
  }
    
    .hn-topbar #navigationUser {
  margin-top: 50px;  
}
}

/* --------------------------------------------------
 *  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:250px; }
}

/* 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; }
}


/* 4 równe kolumny na desktopie */
/* Grid: 4 równe kolumny */
.hn-foot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}

/* Komórki z centrowaniem pion/poziom */
.hn-foot-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

/* Logo */
.hn-foot-logo-img {
  max-height: 80px;
  height: auto;
  width: auto;
}

/* Linki – odziedziczą fonty z OJS, ale dodajmy dostępność */
.hn-foot-link {
  text-decoration: none;
  padding: .5rem .25rem;
  line-height: 1.4;
}
.hn-foot-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Mobile: układ pionowy + logo na dole */
@media (max-width: 768px) {
  .hn-foot-grid {
    display: flex;
    flex-direction: column;
  }
  .hn-foot-cell--one {
    order: 4; /* logo na samym dole */
  }
}


/* Łamanie referencji */
.item.references .value,
.item.references .value p,
.item.references .value a {
  word-break: break-word;   /* starsze przeglądarki */
  overflow-wrap: anywhere;  /* nowsze */
}


/* PRZYCISK — domyślnie niebieski */
.pkp_block.block_make_submission .block_make_submission_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
  text-align: center;
  padding: 0 1.5em;
  min-width: 16rem;                  /* desktop szerokość; skasuj jeśli niepotrzebne */
  border: 1px solid #007CBF;
  border-radius: 3px;
  background: #007CBF;               /* NIEBIESKI domyślnie */
  color: #fff;                       /* biały tekst */
  font-size: .93rem;
  line-height: calc(2.143rem - 2px);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
  box-shadow: 0 3px 8px rgba(0, 103, 152, .25);
}

/* Subtelna ikonka (chevron) — dziedziczy kolor */
.pkp_block.block_make_submission .block_make_submission_link::before {
  content: "›";
  font-size: 1.1em;
  line-height: 1;
  transform: translateX(0);
  transition: transform .2s ease, opacity .2s ease, color .2s ease;
  opacity: .95;
}

/* HOVER/FOCUS — odwrócenie kolorów: biały przycisk, niebieski tekst */
.pkp_block.block_make_submission .block_make_submission_link:hover,
.pkp_block.block_make_submission .block_make_submission_link:focus {
  background: #fff;                  /* BIAŁE tło na hover */
  color: #007CBF;                    /* Niebieski tekst */
  border-color: #007CBF;
  box-shadow: 0 6px 14px rgba(0, 103, 152, .25);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Ikonka też zmienia kolor i delikatnie „jedzie” w prawo */
.pkp_block.block_make_submission .block_make_submission_link:hover::before,
.pkp_block.block_make_submission .block_make_submission_link:focus::before {
  transform: translateX(4px);
  opacity: 1;
}

/* ACTIVE — lekki powrót */
.pkp_block.block_make_submission .block_make_submission_link:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 103, 152, .2);
}

/* Dostępność: wyraźny focus ring */
.pkp_block.block_make_submission .block_make_submission_link:focus-visible {
  outline: 2px solid #007CBF;
  outline-offset: 2px;
}

/* Mobile: pełna szerokość i centrowanie (opcjonalnie) */
@media (max-width: 600px) {
  .pkp_block.block_make_submission .block_make_submission_link {
    display: flex;
    width: 100%;
  }
}

/* =========================================================
   ROZMIAR LOGO W HERO – rozróżnienie: platforma vs czasopisma
   ========================================================= */

/* Platforma (indexSite.tpl + wszystkie jej podstrony) */
body.site_scope .platform-hero__logo.is_img img {
  max-height: 160px !important;
}

/* Czasopisma (indexJournal.tpl + ich podstrony) */
body:not(.site_scope) .platform-hero__logo.is_img img {
  max-height: 250px !important;
}