/* ==========================================================================
   Sezione 1 — Navbar. Nodo 2633:265.

   Pill flottante: sta SOPRA l'hero, non lo spinge in basso.
   Larghezza 1274px, piu' larga del container di contenuto (1224px).
   Vedi docs/editoria-design-spec.md § 3.1.
   ========================================================================== */

.eia-navbar {
  position: fixed;
  top: var(--eia-nav-offset);
  left: 50%;
  z-index: var(--eia-z-nav);
  width: min(var(--eia-nav-width), calc(100% - var(--eia-space-lg)));
  transform: translateX(-50%);
}

.eia-navbar__pill {
  display: flex;
  align-items: center;
  gap: var(--eia-space-md);
  min-height: var(--eia-nav-height);
  padding-inline: var(--eia-space-md);
  border-radius: var(--eia-radius-nav);
  background-color: var(--eia-surface-nav);
  /* Effetto vetro: la superficie e' traslucida (rgba 0.2) e il design
     poggia su un fondo scuro con ellissi sfocate dietro. */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* --- Logo --------------------------------------------------------------- */

.eia-navbar__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--eia-color-text);
  text-decoration: none;
}

.eia-navbar__brand svg {
  width: 170px;
  height: 33px;
}

/* Finche' il logo non e' stato esportato da Figma (nodo 2633:253, R7). */
.eia-navbar__brand-fallback {
  font-size: var(--eia-fs-heading);
  font-weight: var(--eia-fw-bold);
  letter-spacing: -0.01em;
}


/* --- Menu --------------------------------------------------------------- */

.eia-navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--eia-space-md);
  /* Il gap fra logo e menu nel design e' 107px: qui e' reso spingendo il
     menu a destra, cosi' regge anche quando le voci cambiano lunghezza. */
  margin-left: auto;
}

.eia-navbar__list {
  display: flex;
  align-items: center;
  gap: 30px;   /* misurato sul design, spec § 3.1 */
}

.eia-navbar__link {
  display: inline-block;
  padding-block: var(--eia-space-2xs);
  color: var(--eia-color-text);
  font-size: var(--eia-fs-nav);
  font-weight: var(--eia-fw-semibold);
  letter-spacing: var(--eia-ls-nav);
  /* Nel file Figma due voci sono in maiuscolo e due in caso misto:
     la normalizzazione e' responsabilita' del CSS, non del contenuto
     (spec § 3.1). */
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--eia-transition);
}

.eia-navbar__link:hover {
  filter: brightness(var(--eia-hover-brightness));
  text-decoration: underline;
}

.eia-navbar__cta {
  flex-shrink: 0;
  width: 144px;   /* spec § 3.1 */
}


/* --- Pulsante di apertura (solo sotto 1024px) --------------------------- */

.eia-navbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;    /* area di tocco minima raccomandata */
  height: 44px;
  margin-left: auto;
  color: var(--eia-color-text);
}

/* Tre barre disegnate con currentColor: nessun asset, nessuna richiesta. */
.eia-navbar__toggle-bars,
.eia-navbar__toggle-bars::before,
.eia-navbar__toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--eia-transition), opacity var(--eia-transition);
}

.eia-navbar__toggle-bars::before,
.eia-navbar__toggle-bars::after {
  content: "";
  position: absolute;
}

.eia-navbar__toggle-bars::before {
  transform: translateY(-7px);
}

.eia-navbar__toggle-bars::after {
  transform: translateY(7px);
}

/* Stato aperto: le barre diventano una croce. */
.eia-navbar__toggle[aria-expanded="true"] .eia-navbar__toggle-bars {
  background-color: transparent;
}

.eia-navbar__toggle[aria-expanded="true"] .eia-navbar__toggle-bars::before {
  transform: translateY(0) rotate(45deg);
}

.eia-navbar__toggle[aria-expanded="true"] .eia-navbar__toggle-bars::after {
  transform: translateY(0) rotate(-45deg);
}


/* --- Sotto 1024px ------------------------------------------------------- */

@media (max-width: 1023px) {

  .eia-navbar__toggle {
    display: flex;
    position: relative;
  }

  .eia-navbar__menu {
    position: absolute;
    top: calc(100% + var(--eia-space-2xs));
    left: 0;
    right: 0;
    z-index: var(--eia-z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: var(--eia-space-sm);
    padding: var(--eia-space-lg) var(--eia-space-md);
    border-radius: var(--eia-radius-nav);
    background-color: var(--eia-surface-nav);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* Chiuso: fuori dal flusso di tabulazione e invisibile agli screen
       reader. `display: none` invece di sola opacita', altrimenti le voci
       restano raggiungibili con Tab da dentro un pannello chiuso. */
    display: none;
  }

  .eia-navbar__menu.is-open {
    display: flex;
  }

  .eia-navbar__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--eia-space-sm);
  }

  .eia-navbar__link {
    display: block;
    padding-block: var(--eia-space-xs);
  }

  .eia-navbar__cta {
    width: 100%;
  }
}


/* --- Sotto 393px -------------------------------------------------------- */

@media (max-width: 393px) {
  .eia-navbar {
    top: var(--eia-space-sm);
    width: calc(100% - (var(--eia-gutter-mobile) * 2));
  }

  .eia-navbar__brand svg {
    width: 130px;
    height: auto;
  }
}