/* ========================================================================== 
   RESPONSIVE BANNER FIX FOR OJS 3.4.0-4
   Replaces the previous banner stylesheet.
   ========================================================================== */

/* ---------- Shared header colours ---------- */
.pkp_structure_head {
  background: var(--dsjhss-banner-bg, #fbf6f2) !important;
  border-bottom: 0 !important;
  overflow: visible !important;
}

/* Compact Admin/User Bar */
.pkp_navigation_user_wrapper {
  background: var(--dsjhss-green-dark, #083f38) !important;
  border-bottom: 2px solid var(--dsjhss-burgundy, #8a2533) !important;
  min-height: 32px !important;
}

/* Keep only the top-level logged-in username white. */
.pkp_navigation_user > li > a {
  color: #ffffff !important;
  font-weight: 700;
  padding: 4px 10px !important;
}

/* Logged-in user dropdown: dark text on a light background. */
.pkp_navigation_user > li > ul,
.pkp_navigation_user .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #d8d8d8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

.pkp_navigation_user > li > ul a,
.pkp_navigation_user .dropdown-menu a {
  background: #ffffff !important;
  color: var(--dsjhss-green-dark, #083f38) !important;
  display: block !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
}

.pkp_navigation_user > li > ul a:hover,
.pkp_navigation_user > li > ul a:focus,
.pkp_navigation_user .dropdown-menu a:hover,
.pkp_navigation_user .dropdown-menu a:focus {
  background: #f4ece8 !important;
  color: var(--dsjhss-burgundy, #8a2533) !important;
}

/* Navigation bar */
.pkp_navigation_primary_wrapper {
  background: var(--dsjhss-green, #0e5a4f) !important;
  border-top: 3px solid var(--dsjhss-burgundy, #8a2533) !important;
  margin-top: 0 !important;
}

/* ========================================================================== 
   DESKTOP HEADER: OJS switches to its full desktop header at about 992px.
   Keep the wide banner treatment only in this range.
   ========================================================================== */
@media (min-width: 992px) {
  .pkp_site_name_wrapper {
    background: var(--dsjhss-banner-bg, #fbf6f2) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 8px 0 !important;
    width: 100% !important;
  }

  .pkp_site_name {
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: 1280px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .pkp_site_name > a,
  .pkp_site_name .is_img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .pkp_site_name .is_img img,
  .pkp_site_name img {
    border: 0 !important;
    display: block !important;
    height: auto !important;
    margin: 0 auto !important;
    max-height: 180px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    width: auto !important;
  }
}

/* ========================================================================== 
   COLLAPSED/MOBILE HEADER: tablets, narrowed browser windows and phones.
   Keep the image in normal document flow and reserve space for menu controls.
   ========================================================================== */
@media (max-width: 991px) {
  .pkp_head_wrapper {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .pkp_site_name_wrapper {
    background: var(--dsjhss-banner-bg, #fbf6f2) !important;
    box-sizing: border-box !important;
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 66px !important;
    overflow: hidden !important;
    padding: 7px 58px !important;
    position: relative !important;
    width: 100% !important;
  }

  .pkp_site_name {
    align-items: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    height: auto !important;
    justify-content: center !important;
    left: auto !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 52px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  .pkp_site_name > a,
  .pkp_site_name .is_img {
    align-items: center !important;
    display: flex !important;
    height: auto !important;
    justify-content: center !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .pkp_site_name .is_img img,
  .pkp_site_name img {
    border: 0 !important;
    display: block !important;
    height: auto !important;
    margin: 0 auto !important;
    max-height: 52px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* Keep the hamburger/menu control above the banner, not underneath it. */
  .pkp_site_nav_toggle {
    inset-inline-start: 12px !important;
    left: auto !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 30 !important;
  }

  .pkp_navigation_primary_wrapper {
    clear: both !important;
    margin-top: 0 !important;
  }
}

/* Extra-small phones */
@media (max-width: 480px) {
  .pkp_site_name_wrapper {
    min-height: 60px !important;
    padding: 7px 52px !important;
  }

  .pkp_site_name {
    min-height: 46px !important;
  }

  .pkp_site_name .is_img img,
  .pkp_site_name img {
    max-height: 46px !important;
  }
}