/* ==========================================
   PIÈ DI PAGINA PRINCIPALE (FOOTER)
========================================== */
.main-footer {
    background: var(--primary-dark, #1a1a1a);
    color: #e0e0e0;
    /* Padding fluido: si adatta tra 40px e 80px in verticale, e 5% in orizzontale */
    padding: clamp(40px, 8vh, 80px) 5% 40px;
}

.footer-grid {
    display: grid;
    /* Impostazione predefinita per Desktop */
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    max-width: 1200px; /* Limita la larghezza massima su schermi molto grandi */
    margin: 0 auto;    /* Centra il footer nello schermo */
}

/* Intestazioni */
.footer-col h4 {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* Liste e Link */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* Correzione e pulizia dei selettori per i link */
.footer-col ul li a,
.footer-col ul li a:visited {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.footer-col ul li a:hover,
.footer-col ul li a:active {
    color: var(--accent, #ff9800);
}

/* Tabella degli Orari */
.hours-table {
    width: 100%;
    border-collapse: collapse;
}

.hours-table td {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hours-table .title-tab {
    text-align: center;
    border: none;
    font-weight: bold;
    color: #ffffff;
}

/* ==========================================
   DESIGN RESPONSIVE (MEDIA QUERIES)
========================================== */

/* Tablet e Schermi Medi (fino a 992px) */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* Passa a 2 colonne */
        gap: 30px;
    }
}

/* Dispositivi Mobili / Smartphone (fino a 600px) */
@media (max-width: 600px) {
    .main-footer {
        padding: 40px 20px 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr; /* Passa a 1 sola colonna */
        gap: 30px;
        text-align: center;
    }

    /* header {
        flex-direction: column;
        text-align: center; 
    } */

    .contact-info {
        display: none;
    }

    .hours-table td {
        text-align: center;
    }
}