/* Mobile Button Fixes CSS */

/* Fix for mobile touch targets and button interactions */
@media (max-width: 768px) {
    
    /* Ensure all buttons have proper touch targets (minimum 44px) */
    .mobile-navigation-mbx .icon,
    .mobile-navigation-mbx #myLinks a {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Fix for button active states on mobile */
    .mobile-navigation-mbx .icon:active {
        transform: scale(0.95);
        background: var(--primary-dark);
    }
    
    .mobile-navigation-mbx #myLinks a:active {
        transform: scale(0.98);
        background: var(--primary-gradient);
        color: white;
    }
    
    /* Prevent double-tap zoom on buttons */
    .mobile-navigation-mbx .icon,
    .mobile-navigation-mbx #myLinks a,
    .btn,
    button,
    [onclick] {
        touch-action: manipulation;
    }
    
    /* Fix for iOS Safari button rendering */
    .mobile-navigation-mbx .icon,
    .mobile-navigation-mbx #myLinks a {
        -webkit-appearance: none;
        appearance: none;
        border: none;
        outline: none;
    }
    
    /* Improve button accessibility on mobile */
    .mobile-navigation-mbx .icon:focus,
    .mobile-navigation-mbx #myLinks a:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    /* Fix for button text selection on mobile */
    .mobile-navigation-mbx .icon,
    .mobile-navigation-mbx #myLinks a {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

/* Additional fixes for various mobile browsers */
@media (max-width: 768px) {
    /* Chrome on Android specific fixes */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .mobile-navigation-mbx .icon {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }
    
    /* Safari on iOS specific fixes */
    @supports (-webkit-touch-callout: none) {
        .mobile-navigation-mbx #myLinks {
            -webkit-overflow-scrolling: touch;
        }
    }
}