/* ==========================================================================
   Corsi di educazione sanitaria – Croce Rossa Italiana, Comitato di Bassano del Grappa
   Foglio di stile unico, senza strumenti di build.
   Segue il design system "CRI Bassano del Grappa" (Manuale di comunicazione
   istituzionale CRI 2017): un solo rosso, testi in Arial, nero e grigio per i testi,
   fondi chiari, tutto squadrato. Contrasti WCAG 2.1 AA:
   - rosso-cri #CC0000 su bianco: 5,9:1 · bianco su rosso-cri: 5,9:1
   - grigio-60 #666666 su bianco: 5,7:1 · nero su bianco: 21:1
   ========================================================================== */

:root {
  /* Token del design system */
  --rosso-cri: #CC0000;          /* Pantone 485 · CMYK 0/100/100/0: unico rosso */
  --bianco: #FEFEFE;
  --nero: #000000;
  --grigio-60: #666666;          /* nero al 60%: testi secondari */
  --superficie: #FFFFFF;
  /* Nomi usati nel resto del foglio */
  --cri-rosso: var(--rosso-cri);
  --testo: var(--nero);
  --grigio-600: var(--grigio-60);
  /* Grigi neutri solo per bordi e fondi chiari (non sono colori del marchio) */
  --grigio-50: #F6F6F6;
  --grigio-100: #EEEEEE;
  --grigio-200: #DDDDDD;
  --grigio-400: #8C8C8C;         /* bordi dei campi: 3,4:1 su bianco */
  --grigio-800: #333333;
  --raggio: 0;                   /* radius-nessuno */
  --linea: 3px;                  /* spessore della linea rossa istituzionale */
  --larghezza: 1180px;
  --font: Arial, "Arimo", "Helvetica Neue", Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; } /* 18px: leggibile per tutti */
body { margin: 0; font-family: var(--font); color: var(--testo); background: var(--superficie); line-height: 1.5; text-align: left; }
img { max-width: 100%; height: auto; }
a { color: var(--cri-rosso); text-underline-offset: 3px; }
a:hover { color: var(--nero); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; color: var(--testo); font-weight: 700; }
/* Titolo di pagina: maiuscolo in rosso-cri, come i titoli di capitolo del manuale */
h1 { color: var(--rosso-cri); text-transform: uppercase; line-height: 1.1; }
h1 { font-size: 2rem; }
h2 { font-size: 1.33rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--grigio-200); margin: 2rem 0; }

/* Focus ben visibile per chi naviga da tastiera */
:focus-visible { outline: 3px solid var(--nero); outline-offset: 2px; box-shadow: 0 0 0 5px var(--superficie); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.salta-contenuto { position: absolute; left: -9999px; top: 0; background: var(--testo); color: var(--bianco); padding: .7rem 1rem; z-index: 100; }
.salta-contenuto:focus { left: 1rem; top: 1rem; color: var(--bianco); }

.contenitore { max-width: var(--larghezza); margin: 0 auto; padding: 0 1.25rem; }
.sezione { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.sezione-grigia { background: var(--grigio-50); }
.testo-secondario { color: var(--grigio-600); }
.piccolo { font-size: .88rem; }
.centrato { text-align: center; }
.flex { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.tra { justify-content: space-between; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }

/* ---------- Intestazione ---------- */
.intestazione { background: var(--superficie); border-bottom: var(--linea) solid var(--cri-rosso); position: sticky; top: 0; z-index: 50; }
.intestazione .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; }
.marchio { display: flex; align-items: center; text-decoration: none; padding: 14px 0; /* area di rispetto del marchio */ }
.marchio img { display: block; height: 56px; width: auto; }
.menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: .55rem .8rem; text-decoration: none; color: var(--testo); font-weight: 700; border-bottom: var(--linea) solid transparent; }
.menu a:hover { color: var(--cri-rosso); }
.menu a[aria-current="page"] { color: var(--cri-rosso); border-bottom-color: var(--cri-rosso); }
.menu .bottone { margin-left: .5rem; }
.menu form { margin: 0; }
.menu-apri { display: none; background: none; border: 2px solid var(--grigio-400); padding: .5rem .7rem; font: inherit; font-weight: 700; color: var(--testo); cursor: pointer; }

@media (max-width: 900px) {
  .marchio img { height: 42px; } /* orizzontale: oltre i 2 cm minimi */
  .menu-apri { display: inline-flex; align-items: center; gap: .4rem; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bianco); flex-direction: column; align-items: stretch; padding: .75rem 1.25rem 1.25rem; border-bottom: var(--linea) solid var(--cri-rosso); }
  .menu.aperto { display: flex; }
  .menu a { padding: .8rem; font-size: 1.05rem; border-bottom: 0; }
  .menu a[aria-current="page"] { background: var(--grigio-50); }
  .menu .bottone { margin: .5rem 0 0; text-align: center; }
}

