/* Mobile-specific fixes for navbar and dropdown issues */

/* 1. Fix tap highlight on iOS/Android */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 2. Prevent text selection on interactive elements */
.dropdown-toggle,
.dropdown-item,
.nav-link,
.navbar-toggler,
.btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 3. Fix dropdown positioning on mobile */
@media (max-width: 991px) {
    .dropdown-menu {
        position: absolute !important;
        inset: 0px auto auto 0px !important;
        margin: 0px !important;
        transform: translate(0px, 40px) !important;
    }
    
    /* Ensure dropdown menu is properly positioned relative to the toggle */
    .dropdown {
        position: relative !important;
    }
    
    /* Fix dropdown menu width on mobile */
    #mainNavbar .dropdown-menu {
        min-width: 180px !important;
        max-width: 250px !important;
    }
}

/* 4. Improve touch interactions */
.dropdown-toggle,
.nav-link,
.navbar-toggler {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* 5. Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Remove all hover effects for navbar elements on touch devices */
    #mainNavbar .nav-link.dropdown-toggle:hover,
    #mainNavbar .nav-tab:hover,
    .dropdown-toggle:hover {
        background-color: transparent !important;
        transform: none !important;
    }
    
    /* Only show active/focus states on actual interaction */
    #mainNavbar .nav-link.dropdown-toggle:active,
    #mainNavbar .nav-link.dropdown-toggle:focus {
        background-color: rgba(0, 0, 0, 0.02) !important;
    }
    
    [data-theme="dark"] #mainNavbar .nav-link.dropdown-toggle:active,
    [data-theme="dark"] #mainNavbar .nav-link.dropdown-toggle:focus {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
}

/* 6. Fix dropdown toggle button appearance on mobile */
#mainNavbar .dropdown-toggle::after {
    vertical-align: middle;
}

/* 7. Ensure dropdown items are easily tappable on mobile */
.dropdown-item {
    padding: 0.75rem 1.25rem;
    min-height: 44px; /* Apple's recommended touch target size */
    display: flex;
    align-items: center;
    font-size: 14px !important; /* Ensure readable text size */
}

/* 8. Fix potential z-index issues with dropdowns */
.dropdown-menu {
    z-index: 1050;
}

/* 9. Smooth transitions for dropdown */
.dropdown-menu {
    transition: opacity 0.15s ease-in-out;
}

/* 10. Fix Bootstrap dropdown issues on iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific fixes */
    .dropdown-menu {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent iOS from zooming on form inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* 11. Ensure navbar toggle button is properly sized for mobile */
.navbar-toggler {
    padding: 0.5rem 0.75rem;
    min-width: 44px;
    min-height: 44px;
}

/* 12. Fix dropdown menu background on mobile */
.dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* 13. Remove any conflicting transform on dropdown when open */
.dropdown.show .dropdown-toggle {
    transform: none !important;
}

/* 14. Ensure dropdown items have proper contrast */
.dropdown-item {
    color: var(--text-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-color);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 15. Fix mobile navbar collapse animation */
#navbarNav {
    transition: height 0.3s ease-in-out;
}

/* 16. Ensure proper spacing in mobile dropdown */
@media (max-width: 991px) {
    #mainNavbar .dropdown-menu {
        margin-top: 0.5rem !important;
    }
}

/* 17. Fix potential overlap issues - removed background/border to prevent visual jump */

/* 18. Ensure dropdown stays within viewport on mobile */
@media (max-width: 575px) {
    .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
}

/* 19. Fix focus outline for accessibility */
.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* 20. Prevent accidental double-tap zoom */
.dropdown-toggle,
.dropdown-item,
.nav-link {
    touch-action: manipulation;
}

/* 21. Mobile text size improvements */
@media (max-width: 768px) {
    /* Ensure footer links are readable and tappable */
    .footer-link {
        font-size: 16px !important; /* Increase from 0.9rem (14.4px) to 16px */
        padding: 8px 4px !important; /* Add touch padding */
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
    }
    
    /* Footer link separators */
    .footer-links .text-muted {
        font-size: 16px !important;
        padding: 0 8px !important;
    }
    
    /* Dropdown header text */
    .dropdown-header {
        font-size: 14px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Navbar dropdown text improvements */
    #mainNavbar .dropdown-item {
        font-size: 16px !important; /* Override previous 14px for better mobile readability */
        line-height: 1.3 !important;
    }
    
    /* General small text fixes */
    small, .small {
        font-size: 14px !important; /* Minimum 14px for mobile */
    }
    
    /* Footer small text */
    .pvpocket-footer small {
        font-size: 14px !important;
    }
    
    /* Dark mode toggle label */
    .form-check-label {
        font-size: 14px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 8px 0 !important;
    }
}

/* 22. Fix navbar login/signup link */
@media (max-width: 768px) {
    .navbar-nav .nav-link {
        font-size: 16px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
    }
    
    /* Fix navbar brand touch target size */
    .navbar-brand {
        min-height: 44px !important;
        padding: 11px 0 !important; /* Add vertical padding to reach 44px */
    }
    
    /* Fix footer link touch targets */
    .footer-links .footer-link {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px 12px !important; /* Increase horizontal padding */
        text-align: center !important;
    }
}

/* 23. Ensure all links have minimum touch target size */
@media (max-width: 768px) {
    a:not(.btn):not(.navbar-brand):not(.dropdown-item) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        touch-action: manipulation;
    }
    
    /* Override for inline text links that don't need full button treatment */
    p a, 
    .card-text a,
    .alert a {
        min-height: auto;
        display: inline;
        padding: 4px 2px;
    }
    
    /* Hide problematic empty links that cause 0x0px touch targets */
    a[href=""]:empty,
    a:not([href]):empty,
    a[href="#"]:empty {
        display: none !important;
    }
    
    /* Ensure collapsed navbar elements don't interfere with touch target calculations */
    .navbar-collapse:not(.show) .nav-link,
    .navbar-collapse:not(.show) .dropdown-item {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Ensure feature card buttons are properly sized */
    .feature-card .btn {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 12px 24px !important;
    }
    
    /* Hero section button */
    .hero-section .btn {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 12px 24px !important;
    }
}