/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Design tokens ---- */
:root {
  --c-primary:     #1a5276;
  --c-secondary:   #2e86c1;
  --c-accent:      #5dade2;
  --c-dark:        #1c2833;
  --c-gray:        #7f8c8d;
  --c-light-gray:  #bdc3c7;
  --c-bg-light:    #f4f6f8;
  --c-bg-mid:      #e5e8eb;
  --c-border:      #edf0f2;
  --c-red:         #e74c3c;
  --c-orange:      #f39c12;
  --c-green:       #2ecc71;
  /* Accento del Figma da agosto 2026. Nome distinto da --c-accent (#5dade2,
     l'azzurro chiaro gia' in uso) e da --c-green (#2ecc71, il verde di stato
     aperto/completato/check): sono tre colori diversi con tre ruoli diversi. */
  --c-accent-green: #80bd1b;
  --c-footer-mid:  #154763;
  --c-footer-dark: #0f3a55;
  --f:             'Asap Condensed', sans-serif;
  --max:           1440px;
}

html, body {
  font-family: var(--f);
  background: #fff;
}

img { max-width: none; display: block; }

.w-inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px; left: 8px;
  width: auto; height: auto;
  clip: auto;
  background: var(--c-primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 9999;
}

.site-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Responsive mobile 2026-08-14 ----
   .contact-card e' duplicato scoped in 9 CSS di pagina istituzionale:
   la riga a due celle affiancate tagliava l'indirizzo email a 375px.
   Regola non scoped: nessuno dei 9 file dichiara flex-direction sulla
   .row, quindi non c'e' conflitto di specificita'. */
@media (max-width:767px){
  .contact-card .row{flex-direction:column}
  .contact-card .cell .val{overflow-wrap:anywhere}
}

/* ---- Responsive mobile 2026-08-14 (secondo giro) ----
   La riga "segreteria" a due celle affiancate (email + telefono) e'
   ripetuta con prefissi diversi in 6 CSS di pagina: a 375px la cella
   resta a 92px e taglia l'indirizzo email. Nessuno dei file dichiara
   flex-direction su queste righe, quindi la regola non scoped non
   entra in conflitto di specificita'. */
@media (max-width:767px){
  .cv-contact__row,.cv-segr__row,.mmc-segreteria__row,
  .wb-segreteria__row,.vg-contact__row,.sp-segreteria__row{flex-direction:column}
  .cv-contact__value,.cv-segr__value,.mmc-segreteria__val,
  .wb-segreteria__val,.vg-contact__val,.sp-segreteria__val{overflow-wrap:anywhere}
}

/* ---- Fix da revisione indipendente 2026-08-14 ----
   Sotto i 16px iOS Safari zooma la pagina quando il campo prende il
   focus, e non torna indietro. Vale per tutti i form del sito
   (14-15px prima). Selettore con `body` davanti per vincere sui CSS
   di pagina, che sono caricati dopo global.css. */
@media (max-width:767px){
  body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  body select,
  body textarea{font-size:16px}
}

/* ---- Fix da revisione indipendente 2026-08-14 (round 4) ----
   .leva__banner e' ripetuto identico in 18 CSS di pagina con
   padding:56px fisso: a 320px lasciava 128px di contenuto su 240 e il
   titolo andava su 4 righe. Regola con `body` davanti per vincere
   sui CSS di pagina, caricati dopo global.css. */
@media (max-width:767px){
  body .leva__banner,body .nw-leva__banner,body .wb-leva__banner,
  body .sp-leva__banner{padding:32px 24px;min-height:0}
}
@media (max-width:359px){
  body .leva__banner,body .nw-leva__banner,body .wb-leva__banner,
  body .sp-leva__banner{padding:24px 20px}
}


/* ---- Card "Contatta la Segreteria" (2026-10-08) ----
   L'etichetta della cella ospita ora busta e cornetta. La regola sta
   qui, senza prefisso di pagina, perché la card è identica in nove
   template e global.css porta già le altre regole .contact-card.
   L'icona è leggermente più grande dell'etichetta da 9px, altrimenti
   a quella misura non si legge. */
.contact-card .cell .lbl{display:flex;align-items:center;gap:5px}
.contact-card .cell .lbl svg{width:11px;height:11px;flex-shrink:0;display:block}

