/* Foreway — Premium Drawer (v2.1)
   Popover on desktop, sheet on mobile. No pills. Softer type. Gold accent.
*/

:root{
  --container-max: 1200px;
  --header-h: 60px;
  --menu-w-desktop: 380px;     /* narrowed */
  --menu-w-mobile: 88vw;

  --bg: #fff;
  --border: #e6e9f0;           /* slightly stronger than before */
  --shadow: 0 18px 44px rgba(0,0,0,.12);
  --muted: #8a94a2;
  --text: #111827;
  --text-2: #374151;
  --hover: #f8fafc;
  --hover-gold: rgba(212,175,55,.06);
  --accent: #d4af37;
}

/* Base container */
.burger-menu{
  position: fixed;
  z-index: 1800; /* below header (2000), above overlay (1500) */
  right: max(8px, calc((100vw - var(--container-max)) / 2));
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  will-change: transform, opacity;
  flex-direction: column;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Desktop popover */
@media (min-width: 769px){
  .burger-menu{
    top: calc(var(--header-h) + 8px);
    width: var(--menu-w-desktop);
    max-width: 96vw;
    max-height: calc(100vh - var(--header-h) - 16px);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
    padding: 10px 10px 12px;
  }
  .burger-menu.open{ opacity:1; transform: translateY(0); }
}

/* Mobile sheet */
@media (max-width: 768px){
  .burger-menu{
    top: var(--header-h);
    right: 0;
    height: calc(100vh - var(--header-h));
    width: var(--menu-w-mobile);
    max-width: 100vw;
    border-radius: 14px 0 0 0;
    border-left: 1px solid var(--border);
    box-shadow: -18px 0 50px rgba(0,0,0,.14);
    transform: translateX(110%);
    transition: transform .26s cubic-bezier(0.22,1,0.36,1);
    padding: 12px 10px 18px;
  }

  .burger-menu.open{ 
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto; 
  }
}

/* Head row */
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 4px 6px 8px;
}
.drawer-title{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}
.drawer-close{
  background: var(--bg);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  width: 32px; height: 32px;
  display:grid; place-items:center; cursor:pointer;
  font-size: 16px; line-height: 1;
}
.drawer-close:hover{ background: var(--hover); }

/* Sections */
.drawer-section{ display:block; }
.drawer-divider{ height:1px; background:var(--border); margin:8px 0 10px; }

.drawer-label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 8px;
}

/* Primary actions (rows) */
.drawer-actions{ padding-top: 2px; }
.drawer-actions .drawer-action{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px;               /* tightened */
  margin: 2px 0;
  border-radius: 12px;
  text-decoration:none;
  color: var(--text-2);
  font-weight: 600;
  font-size: 15px;
  background: transparent;
  border: 1px solid transparent;
  transition: background .12s ease, transform .08s ease, border-color .12s ease;
}
.drawer-actions .drawer-action:hover{ background: var(--hover-gold); }
.drawer-actions .drawer-action:active{ transform: translateY(1px) scale(.99); }

/* Gold accent bar for "Create" */
.drawer-actions .drawer-create{ position: relative; }
.drawer-actions .drawer-create::before{
  content:"";
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width: 3px; height: 60%;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(212,175,55,.14);
}

/* Nav rows */
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px;               /* tightened */
  border-radius: 12px;
  text-decoration:none;
  color: var(--text-2);
  font-weight: 600;
  font-size: 15px;
  transition: background .12s ease, transform .08s ease;
}
.nav-row:hover{ background: var(--hover); }
.nav-row:active{ transform: translateY(1px) scale(.99); }

/* Chevron */
.nav-row .chev{
  margin-left: 12px;
  opacity: .40;
  font-size: 18px;
}

/* Small tag (BETA) */
.nav-row .tag{
  margin-left:8px; padding:2px 6px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.02em;
  background:#f1f5f9; color:#6b7280;
}

/* Footer */
.drawer-footer{
  position: sticky; bottom: 0; margin-top:auto;
  background: linear-gradient(180deg, transparent, #fff 40%);
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* Focus rings */
.burger-menu a:focus-visible,
.drawer-close:focus-visible{
  outline:2px solid #166534; outline-offset:2px; border-radius:10px;
}

/* Hardening */
#burger-menu,
#burger-menu .drawer-section > a,
#burger-menu .nav-row,
#burger-menu .drawer-footer a{ display:block; }

/* Prevent flicker or accidental visibility before JS initializes */
#burger-menu[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

/* Overlay fade (if not already in headnav.css) */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1500;
}

.menu-overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}