/* ─────────────────────────────────────────────────────────────────────
   nav.css — Site header and navigation bar
───────────────────────────────────────────────────────────────────── */

.site-header {
  position:     fixed;
  top:          0;
  inset-inline: 0;
  z-index:      900;
  height:       var(--nav-h);
  background:   rgba(29, 27, 58, 0.85);
  backdrop-filter:         blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav {
  max-width:       1200px;
  margin-inline:   auto;
  padding-inline:  clamp(1rem, 5vw, 3rem);
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.nav__logo {
  font-family:    var(--font-display);
  font-size:      1.4rem;
  font-weight:    600;
  color:          var(--text);
  letter-spacing: 0.04em;
  text-shadow:    0 0 18px rgba(179, 141, 255, 0.32);
  transition:     color var(--t), text-shadow var(--t);
}
.nav__logo:hover {
  text-shadow:     0 0 28px rgba(232, 180, 255, 0.65);
  text-decoration: none;
}

.nav__links {
  display: flex;
  gap:     2.5rem;
}
.nav__links a {
  color:       var(--text-muted);
  font-size:   0.9rem;
  font-weight: 500;
  transition:  color var(--t);
}
.nav__links a:hover {
  color:           var(--text);
  text-decoration: none;
}

/* Hamburger — hidden on desktop */
.nav__hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           36px;
  height:          36px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         4px;
}
.nav__hamburger span {
  display:       block;
  height:        2px;
  background:    var(--text);
  border-radius: 2px;
  transition:    all 0.3s var(--ease);
}

/* Hamburger → X animation */
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg);  }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav__hamburger { display: flex; }

  .nav__links {
    position:       fixed;
    top:            var(--nav-h);
    inset-inline:   0;
    flex-direction: column;
    background:     var(--bg);
    border-bottom:  1px solid var(--border);
    padding:        1.5rem;
    gap:            1.5rem;
    transform:      translateY(-100%);
    opacity:        0;
    pointer-events: none;
    transition:     transform 0.35s var(--ease), opacity 0.35s var(--ease);
    z-index:        899;
  }
  .nav__links.is-open {
    transform:      none;
    opacity:        1;
    pointer-events: auto;
  }
}