/* Stili per il menu mobile */

/* Media query per dispositivi mobili */
@media (max-width: 768px) {
    /* Nascondi il menu desktop */
    .desktop-nav {
        display: none !important;
    }
    
    /* Mostra il menu mobile */
    #mobile-menu-container {
        display: block !important;
    }
    
    /* Stile per il pulsante hamburger */
    #mobile-menu-toggle {
        width: 100%;
        background-color: #5D4037;
        color: white;
        border: none;
        padding: 10px;
        font-size: 1.5rem;
        cursor: pointer;
        text-align: center;
    }
    
    /* Stile per il contenitore degli elementi del menu */
    #mobile-menu-items {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #8D6E63;
        padding: 10px 0;
    }
    
    /* Stile per i pulsanti dei link */
    #mobile-menu-items button {
        background-color: #D7CCC8;
        color: #3E2723;
        border: none;
        padding: 8px;
        margin: 2px 20px;
        border-radius: 3px;
        text-align: center;
        width: calc(100% - 40px);
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    
    /* Effetto hover per i pulsanti dei link */
    #mobile-menu-items button:hover {
        background-color: #A1887F;
        color: white;
    }
    
    /* Effetto active per i pulsanti dei link */
    #mobile-menu-items button:active {
        background-color: #5D4037;
        color: white;
    }
}

/* Media query per desktop */
@media (min-width: 769px) {
    /* Mostra il menu desktop */
    .desktop-nav {
        display: block !important;
    }
    
    /* Nascondi il menu mobile */
    #mobile-menu-container {
        display: none !important;
    }
}