/* ---------- Pulsanti ---------- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; padding: .65rem 1.25rem; border-radius: 0; border: 2px solid var(--cri-rosso); background: var(--cri-rosso); color: var(--bianco) !important; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; }
.bottone:hover { background: var(--superficie); color: var(--cri-rosso) !important; }
.bottone-secondario { background: var(--superficie); color: var(--cri-rosso) !important; }
.bottone-secondario:hover { background: var(--cri-rosso); color: var(--bianco) !important; }
.bottone-neutro { background: var(--superficie); color: var(--testo) !important; border-color: var(--nero); }
.bottone-neutro:hover { background: var(--nero); color: var(--bianco) !important; }
.bottone-bianco { background: var(--bianco); color: var(--cri-rosso) !important; border-color: var(--bianco); }
.bottone-bianco:hover { background: var(--cri-rosso); color: var(--bianco) !important; }
.bottone-piccolo { min-height: 38px; padding: .35rem .8rem; font-size: .88rem; }
.bottone-largo { width: 100%; }
.bottone[disabled], .bottone.disabilitato { background: var(--grigio-200); border-color: var(--grigio-200); color: var(--grigio-600) !important; cursor: not-allowed; }
.link-bottone { background: none; border: 0; padding: 0; font: inherit; color: var(--cri-rosso); text-decoration: underline; cursor: pointer; }

/* ---------- Fascia rossa (hero) ---------- */
.fascia { background: var(--cri-rosso); color: var(--bianco); }
.fascia h1, .fascia h2, .fascia p { color: var(--bianco); }
.fascia a:not(.bottone) { color: var(--bianco); }
.hero { padding: 3.5rem 0; }
.hero .contenitore { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: 2.3rem; }
.hero p { font-size: 1.12rem; max-width: 38em; }
.hero-logo { justify-self: center; padding: 1rem; }
.hero-logo img { display: block; width: 220px; height: auto; }
@media (max-width: 800px) {
  .hero .contenitore { grid-template-columns: 1fr; }
  .hero-logo { display: none; }
  .hero h1 { font-size: 1.8rem; }
}
.intestazione-pagina { background: var(--grigio-50); border-bottom: 1px solid var(--grigio-200); padding: 2rem 0 1.5rem; }
.intestazione-pagina h1 { margin-bottom: .3rem; font-size: 1.9rem; }
.briciole { font-size: .88rem; color: var(--grigio-600); margin-bottom: .5rem; }
.briciole a { color: var(--grigio-600); }

