/* ============================================================================
   HEADER — barra fissa in cima alla pagina
   ============================================================================

   La barra resta sempre visibile mentre si scorre e in cima alla home si
   sovrappone alla fotografia a piena pagina. Perché il logo e il menu restino
   leggibili sopra qualunque foto c'è una sfumatura scura che parte dal bordo
   superiore e svanisce verso il basso: scurisce solo la striscia occupata
   dalla barra, senza mettere un rettangolo pieno sopra l'immagine.

   Appena si comincia a scorrere la barra diventa opaca, perché sotto non c'è
   più la parte scura della foto ma il contenuto della pagina.
   ========================================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto; /* attaccata in alto, larga quanto lo schermo */
  z-index: var(--z-header);
  background: linear-gradient(180deg, var(--scrim-deep) 0%, transparent 100%);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  height: var(--header-h);
}

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

.logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}

/* Il cerchio sfumato accanto al nome: puro segno grafico. */
.logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--ultra-hi), var(--ultra) 60%, var(--deep-2));
}

.logo-text {
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: -0.02em;

  & em {
    font-style: italic;
    color: var(--ultra-text);
  }
}

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

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.9vw, 28px);
  margin-left: auto; /* spinge il menu contro il bordo destro */

  & a {
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    color: var(--text-muted-ui);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: var(--track-nav);
    text-transform: uppercase;
    transition: color var(--motion);

    &:hover {
      color: var(--on-accent);
    }
  }

  /* Pagina in cui ci si trova: testo pieno e riga blu sotto. */
  & a.is-active {
    color: var(--on-accent);
    border-bottom-color: var(--ultra-hi);
  }
}

/* --- Barra opaca durante lo scorrimento -------------------------------------
   Ottenuto senza JavaScript, con un'animazione legata alla posizione di
   scorrimento invece che al tempo: nei primi 120 pixel la barra passa dalla
   sfumatura al fondo pieno. `@supports` la applica solo dove il browser la
   riconosce; altrove resta la sfumatura, che è comunque leggibile. */

@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-si-oscura linear both;
    animation-timeline: scroll();
    animation-range: 0 120px;
  }

  @keyframes header-si-oscura {
    to {
      background: var(--deep);
      border-bottom: 1px solid var(--line);
    }
  }
}

/* --- Pulsante a tre righe ----------------------------------------------------
   Compare solo sugli schermi piccoli. Le tre righe sono un disegno: il nome
   del comando lo dà `aria-label` nell'HTML. */

.burger {
  display: none; /* su schermo largo il menu è già tutto visibile */
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;

  & span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ice);
  }
}

/* --- Schermi piccoli ---------------------------------------------------------
   Soglie della guida di stile: 1120 / 900 / 640 px. Sotto i 900 le tre voci
   non stanno più in riga accanto al logo e passano nel pannello.

   Tutte le regole del pannello sono condizionate a `html.js`, la marcatura che
   nav.js applica alla pagina appena parte. Se lo script non parte — errore,
   rete a metà, blocco dell'utente — nessuna di queste regole si attiva e il
   menu resta visibile come semplice elenco: il sito non diventa mai
   innavigabile da telefono per colpa di uno script mancante. */

@media (max-width: 900px) {
  html.js .burger {
    display: flex;
  }

  html.js .nav {
    /* Pannello a tutta larghezza sotto la barra. Chiuso è alto zero e
       nascosto anche alla tastiera e agli screen reader: un pannello chiuso
       ma ancora attraversabile con Tab è peggio di nessun pannello. */
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    background: var(--deep);
    border-bottom: 1px solid var(--line);
    transition:
      max-height var(--motion),
      visibility var(--motion);

    & a {
      padding: 16px var(--gut);
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }

    & a.is-active {
      border-bottom-color: var(--line); /* la riga blu qui confonderebbe con i separatori */
      color: var(--ultra-text);
    }
  }

  html.js .nav.is-open {
    max-height: 70vh;
    overflow-y: auto; /* con molte voci il pannello scorre invece di uscire */
    visibility: visible;
  }
}

@media (max-width: 640px) {
  .header-inner {
    height: var(--header-h-sm);
  }

  .logo-text {
    font-size: 20px;
  }
}

/* L'apertura del pannello è un movimento: chi ha chiesto di ridurre le
   animazioni lo vede comparire e sparire di colpo. */
@media (prefers-reduced-motion: reduce) {
  html.js .nav {
    transition: none;
  }
}