/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */

/* Primo elemento del body, a tutta larghezza e NEL FLUSSO: scorre via
   con la pagina e non torna piu'. Il menu resta raggiungibile sempre
   grazie all'hamburger, che e' l'unico elemento fisso.
   padding 67px = i vecchi 35px di margine + 32px di padding interno,
   così il logo resta esattamente dov'era. */
nav {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 67px;
  background: var(--dark);
}

/* ── Solo in homepage: nav senza fondo, appoggiato sulla foto della hero ──
   position: absolute (non fixed) e' la chiave: il nav si sovrappone alla
   hero ma resta ancorato alla pagina, quindi scorre via e non torna,
   come la versione nel flusso delle pagine interne. */
body.home nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* 3 e non 2: .hero-content sta anch'esso a 2 e, venendo dopo nel
     documento, vinceva. Finche' nel nav non c'era niente da cliccare
     la cosa non si vedeva; da quando il selettore di lingua e' un
     collegamento vero, il clic finiva sul testo della hero. */
  z-index: 3;
  background: transparent;
}

/* Su fondo chiaro le barrette diventano scure, e l'alone si schiarisce */
.nav-hamburger.on-light span {
  background: var(--dark);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.55);
}

/* Menu aperto (sfondo verde): barrette scure — vince su .on-light
   perché dichiarata dopo, a pari specificità */
.nav-hamburger.is-open span {
  background: var(--dark);
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 38px;
  display: block;
  filter: brightness(0) invert(1);
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 100px;
}

.nav-links a,
.nav-contact {
  font-size: var(--t-ui);
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color .2s;
}

.nav-links a:hover,
.nav-links a.active,
.nav-contact:hover {
  color: var(--white);
}

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

/* ── Hamburger — l'unico elemento fisso: sempre disponibile ──
   Le barrette sono bianco puro; su fondo chiaro passano a scuro grazie
   alla classe .on-light, messa da nav.js in base a cosa c'e' sotto.
   NB: niente mix-blend-mode — invertirebbe il bianco nel colore
   complementare del fondo (crema sulla hero, viola sul verde). */
.nav-hamburger {
  position: fixed;
  top: calc((var(--nav-h) - 32px) / 2);   /* centrato sulla barra nav */
  right: 67px;                            /* a filo del contenuto del nav */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 420;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transform-origin: center;
  /* Alone appena percettibile: le sezioni con foto (attivazioni, progetti)
     hanno immagini di luminosità variabile, e su una foto chiara le
     barrette bianche sparirebbero. Il riempimento resta bianco puro. */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity  0.3s ease,
              background-color 0.25s ease,
              box-shadow 0.25s ease;
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Logo dentro l'overlay ──
   Il nav e' nel flusso: se il menu si apre a pagina scrollata il nav e'
   fuori schermo, quindi il logo sul verde lo mette l'overlay stesso. */
.mobile-menu-logo {
  position: absolute;
  top: calc((var(--nav-h) - 38px) / 2);   /* stessa quota del logo nel nav */
  left: 67px;
  display: flex;
  align-items: center;
}

.mobile-menu-logo img {
  height: 38px;
  display: block;
}
/* NB: qui NON si puo' usare `filter` per scurire il logo.
   Un filtro CSS su un elemento dentro questo overlay fixed, la cui
   opacity viene animata, fa perdere a Chromium il paint di tutta la
   pagina alla chiusura del menu (pagina bianca). Si usa quindi la
   variante SVG già scura: img/manifattura-placemakers-dark.svg */

/* ── Mobile menu overlay ── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 410; /* sopra nav (300) ma sotto hamburger (420) */
  background: var(--accent);
  flex-direction: column;
  justify-content: center;
  padding: 120px 48px 48px 67px; /* left allineato al logo */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-link {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 13vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: rgba(33,33,33,.3);
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity  0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.2s;
}

.mobile-menu-link:hover { color: var(--dark); }

.mobile-menu.is-open .mobile-menu-link {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu.is-open .mobile-menu-link:nth-child(1) { transition-delay: 0.04s; color: var(--dark); }
.mobile-menu.is-open .mobile-menu-link:nth-child(2) { transition-delay: 0.08s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(3) { transition-delay: 0.12s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(4) { transition-delay: 0.16s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(5) { transition-delay: 0.20s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(6) { transition-delay: 0.24s; }

/* ── Language switcher ── */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 64px; /* clearance per l'hamburger fisso */
}

.nav-lang-item {
  font-size: var(--t-didascalia);
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);   /* la lingua non attiva stava a 2,0:1 */
  cursor: default;
  user-select: none;
}

.nav-lang-item.is-active {
  color: var(--white);
}

/* La lingua su cui non si e' e' un collegamento: nel sito statico erano
   due scritte ferme, qui una delle due porta davvero da qualche parte e
   deve sembrarlo. */
a.nav-lang-item {
  cursor: pointer;
  text-decoration: none;
  transition: color .2s ease;
}

a.nav-lang-item:hover,
a.nav-lang-item:focus-visible {
  color: var(--white);
}

/* ── Lingue dentro al menu ──
   Il verde del menu copre la nav, e con lei l'IT/EN in alto a destra:
   senza questa riga, a menu aperto non ci sarebbe modo di cambiare
   lingua. Stesse sigle, vestite per il fondo chiaro e in corpo piccolo,
   perche' non devono competere con le voci grandi. */
.mobile-menu-lang {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity   0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Entra dopo l'ultima voce, continuando la stessa cascata */
.mobile-menu.is-open .mobile-menu-lang {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.28s;
}

.mobile-menu-lang-item,
.mobile-menu-lang-sep {
  font-size: var(--t-didascalia);
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(33, 33, 33, .4);
  text-decoration: none;
  user-select: none;
}

.mobile-menu-lang-item.is-active {
  color: var(--dark);
}

a.mobile-menu-lang-item {
  cursor: pointer;
  transition: color .2s ease;
}

a.mobile-menu-lang-item:hover,
a.mobile-menu-lang-item:focus-visible {
  color: var(--dark);
}

.nav-lang-sep {
  font-size: var(--t-didascalia);
  color: rgba(255,255,255,.5);
}

/* ── Hamburger sempre visibile, nav-links nascosti ── */
.nav-links,
.nav-contact {
  display: none;
}

.nav-hamburger {
  display: flex;
}

.mobile-menu {
  display: flex;
}