/* ═══════════════════════════════════════════
   TEATRO AURORA — NAVIGATION
═══════════════════════════════════════════ */

/* ─── NAV ─── */
nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         500;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.6rem var(--pad-x);
  background:      rgba(8, 31, 33, .97);
  backdrop-filter: blur(14px);
  transition:      background      var(--transition-slow),
                   backdrop-filter var(--transition-slow);
}

/* ─── NAV SOPRA L'HERO ───
   Solo in home (js/shared.js mette .transparent finché scrollY < 60).
   Qui la nav non ha alcun fondo: la fascia scura di prima tagliava in
   due la locandina a tutto schermo del carosello. A far leggere le voci
   basta il velo dell'hero, che già scurisce il 22% in alto. Fondo opaco
   e sfocatura tornano appena si scorre, dove sotto passa il testo della
   pagina e servono davvero. */
nav.transparent {
  background:      transparent;
  backdrop-filter: none;
}
/* senza fondo il testo poggia sull'immagine: l'ombra lo tiene leggibile
   anche quando sotto capita una locandina chiara */
nav.transparent .nav-logo,
nav.transparent .nav-links a {
  text-shadow: 0 2px 14px rgba(4,16,17,.95), 0 1px 3px rgba(4,16,17,.8);
}
nav.transparent .nav-toggle span {
  box-shadow: 0 1px 6px rgba(4,16,17,.9);
}

/* Logo */
.nav-logo {
  font-family:    var(--font-display);
  font-style:     italic;
  font-size:      2.5rem;
  color:          var(--gold);
  text-decoration: none;
  line-height:    1;
}
.nav-logo span {
  font-style:     normal;
  font-family:    var(--font-label);
  font-size:      .58rem;
  color:          var(--cream);
  letter-spacing: .32em;
  display:        block;
  margin-bottom:  -.15rem;
}

/* Links */
.nav-links {
  display:    flex;
  gap:        2.6rem;
  list-style: none;
}
.nav-links a {
  font-family:    var(--font-label);
  font-size:      .55rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color:          var(--text-light);
  text-decoration: none;
  position:       relative;
  padding-bottom: 4px;
  transition:     color var(--transition-normal);
}
.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0;
  width:      0;
  height:     1px;
  background: var(--gold);
  transition: width .38s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
}
.nav-links a.active::after,
.nav-links a:hover::after {
  width: 100%;
}

/* CTA */
.nav-cta {
  font-family:    var(--font-label);
  font-size:      .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--petrolio-dark);
  background:     var(--gold);
  padding:        .7rem 1.5rem;
  text-decoration: none;
  transition:     background var(--transition-normal),
                  transform  var(--transition-fast);
}
.nav-cta:hover {
  background: var(--gold-light);
  transform:  translateY(-1px);
}

/* Mobile hamburger */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  background:      none;
  border:          none;
  padding:         4px;
}
.nav-toggle span {
  display:          block;
  width:            24px;
  height:           1px;
  background:       var(--gold);
  transition:       transform var(--transition-normal),
                    opacity   var(--transition-normal);
}

/* Mobile nav open */
.nav-open .nav-links {
  display:         flex;
  flex-direction:  column;
  position:        fixed;
  inset:           0;
  background:      rgba(8,31,33,.98);
  align-items:     center;
  justify-content: center;
  gap:             2.5rem;
  z-index:         498;
}
.nav-open .nav-links a {
  font-size:   .8rem;
}

/* Con 7 voci di menu lo spazio si stringe prima del breakpoint mobile */
@media (max-width: 1250px) {
  .nav-links { gap: 1.5rem; }
}

@media (max-width: 1000px) {
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta    { display: none; }
  .nav-open .nav-links { gap: 2rem; }
}