/* ---------- Griglie e schede ---------- */
.griglia { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.griglia-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.scheda { background: var(--superficie); border: 1px solid var(--grigio-200); overflow: hidden; display: flex; flex-direction: column; }
.scheda-corpo { padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.scheda h3 { margin: 0; font-size: 1.12rem; }
.scheda h3 a { color: var(--testo); text-decoration: none; }
.scheda h3 a:hover { color: var(--cri-rosso); text-decoration: underline; }
.scheda-immagine { aspect-ratio: 16/9; background: var(--grigio-50); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scheda-immagine img { width: 100%; height: 100%; object-fit: cover; }
.scheda { border-top: var(--linea) solid var(--cri-rosso); }
.scheda-piede { padding: 0 1.25rem 1.15rem; }
.dati-edizione { list-style: none; margin: 0; padding: 0; font-size: .92rem; display: grid; gap: .3rem; }
.dati-edizione li { display: flex; gap: .5rem; align-items: flex-start; }
.dati-edizione svg { flex: 0 0 auto; margin-top: .2rem; color: var(--grigio-600); }

.categoria-tile { display: flex; gap: 1rem; align-items: center; padding: 1.15rem; border: 1px solid var(--grigio-200); background: var(--superficie); text-decoration: none; color: var(--testo); }
.categoria-tile:hover { border-color: var(--cri-rosso); color: var(--testo); }
.categoria-tile .icona-tondo { flex: 0 0 52px; height: 52px; background: var(--grigio-50); display: flex; align-items: center; justify-content: center; color: var(--cri-rosso); overflow: hidden; }
.categoria-tile .icona-tondo img { width: 100%; height: 100%; object-fit: cover; }
.categoria-tile strong { display: block; font-size: 1.05rem; color: var(--nero); }
.categoria-tile span { font-size: .88rem; color: var(--grigio-600); }

.etichetta-categoria { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--grigio-60); }

/* ---------- Indicatori di disponibilità ----------
   Solo rosso, nero e grigio: gli stati si distinguono per riempimento (pieno, bordo, grigio)
   e sono sempre scritti a parole, mai affidati al solo colore. */
.badge { display: inline-flex; align-items: center; padding: .2rem .6rem; font-size: .84rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.badge-disponibili, .badge-confermata { background: var(--superficie); color: var(--nero); border-color: var(--nero); }
.badge-ultimi, .badge-attesa { background: var(--superficie); color: var(--cri-rosso); border-color: var(--cri-rosso); }
.badge-completo { background: var(--cri-rosso); color: var(--bianco); border-color: var(--cri-rosso); }
.badge-presente { background: var(--nero); color: var(--bianco); border-color: var(--nero); }
.badge-chiuse, .badge-annullata, .badge-neutro, .badge-assente { background: var(--grigio-100); color: var(--grigio-800); border-color: var(--grigio-200); }

/* ---------- Avvisi ---------- */
.avviso { padding: 1rem 1.15rem; margin-bottom: 1.25rem; border: 1px solid var(--grigio-200); border-top: var(--linea) solid var(--grigio-60); background: var(--grigio-50); }
.avviso-successo { border-top-color: var(--nero); }
.avviso-errore { border-top-color: var(--cri-rosso); background: var(--superficie); }
.avviso-info { border-top-color: var(--grigio-60); }
.avviso-attenzione { border-top-color: var(--cri-rosso); }
.avviso ul { margin: .3rem 0 0; padding-left: 1.2rem; }

/* ---------- Moduli ---------- */
.modulo { display: grid; gap: 1.1rem; }
.modulo-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.modulo-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 700px) { .modulo-2, .modulo-3 { grid-template-columns: 1fr; } }
.campo label, .campo legend { display: block; font-weight: 700; margin-bottom: .35rem; }
.campo .aiuto { display: block; font-size: .86rem; color: var(--grigio-600); margin-top: .3rem; font-weight: 400; }
.campo .facoltativo { font-weight: 400; color: var(--grigio-600); font-size: .88rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=url], input[type=search], input[type=file], select, textarea {
  width: 100%; font: inherit; color: var(--testo); background: var(--bianco); border: 2px solid var(--grigio-400); border-radius: 0; padding: .6rem .75rem; min-height: 48px;
}
input[type=color] { width: 70px; height: 48px; border: 2px solid var(--grigio-400); padding: 2px; background: var(--superficie); }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--testo); }
.campo-errore input, .campo-errore select, .campo-errore textarea { border-color: var(--cri-rosso); }
.errore { color: var(--cri-rosso); font-size: .9rem; font-weight: 600; margin-top: .3rem; display: block; }
.scelta { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
.scelta input { width: 22px; height: 22px; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--cri-rosso); }
fieldset { border: 0; padding: 0; margin: 0; }
.riquadro { background: var(--superficie); border: 1px solid var(--grigio-200); padding: 1.5rem; }
.riquadro + .riquadro { margin-top: 1.5rem; }
.riquadro-stretto { max-width: 560px; margin: 0 auto; }
.campo-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pagina di accesso con logo verticale ---------- */
.pagina-accesso { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 88px); }
.pagina-accesso .lato-logo { background: var(--grigio-50); display: flex; align-items: center; justify-content: center; padding: 3rem; border-right: 1px solid var(--grigio-200); }
.pagina-accesso .lato-logo img { width: 280px; height: auto; }
.pagina-accesso .lato-modulo { padding: 3rem 1.5rem; display: flex; align-items: center; }
.pagina-accesso .lato-modulo > div { width: 100%; max-width: 520px; margin: 0 auto; }
@media (max-width: 900px) {
  .pagina-accesso { grid-template-columns: 1fr; }
  .pagina-accesso .lato-logo { padding: 1.5rem; border-right: 0; border-bottom: 1px solid var(--grigio-200); }
  .pagina-accesso .lato-logo img { width: 160px; }
}

