/* nav.css — sticky top navigation bar (shared) */

nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s ease, background .3s ease;
}
nav.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); }
[data-theme="dark"] nav.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }

.nav-inner {
  max-width: 1280px; margin: 0 auto; height: 52px;
  display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem;
}

.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand .on { color: var(--accent); }
.brand-logo { width: 26px; height: 26px; border-radius: 6px; display: block; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.06); }

.nav-links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav-links a { color: var(--text-2); font-size: .88rem; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.active { color: var(--text); font-weight: 500; }

.nav-tools { display: flex; align-items: center; gap: .5rem; margin-left: 1.1rem; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border); color: var(--text);
  cursor: pointer; transition: background .2s;
}
.icon-btn:hover { background: var(--bg-2); }
.icon-btn:focus { outline: none; }
.icon-btn svg { width: 17px; height: 17px; }

/* Keyboard focus only (not pointer): visible ring for accessibility */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#theme-toggle svg { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
#theme-toggle:hover svg { transform: rotate(25deg); }
[data-theme="light"] .moon { display: block; } [data-theme="light"] .sun { display: none; }
[data-theme="dark"] .moon { display: none; }  [data-theme="dark"] .sun { display: block; }

/* Hamburger — hidden on desktop; morphs ☰ ⇄ ✕ */
#menu-btn { display: none; position: relative; }
#menu-btn svg {
  position: absolute; top: 50%; left: 50%; width: 17px; height: 17px;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: opacity .28s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
#menu-btn .x { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
#menu-btn.open .bars { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
#menu-btn.open .x { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }