/* ============================================
   LEGAL PAGES MOBILE FIX - XPANDSIA
   Purpose: Optimize navbar spacing for mobile on Terms of Service and Privacy Policy pages
   ============================================ */

/* Mobile & Tablet (max-width: 768px) */
@media (max-width: 768px) {
    /* Fix 1: Compact header */
    .header {
        padding: var(--space-12) 0 !important;
    }
    
    .header-content {
        padding: 0 var(--space-16) !important;
        gap: var(--space-12) !important;
    }
    
    /* Fix 2: Smaller logo */
    .logo-container {
        width: 36px !important;
        height: 36px !important;
    }
    
    .logo-image {
        padding: 1px !important;
    }
    
    /* Fix 3: Compact language toggle */
    .lang-toggle {
        flex-shrink: 0;
    }
    
    #langToggleBtn {
        padding: var(--space-8) var(--space-12) !important;
        min-width: 60px !important;
        font-size: var(--font-size-sm) !important;
    }
    
    #currentFlag {
        width: 18px !important;
        height: 13px !important;
    }
    
    /* Fix 4: Compact back button */
    .back-link {
        padding: var(--space-8) var(--space-16) !important;
        font-size: var(--font-size-sm) !important;
        gap: var(--space-8) !important;
    }
    
    /* Fix 5: Ensure no horizontal overflow */
    .header,
    .header-content {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    /* Even more compact for very small screens */
    .header-content {
        padding: 0 var(--space-12) !important;
        gap: var(--space-8) !important;
    }
    
    .logo-container {
        width: 32px !important;
        height: 32px !important;
    }
    
    #langToggleBtn {
        padding: var(--space-6) var(--space-8) !important;
        min-width: 50px !important;
    }
    
    #currentFlag {
        width: 16px !important;
        height: 12px !important;
    }
    
    .back-link {
        padding: var(--space-6) var(--space-12) !important;
        font-size: var(--font-size-xs) !important;
    }
    
    /* Hide back button text on very small screens, keep icon only */
    .back-link span {
        display: none !important;
    }
    
    .back-link::before {
        content: '←' !important;
        font-size: var(--font-size-lg) !important;
    }
}