/* ---------- Filtri catalogo ---------- */
.filtri { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1fr auto; gap: .8rem; align-items: end; background: var(--superficie); padding: 1.15rem; border: 1px solid var(--grigio-200); }
.filtri label { font-weight: 700; font-size: .9rem; display: block; margin-bottom: .25rem; }
@media (max-width: 960px) { .filtri { grid-template-columns: 1fr 1fr; } .filtri .campo-cerca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .filtri { grid-template-columns: 1fr; } }

/* ---------- Dettaglio corso ---------- */
.dettaglio { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2.5rem; align-items: start; }
.dettaglio .colonna-laterale { position: sticky; top: 110px; }
@media (max-width: 960px) { .dettaglio { grid-template-columns: 1fr; } .dettaglio .colonna-laterale { position: static; } }
.contenuto-ricco h2 { font-size: 1.3rem; margin-top: 1.6rem; }
.contenuto-ricco ul, .contenuto-ricco ol { padding-left: 1.4rem; }
.contenuto-ricco blockquote { border-left: var(--linea) solid var(--cri-rosso); margin: 1rem 0; padding: .3rem 1rem; font-style: italic; }
.blocco-info { border-top: 1px solid var(--grigio-200); padding: 1.1rem 0; }
.blocco-info h2 { font-size: 1.1rem; margin-bottom: .4rem; }
.edizione { border: 1px solid var(--grigio-200); padding: 1.15rem 1.25rem; background: var(--superficie); display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.edizione + .edizione { margin-top: 1rem; }
.edizione h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.edizione .incontri { margin: .3rem 0; padding-left: 1.1rem; font-size: .95rem; }
.edizione .azioni-edizione { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; min-width: 190px; }
@media (max-width: 640px) { .edizione { grid-template-columns: 1fr; } }
.allegati { list-style: none; padding: 0; margin: 0; }
.allegati li { padding: .45rem 0; }

/* ---------- Calendario ---------- */
.calendario { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--superficie); }
.calendario th { padding: .5rem; background: var(--grigio-100); font-size: .88rem; text-transform: uppercase; }
.calendario td { border: 1px solid var(--grigio-200); vertical-align: top; height: 120px; padding: .35rem; }
.calendario td.fuori { background: var(--grigio-50); color: var(--grigio-400); }
.calendario td.oggi .num { background: var(--cri-rosso); color: var(--bianco); }
.calendario .num { display: inline-flex; width: 1.9em; height: 1.9em; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.calendario .evento { display: block; font-size: .78rem; line-height: 1.3; padding: .25rem .4rem; margin-top: .25rem; text-decoration: none; background: var(--grigio-50); color: var(--testo); border: 1px solid var(--grigio-200); }
.calendario .evento:hover { border-color: var(--cri-rosso); color: var(--cri-rosso); }
.calendario-lista { display: none; }
@media (max-width: 760px) {
  .calendario { display: none; }
  .calendario-lista { display: block; }
}
.giorno-lista { border-bottom: 1px solid var(--grigio-200); padding: .8rem 0; }
.giorno-lista h3 { font-size: 1rem; margin-bottom: .4rem; }

/* ---------- Tabelle ---------- */
.tabella-wrap { overflow-x: auto; border: 1px solid var(--grigio-200); background: var(--superficie); }
.tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella th, .tabella td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--grigio-200); vertical-align: middle; }
.tabella th { background: var(--grigio-50); font-weight: 700; white-space: nowrap; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tr.riga-annullata td { color: var(--grigio-600); background: var(--grigio-50); }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella form { display: inline; margin: 0; }

/* ---------- Area personale ---------- */
.schede-account { display: flex; gap: .5rem; border-bottom: 2px solid var(--grigio-200); margin-bottom: 1.5rem; flex-wrap: wrap; }
.schede-account a { padding: .7rem 1rem; text-decoration: none; font-weight: 700; color: var(--grigio-800); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.schede-account a[aria-current="page"] { color: var(--cri-rosso); border-color: var(--cri-rosso); }
.iscrizione-riga { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.15rem 1.25rem; border: 1px solid var(--grigio-200); background: var(--superficie); }
.iscrizione-riga + .iscrizione-riga { margin-top: .9rem; }
.iscrizione-riga .azioni { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
@media (max-width: 640px) { .iscrizione-riga { grid-template-columns: 1fr; } }

/* ---------- Piè di pagina ---------- */
.pie { background: var(--cri-rosso); color: var(--bianco); margin-top: 3rem; }
.pie a { color: var(--bianco); }
.pie .contenitore { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2rem; }
.pie h2 { color: var(--bianco); font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .35rem; }
.pie .logo-pie { padding: 8px 0 16px; display: inline-block; }
.pie .logo-pie img { display: block; height: 52px; width: auto; }
.pie-fondo { border-top: 1px solid rgba(255,255,255,.35); padding: 1rem 0; font-size: .85rem; }
@media (max-width: 800px) { .pie .contenitore { grid-template-columns: 1fr; } }

/* ---------- Paginazione ---------- */
.paginazione { display: flex; gap: .35rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.paginazione a, .paginazione span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--grigio-200); text-decoration: none; padding: 0 .7rem; }
.paginazione .attuale span { background: var(--cri-rosso); color: var(--bianco); border-color: var(--cri-rosso); font-weight: 700; }

/* ---------- Banner cookie ---------- */
.banner-cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 720px; margin: 0 auto; background: var(--superficie); border: 2px solid var(--testo); border-top: 6px solid var(--cri-rosso); padding: 1.15rem; z-index: 200; }
.banner-cookie[hidden] { display: none; }

/* ---------- Editor di testo formattato (pannello) ---------- */
.editor { border: 2px solid var(--grigio-400); background: var(--superficie); }
.editor-barra { display: flex; gap: .25rem; flex-wrap: wrap; padding: .4rem; border-bottom: 1px solid var(--grigio-200); background: var(--grigio-50); }
.editor-barra button { font: inherit; font-size: .85rem; min-width: 36px; min-height: 34px; border: 1px solid var(--grigio-200); background: var(--superficie); cursor: pointer; }
.editor-barra button:hover { background: var(--grigio-100); }
.editor-area { min-height: 220px; padding: .8rem 1rem; outline: none; }
.editor-area:focus { box-shadow: inset 0 0 0 2px var(--testo); }

@media print {
  .intestazione, .pie, .banner-cookie, .menu-apri, .bottone { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }