/* --- Stili Generali --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Fa in modo che il footer stia in fondo */
}

main {
    flex-grow: 1; /* Occupa lo spazio rimanente tra header e footer */
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box; /* Assicura che il padding non aumenti la larghezza */
}

/* --- Header --- */
header {
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative; /* Necessario per il menu mobile */
}

.top-bar {
    background-color: #f5f5f5;
    padding: 8px 0;
    font-size: 12px;
}

.top-bar .container { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center;
}

.top-bar ul li { 
    display: inline-block; 
    margin-left: 20px; 
}

.main-header { 
    padding: 15px 0; 
}

.main-header .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.logo img { 
    height: 50px; 
    display: block;
}

.main-nav ul li { 
    display: inline-block; 
    margin: 0 15px; 
}

.main-nav a { 
    font-weight: bold; 
    font-size: 16px; 
    padding: 10px 0; 
    border-bottom: 2px solid transparent; 
    transition: border-color 0.3s, color 0.3s; 
    display: block;
}

.main-nav a:hover { 
    color: #d12727; 
    border-bottom-color: #d12727; 
}

/* Nascondiamo di default il bottone per il menu mobile */
.mobile-nav-toggle {
    display: none;
}


/* --- Footer --- */
footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 40px 0 20px;
    margin-top: 40px; 
}

.footer-content { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 20px; 
    gap: 20px; /* Aggiunge spazio tra le colonne */
}

.footer-section { 
    flex: 1; 
    min-width: 200px; /* Evita che le colonne diventino troppo strette */
}

.footer-section h4 { 
    border-bottom: 1px solid #7f8c8d; 
    padding-bottom: 10px; 
    margin-top: 0;
}

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

.footer-bottom { 
    text-align: center; 
    margin-top: 20px; 
    font-size: 12px; 
    border-top: 1px solid #34495e; 
    padding-top: 20px; 
}

/* =============================================== */
/* --- MEDIA QUERIES PER LA RESPONSIVITÀ --- */
/* =============================================== */

/* -- Tablet e schermi medi (fino a 992px) -- */
@media (max-width: 992px) {
    .main-nav ul li {
        margin: 0 10px; /* Riduciamo lo spazio tra le voci del menu */
    }
    .main-nav a {
        font-size: 15px; /* Riduciamo leggermente il testo */
    }
    .footer-content {
        flex-wrap: wrap; /* Permette alle colonne di andare a capo */
    }
}


