/* L'intestazione, uguale su tutte le pagine.
   Usa le variabili di colore che ogni pagina definisce gia'. */

/* ---------- barra ---------- */
.barra{
  position:sticky; top:0; z-index:20;
  /* Vetro: la lastra lascia passare il fondo, e sotto corre una riga
     di luce nei colori del marchio. */
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:11px var(--pad); background:rgba(var(--fondo-rgb),.72);
  background:linear-gradient(180deg, rgba(10,10,13,.78), rgba(10,10,13,.58));
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(var(--bianco-rgb),.06);
}
.marchio{
  display:flex; text-decoration:none; color:var(--txt);
  font-family:var(--m); font-size:13px; font-weight:500; letter-spacing:.02em;
}
.barra nav{display:flex; gap:6px}
.barra nav a{
  font-family:var(--m); font-size:12.5px; color:var(--soft); text-decoration:none;
  padding:11px 13px; border-radius:8px; min-height:44px; display:flex; align-items:center;
  transition:color .25s var(--curva), background .25s var(--curva);
}
.barra nav a:hover,.barra nav a:focus-visible{color:var(--txt); background:var(--sur)}
a:focus-visible{outline:2px solid var(--teal); outline-offset:3px}

/* ---------- il marchio in alto ---------- */
/* Le due grafiche di Barbara, alla loro proporzione: solo
   ridimensionate, mai ritagliate ne' ricolorate. Il nome e' scritto
   in bianco a contorno, quindi vive sul fondo scuro. */
.barra::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent,
    rgba(var(--violet-rgb),.55) 26%, rgba(var(--teal-rgb),.75) 62%, transparent);
  opacity:.85;
}
.marchio{gap:12px; align-items:center; padding:2px 0}
.marchio-segno{height:42px; width:auto; flex:none; display:block}
.marchio-nome{
  /* 42 e non 36: il disegno nuovo ha piu' aria fra il nome, la riga e
     la scritta sotto, quindi a parita' di altezza le lettere
     verrebbero piu' piccole di prima. La fascia del nome passava dal
     41.7% al 35.8% dell'immagine: 36 x 41.7 / 35.8 fa 42, ed e' la
     misura che lascia le lettere identiche a come erano. */
  height:42px; width:auto; flex:none; display:block;
  /* il nome e' scritto in contorno sottile: un alone appena accennato
     lo stacca dal fondo senza cambiarne il disegno */
  filter:drop-shadow(0 0 6px rgba(var(--bianco-rgb),.28));
}
.marchio:hover .marchio-segno,.marchio:focus-visible .marchio-segno{
  filter:drop-shadow(0 0 12px rgba(var(--teal-rgb),.4));
}
.marchio-segno,.marchio-nome{transition:filter .3s var(--curva)}

@media(max-width:560px){
  .marchio-segno{height:34px}
  .marchio-nome{height:34px}
  .marchio{gap:9px}
  .barra{padding-left:16px; padding-right:16px; gap:10px}
}
/* IL NOME PER ESTESO NON CI STA ACCANTO AL MENU. LA SOGLIA ERA
   SBAGLIATA DI POCO, E IL POCO BASTAVA.
   Questa rete c'era gia', ma tagliata a 379 punti - la misura dei
   telefoni di qualche anno fa. Quelli di oggi sono larghi 390, 393,
   412, 430: appena sopra, quindi la rete non scattava mai.
   Il conto a 390 punti: marchio 215 + tasto Menu 101 + lingue 78,
   piu' spazi e margini, fa 438. Cinquanta punti in piu' dello
   schermo, e a cadere fuori era l'ultimo della fila - il selettore
   della lingua, che restava tagliato e si raggiungeva solo
   trascinando la pagina di lato.
   A 430 il monogramma resta, ed e' comunque riconoscibile: e' lo
   stesso segno del marchio. */
@media(max-width:430px){
  .marchio-nome{display:none}
}

/* E COMUNQUE LA BARRA NON DEVE POTER SBORDARE, MAI.
   La soglia qui sopra risolve i telefoni che conosciamo. Questa riga
   risolve quelli che non conosciamo: con min-width a zero il marchio
   PUO' rimpicciolirsi invece di spingere fuori i vicini, che e' quello
   che faceva - un elemento flessibile senza questa riga non scende
   mai sotto la larghezza del suo contenuto. */
@media(max-width:820px){
  .marchio{ min-width:0 }
  .marchio-nome{ min-width:0; max-width:100%; object-fit:contain; object-position:left center }
}


/* ---------- il menu ----------
   Da computer e' una riga. Da telefono diventa una tendina: la riga
   non ci stava e costringeva a spostare la pagina di lato, che e' il
   modo piu' sicuro di far sembrare rotto un sito. */

.menu-tasto{display:none}

/* --- da computer: la riga --- */
.menu{display:flex; gap:6px}
/* L'involucro che serve alla tendina non deve disturbare la riga:
   da computer resta una fila orizzontale come prima. */
.menu-dentro{display:flex; gap:6px; align-items:center}

/* --- da telefono: la tendina SI SOVRAPPONE --- */
/* Sta fuori dal flusso: chiusa non occupa un millimetro, aperta cala
   sopra la pagina. Prima entrava nella riga dell'intestazione e
   spingeva giu' la citazione anche da chiusa. */
