.intro-list {
    word-break: break-all;
}
.lead-img img {
    height: unset;
    width: 200px;
    object-fit: cover;
}

/* ========================================================================
   Design tokens override — CISL Scuola Emilia Romagna
   Allinea il rendering ai token in resources/utils/_variables.scss.
   ======================================================================== */

/* Tipografia base */
body {
    font-size: 15px;
    line-height: 1.65;
}

/* Gerarchia titoli */
h1,
.h1 {
    font-size: 36px;
    line-height: 1.25;
}
h2,
.h2 {
    font-size: 30px;
    line-height: 1.25;
}
h3,
.h3 {
    font-size: 24px;
    line-height: 1.3;
}
h4,
.h4 {
    font-size: 18px;
    line-height: 1.35;
}
h5,
.h5 {
    font-size: 16px;
    line-height: 1.4;
}
h6,
.h6 {
    font-size: 14px;
    line-height: 1.4;
}

@media (max-width: 575.98px) {
    h1,
    .h1 {
        font-size: 28px;
    }
    h2,
    .h2 {
        font-size: 24px;
    }
    h3,
    .h3 {
        font-size: 20px;
    }
}

/* Sezione standard — ritmo verticale coerente.
   .site-section è la classe canonica per nuove sezioni.
   Le 5 classi-sezione esistenti del template originale vengono normalizzate
   allo stesso ritmo, senza dover modificare ogni blade. */
.site-section,
section.section,
section.benefit-section,
section.benefits-section,
section.about-section-two,
section.contact-sec {
    padding-top: 80px;
    padding-bottom: 80px;
}
.site-section--sm {
    padding-top: 48px;
    padding-bottom: 48px;
}

@media (max-width: 767.98px) {
    .site-section,
    section.section,
    section.benefit-section,
    section.benefits-section,
    section.about-section-two,
    section.contact-sec {
        padding-top: 56px;
        padding-bottom: 56px;
    }
    .site-section--sm {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

/* ========================================================================
   Header sito pubblico — barra bianca, logo a colori, CTA rossa.
   Link scuri; voce attiva e hover evidenziate in verde CISL.
   ======================================================================== */
:root {
    --cisl-green: #0a744f;
    --cisl-green-dark: #075a3d;
    --cisl-red: #c42031;
    --cisl-red-dark: #a81726;
    --header-text: #5a616b; /* grigio antracite per le voci del nav, meno duro del nero */
}

header.header-three,
header.header-three.fixed {
  background-color: #fff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* Leggero rilievo: ombra corta e netta + ombra ampia e diffusa */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Scroll: script.js aggiunge .fixed all'header oltre 130px e il tema ci lega un'animazione
   fadeInDown + transition "all 0.9s", che sembravano un nuovo ingresso dell'header. Le togliamo. */
header.header-three,
header.header-three.fixed {
  animation: none !important;
  transition: none !important;
}
/* Fuori dalla home l'header è sempre sticky: quando diventa .fixed non esce dal flusso
   e il contenuto non salta in su di 70px. In home resta position-fixed (classe Bootstrap). */
header.header-three:not(.position-fixed),
header.header-three.fixed:not(.position-fixed) {
  position: sticky !important;
  top: 0 !important;
}

/* Link "Vai al contenuto": visibile solo quando riceve il focus da tastiera */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 2000;
    padding: 10px 16px;
    background: #fff;
    color: var(--cisl-green-dark);
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.skip-link:focus {
    top: 12px;
}
#contenuto-principale:focus {
    outline: none;
}

/* Logo a colori originali */
header.header-three .navbar-logo .header-logo.logo-white {
    display: inline-flex !important;
    align-items: center;
}
header.header-three .navbar-logo .header-logo.logo-dark {
    display: none !important;
}
header.header-three .navbar-logo .header-logo img {
    height: 56px;
    max-height: none;
    width: auto;
    display: block;
    /* Ombra che segue la sagoma del logo */
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.12));
}

/* Icona menu mobile verde, toggle tema scuro */
header.header-three .navbar-header #mobile_btn .bar-icon span {
    background: var(--cisl-green) !important;
}
header.header-three .header-btn .theme-toggle {
    color: var(--header-text) !important;
}

