/* =========================================
   Navbar CSS (desktop + mobile + active link)
   Safe with both: 
     - .nav-links / .nav-links-mobile
     - .top-links / .mobile-menu
   ========================================= */

/* Theme tokens */
:root { 
  --border:#2a2a2e; 
  --text:#e4e4e7; 
  --gold:#e6b65c; 
  --bg:#111; 
}

/* ===== Desktop navbar base ===== */
.navbar{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border); }
.nav-container{ max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:16px; }
.logo{ font-weight:700; color:#fff; text-decoration:none; }

/* Desktop links (support both .nav-links and .top-links) */
.nav-links, .top-links{ display:flex; gap:6px; margin-left:auto; list-style:none; padding:0; }
.nav-links a, .top-links a{
  display:inline-block; padding:8px 12px; border-radius:10px;
  color:var(--text); text-decoration:none; border:1px solid transparent; background:transparent;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease, background .22s ease, color .15s ease;
}
.nav-links a:hover, .top-links a:hover,
.nav-links a.active, .top-links a.active{
  color:#fff;
  border-color:var(--gold); background:#18181a;
  box-shadow:0 0 10px rgba(230,182,92,.65), 0 0 22px rgba(230,182,92,.35);
  transform: translateY(-1px);
}

/* ===== Burger (hidden on desktop) ===== */
/* Works for either a button#mobile-menu or a .menu-toggle wrapper with .bar spans */
.menu-toggle, #mobile-menu{ display:none; margin-left:auto; cursor:pointer; background:none; border:none; }
.menu-toggle{ display:none; flex-direction:column; gap:4px; }
.menu-toggle .bar, #mobile-menu .bar, #menuBtn .bar{
  width:25px; height:3px; background:#fff; transition:.25s; border-radius:3px; display:block;
}

/* Burger -> X animation via aria-expanded */
#mobile-menu[aria-expanded="true"] .bar:nth-child(1),
#menuBtn[aria-expanded="true"] .bar:nth-child(1),
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
#mobile-menu[aria-expanded="true"] .bar:nth-child(2),
#menuBtn[aria-expanded="true"] .bar:nth-child(2),
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
#mobile-menu[aria-expanded="true"] .bar:nth-child(3),
#menuBtn[aria-expanded="true"] .bar:nth-child(3),
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===== Mobile slide-down panel ===== */
/* Support both .nav-links-mobile and .mobile-menu */
.nav-links-mobile, .mobile-menu{
  /* hidden & non-interactive by default (avoids desktop click-blocking) */
  display:none; position:fixed; top:56px; left:0; right:0; z-index:60;
  background:var(--bg); border-top:1px solid var(--border); box-shadow:0 14px 40px rgba(0,0,0,.5);
  max-height:0; overflow:hidden; opacity:0; pointer-events:none;
  transition:max-height .28s ease, opacity .24s ease;
  list-style:none; padding:0; margin:0;
}
.nav-links-mobile li a, .mobile-menu a{
  display:block; padding:14px 16px; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border);
  transition: background .2s ease, box-shadow .22s ease, transform .22s ease, color .15s ease;
}
.nav-links-mobile li:last-child a{ border-bottom:none; }

/* Hover + active for mobile items */
.nav-links-mobile li a:hover, .mobile-menu a:hover{
  background:#18181a; box-shadow:0 0 10px rgba(230,182,92,.45);
}
.nav-links-mobile li a.active, .mobile-menu a.active{
  color:#fff;
  background:rgba(230,182,92,.08);
  border-left:2px solid var(--gold);
}

/* Open state */
.nav-links-mobile.show, .mobile-menu.open{
  max-height:70vh; opacity:1; pointer-events:auto;
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .nav-links, .top-links{ display:none; }         /* hide desktop links */
  .menu-toggle, #mobile-menu, #menuBtn{ display:flex; align-items:center; gap:4px; }  /* show burger */
  .nav-links-mobile, .mobile-menu{ display:block; }   /* enable slide panel animation on mobile only */
}

/* Focus ring for accessibility */
.nav-links a:focus-visible, .top-links a:focus-visible,
.nav-links-mobile a:focus-visible, .mobile-menu a:focus-visible{
  outline:3px solid rgba(230,182,92,.35);
  outline-offset:2px;
  border-radius:8px;
}

/* Prevent background scroll when menu is open */
body.nav-open{ overflow:hidden; }