/**
 * Mobile Navigation Position Fix
 * Fixes hamburger menu appearing outside viewport
 */

/* Ensure header doesn't overflow viewport */
.header {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* Ensure nav-container stays within viewport */
.nav-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
    .header {
        padding: 12px 0 !important;
    }
    
    .nav-container {
        padding: 0 15px !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure logo doesn't take too much space */
    .logo {
        flex-shrink: 0 !important;
        max-width: calc(100% - 60px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Ensure hamburger menu is positioned correctly */
    .mobile-menu-toggle {
        display: flex !important;
        flex-shrink: 0 !important;
        position: relative !important;
        right: 0 !important;
        margin-left: auto !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 1003 !important;
    }
    
    /* Hide desktop navigation on mobile */
    .nav-links {
        display: none !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .nav-container {
        padding: 0 10px !important;
    }
    
    .logo {
        font-size: 18px !important;
        max-width: calc(100% - 50px) !important;
    }
    
    .mobile-menu-toggle {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Fix for hamburger going outside viewport when navigation items change */
@media (max-width: 768px) {
    /* Ensure nav-container flexbox works correctly regardless of navigation count */
    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Ensure desktop nav-links don't interfere with mobile layout */
    .nav-links {
        display: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Force hamburger to stay in correct position */
    .mobile-menu-toggle {
        display: flex !important;
        position: relative !important;
        right: 0 !important;
        left: auto !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
    }
    
    /* Ensure logo doesn't push hamburger out */
    .logo {
        flex-shrink: 1 !important;
        max-width: calc(100% - 50px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin-right: 10px !important;
    }
}

/* Debug styles - remove after testing */
.debug-nav {
    .header {
        border: 2px solid red !important;
    }
    
    .nav-container {
        border: 2px solid blue !important;
    }
    
    .mobile-menu-toggle {
        border: 2px solid green !important;
    }
}