/* Focus da tastiera sempre visibile */
header.header-three a:focus-visible,
header.header-three button:focus-visible {
    outline: 2px solid var(--cisl-green);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Area riservata: stesso stile delle voci del menu, separata da una linea verticale */
header.header-three .header-btn {
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    margin-left: 24px; /* stessa distanza ai due lati del separatore */
    padding-left: 24px;
    gap: 28px;
    height: 28px;
}
header.header-three .header-auth-link {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: var(--header-text);
    transition: color 0.15s ease;
}
header.header-three .header-auth-link:hover,
header.header-three .header-auth-menu:hover > .header-auth-link,
header.header-three .header-auth-menu:focus-within > .header-auth-link,
header.header-three .header-auth-link.active {
    color: var(--cisl-green);
}
header.header-three .header-auth-link.active {
    font-weight: 600;
}

/* Tendina "Area riservata": ricalca quella di "Settori" (template + override sotto),
   allineata a destra perché sta sul bordo della pagina. */
header.header-three .header-auth-menu {
    position: relative;
    padding: 8px 0; /* come i <li> del menu: la tendina parte alla stessa altezza */
}
header.header-three .auth-submenu {
    position: absolute;
    top: 100%;
    right: -16px;
    z-index: 1000;
    min-width: 150px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: scale(1, 0);
    transform-origin: 0 0;
    transition: all 0.2s ease;
}
header.header-three .header-auth-menu:hover > .auth-submenu,
header.header-three .header-auth-menu:focus-within > .auth-submenu {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
header.header-three .auth-submenu a {
    display: block;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-align: right; /* allineate al bordo destro, come la voce "Area riservata" */
    color: var(--header-text);
    transition: all 0.35s ease;
}
/* Specchio di "Settori": in hover la voce scivola verso sinistra */
header.header-three .auth-submenu a:hover,
header.header-three .auth-submenu a:focus-visible {
    padding-right: 20px;
}
header.header-three .auth-submenu .auth-submenu-login:hover {
    color: var(--cisl-green);
}
header.header-three .auth-submenu .auth-submenu-register:hover {
    color: var(--cisl-red);
}
header.header-three .auth-submenu a:focus-visible {
    outline-offset: -2px;
}

/* Linea sotto le voci (menu e accesso): parte dal centro della scritta e si
   allarga verso i lati in hover; resta piena sulla voce attiva. */
header.header-three .header-nav .main-menu-wrapper .main-nav > li > a::after,
header.header-three .header-auth-link::after {
    content: "";
    position: absolute;
    left: 0 !important; /* il template sposta l'::after delle voci attive con sottomenu */
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--cisl-green);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.18s ease-out;
}
header.header-three .header-auth-link:hover::after,
header.header-three .header-auth-menu:hover > .header-auth-link::after,
header.header-three .header-auth-menu:focus-within > .header-auth-link::after,
header.header-three .header-auth-link:focus-visible::after,
header.header-three .header-auth-link.active::after {
    transform: scaleX(1);
}

@media (min-width: 992px) {
    header .header-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 70px; /* altezza fissa della barra su desktop */
    }
    /* Logo e nav più vicini ai bordi (px-lg-5 = 48px). A destra un po' di spazio in più:
     il logo è un blocco pieno, il testo sottile dei link a pari distanza sembra più attaccato al bordo. */
    header.header-three .container-fluid {
        padding-left: 20px !important;
        padding-right: 32px !important;
    }
    header .header-nav .main-menu-wrapper {
        margin-left: auto;
        margin-right: 0; /* le voci arrivano a ridosso del separatore (lo spazio lo dà il padding sotto) */
        padding: 10px 0; /* il template usa 15px: barra un po' più bassa */
    }
    header .header-nav .main-menu-wrapper .main-nav {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 0;
        padding-right: 0;
    }
    /* L'ultima voce visibile è quella prima di "Area riservata" (solo mobile, nascosta qui):
     senza questo si porterebbe dietro il margine destro delle voci intermedie */
    header.header-three .main-menu-wrapper .main-nav > li:nth-last-child(2) {
        margin-right: 0 !important;
    }

    /* Link scuri; hover e voce attiva in verde, con la linea animata sotto */
    header.header-three .header-nav .main-menu-wrapper .main-nav > li > a {
        color: var(--header-text) !important;
        font-size: 14px;
        transition: color 0.15s ease;
    }
    header.header-three .header-nav .main-menu-wrapper .main-nav > li > a:hover,
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li:focus-within
        > a {
        color: var(--cisl-green) !important;
    }
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li.active
        > a {
        color: var(--cisl-green) !important;
        font-weight: 600;
    }
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li
        > a:hover::after,
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li:focus-within
        > a::after,
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li.active
        > a::after {
        transform: scaleX(1);
    }

    /* Il sottomenu si apre anche navigando con la tastiera, non solo in hover */
    header
        .main-menu-wrapper
        .main-nav
        li.has-submenu:focus-within
        > ul.submenu {
        visibility: visible;
        opacity: 1;
        margin-top: 0;
        transform: scale(1);
    }
    header.header-three .main-nav .submenu a:focus-visible {
        outline-offset: -2px;
    }

    /* Tendina (es. Settori): angoli arrotondati, un filo di bordo e ombra morbida */
    header.header-three .main-menu-wrapper .main-nav > li > ul.submenu,
    header.header-three
        .main-menu-wrapper
        .main-nav
        li.has-submenu:hover
        > ul.submenu {
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.08),
            0 12px 28px rgba(0, 0, 0, 0.12);
        padding: 6px;
        min-width: 160px;
        margin-top: 0; /* nessuno spazio vuoto: il mouse non deve "perdere" la tendina */
    }
    header.header-three .main-menu-wrapper .main-nav > li .submenu li a {
        padding-top: 9px;
        padding-bottom: 9px;
        color: var(--header-text);
    }
}

/* Voci della tendina: in hover la voce scivola a destra (animazione del template)
   e il testo diventa verde invece che rosso */
header.header-three
    .header-nav
    .main-menu-wrapper
    .main-nav
    > li
    .submenu
    li
    a:hover,
header.header-three
    .header-nav
    .main-menu-wrapper
    .main-nav
    > li
    .submenu
    li.active
    > a {
    color: var(--cisl-green);
}

/* Schermi desktop stretti (992-1199px): stringe logo, voci e link di accesso
   per farci stare tutto (qui non c'è ancora il cassetto mobile). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    header.header-three .container-fluid {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    header.header-three .navbar-logo .header-logo img {
        height: 50px;
    }
    header.header-three .main-menu-wrapper .main-nav > li {
        margin-right: 16px !important;
    }
    header.header-three .main-menu-wrapper .main-nav > li:last-child {
        margin-right: 0 !important;
    }
    header.header-three .header-nav .main-menu-wrapper .main-nav > li > a,
    header.header-three .header-auth-link {
        font-size: 13px;
    }
    header.header-three .header-btn {
        margin-left: 16px;
        padding-left: 16px;
        gap: 16px;
    }
}

@media (max-width: 991.98px) {
    /* Barra: logo a sinistra, hamburger a destra */
    header.header-three .header-nav {
        height: 64px;
        display: flex;
        align-items: center;
    }
    header.header-three .navbar-header {
        display: flex;
        align-items: center;
        width: 100%;
        height: 64px;
    }
    header.header-three .navbar-header #mobile_btn {
        order: 2;
        position: static !important;
        margin: 0 -10px 0 auto;
        padding: 10px; /* area di tocco di almeno 44px */
    }
    header.header-three .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    header.header-three .navbar-logo {
        order: 1;
    }
    header.header-three .navbar-logo .header-logo img {
        height: 48px;
        width: auto;
        max-width: calc(100vw - 100px); /* non tocca mai l'hamburger */
        object-fit: contain; /* se si restringe, mantiene le proporzioni */
    }

    /* Menu laterale: entra da destra sotto la barra, così l'hamburger resta visibile
     e diventa la X per chiuderlo */
    header.header-three .header-nav .main-menu-wrapper {
        position: fixed !important;
        top: 64px;
        bottom: 0;
        left: auto;
        right: 0;
        width: min(300px, 85vw);
        overflow-y: auto;
        overscroll-behavior: contain; /* lo scorrimento dentro il menu non passa alla pagina */
        padding: 0 0 16px;
        background: #fff;
        /* Stessa elevazione dell'header (stessa ombra, ruotata sul lato sinistro);
       clip-path taglia l'ombra in alto, in basso e a destra, lasciandola solo a sinistra */
        box-shadow:
            -1px 0 3px rgba(0, 0, 0, 0.06),
            -6px 0 20px rgba(0, 0, 0, 0.08);
        clip-path: inset(0 0 0 -40px);
        border-top: 1px solid rgba(0, 0, 0, 0.08); /* unica separazione visibile con l'header */
        transform: translateX(100%) !important;
        transition: transform 0.3s ease-out;
    }
    .menu-opened header.header-three .header-nav .main-menu-wrapper {
        transform: translateX(0) !important;
    }
    header.header-three .main-menu-wrapper .menu-header {
        display: none !important;
    }

    /* Hamburger che diventa una X quando il menu è aperto */
    header.header-three #mobile_btn .bar-icon span {
        float: none;
        transition:
            transform 0.25s ease,
            opacity 0.2s ease,
            width 0.25s ease,
            background-color 0.25s ease;
    }
    /* Hamburger verde, X rossa */
    .menu-opened header.header-three .navbar-header #mobile_btn .bar-icon span {
        background: var(--cisl-red) !important;
    }
    .menu-opened header.header-three #mobile_btn .bar-icon span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-opened header.header-three #mobile_btn .bar-icon span:nth-child(2) {
        opacity: 0;
    }
    .menu-opened header.header-three #mobile_btn .bar-icon span:nth-child(3) {
        width: 31px;
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Voci del pannello */
    header.header-three .header-nav .main-menu-wrapper .main-nav {
        padding: 8px 20px 0;
    }
    header.header-three .header-nav .main-menu-wrapper .main-nav > li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li:last-child {
        border-bottom: 0;
    }
    header.header-three .header-nav .main-menu-wrapper .main-nav > li > a {
        padding: 14px 4px;
        font-size: 16px;
        color: var(--header-text) !important;
    }
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li.active
        > a,
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li
        > a.submenu {
        color: var(--cisl-green) !important;
        font-weight: 600;
    }

    /* Freccia per le voci che si espandono (Settori, Area riservata) */
    header.header-three .main-nav > li.has-submenu > a::before {
        content: "";
        position: absolute;
        right: 8px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        transition: transform 0.2s ease;
    }
    header.header-three .main-nav > li.has-submenu > a.submenu::before {
        transform: translateY(-30%) rotate(-135deg);
    }

    /* Sottovoci: chiuse finché non si tocca la voce (il JS del template le apre con slideDown) */
    header.header-three .main-nav > li > ul.submenu {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0 0 10px 12px;
    }
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li
        .submenu
        li
        a,
    header.header-three .nav-mobile-logout {
        display: block;
        width: 100%;
        padding: 10px 4px;
        font-size: 15px;
        font-weight: 500;
        text-align: left;
        color: var(--header-text);
        background: none;
        border: 0;
    }
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        > li
        .submenu
        li
        a:hover {
        padding-left: 8px;
    }
    header.header-three
        .header-nav
        .main-menu-wrapper
        .main-nav
        .auth-submenu-register:hover,
    header.header-three .nav-mobile-logout:hover {
        color: var(--cisl-red);
    }
}

@media (prefers-reduced-motion: reduce) {
    header.header-three .main-nav > li > a::after,
    header.header-three .header-auth-link::after {
        transition: none !important;
    }
    header,
    header.fixed {
        animation: none !important;
        transition: none !important;
    }
}

/* Niente scorrimento orizzontale: alcune animazioni (data-aos="fade-left") partono
   fuori dallo schermo e su mobile allargavano la pagina, tagliando l'header a destra */
html,
body {
    overflow-x: hidden;
}
@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
    /* il tema dà al body anche overflow-y: auto, che lo rende un contenitore di scorrimento:
       l'header sticky (fuori dalla home) si aggancia al body, che non scorre, e sparisce con la pagina */
    body {
        overflow-y: visible;
    }
}

/* Menu mobile aperto: la pagina sotto non scorre. Il template blocca solo il body,
   che su iOS non basta: blocchiamo anche html e i gesti sull'area scurita. */
html.menu-opened,
html.menu-opened body {
    overflow: hidden !important;
}
/* sul body "clip" invece di "hidden": hidden lo rende un contenitore di scorrimento e l'header sticky
   (fuori dalla home) si aggancia al body e sparisce con la pagina già scorsa. Lo scorrimento lo blocca html */
@supports (overflow: clip) {
    html.menu-opened body {
        overflow: clip !important;
    }
}
.sidebar-overlay.opened {
    touch-action: none;
}


/* =========================================
   PAGE HERO (riutilizzabile)
   Fascia iniziale di tutte le pagine (tranne home, pagine di dettaglio e area riservata):
   titolo grande verde in maiuscolo, sottotitolo e testo facoltativi, centrati su fondo sfumato.
   Uso: @include('website.partials.page-hero', ['title' => ..., 'subtitle' => ..., 'lead' => ...])
   ========================================= */

.page-hero {
    background: #ffffff;
}

/* alone verde morbido centrato dietro il titolo e base da un verde quasi bianco al bianco:
   la fascia si chiude pulita sul contenuto sotto. Il verde del titolo resta sopra 5:1 di contrasto */
.page-hero .cisl-gradient-bg {
    background:
        radial-gradient(ellipse 55% 85% at 50% 30%, rgba(10, 116, 79, 0.10) 0%, rgba(10, 116, 79, 0) 70%),
        linear-gradient(180deg, #f1f8f4 0%, #ffffff 100%);
}

.page-hero-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 30px 0 34px;
}

/* i titoli brevi (una parola, es. "Convenzioni") stanno su una riga; quelli lunghi
   vanno a capo con righe bilanciate invece di uscire dallo schermo */
