/* Stile aggiornato per i titoli delle FAQ */
.faq-titolo-tendina {
    position: relative;
    padding-right: 40px;
    color: #0d6efd; /* Colore del testo */
    
    /* MODIFICA LA DIMENSIONE QUI */
    font-size: 1.4rem !important; /* Puoi usare i pixel (es. 22px) o i rem (es. 1.4rem) */
    font-weight: 400 !important;  /* Gestisce lo spessore: 400 normale, 600 semigrassetto, 700 grassetto */
    
    transition: color 0.2s ease;
}

/* Icona + quando la tendina è chiusa */
.faq-titolo-tendina::after {
    content: "＋";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #0d6efd;
    font-size: 1.4rem; /* Dimensione dell'icona più */
}

/* Icona - quando la tendina è aperta */
.faq-titolo-tendina.faq-aperta::after {
    content: "－";
    color: #dc3545; /* Diventa rossa quando è aperta */
    font-size: 1.4rem; /* Dimensione dell'icona meno */
}

/* header template */

.container-header {
    background-color: #9DD6F7 !important; /* Sostituisci con il tuo codice colore esadecimale */
    background-image: none !important;    /* Rimuove la sfumatura di default di Cassiopeia */
}


/* Opzione B: Cambiare lo sfondo esclusivamente della barra del menu (Se separata)
Se hai impostato il menu in un'area indipendente o vuoi isolare solo la striscia dei link css */

.container-nav {
    background-color: #9DD6F7 !important; /* Colore scuro per la barra di navigazione */
}


/* Opzione C: Cambiare il colore del testo dei link (Se il nuovo sfondo lo rende illeggibile)
Se passi da uno sfondo scuro a uno chiaro (o viceversa), potresti dover regolare il colore dei testi del menu: css */

.container-header .mod-menu a {
    color: #ffffff !important; /* Colore del testo dei link */
}
.container-header .mod-menu a:hover {
    color: #000080 !important; /* Colore al passaggio del mouse */
}


@media (min-width: 992px) {
    .site-grid {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 0 auto !important;
        grid-template-columns:
            [full-start] 0
            [main-start] repeat(4, minmax(0, 1fr))
            [main-end] 0
            [full-end] !important;
    }
}


.com-content-article__body {
    font-size: 1.2rem;
    line-height: 1.8;
}


.card-body p,
.card-body li {
    font-size: 1.2rem;
    line-height: 1.8;
}



.com-content-article__body {
    max-width: 100%;
}



.com-content-article__body > p:first-of-type img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.hero-img img {
    width: 100%;
    height: auto;
    display: block;
}


.com-content-category .category-desc img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}


.com-visforms .category-desc img {
    width: 100%;
    height: auto;
    display: block;
}

.com-visforms label {
    font-size: 1.15rem;
}



/* Forza l'immagine nativa delle Opzioni Categoria ad allinearsi al 95% del contenitore */
.blog-con-hero .category-desc-img img,
.blog-con-hero .com-content-category-blog__image img {
    width: 100% !important;
    height: 450px !important; /* Definisci l'altezza fissa del tuo banner */
    object-fit: cover !important; /* Taglia l'immagine proporzionalmente senza distorcerla */
    object-position: center !important;
    display: block !important;
}

/* Forza anche l'immagine se inserita manualmente DENTRO il testo della Descrizione */
.blog-con-hero .category-desc img {
    width: 100% !important;
    height: 450px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}



/* Stato normale del pulsante Leggi tutto */
.com-content-category-blog__items .btn-secondary {
    background-color: #007bff !important; /* Colore dello sfondo */
    border-color: #007bff !important;     /* Colore del bordo */
    color: #ffffff !important;            /* Colore del testo */
    padding: 10px 20px !important;        /* Spessore del pulsante (Sopra/Sotto Destra/Sinistra) */
    border-radius: 4px !important;        /* Arrotondamento degli angoli (0 per spigoli vivi) */
    font-weight: bold !important;         /* Testo in grassetto */
    text-transform: uppercase;            /* Testo tutto in maiuscolo (Opzionale) */
    transition: all 0.3s ease;            /* Transizione fluida per l'effetto al passaggio del mouse */
}