@media(max-width:820px){
  .barra{position:sticky; flex-wrap:nowrap}

  /* IL TASTO DELLE SEZIONI SI VEDE. Era una pastiglia grigia piccola
     accanto alla lingua: e' il tasto che porta da qualsiasi parte
     all'altra del sito, e si confondeva col contorno. Adesso e' piu'
     grande, e il bordo e' verde acqua - lo stesso verde che nella
     scena vuol dire "si va avanti". */
  .menu-tasto{
    display:flex; align-items:center; gap:9px; margin-left:auto;
    padding:13px 19px; min-height:50px;
    background:linear-gradient(180deg, rgba(var(--teal-rgb),.14), transparent);
    border:1px solid rgba(var(--teal-rgb),.5); border-radius:12px;
    color:var(--txt); font-family:var(--m); font-size:12.5px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; cursor:pointer; flex:none;
  }
  .menu-tasto:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
  .menu-righe{display:flex; flex-direction:column; gap:4px; width:14px}
  .menu-righe i{
    display:block; height:1.5px; background:var(--teal); border-radius:2px;
    transition:transform .3s var(--curva);
  }
  .menu-tasto[aria-expanded="true"] .menu-righe i:first-child{transform:translateY(2.75px) rotate(45deg)}
  .menu-tasto[aria-expanded="true"] .menu-righe i:last-child{transform:translateY(-2.75px) rotate(-45deg)}

  .menu{
    position:absolute; top:100%; right:var(--pad); left:auto;
    min-width:min(48vw, 172px);
    display:block; padding:6px; border-radius:12px;
    /* LEGGERA TRASPARENZA, VOLUTA.
       Era quasi opaco: la tendina sembrava un cartoncino incollato
       sopra il sito. Adesso lascia intravedere quello che copre - la
       scena continua a esistere dietro - e la sfocatura sul fondo tiene
       le voci leggibili lo stesso. Senza sfocatura la trasparenza
       mangia il testo, con la sfocatura no: e' quella a fare il lavoro,
       non l'opacita'. */
    background:rgba(12,12,16,.78);
    backdrop-filter:blur(20px) saturate(1.1);
    -webkit-backdrop-filter:blur(20px) saturate(1.1);
    border:1px solid var(--rule);
    box-shadow:0 24px 48px -20px rgba(var(--nero-rgb),.9), 0 0 0 1px rgba(var(--teal-rgb),.06);
    transform-origin:top right; transform:translateY(-8px) scale(.97);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .26s var(--curva), transform .26s var(--curva),
               visibility 0s linear .26s;
  }
  .barra[data-aperto] .menu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:none; transition-delay:0s;
  }
  .menu-dentro{display:flex; flex-direction:column; gap:2px; align-items:stretch}
  .menu a{
    padding:11px 13px; border-radius:9px; min-height:42px;
    font-size:12.5px; letter-spacing:.05em;
    justify-content:flex-end; text-align:right;
    opacity:0; transform:translateX(8px);
    transition:opacity .26s var(--curva), transform .26s var(--curva),
               color .2s, background .2s;
  }
  .barra[data-aperto] .menu a{opacity:1; transform:none}
  .barra[data-aperto] .menu a:nth-child(1){transition-delay:.05s}
  .barra[data-aperto] .menu a:nth-child(2){transition-delay:.09s}
  .barra[data-aperto] .menu a:nth-child(3){transition-delay:.13s}
  .barra[data-aperto] .menu a:nth-child(4){transition-delay:.17s}
}

@media (prefers-reduced-motion:reduce){
  .menu{transition:none}
  .menu a{opacity:1 !important; transform:none !important; transition:none}
  .menu-righe i{transition:none}
}


/* ---------- la scelta della lingua ----------
   Due sigle in una cornice sola: quella accesa e' la lingua che stai
   leggendo, l'altra e' un collegamento alla stessa identica pagina
   nell'altra lingua - non alla home, che sarebbe come farti
   ricominciare da capo per aver premuto due lettere.
   Compare solo se le lingue sono davvero due: il costruttore non
   scrive niente quando ce n'e' una sola. */
.lingue{
  display:flex; align-items:center; gap:2px; flex:none;
  padding:3px; border:1px solid var(--rule); border-radius:10px;
}
.lingua-qui,.lingua-altra{
  display:flex; align-items:center; justify-content:center;
  min-width:36px; min-height:34px; padding:6px 8px; border-radius:7px;
  font-family:var(--m); font-size:11px; font-weight:700; letter-spacing:.09em;
  text-decoration:none;
}
/* la lingua di adesso: piena, cosi' si legge a colpo d'occhio quale
   delle due e' quella che hai davanti */
.lingua-qui{ color:rgb(var(--fondo-rgb)); background:var(--teal) }
.lingua-altra{
  color:var(--soft);
  transition:color .25s var(--curva), background .25s var(--curva);
}
.lingua-altra:hover,.lingua-altra:focus-visible{ color:var(--txt); background:var(--sur) }

/* Il menu si accosta alla lingua invece di stare in mezzo alla barra:
   senza questa riga i tre pezzi si spartirebbero la larghezza e le
   sezioni finirebbero al centro, dove non sono mai state. */
.barra nav{ margin-left:auto }

@media(max-width:820px){
  /* Il menu qui e' una tendina sganciata dal flusso: la lingua resta
     l'unica cosa accanto al tasto, e li' ci sta comoda. */
  .barra nav{ margin-left:0 }
  .menu-tasto{ margin-left:auto }
  .lingue{ margin-left:8px }
  .lingua-qui,.lingua-altra{ min-width:34px; min-height:40px }
}
@media(max-width:430px){
  .barra{ gap:6px }
  .lingue{ margin-left:4px; padding:2px }
  .lingua-qui,.lingua-altra{ min-width:30px; padding:6px; font-size:10.5px }
}