/* -- Mobile (fino a 767px) -- */
@media (max-width: 767px) {
    /* --- Header Mobile --- */
    .top-bar .container {
        justify-content: center; /* Centriamo i link della top bar */
    }
    .top-bar ul li {
        margin: 0 10px;
    }
    
    /* Stile per il bottone "Hamburger" */
    .mobile-nav-toggle {
        display: block; /* Mostriamo il bottone su mobile */
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
        z-index: 1001; /* Lo mettiamo sopra a tutto */
    }

    /* Nascondiamo la navigazione standard */
    .main-nav {
        display: none;
        position: absolute;
        top: 100%; /* Si posiziona sotto l'header */
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* Stile per mostrare il menu quando attivo (tramite JS) */
    .main-nav.nav-visible {
        display: block;
    }

    .main-nav ul {
        display: flex;
        flex-direction: column; /* Voci del menu in colonna */
        align-items: center;
        padding: 20px 0;
    }

    .main-nav ul li {
        margin: 10px 0; /* Spaziatura verticale */
        width: 100%;
        text-align: center;
    }

    .main-nav a:hover {
        border-bottom-color: transparent; /* Rimuoviamo il bordo al passaggio del mouse */
        background-color: #f5f5f5;
    }

    /* --- Footer Mobile --- */
    .footer-content {
        flex-direction: column; /* Colonne una sotto l'altra */
        align-items: center; /* Le centriamo */
        text-align: center;
    }
    .footer-section {
        margin: 0 0 30px 0; /* Spazio tra le sezioni impilate */
        width: 100%;
        max-width: 350px;
    }
}

/* =================================================================== */
/* --- STILI FOOTER PROFESSIONALE --- */
/* =================================================================== */
.site-footer {
    background-color: #2c3e50;
    color: #bdc3c7; /* Grigio chiaro per il testo, migliore leggibilità */
    padding: 60px 0 20px 0;
    font-size: 15px;
    line-height: 1.7;
}

.footer-grid {
    display: grid;
    /* Crea 3 colonne, che si adattano e vanno a capo su schermi piccoli */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column h4 {
    color: #ffffff;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

/* Linea decorativa sotto i titoli */
.footer-column h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: #d12727; /* Rosso del brand */
}

.footer-logo {
    max-width: 180px;
    margin-bottom: 20px;
}

.footer-mission {
    margin-bottom: 25px;
}

/* Stili per i link nel footer */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li {
    margin-bottom: 10px;
}
.footer-column a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-column a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Stili per le icone dei contatti */
.footer-contact ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.footer-contact svg {
    flex-shrink: 0;
    margin-top: 5px;
    color: #ffffff;
}

/* Stili per le icone social */
.social-icons {
    display: flex;
    gap: 12px;
}
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: background-color 0.2s, transform 0.2s;
}
.social-icons a:hover {
    background-color: #d12727;
    transform: translateY(-3px);
    text-decoration: none;
}

/* =================================================================== */
/* --- STILI FOOTER PROFESSIONALE E RESPONSIVE (CORRETTO) --- */
/* =================================================================== */
.site-footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    /* Spazio interno ridotto, specialmente in alto */
    padding: 50px 0 20px 0; 
    /* Rimuoviamo il margine esterno che creava lo spazio extra */
    margin-top: 0; 
    font-size: 15px;
    line-height: 1.7;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column h4 {
    color: #ffffff;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 0.5px;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: #d12727;
}

.footer-logo {
    max-width: 180px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

.footer-mission {
    margin-bottom: 25px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
}

.footer-column a:hover {
    color: #ffffff;
    text-decoration: none;
    padding-left: 5px;
}

.footer-contact ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.footer-contact svg {
    flex-shrink: 0;
    margin-top: 5px;
    color: #ffffff;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: background-color 0.2s, transform 0.2s;
}

.social-icons a:hover {
    background-color: #d12727;
    transform: translateY(-3px);
    text-decoration: none;
    padding-left: 0;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #34495e;
    padding-top: 30px;
    font-size: 14px;
    color: #7f8c8d;
}

.footer-bottom p {
    margin: 5px 0;
}

.footer-bottom a {
    color: #95a5a6;
}

.footer-bottom a:hover {
    color: #ffffff;
    text-decoration: underline;
    padding-left: 0;
}

/* --- Media Query per Tablet --- */
@media (max-width: 992px) {
    .site-footer {
        padding-top: 40px; /* Riduce ancora un po' lo spazio su tablet */
    }
    .footer-grid {
        gap: 30px;
    }
}

/* --- Media Query per Mobile --- */
@media (max-width: 767px) {
    .site-footer {
        padding-top: 30px; /* Meno spazio su mobile */
    }
    .footer-grid {
        text-align: center;
    }
    .footer-column h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-about .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }
    .social-icons {
        justify-content: center;
    }
    .footer-contact ul li {
        text-align: left;
        justify-content: center;
    }
    .footer-bottom {
        font-size: 13px;
    }
}
/* =================================================================== */
/* --- STILI PER MENU DROPDOWN AREA RISERVATA --- */
/* =================================================================== */

/* Contenitore principale della voce di menu con dropdown */
.main-nav .dropdown {
    position: relative; /* Necessario per posizionare il menu a tendina */
}

/* Stile per la freccia che indica la presenza di un sottomenu */
.main-nav .dropdown > a::after {
    content: ' ▾'; /* Aggiunge una piccola freccia verso il basso */
    font-size: 12px;
    display: inline-block;
}

/* Il menu a tendina vero e proprio, nascosto di default */
.main-nav .dropdown-menu {
    display: none; /* Nascosto di default */
    position: absolute;
    top: 100%; /* Si posiziona subito sotto la voce principale */
    left: 0;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    min-width: 220px; /* Larghezza minima del menu */
    z-index: 100;
    list-style: none;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Mostra il menu a tendina quando si passa il mouse sulla voce principale */
.main-nav .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Stile per le singole voci del menu a tendina */
.main-nav .dropdown-menu li {
    display: block; /* Le voci ora sono una sotto l'altra */
    margin: 0;
}

.main-nav .dropdown-menu li a {
    padding: 10px 20px;
    font-size: 15px; /* Testo leggermente più piccolo */
    font-weight: normal; /* Non in grassetto */
    color: #333;
    border-bottom: none; /* Rimuove il bordo inferiore */
    display: block; /* Occupa tutta la larghezza */
    white-space: nowrap; /* Evita che il testo vada a capo */
}

/* Effetto al passaggio del mouse sulle voci del sottomenu */
.main-nav .dropdown-menu li a:hover {
    background-color: #f5f5f5;
    color: #d12727; /* Colore rosso del brand */
}

/* Stile per il separatore */
.main-nav .dropdown-menu .separator {
    height: 1px;
    background-color: #e9ecef;
    margin: 8px 0;
}

/* --- Adattamento per il mobile --- */
@media (max-width: 767px) {
    /* Su mobile, i dropdown non funzionano. Rimuoviamo gli stili speciali */
    .main-nav .dropdown-menu {
        display: block;
        position: static;
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .main-nav .dropdown-menu li a {
        padding-left: 40px; /* Aggiunge un rientro per indicare che sono sottomenu */
        font-weight: normal;
        color: #495057;
    }
    .main-nav .dropdown > a::after {
        display: none; /* Nasconde la freccina */
    }
    .main-nav .dropdown-menu .separator {
        display: none; /* Nasconde il separatore */
    }
}