/* Reset e stili generali */
body {
    font-family: 'Titillium Web', sans-serif;
    position: relative; /* Necessario per il posizionamento assoluto dello skip-link */
}

/* CORREZIONE COLORE SFONDO HEADER E MENU */
/* Colore di sfondo per l'header (con logo) */
body .it-header-center-wrapper {
    background-color: #004AAB !important;
}

/* Colore di sfondo per il menu principale */
body .navbar {
    background-color: #004AAB !important;
    border-bottom: 1px solid #e6e6e6;
    padding: 0;
    margin: 0;
}

/* Stile Slim Header - Aggiunto */
body .it-header-slim-wrapper {
    background-color: #003F92 !important; /* Aggiunto per cambiare colore slim header */
}

body .navbar .container {
    display: flex;
    justify-content: center;
    padding: 0;
}

body .navbar-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: left;
}

body .navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: normal; /* Impostato su normal (400) per rimuovere il grassetto */
    padding: 1rem 1.5rem !important;
    text-transform: none; /* Modificato da uppercase a none */
    font-size: 18px; /* Rimesso a 18px come da richiesta */
    font-family: 'Titillium Web', sans-serif !important; /* AGGIUNTO: Applica Titillium Web al menu */
    text-decoration: none;
    display: block;
}

body .navbar-nav .nav-link:hover,
body .navbar-nav .nav-link.active {
    color: #f0f0f0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

body .navbar-nav .nav-item {
    position: relative;
}

/* Menu Dropdown */
body .navbar-nav .dropdown-menu {
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    display: none;
    min-width: 200px;
    z-index: 1000;
    top: 100%;
    left: 0;
    list-style: none;
    padding: 0.5rem 0;
    border: none;
}

body .navbar-nav .nav-item:hover .dropdown-menu {
    display: block;
}

body .navbar-nav .dropdown-item {
    color: #003f92;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    display: block;
    text-transform: none;
    font-family: 'Titillium Web', sans-serif !important; /* AGGIUNTO: Applica Titillium Web al dropdown */
    font-weight: normal; /* Impostato su normal per consistenza */
    font-size: 18px; /* Impostato per consistenza */
}

body .navbar-nav .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #0066cc;
}

/* Dimensioni e spaziatura logo */
.it-brand-wrapper img {
    max-height: 60px !important;
    margin-right: 20px;
    width: auto !important;
    height: auto !important;
}

/* Stile per il titolo Comune di Pietralunga nell'header - REGOLA ULTRA-SPECIFICA */
body header .it-header-center-wrapper .it-brand-wrapper .it-brand-text h2 {
    font-family: 'Titillium Web', sans-serif !important;
    font-weight: 600 !important;
    font-size: 32px !important; /* Valore fisso in px per essere sicuri che sia più grande */
    margin: 0 !important;
    color: #fff !important;
    line-height: 1.2 !important; /* Aggiunto per un migliore allineamento verticale */
}