.page-hero-title {
    margin: 0;
    max-width: 100%;
    color: var(--cisl-green);
    font-size: clamp(30px, 7vw, 90px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-wrap: balance;
}

/* colori e interlinea come titoli e paragrafi della home (una parte del sottotitolo può essere in verde nel markup) */
.page-hero-subtitle {
    max-width: 820px;
    margin: 0;
    color: var(--gray-900);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.page-hero-lead {
    max-width: 760px;
    margin: 0;
    color: var(--gray-600);
    font-size: 16px;
    line-height: 1.5;
    text-wrap: pretty;
}

@media (max-width: 991.98px) {
    .page-hero-head {
        padding: 24px 0 28px;
        gap: 11px;
    }
}

/* Telefono: titolo più grande (una parola riempie quasi tutta la riga), testo sotto più piccolo */
@media (max-width: 767.98px) {
    .page-hero-title {
        font-size: 11vw;
    }

    .page-hero-lead {
        font-size: 14px;
    }
}


/* Iscriviti CISL — visual del tesseramento accanto al claim */
.tesseramento-image {
    text-align: center;
}
.tesseramento-image img {
    max-height: 420px;
    width: auto;
    display: inline-block;
}
@media (max-width: 991.98px) {
    .tesseramento-image img {
        max-height: 320px;
    }
}

/* Pattern utility — pattern ripetuti estratti dagli inline style */
.icon-circle-64 {
    width: 64px;
    height: 64px;
}
.avatar-64 {
    width: 64px;
    height: 64px;
    object-fit: cover;
}
.staff-photo-portrait {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.territorio-logo {
    max-height: 60px;
}
.territorio-logo--lg {
    max-height: 80px;
}
.filter-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.pdf-icon-badge {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #dc3545 0%, #e55d6a 100%);
}

/* Course card — gerarchia titolo vs prezzo */
.course-item .title,
.course-item-three .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}
.course-item .title a,
.course-item-three .title a {
    color: inherit;
}
.course-price-badge {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

/* Settori - contenuto stile magazine */
.settore-content h4 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.settore-content p {
    margin-bottom: 1.25rem;
}
.settore-content p.lead {
    margin-bottom: 1.5rem;
}

/* Territorio */
.territorio-intro p {
    margin-bottom: 1rem;
}
.territorio-segreteria {
    padding: 1rem;
}
.territorio-sede {
    background-color: #f8f9fa;
}
.territorio-sede h5 {
    font-size: 1.1rem;
}

/* CISL gradient background utility */
.has-cisl-gradient {
    position: relative;
    overflow: hidden;
}
.has-cisl-gradient > .container,
.has-cisl-gradient > .row {
    position: relative;
    z-index: 1;
}
.cisl-gradient-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(118, 194, 140, 0.35) 0%,
            rgba(118, 194, 140, 0) 35%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(10, 116, 79, 0.25) 0%,
            rgba(10, 116, 79, 0) 40%
        ),
        linear-gradient(180deg, #f4faf6 0%, #e5f1ec 100%);
}

/* Padding base per .latest-blog ovunque (non solo dentro .home-3) */
.latest-blog {
    padding: 80px 0;
}
@media (max-width: 991.98px) {
    .latest-blog {
        padding: 50px 0;
    }
}

/* ==========================================================
   Footer del sito pubblico
   ========================================================== */
.footer.footer-three .footer-top {
    padding: 50px 0 46px;
}

/* Logo come nell'header, ma con "FP" in bianco per leggerlo sul verde */
/* Il PNG ha un margine trasparente: margin-top negativo allinea il logo visibile ai titoli delle altre colonne */
.footer-logo-link {
    display: inline-block;
    margin-top: -13px;
}
.footer-logo-link img {
    height: 56px;
    width: auto;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.12));
}
.footer.footer-three .footer-about .footer-logo {
    margin-bottom: 18px;
}

/* Nome della federazione: in grassetto, staccato dal logo e vicino a PEC ed email */
.footer.footer-three .footer-claim {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.footer-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contacts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}
.footer-contacts li i {
    font-size: 16px;
    margin-top: 4px;
    flex-shrink: 0;
}
.footer-contacts address {
    font-style: normal;
}

/* Titoli colonne: tolgo i margini di h2; sottolineatura rossa continua al posto dei due trattini del tema */
.footer.footer-three .footer-title {
    font-size: 15px;
    font-weight: 600;
    margin-top: 0;
}
/* "footer" in più nel selettore: il CSS del tema compilato da Vite (index-3.scss) arriva dopo questo file */
footer.footer.footer-three .footer-title {
    display: inline-block;
}
footer.footer.footer-three .footer-title::before {
    width: 100%;
    opacity: 0.4;
}
footer.footer.footer-three .footer-title::after {
    content: none;
}

.footer.footer-three .footer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer.footer-three .footer-menu ul li {
    margin-bottom: 10px;
}
.footer.footer-three .footer-menu ul li a,
.footer.footer-three .footer-contacts a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.15s ease;
}
.footer.footer-three .footer-menu ul li a:hover,
.footer.footer-three .footer-menu ul li a:focus-visible,
.footer.footer-three .footer-contacts a:hover,
.footer.footer-three .footer-contacts a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer.footer-three a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Il tema evidenzia la selezione in verde #0A744F con testo bianco, gli stessi colori del footer:
   il testo selezionato risultava invisibile. Nel footer la invertiamo */
