/* Responsive */
@media (max-width: 768px) {
    .site-header {
        padding: 0.5rem 0; /* Remove side padding to allow full width scroll */
        height: auto;
        min-height: 60px;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        overflow: hidden; /* Prevent horizontal scroll on body */
    }
    
    .logo {
        height: 40px;
        width: 100%;
        justify-content: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        margin-bottom: 0;
        padding-bottom: 0.5rem;
    }

    .logo img {
        height: 30px;
    }
    
    /* Horizontal Scrollable Menu */
    .nav-links {
        display: flex !important;
        flex-direction: row;
        width: 100%;
        gap: 0;
        overflow-x: auto; /* Enable horizontal scrolling */
        overflow-y: hidden;
        padding: 0.5rem 0;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
        scrollbar-width: none; /* Hide scrollbar Firefox */
        justify-content: flex-start;
        align-items: center;
    }

    .nav-links::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }

    .nav-link {
        display: inline-flex !important;
        white-space: nowrap;
        padding: 0.5rem 1rem;
        border-bottom: none;
        font-size: 0.85rem;
        background: rgba(255,255,255,0.05);
        margin: 0 4px;
        border-radius: 15px; /* Pill shape */
        flex-shrink: 0; /* Prevent shrinking */
    }
    
    .nav-link.active {
        background: var(--primary);
        color: #000;
    }

    /* Flatten Dropdowns for Mobile "One Line" feel */
    .dropdown {
        display: flex !important;
        align-items: center;
    }
    
    /* Hide the dropdown category buttons (Missions, Dashboard) */
    .dropdown-btn {
        display: none !important;
    }

    .dropdown-content {
        display: flex !important;
        position: static;
        width: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        transform: none !important; /* FIX: Remove the shift that was hiding content */
        flex-direction: row;
        align-items: center;
    }

    .dropdown-content a {
        padding: 0.5rem 1rem;
        text-align: center;
        font-size: 0.85rem;
        color: var(--text-light);
        border: none;
        white-space: nowrap;
        background: rgba(255,255,255,0.05);
        margin: 0 4px;
        border-radius: 15px;
        flex-shrink: 0;
    }
    
    .dropdown-content a:hover {
        background: var(--primary);
        color: #000;
    }
    
    .grid-container {
        grid-template-columns: 1fr;
    }

    /* Fix for iframe full screen on mobile */
    .main-wrapper {
        padding: 0; /* Remove padding on mobile to allow full width */
    }

    .content-area {
        width: 100vw; /* Force full viewport width */
    }
    
    .dashboard-container iframe {
        min-height: 100vh; /* Ensure full height */
    }
}