/* ============================================================
   BERUNDA — Mobile navigation drawer (shared across all website pages)
   The locked desktop nav is unchanged. Below 680px the link groups
   already collapse; this adds a toggle in the sticky bar that opens a
   full-screen velvet drawer with the same links + cart, so navigation
   stays reachable on phones. Prefix-agnostic: the toggle/drawer use
   shared class names and are wired by nav-menu.js via data attributes.
   ============================================================ */

.nav-toggle { display: none; }
.nav-drawer { display: none; }
.bn-cart.bn-cart-mobile { display: none; } /* shown only ≤680px; the desktop cart lives in the nav group. Two classes so it beats .bn-cart (which berunda-chrome.css re-applies via the footer). */

@media (max-width: 680px) {
  /* Keep the sticky bar (and its hamburger→✕ toggle) ABOVE the full-screen
     drawer so the ✕ stays visible and tappable to exit the menu. Mobile only;
     desktop has no drawer so this is inert there. */
  .bn-nav { position: relative; z-index: 51; }

  /* Toggle — a circular gold-outlined button matching the cart, parked at
     the LEFT of the sticky bar. The bars cross into an X when open. */
  .nav-toggle {
    display: inline-flex;
    position: absolute;
    top: 0; bottom: 0;
    margin: auto 0;
    left: clamp(24px, 6vw, 92px);
    width: 40px; height: 40px;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(198, 135, 27, 0.30);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: border-color var(--dur-slow, 0.4s) var(--ease-standard, ease);
  }
  .nav-toggle-bar {
    display: block;
    width: 17px; height: 1.5px;
    background: var(--ivory-300, #e9ddc6);
    transition: transform 0.32s var(--ease-standard, ease), opacity 0.2s var(--ease-standard, ease);
  }
  .nav-toggle[aria-expanded="true"] { border-color: rgba(198, 135, 27, 0.6); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

  /* Cart — same circular button as desktop (inherits .bn-cart styling), parked
     on the RIGHT where the toggle used to be. Hidden while the menu drawer is
     open (the drawer carries its own CART link), so the two don't overlap. */
  .bn-cart.bn-cart-mobile {
    display: inline-flex;
    position: absolute;
    top: 0; bottom: 0;
    left: auto;
    margin: auto 0;
    right: clamp(24px, 6vw, 92px);
    z-index: 2;
  }
  .nav-toggle[aria-expanded="true"] ~ .bn-cart.bn-cart-mobile { display: none; }

  /* Drawer — full-screen velvet overlay below the sticky bar (which stays on
     top so the X is always tappable). */
  .nav-drawer {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 50;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 4.4vh, 34px);
    background: #1c0408;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.42s var(--ease-standard, ease), visibility 0.42s var(--ease-standard, ease);
  }
  .nav-drawer.is-open { opacity: 1; visibility: visible; }

  .nav-drawer-link {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 16px;
    line-height: 1;
    color: var(--ivory-300, #e9ddc6);
    text-decoration: none;
    padding: 12px 18px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: color var(--dur-slow, 0.4s) var(--ease-standard, ease);
  }
  .nav-drawer-link[aria-current="page"] { color: var(--gold-300); }
  .nav-drawer-link:hover { color: var(--gold-300); }

  .nav-drawer-cart {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 13px 26px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 12px;
    color: var(--ivory-300, #e9ddc6);
    text-decoration: none;
    border: 1px solid rgba(198, 135, 27, 0.30);
    border-radius: 999px;
    transition: color var(--dur-slow, 0.4s) var(--ease-standard, ease),
                border-color var(--dur-slow, 0.4s) var(--ease-standard, ease);
  }
  .nav-drawer-cart:hover { color: var(--gold-300); border-color: rgba(198, 135, 27, 0.6); }
  .nav-drawer-cart svg { width: 20px; height: 20px; display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-toggle-bar { transition: none; }
}