/* Stato al passaggio del mouse (Hover) e al clic (Active) */
.com-content-category-blog__items .btn-secondary:hover,
.com-content-category-blog__items .btn-secondary:focus {
    background-color: #0056b3 !important; /* Colore sfondo quando ci passi sopra */
    border-color: #0056b3 !important;     /* Colore bordo quando ci passi sopra */
    color: #ffffff !important;            /* Colore testo quando ci passi sopra */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Leggera ombra (Opzionale) */
}

/* riquadri modulo terapie */

/* Dispone l'elenco dei moduli articoli in verticale (uno sotto l'altro) */
.articoli-cards ul {
    display: flex;
    flex-direction: column; /* Forza la disposizione in verticale */
    gap: 12px; /* Spazio di separazione verticale tra un riquadro e l'altro */
    padding: 0 !important;
    list-style: none !important; /* Rimuove i pallini */
    margin: 1.5rem 0 !important;
    width: 100%;
}

/* Forza ogni singolo riquadro a prendere tutta la larghezza disponibile */
.articoli-cards ul li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Stile grafico del listello/riquadro orizzontale */
.articoli-cards ul li a {
    display: block;
    padding: 15px 20px; /* Spazio interno del riquadro */
    background-color: #f8f9fa; /* Colore di sfondo */
    border: 1px solid #dee2e6; /* Colore del bordo */
    border-radius: 6px;        /* Angoli arrotondati */
    color: #000080 !important; /* Colore del testo */
    text-decoration: none !important;
    text-align: left;          /* Allinea il testo a sinistra (stile elenco pulito) */
    font-weight: 600;
    transition: all 0.2s ease;
}


/* Sostituisci il vecchio blocco .articoli-cards ul li a:hover con questo: */

/* 1. Forza lo stato normale e impedisce il cambio colore per i link già visitati */
.articoli-cards ul li a,
.articoli-cards ul li a:visited {
    background-color: #f8f9fa !important;
    color: #000080 !important;
    border-color: #dee2e6 !important;
    padding-left: 20px !important;
    transition: all 0.2s ease;
}

/* 2. ATTIVA L'EFFETTO HOVER SOLO SU PC (dispositivi con puntatore mouse) */
@media (hover: hover) and (pointer: fine) {
    .articoli-cards ul li a:hover {
        background-color: #9DD6F7 !important; /* Il tuo colore principale */
        color: #ffffff !important;
        border-color: #007bff !important;
        padding-left: 25px !important; /* Effetto slittamento */
    }
}

/* 3. GESTIONE OTTIMIZZATA PER TOUCH (MOBILE): l'effetto dura solo il millisecondo del tocco */
.articoli-cards ul li a:active {
    background-color: #007bff !important;
    color: #ffffff !important;
}



/* Sgancia il menu dal comportamento in linea di Cassiopeia */
.container-header .navbar-nav, 
.container-header .mod-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    width: 100% !important;
}

/* Trasforma i singoli elementi <li> in veri riquadri Card */
.container-header .navbar-nav .nav-item,
.container-header .mod-menu li {
    flex: 1 1 calc(10% - 10px) !important; /* Distribuisce le 10 voci in modo flessibile */
    min-width: 120px !important;            /* Impedisce che si stringano troppo */
    background-color: transparent !important; /* MODIFICATO: Sfondo trasparente a riposo */
    border: 1px solid #dee2e6 !important;  /* Bordo del riquadro */
    border-radius: 6px !important;         /* Angoli arrotondati */
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; /* Leggera ombra */
    padding: 10px !important;
    text-align: center !important;
    margin: 0 !important;
    transition: all 0.2s ease-in-out !important;
}

