/* ============================================================
   HEADER

   Desktop (>= 1024px): vetro liquido, isola flottante allo scroll.
   Mobile  (<= 1023px): header statico, come prima, con il solo
                        bottone del menu. Nessun vetro, nessun float.

   Caricato DOPO i blocchi <style> inline delle pagine: vince
   quindi sulle regole di pari specificita' senza !important.
   L'!important compare solo dove l'inline lo usa gia' ed e'
   segnalato caso per caso.
   ============================================================ */

/* ---------- Base, a tutte le larghezze ---------- */

.site-header {
  background: none;   /* via il gradiente nero */
  padding-bottom: 0;
}

.site-header .site-header-inner {
  position: relative;
  border: 1px solid transparent;
  border-radius: 0;
}

/* Senza il gradiente, sopra il video dell'hero serve un minimo di
   stacco: un'ombra sul testo, invisibile ma sufficiente. Resta
   sempre attiva su mobile; sul desktop sparisce quando arriva il
   vetro, che fa gia' da fondo. */
.site-header #main-nav a,
.site-header #menu-btn {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 14px rgba(0, 0, 0, .55);
}

.site-header .site-header-inner > a:first-child img {
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .45));
}

/* ---------- Desktop: l'isola di vetro ----------

   Il contenuto NON si deve muovere passando allo stato flottante.
   Due accorgimenti lo garantiscono:

   1) verticale — quello che l'header guadagna in alto, la barra lo
      perde in padding: 12 + 12 = 24px, cioe' esattamente il py-6 di
      partenza. Le due transizioni hanno stessa durata e stessa curva,
      quindi la somma resta 24px anche durante l'animazione.
   2) orizzontale — il padding laterale non viene toccato (resta il
      px-6 / lg:px-8 di Tailwind) e resta simmetrico: il menu e'
      centrato nella barra, quindi non si sposta nemmeno quando la
      barra si restringe.

   Per lo stesso motivo il logo non cambia dimensione. */

@media (min-width: 1024px) {
  .site-header {
    transition: padding-top .45s cubic-bezier(.22, 1, .36, 1);
  }

  .site-header .site-header-inner {
    transition:
      max-width .45s cubic-bezier(.22, 1, .36, 1),
      padding .45s cubic-bezier(.22, 1, .36, 1),
      border-radius .45s cubic-bezier(.22, 1, .36, 1),
      background-color .40s ease,
      border-color .40s ease,
      box-shadow .40s ease;
  }

  .site-header .site-header-inner > a:first-child img {
    transition: filter .40s ease;
  }

  .site-header.is-floating {
    padding-top: 12px;
  }

  .site-header.is-floating .site-header-inner {
    max-width: 1140px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, .14);
    /* Fondo abbastanza scuro da far leggere il logo blu anche quando
       dietro scorre il video chiaro dell'hero o la fascia bianca sponsor. */
    background: rgba(9, 11, 15, .62);
    -webkit-backdrop-filter: blur(26px) saturate(175%);
            backdrop-filter: blur(26px) saturate(175%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .22),
      inset 0 -1px 0 rgba(255, 255, 255, .06),
      0 14px 40px rgba(0, 0, 0, .40);
  }

  /* Riflesso superiore: e' quello che fa leggere il pannello come vetro
     e non come un semplice rettangolo semitrasparente. */
  .site-header.is-floating .site-header-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 48%);
    pointer-events: none;
  }

  /* Col vetro sotto, le ombre di leggibilita' non servono piu' */
  .site-header.is-floating #main-nav a {
    text-shadow: none;
  }

  .site-header.is-floating .site-header-inner > a:first-child img {
    filter: none;
  }

  /* Se il browser non supporta backdrop-filter, il pannello resta
     leggibile alzando l'opacita' del fondo. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.is-floating .site-header-inner {
      background: rgba(9, 11, 15, .93);
    }
  }
}

/* ---------- Mobile / tablet: header statico ----------

   Qui .is-floating viene comunque aggiunta dallo script (serve se si
   ruota o si allarga la finestra fino al desktop), ma nessuna regola
   la usa: la barra resta ferma e senza vetro, esattamente come prima. */

@media (max-width: 1023px) {
  /* l'inline usa "header { padding-bottom: 20px !important }": era lo
     spazio per la sfumatura, che ora non c'e' piu'. Azzerandolo si
     evita anche che l'header intercetti i clic sotto la barra. */
  .site-header {
    padding-bottom: 0 !important;
  }

  /* Il pannello si agganciava alla vecchia barra alta 20px in piu':
     senza quel padding va riaccostato a mano, per restare appena
     sotto l'header come prima. */
  #mobile-menu {
    top: calc(100% + 2px);
  }
}

/* ---------- Meno animazioni ---------- */

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .site-header-inner,
  .site-header .site-header-inner > a:first-child img {
    transition: none;
  }
}