/* ─────────────────────────────────────────────────────────────────────────
   nav.css
   Fixed top navigation bar and mobile hamburger/drawer menu.
   ───────────────────────────────────────────────────────────────────────── */

nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 40px;
  background:      rgba(4, 8, 15, 0.85);
  backdrop-filter: blur(12px);
  border-bottom:   1px solid var(--border);
  transition:      padding 0.3s;
}

/* ── Logo ───────────────────────────────────────────────────────────────── */

.nav-logo {
  font-family:    var(--font-display);
  font-size:      1rem;
  font-weight:    900;
  color:          var(--glow);
  text-shadow:    0 0 20px var(--glow);
  letter-spacing: 0.15em;
  text-decoration: none;
}

/* ── Desktop links ──────────────────────────────────────────────────────── */

.nav-links {
  display:     flex;
  gap:         32px;
  list-style:  none;
}

.nav-links a {
  font-family:    var(--font-mono);
  font-size:      0.8rem;
  color:          var(--muted);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:     color 0.2s, text-shadow 0.2s;
  position:       relative;
}
.nav-links a::before {
  content:    '> ';
  color:      var(--glow);
  opacity:    0;
  transition: opacity 0.2s;
}
.nav-links a:hover {
  color:       var(--glow);
  text-shadow: 0 0 12px var(--glow);
}
.nav-links a:hover::before {
  opacity: 1;
}

/* ── Resume CTA button ──────────────────────────────────────────────────── */

.nav-resume {
  font-family:    var(--font-mono);
  font-size:      0.75rem;
  color:          var(--glow);
  border:         1px solid var(--glow);
  padding:        6px 16px;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:     background 0.2s, color 0.2s, box-shadow 0.2s;
}
.nav-resume:hover {
  background:  var(--glow);
  color:       var(--bg);
  box-shadow:  0 0 20px var(--glow);
}

/* ── Hamburger button (mobile only) ─────────────────────────────────────── */

.hamburger {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         4px;
}
.hamburger span {
  display:    block;
  width:      24px;
  height:     2px;
  background: var(--glow);
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px)  rotate(45deg);  }
.hamburger.open span:nth-child(2) { opacity:   0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer menu ─────────────────────────────────────────────────── */

.mobile-menu {
  display:        none;
  position:       fixed;
  top: 65px; left: 0; right: 0;
  background:     rgba(4, 8, 15, 0.97);
  border-bottom:  1px solid var(--border);
  padding:        24px;
  flex-direction: column;
  gap:            16px;
  z-index:        99;
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  color:          var(--muted);
  text-decoration: none;
  font-size:      1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        8px 0;
  border-bottom:  1px solid var(--border);
  transition:     color 0.2s;
}
.mobile-menu a:hover {
  color: var(--glow);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  nav {
    padding: 16px 20px;
  }
  .nav-links,
  .nav-resume {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}