/* ============================================================
   NAVBAR-MEGA-V3.CSS — Minimal overrides on top of v2

   Three changes vs v2:
   1. Pill + panel use the off-white #fffefb colour (--im-bg-100)
      instead of pure white, at the same opacities as v2
   2. Dropdown morphs/attaches seamlessly to the pill bottom — one
      continuous rounded shape; side borders aligned so the join
      is invisible
   3. Mobile pill: tighter top spacing + less aggressive corner
      radius (24px → 7px)

   Everything else (opacity contrast between pill and panel, panel
   padding, inner layout, markup, JS) is inherited from v2 unchanged.

   Toggle: USE_V3_STYLES = True
   ============================================================ */

@import url("navbar-mega-v2.7c4362b2d756.css");

/* ---- Off-white palette (replaces pure white at same opacities) ---- */

.navbar .container {
  background: rgba(255, 254, 251, 0.75);
}
.navbar.is-scrolled .container {
  background: rgba(255, 254, 251, 0.88);
}
.im-mega-panel {
  background: rgba(255, 254, 251, 0.97);
}
.navbar.is-scrolled .im-mega-panel {
  background: rgba(255, 254, 251, 0.98);
}

/* ---- Desktop: morphed/attached dropdown ---- */

@media (min-width: 992px) {
  /* When a panel is open, flatten the pill's bottom + drop its
     bottom border so the pill and panel read as one shape. */
  .navbar .container:has(.im-mega-panel.is-open) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
  }

  /* Panel sits flush against the pill:
     - left/right shifted -1px so the panel's side borders sit
       directly on top of the container's side borders (no doubled
       1px-inset seam)
     - top border removed so the join is seamless
     - bottom corners match the pill's 24px roundedness so the
       combined pill+panel shape is a symmetric elongated capsule */
  .im-mega-panel {
    left: -1px;
    right: -1px;
    border-top: none;
    border-radius: 0 0 24px 24px;
  }
}

/* ---- Mobile: tighter top spacing + less corner radius ---- */

@media (max-width: 991.98px) {
  .navbar,
  .navbar.is-scrolled {
    padding-top: 0.125rem !important;
  }
  .navbar .container,
  .navbar.is-scrolled .container {
    border-radius: 7px;
  }
}