/* =============================================
   nav.css — Navigation & Header v5.0
   ============================================= */

header {
  position:sticky; top:0; z-index:400;
  height:var(--nav-h);
  backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  background:rgba(248,247,244,0.88);
  border-bottom:1px solid var(--border);
  transition:background var(--t-med),border-color var(--t-med),box-shadow var(--t-med);
}
[data-theme='dark'] header { background:rgba(13,12,24,0.92); }
header.scrolled { box-shadow:var(--shadow-md); }

nav {
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--col-gap);
  height:100%;
  display:flex; align-items:center; gap:1rem;
}

/* Logo */
.logo-link {
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:400; letter-spacing:0.01em;
  color:var(--ink)!important; white-space:nowrap; flex-shrink:0;
  transition:color var(--t-fast);
}
.logo-link:hover { color:var(--accent)!important; }

/* Nav links */
.nav-links {
  display:flex; align-items:center; gap:0.1rem;
  flex:1; justify-content:center;
}
.nav-links a {
  font-size:0.875rem; font-weight:400; color:var(--ink-3);
  padding:0.38rem 0.8rem; border-radius:var(--r-sm);
  position:relative;
  transition:color var(--t-fast),background var(--t-fast);
  white-space:nowrap;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:5px; left:0.8rem; right:0.8rem;
  height:1.5px; background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--t-med) var(--ease-out);
}
.nav-links a:hover,.nav-links a.active { color:var(--accent); background:var(--accent-3); }
.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1); }

/* Controls */
.nav-controls { display:flex; align-items:center; gap:0.4rem; flex-shrink:0; margin-left:auto; }

#theme-toggle {
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-subtle); border:1px solid var(--border-2);
  cursor:pointer; font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-med) var(--ease-spring);
  color:var(--ink-2);
}
#theme-toggle:hover { background:var(--accent-3); border-color:var(--border-3); transform:rotate(20deg) scale(1.08); }

/* Hamburger */
#nav-toggle {
  display:none; width:36px; height:36px;
  border-radius:var(--r-sm); background:var(--bg-subtle);
  border:1px solid var(--border-2); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center;
  gap:5px; transition:background var(--t-fast);
}
#nav-toggle:hover { background:var(--accent-3); }
.bar {
  display:block; width:18px; height:1.5px;
  background:var(--ink); border-radius:2px;
  transition:transform var(--t-med) var(--ease-out), opacity var(--t-fast), width var(--t-med) var(--ease-out);
}
#nav-toggle[aria-expanded='true'] .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#nav-toggle[aria-expanded='true'] .bar:nth-child(2){opacity:0;width:0}
#nav-toggle[aria-expanded='true'] .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* === Mobile === */
@media (max-width:700px) {
  #nav-toggle { display:flex; }
  .nav-links {
    display:none; position:absolute;
    top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:var(--bg-raised); border-bottom:1px solid var(--border);
    padding:0.75rem 1.25rem 1.25rem; gap:0.15rem;
    box-shadow:var(--shadow-lg);
    animation:menuDrop 0.28s var(--ease-out) both;
    z-index:399;
  }
  @keyframes menuDrop {
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:0.65rem 0.85rem; border-radius:var(--r-sm); font-size:0.95rem; }
  .nav-links a::after { display:none; }
  .logo-link { font-size:1rem; }
}