/* Responsive Styles - Mobile First Approach */

/* Mobile styles (default, < 768px) */
.mobile-menu-toggle {
    display: flex;
}

nav .nav-list {
    display: none;
    flex-direction: column;
    gap: 0;
}

nav .nav-list.active {
    display: flex;
}

.nav-link {
    padding: var(--spacing-md);
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.1);
}

/* Tablet styles (>= 768px) */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none;
    }
    
    nav .nav-list {
        display: flex;
        flex-direction: row;
    }
    
    .nav-link {
        border-bottom: none;
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero h2 {
        font-size: 3rem;
    }
    
    footer .container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    
    .container {
        padding: 0 var(--spacing-lg);
    }
}

/* Desktop styles (>= 1024px) */
@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hero h2 {
        font-size: 3.5rem;
    }
    
    .hero p {
        font-size: var(--font-size-xl);
    }
    
    .container {
        padding: 0 var(--spacing-xl);
    }
    
    section {
        padding: var(--spacing-3xl) 0;
    }
}

/* Ensure touch targets are at least 44x44px on mobile */
@media (max-width: 767px) {
    .btn,
    .nav-link,
    .mobile-menu-toggle,
    input,
    textarea,
    button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Print styles */
@media print {
    nav,
    footer,
    .mobile-menu-toggle {
        display: none;
    }
    
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    
    a {
        text-decoration: underline;
        color: #000;
    }
}

/* Restaurant-specific responsive styles */
@media (min-width: 768px) {
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .menu-items {
        gap: var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    .menu-item-header {
        gap: var(--spacing-xl);
    }
}