/* Forza il colore scuro per la tagline dei contatti */
.site-description {
    color: #171717 !important;
}

/* Forza la visibilità del bottone tre lineette su mobile */
.navbar-toggler {
    border-color: #171717 !important;
    background-color: rgba(23, 23, 23, 0.1) !important;
}
.navbar-toggler-icon {
    filter: invert(0%) !important;
}

/* ==========================================
   TRASFORMAZIONE MENU IN PULSANTI COLORATI
   ========================================== */

/* 1. Allineamento e spaziatura della barra del menu */
.container-nav .mod-menu, 
.navbar-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important; /* Spazio orizzontale tra un pulsante e l'altro */
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Trasformazione delle singole voci (li) in rettangoli/pulsanti */
.container-nav .mod-menu li,
.navbar-nav .nav-item {
    background-color: #f3f4f6 !important; /* Sfondo grigio chiaro di base */
    border: 1px solid #e5e7eb !important; /* Bordino sottile chiaro */
    border-radius: 6px !important;       /* Angoli piacevolmente arrotondati */
    transition: all 0.25s ease-in-out !important; /* Effetto transizione morbido */
    margin: 0 !important;
}

/* 3. Modellazione del testo interno (link) per dare spessore al pulsante */
.container-nav .mod-menu li a,
.navbar-nav .nav-link {
    color: #212529 !important;        /* Testo scuro leggibile */
    padding: 8px 16px !important;     /* Spazio interno verticale e orizzontale */
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* 4. Effetto al passaggio del mouse: SOLO il pulsante principale diventa Rosso SNALS */
.container-nav .mod-menu > li:hover,
.navbar-nav > .nav-item:hover {
    background-color: #c01a1a !important; /* Rosso istituzionale */
    border-color: #c01a1a !important;     /* Il bordo si adegua al rosso */
}

/* 5. Il testo e le frecciatine diventano bianchi al passaggio del mouse SOLO sul primo livello */
.container-nav .mod-menu > li:hover > a,
.navbar-nav > .nav-item:hover > .nav-link,
.navbar-nav > .nav-item:hover > .nav-link::after {
    color: #ffffff !important; /* Testo bianco candido */
}

/* ==========================================
   GESTIONE SOTTOMENU (TENDINE)
   ========================================== */

/* Rompe l'ereditarietà: i sottomenu non diventano rossi ma restano bianchi/grigi */
ul.mod-menu__sub-list,
.mod-menu__sub-list li {
    background-color: #f8f9fa !important; /* Sfondo chiaro della tendina */
    border: none !important;
}

/* Forza il colore nero su qualsiasi sottomenu del sito */
.mod-menu__sub-list a,
.mod-menu__sub-list li a,
.dropdown-menu a,
.dropdown-menu li a,
[class*="sub-list"] a {
    color: #212529 !important; /* Testo nero leggibile di base */
}

/* Comportamento quando si tocca o si passa sopra una voce del SOTTOMENU */
.mod-menu__sub-list a:hover, .mod-menu__sub-list a:focus, .mod-menu__sub-list a:active,
.mod-menu__sub-list li a:hover, .mod-menu__sub-list li a:focus, .mod-menu__sub-list li a:active,
.dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-menu a:active {
    color: #212529 !important; /* Resta rigorosamente nero */
    background-color: #e9ecef !important; /* Grigio leggermente più scuro per evidenziare la selezione */
}

/* ==========================================
   STRUTTURA HOME PAGE / PAGINE BLOG
   ========================================== */

/* Forza l'ingrandimento del titolo del modulo in alto nella Home */
.grid-child.container-top-b table.moduletable th,
.grid-child.container-top-b .moduletable th,
table.moduletable th {
    font-size: 1.75rem !important;   /* Stessa identica grandezza di Ultime Notizie */
    font-weight: 700 !important;      /* Grassetto deciso */
    color: #212529 !important;        /* Colore scuro coordinato */
    text-align: left !important;      /* Allineato a sinistra */
    padding-bottom: 15px !important;  /* Spazio di stacco dagli articoli sotto */
    display: block !important;        /* Lo fa comportare come un vero titolo di blocco */
}

/* Nasconde definitivamente i moduli e i menu di elenco in fondo alle pagine blog/articoli */
.com-content-category-blog .mod-menu,
.com-content-category-blog + .mod-menu,
.com-content-category-blog__subcategories,
.com-content-category__subcategories,
.com-content-article__subcategories,
div[class*="subcategories"],
.categories-list {
    display: none !important;
}