/* ==========================================================================
   Header iniziale (disegno 415:80) e header sticky (disegno 242:2), desktop.
   Tablet e smartphone (pulsante menu) arrivano alla tappa 4.
   ========================================================================== */

[hidden] {
  display: none !important;
}

.intestazione ul,
.intestazione-sticky ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Header iniziale ----------
   Tablet e smartphone (509:277, 416:94): alto 64 px, marchio a sinistra,
   pulsante menu a destra. Desktop (da 1280 px): voci e social, sotto. */
.intestazione__interno {
  position: relative;
  max-width: var(--larghezza-contenuto);
  height: var(--spazio-64);
  margin-inline: auto;
  padding: 0 var(--spazio-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-16);
  color: var(--testo-primario);
}

.intestazione__marchio { color: var(--testo-primario); }

.voce-intestazione {
  display: flex;
  align-items: center;
  min-height: var(--area-tocco-min);
  margin-top: -12px;                 /* il testo resta dove era nel disegno */
  color: inherit;
  text-decoration: none;
}

/* pulsante menu (foglio B): cerchio da 32 px, area di tocco 44 × 44 */
.pulsante-menu {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--area-tocco-min);
  height: var(--area-tocco-min);
  margin-right: calc((var(--area-tocco-min) - 32px) / -2);  /* il cerchio arriva al margine */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.pulsante-menu__cerchio {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: var(--superficie-lilla-chiaro);
  border: 1px solid var(--accento-lilla);
  border-radius: 50%;
}

/* tre lineette da 14 px */
.pulsante-menu__cerchio i {
  display: block;
  width: 14px;
  border-top: 1px solid var(--testo-accento);
}

.intestazione__nav ul,
.intestazione__extra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-8) var(--spazio-16);
}

.intestazione__extra {
  color: var(--testo-attenuato);   /* nel disegno: testo principale al 70% */
}

/* filetto sotto l'header, largo quanto il contenuto */
.intestazione__interno::after {
  content: "";
  position: absolute;
  left: var(--spazio-20);
  right: var(--spazio-20);
  bottom: 0;
  border-top: var(--filetto);
}

@media (min-width: 600px) {
  .intestazione__interno { padding-inline: var(--spazio-24); }
  .intestazione__interno::after { left: var(--spazio-24); right: var(--spazio-24); }
}

@media (min-width: 1280px) {
  .intestazione__interno {
    display: grid;
    /* il marchio occupa lo spazio fino alla prima voce (815 px su 1440 nel disegno) */
    grid-template-columns: calc((815 - 46) / (1440 - 2 * 46) * 100%) auto 1fr;
    align-items: start;
    height: var(--spazio-64);
    padding: var(--alto-testi-intestazione) var(--margine-alto-desktop) 0;
    gap: 0;
  }

  .intestazione__interno::after {
    left: var(--margine-alto-desktop);
    right: var(--margine-alto-desktop);
  }

  .intestazione__nav ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--passo-voci-intestazione);
    gap: 0;
  }

  /* il testo del marchio resta a 25 px dall'alto, come nel disegno */
  .intestazione__marchio { margin-top: calc((16px - var(--area-tocco-min)) / 2); }

  .intestazione .intestazione__extra {
    justify-content: flex-end;
    gap: var(--spazio-12);
    padding-right: var(--rientro-extra-intestazione);
  }

  .intestazione__extra li:first-child {
    margin-right: var(--spazio-8);
  }
}

/* ---------- Header sticky ----------
   Desktop (242:2): marchio, voci con indicatore 34 × 2 px, pillola del capitolo.
   Tablet (519:1447): marchio, pillola, pulsante menu.
   Smartphone (406:2): marchio, pulsante menu, filetto e trattino 40 × 2 px in basso.
   Comparsa e scomparsa: css/interazioni.css. */
.intestazione-sticky {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--superficie-base);
  border-bottom: 1px solid var(--linea-intestazione);
  box-shadow: var(--ombra-header-sticky);
  -webkit-backdrop-filter: blur(var(--sfocatura-header));
  backdrop-filter: blur(var(--sfocatura-header));
}

.intestazione-sticky__interno {
  position: relative;
  max-width: var(--larghezza-contenuto);
  height: var(--spazio-64);
  margin-inline: auto;
  padding: 0 var(--spazio-20);
  display: flex;
  align-items: center;
  gap: var(--spazio-16);
}

/* marchio: link all'inizio; area di tocco alta 44 px, larga quanto il testo */
.marchio {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: var(--area-tocco-min);
  color: var(--testo-primario);
  text-decoration: none;
}

.intestazione-sticky__marchio {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
}

/* pillola del capitolo (519:1454): bianca, bordo lilla, angoli 17 px */
.intestazione-sticky__capitolo {
  display: flex;
  align-items: center;
  gap: var(--spazio-12);
  flex: 0 1 350px;
  min-width: 0;
  height: var(--spazio-40);
  padding: 0 calc(13px - 1px);
  background: var(--superficie-bianco);
  border: 1px solid var(--accento-lilla);
  border-radius: var(--raggio-capitolo-sticky);
  white-space: nowrap;
}

.intestazione-sticky__capitolo-numero {
  flex: none;
  color: var(--testo-accento);
}

.intestazione-sticky__capitolo-titolo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--testo-navigazione);
}

/* smartphone: filetto in basso (406:8) e trattino al centro (406:9) */
.intestazione-sticky__trattino {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 2px;
  margin-left: -20px;
  border-radius: 1px;
  background: var(--accento-lilla);
}

.intestazione-sticky__interno:has(.intestazione-sticky__trattino)::after {
  content: "";
  position: absolute;
  left: var(--spazio-20);
  right: var(--spazio-20);
  bottom: 1px;
  border-top: var(--filetto);
}

@media (min-width: 600px) {
  .intestazione-sticky__interno { padding-inline: var(--spazio-24); }
}

/* ---------- Header sticky desktop ---------- */
.intestazione-sticky__nav {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.intestazione-sticky__nav ul {
  display: flex;
  gap: var(--spazio-40);
}

/* voce: testo 14 px, area di tocco alta 44 px (foglio D) */
.voce-sticky {
  display: flex;
  align-items: center;
  min-height: var(--area-tocco-min);
  color: var(--testo-navigazione);
  text-transform: uppercase;
  text-decoration: none;
}

.voce-sticky--corrente {
  color: var(--testo-accento);
}

/* indicatore 34 × 2 px sotto la voce corrente: uno solo, scorre da una voce all'altra
   (foglio C, sequenza 3); 32 px sotto l'inizio del testo */
.intestazione-sticky__indicatore {
  position: absolute;
  left: 0;
  top: calc(50% - 10px + var(--distanza-indicatore-sticky));
  width: 34px;
  height: 2px;
  border-radius: 1px;
  background: var(--accento-lilla);
  opacity: 0;
  transform: translateX(var(--x, 0));
}

.intestazione-sticky__indicatore[data-visibile] { opacity: 1; }

@media (min-width: 1280px) {
  .intestazione-sticky__interno {
    display: grid;
    grid-template-columns: 1fr auto var(--larghezza-capitolo-sticky);
    padding: 0 var(--margine-sticky-destra) 0 var(--margine-sticky-sinistra);
    gap: 0;
  }

  .intestazione-sticky__nav {
    margin-right: var(--distanza-capitolo-sticky);
  }
}