/* Menu overlay, sottomenu e footer legale: condivisi identici tra index/servizio/parliamone.
   Centralizzato per evitare che le 3 pagine si disallineino nel tempo (prima erano copiate
   in style.css, servizio.css, parliamone.css separatamente). */
.overlay{position:fixed;inset:0;z-index:40;background:rgba(8,8,8,.97);backdrop-filter:blur(4px);display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:6px;opacity:0;pointer-events:none;transition:opacity .4s}
.overlay.open{opacity:1;pointer-events:auto}
.overlay a{font-family:var(--geo);font-weight:600;text-transform:uppercase;text-decoration:none;color:#2f2f2f;font-size:clamp(34px,6.5vw,92px);line-height:1.04;transition:color .25s,padding-left .25s;display:flex;gap:20px;align-items:baseline}
.overlay a .oi{font-family:var(--mono);font-size:13px;color:rgba(237,237,234,.3)}
.overlay a:hover{color:#EDEDEA;padding-left:14px}.overlay a.cta{color:var(--red)}
.overlay .close{position:absolute;top:20px;right:38px;cursor:pointer;background:none;border:none;color:#EDEDEA;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.overlay .close .plus{color:var(--red);display:inline-block;transform:rotate(45deg)}

/* sottomenu (Ecosistema 4.0, Servizi): desktop a lato con hover+ritardo (vedi capitolo1.js/servizio.js),
   mobile ad accordion sotto la voce, aperto dal pulsante [+] dedicato. parliamone.html non ha
   sottomenu: queste regole restano semplicemente inutilizzate lì, nessun effetto. */
.menuItem{position:relative;display:flex;align-items:baseline;gap:16px}
.menuItem .menuMain{flex:0 0 auto}
.menuToggle{display:none}
/* position:fixed ancorato a destra (non left:100% del link): "Ecosistema 4.0"/"Servizi" hanno larghezza
   di testo molto variabile (dipende da vw, lingua, zoom) — ancorare a destra della finestra invece che
   al bordo destro del testo evita che il pannello finisca fuori viewport sugli schermi più stretti.
   Il top esatto (allineato alla voce sotto il mouse) è impostato da JS in capitolo1.js/servizio.js */
.overlay .submenu{position:fixed;right:16vw;top:0;
  display:flex;flex-direction:column;gap:16px;opacity:0;pointer-events:none;
  transition:opacity .25s ease;white-space:nowrap;text-align:right}
.menuItem.open .submenu{opacity:1;pointer-events:auto}
.overlay .submenu a{font-family:var(--mono);font-size:20px;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(237,237,234,.5);text-decoration:none;
  transition:color .2s ease,padding-left .2s ease}
.overlay .submenu a:hover{color:#EDEDEA;padding-left:8px}

/* max-width:820px, (hover:none), (pointer:coarse): non solo schermi stretti — un dispositivo touch
   (es. iPad Pro verticale, 834px largo) va in accordion a qualunque larghezza, altrimenti il pannello
   proverebbe comunque a comparire come riquadro laterale fisso pensato per il mouse (il suo
   posizionamento verticale è calcolato solo dentro l'evento mouseenter, che sul touch non scatta mai) */
@media (max-width:820px), (hover:none), (pointer:coarse){
  .menuItem{flex-wrap:wrap}
  .menuToggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;
    cursor:pointer;margin-left:auto;transition:transform .25s ease}
  .menuToggle .plus{color:var(--red)}
  .menuItem.open .menuToggle{transform:rotate(45deg)}
  .overlay .submenu{position:static;left:auto;right:auto;top:auto;text-align:left;flex-basis:100%;
    width:100%;max-height:0;overflow:hidden;opacity:1;pointer-events:auto;
    transition:max-height .35s ease,margin-top .35s ease}
  .menuItem.open .submenu{max-height:420px;margin-top:14px}
  /* spazio dopo l'accordion aperto: senza, la prossima voce di menu arrivava subito attaccata
     all'ultima riga del sottomenu, col solo gap:6px del menu principale */
  .menuItem.open{margin-bottom:28px}
  .overlay .submenu a{font-size:clamp(15px,3.6vw,22px)}
}

/* opacità .32->.5: su nero il bianco risultante faceva 2.57:1, il peggiore tra i contrasti rilevati
   da Lighthouse (soglia AA 4.5:1). Dal 2026-09-16 Privacy/Cookie nel footer sono link veri
   (privacy.html, cookie-policy.html + "Preferenze cookie" che apre il pannello di js/cookie-consent.js):
   la classe resta solo per compatibilità con eventuali testi statici futuri */
.footerLegalStatic{cursor:default;color:rgba(237,237,234,.5)}

/* anello di focus da tastiera: solo il colore del brand al posto di quello generico del
   browser — :focus-visible (non :focus) mostra l'anello solo a chi naviga con Tab, non al click */
:focus-visible{outline:2px solid var(--red);outline-offset:3px}