.footer.footer-three ::selection {
    background: #fff;
    color: var(--cisl-green);
}

/* Fascia in basso: separatore chiaro al posto della riga viola del template,
   largo quanto il contenuto (dal logo al bordo destro) invece che tutto lo schermo */
footer.footer.footer-three .footer-bottom {
    border-top: 0;
    padding: 0 0 18px;
}
.footer-bottom-inner {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
}
.footer.footer-three .footer-bottom .copyright-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-legal li + li::before {
    content: "·";
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.5);
}
.footer.footer-three .footer-legal a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}
.footer.footer-three .footer-legal a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Voci senza collegamento (in attesa degli URL): stesso aspetto dei link, senza hover */
.footer.footer-three .footer-menu ul li span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}
.footer-legal span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}
.footer-sep {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-sedi ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-sedi li {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
}
.footer-sedi strong {
    display: block;
    color: #fff;
    font-weight: 600;
}
.footer-sedi address {
    font-style: normal;
}

.footer-social ul {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer.footer-three .footer-social li > a,
.footer-social li > span {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 15px;
    transition: border-color 0.15s ease;
}
/* Cerchio colorato su un livello separato: in hover si ingrandisce solo lui, l'icona resta della sua misura */
.footer.footer-three .footer-social li > a::before,
.footer-social li > span::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 50%;
    background: transparent;
    transition:
        transform 0.15s ease,
        background-color 0.15s ease;
}
/* In hover ogni cerchio prende il colore del proprio marchio, l'icona resta bianca.
   I selettori dei colori devono pesare più di quello del ::before base (sfondo trasparente) */
.footer.footer-three .footer-social li > a:hover,
.footer.footer-three .footer-social li > a:focus-visible,
.footer-social li > span:hover {
    color: #fff;
    border-color: transparent;
}
.footer.footer-three .footer-social li > a:hover::before,
.footer.footer-three .footer-social li > a:focus-visible::before,
.footer-social li > span:hover::before {
    transform: scale(1.08);
}
.footer.footer-three .footer-social-facebook > :hover::before,
.footer.footer-three .footer-social-facebook > :focus-visible::before {
    background: #1877f2;
}
.footer.footer-three .footer-social-instagram > :hover::before,
.footer.footer-three .footer-social-instagram > :focus-visible::before {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
}
.footer.footer-three .footer-social-x > :hover::before,
.footer.footer-three .footer-social-x > :focus-visible::before {
    background: #000;
}
@media (prefers-reduced-motion: reduce) {
    .footer-social li > a::before,
    .footer-social li > span::before {
        transition: none;
    }
}

/* Contenitore del footer un po' più largo del .container di Bootstrap: meno margine ai lati */
@media (min-width: 992px) {
    .footer.footer-three .container {
        max-width: 1440px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Colonne di link larghe quanto il contenuto, con spazi uguali tra loro */
@media (min-width: 992px) {
    /* Titoli centrati sul logo, con la sottolineatura alla base del logo;
       il contenuto sotto parte alla stessa altezza del nome sotto il logo */
    footer.footer.footer-three .footer-cols .footer-title {
        margin-top: 12px;
        margin-bottom: 28px;
    }
    /* "Seguici su" staccato dal bordo destro (le altre colonne si ridistribuiscono da sole) */
    .footer-cols > :last-child {
        margin-right: 40px;
    }

    /* Le quattro sezioni (logo + tre colonne) in un'unica fila: lo spazio libero si divide in parti uguali */
    .footer-main > .col-lg-8,
    .footer-main .footer-cols {
        display: contents;
    }
    .footer-main > [class*="col-"],
    .footer-main .footer-cols > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
    }
}
@media (min-width: 768px) {
    .footer-cols {
        justify-content: space-between;
    }
    .footer-cols > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .footer.footer-three .footer-top {
        padding: 40px 0 28px;
    }
    .footer-bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-legal {
        justify-content: center;
    }

    /* Font un po' più piccolo su mobile */
    footer.footer.footer-three .footer-title {
        font-size: 14px;
    }
    .footer.footer-three .footer-claim,
    .footer.footer-three .footer-contacts li,
    .footer.footer-three .footer-contacts a,
    .footer.footer-three .footer-menu ul li a,
    .footer.footer-three .footer-menu ul li span,
    .footer-sedi li {
        font-size: 13px;
    }
    .footer.footer-three .footer-bottom .copyright-text,
    .footer.footer-three .footer-legal a,
    .footer-legal span {
        font-size: 12px;
    }

    /* Su mobile tutto il footer è centrato */
    .footer.footer-three .footer-top {
        text-align: center;
    }
    .footer-contacts li {
        justify-content: center;
    }
    .footer-social ul {
        justify-content: center;
    }
    /* Su mobile le voci vanno a capo: niente puntini, che finirebbero a inizio riga */
    .footer-legal {
        gap: 6px 18px;
    }
    .footer-legal li + li::before {
        content: none;
    }
}

/* Cursore a mano su tutto ciò che è cliccabile.
   Social, link utili e Codice Etico in attesa degli URL sono <span>: li includo perché diventeranno link */
a[href],
button:not(:disabled),
[role="button"],
label[for],
select,
summary,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
.footer-social li > span,
.footer.footer-three .footer-menu ul li span,
.footer-legal span {
    cursor: pointer;
}

/* Animazioni AOS disattivate per chi chiede meno movimento nelle impostazioni di sistema */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Header, solo in home (.header-animated): al caricamento le voci entrano dal basso una dopo l'altra, il logo resta fermo.
   Animazione CSS e non AOS: a fine animazione non resta nessun transform sulle voci,
   così le tendine (Settori, Area riservata) si posizionano come prima. */
@keyframes header-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@media (min-width: 992px) {
    header.header-three.header-animated .main-nav > li,
    header.header-three.header-animated .header-btn {
        animation: header-rise 0.5s ease-out both;
    }
    header.header-three.header-animated .main-nav > li:nth-child(1) { animation-delay: 0.05s; }
    header.header-three.header-animated .main-nav > li:nth-child(2) { animation-delay: 0.1s; }
    header.header-three.header-animated .main-nav > li:nth-child(3) { animation-delay: 0.15s; }
    header.header-three.header-animated .main-nav > li:nth-child(4) { animation-delay: 0.2s; }
    header.header-three.header-animated .main-nav > li:nth-child(5) { animation-delay: 0.25s; }
    header.header-three.header-animated .main-nav > li:nth-child(6) { animation-delay: 0.3s; }
    header.header-three.header-animated .main-nav > li:nth-child(7) { animation-delay: 0.35s; }
    header.header-three.header-animated .header-btn { animation-delay: 0.45s; }
}
/* Su mobile le voci stanno nel menu laterale: entra solo l'hamburger */
@media (max-width: 991.98px) {
    header.header-three.header-animated #mobile_btn { animation: header-rise 0.5s ease-out 0.1s both; }
}
@media (prefers-reduced-motion: reduce) {
    header.header-three.header-animated .main-nav > li,
    header.header-three.header-animated .header-btn,
    header.header-three.header-animated #mobile_btn { animation: none !important; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Etichetta verde sopra i titoli delle sezioni della home (es. "Chi siamo") */
.home-kicker { font-size: 24px; color: var(--cisl-green); }
@media (max-width: 767.98px) {
    .home-kicker { font-size: 20px; }
}

/* Testo della sezione "Chi siamo" in home: righe e paragrafi più ravvicinati */
/* .section-header nel selettore: il tema azzera il margine con ".section-header p { margin-bottom: 0 }".
   Margine di 1.5em = una riga vuota tra i due paragrafi */
.section-header .home-chi-text { line-height: 1.5; margin-bottom: 1.5em; max-width: 560px; }
.section-header .home-chi-text:last-child { margin-bottom: 0; }

/* Home, "Chi siamo": griglia testo + foto.
   Mobile: testo, foto, bottone uno sotto l'altro. Desktop: foto a destra, alta quanto testo + bottone. */
/* il tema dà a .section-header un margine sotto: qui la distanza la decide la griglia */
.home-chi-grid .home-chi-body { margin-bottom: 0; }
.home-chi-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
}
@media (min-width: 992px) {
    .home-chi-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* due colonne uguali */
        grid-template-areas: "body photo" "cta photo";
        column-gap: 48px;
        row-gap: 24px;
    }
    .home-chi-body { grid-area: body; align-self: end; }
    .home-chi-cta  { grid-area: cta;  align-self: start; }
    /* foto più piccola della colonna, allineata al bordo destro */
    .home-chi-photo { grid-area: photo; align-self: center; justify-self: end; width: 100%; max-width: 480px; }
}

/* Foto: angoli arrotondati e ombra come il resto del sito, riquadro verde CISL sfalsato dietro */
.home-chi-photo {
    position: relative;
    isolation: isolate;
    margin: 0 14px 14px 0; /* spazio per il riquadro sfalsato */
}
.home-chi-photo::before {
    content: "";
    position: absolute;
    inset: 14px -14px -14px 14px;
    z-index: -1;
    border-radius: 16px;
    background: var(--cisl-green);
}
.home-chi-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 65% 40%; /* tiene al centro la persona con il megafono */
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
}
@media (max-width: 991.98px) {
    .home-chi-photo { margin: 0 9px 9px 0; }
    .home-chi-photo::before { inset: 9px -9px -9px 9px; border-radius: 12px; }
    .home-chi-photo img { border-radius: 12px; }
}

