/**
 * Menu mobile responsive
 * Gestione hamburger e overlay
 */

@media (max-width: 768px) {
    .header-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--neutral-white);
        box-shadow: var(--shadow-lg);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        z-index: 999;
    }
    
    .header-menu.is-open {
        max-height: 100vh;
        opacity: 1;
        visibility: visible;
        padding: var(--spacing-xl) 0 var(--spacing-2xl) 0;
        overflow: visible;
        background: var(--neutral-white);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        min-height: 400px;
    }
    
    .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 0 var(--spacing-md);
    }
    
    .nav-list li {
        border-bottom: 1px solid var(--neutral-gray-light);
    }
    
    .nav-list li:last-child {
        border-bottom: none;
    }
    
    .nav-link {
        display: block;
        padding: var(--spacing-lg) var(--spacing-md);
        width: 100%;
        color: var(--dark-grey);
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        transition: all var(--transition-base);
    }
    
    .nav-link:hover {
        background: var(--neutral-gray-light);
        color: var(--dark-green);
    }
}

/* Effetti fade-in */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animazioni sequenziali */
.ksp-item.fade-in-up,
.offer-card.fade-in-up {
    transition-delay: calc(var(--animation-order, 0) * 0.1s);
}

.ksp-item:nth-child(1) { --animation-order: 1; }
.ksp-item:nth-child(2) { --animation-order: 2; }
.ksp-item:nth-child(3) { --animation-order: 3; }
.ksp-item:nth-child(4) { --animation-order: 4; }
.ksp-item:nth-child(5) { --animation-order: 5; }
.ksp-item:nth-child(6) { --animation-order: 6; }

.offer-card:nth-child(1) { --animation-order: 1; }
.offer-card:nth-child(2) { --animation-order: 2; }
.offer-card:nth-child(3) { --animation-order: 3; }