/* ============================================================
   CGIL Calabria — stile del sito
   Colori da allineare al manuale d'identità visiva quando disponibile.
   ============================================================ */
:root {
    --cgil-rosso: #d0021b;
    --cgil-rosso-scuro: #a00115;
    --cgil-rosso-chiaro: #fdecee;
    --cgil-scuro: #2b2c36;
    --cgil-scuro-2: #1f2028;
    --cgil-grigio: #f5f5f7;
    --cgil-testo: #23242b;
    --cgil-testo-soft: #6b6c78;
    /* Fondo della pagina, fondo delle schede, rosso per i testi (collegamenti e accenti), contorno del fuoco: cambiano con il tema scuro */
    --cgil-fondo: #fff;
    --cgil-carta: #fff;
    --cgil-link: #a00115;
    --cgil-accento: #d0021b;
    --cgil-fuoco: #1a73e8;
    --font-titoli: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-testo: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ombra: 0 10px 30px rgba(20, 20, 30, .08);
    --ombra-hover: 0 18px 40px rgba(20, 20, 30, .14);
    --raggio: 1rem;
    --bs-link-color-rgb: 160, 1, 21;
    --bs-link-hover-color-rgb: 208, 2, 27;
    --bs-primary: #d0021b;
    --bs-primary-rgb: 208, 2, 27;
}