/* Titolo della sezione "Chi siamo" in home: righe bilanciate (niente parola orfana),
   misura limitata, scala più decisa rispetto all'etichetta sopra */
.section-header .home-chi-title {
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    max-width: 20ch;
    text-wrap: balance;
    margin: 6px 0 18px;
}
@media (max-width: 767.98px) {
    .section-header .home-chi-title { font-size: 30px; }
}
.text-cisl-green { color: var(--cisl-green); }

/* Home, "Convenzioni": come "Chi siamo" ma con la foto a sinistra */
@media (min-width: 992px) {
    .home-chi-grid--reverse { grid-template-areas: "photo body" "photo cta"; }
    .home-chi-grid--reverse .home-chi-photo { justify-self: start; }
}
/* Foto senza un soggetto da tenere decentrato */
.home-chi-photo.home-photo-center img { object-position: center; }
/* Locandina del tesseramento: contiene testo, quindi si mostra intera senza ritagli */
.home-chi-photo.home-photo-poster img { aspect-ratio: 16 / 9; object-fit: contain; background: #fff; }
/* Home, intestazione di sezione: titolo a sinistra, bottone a destra (sotto su mobile) */
.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
}
/* Telefono: etichetta e titolo delle sezioni della home centrati */
@media (max-width: 767.98px) {
    /* più margine ai lati delle sezioni della home (Bootstrap: 12px): testi più compatti e foto più piccole */
    .home-3 main .section > .container { padding-left: 28px; padding-right: 28px; }
    /* scritte un po' più piccole: soprattutto i paragrafi lunghi (16px nel markup con .fs-16) */
    .section-header .home-chi-text { font-size: 13.5px; }
    .section-header .home-chi-title { font-size: 27px; }
    .home-kicker { font-size: 18px; }
    /* bottoni centrati: quelli sotto il testo e quelli accanto al titolo (che qui vanno a capo) */
    .home-chi-cta { text-align: center; }
    .home-section-head { justify-content: center; }
    .home-section-head > .section-header { width: 100%; }
    .home-section-head > .section-header,
    .home-chi-body .home-kicker,
    .home-chi-body .home-chi-title { text-align: center; }
    .home-chi-body .home-kicker { display: block !important; } /* d-inline-block nel markup: a blocco per centrarla */
    .section-header .home-chi-title { margin-left: auto; margin-right: auto; } /* ha max-width: 20ch */
}

