/* ==========================================================
   theme-ordine.css
   Tema istituzionale dell'Ordine sopra Bootstrap Italia.

   Va caricato DOPO bootstrap-italia.min.css.

   Perche' esiste: Bootstrap Italia compila i colori del design
   system come valori letterali (hsl(210,100%,40%), #06c, ...),
   non solo come custom property. Ridefinire --bs-primary da solo
   NON ricolora header, footer e bottoni. Qui si fanno due cose:
     1) si ridefiniscono i token del design system;
     2) si sovrascrivono i pochi componenti che usano il colore
        letterale, mantenendo struttura, spaziature, tipografia
        e comportamenti di Bootstrap Italia invariati.

   Palette presa dal sito attuale dell'Ordine (oappcrc.it):
     #b21717  rosso istituzionale (link attivi, bordi, box, footer)
     #0691a2 / #00bad0  accento ciano (bottone form contatti)
     #4d4d4d #797979 #dcdada #f8f8f8  neutri

   Impostazione cromatica: testata (.it-nav-wrapper) e footer su
   fondo bianco, come il sito attuale; il rosso resta l'accento per
   fascia slim, voce di menu attiva, titoli di sezione del footer,
   link e bottoni.

   I valori sono su custom property: il backoffice
   (Impostazioni Sito > Colori) puo' sovrascriverli a runtime.
   ========================================================== */

:root {
    /* --- Palette istituzionale --- */
    --ordine-primary: #b21717;
    --ordine-primary-dark: #8d1212; /* hover, superfici scure */
    --ordine-primary-darker: #6b0e0e; /* stati attivi */
    --ordine-primary-light: #f7eaea; /* sfondi tenui, stati hover chiari */
    --ordine-primary-rgb: 178, 23, 23;
    --ordine-accent: #147D86;
    --ordine-accent-light: #1FA6AD;
    --ordine-text: #1a1a1a; /* testo su fondo chiaro */
    --ordine-neutral-900: #4d4d4d;
    --ordine-neutral-600: #6c6c6c;
    --ordine-neutral-300: #dcdada;
    --ordine-neutral-100: #f8f8f8;
    /* --- Token Bootstrap Italia --- */
    --bs-primary: var(--ordine-primary);
    --bs-primary-rgb: var(--ordine-primary-rgb);
    --bs-link-color: var(--ordine-primary);
    --bs-link-hover-color: var(--ordine-primary-dark);
    --bs-link-color-rgb: var(--ordine-primary-rgb);
    --bs-focus-ring-color: rgba(var(--ordine-primary-rgb), 0.25);
    /* Alias per le variabili usate dai widget del CMS (_WidgetRenderer.cshtml),
       che altrimenti resterebbero non definite. */
    --primary: var(--ordine-primary);
    --primary-dark: var(--ordine-primary-dark);
    --primary-light: var(--ordine-primary-light);
    --primary-color: var(--ordine-primary);
}

/* ==========================================================
   Header istituzionale

   Il sito attuale dell'Ordine ha testata bianca con accenti rossi:
   .it-nav-wrapper (testata centrale + navbar) resta bianco, il rosso
   e' usato per la fascia slim in alto, la voce attiva e gli hover.
   ========================================================== */
.it-header-slim-wrapper {
    background: var(--ordine-primary);
}

    /* Sulla fascia slim (fondo rosso) testo e icone restano bianchi */
    .it-header-slim-wrapper a,
    .it-header-slim-wrapper .icon {
        color: #fff;
        fill: #fff;
    }

    /* La regola generale a:hover/a:focus (rosso scuro) arriva dopo e ha la
       stessa specificita': sulla fascia rossa renderebbe i link illeggibili.
       Qui si fissano tutti gli stati, con specificita' piu' alta. */
    .it-header-slim-wrapper a:link,
    .it-header-slim-wrapper a:visited,
    .it-header-slim-wrapper a:hover,
    .it-header-slim-wrapper a:focus,
    .it-header-slim-wrapper a:active {
        color: #fff;
    }

    /* Accedi all'area riservata: pulsante bordato bianco; in hover/focus si
       inverte (fondo bianco, testo rosso), contrasto pieno in ogni stato */
    .it-header-slim-wrapper a.slim-accedi {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        margin-left: 1rem;
        padding: .25rem .875rem;
        border: 2px solid #fff;
        border-radius: 4px;
        font-size: .875rem;
        font-weight: 600;
        line-height: 1.4;
        text-decoration: none;
    }

        .it-header-slim-wrapper a.slim-accedi .icon {
            width: 1rem;
            height: 1rem;
        }

        .it-header-slim-wrapper a.slim-accedi:hover,
        .it-header-slim-wrapper a.slim-accedi:focus,
        .it-header-slim-wrapper a.slim-accedi:active {
            background: #fff;
            color: var(--ordine-primary-dark);
            text-decoration: none;
        }

            .it-header-slim-wrapper a.slim-accedi:hover .icon,
            .it-header-slim-wrapper a.slim-accedi:focus .icon,
            .it-header-slim-wrapper a.slim-accedi:active .icon {
                fill: var(--ordine-primary-dark);
            }

.it-nav-wrapper,
.it-header-center-wrapper,
.it-header-navbar-wrapper {
    background: #fff;
}

.it-header-center-wrapper {
    border-bottom: 1px solid var(--ordine-neutral-300);
}

    /* Marchio: su fondo bianco il testo torna scuro */
    .it-header-center-wrapper .it-header-center-content-wrapper .it-brand-wrapper a,
    .it-header-center-wrapper .it-brand-text,
    .it-header-center-wrapper .it-brand-text .it-brand-title,
    .it-header-center-wrapper a,
    .it-header-center-wrapper .icon {
        color: var(--ordine-text);
        fill: var(--ordine-text);
    }

