/* =========================================
   1. FONTS E TIPOGRAFIA MODERNA
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
.jost-<uniquifier> {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body {
    font-family: 'Jost','Roboto', sans-serif !important;
    background-color: #f4f7f6 !important; /* Grigio ghiaccio molto chiaro */
    color: #333333 !important; /* Testo grigio scuro, non nero assoluto */
    line-height: 1.6; /* Migliora la leggibilità del testo */
}

h1, h2, h3, h4, h5 {
    color: #004080 !important; /* Un blu reale più elegante del vecchio 'navy' */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
}

/* =========================================
   2. LAYOUT E SPAZIATURA (Via la gabbia!)
   ========================================= */
.container {
    background-color: #ffffff !important;
    max-width: 1400px !important; /* Più largo */
    padding: 40px !important; /* Riduciamo quel 10% eccessivo */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Ombra morbida moderna */
    border-radius: 8px; /* Angoli leggermente arrotondati */
    margin-top: 30px;
    margin-bottom: 30px;
}

/* =========================================
   3. MENU DI NAVIGAZIONE (Header)
   ========================================= */
/* Trasformiamo il menu da grigio scuro a bianco pulito */
#barra nav.navbar, 
#navbarSupportedContent, 
.navbar-toggler, 
.nav-item {
    background-color: #ffffff !important; /* Sfondo bianco */
    box-shadow: none;
}

/* Aggiungiamo un'ombra solo alla barra principale per staccarla dallo sfondo */
#barra nav.navbar {
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

/* I link del menu ora devono essere scuri (perché lo sfondo è bianco) */
a.nav-link {
    color: #333333 !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 15px 20px !important;
    transition: all 0.3s ease; /* Animazione fluida */
}

/* Effetto quando passi sopra col mouse (Hover) */
a.nav-link:hover {
    color: #004080 !important; /* Diventa blu */
    background-color: #f0f4f8; /* Sfondo leggerino al passaggio */
    border-radius: 4px;
}
#navbarSupportedContent2  {background-color:#FFFFFF}


.navbar-brand{
    width: 170px;
    height: 170px;
}
/* =========================================
   4. PULIZIA GENERALE
   ========================================= */
/* Nascondiamo la barra grigia extra se presente */
.spazio_per_menu {
    background-color: transparent !important; 
    margin-top: 100px !important; /* Aggiustiamo lo spazio */
}

/* =========================================
   5. STILE CARD MODERNE
   ========================================= */

/* Il contenitore della card */
.card {
    border: none !important; /* Rimuoviamo il vecchio bordo grigio */
    border-radius: 26px !important; /* Angoli molto arrotondati */
    background-color: #ffffff;
    /* Ombra soffusa iniziale */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04) !important; 
    /* Transizione fluida per l'animazione */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden; /* Assicura che l'immagine segua gli angoli arrotondati */
    margin-bottom: 30px; /* Spazio sotto ogni card */
    background-color: #f4f6f9;
}

/* Effetto quando passi sopra col mouse (HOVER) */
.card:hover {
    /* La card si solleva verso l'alto di 5 pixel */
    transform: translateY(-5px); 
    /* L'ombra diventa più profonda e diffusa */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important; 
}

/* Gestione dell'immagine dentro la card */
.card-img-top {
    /* Assicuriamoci che l'immagine riempia bene lo spazio */
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    height: 220px !important; /* Uniformiamo l'altezza delle immagini */
    object-fit: cover; /* Ritaglia l'immagine senza deformarla */
}

/* Il corpo della card (dove c'è il testo) */
.card-body {
    padding: 1.5rem !important; /* Più spazio bianco attorno al testo */
	background-color: #f4f6f9;
}
.card-body p {color:#004080;}


/* Il Titolo della News/Card */
.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #004080; /* Blu scuro */
}

