/* _03_FixedTopBanner/FixedTopBanner.css */
/* ============================================================ */
/* FIXED TOP BANNER                                             */
/* Stile Apple: logo grande a sinistra, voci centrate,          */
/* mega-menu a tutta larghezza su hover.                        */
/* ============================================================ */

/* Barra fissa */
.banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-bottom: 1px solid var(--color-hairline);
  z-index: 1000;
}

/* Logo, ingrandito e accostato al nav come su Apple */
.banner-logo { display: flex; align-items: center; margin-right: 44px; }
.banner-logo img { height: 40px; width: auto; }

/* Voci centrate in mezzo */
.banner-links { display: flex; gap: 34px; align-items: stretch; height: 56px; }
/* La voce occupa tutta l'altezza del banner: nessuna fascia morta sotto il testo */
.banner-links > li { display: flex; align-items: center; height: 56px; }
.banner-links > li > a { font-size: 15px; color: var(--color-text-primary); display: flex; align-items: center; height: 100%; }

/* Il li con menu occupa la posizione statica per il mega-menu a tutta larghezza */
.has-menu { position: static; }

/* Mega-menu, nascosto */
.mega-menu {
  position: fixed;
  top: 56px; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 34px 44px;
  background: #ffffff;
  border-bottom: 1px solid var(--color-hairline);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* la chiusura della visibilita e ritardata: da il tempo di entrare nel menu */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.3s;
}

/* Apertura su hover: vale sia sulla voce sia dentro il menu stesso */
.has-menu:hover .mega-menu,
.mega-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

/* Colonne del mega-menu */
.mega-col { display: flex; flex-direction: column; gap: 9px; }
.mega-title { font-size: 20px; font-weight: 600; color: var(--color-text-primary); }
.mega-heading { font-size: 17px; color: var(--color-text-secondary); letter-spacing: 0.05em; white-space: nowrap; }
.mega-col a { font-size: 15px; color: var(--color-text-primary); white-space: nowrap; }
.mega-col a:hover, .mega-title:hover { color: var(--color-accent); }

/* Colonna 1: i due ingressi alla sezione */
.mega-col--entry { padding-right: 26px; border-right: 1px solid var(--color-hairline); gap: 14px; }
.mega-entry { font-size: 17px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; }
.mega-entry:hover { color: var(--color-accent); }

/* Frecce che legano le colonne della pipeline */
.mega-arrow { color: var(--color-accent); font-size: 20px; line-height: 1; margin-top: 3px; }

/* Colonna 6: strumenti di controllo */
.mega-col--tools { padding-left: 26px; border-left: 1px solid var(--color-hairline); }