/* ============================================================
   ANEA - NUOVO CSS UNIFICATO (Conforme AGID)
   ============================================================ */

/* 1. VARIABILI COLORI E TIPOGRAFIA */
:root {
    --anea-slim: #14427B;     /* Blu Scuro per Slim Header */
    --anea-main: #216ecc;     /* Blu più chiaro per Center e Navbar */
    --anea-accent: #ff9900;   /* Arancione per Focus e Pulsanti */
    --white: #ffffff;
}
/* Sovrascrive i font locali che danno errore 404 */
@font-face {
    font-family: 'Titillium Web';
    src: local('Titillium Web');
}

@font-face {
    font-family: 'Lora';
    src: local('Lora');
}

/* Forza l'uso del font scaricato da Google su tutto il sito */
html, body, h1, h2, h3, h4, h5, h6, .navbar, .nav-link, button {
    font-family: 'Titillium Web', sans-serif !important;
}

/* Se usi il font Lora per i testi lunghi o citazioni */
.font-serif {
    font-family: 'Lora', serif !important;
}

body {
    font-family: "Titillium Web", Helvetica, Arial, sans-serif;
    color: var(--white);
}

/* 2. STRUTTURA HEADER */
/* Slim Header */
.it-header-slim-wrapper {
    background-color: var(--anea-slim) !important;
}
.it-header-slim-wrapper a, 
.it-header-slim-wrapper span {
    color: var(--white) !important;
}

/* Header Center e Navbar */
.it-header-center-wrapper, 
.it-header-navbar-wrapper {
    background-color: var(--anea-main) !important;
}

/* Testi e Link */
.it-brand-wrapper a,
.it-brand-text strong,
.it-brand-text small,
.navbar-nav .nav-link,
.it-header-center-content-wrapper {
    color: var(--white) !important;
}

/* 3. LOGHI E BRANDING */
.stemma-anea {
    height: 50px;
    width: auto;
}
.stemma-cmna {
    height: 45px;
    width: auto;
    margin-left: 10px;
}

/* 4. ACCESSIBILITÀ (Focus Arancione richiesto AGID) */
a:focus, button:focus, input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 5. FIX VISUALIZZAZIONE MOBILE (Tutto in una riga) */
@media (max-width: 991px) {
    /* Forza l'allineamento orizzontale del Center Header */
    .it-header-center-content-wrapper {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 5px !important;
    }

    /* Rimpicciolisce loghi su smartphone */
    .stemma-anea { height: 35px !important; }
    .stemma-cmna { height: 32px !important; }
    
    /* Nasconde testi lunghi su mobile per salvare spazio */
    .brand-text-responsive { display: none !important; }

    /* Burger Menu Styling */
    .navbar-toggler {
        border: 1px solid rgba(255,255,255,0.5) !important;
        padding: 5px 8px !important;
    }

    /* Fix Menu Aperto (Evita il bianco totale) */
    .navbar-collapse {
        background-color: var(--anea-main) !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 9999;
        padding: 15px;
        border-top: 2px solid var(--anea-accent);
    }

    .navbar-nav .nav-link {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 12px 0;
    }
}

/* 6. MOTORE DI RICERCA */
.input-group-append button {
    background-color: var(--anea-accent) !important;
    border-color: var(--anea-accent) !important;
    color: var(--white) !important;
}

/* 7. COMANDI CARATTERE E CONTRASTO */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}
body.high-contrast .it-header-wrapper, 
body.high-contrast .it-header-slim-wrapper {
    background-color: #000 !important;
    border-bottom: 2px solid yellow !important;
}
body.high-contrast a { color: yellow !important; text-decoration: underline !important; 
}

/* Linea verticale di separazione  */
.brand-text-responsive.border-left {
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important; /* Forza spessore e colore */
    height: 40px; /* Imposta un'altezza fissa per la linea */
    display: flex;
    align-items: center;
    margin-left: 15px; /* Spazio prima della linea */
    padding-left: 15px; /* Spazio dopo la linea */
}

@media (max-width: 991px) {
    /* Allinea il burger a sinistra e il logo subito dopo */
    .it-header-center-content-wrapper {
        justify-content: flex-start !important;
    }
    
    .custom-burger-button {
        order: -1; /* Forza la posizione a sinistra */
        margin-right: 15px !important;
    }

    .it-brand-wrapper {
        justify-content: flex-start !important;
    }
}

.it-search-wrapper .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}

.it-search-wrapper button:hover {
    background-color: #e68a00 !important; /* Arancione leggermente più scuro al passaggio */
}

/* Stile Link Navbar ANEA */
.it-header-navbar-wrapper .nav-link {
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.75rem 1rem !important;
    transition: background 0.3s;
}

.it-header-navbar-wrapper .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Effetto hover leggero */
    border-radius: 4px;
}

.it-header-navbar-wrapper .nav-item.active .nav-link {
    border-bottom: 3px solid #ff9900; /* Sottolineatura arancione per la pagina attiva */
}