/* La separazione fra menu e contenuto e' un filo sottile: chiude la testata
   senza pesare. L'unico tratto spesso e' quello della voce corrente, che si
   appoggia sul filo e lo ispessisce solo li'. */
.it-header-navbar-wrapper {
    border-bottom: 1px solid var(--ordine-neutral-300);
}

    /* Voci di menu su fondo bianco */
    .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link,
    .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link span,
    .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li button.nav-link {
        color: var(--ordine-text);
    }

        .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link,
        .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link:hover,
        .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link.active {
            position: relative;
            text-decoration: none;
            box-shadow: none;
            transition: background-color .15s ease, color .15s ease;
        }

        /* Hover: nessuna sottolineatura. La voce si accende con una velatura
           del colore istituzionale, cosi' resta distinta dal tratto pieno
           che segnala invece la sezione corrente. */
        .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link:hover,
        .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link:hover span {
            color: var(--ordine-primary);
            background-color: var(--ordine-primary-light);
        }

        .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link.active,
        .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link.active span {
            color: var(--ordine-primary);
        }

        /* Voce corrente: il tratto copre il filo e lo ispessisce verso il basso,
           quindi resta un'unica linea che cambia peso e colore sotto la sezione
           in cui ci si trova. */
        .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 3px;
            background: var(--ordine-primary);
        }

/* Nel menu a scomparsa le voci sono impilate: la linea orizzontale sotto la
   voce corrente non separa piu' niente e attraversa tutto il pannello. Li'
   il segno diventa un tratto verticale a sinistra, come nelle sottosezioni.
   Il design system lo disegna blu, quindi va ricolorato. */
@media (max-width: 991.98px) {
    .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link.active::after {
        display: none;
    }

    .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link.active,
    .it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link.active {
        border-left: 3px solid var(--ordine-primary);
        background: transparent;
    }
}

/* ----------------------------------------------------------
   Secondo livello: tendina delle sottosezioni.
   Su fondo bianco serve un contenitore riconoscibile ma sobrio:
   filo neutro, spigoli vivi come il resto della testata, e un
   bordo superiore rosso che la lega alla voce che l'ha aperta.
   ---------------------------------------------------------- */
