/* ============================================
   RESPONSIVE FIXES - Additional Optimizations
   ============================================ */

/* ============================================
   1. MOBILE MENU BREAKPOINT CONSISTENCY
   ============================================ */

/* Ensure consistent breakpoint (1200px) */
@media screen and (max-width: 1199.98px) {
    /* Mobile menu visible */
    .mobile-menu-overlay,
    .mobile-menu-sidebar {
        display: block;
    }
    
    /* Desktop nav hidden */
    #header #nav {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    /* Mobile menu hidden */
    .mobile-menu-overlay,
    .mobile-menu-sidebar {
        display: none !important;
    }
    
    /* Desktop nav visible */
    #header #nav {
        display: block;
    }
}

/* ============================================
   2. LANGUAGE ICONS RESPONSIVE FIXES
   ============================================ */

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .language-selector img,
    .language-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    .language-selector {
        gap: 4px !important;
    }
    
    .language-selector img,
    .language-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
}

/* ============================================
   3. HEADER RESPONSIVE OPTIMIZATIONS
   ============================================ */

@media screen and (max-width: 1199px) {
    /* Ensure header actions are visible */
    .header-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hamburger button always visible */
    .nav-opener,
    .menu-opener {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================
   4. TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Touch devices */
    .mobile-menu-link,
    .mobile-menu-submenu-link,
    .language-link {
        min-height: 44px;
        padding: 16px 20px;
    }
    
    .mobile-menu-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================
   5. LANDSCAPE ORIENTATION FIXES
   ============================================ */

@media screen and (max-width: 1199px) and (orientation: landscape) {
    .mobile-menu-sidebar {
        width: 70%;
        max-width: 280px;
    }
    
    .mobile-menu-link {
        padding: 14px 18px;
        min-height: 44px;
    }
}

/* ============================================
   6. HIGH DPI DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .language-icon,
    .mobile-menu-language-icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ============================================
   7. REDUCED DATA MODE
   ============================================ */

@media (prefers-reduced-data: reduce) {
    .mobile-menu-sidebar {
        background-image: none;
    }
    
    .language-icon {
        filter: none;
    }
}

/* ============================================
   8. DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    .mobile-menu-sidebar {
        background-color: #1a1a1a;
        background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    }
    
    .mobile-menu-header {
        background-color: #1a1a1a;
        background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    }
}

/* ============================================
   9. FOCUS VISIBLE POLYFILL
   ============================================ */

.js-focus-visible .mobile-menu-link:focus:not(.focus-visible),
.js-focus-visible .mobile-menu-submenu-link:focus:not(.focus-visible),
.js-focus-visible .mobile-menu-close:focus:not(.focus-visible) {
    outline: none;
}

/* ============================================
   10. CONTAINER QUERIES (Future-proof)
   ============================================ */

@supports (container-type: inline-size) {
    .header-actions {
        container-type: inline-size;
    }
    
    @container (max-width: 400px) {
        .language-selector {
            gap: 3px !important;
        }
    }
}