/* Stile per il link di ricerca che apre modale - MODIFICATO PER CERCHIO */
/* Selettore specifico per il link di ricerca nell'header */
body .it-header-center-wrapper .search-link,
body .it-header-center-wrapper .it-search-wrapper,
body .it-header-center-wrapper .search-wrapper a,
body .it-header-center-wrapper .btn-search,
body .it-header-center-wrapper a[onclick*="search"],
body .it-header-center-wrapper a[href*="search"],
body .it-header-center-wrapper .it-search-link,
body .it-header-center-wrapper .it-search-trigger,
body .it-header-center-wrapper .it-search-button,
body .it-header-center-wrapper .search-button,
body .it-header-center-wrapper .it-header-search-wrapper a,
body .it-header-center-wrapper .it-header-search-wrapper button,
body .it-header-center-wrapper .it-header-search-wrapper .btn {
    background-color: #ffffff !important; /* MODIFICATO: sfondo bianco invece di blu */
    border-radius: 50% !important; /* MODIFICATO: crea un cerchio perfetto */
    width: 48px !important; /* MODIFICATO: aumentato a 48px */
    height: 48px !important; /* MODIFICATO: aumentato a 48px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    position: relative !important;
}

/* Stile per l'icona della lente all'interno del link */
body .it-header-center-wrapper .search-link svg,
body .it-header-center-wrapper .it-search-wrapper svg,
body .it-header-center-wrapper .search-wrapper a svg,
body .it-header-center-wrapper .btn-search svg,
body .it-header-center-wrapper a[onclick*="search"] svg,
body .it-header-center-wrapper a[href*="search"] svg,
body .it-header-center-wrapper .it-search-link svg,
body .it-header-center-wrapper .it-search-trigger svg,
body .it-header-center-wrapper .it-search-button svg,
body .it-header-center-wrapper .search-button svg,
body .it-header-center-wrapper .it-header-search-wrapper a svg,
body .it-header-center-wrapper .it-header-search-wrapper button svg,
body .it-header-center-wrapper .it-header-search-wrapper .btn svg {
    width: 24px !important; /* MODIFICATO: icona più grande */
    height: 24px !important; /* MODIFICATO: icona più grande */
    fill: #003f92 !important; /* MODIFICATO: icona blu invece di bianca */
    margin: 0 !important;
}

/* Aggiungi la scritta "Cerca" a sinistra del cerchio */
body .it-header-center-wrapper .search-link::before,
body .it-header-center-wrapper .it-search-wrapper::before,
body .it-header-center-wrapper .search-wrapper a::before,
body .it-header-center-wrapper .btn-search::before,
body .it-header-center-wrapper a[onclick*="search"]::before,
body .it-header-center-wrapper a[href*="search"]::before,
body .it-header-center-wrapper .it-search-link::before,
body .it-header-center-wrapper .it-search-trigger::before,
body .it-header-center-wrapper .it-search-button::before,
body .it-header-center-wrapper .search-button::before,
body .it-header-center-wrapper .it-header-search-wrapper a::before,
body .it-header-center-wrapper .it-header-search-wrapper button::before,
body .it-header-center-wrapper .it-header-search-wrapper .btn::before {
    content: "Cerca" !important;
    position: absolute !important;
    right: 63px !important; /* 48px del cerchio + 15px di distanza */
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 16px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

/* Rimuovi eventuali testi dal pulsante di ricerca */
body .it-header-center-wrapper .search-link span,
body .it-header-center-wrapper .it-search-wrapper span,
body .it-header-center-wrapper .search-wrapper a span,
body .it-header-center-wrapper .btn-search span,
body .it-header-center-wrapper a[onclick*="search"] span,
body .it-header-center-wrapper a[href*="search"] span,
body .it-header-center-wrapper .it-search-link span,
body .it-header-center-wrapper .it-search-trigger span,
body .it-header-center-wrapper .it-search-button span,
body .it-header-center-wrapper .search-button span,
body .it-header-center-wrapper .it-header-search-wrapper a span,
body .it-header-center-wrapper .it-header-search-wrapper button span,
body .it-header-center-wrapper .it-header-search-wrapper .btn span {
    display: none !important;
}

/* Stile per la pagina dei risultati della ricerca */
.com-finder .search-results .result-title {
    color: #003f92;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.com-finder .search-results .result-description {
    color: #333;
    margin-bottom: 0.5rem;
}

.com-finder .search-results .result-url {
    color: #0066cc;
    font-size: 0.9rem;
}

.com-finder .search-results .result {
    border-bottom: 1px solid #e6e6e6;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.com-finder .search-results .result:last-child {
    border-bottom: none;
}

/* Skip link per accessibilità - MODIFICATO PER ESSERE INVISIBILE */
.skip-link {
    position: absolute;
    top: -9999px; /* Nasconde completamente l'elemento */
    left: 0;
    background: #003f92;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 9999;
    font-weight: bold;
    font-size: 1rem;
    transition: none;
}

.skip-link:focus {
    top: 0; /* Mostra l'elemento quando è in focus */
    left: 0;
    transition: top 0.3s ease;
    z-index: 10000;
}

/* MODIFICHE PER RISOLVERE I PROBLEMI */

/* 1. Correzione del colore del footer - RIMOSSIONE DEL BLU */
.it-footer-main {
    background-color: #202A2E !important; /* Sostituisce il colore blu con il quasi nero */
    --bs-border-opacity: 0.5;
}

/* 2. Prevenzione conflitti CSS per i moduli esterni */
/* Regole specifiche per i pulsanti del modulo AGID per evitare conflitti */
.agid-modulo-bottoni .agid-button {
    font-size: 1rem !important; /* Imposta la dimensione corretta del testo */
    font-weight: 500 !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.25rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    height: auto !important;
}

/* Regole specifiche per il testo dei pulsanti */
.agid-modulo-bottoni .agid-button .button-text {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Regole per il container dei pulsanti */
.agid-modulo-bottoni .agid-button-container {
    margin: 0 !important;
    padding: 0 !important;
}

.agid-modulo-bottoni .agid-button-item {
    padding: 0.5rem !important;
    margin: 0 !important;
}

/* 3. Isolamento degli stili per prevenire conflitti futuri */
/* Namespace per gli elementi del modulo AGID */
body .agid-modulo-bottoni * {
    box-sizing: border-box !important;
}

/* Override completo per gli stili dei pulsanti del modulo AGID */
body .agid-modulo-bottoni .btn {
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.25rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    height: auto !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Stile per il link Regione Umbria e Area Riservata - AGGIUNTO FONT TITILLIUM */
.it-header-slim-wrapper-content .navbar-brand {
    font-family: 'Titillium Web', sans-serif !important; /* AGGIUNTO */
    font-weight: normal !important;
}

body .it-header-slim-wrapper .it-header-slim-right-zone .btn {
    font-family: 'Titillium Web', sans-serif !important; /* AGGIUNTO */
}

/* Stili per le nuove posizioni modulo sopra/sotto i contenuti */
.moduletable-position-1, .moduletable-position-4, .moduletable-position-5, .moduletable-position-8 {
    background-color: #E6ECF2;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.moduletable-position-2, .moduletable-position-6 {
    background-color: #FFFFFF;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0,0.1);
}

.moduletable-position-3, .moduletable-position-7 {
    background-color: #004AAB;
    color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.moduletable-position-3 h3, .moduletable-position-7 h3 {
    color: white;
}

/* Stili per le sidebar */
.sidebar-left, .sidebar-right {
    padding: 15px;
    margin-bottom: 20px;
}

/* MODIFICHE AL FOOTER */

/* Stili generali per il footer */
.it-footer {
    background-color: #202A2E;
    padding: 0;
    color: white;
    font-family: 'Titillium Web', sans-serif !important; /* AGGIUNTO: Applica Titillium a tutto il footer */
}

/* Footer-1 con altezza dimezzata */
.footer-section.footer-1 {
    padding: 0.5rem 0; /* Dimezzato da 2rem 0 a 0.5rem 0 */
    text-align: center;
}

.footer-section.footer-1 .it-brand-wrapper {
    justify-content: center;
    margin-bottom: 0.25rem; /* Dimezzato da 1rem a 0.0.25rem */
}

.footer-section.footer-1 .it-brand-wrapper img {
    margin-right: 1rem;
    max-height: 40px; /* Ridotto da 80px a 40px */
    width: auto;
}

.footer-section.footer-1 .it-brand-text h2 {
    font-family: 'Titillium Web', sans-serif; /* AGGIUNTO: Applica Titillium Web nel footer */
    font-weight: 600; /* AGGIUNTO: Applica Titillium Web nel footer */
    font-size: 1.5rem; /* Lasciato come da richiesta */
    margin: 0;
    color: #fff !important;
}

/* Linee di separazione nel footer */
.footer-divider {
    height: 1px;
    background-color: white;
    margin: 0.25rem 0; /* Ridotto da 10px a 2.5px */
}

/* Stili per footer-2 e footer-3 */
.footer-section.footer-2,
.footer-section.footer-3 {
    padding: 1rem 0; /* Ridotto da 2rem 0 a 1rem 0 */
}

/* Container per i moduli nel footer con layout a griglia */
.footer-modules {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; /* Spaziatura negativa per creare uno spazio uniforme */
}

/* Stili per i moduli nel footer - MODIFICATI */
.footer-section .mod-custom {
    flex: 0 0 calc(25% - 20px); /* 4 moduli per riga */
    padding: 15px;
    margin: 10px;
    box-sizing: border-box;
    min-width: 200px;
    background-color: transparent; /* Assicura che lo sfondo sia trasparente */
    border: none; /* Rimuove eventuali bordi */
}

/* Forza i moduli personalizzati ad avere la struttura corretta */
.footer-section .mod-custom {
    display: block;
    width: 100%;
}

/* REGOLE PER I TITOLI DEI MODULI NEL FOOTER - RIVISTE */
/* Mostra i titoli reali dei moduli */
.footer-section .mod-custom h3 {
    display: block !important;
    visibility: visible !important;
    color: white !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 1.1rem !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid white !important;
}

/* Classe per i titoli generati via JavaScript */
.footer-section .mod-custom h3.real-module-title {
    display: block !important;
    visibility: visible !important;
    color: white !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 1.1rem !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid white !important;
}

/* Stile per i link nel footer - CORREZIONE SOTTOLINEATURA */
.footer-section .mod-custom a {
    color: white !important;
    text-decoration: underline !important; /* SOTTOLINEATURA DI DEFAULT */
    transition: all 0.3s ease;
}

.footer-section .mod-custom a:hover {
    text-decoration: none !important; /* RIMUOVI LA SOTTOLINEATURA AL PASSAGGIO DEL MOUSE */
    color: #f0f0f0 !important; /* Cambia solo il colore al passaggio del mouse */
}

/* Stile per le liste nel footer */
.footer-section .mod-custom ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section .mod-custom ul li {
    margin-bottom: 8px;
}

.footer-section .mod-custom ul li a {
    text-decoration: underline !important; /* Assicura che i link nelle liste siano sottolineati */
}

.footer-section .mod-custom ul li a:hover {
    text-decoration: none !important; /* Rimuovi la sottolineatura al passaggio del mouse */
}

/* Stile per il contenuto dei moduli nel footer */
.footer-section .mod-custom .module-content {
    position: relative;
}

/* Classe per i moduli che occupano 2 colonne */
.footer-section .double-width {
    flex: 0 0 calc(50% - 20px) !important; /* Occupa il doppio dello spazio */
}

/* Stile per i moduli con testo a 2 colonne */
.footer-section .two-columns {
    column-count: 2;
    column-gap: 20px;
}

/* Icone SVG */
.icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

.icon-white {
    fill: #ffffff;
}

/* Responsive */
@media (max-width: 1200px) {
    body .navbar-nav .nav-link {
        padding: 1rem 1rem !important;
    }
    
    .footer-section .mod-custom {
        flex: 0 0 calc(33.333% - 20px); /* 3 moduli per riga */
    }
    
    .footer-section .double-width {
        flex: 0 0 calc(66.666% - 20px) !important;
    }
}

@media (max-width: 768px) {
    .footer-section .mod-custom {
        flex: 0 0 calc(50% - 20px); /* 2 moduli per riga */
    }
    
    .footer-section .double-width {
        flex: 0 0 100% !important;
    }
}

@media (max-width: 576px) {
    .footer-section .mod-custom {
        flex: 0 0 100%; /* 1 modulo per riga */
    }
}
/* ============================= */
/* Allineamento larghezza Breadcrumb e Titoli Moduli (DEFINITIVO) */
/* ============================= */

/* Allinea il breadcrumb e i titoli (articoli e moduli) alla stessa larghezza massima.
   La regola per i titoli è più generica per coprire h1, h2, h3, ecc.
   La regola per il breadcrumb è specifica per non interferire con altre regole. */
nav[aria-label="Breadcrumb"],
main#main-content h1,
main#main-content h2,
main#main-content h3,
main#main-content h4,
main#main-content h5,
main#main-content h6 {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Responsive per tablet e mobile */
@media (max-width: 1200px) {
    nav[aria-label="Breadcrumb"],
    main#main-content h1,
    main#main-content h2,
    main#main-content h3,
    main#main-content h4,
    main#main#main-content h5,
    main#main-content h5,
    main#main-content h6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    nav[aria-label="Breadcrumb"],
    main#main-content h1,
    main#main-content h2,
    main#main-content h3,
    main#main-content h4,
    main#main-content h5,
    main#main-content h5,
    main#main-content h6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 576px) {
    nav[aria-label="Breadcrumb"],
    main#main-content h1,
    main#main-content h2,
    main#main-content h3,
    main#main-content h4,
    main#main-content h5,
    main#main-content h5,
    main#main-content h6 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ============================= */
/* Applica Titillium Web a tutto il contenuto della pagina (DEFINITIVO) */
/* ============================= */

/* Forza l'applicazione del font Titillium Web a TUTTO il contenuto
   all'interno dell'area principale del sito (breadcrumb, moduli, articoli).
   L'uso dell'ID (#site-content) garantisce la massima specificità. */
#site-content,
#site-content * {
    font-family: 'Titillium Web', sans-serif !important;
}
/* ============================= */
/* STILE PER I BOTTONI DEI TAG (MODIFICATO) */
/* ============================= */

/* Selettori comuni per i tag in Joomla 5 */
.tags a,
.tag a,
.label,
.badge,
.tag-list a,
div.tags a,
span.tag a {
    padding: 3px 10px !important; /* Padding/spazio dai bordi di 10/12px */
    border-radius: 20px !important; /* Angoli molto più arrotondati */
    border: 1px solid #004AAB !important; /* Bordo blu come header */
    background-color: #ffffff !important; /* Sfondo bianco */
    color: #004AAB !important; /* Scritta blu come header */
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 4px !important; /* Aggiunto un piccolo margine per separare i bottoni */
    transition: all 0.3s ease !important; /* Transizione morbida per l'effetto hover */
}

/* Effetto hover con colori inversi (tranne il bordo) */
.tags a:hover,
.tag a:hover,
.label:hover,
.badge:hover,
.tag-list a:hover,
div.tags a:hover,
span.tag a:hover {
    background-color: #004AAB !important; /* Sfondo blu su hover */
    color: #ffffff !important; /* Scritta bianca su hover */
    text-decoration: none !important;
    /* Il bordo rimane blu perché non viene sovrascritto qui */
}
/* ============================= */
/* GRASSETTO PER MODULO "MODULISTICA UFFICIO TECNICO" */
/* ============================= */

.agid-modulo-bottoni .agid-button .button-text {
    font-weight: bold !important;
}