/* Effetto Social Navbar */
.opacity-hover {
    opacity: 0.8;
    transition: opacity 0.3s, transform 0.3s;
    display: inline-block;
}

.opacity-hover:hover {
    opacity: 1;
    transform: scale(1.2); /* Si ingrandisce leggermente al passaggio */
    color: #ff9900 !important; /* Diventa arancione al passaggio */
}

/* Fix per Mobile: nascondiamo i social nel burger per non affollarlo, 
   o li mettiamo in fondo alla lista se preferisci. */
@media (max-width: 991px) {
    .it-socials {
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.1);
        margin-top: 10px;
        display: flex !important; /* Li facciamo vedere anche nel menu mobile in fondo */
    }
}

/* Stile Dropdown Mobile */
@media (max-width: 991px) {
    .navbar-nav .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.05); /* Sfondo leggermente diverso per distinguere i figli */
        border: none;
        padding-left: 20px; /* Rientro per i link del sottomenu */
    }

    .navbar-nav .list-item {
        color: #ffffff !important;
        padding: 10px 0;
        display: block;
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    /* Ruota la freccetta quando il menu è aperto (opzionale se supportato dal JS) */
    .nav-item.show .fa-chevron-down {
        transform: rotate(180deg);
        transition: transform 0.3s;
    }
}

/* Stile Desktop */
@media (min-width: 992px) {
    .dropdown-menu {
        background-color: #216ecc;
        border-top: 3px solid #ff9900;
    }
}

@media (min-width: 992px) {
    /* Disabilita il comportamento dropdown su schermi grandi */
    .navbar-nav .dropdown-menu.d-lg-none {
        display: none !important;
    }
    
    /* Permette al link principale di essere cliccabile (sovrascrive il blocco di Bootstrap) */
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: none;
    }
    
    /* Rimuove il cursore a freccia se non necessario */
    .nav-link.dropdown-toggle::after {
        display: none !important;
    }
}

@media (max-width: 991px) {
    /* 1. Sfondo del menu aperto: Bianco */
    .navbar-collapse {
        background-color: #ffffff !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 10000;
        padding: 20px;
        border-bottom: 5px solid #216ecc; /* Una linea blu di chiusura in fondo */
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    /* 2. Testi dei link: Blu */
    .navbar-nav .nav-link {
        color: #216ecc !important; /* Il blu della tua navbar */
        border-bottom: 1px solid #f0f0f0; /* Linea sottile grigia tra le voci */
        padding: 15px 0 !important;
        font-weight: 600;
        display: flex;
        justify-content: space-between; /* Spinge la freccia a destra */
        align-items: center;
    }

    /* 3. Freccette (Chevron): Blu e allineate a destra */
    .navbar-nav .nav-link i.fa-chevron-down {
        color: #216ecc !important;
        margin-left: auto; /* Forza il posizionamento a destra */
        font-size: 0.9rem;
    }

    /* 4. Sottomenu (Dropdown): Grigio chiarissimo per distinguerlo */
    .navbar-nav .dropdown-menu {
        background-color: #f9f9f9 !important;
        padding-left: 15px;
        border: none !important;
    }

    .navbar-nav .list-item {
        color: #003366 !important; /* Blu scuro per i link interni */
        padding: 10px 0;
    }

    /* 5. Area Social nel menu mobile */
    .it-socials {
        border-top: 1px solid #eee;
        margin-top: 15px;
        padding-top: 15px;
    }
    .it-socials span, .it-socials i {
        color: #216ecc !important; /* Social blu su fondo bianco */
    }
}

@media (max-width: 991px) {
    /* Rimuove il contorno nero al click (focus) sui link e bottoni del menu */
    .navbar-nav .nav-link, 
    .navbar-nav .dropdown-toggle, 
    .navbar-nav .list-item,
    .custom-burger-button {
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent; /* Rimuove l'alone azzurro tipico di Android/iOS */
    }

    /* Opzionale: aggiungiamo un leggero cambio di colore di sfondo al tocco 
       per dare un feedback all'utente senza usare il bordo nero */
    .navbar-nav .nav-link:active {
        background-color: rgba(33, 110, 204, 0.05) !important;
    }
}

/* --- SEZIONE NEWS E CARD --- */

/* Titolo Sezione */
.text-primary, .separator-primary {
    color: #003366 !important;
    border-color: #003366 !important;
}

/* Card Grande (Avviso CER) */
.it-card-wrapper .card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.it-card-wrapper .btn-primary {
    background-color: #003366 !important;
    border-color: #003366 !important;
}

.it-card-wrapper .btn-outline-primary {
    color: #216ecc !important;
    border-color: #216ecc !important;
}

.it-card-wrapper .btn-outline-primary:hover {
    background-color: #216ecc !important;
    color: white !important;
}

/* Griglia Notizie (Card Piccole) */
.card-hover {
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    border: 1px solid #eee !important;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    border-color: #216ecc !important;
}

.card-title a {
    color: #003366 !important; /* Blu scuro per i titoli delle card */
}

/* Link "Maggiori informazioni" */
.read-more {
    color: #216ecc !important;
    text-decoration: none;
}

.read-more:hover i {
    transform: translateX(5px);
    transition: transform 0.2s;
}

/* Badge Success (Aperto) */
.badge-success {
    background-color: #28a745 !important;
}

@media (min-width: 992px) {
    .nav-item.dropdown:hover > .dropdown-menu {
        display: none !important;
    }
    .dropdown-toggle::after {
        display: none !important; /* Rimuove freccette di default di bootstrap */
    }
}
/* 03/04/2026 */

/* Header sempre fisso in alto */
.it-header-wrapper {
    position: sticky !important;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Ombra per staccare dal contenuto */
    background-color: #fff; /* Fondo bianco solido */
}

/* Rimuovi eventuali classi di traslazione se le avevi aggiunte */
.header-hidden {
    transform: none !important;
}

/* Assicurati che il body non abbia padding eccessivi ora che è sticky */
body {
    padding-top: 0 !important; 
}

/* 1. Reset totale del focus ring di sistema e di Bootstrap Italia */
button:focus,
.btn:focus,
.btn:active,
.nav-link:focus,
.navbar-toggler:focus,
a:focus,
[role="button"]:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important; /* Evita aloni grigi su certi bottoni */
}

