/* Design Scuole Italia — child "Formigine 2" · f2-fixes.css
 * Correzioni CSS additive a difetti del tema padre (nessun markup toccato).
 */

/* --- Titoli file/documento che sforano o vengono tagliati nelle card di download ---
 * I nomi PDF sono spesso lunghi e SENZA spazi (es. "SEGNATURA_1747990552_Protocollo_2025")
 * oppure titoli lunghi ("Regolamento generale di circolo"): in un contenitore flex senza
 * min-width:0 non si mandano a capo -> escono dal pulsante o vengono tagliati. Fix: min-width:0
 * sul contenitore flex + a-capo morbido, e disattivo il troncamento sui titoli dei file. */
.card-icon,
.card-icon-content {
  min-width: 0;
}
.card-icon-content,
.card-icon-content p,
.card-icon-content strong,
.card-icon-content a,
.card-icon-content small {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
/* se il tema tronca il titolo del file (ellissi/clamp), lascialo andare a capo */
.card-icon-content .text-truncate,
.card-file .text-truncate,
.card-file .card-title,
.card-icon-content .card-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: block;
}

/* Avviso "contenuto non ancora reale" (callout nativo del design system, tono sobrio).
   Serve a distinguere a colpo d'occhio cio' che e' ufficiale da cio' che e' in lavorazione. */
.f2-avviso { margin: 0 0 1.4rem; }
.f2-avviso .callout-title { display: flex; align-items: center; gap: .5rem; }
.f2-avviso .callout-title .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.f2-avviso p { margin: .4rem 0 0; }
.f2-avviso .f2-avviso-contatti { font-size: .88rem; }
.f2-avviso .f2-avviso-contatti a { font-weight: 600; }

/* =====================================================================
   TESTATA DEI CONTENUTI SINGOLI (circolare, documento, notizia)
   Nel modello il titolo vive in una colonna larga 5/12 e accanto, a destra, c'e' una card con
   l'avatar dell'ACCOUNT che ha pubblicato ("Personale scolastico"). Effetto misurato: il titolo
   aveva 500px su 1440 e si spezzava in verticale su piu' righe, mentre metà della testata era
   occupata da un'informazione di servizio che a una famiglia non serve.
   Qui il titolo prende la riga intera e la firma scende sotto, ridotta a una riga discreta.
   Nessun contenuto rimosso: solo posizione e peso visivo. Se il browser non conosce :has()
   la testata resta quella del tema (nessuna rottura).
   ===================================================================== */
/* Due colonne vere: a sinistra la copertina tonda, a destra TUTTO il resto (occhiello, titolo,
   sottotitolo, "Ascolta la pagina", firma). Serve una griglia e non il flex del tema: col flex
   le righe successive tornavano a capo SOTTO l'immagine, lasciandola sola in cima con mezza
   testata vuota accanto. La griglia entra solo quando la copertina c'e' davvero. */
body.single .row:has(> [class*="col-"] > .section-thumb):has(> [class*="col-"] > .section-title) {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  align-items: start;
}
/* Misura FISSA per la colonna della copertina: la sua larghezza nel tema e' una percentuale
   (max-width 16.6667%), e in una griglia quella percentuale non ha piu' un riferimento —
   misurato, l'immagine collassava da 140px a 5px. 156 = 140 dell'immagine + 16 di distacco. */
