/* ============================================================
   NAVBAR — authoritative responsive rebuild
   ------------------------------------------------------------
   Loaded LAST so it supersedes the conflicting navbar rules
   scattered across main.css (max-width:1024), premium_dark.css
   (min-width:769) and mobile-fixes.css — which fought each
   other and left the menu position:absolute with no hamburger
   in the 770–1024 zone (items floated as a vertical stack).

   ONE breakpoint: 1100px.
     ≥ 1100px  → horizontal desktop nav (dropdowns = popovers)
     < 1100px  → hamburger + right-side slide-in drawer
                 (dropdowns = tap-to-expand accordions)

   This file controls LAYOUT only (display / position / flex /
   transform). Colours + type come from premium_dark.css, so the
   "Ink & Seal" look is preserved. !important is used where the
   legacy rules also use it, so the cascade resolves predictably.
   ============================================================ */

.navbar .container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The JS toggles work on these ids/classes — keep them intact:
   #navbar-toggle → toggles .navbar-menu.active (+ .menu-backdrop.active, body.menu-open)
   .dropdown-toggle → toggles its sibling .dropdown-menu.active            */

/* =====================================================================
   DESKTOP  (≥ 1100px): horizontal nav
   ===================================================================== */
@media (min-width: 1100px) {
  #navbar-toggle,
  .navbar-toggle { display: none !important; }
  .mobile-menu-header { display: none !important; }
  .menu-backdrop { display: none !important; }

  .navbar-menu {
    display: flex !important;
    position: static !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    inset: auto !important;
  }

  .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.2rem, 1vw, 0.9rem);
    width: 100%;
    padding: 0 !important;
  }

  .navbar-nav .nav-item.dropdown { position: relative; }

  /* Dropdowns become popovers; visibility driven by .active (set by JS) */
  .navbar-nav .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 230px;
    display: flex !important;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    pointer-events: none;
  }
  .navbar-nav .dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* =====================================================================
   MOBILE / TABLET  (< 1100px): hamburger + slide-in drawer
   ===================================================================== */
@media (max-width: 1099.98px) {
  #navbar-toggle,
  .navbar-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    z-index: 1101;
  }

  .navbar-menu {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(360px, 86vw) !important;
    height: 100vh;
    height: 100dvh;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(160deg, #efe7d6 0%, #f6f1e7 100%) !important;
    border-left: 1px solid rgba(244, 185, 66, 0.25) !important;
    box-shadow: -14px 0 44px rgba(0, 0, 0, 0.55) !important;
    transform: translateX(105%) !important;
    transition: transform .28s ease !important;
    overflow-y: auto;
    z-index: 1100;
  }
  .navbar-menu.active { transform: translateX(0) !important; }

  .mobile-menu-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(244, 185, 66, 0.18);
  }
  .mobile-menu-title {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.1rem;
    color: #f3ecdc;
  }
  .mobile-menu-close {
    background: transparent;
    border: 0;
    color: var(--premium-text, #e7ddc8);
    cursor: pointer;
    padding: 0.25rem;
  }

  .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0.2rem;
    width: 100%;
    padding: 0.75rem !important;
  }

  /* Each top-level item (incl. dropdown wrappers) is a full-width block so its
     accordion panel stacks UNDER it in normal flow instead of beside it. */
  .navbar-nav > .nav-item,
  .navbar-nav > .nav-item.dropdown {
    display: block !important;
    position: static !important;
    width: 100% !important;
  }

  /* Top-level rows fill the drawer */
  .navbar-nav > .nav-link,
  .navbar-nav .nav-item.dropdown > .dropdown-toggle,
  .navbar-nav > .nav-item > .nav-link {
    width: 100%;
    justify-content: flex-start !important;
    padding: 0.85rem 1rem !important;
    border-radius: 8px;
  }

  /* Dropdowns become accordions: collapsed until JS adds .active.
     NOTE: both collapsed AND .active must pin position/transform, because
     enterprise.css/.main.css set .dropdown-menu(.active) to absolute + a
     translateY popover — which would otherwise float over the drawer. */
  .navbar-nav .dropdown-menu,
  .navbar-nav .dropdown-menu.active {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0.1rem 0 0.4rem !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.22) !important;
  }
  .navbar-nav .dropdown-menu { display: none !important; }
  .navbar-nav .dropdown-menu.active { display: block !important; }

  .navbar-nav .dropdown-item {
    padding: 0.7rem 1rem 0.7rem 1.6rem !important;
  }

  /* Auth / badge / CTA stack full width inside the drawer */
  .navbar-nav .usage-badge,
  .navbar-nav .btn {
    width: 100%;
    justify-content: center;
    margin: 0.25rem 0;
  }

  /* Backdrop behind the drawer */
  .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 1099;
  }
  .menu-backdrop.active { opacity: 1; visibility: visible; }
  body.menu-open { overflow: hidden; }
}