/* ================================================================== */
/*  LINK Journal — Banner Fit v4 (Immersion theme)                    */
/*  Fixes: dropdown submenu no longer clipped by header               */
/* ================================================================== */

/* ---- Main header — full width, responsive height ---------------- */
body.page_index.op_index header.main-header,
body header#immersion_content_header.main-header,
header.main-header[style*="background-image"],
header#immersion_content_header {
  /* Full width */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  /* Responsive height */
  height: clamp(320px, 30vw, 560px) !important;
  min-height: 320px !important;
  max-height: 560px !important;
  aspect-ratio: auto !important;

  /* Full image always visible (no crop) */
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #0b1a33 !important;

  /* Layout — IMPORTANT: overflow visible so dropdown escapes */
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: visible !important;
}

/* ---- Nav container inside banner: anchor to bottom ------------- */
body header.main-header > .container-fluid {
  margin-top: auto !important;
  position: relative !important;
  z-index: 5 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.75rem !important;
  width: 100% !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 100%
  ) !important;
  overflow: visible !important;
}

/* ---- Let nav bar allow overflow too ---------------------------- */
body header.main-header .navbar,
body header.main-header .navbar-collapse,
body header.main-header #main-menu,
body header.main-header #navigationPrimary {
  overflow: visible !important;
}

/* ---- Dropdown menus — push above everything, escape banner ----- */
body header.main-header .dropdown-menu {
  z-index: 1050 !important;
  position: absolute !important;
  top: 100% !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
  margin-top: 4px !important;
  min-width: 220px !important;
}

body header.main-header .dropdown-item,
body header.main-header .dropdown-menu .nav-link {
  color: #0b1a33 !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
}

body header.main-header .dropdown-item:hover,
body header.main-header .dropdown-menu .nav-link:hover {
  background-color: #f0f4fa !important;
  color: #0b1a33 !important;
}

/* Admin dropdown (top right) also stays visible */
body header.main-header .main-header__admin .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}

/* ---- Small screens --------------------------------------------- */
@media (max-width: 767px) {
  body header#immersion_content_header.main-header,
  header#immersion_content_header {
    height: clamp(200px, 45vw, 340px) !important;
    min-height: 200px !important;
    max-height: 340px !important;
  }
}

/* ---- Very wide screens ----------------------------------------- */
@media (min-width: 1800px) {
  body header#immersion_content_header.main-header,
  header#immersion_content_header {
    height: clamp(400px, 28vw, 620px) !important;
    max-height: 620px !important;
  }
}