.it-header-navbar-wrapper .dropdown-menu {
    margin-top: 0;
    padding: .25rem 0;
    min-width: 16rem;
    background: #fff;
    border: 1px solid var(--ordine-neutral-300);
    border-top: 3px solid var(--ordine-primary);
    border-radius: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
}

    /* La freccia del design system non serve: la tendina e' gia' agganciata
       alla voce dal tratto rosso in alto. */
    .it-header-navbar-wrapper .dropdown-menu::before,
    .it-header-navbar-wrapper .navbar .dropdown-menu::before {
        display: none;
    }

    .it-header-navbar-wrapper .dropdown-menu .link-list-wrapper ul {
        margin: 0;
    }

    /* L'etichetta e' dentro uno <span>: va colorato anche quello, altrimenti
       resta il blu del design system. */
    .it-header-navbar-wrapper .dropdown-menu .link-list-wrapper a.list-item,
    .it-header-navbar-wrapper .dropdown-menu .link-list-wrapper a.list-item span {
        color: var(--ordine-text);
        text-decoration: none;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

    /* Il tratto verticale lo porta solo il link: se lo prendesse anche lo
       <span> interno, sulla voce corrente si vedrebbero due barre. */
    .it-header-navbar-wrapper .dropdown-menu .link-list-wrapper a.list-item {
        padding: .5rem 1.25rem;
        border-left: 3px solid transparent;
    }

        /* Stessa logica del primo livello: velatura in hover, tratto pieno
           sulla voce corrente. Qui il tratto e' verticale, a sinistra. */
        .it-header-navbar-wrapper .dropdown-menu .link-list-wrapper a.list-item:hover,
        .it-header-navbar-wrapper .dropdown-menu .link-list-wrapper a.list-item:hover span {
            color: var(--ordine-primary);
            background-color: var(--ordine-primary-light);
        }

        /* Bootstrap Italia colora .list-item.active con un selettore che
           include .navbar: qui serve la stessa catena per vincere. */
        .it-header-navbar-wrapper .navbar .dropdown-menu .link-list-wrapper a.list-item.active,
        .it-header-navbar-wrapper .navbar .dropdown-menu .link-list-wrapper a.list-item.active span,
        .it-header-navbar-wrapper .dropdown-menu .link-list-wrapper a.list-item.active,
        .it-header-navbar-wrapper .dropdown-menu .link-list-wrapper a.list-item.active span {
            color: var(--ordine-primary);
            font-weight: 600;
            background-color: transparent;
        }

        .it-header-navbar-wrapper .navbar .dropdown-menu .link-list-wrapper a.list-item.active,
        .it-header-navbar-wrapper .dropdown-menu .link-list-wrapper a.list-item.active {
            border-left-color: var(--ordine-primary);
        }

/* La voce di primo livello che apre la tendina si comporta come le altre */
.it-header-navbar-wrapper .navbar .navbar-collapsable .navbar-nav li a.nav-link.dropdown-toggle svg {
    fill: currentColor;
    margin-left: .25rem;
}

/* Su mobile la tendina e' inline: niente bordi, solo rientro */
@media (max-width: 991.98px) {
    .it-header-navbar-wrapper .dropdown-menu {
        border: none;
        border-left: 3px solid var(--ordine-neutral-300);
        box-shadow: none;
        margin-left: 1rem;
    }
}

/* Il design system disegna l'hamburger bianco, perche' la sua navbar e'
   blu: sulla nostra, bianca, sparisce. Torna del rosso del marchio. */
.it-header-navbar-wrapper .navbar .custom-navbar-toggler,
.it-header-navbar-wrapper .navbar .custom-navbar-toggler span,
.it-header-navbar-wrapper .navbar .custom-navbar-toggler span.it-list {
    color: var(--ordine-primary);
}

.it-header-navbar-wrapper .navbar .custom-navbar-toggler svg,
.it-header-navbar-wrapper .navbar .custom-navbar-toggler .icon {
    fill: var(--ordine-primary);
}

.it-header-navbar-wrapper .navbar .custom-navbar-toggler:focus-visible {
    outline: 2px solid var(--ordine-primary);
    outline-offset: 2px;
}

/* Chiusura del menu mobile */
.navbar .close-div .btn.close-menu {
    color: var(--ordine-primary);
    background: transparent;
    box-shadow: none;
}

/* ==========================================================
   Footer istituzionale — fondo bianco, testo scuro,
   accenti rossi su titoli di sezione e link
   ========================================================== */
.it-footer {
    border-top: 3px solid var(--ordine-primary);
}

.it-footer-main {
    background-color: #fff;
    color: var(--ordine-text);
}

    .it-footer-main h2, .it-footer-main .h2,
    .it-footer-main h3, .it-footer-main .h3 {
        color: var(--ordine-text);
    }

    /* I titoli di colonna: accento del brand, corpo piccolo e spaziato,
       cosi' fanno da etichetta e non competono con i titoli di pagina */
    .it-footer-main h4, .it-footer-main .h4 {
        color: var(--ordine-primary);
        font-size: .875rem;
        letter-spacing: .06em;
        margin-bottom: 1rem;
    }

    /* Le colonne del footer respirano anche quando vanno a capo su mobile */
    .it-footer-main section .row > [class*="col-"] {
        margin-bottom: 1.5rem;
    }

    .it-footer-main p {
        line-height: 1.6;
    }

    .it-footer-main a,
    .it-footer-main .link-list-wrapper ul li a:not(.disabled) {
        color: var(--ordine-primary);
        /* Sottolineatura piu' sottile e staccata: resta leggibile come link
           senza appesantire l'elenco */
        text-decoration-thickness: 1px;
        text-underline-offset: .2em;
    }

        .it-footer-main a:hover,
        .it-footer-main .link-list-wrapper ul li a:not(.disabled):hover {
            color: var(--ordine-primary-dark);
        }

    /* Il marchio nel footer non e' un link colorato */
    .it-footer-main .it-brand-wrapper a,
    .it-footer-main .it-brand-wrapper a h2,
    .it-footer-main .it-brand-wrapper a .h2 {
        color: var(--ordine-text);
    }

    /* Separatori: su bianco le classi border-white non si vedrebbero */
    .it-footer-main .border-top,
    .it-footer-main .border-white {
        border-color: var(--ordine-neutral-300) !important;
    }

/* Fascia di chiusura: amaranto pieno, come la fascia slim in testa.
   Le due bande fanno da parentesi alla pagina. */
.it-footer-small-prints {
    background-color: var(--ordine-primary);
    color: #fff;
    padding: 1rem 0;
}

    .it-footer-small-prints p,
    .it-footer-small-prints p.text-white {
        color: #fff !important;
    }

    .it-footer-small-prints a,
    .it-footer-small-prints a.text-white {
        color: #fff !important;
        text-decoration: underline;
        text-underline-offset: .2em;
        text-decoration-thickness: 1px;
    }

        .it-footer-small-prints a:hover {
            text-decoration-thickness: 2px;
        }

/* ==========================================================
   Bottoni — un solo sistema, coordinato con il brand.

   Due trappole di Bootstrap Italia:
   1) `.btn` da solo ha gia' background blu, quindi anche un bottone
      senza variante va ricolorato;
   2) il contorno dei bottoni outline e' un box-shadow inset, non un
      border-color, e viene ridichiarato su :hover/:active/.disabled
      (per questo servono regole esplicite su ogni stato).
   ========================================================== */

/* Base: qualsiasi .btn senza variante segue il colore istituzionale */
.btn {
    background: var(--ordine-primary);
    color: #fff;
}

/* --- Pieno: azione principale --- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ordine-primary);
    --bs-btn-border-color: var(--ordine-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ordine-primary-dark);
    --bs-btn-hover-border-color: var(--ordine-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ordine-primary-darker);
    --bs-btn-active-border-color: var(--ordine-primary-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ordine-primary);
    --bs-btn-disabled-border-color: var(--ordine-primary);
    background: var(--ordine-primary);
    color: #fff;
    box-shadow: none;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: var(--ordine-primary-dark);
        color: #fff !important;
        box-shadow: none !important;
    }

    .btn-primary:active,
    .btn-primary.active {
        background: var(--ordine-primary-darker);
        color: #fff;
        box-shadow: none;
    }

/* --- Contornato: azione secondaria --- */
.btn-outline-primary {
    --bs-btn-color: var(--ordine-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ordine-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ordine-primary);
    --bs-btn-hover-border-color: var(--ordine-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ordine-primary-dark);
    --bs-btn-active-border-color: var(--ordine-primary-dark);
    --bs-btn-disabled-color: var(--ordine-primary);
    --bs-btn-disabled-border-color: var(--ordine-primary);
    background: transparent;
    color: var(--ordine-primary);
    box-shadow: inset 0 0 0 2px var(--ordine-primary);
}

    /* Hover pieno: fondo rosso, testo bianco. Niente inversioni parziali. */
    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background: var(--ordine-primary);
        color: #fff;
        box-shadow: inset 0 0 0 2px var(--ordine-primary);
    }

    .btn-outline-primary:active,
    .btn-outline-primary.active {
        background: var(--ordine-primary-dark);
        color: #fff;
        box-shadow: inset 0 0 0 2px var(--ordine-primary-dark);
    }

    .btn-outline-primary.disabled,
    .btn-outline-primary:disabled {
        background: transparent;
        color: var(--ordine-primary);
        box-shadow: inset 0 0 0 2px var(--ordine-primary);
        opacity: .5;
    }