body.single .row > [class*="col-"]:has(> .section-thumb) {
  grid-column: 1;
  grid-row: 1 / span 2;   /* l'immagine affianca sia il titolo sia la firma */
  width: 156px;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.single .row > [class*="col-"] > .section-thumb {
  width: 140px;
  max-width: 140px;
  margin: 0 16px 0 0;
}
body.single .row > [class*="col-"] > .section-thumb img { width: 140px; height: 140px; }
/* 🔴 Queste due regole DEVONO restare agganciate alla riga della griglia (la stessa
   condizione `:has()` della riga 58). Senza l'aggancio la seconda colpiva anche la
   testata delle NOTIZIE, che ha una colonna `col-md-6` con dentro la scheda
   dell'autore: portata a `flex: 0 0 100%` la colonna diventava larga 1200 invece di
   600 e il titolo finiva SOTTO la copertina, che il tema mette in valore assoluto
   sulla metà destra. Misurato il 25/07/2026 su
   /calendario-scolastico-a-s-2026-2027/: h1 largo 1122, bordo destro a 1176,
   immagine da 640 a 1280 -> 536px di titolo sopra la fotografia. */
body.single .row:has(> [class*="col-"] > .section-thumb):has(> [class*="col-"] > .section-title)
  > [class*="col-"]:has(> .section-title) {
  grid-column: 2;
  grid-row: 1;
  flex: 0 0 100%;
  max-width: none;
}
body.single .row:has(> [class*="col-"] > .section-thumb):has(> [class*="col-"] > .section-title)
  > [class*="col-"]:has(> .card-avatar) {
  grid-column: 2;
  grid-row: 2;            /* sotto il titolo, ma sempre a destra dell'immagine */
  order: 9;
  flex: 0 0 100%;
  max-width: none;
  margin-left: 0;         /* annulla offset-lg-1 */
}
/* La colonna con "Stampa / Condividi" e le etichette (Argomenti, Tipologia) era
   rimasta ORFANA in questa griglia: nel tema e' `col-lg-3 offset-lg-1`, cioe' un
   quarto di riga spostato a destra, e finiva sotto il titolo larga 261px su 1200,
   con mezza testata vuota accanto e le due etichette incolonnate. Misurato il
   25/07/2026 su /documento/piano-utilizzo-intelligenza-artificiale-p-u-i-a/.
   Qui prende la stessa colonna del titolo, per intero: le etichette hanno spazio
   per stare in riga (vedi custom.css) e si allineano al titolo. */
body.single .row:has(> [class*="col-"] > .section-thumb):has(> [class*="col-"] > .section-title)
  > [class*="col-"]:has(> .badges-wrapper.badges-main) {
  grid-column: 2;
  flex: 0 0 100%;
  max-width: none;
  width: auto;
  margin-left: 0;         /* annulla offset-lg-1 */
}
/* ---- Testata delle NOTIZIE: il titolo e la firma stavano ai due estremi ----
   Il tema mette `justify-content: space-between` su quella colonna e la sua altezza la
   decide la copertina (480px): con un titolo di due righe restavano **294px di bianco**
   fra il titolo e la riga "Pubblicato da" (misurato il 25/07/2026 su
   /calendario-scolastico-a-s-2026-2027/ e su /dal-gufo-ai-bambini...). Non e' un vuoto
   voluto, e' quello che avanza. Qui il gruppo (titolo, sottotitolo, "Ascolta la pagina",
   firma) sta insieme e centrato accanto alla fotografia, com'e' gia' nell'altra variante
   della stessa testata (`.article-title` senza autore, che il tema centra con
   `align-items-center`). Solo da 768px in su: sotto, la copertina torna nel flusso e il
   tema azzera il padding da solo. */
@media (min-width: 768px) {
  .article-title-author .article-title-author-container {
    justify-content: center;
    row-gap: 1.75rem;
    padding-bottom: 50px;   /* simmetrico al padding-top del tema: centratura vera */
  }
}

/* Sotto i 576px la copertina e' nascosta dal tema (d-none): torna tutto a una colonna. */
@media (max-width: 575.98px) {
  body.single .row:has(> [class*="col-"] > .section-thumb):has(> [class*="col-"] > .section-title) {
    display: block;
  }
}
body.single [class*="col-"]:has(> .card-avatar) .card-avatar {
  margin-top: .2rem !important;
  border: 0;
  box-shadow: none;
  background: transparent;
}
body.single [class*="col-"]:has(> .card-avatar) .card-avatar .card-avatar-img {
  width: 24px;
  height: 24px;
  min-width: 24px;
}
body.single [class*="col-"]:has(> .card-avatar) .card-avatar .card-avatar-content p {
  margin: 0;
  font-size: .82rem;
  color: #5c6f82;
}
/* dice CHE COSA e' quel nome: senza prefisso sembrava un autore d'articolo */
body.single [class*="col-"]:has(> .card-avatar) .card-avatar .card-avatar-content p::before {
  content: "Pubblicato da ";
  color: #5c6f82;
}
body.single [class*="col-"]:has(> .card-avatar) .card-avatar .card-avatar-content small:empty { display: none; }

/* =====================================================================
   SEZIONE A SCHEDE "LA DIDATTICA" (home e /didattica/)
   Bug misurato: il titolo del pannello di destra era color #17324d (blu notte) sopra il fondo
   bluelectric, cioe' praticamente invisibile. Causa: il tema colora di bianco solo l'h3, e il
   template della pagina Didattica emette un h2 -> in home si leggeva, su /didattica/ no.
   Qui vale per qualunque livello di titolo, cosi' le due pagine sono identiche.
   ===================================================================== */
.section-tabs-bg .accordion-large-title h2,
.section-tabs-bg .accordion-large-title h3,
.section-tabs-bg .accordion-large-title h4,
.section-tabs-bg .accordion-header,
.section-tabs-bg .accordion-large-content,
.section-tabs-bg .accordion-large-content p {
  color: #fff;
}
.section-tabs-bg .accordion-large-title h2,
.section-tabs-bg .accordion-large-title h3 {
  font-size: 1.05rem;   /* e' un comando di apertura, non il titolo della sezione */
  letter-spacing: .02em;
}
.section-tabs-bg .accordion-large hr { border-color: rgba(255, 255, 255, .3); }
/* "Ascolta la pagina" spostato nella sezione sotto le schede: gli serve un po' d'aria. */
.f2ra.f2ra-staccato { margin-top: 1.4rem; margin-bottom: .2rem; }

/* =====================================================================
   CONTRASTO: testo secondario sulle bande colorate del tema
   Misurato con axe-core il 25/07/2026: su /la-scuola/le-persone/ la riga
   "Fonte: Organigramma e Funzionigramma..." e' `.text-muted` (#5a768a) sopra la
   banda `bg-light` (#e9e6f2) -> contrasto 3.88:1, sotto il minimo AA di 4.5.
   Su fondo bianco lo stesso grigio passa (4.78), quindi si corregge SOLO la
   combinazione che fallisce. #455b71 da' 5.71:1 su quella banda.
   ===================================================================== */
.bg-light .text-muted,
.bg-light small.text-muted,
.bg-light .text-muted small { color: #455b71; }

/* ---- Schede in elenco: la copertina veniva STIRATA, non ritagliata ----
   Misurato il 25/07/2026 su /didattica/: il tema mette l'immagine `item-thumb`, che e'
   quadrata 280x280, dentro un riquadro verticale di 175x280 con `object-fit: fill`.
   Risultato: schiacciata del 37,5% in larghezza. I cerchi di sfondo diventavano ovali e
   l'annaffiatoio si allungava.
   `cover` ritaglia invece di deformare. Il ritaglio tiene il 62,5% centrale in larghezza e
   il soggetto delle nostre copertine ne occupa il 34%, quindi ci sta comodo. */
.card-horizontal .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- "Percorsi di studio": la copertina era una colonna di colore ----
   Le due schede (Scuola dell'infanzia, Scuola primaria) hanno una copertina a icona, quadrata
   1254x1254. Il tema la lasciava crescere quanto il testo accanto: diventava una striscia
   verticale di colore, alta il doppio della sua larghezza, col pittogramma stirato in mezzo.
   Qui il riquadro tiene una proporzione fissa 4:3 e ritaglia: le due schede sono identiche fra
   loro e l'icona resta della sua forma.
   Nota sulla sorgente: qui ci vuole l'icona, non una fotografia. «Scuola primaria» non e' un
   edificio, e' un percorso che nel circolo si svolge in tre plessi; mostrarne uno solo indica
   la scuola sbagliata a due famiglie su tre. Le fotografie stanno dove indicano davvero un
   posto, cioe' nella pagina «I luoghi».
   La sfumatura in basso e' un velo scuro dietro il bordo: stacca la copertina dal riquadro
   bianco senza scriverci sopra niente. */
.card-article .card-article-img {
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.card-article .card-article-img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, rgba(23, 50, 77, .28), rgba(23, 50, 77, 0));
  pointer-events: none;
}
/* Il movimento e' sull'immagine, non sulla scheda: la scheda e' un link e spostarla sposta
   anche il bersaglio del clic. `transform` e nient'altro: nessun ricalcolo di layout. */
.presentation-card-link:hover .card-article .card-article-img,
.presentation-card-link:focus-visible .card-article .card-article-img { transform: scale(1.05); }
.presentation-card-link:focus-visible .card-article { outline: 2px solid var(--f2-acc-scuro, #af2127); outline-offset: 2px; }

@media (max-width: 575.98px) {
  .card-article .card-article-img { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .card-article .card-article-img { transition: none; }
  .presentation-card-link:hover .card-article .card-article-img { transform: none; }
}


/* ---- Galleria dei luoghi (in "La scuola"): una foto alta, una bassa ----
   Segnalato da Vincenzo il 31/07/2026. Il carosello mostra due fotografie affiancate, tutte
   larghe uguali (566 px) ma alte ognuna a modo suo: 318, 515, 425, 424, 319 px nella stessa
   striscia. Il motivo e' lo stesso delle schede in "I luoghi": le foto vere dei plessi hanno
   proporzioni tutte diverse (1280x720, 600x546, 320x240, 590x442, 1000x563) e il tema le
   lascia decidere da sole quanto sono alte, quindi il fondo della striscia balla a ogni
   scorrimento.
   Qui la forma la impone il riquadro — 16:10, la stessa delle schede in "I luoghi", perche' e'
   la stessa cosa fotografata — e `object-fit: cover` ritaglia invece di deformare.
   Serve `height` con `!important` perche' il tema padre dichiara `img { height: auto }`, che
   per specificita' vincerebbe. */
.it-single-slide-wrapper.gallery-item figure {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  background: #eef0f2;
  border-radius: 4px;
}
.it-single-slide-wrapper.gallery-item figure a {
  position: absolute;
  inset: 0;
  display: block;
}
.it-single-slide-wrapper.gallery-item figure img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.it-single-slide-wrapper.gallery-item figure a:hover img,
.it-single-slide-wrapper.gallery-item figure a:focus-visible img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .it-single-slide-wrapper.gallery-item figure img { transition: none; }
  .it-single-slide-wrapper.gallery-item figure a:hover img { transform: none; }
}

/* ---- Pallini dei caroselli ----
   🔴 REGOLA RIMOSSA IL 10/09/2026, ED ERA CODICE MORTO: dichiarava
   `.splide__pagination__page{ width:24px; height:24px; padding:6px; border-radius:50% }`
   con specificita' 0,1,0, e perdeva il duello della cascata contro
   `.splide .splide__pagination .splide__pagination__page` di `custom.css:503`, che vale
   0,3,0 e disegna l'indicatore del modello — un segmento alto 3 px, non un pallino.
   Non applicandosi, non ha mai fatto niente: sembrava una correzione fatta e non lo era.

   E la correzione VERA c'e' gia', in `custom.css:517-520`: uno strato invisibile
   (`::after` con `top:-11px; bottom:-11px`) che allarga l'area senza toccare il disegno.
   Misurato il 10/09/2026 a 390 px sondando pixel per pixel con `elementFromPoint`: segno
   visibile 24x3, **area che risponde al dito 24x26**, quindi sopra il minimo di 24 del
   criterio 2.5.8.

   🔴 E' anche la correzione di un FALSO POSITIVO che due controlli automatici hanno
   riportato come difetto («bottoni del carosello alti 3 pixel»): misuravano il rettangolo
   dell'elemento, non l'area che risponde. Su un bersaglio allargato con uno pseudo-elemento
   il rettangolo dell'elemento non e' la misura giusta, e va sondata la pagina. */

/* ---- Due collegamenti nostri sotto i 24 px ----
   Misurati il 10/09/2026 percorrendo i collegamenti di sei pagine e scartando quelli
   dentro una frase, che il criterio 2.5.8 esclude: restano «Tutti gli eventi della scuola»
   in `/novita/` (176x21) e «Aggiungi gli eventi al proprio calendario» in `/evento/`
   (236x21). Sono comandi in fondo a un blocco, non rimandi in mezzo a un discorso, quindi
   l'eccezione non li copre. Sono nostri, non del tema padre. */
.f2cl-tutti > a,
.f2cl-ics > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ---- Un collegamento in mezzo a una frase deve vedersi che e' un collegamento ----
   Misurato il 10/09/2026 sul rimando all'accesso civico che compare nelle sezioni di
   Amministrazione trasparente senza documenti: colore `rgb(69,91,113)`, cioe' **identico**
   a quello del testo intorno, `text-decoration-line: none`, `font-weight: 300` come il
   resto. Non era un collegamento poco evidente: era un collegamento invisibile, distinguibile
   solo passandoci il puntatore.

   Il criterio 1.4.1 delle WCAG vieta di affidare un'informazione al solo colore, e qui non
   c'era nemmeno il colore. Quindi due segnali insieme, sottolineatura e peso, che restano
   leggibili anche a chi non distingue i colori e anche in stampa.

   Il tema padre non offre uno stile pronto per il collegamento redazionale: percorrendo i
   collegamenti di due pagine di testo si trovano solo comandi d'interfaccia (Stampa, Invia,
   Condividi), nessun rimando dentro un discorso. Quindi la regola e' nostra, e sta strettra
   sul nostro contenitore per non poter toccare nient'altro. */
.f2-vuoto-at a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 600;
}

/* ============================================================
   IL MENU DEL PROFILO USCIVA DALLO SCHERMO  (12/09/2026)

   Cliccando il proprio nome in alto a destra, il pannello con «Area riservata», «Gestisci il
   sito» ed «Esci» si apriva a metà fuori dalla finestra: le voci tagliate, la X di chiusura
   invisibile, e la pagina con una barra di scorrimento orizzontale che non c'entrava niente.

   🔴 LA CORREZIONE NON STA QUI, E IL MOTIVO VA LETTO PRIMA DI RIMETTERE UNA REGOLA IN QUESTO
   PUNTO. Sta in `template-parts/header/header-logged.php`, dove il pannello ha preso la classe
   `dropdown-menu-right`.

   Chi posiziona quel pannello non è un foglio di stile: è Popper, la libreria dei menu a tendina
   di Bootstrap. Al click scrive sull'elemento `top:0; left:0; transform: translate3d(195px, 40px,
   0)`, cioè azzera le coordinate e sposta tutto con `transform`.

   Qui c'era una regola con `left:auto; right:0; transform:none` forzati. Rimetteva a posto
   l'orizzontale e rompeva la verticale: quel `transform:none` annullava anche i 40px con cui
   Popper fa scendere il pannello sotto il bottone, quindi la tendina saliva di 40px e copriva di
   25px il bottone che l'aveva aperta. La misura, al click vero e non forzando la classe `show`:
   bottone 0→40, pannello 15→269, scarto −25.

   La lezione, che vale per qualunque altro pezzo di interfaccia posizionato da una libreria:
   contro `transform` non si vince a colpi di `!important`, perché `transform` porta le due
   coordinate insieme e annullarne una le annulla entrambe. Si dice alla libreria dove mettere la
   cosa, e la mette lei. Qui: `bottom-end` invece di `bottom-start`, che in Bootstrap 4 si chiede
   con `dropdown-menu-right`.

   E il difetto si vede SOLO col click vero. Aggiungere `show` da console lascia il pannello dove
   lo mette il CSS statico, perché il codice di posizionamento non gira: la prima misura era verde
   per quella ragione sbagliata, e anche la misura del difetto iniziale era presa in uno stato che
   a un utente non capita mai.

   RESTA UNA RIGA, ED È QUESTA. Chiesto al browser quali regole si applicano davvero al pannello,
   le sole cinque che toccano la posizione dicono:
     bootstrap-italia.css  .dropdown-menu                        left:0; top:100%
     bootstrap-italia.css  .dropdown-menu-right                   left:auto; right:0
     bootstrap-italia.css  .dropdown-menu[x-placement^="bottom"]  right:auto; bottom:auto
     scuole.css            .menu-user                             min-width:320px
     scuole.css            .menu-user.dropdown-menu                left:auto; right:0

   La terza è Bootstrap che dice: quando è Popper a posizionare, `right` deve stare a `auto`,
   altrimenti il pannello ha entrambi i lati vincolati e si stira. La quinta è il tema padre che
   lo rimette a `0`. Pesano uguale, due classi contro una classe e un attributo, e a pari peso
   vince l'ultima caricata: `scuole.css` arriva dopo. Risultato misurato: pannello largo 400
   invece di 320, con il bordo destro a 1386 e non a 1306 dove Popper lo credeva.

   Qui si ripristina l'intenzione di Bootstrap, e solo dentro il caso in cui Popper è al lavoro
   (l'attributo `x-placement` c'è solo allora). Tre selettori invece di due bastano a vincere di
   peso, quindi niente `!important`: e soprattutto non si tocca `transform`, che è il modo in cui
   il pannello sa di dover scendere sotto il bottone. */

.menu-user.dropdown-menu[x-placement^="bottom"] {
	right: auto;
}