/* =============================================================================
   ZAIRA OFFICINA — Navigazione
   ─────────────────────────────────────────────────────────────────────────────
   Barra di navigazione fissa in cima alla pagina.
   ✏️  Per aggiungere una voce: aggiungi <li><a href="#id">Testo</a></li>
       nell'HTML e non serve toccare il CSS.
   ============================================================================= */


/* ── BARRA NAV ───────────────────────────────────────────────────────────── */
nav {
  position:   fixed;
  top:        0;
  width:      100%;
  z-index:    var(--z-nav);
  padding:    1.2rem 2rem;
  display:    flex;
  justify-content: space-between;
  align-items:     center;
  border-bottom:   1px solid var(--border);
  /* Sfondo semi-trasparente con blur per effetto "frosted glass" */
  background:      rgba(17, 16, 8, 0.92);
  backdrop-filter: blur(8px);
}


/* ── LOGO ────────────────────────────────────────────────────────────────── */
.nav-logo {
  font-family:    var(--font-display);
  font-weight:    900;
  font-size:      1.3rem;
  letter-spacing: 0.1em;
  color:          var(--white);
  text-decoration: none;
  transition:     color var(--transition-fast);
  position:       relative;
  z-index:        var(--z-nav); /* sopra il menu mobile */
}

/* Il punto nel logo prende il colore accent */
.nav-logo span {
  color: var(--accent);
}

.nav-logo:hover {
  color: var(--accent);
}


/* ── VOCI DI MENU (desktop) ──────────────────────────────────────────────── */
.nav-links {
  display:    flex;
  gap:        2rem;
  list-style: none;
}

.nav-links a {
  font-family:    var(--font-mono);
  font-size:      0.75rem;
  color:          var(--muted);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:     color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--accent);
}


/* ── HAMBURGER BUTTON ────────────────────────────────────────────────────── */
/*
   Nascosto su desktop, visibile su < 900px (vedi responsive.css).
   Composto da 3 barre che si trasformano in X quando .is-open è attivo.
*/
.hamburger {
  display:        none; /* visibile solo su mobile via responsive.css */
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  gap:            5px;
  width:          44px;   /* touch target 44px */
  height:         44px;
  cursor:         pointer;
  background:     transparent;
  border:         none;
  padding:        0;
  position:       relative;
  z-index:        var(--z-nav); /* sopra il menu overlay */
  flex-shrink:    0;
}

/* Le 3 barre dell'hamburger */
.hamburger-bar {
  display:          block;
  width:            22px;
  height:           2px;
  background:       var(--white);
  transition:       transform 0.25s ease, opacity 0.2s ease, width 0.2s ease;
  transform-origin: center;
}

/* ── Stato aperto: barre diventano X ── */
.hamburger.is-open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  width:     22px;
}

.hamburger.is-open .hamburger-bar:nth-child(2) {
  opacity: 0;
  width:   0;
}

.hamburger.is-open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width:     22px;
}

/* Colore barre in stato aperto */
.hamburger.is-open .hamburger-bar {
  background: var(--accent);
}