/* nav.css — Top navigation, hamburger toggle, and anchor behavior */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 96px; }
section[id], h2[id], h3[id] { scroll-margin-top: 96px; }
@media (min-width: 768px){
  .menu { display: flex; gap: 1.25rem; position: static; padding: 0; background: transparent; border: 0; }
  .hamburger { display: none; }
}
.hamburger {
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 1px solid var(--line, #262626);
  border-radius: 12px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text, #f5f5f5); cursor: pointer;
}
.hamburger-box { position: relative; width: 20px; height: 14px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.hamburger-inner { top: 50%; transform: translateY(-50%); }
.hamburger-inner::before { top: -6px; }
.hamburger-inner::after  { top:  6px; }
.hamburger[aria-expanded="true"] .hamburger-inner { transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-inner::before { transform: translateY(6px) rotate(90deg); }
.hamburger[aria-expanded="true"] .hamburger-inner::after  { transform: translateY(-6px) rotate(90deg); opacity: 0; }
@media (max-width: 767.98px){
  .menu{
    position: absolute; top: 80px; left: 0; right: 0;
    display: none; flex-direction: column; gap: .75rem;
    background: rgba(10,10,10,.97);
    border-bottom: 1px solid var(--line, #262626);
    padding: .75rem 1rem; z-index: 50;
  }
  .menu.is-open { display: flex; }
  .menu a{ padding: .5rem 0; }
  body.no-scroll { overflow: hidden; }
}