@charset "utf-8";
/* === Mobile e accessibilità (27/10/2026) ===
   Foglio caricato DOPO style.css in ogni pagina.
   In cima: regole di accessibilità valide a ogni larghezza.
   Poi: tablet e telefono (sotto 64rem) e solo telefono (sotto 48rem).
   A 1280 px il sito resta com'era (salvo focus e contrasti, vedi docs/ACCESSIBILITA.md). */

/* 2.4.1 Salto di blocchi: link «Salta al contenuto», fuori schermo finché non riceve il focus */
.skip-link{position:absolute;left:0.5rem;top:-10rem;z-index:100;padding:0.75rem 1rem;background:#0a4a8f;color:#fff;font-weight:700;border-radius:0 0 0.375rem 0.375rem}
.skip-link:focus{top:0;text-decoration:none}
#contenuto{scroll-margin-top:8rem}

/* 2.4.7 Focus visibile: contorno blu su fondo chiaro, bianco su fondo scuro */
:focus-visible{outline:0.1875rem solid #0a4a8f;outline-offset:0.125rem}
.hero :focus-visible,.ft :focus-visible{outline-color:#fff}

/* 1.4.3 Contrasto (calcolato) */
/* contatti: e-mail arancione #ee9102 su bianco = 2,42:1 -> #a65f00 = 4,93:1 */
.prose a[style*="ee9102"]{color:#a65f00 !important}
/* formazione: «Documentazione» #1f2933 su #f84545 = 4,17:1 -> nero = 5,93:1 */
.prose p[style*="f84545"]{color:#000}
/* home: «Tutte le news» al passaggio del mouse diventava bianco su #f5f8fb (1,07:1) -> bianco su blu = 8,79:1 */
.band .btn:hover,.band .btn:focus-visible{background:var(--b);border-color:var(--b);color:#fff}

/* Pulsante del menu: nascosto sopra il punto di rottura e quando il JavaScript non parte */
.menu-toggle{display:none}

/* ---------- Tablet e telefono (sotto 1024 px) ---------- */
@media (max-width:63.99rem){
  /* 2.5.5 Bersagli di almeno 44x44 px (2.75rem) */
  .brand{display:inline-block;line-height:2.75rem}
  .hd nav a{display:inline-flex;align-items:center;min-height:2.75rem}
  .ft a{display:inline-block;min-height:2.75rem;line-height:2.75rem}
  .prose li>a,.prose td>a{display:inline-block;min-width:2.75rem;padding-top:0.625rem;padding-bottom:0.625rem}
  /* link da soli in un paragrafo: area cliccabile più alta senza spostare il testo */
  .prose p>a:only-child{padding-top:0.75rem;padding-bottom:0.75rem}
  /* formazione, area riservata del vecchio sito: link «Esci» (resta com'è, solo più grande) */
  .prose p>a[href$="logout.php"]{display:inline-block;min-width:2.75rem;min-height:2.75rem;line-height:2.75rem;padding-top:0;padding-bottom:0}
  .gallery a{display:inline-block;max-width:100%}
  .prose input[type="text"],.prose input[type="password"]{min-height:2.75rem;max-width:100%;padding:0.5rem;font-size:1rem}
  .prose input[type="radio"]{width:2.75rem;height:2.75rem;margin:0 0.5rem 0 0;vertical-align:middle}
  .prose input[type="radio"]+label{display:inline-flex;align-items:center;min-height:2.75rem;margin-right:1rem}

  /* Testo leggibile: niente sotto 14 px, testo corrente a 16 px */
  .hero .kick,.news-mini span,.news-card .news-date,.cp{font-size:0.875rem}
  .card p,.fg{font-size:1rem}
  /* caratteri fissati in pagina (12, 13,3 e 14,7 px, 11 pt) */
  .prose [style*="font-size:12"],.prose [style*="font-size: 11.0pt"],.prose [style*="font-size: 14.6667"],.prose [style*="font-size: 13.3333"]{font-size:1rem !important}

  /* Archivio news: margine laterale come il resto del sito */
  .news-archive{padding-left:1.375rem;padding-right:1.375rem}
}

/* ---------- Solo telefono (sotto 768 px) ---------- */
@media (max-width:47.99rem){
  /* 1.4.10 Riflusso: margini più stretti, niente scorrimento orizzontale */
  .wrap,.news-archive{padding-left:1rem;padding-right:1rem}
  .prose,.news-card{overflow-wrap:break-word}
  .prose [style*="justify"]{text-align:left !important}

  /* Testata: non resta fissa in alto, marchio su due righe, pulsante «Menu» */
  .hd{position:static}
  .bar{padding:0.5rem 1rem;gap:0.5rem}
  .brand{display:inline-flex;flex-direction:column;justify-content:center;min-height:2.75rem;line-height:1.15}
  .brand span{margin-left:0}
  .js-menu .menu-toggle{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.75rem;min-width:2.75rem;margin:0;padding:0 0.875rem;font:inherit;font-size:1rem;font-weight:700;line-height:1;color:var(--b);background:#fff;border:0.125rem solid var(--b);border-radius:0.375rem;cursor:pointer}
  .js-menu .menu-toggle::before{content:"";width:1.125rem;height:0.875rem;background:linear-gradient(currentColor,currentColor) 0 0/100% 0.125rem no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 0.125rem no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 0.125rem no-repeat}
  .js-menu .menu-toggle[aria-expanded="true"]{color:#fff;background:var(--b)}

  /* Menu: voci una sotto l'altra; con il JS è chiuso finché non si preme «Menu» e, aperto, spinge giù la pagina */
  .hd nav{flex-direction:column;gap:0.25rem;width:100%;padding-bottom:0.5rem}
  .hd nav a{display:flex;font-size:1rem;padding:0.5rem 0.75rem}
  .js-menu .hd nav{display:none}
  .js-menu .menu-toggle[aria-expanded="true"]+nav{display:flex}

  /* Home */
  .hero{padding:3rem 0}
  .hero h1{font-size:1.875rem}
  .cards4{padding-top:2.5rem;padding-bottom:2.5rem}
  .band{padding:2.5rem 0}
  .pagehead{padding:2rem 0}

  /* News: le card non escono dallo schermo, la foto va sopra il testo a tutta larghezza */
  .news-card{min-width:0;padding:1rem}
  .news-card img{float:none;max-width:100%;margin:0 0 0.75rem}

  /* Tabelle larghe: scorrono dentro il proprio riquadro (già in style.css), celle più compatte */
  .prose td,.prose th{padding:0.375rem}
  .prose input[type="text"],.prose input[type="password"]{width:100%}
  /* formazione: una coppia pulsante radio + etichetta per riga, così l'etichetta non va a capo da sola */
  .prose input[type="radio"]+label{width:calc(100% - 4rem);margin-right:0}
}