/* ============================================================
   navbar.css  —  Fixed top navigation bar
   ============================================================ */

#navbar {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         100;
  background:      rgba(248, 249, 252, .94);
  backdrop-filter: blur(18px);
  border-bottom:   1px solid var(--border);
  box-shadow:      0 1px 12px rgba(26, 86, 219, .06);
}

.nav-inner {
  max-width:   var(--max);
  margin:      0 auto;
  padding:     0 2rem;
  height:      58px;
  display:     flex;
  align-items: center;
  gap:         1.5rem;
}

.nav-brand {
  font-family:    var(--display);
  font-size:      1.05rem;
  color:          var(--gold);
  letter-spacing: .04em;
  white-space:    nowrap;
  font-weight:    600;
}

.nav-dirac {
  font-family: var(--mono);
  font-size:   .68rem;
  color:       rgba(26, 86, 219, .35);
  white-space: nowrap;
}

.nav-links {
  list-style:  none;
  display:     flex;
  gap:         1.8rem;
  margin-left: auto;
}

.nav-links a {
  font-family:    var(--mono);
  font-size:      .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--text-mute);
  transition:     color var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
  color:   var(--gold);
  opacity: 1;
}

/* ── Page links (separate pages) ── */
.nav-page-link {
  color:         var(--gold) !important;
  opacity:       .8;
  border:        1px solid var(--border-mid);
  padding:       .18rem .6rem !important;
  border-radius: 2px;
  transition:    background var(--ease), opacity var(--ease), border-color var(--ease) !important;
}

.nav-page-link:hover,
.nav-page-link.active {
  background:   var(--gold-ghost);
  border-color: var(--border-hi);
  opacity:      1 !important;
}

/* ── Hamburger (mobile) ── */
.hamburger {
  display:     none;
  background:  none;
  border:      none;
  color:       var(--gold);
  font-size:   1.3rem;
  cursor:      pointer;
  margin-left: auto;
}

.nav-mobile {
  display:        none;
  flex-direction: column;
  list-style:     none;
  background:     var(--bg-soft);
  border-top:     1px solid var(--border);
  padding:        1rem 2rem;
  gap:            1rem;
}
.nav-mobile.open { display: flex; }

.nav-mobile a {
  font-family:    var(--mono);
  font-size:      .75rem;
  color:          var(--text-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .nav-links,
  .nav-dirac  { display: none; }
  .hamburger  { display: block; }
}