/* Forza lo stile del testo interno (Rimuove lo stile link piatto) */
.container-header .navbar-nav .nav-link,
.container-header .mod-menu li a {
    color: #000080 !important;              /* MODIFICATO: Colore testo Blu Scuro (#000080) a riposo */
    font-weight: 600 !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Effetto Hover visibile al passaggio del mouse */
.container-header .navbar-nav .nav-item:hover,
.container-header .mod-menu li:hover {
    background-color: transparent !important;  /* MODIFICATO: Mantiene lo sfondo trasparente al passaggio del mouse */
    border-color: #0d6efb !important;      /* Il bordo diventa blu */
    transform: translateY(-2px) !important;/* Effetto sollevamento */
}

/* MODIFICATO: Forza il testo a rimanere #000080 quando si passa il mouse sopra la voce */
.container-header .navbar-nav .nav-item:hover .nav-link,
.container-header .mod-menu li:hover a {
    color: #000080 !important;              /* Mantiene il testo Blu Scuro al mouseover */
}


/* Stile per la Card del pulsante selezionato (Pagina Attiva) */
/* NOTA: Questo blocco mantiene lo sfondo blu e il testo bianco per evidenziare la pagina in cui si trova l'utente */
.container-header .navbar-nav .nav-item:has(.active),
.container-header .mod-menu li:has(.active),
.container-header .navbar-nav .nav-item .active,
.container-header .mod-menu li a.active {
    background-color: #0d6efb !important; /* Colore di sfondo (Blu Bootstrap) */
    border-color: #0d6efb !important;     /* Colore del bordo */
    color: #ffffff !important;            /* Colore del testo (Bianco) */
}

/* 1. Forza lo sfondo e il bordo colorato sulla card attiva (LI) */
.container-header .navbar-nav .nav-item.active,
.container-header .mod-menu li.active,
.container-header .navbar-nav .nav-item.current,
.container-header .mod-menu li.current {
    background-color: #0d6efb !important; /* Colore di sfondo (Blu) */
    border-color: #0d6efb !important;     /* Colore del bordo */
}

/* 2. Forza il testo bianco sul link all'interno della card attiva */
.container-header .navbar-nav .nav-item.active .nav-link,
.container-header .mod-menu li.active a,
.container-header .navbar-nav .nav-item.current .nav-link,
.container-header .mod-menu li.current a {
    color: #ffffff !important;            /* Colore del testo (Bianco) */
}




/* ultimo */


/* ==========================================
   1. STRUTTURA GENERALE (UGUALE PER TUTTI I DISPOSITIVI)
   ========================================== */

/* Sfondo celeste sempre al 100% */
.container-header {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Griglia nativa per il logo */
.container-header .site-grid,
.container-header .header-content {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================
   2. STILE GRAFICO DEI PULSANTI (UGUALE PER TUTTI)
   ========================================== */
.container-header .navbar-nav .nav-item,
.container-header .mod-menu li {
    background-color: transparent !important;
    border: 2px solid #000080 !important; 
    border-radius: 6px !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.05) !important;
    padding: 10px 14px !important;
    text-align: center !important;
    transition: all 0.2s ease-in-out !important;
}

/* Stile del testo */
.container-header .navbar-nav .nav-link,
.container-header .mod-menu li a {
    color: #000080 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Effetto Hover (Mouseover) */
.container-header .navbar-nav .nav-item:hover,
.container-header .mod-menu li:hover {
    background-color: transparent !important;
    border: 2px solid #000080 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important;
}
.container-header .navbar-nav .nav-item:hover .nav-link,
.container-header .mod-menu li a:hover {
    color: #000080 !important;
}

/* Stile Pagina Attiva (Selezionata) */
.container-header .navbar-nav .nav-item:has(.active),
.container-header .mod-menu li:has(.active),
.container-header .navbar-nav .nav-item .active,
.container-header .mod-menu li a.active,
.container-header .navbar-nav .nav-item.active,
.container-header .mod-menu li.active,
.container-header .navbar-nav .nav-item.current,
.container-header .mod-menu li.current {
    background-color: #0d6efb !important;
    border: 3px solid #0d6efb !important;
    color: #ffffff !important;
}
.container-header .navbar-nav .nav-item.active .nav-link,
.container-header .mod-menu li.active a,
.container-header .navbar-nav .nav-item.current .nav-link,
.container-header .mod-menu li.current a {
    color: #ffffff !important;
}


/* ==========================================================================
   3. CONFIGURAZIONE SPECIFICA PER COMPUTER (DA 992px IN SU) - FIX CHROME E EDGE
   ========================================================================== */
@media (min-width: 992px) {
    
    /* Forza la griglia nativa a non tagliare mai nulla e a stare a pieno schermo */
    .container-header,
    .container-header .site-grid,
    .container-header .header-content,
    .container-header .grid-child {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* Allineamento e sblocco totale della larghezza della navbar per riga unica */
    .container-header .navbar,
    .container-header .container,
    .container-header .navbar-collapse {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        justify-content: flex-start !important;
    }

    /* Regola l'allineamento di partenza sia per il logo che per la pulsantiera */
    .container-header .navbar-nav,
    .container-header .mod-menu {
        display: flex !important;
        width: auto !important;
        max-width: 100% !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;        /* Mantiene rigorosamente tutti i pulsanti su un'unica riga */
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 15px 0 0 40px !important;   /* Allineamento orizzontale in asse con la foto */
    }
    
    .container-header .navbar-nav .nav-item,
    .container-header .mod-menu li {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        min-width: 120px !important;
        margin: 0 !important;
}
Usa il codice con cautela.Come fare le prove:Se vuoi allungare i pulsanti su Chrome: aumenta il secondo valore (es. passa da 14px a 20px o 25px).Se in futuro vorrai stringerli ancora di più per fare spazio a nuovi pulsanti: diminuisci il valore (es. passa a 10px o 8px).Modificando questo valore esterno al blocco @supports, l'effetto si rifletterà principalmente su Chrome, lasciando Edge protetto dalle sue regole speciali che abbiamo calibrato prima.Salva il file e fai la prova con Ctrl + F5. Fammi sapere se:Modificando il padding (es. a 20px) i pulsanti su Chrome hanno finalmente risposto al comando allungandosi?Lo spazio rimasto a destra su Chrome è sufficiente per le tue esigenze?Le risposte dell'AI potrebbero contenere errori. Scopri di più
    }
    
    .container-header .navbar-nav .nav-link,
    .container-header .mod-menu li a {
        white-space: nowrap !important;
        font-size: 1rem !important;          /* Dimensione di base standard per Chrome */
    }

    /* --- GESTIONE LOGO SU PC --- */
    .container-header .navbar-brand,
    .container-header .brand {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .container-header .navbar-brand img,
    .container-header .brand-logo img,
    .container-header .brand-title {
        margin-left: 40px !important;       /* Allineamento in asse perfetto con la HOME */
        position: relative !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
    }



      /* ==========================================================================
       FIX ESCLUSIVO PER MICROSOFT EDGE - CALIBRAZIONE LUNGHEZZA
       ========================================================================== */
    @supports (-ms-ime-align:auto) or (background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent))) {
        
        /* 1. Riduciamo ancora un briciolo il testo su Edge per recuperare spazio */
        .container-header .navbar-nav .nav-link,
        .container-header .mod-menu li a {
            font-size: 0.88rem !important; /* Era 0.92rem, abbassato a 0.88rem */
        }

        /* 2. Stringiamo la larghezza minima del singolo pulsante solo su Edge */
        .container-header .navbar-nav .nav-item,
        .container-header .mod-menu li {
            padding: 10px 8px !important;   /* Ridotto padding laterale a 8px */
            min-width: 105px !important;    /* Era 112px, ridotto a 105px per far rientrare il menu */
        }
        
        /* 3. Avviciniamo leggermente i pulsanti tra loro */
        .container-header .navbar-nav,
        .container-header .mod-menu {
            gap: 6px !important;            /* Spazio tra i pulsanti ridotto a 6px */
        }
    }



/* ==========================================================================
   4. CORREZIONE STRUTTURA MOBILE (SOTTO I 992px)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Ripristina la griglia nativa a schermo intero per i telefoni */
    .container-header .site-grid,
    .container-header .header-content {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ripristina la disposizione verticale dei pulsanti nel menu a tendina (Collapse) */
    .container-header .navbar-nav,
    .container-header .mod-menu {
        display: flex !important;
        flex-direction: column !important; 
        gap: 8px !important;               
        padding: 10px 15px !important;     
        margin: 0 !important;
        width: 100% !important;
    }

    .container-header .navbar-nav .nav-item,
    .container-header .mod-menu li {
        width: 100% !important;            
        min-width: 0 !important;
        text-align: left !important;       
    }
    
    /* Disattiva l'effetto di sollevamento verticale su mobile */
    .container-header .navbar-nav .nav-item:hover,
    .container-header .mod-menu li:hover {
        transform: none !important;
    }

    /* --- GESTIONE LOGO SU MOBILE --- */
    .container-header .navbar-brand,
    .container-header .brand {
        overflow: hidden !important; 
    }

    .container-header .navbar-brand img,
    .container-header .brand-logo img,
    .container-header .brand-title {
        margin-left: 0 !important;
        display: block !important;
        max-width: 100% !important;
        width: auto !important;
    }
} /* <--- Chiusura corretta delle regole Mobile */