/* --- Neutro: annulla, reset, filtri --- */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ordine-neutral-900);
    --bs-btn-border-color: var(--ordine-neutral-900);
    background: var(--ordine-neutral-900);
    color: #fff;
    box-shadow: none;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background: #3a3a3a;
        color: #fff;
        box-shadow: none;
    }

.btn-outline-secondary {
    --bs-btn-color: var(--ordine-neutral-900);
    --bs-btn-border-color: var(--ordine-neutral-900);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ordine-neutral-900);
    background: transparent;
    color: var(--ordine-neutral-900);
    box-shadow: inset 0 0 0 2px var(--ordine-neutral-900);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active {
        background: var(--ordine-neutral-900);
        color: #fff;
        box-shadow: inset 0 0 0 2px var(--ordine-neutral-900);
    }

/* --- Su fondo scuro o su immagine --- */
.btn-light {
    --bs-btn-color: var(--ordine-primary);
    --bs-btn-bg: #fff;
    background: #fff;
    color: var(--ordine-primary);
    box-shadow: none;
}

    .btn-light:hover,
    .btn-light:focus {
        background: var(--ordine-primary-light);
        color: var(--ordine-primary-dark);
    }

.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px #fff;
}

    .btn-outline-light:hover,
    .btn-outline-light:focus {
        background: #fff;
        color: var(--ordine-primary);
        box-shadow: inset 0 0 0 2px #fff;
    }

/* --- Testuale --- */
.btn-link {
    background: transparent;
    color: var(--ordine-primary);
    box-shadow: none;
}

    .btn-link:hover,
    .btn-link:focus {
        background: transparent;
        color: var(--ordine-primary-dark);
    }

/* --- Accento ciano: usato solo dove serve distinguere un'azione
       dal rosso istituzionale (es. invio form) --- */
.btn-accent {
    background: var(--ordine-accent);
    border-color: var(--ordine-accent);
    color: #fff;
    box-shadow: none;
}

    .btn-accent:hover,
    .btn-accent:focus {
        background: #05707d;
        border-color: #05707d;
        color: #fff;
    }

/* Focus da tastiera: stesso anello per tutte le varianti */
.btn:focus-visible {
    outline: 2px solid var(--ordine-primary);
    outline-offset: 2px;
}
.btn:hover {
    color: var(--ordine-primary);
    box-shadow: inset 0 0 0 2px var(--ordine-primary);
}
    /* ==========================================================
   Titoli

   Bootstrap Italia colora gli heading con il blu scuro del design
   system: nel contenuto vanno sul nero istituzionale. Header e footer
   hanno le loro regole, e le utility .text-white restano prioritarie.
   ========================================================== */
    main h1, main h2, main h3, main h4, main h5, main h6, main .h1, main .h2, main .h3, main .h4, main .h5, main .h6 {
    color: var(--ordine-text);
}

    /* Dentro un blocco che ha gia' scelto il colore del testo (banner su
       immagine, fasce scure) i titoli lo ereditano invece di tornare scuri. */
    main .text-white h1, main .text-white h2, main .text-white h3,
    main .text-white h4, main .text-white h5, main .text-white h6,
    main .text-white .h1, main .text-white .h2, main .text-white .h3 {
        color: inherit;
    }

/* ==========================================================
   Link, testo e superfici
   ========================================================== */
a {
    color: var(--ordine-primary);
}

    a:hover,
    a:focus {
        color: var(--ordine-primary-dark);
    }

.text-primary {
    color: var(--ordine-primary) !important;
}

.bg-primary {
    background-color: var(--ordine-primary) !important;
}

.border-primary {
    border-color: var(--ordine-primary) !important;
}

.badge.bg-primary {
    background-color: var(--ordine-primary) !important;
}

.badge.bg-success {
    background-color: var(--ordine-accent) !important;
}

/* "Leggi", "Vai al servizio": la freccia del design system
   segue il colore istituzionale. */
a.read-more,
a.read-more .text {
    color: var(--ordine-primary);
}

    a.read-more:hover,
    a.read-more:hover .text {
        color: var(--ordine-primary-dark);
    }

    a.read-more svg.icon {
        fill: var(--ordine-primary);
    }

/* Card degli elenchi (notizie, servizi, eventi): fondo bianco e filo neutro.
   Al passaggio si accende il bordo: nessun sollevamento, nessuna ombra.
   E' lo stesso comportamento su tutte le liste del sito. */
.card.card-bg {
    background-color: #fff;
    /* Bootstrap Italia toglie il bordo destro alle card: qui il filo deve
       chiudere il rettangolo, altrimenti sull'hover il rosso resta aperto
       su un lato. */
    border: 1px solid var(--ordine-neutral-300);
    border-right: 1px solid var(--ordine-neutral-300);
    box-shadow: none;
    transition: border-color .15s ease;
}

    .card.card-bg:hover {
        border-color: var(--ordine-primary);
    }

    /* La card con il filo rosso a sinistra (avvisi) non cambia bordo:
       li' il rosso e' gia' il segnale. */
    .card.card-bg.border-start:hover {
        border-color: var(--ordine-neutral-300);
        border-left-color: var(--ordine-primary);
    }

.card .card-title a {
    color: inherit;
}

.card .card-body .category-top a.category {
    color: var(--ordine-primary);
}

.chip.chip-primary {
    background-color: var(--ordine-primary);
    color: #fff;
}

/* Separatore di sezione, come le fasce rosse del sito attuale */
.section-separator {
    background: var(--ordine-primary);
    color: #fff;
    padding: .35rem .75rem;
}

/* Sezioni alternate: fondo neutro chiaro dell'Ordine */
.section-muted {
    background-color: var(--ordine-neutral-100);
}

