/* Responsive primary navigation
   Grid layout: auto (logo) | 1fr (center links container) | auto (user/auth area).
   This keeps the right block flush-right and allows the center to truly center its contents.
   The center uses flex to center links horizontally regardless of left/right intrinsic widths. */
.site-nav { position:sticky; top:0; z-index:60; background:var(--color-surface); border-bottom:1px solid var(--color-border); }
.site-nav .nav-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:.65rem 1rem; }
.site-nav .logo { font:600 20px/1 var(--font-sans); letter-spacing:.5px; text-decoration:none; color:var(--color-text); }
.site-nav .nav-center { display:flex; justify-content:center; }
.site-nav .nav-right { display:flex; align-items:center; gap:12px; justify-self:end; }
.site-nav .nav-left { display:flex; align-items:center; gap:10px; }

.nav-links { display:flex; gap:22px; align-items:center; }
.nav-links a { text-decoration:none; color:var(--color-text-dim); font:500 14px/1 var(--font-sans); padding:4px 2px; position:relative; }
.nav-links a:hover, .nav-links a:focus-visible { color:var(--color-text); }
.nav-links a:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; border-radius:4px; }
.nav-links .nav-sep { width:1px; height:18px; background:var(--color-border-strong, var(--color-border)); }

.login-link { font:500 14px/1 var(--font-sans); text-decoration:none; color:var(--color-accent); }
.login-link:hover, .login-link:focus-visible { text-decoration:underline; }

.nav-toggle { display:none; background:none; border:1px solid var(--color-border); padding:6px 8px; border-radius:8px; cursor:pointer; position:relative; }
.nav-toggle:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.nav-toggle .bar { display:block; width:20px; height:2px; background:var(--color-text); margin:4px 0; transition:.3s; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Mobile layout */
@media (max-width: 860px){
  /* Mobile: convert grid to simple flex; center menu becomes dropdown panel */
  .site-nav .nav-inner { display:flex; justify-content:space-between; position:relative; }
  .nav-toggle { display:block; }
  .nav-center { position:absolute; left:0; top:100%; width:100%; background:var(--color-surface); border-bottom:1px solid var(--color-border); box-shadow:0 6px 16px -4px rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:.25s; padding-top:4px; justify-content:flex-start; }
  .nav-center.open { opacity:1; visibility:visible; }
  .nav-links { flex-direction:column; align-items:flex-start; padding:1rem 1.1rem 1.25rem; gap:14px; }
  .nav-links .nav-sep { display:none; }
  .nav-right { gap:8px; }
}

/* Ultra-small devices: tighten nav padding and ensure toggle tap target size */
@media (max-width: 360px){
  .site-nav .nav-inner { padding:.55rem .65rem; }
  .nav-toggle { padding:10px 12px; }
  .nav-toggle .bar { width:22px; }
}

/* Light theme adjustments if needed */
[data-theme="light"] .site-nav { background:#fff; }

/* Dark theme subtle contrast */
[data-theme="dark"] .site-nav { background:#0f141a; }