/* Mobile Fixes CSS */

@media (max-width: 768px) {
    /* Prevent body scroll when menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
    }
    
    /* Fix z-index stacking */
    .mobile-navigation-mbx {
        z-index: 1002 !important;
    }
    
    .mobile-navigation-mbx .icon {
        position: relative;
        z-index: 1003 !important;
    }
    
    .mobile-navigation-mbx .overlay {
        z-index: 1001 !important;
    }
    
    .mobile-navigation-mbx #myLinks {
        z-index: 1002 !important;
    }
    
    /* Smooth menu transitions */
    .mobile-navigation-mbx #myLinks {
        visibility: hidden;
    }
    
    .mobile-navigation-mbx #myLinks.active {
        visibility: visible;
    }
    
    /* Header fixes */
    header {
        position: relative;
        z-index: 1000;
        min-height: 64px;
    }
    
    header.scrolled {
        min-height: 60px;
    }
    
    /* Ensure menu items are clickable */
    .mobile-navigation-mbx #myLinks a {
        pointer-events: auto;
        z-index: 1004;
    }
    
    /* Social icons alignment */
    .mobile-navigation-mbx #myLinks > div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 0 24px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .mobile-navigation-mbx #myLinks {
        width: 100vw;
        max-width: none;
    }
    
    .mobile-navigation-mbx .icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .mobile-navigation-mbx #myLinks a {
        padding: 10px 18px;
        font-size: 14px;
    }
    
    .mobile-navigation-mbx #myLinks a i {
        width: 20px;
        margin-right: 12px;
        font-size: 15px;
    }
}

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
    .mobile-navigation-mbx #myLinks {
        height: 100vh;
        height: 100dvh;
    }
    
    .mobile-navigation-mbx {
        position: relative;
        z-index: 1002;
    }
}

/* Better scrolling on mobile */
.mobile-navigation-mbx #myLinks {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}