/* ============================================================
   site-header.css — bridge for the main site's header
   ============================================================

   The header markup and styling come from the Drupal theme itself
   (mns-header.css is loaded straight from themes/custom/charity_plus),
   so the two headers can't drift apart. That stylesheet assumes a few
   Bootstrap primitives the theme gets for free and this app doesn't:
   .container sizing, the nav list resets, and dropdown open/close.
   Those live here, along with the small amount of behaviour the main
   site gets from Bootstrap's JS.

   Nothing here styles the header's appearance — that stays the theme's
   job. Everything is scoped to #header-1 so the app's own pages are
   untouched. */

/* ── Bootstrap container, matching the widths the site uses ── */
#header-1 .container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 12px;
  padding-left: 12px;
}
@media (min-width: 576px)  { #header-1 .container { max-width: 540px; } }
@media (min-width: 768px)  { #header-1 .container { max-width: 720px; } }
@media (min-width: 992px)  { #header-1 .container { max-width: 960px; } }
@media (min-width: 1200px) { #header-1 .container { max-width: 1140px; } }
@media (min-width: 1400px) { #header-1 .container { max-width: 1320px; } }

/* ── The header sits in normal flow here ──
   On the main site it is absolutely positioned and the page compensates
   with a top offset. This app has no such offset, so keeping it static
   means no overlap and no magic numbers. */
#header-1 .mns-navbar-wrap {
  position: static;
}

/* ── Nav list resets (Bootstrap's .navbar-nav / .dropdown-menu) ── */
#header-1 .navbar-nav,
#header-1 .dropdown-menu {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#header-1 .navbar-nav .nav-item {
  position: relative;
}
#header-1 .navbar-nav .nav-link,
#header-1 .dropdown-menu .dropdown-item {
  display: block;
  text-decoration: none;
}
/* Parent items are toggles with no href — keep the pointer cursor. */
#header-1 .navbar-nav .nav-link[role="button"] {
  cursor: pointer;
}

/* ── Dropdown open/close ──
   Hover on desktop (as the theme does), plus a click toggle for touch
   and keyboard, which is what Bootstrap's JS provides on the main site. */
@media (min-width: 992px) {
  #header-1 .navbar-nav .dropdown-menu {
    display: none;
  }
  #header-1 .navbar-nav .nav-item:hover > .dropdown-menu,
  #header-1 .navbar-nav .nav-item.is-open > .dropdown-menu,
  #header-1 .navbar-nav .dropdown-menu.show {
    display: block !important;
  }
}

/* ── Third-level menus (Media > Information > the documents) ──
   The flyout opens beside the dropdown panel, outside its box, so the
   panel must not clip it. Positioned to the left, as on the main site. */
#header-1 .navbar-nav .dropdown-menu {
  overflow: visible;
}

@media (min-width: 992px) {
  #header-1 .navbar-nav .submenu-1 {
    position: relative;
  }
  #header-1 .navbar-nav .submenu-1 > .dropdown-menu {
    top: 0 !important;
    left: auto !important;
    right: 100% !important;
  }
  #header-1 .navbar-nav .submenu-1:hover > .dropdown-menu,
  #header-1 .navbar-nav .submenu-1.is-open > .dropdown-menu {
    display: block !important;
  }
}

/* The arrow on a group that has its own flyout. */
#header-1 .navbar-nav .submenu-1 > a > svg.nav-arrow {
  width: 7px;
  height: 11px;
  margin-left: 8px;
  fill: currentColor;
  vertical-align: middle;
}

/* ── Mobile: stacked menu, submenus inline rather than floating ── */
@media (max-width: 991.98px) {
  #header-1 .navbar-nav .dropdown-menu {
    display: none;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-top: none !important;
    width: 100% !important;
    padding: 0 0 6px 12px !important;
  }
  #header-1 .navbar-nav .nav-item.is-open > .dropdown-menu,
  #header-1 .navbar-nav .submenu-1.is-open > .dropdown-menu {
    display: block;
  }
  #header-1 .navbar-nav .submenu-1 > .dropdown-menu {
    padding-left: 12px !important;
  }
  #header-1 .mns-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Search form ──
   The theme sizes and colours these; only the button's own reset is
   missing, since it normally comes from Bootstrap's .btn. */
#header-1 .mns-search-bar form {
  margin: 0;
}
#header-1 .mns-search-bar button {
  font: inherit;
  cursor: pointer;
}

/* ── App bar ──
   The signed-in webgo navigation, on its own strip under the site
   header so the header itself stays exactly as the main site has it. */
.webgo-appbar {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.webgo-appbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  flex-wrap: wrap;
}
.webgo-appbar .appbar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--txt3);
  white-space: nowrap;
}
.webgo-appbar .nav {
  margin-left: 0;
}
.webgo-appbar .user-pill {
  margin-left: auto;
}