/* 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(8,8,10,.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(255,255,255,.06);
}
.marchio{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--txt);
  font-family:var(--m); font-size:13px; font-weight:500; letter-spacing:.02em;
}
.pallino{
  width:7px; height:7px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 4px rgba(10,214,182,.16); flex:none;
}
.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(107,22,207,.55) 26%, rgba(10,214,182,.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{
  height:36px; 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(255,255,255,.28));
}
.marchio:hover .marchio-segno,.marchio:focus-visible .marchio-segno{
  filter:drop-shadow(0 0 12px rgba(10,214,182,.4));
}
.marchio-segno,.marchio-nome{transition:filter .3s var(--curva)}

@media(max-width:560px){
  .marchio-segno{height:34px}
  .marchio-nome{height:29px}
  .marchio{gap:9px}
  .barra{padding-left:16px; padding-right:16px; gap:10px}
}
/* Sotto i 380px il nome per esteso non ci sta accanto al menu:
   resta il monogramma, che e' comunque riconoscibile. */
@media(max-width:379px){
  .marchio-nome{display:none}
}


/* ---------- 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}

  .menu-tasto{
    display:flex; align-items:center; gap:9px; margin-left:auto;
    padding:9px 13px; min-height:42px;
    background:transparent; border:1px solid var(--rule); border-radius:10px;
    color:var(--txt); font-family:var(--m); font-size:10.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;
    background:rgba(12,12,16,.94); backdrop-filter:blur(16px);
    border:1px solid var(--rule);
    box-shadow:0 24px 48px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(10,214,182,.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}
}