/* ---- Lucchetto «contenuto riservato» (2026-10-20) ----
   Definito una volta per tutto il sito. Prima ogni pagina si disegnava
   il suo cerchio: verde su vademecum, convenzioni e manuale, arancione
   su MC Journal, un altro accento sui bilanci, nessun cerchio nelle
   card dell'area riservata.
   Regola: cerchio pieno e lucchetto in negativo. Su fondo chiaro il
   cerchio è scuro e il lucchetto bianco; su fondo scuro si inverte con
   la variante --inverso. */
.anma-lock{
  width:36px;height:36px;flex-shrink:0;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--anma-lock-cerchio,#1a5276);
  color:var(--anma-lock-simbolo,#fff);
  font-size:18px;line-height:1;
}
.anma-lock svg{display:block}
.anma-lock--inverso{--anma-lock-cerchio:#fff;--anma-lock-simbolo:#1a5276}
/* Dentro le card e i bottoni, dove sta accanto a del testo. */
.anma-lock--sm{width:26px;height:26px;font-size:14px}

/* ---- Copertine del Journal (2026-10-20) ----
   I riquadri delle news riempiono con cover, che taglia: giusto per
   una fotografia, sbagliato per la copertina di una rivista. Qui si
   vede intera, centrata, con il resto del riquadro colorato.
   Vale solo per i post con il tag «MC Journal»: altrove il taglio
   orizzontale resta il comportamento voluto.
   La classe è doppia per alzare la specificità: deve vincere sul
   background-size dei singoli componenti, che stanno in fogli
   caricati dopo questo. Il fondo lo può cambiare il componente
   con --anma-fondo-copertina, come fa il carosello su card scura. */
.is-copertina.is-copertina{
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:var(--anma-fondo-copertina,#eaf4fb);
}

/* ---- La freccia dei pulsanti (2026-10-20) ----
   Sempre a destra del testo e sempre dentro un cerchietto: è
   l'icona del set a portarselo, così il cerchio non è un bordo CSS
   da riaccordare a ogni fondo. Prende il colore del pulsante da
   currentColor e la misura dal suo font-size, un filo più grande
   del testo perché il cerchio non sembri schiacciato. */
.anma-cta__ic{display:inline-flex;align-items:center;flex-shrink:0;font-size:1.3em;line-height:1}
.anma-cta__ic svg{display:block}

/* ---- Quanto è grande la freccia di un pulsante (2026-10-20) ----
   In rem e non in em: in em la misura la detterebbe lo span che la
   ospita, che su molte pagine è quello del vecchio glifo e vale
   13px. 1.4rem fa 22px, circa una volta e mezzo il testo dei
   pulsanti: il cerchio si legge e la freccia dentro pure. */
svg.anma-freccia{width:1.4rem;height:1.4rem;flex-shrink:0;display:block}

/* ---- Recapiti cliccabili (2026-10-20) ----
   Email e telefoni delle schede di contatto sono diventati link. La
   regola sta qui e non negli otto fogli di pagina perché il colore e
   il peso li decide già il `.val` che li contiene: al link serve solo
   smettere di avere i suoi. Si sottolinea al passaggio del mouse —
   dentro una scheda scura un cambio di colore non si vedrebbe. */
.contact-card .cell a.val,
a.vg-contact__val,
.info-strip__item a.val,
a.info-block__value{color:inherit;text-decoration:none}
.contact-card .cell a.val:hover,
a.vg-contact__val:hover,
.info-strip__item a.val:hover,
a.info-block__value:hover{text-decoration:underline}

/* ---- Fascia dei dati in testa alle pagine (2026-10-20) ----
   Quattro colonne uguali su tutta la larghezza, separate da un filetto
   verticale: la stessa fascia del Manuale MC. Prima era una fila flex
   che lasciava un quarto della fascia vuoto a destra.
   Il filetto è un'ombra interna e non un bordo, così non aggiunge
   larghezza e le colonne restano esattamente uguali. Sta a sinistra di
   ogni voce tranne la prima di ogni riga — quando le colonne diventano
   due o una, cambia la voce che apre la riga, e con lei il filetto. */
.info-strip{display:grid;grid-template-columns:repeat(4,1fr);width:100%;padding:20px 0;border-radius:10px;background:#eaf4fb}
.info-strip__item{display:flex;flex-direction:column;gap:4px;min-width:0;padding:2px 20px}
.info-strip__item:not(:nth-child(4n+1)){box-shadow:inset 1px 0 0 #e5ebf0}
.info-strip__item .lbl{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--c-gray)}
.info-strip__item .val{font-size:14px;font-weight:700;color:var(--c-primary)}
@media (max-width:767px){
  .info-strip{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .info-strip__item:nth-child(4n+1){box-shadow:inset 1px 0 0 #e5ebf0}
  .info-strip__item:nth-child(2n+1){box-shadow:none}
}
@media (max-width:359px){
  .info-strip{grid-template-columns:1fr}
  /* `:nth-child(n)` prende tutte le voci e pesa quanto la regola dei
     767, che altrimenti vincerebbe per specificità e lascerebbe il
     filetto in una colonna sola. */
  .info-strip__item:nth-child(n){box-shadow:none}
}

/* ---- I pulsanti documento (2026-10-20) ----
   Lo stesso gesto — apri questo documento — era disegnato in sei modi,
   uno per pagina, e nessuna delle differenze voleva dire qualcosa. La
   forma è quella che il Figma ripete di più ed era già su cinque pagine:
   rettangolo con raggio 6, contorno sottile, testo a sinistra e freccia
   nel cerchietto a destra; al passaggio del mouse si riempie.
   La misura della freccia la decide `svg.anma-freccia` più sopra, non
   il `font-size` del pulsante: per questo qui non compare.
   Chi ha bisogno di staccare usa `--pieno`: è l'azione principale di una
   pagina, non una riga di elenco. */
.anma-btn,
.doc-row__cta,
.cv-doc__btn,
.vg-btn,
.wb-card__btn,
.pg-card__pdf,
.mcj-issue__pdf,
.ce-ep__btn,
.sp-btn-yt,
.download-box__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;
  padding:10px 16px;border:0;border-radius:6px;
  background:#fff;color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-primary);
  font-weight:700;font-size:12px;letter-spacing:.48px;text-transform:uppercase;
  line-height:1;white-space:nowrap;text-decoration:none;
  transition:background .15s ease,color .15s ease}
.anma-btn:hover,
.doc-row__cta:hover,
.cv-doc__btn:hover,
.vg-btn:hover,
.wb-card__btn:hover,
.pg-card__pdf:hover,
.mcj-issue__pdf:hover,
.ce-ep__btn:hover,
.sp-btn-yt:hover{background:var(--c-primary);color:#fff}
/* La scatola di download sta su una fascia blu: il riempimento normale
   la farebbe sparire dentro il fondo. */
.download-box__cta:hover{background:#eaf4fb;color:var(--c-primary)}
.anma-btn--pieno,
.doc-row__cta--solid{background:var(--c-accent-green);color:#fff;box-shadow:none}
.anma-btn--pieno:hover,
.doc-row__cta--solid:hover{background:var(--c-accent-green);color:#fff;filter:brightness(1.08)}

/* ---- Comparsa allo scorrimento (2026-10-23) ----
   I blocchi delle pagine di contenuto compaiono mentre si scende; all'apertura
   prima la barra, poi il resto. La classe .anma-comparsa su <html> c'è solo
   sulle pagine che anma_comparsa_attiva() ammette, con JavaScript e senza
   «riduci movimento» (anma_comparsa_testa() in functions.php). I selettori
   sono gli stessi di assets/js/comparsa.js: se cambia uno, va cambiato
   l'altro. Home: i blocchi elencati qui; altre pagine: i figli diretti di
   ogni sezione del contenitore della pagina. I fondi delle sezioni restano
   fermi, si muove solo il contenuto. Con .is-fatto nessuna di queste regole
   tocca più il blocco. */
.anma-comparsa .anma-home :is(.hm-section-head, .hm-news__featured, .hm-journal__card, .hm-manuale__banner, .banner-socio__banner, .hm-quick__row > *, .hm-news__cards > *, .hm-numeri__row > *):not(.is-fatto),
.anma-comparsa main > div:not(.anma-home) > section > *:not(.is-fatto) {
  opacity: 0; transform: translateY(24px);
}
.anma-comparsa .anma-home :is(.hm-section-head, .hm-news__featured, .hm-journal__card, .hm-manuale__banner, .banner-socio__banner, .hm-quick__row > *, .hm-news__cards > *, .hm-numeri__row > *).is-visibile:not(.is-fatto),
.anma-comparsa main > div:not(.anma-home) > section > .is-visibile:not(.is-fatto) {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
@keyframes anma-comparsa-hero { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.anma-comparsa .hm-hero__content { animation: anma-comparsa-hero .7s ease .15s both; }
@media print {
  .anma-comparsa main * { opacity: 1 !important; transform: none !important; animation: none !important; }
}