/* ---- Base ---- */
html { scroll-padding-top: 6rem; }
body { font-family: var(--font-testo); font-size: 1.0625rem; line-height: 1.6; color: var(--cgil-testo); background: var(--cgil-fondo); font-variant-numeric: lining-nums; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--font-titoli); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--cgil-link); text-underline-offset: 2px; }
a:hover { color: var(--cgil-accento); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible { outline: 3px solid var(--cgil-fuoco); outline-offset: 2px; box-shadow: none; }
.cgil-header .nav-link:focus-visible { outline: 3px solid var(--cgil-fuoco); outline-offset: -3px; box-shadow: none; }
.hero :focus-visible, .chiamata :focus-visible, .sezione-scura :focus-visible, .cgil-topbar :focus-visible, .cgil-footer :focus-visible { outline: 3px solid #fff !important; outline-offset: 3px; }
.salta-al-contenuto:focus { position: absolute; top: .5rem; left: .5rem; z-index: 2000; padding: .6rem 1rem; background: var(--cgil-carta); color: var(--cgil-link); border-radius: .5rem; font-weight: 700; }
main:focus { outline: none; }
.testo-multiriga { white-space: pre-line; }
.ratio iframe { border: 0; }
.icona { fill: currentColor; vertical-align: -.125em; }

/* ---- Pulsanti ---- */
.btn { font-family: var(--font-titoli); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; padding: .7rem 1.4rem; border-radius: .5rem; }
.btn-lg { font-size: .95rem; padding: .9rem 1.8rem; }
.btn-cgil { background: var(--cgil-rosso); border-color: var(--cgil-rosso); color: #fff; }
.btn-cgil:hover, .btn-cgil:focus { background: var(--cgil-rosso-scuro); border-color: var(--cgil-rosso-scuro); color: #fff; }

/* ---- Barra superiore e header ---- */
.cgil-topbar { background: var(--cgil-scuro); color: #d6d7de; font-size: .85rem; padding: .45rem 0; }
.cgil-topbar a { color: #fff; text-decoration: none; }
.cgil-topbar a:hover { text-decoration: underline; }
.cgil-topbar .list-inline-item:not(:last-child) { margin-right: 1.25rem; }
/* Casella «Cerca nel sito»: nella barra superiore (da tablet in su) e in fondo al menu (telefono) */
.cerca { display: flex; gap: .4rem; }
.cerca input { min-width: 0; }
.cerca .btn { display: inline-grid; place-items: center; padding: .55rem .9rem; }
.cerca-topbar input { width: 13rem; border-color: transparent; }
.cerca-topbar .btn { padding: .3rem .7rem; }
.cerca-menu { margin: .5rem 0 1rem; }
.cerca-menu input { flex: 1 1 auto; }
.menu-contatti { margin: 0 0 1rem; padding: 1rem 0 0; list-style: none; border-top: 1px solid #ececf0; }
.menu-contatti li { margin-bottom: .5rem; }
.menu-contatti a { font-weight: 600; text-decoration: none; }
.menu-contatti .icona { color: var(--cgil-accento); }
.cgil-header { background: var(--cgil-carta); box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
.cgil-header .navbar { padding: 1rem 0; }
/* Marchio CGIL con il nome della struttura accanto, allineato alla base del quadrato rosso */
.cgil-marchio { display: inline-flex; align-items: flex-end; gap: .6rem; margin-right: 1.5rem; }
.cgil-marchio img { display: block; height: 54px; width: auto; }
.cgil-marchio-nome { font-family: var(--font-titoli); font-weight: 800; font-size: 1.7rem; line-height: .8; letter-spacing: -.02em; color: var(--cgil-accento); }
@media (max-width: 575.98px) {
    .cgil-marchio img { height: 44px; }
    .cgil-marchio-nome { font-size: 1.4rem; }
}
.btn-testata { padding: .55rem 1.1rem; white-space: nowrap; }
/* Selettore delle lingue in testata: <details>, niente script. */
.lingue { position: relative; }
.lingue summary { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; list-style: none; cursor: pointer; font-size: 1.25rem; color: var(--cgil-testo); }
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary:hover, .lingue[open] summary { background: var(--cgil-grigio); color: var(--cgil-link); }
.lingue summary:focus-visible { outline: 3px solid var(--cgil-fuoco); outline-offset: 2px; }
.lingue ul { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 1040; min-width: 11rem; margin: 0; padding: .5rem 0; list-style: none; background: var(--cgil-carta); border-radius: .75rem; box-shadow: var(--ombra); }
.lingue li a { display: block; padding: .5rem 1.1rem; color: var(--cgil-testo); text-decoration: none; }
.lingue li a:hover, .lingue li a[aria-current] { background: var(--cgil-grigio); color: var(--cgil-link); }
.lingue li a[aria-current] { font-weight: 700; }
.cgil-header .nav-link { position: relative; font-family: var(--font-titoli); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cgil-testo); padding: .6rem .9rem; }
.cgil-header .nav-link::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .3rem; height: 3px; background: var(--cgil-rosso); border-radius: 2px; transform: scaleX(0); transition: transform .2s; }
.cgil-header .nav-link:hover, .cgil-header .nav-link.active { color: var(--cgil-accento); }
.cgil-header .nav-link:hover::after, .cgil-header .nav-link.active::after { transform: scaleX(1); }

/* ---- Sezioni ---- */
.sezione { padding: 4rem 0; }
.sezione-grigia { background: var(--cgil-grigio); }
.sezione-scura { background: var(--cgil-scuro); color: #fff; }
.sezione-scura .text-muted { color: #c9cad3 !important; }
.sezione-titolo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.sezione-titolo h2 { position: relative; margin: 0; padding-bottom: .75rem; font-size: 2rem; font-weight: 800; }
.sezione-titolo h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 4px; background: var(--cgil-rosso); border-radius: 2px; }
.sezione-titolo .link-tutti { font-family: var(--font-titoli); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.sezione-scura .link-tutti { color: #fff; }
.sezione-titolo .link-tutti .icona { transition: transform .2s; }
.sezione-titolo .link-tutti:hover .icona { transform: translateX(4px); }

/* ---- Dalla CGIL nazionale: titoli dal feed di cgil.it, in fondo alla home, in tono minore rispetto alle notizie calabresi ---- */
.sezione-nazionale { padding: 3rem 0; background: var(--cgil-grigio); }
.sezione-nazionale .sezione-titolo { margin-bottom: 1.25rem; }
.sezione-nazionale .sezione-titolo h2 { font-size: 1.5rem; }
.nazionale-elenco { display: grid; gap: 0 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .nazionale-elenco { grid-template-columns: 1fr 1fr; } }
.nazionale-voce { padding: .9rem 0; border-bottom: 1px solid rgba(128, 128, 140, .25); }
.nazionale-voce .card-notizia-meta { margin-bottom: .35rem; }
.nazionale-voce .badge-categoria { cursor: default; }
.nazionale-voce .badge-categoria:hover { background: var(--cgil-rosso-chiaro); color: var(--cgil-link); }
.nazionale-titolo { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.nazionale-titolo a { color: var(--cgil-testo); text-decoration: none; }
.nazionale-titolo a:hover, .nazionale-titolo a:focus-visible { color: var(--cgil-accento); text-decoration: underline; }
.nazionale-fonte { margin: 1rem 0 0; font-size: .85rem; color: var(--cgil-testo-soft); }

/* ---- Avviso in cima alla home (sciopero, manifestazione, assemblea) ---- */
.avviso-home { background: #fff1c9; color: var(--cgil-testo); border-bottom: 1px solid #f0dfa8; }
.avviso-home .container { display: flex; align-items: flex-start; gap: .75rem; padding-top: .7rem; padding-bottom: .7rem; }
.avviso-home .icona { flex: 0 0 auto; margin-top: .3rem; font-size: 1.15rem; color: var(--cgil-link); }
.avviso-home p { margin: 0; font-weight: 600; line-height: 1.45; }
.avviso-home a { margin-left: .35rem; font-weight: 700; white-space: nowrap; }

/* ---- Hero (slider banner) ---- */
.hero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--cgil-rosso) 0%, var(--cgil-rosso-scuro) 100%); color: #fff; }
.hero::before { content: ""; position: absolute; right: -10%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.hero-riga { min-height: 240px; padding: 1.5rem 0; }
.hero-titolo { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; line-height: 1.08; margin-bottom: .75rem; }
.hero-sottotitolo { max-width: 34rem; font-size: 1.1rem; opacity: .92; }
.hero-cta { margin-top: 1rem; }
.hero .btn-light { --bs-btn-color: var(--cgil-rosso-scuro); --bs-btn-hover-color: var(--cgil-rosso-scuro); --bs-btn-active-color: var(--cgil-rosso-scuro); }
.hero-immagine { width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: var(--raggio); box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
/* Il motto di «Impostazioni sito», scritto a mano sopra l'apertura. Niente font scaricato: si usa il corsivo del dispositivo. */
.hero-motto { position: relative; margin: 0; padding-top: 1.5rem; font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Brush Script MT", cursive; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.15; transform: rotate(-2deg); transform-origin: left bottom; }
.hero-motto + .hero-riga { min-height: 0; padding-top: 1rem; }
.hero-solo-immagine { min-height: 0; padding: 1.5rem 0 2rem; }
.hero-solo-immagine .hero-immagine { height: auto; max-height: 360px; aspect-ratio: 1320 / 360; object-fit: cover; }
/* Gli altri banner in evidenza, sotto l'apertura: schede basse con il titolo sulla foto */
.sezione.sezione-banner { padding: 1.5rem 0; }
.banner-card { position: relative; display: block; border-radius: var(--raggio); overflow: hidden; background: var(--cgil-scuro); box-shadow: var(--ombra); color: #fff; text-decoration: none; }
.banner-card:hover { color: #fff; }
.banner-card img { display: block; width: 100%; height: 170px; object-fit: cover; transition: transform .4s; }
.banner-card:hover img { transform: scale(1.04); }
.banner-card-info { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.25rem 1.1rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.banner-card-titolo { font-family: var(--font-titoli); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }

/* ---- Di cosa hai bisogno? (pulsanti grandi con parole di tutti i giorni) ---- */
.sezione-intro { max-width: 44rem; margin: -1rem 0 2rem; font-size: 1.15rem; color: var(--cgil-testo-soft); }
.bisogno { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.25rem; background: var(--cgil-carta); border: 2px solid transparent; border-radius: var(--raggio); box-shadow: var(--ombra); color: var(--cgil-testo); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.bisogno:hover, .bisogno:focus-visible { transform: translateY(-4px); border-color: var(--cgil-rosso); box-shadow: var(--ombra-hover); color: var(--cgil-testo); }
.bisogno-icona { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .25rem; border-radius: 50%; background: var(--cgil-rosso-chiaro); color: var(--cgil-accento); font-size: 1.5rem; transition: background .25s, color .25s; }
.bisogno:hover .bisogno-icona, .bisogno:focus-visible .bisogno-icona { background: var(--cgil-rosso); color: #fff; }
.bisogno-titolo { font-family: var(--font-titoli); font-weight: 700; font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
/* ---- Che lavoro fai? (dal lavoro alla categoria, senza conoscere le sigle) ---- */
.mestiere { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; padding: 1rem 1.25rem; background: var(--cgil-carta); border: 2px solid #ececf0; border-left: 6px solid var(--cgil-rosso); border-radius: var(--raggio); color: var(--cgil-testo); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.mestiere:hover, .mestiere:focus-visible { border-color: var(--cgil-rosso); box-shadow: var(--ombra); color: var(--cgil-testo); }
.mestiere-lavori { font-family: var(--font-titoli); font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.mestiere-sigla { flex: 0 0 auto; font-family: var(--font-titoli); font-weight: 800; font-size: .8rem; letter-spacing: .04em; color: var(--cgil-link); white-space: nowrap; }
.bisogno-testo { font-size: .95rem; line-height: 1.4; color: var(--cgil-testo-soft); }
@media (max-width: 575.98px) {
    .bisogno { padding: 1rem; }
    .bisogno-titolo { font-size: 1rem; }
}

/* ---- Fascia con pulsante ---- */
.chiamata { background: var(--cgil-scuro); color: #fff; padding: 2.5rem 0; }
.chiamata h2 { margin: 0; font-size: 1.6rem; color: #fff; }
.chiamata p { margin: .25rem 0 0; color: #c9cad3; }

/* ---- Notizie ---- */
.card-notizia { border: 0; border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); transition: transform .25s, box-shadow .25s; }
.card-notizia:hover { transform: translateY(-6px); box-shadow: var(--ombra-hover); }
.card-notizia .card-img-top { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Notizia senza foto: fondo chiaro con filo rosso e cerchio, logo della categoria al centro, anno in basso */
.card-notizia-segnaposto { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cgil-grigio); }
.card-notizia-segnaposto::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cgil-rosso); }
.card-notizia-segnaposto::after { content: ""; position: absolute; right: -12%; bottom: -30%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: var(--cgil-rosso-chiaro); }
/* I loghi del vecchio sito sono JPG su fondo bianco: «multiply» toglie il riquadro bianco sul grigio */
.card-notizia-segnaposto img { position: relative; z-index: 1; max-width: 55%; max-height: 48%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s; }
.card-notizia:hover .card-notizia-segnaposto img { transform: scale(1.06); }
.segnaposto-sigla { position: relative; z-index: 1; font-family: var(--font-titoli); font-weight: 800; font-size: 2rem; letter-spacing: .03em; color: var(--cgil-accento); }
.segnaposto-anno { position: absolute; z-index: 1; left: 1.4rem; bottom: .8rem; font-family: var(--font-titoli); font-weight: 700; font-size: .85rem; letter-spacing: .06em; color: var(--cgil-testo-soft); }
.card-notizia .card-body { padding: 1.5rem; }
.card-notizia-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; font-size: .78rem; color: var(--cgil-testo-soft); text-transform: uppercase; letter-spacing: .04em; }
.badge-categoria { position: relative; z-index: 2; padding: .3rem .6rem; border-radius: .35rem; background: var(--cgil-rosso-chiaro); color: var(--cgil-link); font-family: var(--font-titoli); font-weight: 700; font-size: .72rem; text-decoration: none; }
.badge-categoria:hover { background: var(--cgil-rosso); color: #fff; }
.card-notizia .card-title { line-height: 1.3; }
.card-notizia .card-title a { color: var(--cgil-testo); text-decoration: none; }
.card-notizia:hover .card-title a { color: var(--cgil-accento); }
.card-notizia-grande .card-title { line-height: 1.2; }
.card-notizia-grande .card-body { padding: 1.75rem 2rem 2rem; }
/* Notizie brevi accanto alla più recente (home): miniatura a sinistra, titolo a destra */
.notizia-breve { position: relative; display: flex; flex: 1 1 0; gap: 1.1rem; align-items: center; padding: .75rem; border-radius: var(--raggio); background: var(--cgil-carta); box-shadow: var(--ombra); transition: transform .25s, box-shadow .25s; }
.notizia-breve:hover { transform: translateY(-4px); box-shadow: var(--ombra-hover); }
.notizia-breve-img { flex: 0 0 38%; align-self: stretch; width: 38%; height: auto; min-height: 7rem; aspect-ratio: 3 / 2; border-radius: .75rem; object-fit: cover; }
.notizia-breve-img.card-notizia-segnaposto .segnaposto-anno { left: 1rem; bottom: .5rem; font-size: .75rem; }
.notizia-breve-img.card-notizia-segnaposto::before { width: 4px; }
.notizia-breve .card-notizia-meta { margin-bottom: .5rem; }
.notizia-breve-titolo { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.notizia-breve-titolo a { color: var(--cgil-testo); text-decoration: none; }
.notizia-breve:hover .notizia-breve-titolo a { color: var(--cgil-accento); }
.card-notizia .card-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--cgil-testo-soft); }

/* ---- Eventi ---- */
.evento { display: flex; gap: 1.25rem; height: 100%; padding: 1.25rem; background: var(--cgil-carta); border-radius: var(--raggio); box-shadow: var(--ombra); }
.evento-data { flex: 0 0 4.5rem; align-self: flex-start; padding: .6rem 0; background: var(--cgil-rosso); color: #fff; border-radius: .75rem; text-align: center; font-family: var(--font-titoli); line-height: 1; }
.evento-data .giorno { display: block; font-size: 1.9rem; font-weight: 800; }
.evento-data .mese { display: block; margin-top: .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.evento h3 { margin-bottom: .4rem; font-size: 1.1rem; }
.evento h3 a { color: var(--cgil-testo); text-decoration: none; }
.evento h3 a:hover { color: var(--cgil-accento); }
.evento-dettagli { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; color: var(--cgil-testo-soft); }
.eventi-passati .evento { box-shadow: none; border: 1px solid #e4e4ea; }
.eventi-passati .evento-data { background: var(--cgil-testo-soft); }
.avviso-concluso { margin-bottom: 1.5rem; padding: .85rem 1.1rem; border-left: 4px solid var(--cgil-testo-soft); border-radius: 0 .5rem .5rem 0; background: var(--cgil-grigio); font-weight: 600; }

/* ---- Categorie ---- */
.categoria-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; height: 100%; padding: 1.5rem 1rem; background: var(--cgil-carta); border: 1px solid #ececf0; border-radius: var(--raggio); color: var(--cgil-testo); text-align: center; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.categoria-card:hover { transform: translateY(-5px); box-shadow: var(--ombra-hover); border-color: var(--cgil-rosso); color: var(--cgil-accento); }
.categoria-card img { max-width: 80%; height: 64px; object-fit: contain; }
.categoria-sigla { display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 1rem; border-radius: 999px; white-space: nowrap; background: var(--cgil-rosso-chiaro); color: var(--cgil-accento); font-family: var(--font-titoli); font-weight: 800; font-size: .9rem; }
.categoria-card .nome { font-family: var(--font-titoli); font-weight: 700; font-size: .9rem; }
.categorie-home .categoria-card img { height: 72px; }
.categorie-grandi .categoria-card { gap: 1rem; padding: 2rem 1.25rem; }
.categorie-grandi .categoria-card img { height: 96px; }
.categorie-grandi .categoria-card .nome { font-size: 1rem; }
/* Testata della categoria: logo su un riquadro bianco accanto al titolo */
.testata-con-logo { display: flex; align-items: center; gap: 1.5rem; }
.testata-logo { flex: 0 0 auto; display: grid; place-items: center; padding: .75rem; border: 1px solid #ececf0; border-radius: var(--raggio); background: #fff; box-shadow: var(--ombra); }
.testata-logo img { display: block; height: 88px; width: auto; max-width: 160px; object-fit: contain; }
@media (max-width: 575.98px) {
    .testata-con-logo { gap: 1rem; }
    .testata-logo img { height: 56px; max-width: 100px; }
}
.introduzione { max-width: 50rem; margin-bottom: 2.5rem; font-size: 1.15rem; }

/* ---- Servizi ---- */
.servizio { position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.75rem; border: 1px solid #ececf0; border-radius: var(--raggio); background: var(--cgil-carta); transition: transform .25s, box-shadow .25s, border-color .25s; }
.servizio:hover { transform: translateY(-5px); border-color: var(--cgil-rosso); box-shadow: var(--ombra-hover); }
.servizio-testa { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.servizio-testa img { flex: 0 0 auto; max-width: 96px; height: 64px; object-fit: contain; }
.servizio h3 { margin: 0; font-size: 1.3rem; }
.servizio h3 a { color: var(--cgil-testo); text-decoration: none; }
.servizio:hover h3 a { color: var(--cgil-link); }
.servizio p { color: var(--cgil-testo-soft); }
.servizio-recapiti { position: relative; z-index: 2; margin: 0 0 1rem; padding: 0; list-style: none; font-size: .9rem; }
.servizio-recapiti li { margin-bottom: .25rem; overflow-wrap: anywhere; }
.servizio-recapiti .icona { color: var(--cgil-accento); }
.servizio .servizio-vai { margin: auto 0 0; font-family: var(--font-titoli); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cgil-link); }
.servizio:focus-within { border-color: var(--cgil-rosso); box-shadow: var(--ombra-hover); }

/* ---- Video ---- */
.video-card { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--raggio); overflow: hidden; background: #000; box-shadow: var(--ombra); text-align: left; }
.video-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: .9; transition: transform .3s, opacity .3s; }
.video-card:hover img { transform: scale(1.04); opacity: 1; }
.video-card .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.video-card .play > span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cgil-rosso); font-size: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s; }
.video-card:hover .play > span, .video-card:focus-visible .play > span { transform: scale(1.1); }
.video-titolo { margin: .75rem 0 0; font-family: var(--font-titoli); font-weight: 700; font-size: .95rem; }
.video-card-vuota { display: block; aspect-ratio: 16 / 9; background: var(--cgil-scuro); } /* come .video-card img */
.video-card-blocco { aspect-ratio: 16 / 9; width: 100%; background: var(--cgil-scuro); }
.blocco-video-link { margin: .5rem 0 0; }

/* ---- Album ---- */
.album-card { position: relative; display: block; border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); color: #fff; text-decoration: none; background: var(--cgil-scuro); }
.album-card:hover { color: #fff; }
.album-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
.album-card:hover img { transform: scale(1.05); }
.album-vuoto { display: grid; place-items: center; aspect-ratio: 4 / 3; font-size: 3rem; color: rgba(255, 255, 255, .4); }
.album-info { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.25rem 1.25rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.album-info h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.album-info small { opacity: .85; }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.galleria a { display: block; border-radius: .75rem; overflow: hidden; background: var(--cgil-grigio); }
.galleria img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .3s, opacity .3s; }
.galleria a:hover img { transform: scale(1.05); opacity: .9; }
.lightbox .modal-content { background: rgba(15, 15, 20, .96); color: #fff; }
.lightbox .modal-header { border: 0; }
.lightbox .modal-title { margin: 0; font-size: .95rem; }
.lightbox .modal-body { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 4rem 1.5rem; overflow: hidden; }
.lightbox .modal-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .5rem; }
.lightbox-freccia { position: absolute; top: 50%; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.4rem; transform: translateY(-50%); }
.lightbox-freccia:hover { background: var(--cgil-rosso); }
.lightbox-precedente { left: .75rem; }
.lightbox-successiva { right: .75rem; }
.lightbox :focus-visible { outline: 3px solid #fff !important; outline-offset: 3px; }
.video-data { margin: .15rem 0 0; font-size: .85rem; color: var(--cgil-testo-soft); }
.nota-video { margin: 0 0 1.5rem; font-size: .85rem; color: var(--cgil-testo-soft); text-align: left; }

/* ---- Banner singolo ---- */
.sezione.banner-singolo { padding: 2rem 0; }
.banner-singolo img { display: block; width: 100%; height: clamp(7.5rem, 21vw, 17.5rem); object-fit: cover; border-radius: var(--raggio); box-shadow: var(--ombra); }

/* ---- Pagine interne: testata e percorso ---- */
/* Chiara, con la barretta rossa sotto il titolo: il rosso pieno resta all'apertura della home */
.testata { padding: 2rem 0 2.25rem; background: var(--cgil-grigio); border-bottom: 1px solid #e8e8ee; }
.testata h1 { position: relative; margin: 0; padding-bottom: .85rem; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.12; }
.testata h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 4px; border-radius: 2px; background: var(--cgil-rosso); }
.testata-sottotitolo { max-width: 46rem; margin: 1rem 0 0; font-size: 1.1rem; color: var(--cgil-testo-soft); }
.testata-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1rem; font-size: .95rem; color: var(--cgil-testo-soft); }
.briciole { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .85rem; color: var(--cgil-testo-soft); }
.briciole li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.briciole a { color: var(--cgil-link); }
.briciole [aria-current] { font-weight: 700; color: var(--cgil-testo); }

/* ---- Pagine interne: corpo ---- */
.sezione-pagina { padding-top: 3rem; padding-bottom: 4rem; }
.sezione-pagina-grigia { background: var(--cgil-grigio); }
.vuoto { margin: 0; padding: 3rem 1.5rem; border-radius: var(--raggio); background: var(--cgil-grigio); color: var(--cgil-testo-soft); text-align: center; font-size: 1.05rem; }
.sezione-grigia .vuoto, .sezione-pagina-grigia .vuoto { background: var(--cgil-carta); }
.titolo-parte { position: relative; margin: 0 0 1.5rem; padding-bottom: .65rem; font-size: 1.5rem; font-weight: 800; }
.titolo-parte::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 4px; border-radius: 2px; background: var(--cgil-rosso); }
* + .titolo-parte { margin-top: 3rem; }

/* ---- Testo scritto dalla redazione ---- */
.contenuto-redazione { font-size: 1.05rem; line-height: 1.75; overflow-wrap: break-word; }
.contenuto-redazione > :first-child, .contenuto-redazione .umb-block-list > .blocco:first-child > :first-child, .contenuto-redazione .blocco-testo > :first-child { margin-top: 0; }
.contenuto-redazione h2:not([class]) { margin: 2.25rem 0 1rem; font-size: 1.6rem; }
.contenuto-redazione h3:not([class]) { margin: 1.75rem 0 .75rem; font-size: 1.3rem; }
.contenuto-redazione h4:not([class]) { margin: 1.5rem 0 .5rem; font-size: 1.1rem; }
.contenuto-redazione img { max-width: 100%; height: auto; border-radius: .75rem; }
.contenuto-redazione iframe { max-width: 100%; }
.contenuto-redazione ul:not([class]), .contenuto-redazione ol:not([class]) { padding-left: 1.4rem; }
.contenuto-redazione :is(ul, ol):not([class]) > li { margin-bottom: .35rem; }
.contenuto-redazione blockquote:not([class]) { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--cgil-rosso); color: var(--cgil-testo-soft); font-style: italic; }
.contenuto-redazione table { max-width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
.contenuto-redazione th, .contenuto-redazione td { padding: .5rem .75rem; border: 1px solid #dcdce3; vertical-align: top; }
.contenuto-redazione th { background: var(--cgil-grigio); font-family: var(--font-titoli); }
.domanda { margin-bottom: .75rem; border: 1px solid #e4e4ea; border-radius: .75rem; background: var(--cgil-carta); }
.domanda summary { padding: .95rem 1.25rem; font-family: var(--font-titoli); font-weight: 700; line-height: 1.35; cursor: pointer; }
.domanda summary::marker { color: var(--cgil-accento); }
.domanda summary:hover { color: var(--cgil-link); }
.domanda[open] { border-color: var(--cgil-rosso); }
.domanda-risposta { padding: 0 1.25rem .5rem; }
.blocco-citazione { border-color: var(--cgil-rosso) !important; font-family: var(--font-titoli); font-size: 1.15rem; }

/* ---- Menu laterale ---- */
.menu-laterale { position: sticky; top: 7rem; max-height: calc(100vh - 8rem); overflow-y: auto; padding: 1.5rem; border-radius: var(--raggio); background: var(--cgil-grigio); }
.menu-laterale-titolo { margin: 0 0 1rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em; }
.menu-laterale ul { margin: 0; padding: 0; list-style: none; }
.menu-laterale a { display: block; padding: .55rem .85rem; border-left: 3px solid transparent; border-radius: 0 .4rem .4rem 0; color: var(--cgil-testo); font-weight: 600; text-decoration: none; }
.menu-laterale a:hover { background: var(--cgil-carta); color: var(--cgil-link); }
.menu-laterale a.attiva { border-left-color: var(--cgil-rosso); background: var(--cgil-carta); color: var(--cgil-link); }

/* ---- Allegati ---- */
.allegati { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.allegati li + li { margin-top: .5rem; }
.allegati a { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .8rem 1rem; border: 1px solid #e4e4ea; border-radius: .75rem; background: var(--cgil-carta); color: var(--cgil-testo); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.allegati a:hover { border-color: var(--cgil-rosso); box-shadow: var(--ombra); color: var(--cgil-link); }
.allegati .icona { flex: 0 0 auto; font-size: 1.2rem; color: var(--cgil-accento); }
.allegato-nome { font-weight: 700; }
.allegato-info { color: var(--cgil-testo-soft); font-size: .85rem; }

/* ---- Filtri degli elenchi ---- */
.filtri { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 2rem; padding: 1.25rem; border-radius: var(--raggio); background: var(--cgil-grigio); }
.filtri .campo { flex: 1 1 12rem; }
.filtri label { display: block; margin-bottom: .3rem; font-family: var(--font-titoli); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.filtri .form-select:focus { border-color: var(--cgil-rosso); box-shadow: 0 0 0 .2rem rgba(208, 2, 27, .2); }
.filtri-azioni { display: flex; align-items: center; gap: 1rem; }
.risultati { margin-bottom: 1.5rem; color: var(--cgil-testo-soft); }

/* ---- Pagina non trovata (404) ---- */
.non-trovata .contenuto-redazione { max-width: 46rem; margin-bottom: 2rem; font-size: 1.1rem; }
.non-trovata-titolo { margin: 2.5rem 0 1rem; font-size: 1.1rem; }
.non-trovata-sezioni { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }

/* ---- Ricerca nel sito ---- */
.filtri-ricerca .campo { flex: 1 1 20rem; }
.risultati-ricerca { margin: 0; padding: 0; list-style: none; }
.risultato { padding: 1.25rem 0; border-top: 1px solid #e4e4ea; }
.risultato:last-child { border-bottom: 1px solid #e4e4ea; }
.risultato .card-notizia-meta { margin-bottom: .4rem; }
.risultato .badge-categoria, .risultato .badge-categoria:hover { background: var(--cgil-rosso-chiaro); color: var(--cgil-link); }
.risultato-titolo { margin: 0 0 .35rem; font-size: 1.2rem; }
.risultato-titolo a { color: var(--cgil-testo); text-decoration: none; }
.risultato-titolo a:hover { color: var(--cgil-accento); text-decoration: underline; }
.risultato-testo { margin: 0; color: var(--cgil-testo-soft); }

/* ---- Barra delle pagine ---- */
.paginazione { margin-top: 3rem; }
.paginazione .pagination { --bs-pagination-color: var(--cgil-testo); --bs-pagination-hover-color: var(--cgil-rosso-scuro); --bs-pagination-focus-color: var(--cgil-rosso-scuro); --bs-pagination-focus-box-shadow: none; --bs-pagination-active-bg: var(--cgil-rosso); --bs-pagination-active-border-color: var(--cgil-rosso); --bs-pagination-border-radius: .5rem; gap: .35rem; margin: 0; }
.paginazione .page-link { min-width: 2.75rem; border-radius: .5rem !important; text-align: center; font-family: var(--font-titoli); font-weight: 700; }

/* ---- Articolo (notizia, evento) ---- */
.articolo-immagine { width: 100%; height: auto; margin-bottom: 2rem; border-radius: var(--raggio); box-shadow: var(--ombra); }
.articolo-sommario { margin-bottom: 1.75rem; padding-left: 1.25rem; border-left: 4px solid var(--cgil-rosso); font-family: var(--font-titoli); font-size: 1.2rem; font-weight: 600; line-height: 1.5; }
.colonna-fissa { position: sticky; top: 7rem; }
/* Testo della notizia: righe di circa 70 caratteri, interlinea ampia */
.articolo .contenuto-redazione { max-width: 44rem; font-size: 1.1rem; line-height: 1.85; }
.articolo .contenuto-redazione p { margin-bottom: 1.15em; }
.articolo .articolo-sommario { max-width: 44rem; }
.riquadro-categoria-logo { display: flex; justify-content: center; margin-bottom: 1rem; padding: 1rem; border-radius: .75rem; background: #fff; }
.riquadro-categoria-logo img { max-width: 70%; height: 80px; width: auto; object-fit: contain; }
.riquadro { margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--raggio); background: var(--cgil-grigio); }
.riquadro:first-child { margin-top: 0; }
.riquadro-titolo, .condividi-titolo { margin: 0 0 .85rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cgil-testo-soft); }
.riquadro dl { margin: 0; }
.riquadro dt { margin-top: .85rem; font-family: var(--font-titoli); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cgil-testo-soft); }
.riquadro dt:first-child { margin-top: 0; }
.riquadro dd { margin: .15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.link-indietro { font-family: var(--font-titoli); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.link-indietro:hover { text-decoration: underline; }

/* ---- Condivisione ---- */
.condividi { padding: 1.5rem; border-radius: var(--raggio); background: var(--cgil-grigio); }
.condividi ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.condividi-link { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 50%; background: var(--cgil-scuro); color: #fff; font-size: 1.15rem; text-decoration: none; transition: background .2s, transform .2s; }
.condividi-link:hover { background: var(--cgil-rosso); color: #fff; transform: translateY(-2px); }
.condividi-link.fatto { background: #1a7f37; }

/* ---- Recapiti e mappe ---- */
.recapiti { margin: 0 0 1rem; padding: 0; list-style: none; }
.recapiti li { display: flex; gap: .75rem; margin-bottom: .6rem; overflow-wrap: anywhere; }
.recapiti .icona { flex: 0 0 auto; margin-top: .3rem; color: var(--cgil-accento); }
.mappa-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; font-size: .9rem; }
.mappa-riquadro { margin-top: 1rem; border-radius: .75rem; overflow: hidden; background: var(--cgil-grigio); }
.modal-body-video { padding: 0; }
.modal-body-video .consenso-terzi { margin: 1.25rem; }
.consenso-terzi { padding: 1.25rem; border: 1px solid #dee2e6; border-radius: .75rem; background: var(--cgil-grigio); }
.consenso-terzi-testo { margin: 0 0 1rem; }
.consenso-terzi-azioni { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.consenso-terzi-link { margin-top: .75rem; }
.mappa .consenso-terzi { margin-top: .75rem; }
.mappa-nota { margin: .4rem 0 0; font-size: .8rem; color: var(--cgil-testo-soft); }

/* ---- Sedi ---- */
.indice-province { margin-bottom: 2.5rem; }
.indice-province .cartina { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
/* Cartina delle province (home e pagina Sedi): ogni provincia ha la sua tinta, nessuna rossa; il nome è sempre scritto */
.prov-catanzaro { --prov: #9fe1cb; --prov-forte: #0f6e56; }
.prov-cosenza { --prov: #b5d4f4; --prov-forte: #185fa5; }
.prov-crotone { --prov: #fac775; --prov-forte: #854f0b; }
.prov-reggio-calabria { --prov: #c0dd97; --prov-forte: #3b6d11; }
.prov-vibo-valentia { --prov: #cecbf6; --prov-forte: #534ab7; }
.cartina { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center; }
.cartina-mappa { display: block; width: 100%; height: auto; }
.cartina-prov polygon { fill: var(--prov); stroke: #fff; stroke-width: 2; stroke-linejoin: round; transition: fill .2s; }
.cartina-prov { text-decoration: none; }
.cartina-prov text { font-family: var(--font-titoli); font-weight: 700; font-size: 10px; text-anchor: middle; fill: var(--cgil-testo); pointer-events: none; transition: fill .2s; }
a.cartina-prov:hover polygon { fill: var(--prov-forte); }
a.cartina-prov:hover text { fill: #fff; }
.cartina-vuota polygon { fill: #e4e4ea; }
.cartina-elenco { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.cartina-voce { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.25rem; background: var(--cgil-carta); border: 2px solid #ececf0; border-radius: var(--raggio); color: var(--cgil-testo); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
a.cartina-voce:hover, a.cartina-voce:focus-visible { border-color: var(--prov-forte); box-shadow: var(--ombra); color: var(--cgil-testo); }
.cartina-pallino { flex: 0 0 1rem; height: 1rem; border-radius: 50%; background: var(--prov-forte, #b9bac4); }
.cartina-nome { font-family: var(--font-titoli); font-weight: 700; font-size: 1.05rem; }
.cartina-numero { margin-left: auto; font-size: .9rem; color: var(--cgil-testo-soft); white-space: nowrap; }
span.cartina-voce { background: var(--cgil-grigio); }
@media (max-width: 767.98px) {
    .cartina, .indice-province .cartina { grid-template-columns: minmax(0, 1fr); }
    .cartina-mappa { max-width: 14rem; margin: 0 auto; }
    .indice-province .cartina-mappa { max-width: 10rem; }
}
.sede { height: 100%; padding: 1.75rem; border-radius: var(--raggio); background: var(--cgil-carta); box-shadow: var(--ombra); }
.sede-tipo { margin: 0 0 .35rem; font-family: var(--font-titoli); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cgil-link); }
.sede h3 { margin-bottom: 1rem; font-size: 1.25rem; overflow-wrap: anywhere; }
@media (min-width: 992px) { .colonna-laterale { padding-left: 2.5rem; } }

/* ---- Pagine in altra lingua ---- */
.sedi-lingua { margin-top: 3rem; }
.sedi-lingua-provincia { margin: 1.75rem 0 1rem; font-size: 1.2rem; }
.sedi-lingua .sede h4 { margin: 0 0 .9rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.sede-dati { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.sede-dati dt { font-family: var(--font-titoli); font-weight: 700; font-size: .85rem; color: var(--cgil-testo-soft); }
.sede-dati dd { margin: 0; overflow-wrap: anywhere; }
.sedi-lingua-tutte { margin-top: 1.5rem; }
.fa-fede { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); font-size: .95rem; color: var(--cgil-testo-soft); }
/* Da destra a sinistra (arabo): solo il contenuto; testata e piè di pagina restano in italiano. Bootstrap non specchia da solo. */
main[dir="rtl"] .testata h1::after, main[dir="rtl"] .titolo-parte::after { left: auto; right: 0; }
main[dir="rtl"] .contenuto-redazione ul:not([class]), main[dir="rtl"] .contenuto-redazione ol:not([class]) { padding-left: 0; padding-right: 1.4rem; }
main[dir="rtl"] .contenuto-redazione blockquote:not([class]) { padding: .25rem 1.25rem .25rem 0; border-left: 0; border-right: 4px solid var(--cgil-rosso); }
main[dir="rtl"] .sede-dati dd[dir="ltr"] { text-align: end; }

/* ---- Glossario ---- */
/* Parole del glossario collegate nei testi (fase 2): sottolineatura a puntini, colore del testo, rosso al passaggio. */
.glossario-link { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.glossario-link:hover, .glossario-link:focus-visible { color: var(--cgil-link); text-decoration-style: solid; }
.glossario-intro { margin-bottom: 1.5rem; }
.glossario-indice { position: sticky; top: 5.25rem; z-index: 10; margin: 0 0 2rem; padding: .6rem 0; background: var(--cgil-carta); }
.glossario-indice ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.glossario-indice a { display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; border-radius: .5rem; background: var(--cgil-grigio); font-family: var(--font-titoli); font-weight: 700; color: var(--cgil-testo); text-decoration: none; }
.glossario-indice a:hover, .glossario-indice a:focus-visible { background: var(--cgil-rosso); color: #fff; }
/* Lo scostamento si somma allo scroll-padding-top di html (6rem): testata + indice fissi fanno circa 9rem. */
.glossario-lettera { scroll-margin-top: 3.5rem; }
dl.glossario { margin: 0 0 2.5rem; }
dl.glossario dt { position: relative; margin-top: 1.5rem; padding-right: 1.5rem; font-family: var(--font-titoli); font-size: 1.15rem; font-weight: 700; scroll-margin-top: 3.5rem; }
dl.glossario dt:target .glossario-termine { color: var(--cgil-link); }
.glossario-varianti { display: block; margin-top: .15rem; font-family: var(--font-testo, inherit); font-size: .85rem; font-weight: 400; color: var(--cgil-testo-soft); }
.glossario-ancora { position: absolute; top: 0; right: 0; color: var(--cgil-testo-soft); text-decoration: none; opacity: 0; }
dl.glossario dt:hover .glossario-ancora, .glossario-ancora:focus-visible { opacity: 1; }
dl.glossario dd { margin: .5rem 0 0; }
.glossario-approfondisci { margin: .5rem 0 0; font-size: .95rem; }
@media print { .glossario-indice, .glossario-ancora { display: none; } }

/* ---- Documenti ---- */
.documenti { margin: 0; padding: 0; list-style: none; }
.documenti li + li { margin-top: .75rem; }
.documento { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid #e4e4ea; border-radius: var(--raggio); background: var(--cgil-carta); color: var(--cgil-testo); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.documento:hover { border-color: var(--cgil-rosso); box-shadow: var(--ombra); color: var(--cgil-testo); }
.documento-icona { display: grid; place-items: center; flex: 0 0 3rem; height: 3rem; border-radius: .75rem; background: var(--cgil-rosso-chiaro); color: var(--cgil-accento); font-size: 1.4rem; }
.documento-corpo { flex: 1 1 auto; min-width: 0; }
.documento-nome { display: block; font-family: var(--font-titoli); font-weight: 700; overflow-wrap: anywhere; }
.documento:hover .documento-nome { color: var(--cgil-link); }
.documento-info { display: block; margin-top: .15rem; font-size: .85rem; color: var(--cgil-testo-soft); }
.documento-scarica { flex: 0 0 auto; font-size: 1.2rem; color: var(--cgil-testo-soft); }

/* ---- Footer ---- */
.cgil-footer { margin-top: auto; background: var(--cgil-scuro); color: #c9cad3; }
.cgil-footer a { color: #fff; text-decoration: none; }
.cgil-footer a:hover { text-decoration: underline; }
.cgil-footer .cgil-marchio { margin-bottom: 1.25rem; }
.cgil-footer .cgil-marchio img { box-sizing: content-box; height: 44px; padding: 6px; background: #fff; border-radius: 6px; }
.cgil-footer .cgil-marchio-nome { color: #fff; font-size: 1.5rem; }
.footer-titolo { position: relative; margin-bottom: 1rem; padding-bottom: .6rem; font-size: 1.1rem; color: #fff; }
.footer-titolo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 3px; background: var(--cgil-rosso); }
.cgil-footer .list-unstyled li { margin-bottom: .4rem; }
.social-tondo { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-right: .4rem; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 1.1rem; transition: background .2s; }
.social-tondo:hover { background: var(--cgil-rosso); text-decoration: none; }
.cgil-footer-bottom { padding: 1rem 0; background: var(--cgil-scuro-2); font-size: .8rem; }
.cgil-footer-bottom a { color: #c9cad3; }
.cgil-footer-bottom .versione { color: #a4a6b3; }
.cgil-footer-bottom a, .cgil-footer p a { text-decoration: underline; }

/* ---- Schermi piccoli ---- */
@media (max-width: 991.98px) {
    .hero-riga { min-height: 0; padding: 2rem 0; }
    .hero-immagine { max-height: 170px; }
    .hero-testo { text-align: center; }
    .hero-sottotitolo { margin-inline: auto; }
    .sezione { padding: 3rem 0; }
    .sezione-pagina { padding-top: 2.25rem; padding-bottom: 3rem; }
    .menu-laterale { position: static; max-height: none; }
    /* Su schermi stretti una tabella larga scorre in orizzontale invece di allargare la pagina. */
    .contenuto-redazione table { display: block; overflow-x: auto; }
    .sezione-titolo h2 { font-size: 1.6rem; }
    .sezione-titolo { align-items: flex-start; flex-direction: column; gap: .5rem; }
    .chiamata .btn { width: 100%; }
    .colonna-fissa { position: static; }
    .lightbox .modal-body { padding: 0 .5rem 4.5rem; }
    .lightbox-freccia { top: auto; bottom: .75rem; transform: none; }
    .lightbox-precedente { left: calc(50% - 3.5rem); }
    .lightbox-successiva { right: calc(50% - 3.5rem); }
}

@media (max-width: 1199.98px) {
    .cgil-header .nav-link::after { display: none; }
    .cgil-header .navbar-nav { padding: .5rem 0 1rem; }
    .cgil-header .navbar-collapse { max-height: calc(100dvh - 5rem); overflow-y: auto; }
    .cgil-header .nav-link.active { border-left: 3px solid var(--cgil-rosso); padding-left: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
    .card-notizia:hover, .card-notizia:hover .card-notizia-segnaposto img, .notizia-breve:hover, .categoria-card:hover, .servizio:hover, .video-card:hover img, .album-card:hover img, .banner-card:hover img, .galleria a:hover img, .video-card:hover .play > span, .condividi-link:hover { transform: none; }
}

/* ---- Cookie: avviso e preferenze ---- */
.avviso-cookie { position: sticky; bottom: 0; z-index: 1030; padding: 1rem 0; background: var(--cgil-scuro-2); color: #fff; box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .25); }
html:has(.avviso-cookie) { scroll-padding-bottom: 13rem; }
@media (max-height: 30rem) { .avviso-cookie { position: static; } }
/* Stampa: solo il contenuto, senza menu, colonna laterale, condivisione e footer */
@media print {
    .cgil-topbar, .cgil-header, .cgil-footer, .avviso-cookie, .salta-al-contenuto, .colonna-laterale, .condividi, .paginazione,
    .filtri, .link-indietro, .mappa-azioni, .consenso-terzi, .hero, .sezione-banner, .sezione-bisogni, .cartina-mappa, .btn { display: none !important; }
    body { font-size: 11pt; color: #000; background: #fff; }
    .testata { padding: 0 0 .75rem; background: none; border: 0; }
    .testata h1::after { display: none; }
    .sezione-pagina { padding: 1rem 0; }
    .sezione { padding: 1.5rem 0; }
    .sezione-grigia, .riquadro { background: none; }
    .articolo, [class*="col-lg-"] { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
    .articolo .contenuto-redazione, .articolo .articolo-sommario { max-width: none; }
    .articolo-immagine, .card-notizia, .evento, .sede { box-shadow: none; border: 1px solid #ccc; }
    a { color: #000; }
    .contenuto-redazione a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}
.avviso-cookie a { color: #fff; text-decoration: underline; }
.avviso-cookie-titolo { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; }
.avviso-cookie-riga { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; }
.avviso-cookie .btn { font-weight: 700; }
.avviso-cookie :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.link-footer { padding: 0; border: 0; background: none; color: #c9cad3; text-decoration: underline; font: inherit; }
.link-footer:hover, .link-footer:focus-visible { color: #fff; }

/* ---- Passaggi tra le pagine ----
   Il browser sfuma da una pagina all'altra; titolo e immagine della scheda toccata diventano quelli della pagina
   (i nomi sulla scheda li mette js/avvio.js). Dove non è previsto (Firefox) il sito resta com'è. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .cgil-header { view-transition-name: testata-sito; }
    .testata h1 { view-transition-name: titolo-pagina; width: fit-content; }
    .articolo-immagine, .testata-logo { view-transition-name: immagine-pagina; }
    ::view-transition-group(*) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
    /* Il titolo non si deforma: resta della sua misura e sfuma mentre si sposta */
    ::view-transition-old(titolo-pagina), ::view-transition-new(titolo-pagina) { height: 100%; object-fit: none; object-position: left top; }
    ::view-transition-old(immagine-pagina), ::view-transition-new(immagine-pagina) { height: 100%; object-fit: cover; }
    ::view-transition-group(immagine-pagina) { border-radius: var(--raggio); overflow: hidden; }
}

/* ---- La piazza (in fondo alla home): solo decorazione ---- */
.piazza { --p-cielo-1: #fff6ee; --p-cielo-2: #fde0d2; --p-astro: #fbd3bf; --p-casa-1: #f0c7ab; --p-casa-2: #e8b79c; --p-tetto: #c98363; --p-finestra: #fcefe6; --p-terra: #ecd3c3; --p-asta: #7a6a62;
    line-height: 0; background: linear-gradient(var(--p-cielo-1), var(--p-cielo-2)); }
.piazza svg { display: block; width: 100%; height: clamp(9rem, 24vw, 17rem); }
.piazza-cielo-astro { fill: var(--p-astro); }
.piazza-casa-1 { fill: var(--p-casa-1); }
.piazza-casa-2 { fill: var(--p-casa-2); }
.piazza-tetto { fill: var(--p-tetto); }
.piazza-finestra { fill: var(--p-finestra); }
.piazza-terra { fill: var(--p-terra); }
.piazza-asta { fill: var(--p-asta); }
.piazza-telo { fill: var(--cgil-rosso); }
.piazza-telo-2 { fill: var(--cgil-rosso-scuro); }
.piazza-bandiera, .piazza-telo, .piazza-telo-2 { transform-box: fill-box; }
.piazza-bandiera { transform-origin: 50% 100%; }
.piazza-telo, .piazza-telo-2 { transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
    .piazza-telo, .piazza-telo-2 { animation: piazza-sventola 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.37s); }
    /* Dove il browser lega le animazioni allo scorrimento, le bandiere si alzano una dopo l'altra mentre la piazza entra nello schermo */
    @supports (animation-timeline: view()) {
        .piazza-bandiera { animation: piazza-alza linear both; animation-timeline: view(); animation-range: entry calc(10% + var(--i) * 7%) entry calc(60% + var(--i) * 7%); }
    }
}
@keyframes piazza-sventola { from { transform: skewY(-5deg) scaleX(1); } to { transform: skewY(5deg) scaleX(.94); } }
@keyframes piazza-alza { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ---- Tema scuro ----
   Segue l'impostazione del dispositivo: js/avvio.js mette data-bs-theme="dark" su <html> (così anche Bootstrap
   passa al scuro). Il rosso pieno resta per i fondi; per i testi si usa un rosso più chiaro, leggibile sul fondo scuro. */
@media screen {
    [data-bs-theme="dark"] {
        --cgil-fondo: #16171d;
        --cgil-carta: #25262f;
        --cgil-grigio: #1c1d25;
        --cgil-testo: #ececf1;
        --cgil-testo-soft: #b1b3c0;
        --cgil-rosso-chiaro: #43191f;
        --cgil-link: #ffa3ab;
        --cgil-accento: #ff7f8a;
        --cgil-fuoco: #8ab4f8;
        --ombra: 0 10px 30px rgba(0, 0, 0, .35);
        --ombra-hover: 0 18px 40px rgba(0, 0, 0, .5);
        --bs-body-bg: #25262f;
        --bs-body-bg-rgb: 37, 38, 47;
        --bs-body-color: #ececf1;
        --bs-body-color-rgb: 236, 236, 241;
        --bs-secondary-color: #b1b3c0;
        --bs-border-color: #3a3b47;
        --bs-link-color-rgb: 255, 163, 171;
        --bs-link-hover-color-rgb: 255, 127, 138;
    }
    [data-bs-theme="dark"] :is(.bisogno, .mestiere, .categoria-card, .servizio, .domanda, .allegati a, .documento, .cartina-voce, .eventi-passati .evento, .menu-contatti, .testata, .consenso-terzi, .risultato) { border-color: #3a3b47; }
    [data-bs-theme="dark"] :is(.bisogno, .mestiere, .categoria-card, .servizio, .allegati a, .documento):is(:hover, :focus-visible), [data-bs-theme="dark"] .domanda[open] { border-color: var(--cgil-accento); }
    [data-bs-theme="dark"] .mestiere { border-left-color: var(--cgil-rosso); }
    [data-bs-theme="dark"] :is(.contenuto-redazione th, .contenuto-redazione td) { border-color: #3a3b47; }
    [data-bs-theme="dark"] .text-muted { color: var(--cgil-testo-soft) !important; }
    [data-bs-theme="dark"] .avviso-home { background: #453a12; border-bottom-color: #62531c; }
    /* I loghi delle categorie sono su fondo bianco: restano su un cartoncino chiaro */
    [data-bs-theme="dark"] :is(.categoria-card, .servizio-testa) img { box-sizing: content-box; padding: .4rem .6rem; border-radius: .5rem; background: #fff; }
    [data-bs-theme="dark"] .card-notizia-segnaposto { background: #dcdce4; }
    [data-bs-theme="dark"] .card-notizia-segnaposto::after { background: #fdecee; }
    [data-bs-theme="dark"] .segnaposto-anno { color: #6b6c78; }
    [data-bs-theme="dark"] .segnaposto-sigla { color: #d0021b; }
    /* Cartina di sera: tinte piene, nomi chiari */
    [data-bs-theme="dark"] .prov-catanzaro { --prov: #0f6e56; --prov-forte: #9fe1cb; }
    [data-bs-theme="dark"] .prov-cosenza { --prov: #185fa5; --prov-forte: #b5d4f4; }
    [data-bs-theme="dark"] .prov-crotone { --prov: #854f0b; --prov-forte: #fac775; }
    [data-bs-theme="dark"] .prov-reggio-calabria { --prov: #3b6d11; --prov-forte: #c0dd97; }
    [data-bs-theme="dark"] .prov-vibo-valentia { --prov: #534ab7; --prov-forte: #cecbf6; }
    [data-bs-theme="dark"] .cartina-prov polygon { stroke: var(--cgil-fondo); }
    [data-bs-theme="dark"] .cartina-prov text { fill: #fff; }
    [data-bs-theme="dark"] a.cartina-prov:hover text { fill: #16171d; }
    [data-bs-theme="dark"] .cartina-vuota polygon { fill: #3a3b47; }
    [data-bs-theme="dark"] .sezione-grigia .cartina-prov polygon { stroke: var(--cgil-grigio); }
    /* La piazza di sera: cielo blu, luna, finestre accese */
    [data-bs-theme="dark"] .piazza { --p-cielo-1: #1b1d33; --p-cielo-2: #3a2d4d; --p-astro: #4b3a60; --p-casa-1: #2c2e45; --p-casa-2: #25273b; --p-tetto: #1a1b2b; --p-finestra: #ffd98a; --p-terra: #20212d; --p-asta: #8d8fa3; }
}
@media screen {
    /* Il marchio ha le lettere nere: in testata sta su un cartoncino bianco, come nel piè di pagina */
    [data-bs-theme="dark"] .cgil-header .cgil-marchio img { box-sizing: content-box; padding: 4px; border-radius: 6px; background: #fff; }
}