/* ═══ NAVIGATION 2-LAYER (refactor 03/05 sera) ═══
   Layer 1: page-nav (sezioni della pagina corrente, anchor scroll)
   Layer 2: site-nav (dropdown hover, altre pagine sito)
   Layer 3: external-nav (visibile >1100px, GitHub + d-nd.com)
   Mobile <760px: tutto in drawer animato off-canvas

   Richiede CSS variables --void/--panel/--ink/--text/--muted/--dim/--cyan/--line/--line-strong/--shadow */

.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 8, 12, .84);
  backdrop-filter: blur(18px);
}

.nav {
  height: 64px;
  display: flex; align-items: center; gap: 18px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: 760; letter-spacing: 0; white-space: nowrap;
  flex-shrink: 0;
}
.brand img {
  width: 26px; height: 26px; border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Layer 1 — Page anchors (sezioni della pagina) */
.page-nav {
  display: flex; align-items: center; gap: 4px;
  color: var(--muted); font-size: 14px; white-space: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.page-nav::-webkit-scrollbar { display: none; }
.page-nav a {
  text-decoration: none; padding: 6px 10px; border-radius: 6px;
  transition: color .14s, background .14s;
  position: relative;
}
.page-nav a:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.page-nav a.active {
  color: var(--cyan);
  background: rgba(34, 211, 238, .08);
}
.page-nav a.active::after {
  content: ""; position: absolute; bottom: -3px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 2px; background: var(--cyan); border-radius: 2px;
  box-shadow: 0 0 8px var(--cyan);
}

.nav-spacer { flex: 1; }

/* Layer 2 — Site dropdown (hover desktop, click mobile) */
.site-nav-wrap { position: relative; flex-shrink: 0; }
.site-nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); background: rgba(255,255,255,.02);
  font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.site-nav-trigger:hover, .site-nav-wrap:hover .site-nav-trigger,
.site-nav-wrap.open .site-nav-trigger {
  color: var(--ink); border-color: var(--cyan);
  background: rgba(34, 211, 238, .06);
}
.site-nav-trigger .caret { font-size: 10px; transition: transform .15s; }
.site-nav-wrap:hover .site-nav-trigger .caret,
.site-nav-wrap.open .site-nav-trigger .caret { transform: rotate(180deg); }

.site-nav-panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 220px; padding: 6px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: rgba(13, 14, 20, .98);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, visibility .15s, transform .15s;
  z-index: 50;
}
.site-nav-wrap:hover .site-nav-panel,
.site-nav-wrap.open .site-nav-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-nav-panel a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 11px; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: 14px;
  transition: color .12s, background .12s;
}
.site-nav-panel a:hover {
  color: var(--ink); background: rgba(34, 211, 238, .08);
}
.site-nav-panel a[data-current] {
  color: var(--cyan); background: rgba(34, 211, 238, .06);
  font-weight: 600;
}
.site-nav-panel a[data-current]::before { content: "▸ "; color: var(--cyan); }

/* Layer 3 — External (GitHub, d-nd.com) — visibile solo >1100px */
.external-nav { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.external-nav a {
  text-decoration: none; transition: color .14s;
  display: inline-flex; align-items: center; gap: 4px;
}
.external-nav a:hover { color: var(--ink); }
.external-nav a::after { content: "↗"; font-size: 10px; opacity: .6; }

/* Mobile toggle (visibile <760px) */
.mobile-toggle {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background: rgba(255,255,255,.03); color: var(--ink);
  font-size: 18px; cursor: pointer; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mobile-toggle:hover { border-color: var(--cyan); color: var(--cyan); }

/* Mobile drawer (animato off-canvas slide-in da destra) */
.mobile-drawer-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.mobile-drawer-backdrop.open { opacity: 1; visibility: visible; }
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  width: min(320px, 86vw);
  background: var(--panel); border-left: 1px solid var(--line-strong);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-head {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-drawer-head .close-btn {
  background: transparent; border: 0; color: var(--dim);
  font-size: 22px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.mobile-drawer-head .close-btn:hover { color: var(--ink); background: var(--line); }
.mobile-drawer-section { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.mobile-drawer-section:last-child { border-bottom: none; }
.mobile-drawer-section h3 {
  margin: 0 0 8px 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cyan); font-weight: 700;
}
.mobile-drawer-section a {
  display: block; padding: 9px 0;
  color: var(--text); text-decoration: none; font-size: 15px;
  border-bottom: 1px solid transparent;
}
.mobile-drawer-section a:hover { color: var(--cyan); }
.mobile-drawer-section a[data-current] {
  color: var(--cyan); font-weight: 600;
}
.mobile-drawer-section a[data-current]::before { content: "▸ "; }
.mobile-drawer-section a[data-external]::after { content: " ↗"; opacity: .6; }

/* Responsive nav breakpoints */
@media (max-width: 1100px) { .external-nav { display: none; } }
@media (max-width: 900px) { .page-nav { display: none; } }
@media (max-width: 760px) {
  .site-nav-wrap { display: none; }
  .nav .button.secondary { display: none; }
  .mobile-toggle { display: inline-flex; }
}