/* Header expy — ricostruito a mano, senza runtime Framer.
   Le misure NON sono inventate: sono quelle rilevate sull'header attuale con getComputedStyle
   il 2026-08-08, così la grafica resta quella di oggi.
     chiuso  → pillola 220×44 a (24,22), sfondo rgba(12,14,15,.5), raggio 6px, blur(10px)
     aperto  → 300×176, voci alte 40px con passo 44 (y 66 / 110 / 154), nav a x=28 larga 292
     logo    → immagine 20×20 a x=40 + testo "expy" a x=66, Plus Jakarta Sans 15px/700, -.02em
     burger  → 2 linee 16×1 a x=214, y 41 e 46, rgba(255,255,255,.6)                          */

.xh {
  position: fixed; left: 24px; top: 22px; z-index: 70;
  width: 220px; height: 44px;
  background: rgba(12, 14, 15, .5);
  border-radius: 6px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: rgba(11, 7, 30, .1) 0 10px 30px 0;
  overflow: hidden;
  /* la pillola cresce verso il basso quando il menu si apre */
  transition: width .42s cubic-bezier(.22, 1, .36, 1), height .42s cubic-bezier(.22, 1, .36, 1);
}
.xh.open { width: 300px; height: 176px; }

/* ── riga superiore: logo + burger ── */
.xh-bar { position: relative; height: 44px; }

.xh-logo {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  display: block; height: 20px; padding-left: 26px;
  font-family: 'Plus Jakarta Sans', 'Switzer', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 20px;
  color: #fff; text-decoration: none; text-transform: none; white-space: nowrap;
}
.xh-logo::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  background: url(/logo-expy.png) center/contain no-repeat;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.xh-logo { transition: opacity .2s ease; }
.xh-logo:hover { opacity: .72; }
.xh-logo:hover::before { transform: translateY(-50%) rotate(-18deg); }

/* ── burger: due linee che diventano una X ── */
/* Riquadro 36×36 a 4px dal bordo destro: e' la misura dell'originale (x 204 su una pillola che
   finisce a 244 sul desktop, x 128 su una che finisce a 168 su mobile). Prima era 32 largo a 14
   dal bordo, quindi il burger cadeva 6px piu' a sinistra del suo posto. */
.xh-burger {
  position: absolute; right: 4px; top: 4px; height: 36px; width: 36px;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.xh-burger span {
  display: block; width: 16px; height: 1px; background: rgba(255, 255, 255, .6);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.xh.open .xh-burger span:first-child { transform: translateY(2.5px) rotate(45deg); }
.xh.open .xh-burger span:last-child  { transform: translateY(-2.5px) rotate(-45deg); }
.xh-burger:hover span { background: rgba(255, 255, 255, .9); }

/* ── pannello del menu ── */
.xh-nav {
  position: absolute; left: 4px; top: 44px; width: 292px;
  opacity: 0; pointer-events: none; transition: opacity .28s ease .06s;
}
.xh.open .xh-nav { opacity: 1; pointer-events: auto; }

/* Voci: misure rilevate sull'originale (/home-framer, getComputedStyle 2026-08-08):
   Switzer 12px/300, letter-spacing .25px, testo #fff a 14px dal bordo riga, e ogni riga
   ha il SUO fondo scuro sempre visibile rgba(12,14,15,.5) r4 (non solo in hover). */
.xh-nav a, .xh-nav span {
  display: flex; align-items: center; height: 40px; padding: 0 14px; margin-bottom: 4px;
  font-family: 'Switzer', 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 300; letter-spacing: .25px; text-transform: uppercase;
  color: #fff; text-decoration: none; white-space: nowrap;   /* l'originale non manda mai a capo */
  background: rgba(12, 14, 15, .5);
  border-radius: 4px;
  transition: background-color .25s ease, opacity .25s ease;
}
.xh-nav a:hover { background: rgba(12, 14, 15, .75); }
.xh-nav a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .55);   /* mai l'outline blu di sistema */
}
/* EMAIL + INSTAGRAM esistono solo nel menu mobile (l'originale ha 5 voci ≤640px, 3 su desktop) */
.xh-nav .xh-mob { display: none; }
/* INSTAGRAM = segnaposto spento, stessa resa della .cc-ig nella chip social */
.xh-nav .xh-dim { opacity: .32; cursor: default; }

/* ── mobile: riallineato all'originale (misurato su /home-framer il 2026-08-08) ──
   L'originale su mobile NON si allarga mai: pillola 144×44 a (24,22), e all'apertura resta
   larga 144 e cresce solo in altezza (263 = 44 + 5 righe a passo 44), voci larghe 136 a x=28.
   Le voci mobile sono CINQUE: alle tre di desktop si aggiungono EMAIL e INSTAGRAM (che
   rimpiazzano la chip social #cc-social, nascosta da mobile.css proprio per questo). */
@media (max-width: 640px) {
  .xh { left: 24px; top: 22px; width: 144px; }
  .xh.open { width: 144px; height: 263px; }
  .xh-nav { width: 136px; }
  .xh-nav .xh-mob { display: flex; }
  /* mobile.css (riga ~28) azzera il padding di `nav a:hover` con !important per domare il
     wobble della nav Framer: qui il padding va difeso, o al tap l'etichetta salta di 14px.
     Specificità maggiore (.xh-nav a:hover) → vince questa. */
  .xh-nav a, .xh-nav a:hover, .xh-nav a.hover { padding: 0 14px !important; }
}