/* Bottoni verdi della home (.btn-home): solo qui, il tema resta invariato altrove.
   Hover rapido, freccia che scorre, leggera pressione al click, focus visibile da tastiera. */
.btn.btn-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px; /* area di tocco minima consigliata */
    padding: 0.6rem 1.1rem;
    /* il tema usa "all 0.5s": troppo lento per un cambio di colore */
    transition: background-color .2s ease-out, border-color .2s ease-out, transform .1s ease-out;
}
/* Freccia SVG (componente x-website.arrow-right): centrata sul testo dal flex;
   su un livello proprio (translate3d + will-change) scorre senza tremolare */
.btn.btn-home .icon-arrow-right {
    flex: none;
    display: inline-block;
    /* un filo più in basso del centro, all'altezza delle minuscole */
    position: relative;
    top: calc(0.12em - 1px);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
/* Telefono: bottoni un po' più piccoli (testo 15,2px → 14px) */
@media (max-width: 767.98px) {
    .btn.btn-home { min-height: 40px; padding: 0.5rem 1rem; font-size: 0.875rem; }
}
.btn.btn-home:hover .icon-arrow-right { transform: translate3d(4px, 0, 0); }
.btn.btn-home:active { transform: scale(0.97); }
/* Il tema scurisce il bottone anche su :focus, così dopo un click col mouse resta scuro:
   lo scuro resta solo per hover e focus da tastiera */
.btn.btn-home.btn-primary:focus:not(:focus-visible):not(:hover) {
    background-color: var(--cisl-green);
    border-color: var(--cisl-green);
}
/* Il tema toglie l'indicatore di focus: qui torna, solo per la navigazione da tastiera */
.btn.btn-home:focus-visible {
    outline: 2px solid var(--cisl-green);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .btn.btn-home,
    .btn.btn-home .icon-arrow-right { transition: none; }
    .btn.btn-home:hover .icon-arrow-right,
    .btn.btn-home:active { transform: none; }
}