/* Il testo della Card */
.card-text {
    color: #666; /* Grigio medio per il testo descrittivo */
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Se ci sono bottoni "Leggi tutto" dentro le card */
.card .btn {
    border-radius: 50px !important; /* Bottone a pillola */
    padding: 8px 20px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    box-shadow: none;
}


/* =========================================
   6. CAROSELLO "HERO" CINEMATICO
   ========================================= */

/* Impostiamo l'area del carosello */
.carousel-inner {
    position: relative;
    /* Altezza fissa per schermi grandi: da un look da "copertina di rivista" */
    height: 600px !important; 
    overflow: hidden; /* Nasconde l'immagine che esce durante lo zoom */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Ombra sotto il carosello */
}

/* Gestione delle Immagini */
.carousel-item img {
    height: 600px !important; /* Forza l'altezza uguale al contenitore */
    width: 100% !important;
    object-fit: cover !important; /* FONDAMENTALE: Ritaglia la foto al centro senza schiacciarla */
    object-position: center center;
    
    /* Prepariamo l'animazione */
    transform-origin: center center;
    animation: kenburns 20s linear infinite alternate; 
}

/* L'animazione di Zoom lento (Effetto Ken Burns) */
@keyframes kenburns {
    0% {
        transform: scale(1); /* Dimensione normale */
    }
    100% {
        transform: scale(1.15); /* Zoom al 115% */
    }
}

/* =========================================
   7. BARRA SOCIAL E RICERCA (Sotto il carosello)
   ========================================= */

/* Modernizziamo la barra grigia sotto le foto */
.bar-img.footer {
    background: #ffffff !important; /* Sfondo bianco invece di grigio scuro */
    padding: 15px 0 !important;
    border-bottom: 1px solid #eaeaea;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    z-index: 10;
}

/* Icone Social */
.bar-img a img {
    opacity: 0.7; /* Leggermente trasparenti */
    transition: all 0.3s ease;
    transform: scale(0.9);
    width: 24px;

}

.bar-img a img:hover {
    opacity: 1; /* Colore pieno al passaggio */
    transform: scale(1.1); /* Si ingrandiscono un po' */
}

/* Barra di ricerca più moderna */
#cerca input {
    border-radius: 20px 0 0 20px !important; /* Arrotondato a sinistra */
    border: 1px solid #ddd !important;
    background-color: #f9f9f9;
}

#cerca button {
    border-radius: 0 20px 20px 0 !important; /* Arrotondato a destra */
    background-color: #004080 !important; /* Blu */
    color: white !important;
    border: 1px solid #004080 !important;
}


/* =========================================
   8. ADATTAMENTI PER MOBILE (Responsive)
   ========================================= */
@media (max-width: 768px) {
    /* Sul cellulare riduciamo l'altezza del carosello */
    .carousel-inner, 
    .carousel-item img {
        height: 350px !important;
    }
    
    /* Nascondiamo la barra social sul cellulare se occupa troppo spazio 
       OPPURE la rendiamo più compatta */
    .bar-img.footer {
        padding: 10px !important;
    }
    .bar-img img {
        width: 30px; /* Icone più piccole */
    }
}

/* =========================================
   9. MENU DI NAVIGAZIONE "A CAPSULA"
   ========================================= */

/* Il contenitore principale del menu (la barra che si collassa) */
#navbarSupportedContent {
    background-color: #ffffff !important; /* Sfondo bianco puro */
    /* Arrotondamento estremo per effetto pillola */
    border-radius: 50px !important; 
    /* Spaziatura interna per non far toccare i bordi ai link */
    padding: 8px 20px !important; 
    /* Un'ombra leggera per farlo "galleggiare" */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important; 
    /* Margine per staccarlo un po' dagli elementi vicini */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Le singole voci del menu (i link) */
.navbar-nav .nav-link {
    color: #555555 !important; /* Grigio scuro elegante */
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase;
    
    /* Arrotondiamo anche i singoli bottoni */
    border-radius: 30px !important; 
    padding: 10px 25px !important; /* Più larghi */
    margin: 0 5px !important; /* Spazio tra un bottone e l'altro */
    
    /* Preparazione all'animazione */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* EFFETTO AL PASSAGGIO DEL MOUSE (Hover) */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .active > .nav-link {
    background-color: #004080 !important; /* Sfondo Blu Reale */
    color: #ffffff !important; /* Testo Bianco */
    
    /* Effetto "Pop": si ingrandisce leggermente e fa ombra */
    transform: translateY(-2px) scale(1.05); 
    box-shadow: 0 4px 10px rgba(0, 64, 128, 0.3);
}

/* RIMUOVIAMO IL VECCHIO BACKGROUND SCURO DAL GENITORE */
/* Questo serve a garantire che non ci siano strisce grigie sotto */
#barra, nav.navbar {
    background-color: transparent !important;
    box-shadow: none !important;
}


@media (max-width: 991px) { /* 991px è quando il menu di solito collassa */
    
    #navbarSupportedContent {
        border-radius: 15px !important; /* Meno arrotondato su mobile */
        padding: 20px !important;
        margin-top: 20px;
        text-align: center; /* Centra le voci su mobile */
    }

    .navbar-nav .nav-link {
        margin-bottom: 5px !important; /* Un po' di spazio verticale */
        width: 100%; /* Bottone largo tutto lo schermo su mobile */
    }
    .navbar-brand{
        width: 80px;
        height: 80px;
    }

}
    
/* =========================================
   10. SPONSOR E FOOTER
   ========================================= */

/* Effetto moderno sui loghi degli sponsor */
.sponsor-logo {
    filter: grayscale(100%) opacity(70%); /* Partono grigi e leggermente trasparenti */
    transition: all 0.3s ease-in-out; /* Animazione fluida */
    max-height: 80px; /* Evita che un logo sia gigantesco rispetto agli altri */
    width: auto;
}

/* Quando ci passi sopra col mouse, tornano a colori! */
.sponsor-logo:hover {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.1); /* Leggero ingrandimento */
}

.footer{
	color:#4D4D4D;
	border-top: 1px solid #eaeaea;
}