/* ═══════════════════════════════════════════════
   AURORA VIDAL — Navigation (nav.css)
═══════════════════════════════════════════════ */

/* ── Main nav bar ───────────────────────────── */
#av-nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         500;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         38px var(--page-margin) 24px;
  background:      var(--bg);
  border-bottom:   1px solid transparent;
  transition:      border-color var(--transition-mid);
  box-sizing:      border-box;
}
#av-nav.shadowed { border-bottom-color: var(--border); }

/* Admin bar support */
.admin-bar #av-nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #av-nav { top: 46px; }
}

/* ── Brand ──────────────────────────────────── */
.nav-brand {
  font-size:      12px;
  font-weight:    500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--text);
  text-decoration: none;
  background:     none;
  border:         none;
  cursor:         pointer;
  flex-shrink:    0;
}

/* ── Desktop links list ─────────────────────── */
.nav-links {
  display:     flex;
  gap:         36px;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.nav-btn,
.nav-links a {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--muted);
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        4px 0;
  position:       relative;
  text-decoration: none;
  transition:     color var(--transition-fast);
}
.nav-btn::after,
.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     -2px;
  left:       0;
  right:      0;
  height:     1px;
  background: var(--text);
  transform:  scaleX(0);
  transition: transform .22s ease;
}
.nav-btn:hover,
.nav-links a:hover,
.nav-btn.active,
.current-menu-item > a,
.current_page_item > a {
  color: var(--text);
}
.nav-btn.active::after,
.current-menu-item > a::after,
.current_page_item > a::after { transform: scaleX(1); }

/* ── WP nav_menu list items ─────────────────── */
.nav-links li   { list-style: none; }
.nav-links li a { /* inherits .nav-btn styles */ }

/* ── Mobile hamburger button ────────────────── */
.nav-menu-btn {
  display:         none;
  flex-direction:  column;
  justify-content: space-between;
  width:           26px;
  height:          18px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
  z-index:         600;
}
.nav-menu-btn .bar {
  display:    block;
  width:      100%;
  height:     1px;
  background: var(--text);
  transition: transform .28s ease, opacity .28s ease;
}
.nav-menu-btn.open .bar:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-menu-btn.open .bar:nth-child(2) { opacity: 0; }
.nav-menu-btn.open .bar:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ── Mobile overlay menu ────────────────────── */
#nav-mobile-menu {
  position:       fixed;
  inset:          0;
  z-index:        400;
  background:     var(--bg);
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        var(--page-margin);
  transform:      translateX(100%);
  transition:     transform .32s ease;
}
#nav-mobile-menu.open { transform: translateX(0); }

#nav-mobile-menu a {
  display:         block;
  font-size:       clamp(28px, 6vw, 52px);
  font-weight:     400;
  letter-spacing:  -.02em;
  color:           var(--text);
  text-decoration: none;
  padding:         14px 0;
  border-bottom:   1px solid var(--border);
  transition:      opacity var(--transition-fast);
}
#nav-mobile-menu a:hover { opacity: .4; }

/* ── Responsive: show hamburger on mobile ───── */
@media (max-width: 768px) {
  .nav-links     { display: none; }
  .nav-menu-btn  { display: flex; }
}