/* ===========================================================
   a11y.css — accessibilità + rifiniture (caricato per ULTIMO)
   Additivo: solo aggiunte, nessuna modifica alla logica esistente.
   Mobile-first: i touch target si attivano sotto i 920px.
   =========================================================== */

/* ---- 1. FOCUS VISIBILE su tutti gli interattivi (navigazione da tastiera) ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav-cta:focus-visible, .lang-btn:focus-visible, .nav-toggle:focus-visible,
.contact-email:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--azure,#22d3ee);
  outline-offset:3px;
  border-radius:6px;
}

/* ---- 2. SKIP-LINK: salta la navbar (visibile solo al focus da tastiera) ---- */
.skip-link{position:fixed;left:-9999px;top:0;z-index:1000;
  background:var(--azure,#22d3ee);color:#02121a;padding:11px 18px;border-radius:0 0 10px 0;
  font-weight:700;font-family:var(--mono,monospace);font-size:.85rem;text-decoration:none}
.skip-link:focus{left:0}

/* ---- 4. CONTRASTO: testo piccolo/legale piu' leggibile sopra le sezioni traslucide ---- */
.disclaimer p, .disclaimer h5{color:var(--txt-2)!important}
.chart3d-note, .res-caveat, .cfg-sub, .chart3d-legend{color:var(--txt-2)!important}

/* ---- 5. REDUCED-MOTION: completa le guardie CSS mancanti (il JS gia' le rispetta) ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- 6. heading callout come h3 (gerarchia corretta) ma aspetto identico all'h2 ---- */
.callout h3{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.03em;font-weight:700;
  font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;margin-bottom:14px;color:var(--txt)}

/* ---- 7. FIX accavallamento: il wrap del grafico cresce per contenere legenda+nota,
        il canvas mantiene l'altezza fissa (cosi' la nota non deborda sulla sezione dopo) ---- */
#results .chart3d-wrap, #results-gold .chart3d-wrap, #results-systemb .chart3d-wrap{height:auto}
#chart3d, #chart3d-gold, #chart3d-systemb{height:440px}
@media(max-width:600px){ #chart3d, #chart3d-gold, #chart3d-systemb{height:300px} }

/* ---- 3. NAV: toggle IT/EN fuori dal menu (accanto all'hamburger su mobile) + touch target >=44px ---- */
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-links{margin-left:auto}                  /* desktop: link + azioni raggruppati a destra (no-op su mobile: nav-links e' absolute) */
@media(min-width:921px){ .nav-actions{margin-left:6px} }
@media(max-width:920px){
  .nav-toggle{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;line-height:1}
  .nav-actions .lang-toggle{margin:0!important;align-self:center}   /* annulla il margin-top del vecchio layout in-menu */
  .lang-btn{min-height:44px;min-width:44px;padding:8px 12px}
  .nav-links a{min-height:44px;display:flex;align-items:center}
}
@media(max-width:420px){          /* schermi piccoli: evita overflow con IT/EN + hamburger */
  .logo-text{font-size:.92rem}
  .logo-mark{width:30px;height:30px;font-size:.85rem}
  .nav-actions{gap:7px}
  .lang-btn{min-width:42px;padding:8px 10px}
}