/* Breadcrumb */
.breadcrumb-container .breadcrumb .breadcrumb-item a {
    color: var(--ordine-primary);
}

.breadcrumb-container .breadcrumb .breadcrumb-item.active {
    color: var(--ordine-neutral-600);
}

/* Focus visibile: obbligatorio per accessibilita', tinta istituzionale */
:focus-visible {
    outline: 2px solid var(--ordine-primary);
    outline-offset: 2px;
}

/* ==========================================================
   Elementi di servizio del design system che restano blu
   (usano il colore letterale, non il token)
   ========================================================== */

/* Skip-link "Vai al contenuto" */
.skiplinks a,
a.visually-hidden-focusable {
    color: var(--ordine-primary);
}

    .skiplinks a:focus,
    a.visually-hidden-focusable:focus,
    a.visually-hidden-focusable:active {
        background-color: var(--ordine-primary);
        border-color: var(--ordine-primary);
        color: #fff;
    }

/* Menu account nello slim header: bottoni di invio.
   Bootstrap Italia colora questi button con un selettore a tre classi
   (.it-header-slim-wrapper .it-header-slim-wrapper-content .it-header-slim-right-zone button),
   quindi qui serve pari specificita' per vincere. */
.it-header-slim-wrapper .it-header-slim-wrapper-content .it-header-slim-right-zone button,
.account-menu-body button[type=submit] {
    background-color: var(--ordine-primary);
    border: 1px solid var(--ordine-primary);
    color: #fff;
}

    .it-header-slim-wrapper .it-header-slim-wrapper-content .it-header-slim-right-zone button:hover,
    .account-menu-body button[type=submit]:hover {
        background-color: var(--ordine-primary-dark);
        border-color: var(--ordine-primary-dark);
    }

/* Torna su */
a.back-to-top {
    background-color: var(--ordine-primary);
}

    a.back-to-top:hover {
        background-color: var(--ordine-primary-dark);
    }

/* Il consenso cookie ha un foglio suo: wwwroot/css/klaro-tema.css */

/* ==========================================================
   Accento secondario (ciano del sito attuale).
   Usato solo su superfici non testuali: il contrasto del ciano
   su bianco e' 3.8:1, sotto la soglia AA per il testo normale.
   ========================================================== */
.accent-bar {
    border-left: 4px solid var(--ordine-accent);
}

/* ==========================================================
   Menu di sezione (colonna laterale delle pagine istituzionali).
   Stesso principio della testata: filo neutro, tratto rosso sulla
   voce corrente. Qui il tratto e' verticale e regge l'elenco.
   ========================================================== */
.menu-sezione {
    border-left: 1px solid var(--ordine-neutral-300);
    padding-left: 1rem;
}

.menu-sezione-titolo a {
    color: inherit;
    text-decoration: none;
}

    .menu-sezione-titolo a:hover {
        color: var(--ordine-primary-dark);
        text-decoration: underline;
        text-underline-offset: .2em;
    }

.menu-sezione-titolo {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ordine-primary);
    margin-bottom: .75rem;
}

