/* Mobile Hover Fix - Prevents hover effects from interfering with touch interactions */

/* Disable hover effects on mobile */
@media (max-width: 768px) {
    /* General no-hover class */
    .no-hover {
        pointer-events: auto !important;
    }
    
    /* Prevent hover styles from applying on mobile */
    .mobile-view .nav-link:hover,
    .mobile-view .dropdown-toggle:hover,
    .mobile-view .dropdown-item:hover {
        /* Reset any hover styles */
        transform: none !important;
        background-color: transparent !important;
        transition: none !important;
    }
    
    /* Force active states to take precedence over hover states */
    .mobile-view .nav-link.active,
    .mobile-view .dropdown-toggle.active {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Fix for shop elements that might be affected by hover */
    .mobile-view .shop:hover {
        transform: none !important;
        box-shadow: var(--card-shadow) !important;
    }
    
    /* Make sure header logo clicks work properly */
    .logo-link {
        z-index: 1005; /* Ensure it's above the mobile menu */
        position: relative;
    }
    
    /* Ensure dropdown toggles are clickable */
    .dropdown-toggle {
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove tap highlight on iOS */
    }
    
    /* Fix any transitions that might interfere with touch events */
    .nav-link, .dropdown-toggle, .dropdown-item {
        transition-delay: 0s !important;
    }
    
    /* Ensure touch events work correctly */
    body.menu-open {
        overflow: hidden; /* Prevent scrolling when menu is open */
    }
    
    /* Fix for any hover state persistence */
    .nav-link:active,
    .dropdown-toggle:active,
    .dropdown-item:active {
        background-color: rgba(255, 255, 255, 0.3) !important; /* Different from hover */
    }
    
    /* Completely hide dropdown-content in mobile */
    .dropdown-content {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
        clip: rect(0, 0, 0, 0) !important;
        overflow: hidden !important;
    }
    
    /* Fix z-index stacking for mobile */
    .mobile-dropdown-content {
        z-index: 1000 !important; /* Lower than the header */
    }
    
    /* Fixed header on top */
    header {
        z-index: 9999 !important; /* Make sure header is on top */
    }
    
    /* Mobile menu slide-out container */
    nav.active {
        z-index: 9998 !important; /* Just below header */
    }
}