/* 2. Rimuoviamo l'effetto "azzurro/nero" specifico dei bottoni al click */
.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 3. Rendiamo il focus visibile SOLO per chi usa la tastiera (Tab) */
/* Usiamo l'arancio del tuo tasto cerca per coerenza */
:focus-visible {
    outline: 2px solid #ff9900 !important; 
    outline-offset: 2px !important;
}

/* 4. Soluzione specifica per Mobile (evita il flash nero/grigio al tocco) */
a, button, .btn, .nav-link {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Allineamento Navbar Mobile */
.navbar-nav .dropdown-toggle {
    margin-left: auto;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Evita che il bottone della freccia abbia bordi o ombre strane */
.navbar-nav .btn-link:focus {
    box-shadow: none !important;
}

/* Su desktop nascondiamo il bottone della freccia se preferisci il look pulito */
@media (min-width: 992px) {
    .dropdown-toggle.d-lg-none {
        display: none !important;
    }
}

/* Card personalizzata con alone morbido */
.anea-card-glow {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background-color: #fff;
}

.anea-card-glow:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 102, 204, 0.15) !important; /* Un tocco di blu ANEA nell'ombra */
    border-color: #0066cc !important; /* Il bordo diventa blu all'hover */
}

/* Gestione Link Titoli */
.anea-card-glow .card-title a {
    color: #003366; /* Blu istituzionale */
    text-decoration: none;
    transition: color 0.3s ease;
}

.anea-card-glow:hover .card-title a {
    color: #0066cc; /* Il titolo si schiarisce leggermente all'hover della card */
}

/* Accessibilità (Focus) */
.anea-card-glow:focus-within {
    outline: 2px solid #0066cc;
    outline-offset: 4px;
}
/* 08/04/2026 */
/* Stile per link non ancora attivi */
.list-item.disabled-link {
    cursor: not-allowed; /* Cambia il cursore in un segnale di divieto */
    opacity: 1.0;
}

.list-item.disabled-link span {
    font-style: italic;
}

/* Assicura che il badge sia visibile e conforme */
.badge-secondary {
    background-color: #666 !important; /* Grigio più scuro per contrasto */
    color: #fff !important;
}

/* Stile per la tua card specifica */
.anea-card-glow {
    border: 1px solid #eee;
    transition: box-shadow 0.3s ease;
    background-color: #fff !important; /* Forza lo sfondo bianco */
}

/* Fix per i testi interni alla card se il body è bianco */
.anea-card-glow .card-title {
    color: var(--anea-main) !important;
}
.anea-card-glow .card-text {
    color: #444 !important; /* Grigio scuro leggibile */
}
/* GESTIONE FOCUS UNIFICATA (Conforme AGID ma discreta) */
a:focus, 
button:focus, 
input:focus, 
textarea:focus,
.btn:focus {
    /* Rimuoviamo il riquadro nero netto */
    outline: none !important;
    
    /* Aggiungiamo un'ombra morbida color arancio (anea-accent) o blu */
    /* Questo crea un effetto "glow" intorno all'elemento cliccato */
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.4) !important; 
    
    /* Se è un link testuale, possiamo aggiungere una sottolineatura marcata */
    text-decoration: none;
}

/* Rimuove l'effetto quando il clic è fatto con il mouse (per i browser che lo supportano) */
/* Mantiene l'evidenza solo per chi usa la tastiera (Tab) */
:focus:not(:focus-visible) {
    box-shadow: none !important;
}