.menu-sezione-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .menu-sezione-lista li + li {
        margin-top: .125rem;
    }

    /* Navigazione, non testo: la sottolineatura generica dei link nei
       contenuti qui non si applica. */
    .menu-sezione-lista li a {
        text-decoration: none !important;
    }

    .menu-sezione-lista a {
        display: block;
        padding: .375rem .75rem;
        /* Il tratto della voce corrente si sovrappone al filo del contenitore
           invece di affiancarlo: resta una linea sola, che si ispessisce e
           diventa rossa in corrispondenza della voce. */
        margin-left: calc(-1rem - 1px);
        padding-left: calc(.75rem + 1px);
        border-left: 3px solid transparent;
        color: var(--ordine-text);
        text-decoration: none;
        font-size: .9375rem;
        line-height: 1.4;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

        .menu-sezione-lista a:hover {
            color: var(--ordine-primary);
            background-color: var(--ordine-primary-light);
        }

        .menu-sezione-lista a.attiva {
            color: var(--ordine-primary);
            font-weight: 600;
            border-left-color: var(--ordine-primary);
        }

@media (max-width: 991.98px) {
    .menu-sezione {
        border-left: none;
        border-top: 1px solid var(--ordine-neutral-300);
        padding-left: 0;
        padding-top: 1.5rem;
        margin-top: 2rem;
    }

    .menu-sezione-lista a {
        margin-left: 0;
    }
}

/* ==========================================================
   Elenco documenti scaricabili.
   Il titolo e' testo, non un link colorato: l'icona rossa e la riga
   che si accende bastano a dire che si puo' scaricare.
   ========================================================== */
a.elenco-documenti-voce {
    color: var(--ordine-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    padding-left: .75rem;
    margin-left: -.75rem;
    transition: background-color .15s ease, border-color .15s ease;
}

    a.elenco-documenti-voce span {
        color: inherit;
    }

    a.elenco-documenti-voce .text-muted {
        color: var(--ordine-neutral-600) !important;
    }

    a.elenco-documenti-voce:hover {
        background-color: var(--ordine-primary-light);
        border-left-color: var(--ordine-primary);
        color: var(--ordine-primary-dark);
    }

        a.elenco-documenti-voce:hover .text-primary {
            color: var(--ordine-primary-dark) !important;
        }

/* ==========================================================
   Schede delle persone negli organi (Consiglio, Commissioni).
   Avatar a sinistra, nome come link, carica in rosso: la stessa
   struttura per l'elenco dell'organo e per l'elenco generale.
   ========================================================== */
.avatar {
    background-color: var(--ordine-primary-light);
}

.scheda-persona {
    border-left: 3px solid transparent;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .scheda-persona:hover {
        border-left-color: var(--ordine-primary);
    }

    .scheda-persona h2 a,
    .scheda-persona h3 a {
        color: var(--ordine-text);
    }

        .scheda-persona h2 a:hover,
        .scheda-persona h3 a:hover {
            color: var(--ordine-primary-dark);
        }

.scheda-persona-carica {
    color: var(--ordine-primary);
    letter-spacing: .02em;
}

.avatar p {
    background-color: var(--ordine-primary-light);
    color: var(--ordine-primary-dark);
}

/* ==========================================================
   Ricerca in testata: sta accanto al logo e su schermo stretto
   passa sotto, a tutta larghezza.
   ========================================================== */
.it-header-center-content-wrapper {
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

.ricerca-testata {
    margin-left: auto;
    min-width: 0;
    width: 22rem;
    max-width: 22rem;
    flex: 0 1 22rem;
}

    .ricerca-testata .form-control {
        border-color: var(--ordine-neutral-300, #d6d6d6);
    }

/* Link obbligatori nel piede: accessibilità, note legali, privacy, mappa. */
.footer-legale {
    font-size: .875rem;
}

    .footer-legale .list-inline-item:not(:last-child)::after {
        content: "·";
        margin-left: .5rem;
        opacity: .6;
    }

/* ==========================================================
   Scala dei titoli del frontend
   Un ruolo, una classe: il livello html dice la struttura,
   la classe dice la dimensione. Prima ogni vista sceglieva
   la sua combinazione di utility e la stessa sezione appariva
   ora come h4 ora come h6.
   ========================================================== */
.titolo-pagina {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .75rem;
    color: var(--ordine-text);
}

.titolo-sezione {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--ordine-text);
}

.titolo-blocco {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .5rem;
    color: var(--ordine-text);
}

.titolo-scheda {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .375rem;
}

    .titolo-pagina.text-white,
    .titolo-sezione.text-white { color: #fff; }

@media (min-width: 992px) {
    .titolo-pagina { font-size: 2.25rem; }
    .titolo-sezione { font-size: 1.5rem; }
}

/* I titoli dei widget seguono la stessa scala: la variante scelta
   in Composizione Pagine cambia il corpo, non il carattere. */
.wtitle-default { font-size: 1.375rem; }
.wtitle-small { font-size: 1.125rem; }
.wtitle-large { font-size: 1.75rem; }
.wtitle-display { font-size: 2rem; }


/* ==========================================================
   La testata sta sopra il contenuto

   Il menu a tendina si apre sopra la pagina: senza questo, i
   blocchi che alzano lo z-index (il carosello della home, per
   dirne uno) gli finivano davanti e le voci non si potevano
   cliccare.
   ========================================================== */
.it-header-wrapper {
    position: relative;
    z-index: 10;
}

.it-header-wrapper .dropdown-menu {
    z-index: 1030;
}

/* ==========================================================
   Scelta della vista negli elenchi (schede / elenco)
   ========================================================== */
.selettore-vista {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.selettore-vista-etichetta {
    font-size: .875rem;
    color: var(--ordine-text-soft, #5b5b5b);
    margin-right: .25rem;
}

.selettore-vista-scelta {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    border: 1px solid var(--ordine-neutral-300, #dcdada);
    border-radius: 4px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ordine-text, #1a1a1a);
    text-decoration: none !important;
    background: #fff;
}

    .selettore-vista-scelta:hover {
        border-color: var(--ordine-primary, #b21717);
        color: var(--ordine-primary, #b21717);
    }

    .selettore-vista-scelta.attiva {
        background: var(--ordine-primary, #b21717);
        border-color: var(--ordine-primary, #b21717);
        color: #fff;
    }

@media (max-width: 575.98px) {
    .selettore-vista-scelta span:not(.visually-hidden) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ==========================================================
   Schede dei contenuti (novita', eventi, documenti)

   Stavano nel foglio dei widget: valgono per tutte le liste
   del sito, non solo per la home.
   ========================================================== */
/* ── Locandine ────────────────────────────────────────────────────────
       Sono manifesti, non fotografie: si mostrano intere su fondo neutro
       invece di essere tagliate a misura della scheda. */
    .locandina {
        position: relative;
        display: block;
        width: 100%;
        padding-top: 75%; /* 4:3 anche quando la locandina manca */
        background: var(--ordine-neutral-100, #f5f4f3);
        border-bottom: 1px solid var(--ordine-neutral-300, #dcdada);
    }

        .locandina-vuota {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ordine-neutral-300, #dcdada);
        }

        .locandina img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }

    /* ── Schede: uniformità fra i blocchi della home ─────────────────────*/
    .card-wrapper > .card { height: 100%; }

    .card.card-teaser .card-title a,
    .card.card-img .card-title a { color: var(--ordine-text, #1a1a1a); }

        .card.card-teaser .card-title a:hover,
        .card.card-img .card-title a:hover { color: var(--ordine-primary, #b21717); }

    .card .category-top { margin-bottom: .5rem; }

    /* I titoli veri sono lunghissimi: si fermano a tre righe, cosi' le schede
       della stessa fila restano confrontabili. Il titolo intero resta nel
       tooltip e nella pagina di dettaglio. */
    .card .card-title a {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card .category-top .data { color: var(--ordine-text-soft, #5b5b5b); }

    .teaser-icona {
        flex: 0 0 2.75rem;
        height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ordine-primary-light, #f7eaea);
        color: var(--ordine-primary, #b21717);
        font-size: 1.125rem;
    }

    .teaser-icona-sm { flex-basis: 2rem; height: 2rem; font-size: .875rem; }

    /* Le tessere possono portare i disegni storici del sito al posto di
       un'icona: niente cerchio colorato, il tratto basta da solo. */
    .teaser-simbolo { flex: 0 0 3.25rem; }

        .teaser-simbolo img { width: 3.25rem; height: 3.25rem; object-fit: contain; }

    /* Il "leggi" di Bootstrap Italia e' ancorato al fondo della scheda: qui
       le schede stanno in griglia, quindi torna nel flusso in coda al testo. */
    .card.card-teaser .read-more,
    .card.card-img .read-more {
        position: static;
        margin-top: .75rem;
        padding: 0;
    }



/* ==========================================================
   L'anello di messa a fuoco parla la lingua del sito

   Bootstrap Italia disegna il focus con un doppio anello bianco
   e nero: si vede su qualunque fondo, ma il nero spesso stona.
   Qui resta il doppio anello - serve a garantire il contrasto
   anche sulle superfici scure, come chiede la WCAG - e cambia
   solo la tinta esterna, che diventa il rosso istituzionale.
   Su bianco il rosso arriva a 5,9:1, ben oltre il 3:1 richiesto.
   ========================================================== */
.it-header-wrapper a:focus-visible,
.it-header-wrapper button:focus-visible,
.dropdown-menu a:focus-visible,
.it-footer a:focus-visible,
main a:focus-visible,
main button:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ordine-primary) !important;
    outline: none !important;
    border-radius: 2px;
}

/* Bootstrap Italia tinge di nero anche il bordo, non solo l'anello:
   sulle voci di menu, che hanno un bordo sinistro, restava una riga
   nera verticale accanto al testo. */
.it-header-wrapper a:focus,
.it-header-wrapper a:focus-visible,
.it-header-wrapper button:focus,
.it-header-wrapper button:focus-visible,
.dropdown-menu a:focus,
.dropdown-menu a:focus-visible,
.it-footer a:focus,
.it-footer a:focus-visible,
main a:focus,
main a:focus-visible,
main button:focus,
main button:focus-visible {
    border-color: var(--ordine-primary) !important;
}

/* Sulla barra rossa in cima l'anello si inverte: fuori il bianco */
.it-header-slim-wrapper a:focus-visible,
.it-header-slim-wrapper button:focus-visible {
    box-shadow: 0 0 0 2px var(--ordine-primary-dark), 0 0 0 4px #fff !important;
}


/* ==========================================================
   Elenco documenti: una voce, quattro livelli di lettura

   A sinistra il formato del file, in un riquadro: si vede da
   lontano cosa si sta per aprire. Poi la tipologia, il titolo,
   la descrizione e in coda i dati tecnici, piu' piccoli e
   staccati. Prima era tutto una riga sola di grigio.
   ========================================================== */
.elenco-documenti {
    margin: 0;
    border-top: 1px solid var(--ordine-neutral-300, #d1d1d1);
}

    .elenco-documenti > li {
        border-bottom: 1px solid var(--ordine-neutral-300, #d1d1d1);
    }

.voce-documento {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem .75rem;
    margin: 0 -.75rem;
    color: var(--ordine-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

    .voce-documento:hover,
    .voce-documento:focus-visible {
        background-color: var(--ordine-primary-light);
        border-left-color: var(--ordine-primary);
        color: var(--ordine-text);
    }

/* Il riquadro del formato: PDF, DOCX, ZIP... */
.voce-documento-formato {
    flex: 0 0 auto;
    min-width: 3.25rem;
    padding: .35rem .4rem;
    border: 1px solid var(--ordine-primary);
    border-radius: 4px;
    background: #fff;
    color: var(--ordine-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.2;
}

.voce-documento-corpo {
    flex: 1 1 auto;
    min-width: 0;
}

/* La tipologia sta sopra il titolo, come la categoria delle schede */
.voce-documento-tipologia {
    display: block;
    margin-bottom: .15rem;
    color: var(--ordine-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.voce-documento-titolo {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.voce-documento-descrizione {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .2rem;
    color: var(--ordine-neutral-700, #555);
    font-size: .9375rem;
    line-height: 1.45;
}

/* I dati tecnici: piccoli, spaziati, mai in mezzo al testo */
.voce-documento-dati {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: .45rem;
    color: var(--ordine-neutral-600);
    font-size: .8125rem;
}

    .voce-documento-dati i {
        margin-right: .2rem;
        opacity: .75;
    }

.voce-documento-freccia {
    flex: 0 0 auto;
    align-self: center;
    color: var(--ordine-primary);
    font-size: .8125rem;
}

@media (max-width: 575.98px) {
    .voce-documento {
        gap: .65rem;
        padding: .85rem .5rem;
    }

    .voce-documento-freccia {
        display: none;
    }
}

/* ==========================================================
   Filtri delle raccolte: le sotto-raccolte diventano bottoni
   che restringono l'elenco, non cartelle da aprire una a una.
   ========================================================== */
.filtri-raccolte {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.filtro-raccolta {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .35rem .85rem;
    border: 1px solid var(--ordine-neutral-300, #d1d1d1);
    border-radius: 999px;
    background: #fff;
    color: var(--ordine-text);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .filtro-raccolta:hover {
        border-color: var(--ordine-primary);
        color: var(--ordine-primary-dark);
    }

    .filtro-raccolta.attivo {
        border-color: var(--ordine-primary);
        background: var(--ordine-primary);
        color: #fff;
    }

    .filtro-raccolta .quanti {
        font-size: .75rem;
        font-weight: 400;
        opacity: .8;
    }


/* ==========================================================
   Barra di servizio in cima: trasparenza e contatti

   Sono i due collegamenti che non appartengono a una sezione
   sola. Stanno sulla fascia rossa, piccoli, a sinistra: si
   trovano sempre allo stesso posto senza rubare spazio alle
   cinque voci del menu.
   ========================================================== */
.barra-servizio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    height: 100%;
}

    .barra-servizio a {
        color: #fff;
        font-size: .8125rem;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid transparent;
    }

        .barra-servizio a:hover,
        .barra-servizio a:focus-visible {
            /*border-bottom-color: #fff;*/
        }

@media (max-width: 767.98px) {
    .barra-servizio {
        gap: .85rem;
    }

        .barra-servizio a {
            font-size: .75rem;
        }
}

/* ==========================================================
   Sezioni di Documenti e dati: aria fra un gruppo e l'altro

   I titoli di sezione stavano appiccicati alle card del gruppo
   precedente. Ogni sezione ora ha il suo respiro, e il titolo
   sta piu' vicino alle card che introduce che a quelle sopra.
   ========================================================== */
.sezione-documenti {
    margin-bottom: 3rem;
}

    .sezione-documenti:last-child {
        margin-bottom: 0;
    }

    .sezione-documenti .titolo-sezione {
        margin-bottom: 1rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--ordine-neutral-300);
    }


/* ==========================================================
   Apertura delle schede di contenuto

   Il banner e' un'immagine vera dentro un riquadro con
   proporzione fissa: sopra ci va una velatura scura e il
   titolo, che deve restare leggibile su qualunque fotografia.
   Senza banner non si disegna nulla: il titolo prende il suo
   posto normale.
   ========================================================== */
.testata-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    /* larghezza esplicita: con la sola proporzione e un tetto all'altezza il
       browser ricava la larghezza dall'altezza e la fascia resta corta */
    width: 100%;
    aspect-ratio: 21 / 7;
    max-height: 30rem;
    overflow: hidden;
    background: var(--ordine-neutral-800, #333);
}

.testata-banner-immagine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.testata-banner-testo {
    width: 100%;
    padding: 2.5rem 0 1.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .15) 70%, transparent);
    color: #fff;
}

    .testata-banner-testo .testata-occhiello,
    .testata-banner-testo .testata-occhiello a {
        color: #fff;
    }

.testata-titolo {
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

@media (max-width: 767.98px) {
    .testata-banner {
        aspect-ratio: 4 / 3;
    }

    .testata-banner-testo {
        padding: 1.5rem 0 1.25rem;
    }
}

/* L'occhiello dice di che contenuto si tratta, prima del titolo */
.testata-occhiello {
    margin-bottom: .35rem;
    color: var(--ordine-primary);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .testata-occhiello a {
        color: inherit;
        text-decoration: none;
    }

        .testata-occhiello a:hover {
            text-decoration: underline;
        }

.testata-contenuto.con-banner {
    margin-top: 1.75rem;
}

.testata-sottotitolo {
    margin-bottom: .5rem;
    color: var(--ordine-neutral-700, #555);
    font-size: 1.125rem;
    line-height: 1.5;
}

.testata-data {
    margin-bottom: 0;
    color: var(--ordine-neutral-600);
    font-size: .875rem;
}

/* L'immagine del contenuto: piena larghezza della colonna, mai deformata */
.figura-contenuto {
    margin: 1.5rem 0 0;
}

    .figura-contenuto img {
        width: 100%;
        max-height: 32rem;
        object-fit: cover;
        border-radius: 4px;
    }

    .figura-contenuto figcaption {
        margin-top: .5rem;
        color: var(--ordine-neutral-600);
        font-size: .875rem;
    }

/* ==========================================================
   Testata affiancata: immagine a sinistra, testo a destra
   ========================================================== */
.testata-contenuto--affiancata {
    display: flex;
    align-items: center;
    gap: 2rem;
}

    .testata-contenuto--affiancata .figura-contenuto {
        flex: 0 0 auto;
        width: 40%;
        max-width: 24rem;
        margin: 0;
    }

        .testata-contenuto--affiancata .figura-contenuto img {
            width: 100%;
            max-height: none;
        }

    .testata-contenuto--affiancata .testata-contenuto-testo {
        flex: 1 1 auto;
        min-width: 0;
    }

@media (max-width: 767.98px) {
    .testata-contenuto--affiancata {
        flex-direction: column;
        gap: 1rem;
    }

        .testata-contenuto--affiancata .figura-contenuto {
            width: 100%;
            max-width: none;
        }
}

/* ==========================================================
   Canali social

   Una fila di icone, con il nome del canale scritto per chi
   legge con la voce sintetica. Nella barra rossa in cima sono
   bianche; nel piede seguono il colore del piede.
   ========================================================== */
.social-elenco {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin: 0;
}

    .social-elenco a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        color: inherit;
        text-decoration: none;
        transition: background-color .15s ease, transform .15s ease;
    }

        .social-elenco a:hover,
        .social-elenco a:focus-visible {
            background-color: rgba(255, 255, 255, .18);
            transform: translateY(-1px);
        }

.social-titolo {
    margin-bottom: .5rem;
    font-size: .9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Nella barra di servizio: piu' piccole, allineate ai collegamenti */
.social-barra {
    align-items: center;
    margin-right: 1rem;
}

    .social-barra .social-elenco a {
        width: 1.85rem;
        height: 1.85rem;
        color: #fff;
        font-size: .875rem;
    }

/* Nel piede il fondo è chiaro: l'alone bianco non si vedrebbe */
.it-footer .social-elenco a {
    color: var(--ordine-primary);
    border: 1px solid var(--ordine-neutral-300, #dcdada);
}

    .it-footer .social-elenco a:hover,
    .it-footer .social-elenco a:focus-visible {
        background-color: var(--ordine-primary);
        border-color: var(--ordine-primary);
        color: #fff;
    }

@media (max-width: 767.98px) {
    .it-header-center-wrapper.it-small-header {
        height: auto !important;
        min-height: 3.5rem;
        overflow: visible !important;
    }
}

@media (max-width: 768px) {
    .it-header-center-wrapper.it-small-header {
        height: auto !important;
        min-height: 3.5rem;
        overflow: visible !important;
    }
}