/**
 * Mobile Menu Final Fix CSS
 * Last Updated: 2024-12-28 16:30:00
 * Author: GaryH
 * Related Scripts: menumaker.js, tpl_drop_menu_fallback.php
 * 
 * This CSS file provides a comprehensive fix for mobile menu issues
 * by overriding conflicting styles and ensuring proper mobile functionality
 */

/* CRITICAL: Override all conflicting mobile menu CSS with maximum specificity */
@media screen and (max-width: 1199px) {
    
    /* STEP 1: Ensure the menu container is visible and properly positioned */
    html body div.nav-maincontainer div.container div.nav-container div#cssmenu,
    html body div#cssmenu,
    body div#cssmenu,
    div#cssmenu,
    #cssmenu {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        left: auto !important;
        width: 100% !important;
        background: transparent !important;
    }
    
    /* STEP 2: Force show the menu button with highest priority */
    html body div#cssmenu #menu-button,
    body div#cssmenu #menu-button,
    div#cssmenu #menu-button,
    #cssmenu #menu-button {
        display: block !important;
        visibility: visible !important;
        background: #15a0cb !important;
        color: white !important;
        padding: 15px 20px !important;
        cursor: pointer !important;
        font-weight: bold !important;
        text-align: center !important;
        border-radius: 6px !important;
        margin: 10px !important;
        transition: all 0.3s ease !important;
        font-size: 16px !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        border: none !important;
        width: calc(100% - 20px) !important;
        box-sizing: border-box !important;
    }
    
    /* Menu button hover state */
    #cssmenu #menu-button:hover {
        background: #505050 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    }
    
    /* Menu button active state */
    #cssmenu #menu-button.menu-opened {
        background: #505050 !important;
    }
    
    /* Add hamburger icon to menu button */
    #cssmenu #menu-button:before {
        content: "☰ " !important;
        margin-right: 8px !important;
        font-size: 18px !important;
    }
    
    #cssmenu #menu-button.menu-opened:before {
        content: "✕ " !important;
        margin-right: 8px !important;
        font-size: 18px !important;
    }
    
    /* STEP 3: Hide menu by default but allow it to be shown when opened */
    html body div.nav-maincontainer div.container div.nav-container div#cssmenu ul#nav,
    html body div.nav-maincontainer div.container div.nav-container div#cssmenu > ul,
    html body div#cssmenu ul#nav,
    html body div#cssmenu > ul,
    body div#cssmenu ul#nav,
    body div#cssmenu > ul,
    div#cssmenu ul#nav,
    div#cssmenu > ul,
    #cssmenu ul#nav,
    #cssmenu > ul,
    #cssmenu ul {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        transition: all 0.3s ease !important;
    }
    
    /* STEP 4: Show menu when opened - MAXIMUM SPECIFICITY */
    html body div#cssmenu.small-screen ul#nav.open,
    body div#cssmenu.small-screen ul#nav.open,
    div#cssmenu.small-screen ul#nav.open,
    #cssmenu.small-screen ul#nav.open,
    #cssmenu.small-screen > ul.open,
    html body div#cssmenu ul#nav.open,
    body div#cssmenu ul#nav.open,
    div#cssmenu ul#nav.open,
    #cssmenu ul#nav.open,
    #cssmenu > ul.open,
    #cssmenu ul.open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        left: auto !important;
        background: #f8f9fa !important;
        width: calc(100% - 20px) !important;
        margin: 0 10px 10px 10px !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        z-index: 1000 !important;
    }
    
    /* STEP 5: Style menu items properly */
    #cssmenu.small-screen ul li,
    #cssmenu ul.open li {
        width: 100% !important;
        float: none !important;
        border-bottom: 1px solid #e9ecef !important;
        display: block !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #cssmenu.small-screen ul li:last-child,
    #cssmenu ul.open li:last-child {
        border-bottom: none !important;
    }
    
    #cssmenu.small-screen ul li a,
    #cssmenu ul.open li a {
        width: 100% !important;
        padding: 15px 20px !important;
        border: none !important;
        color: #333333 !important;
        background: #FFFFFF !important;
        display: block !important;
        text-decoration: none !important;
        text-transform: none !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }
    
    #cssmenu.small-screen ul li a:hover,
    #cssmenu ul.open li a:hover {
        background: #e9ecef !important;
        color: #15a0cb !important;
        transform: translateX(5px) !important;
    }
    
    /* STEP 6: Handle submenu styling */
    #cssmenu.small-screen ul ul,
    #cssmenu ul.open ul {
        position: static !important;
        background: #f1f3f4 !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: none !important;
    }
    
    #cssmenu.small-screen ul ul.open,
    #cssmenu ul.open ul.open {
        display: block !important;
    }
    
    #cssmenu.small-screen ul ul li a,
    #cssmenu ul.open ul li a {
        padding-left: 35px !important;
        background: #f8f9fa !important;
        font-size: 15px !important;
    }
    
    #cssmenu.small-screen ul ul ul li a,
    #cssmenu ul.open ul ul li a {
        padding-left: 50px !important;
        background: #f1f3f4 !important;
        font-size: 14px !important;
    }
    
    /* STEP 7: Submenu toggle buttons */
    #cssmenu.small-screen .submenu-button {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 30px !important;
        height: 30px !important;
        background: #15a0cb !important;
        color: white !important;
        border: none !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        font-weight: bold !important;
        transition: all 0.2s ease !important;
    }
    
    #cssmenu.small-screen .submenu-button:before {
        content: "+" !important;
    }
    
    #cssmenu.small-screen .submenu-button.submenu-opened:before {
        content: "−" !important;
    }
    
    #cssmenu.small-screen .submenu-button:hover {
        background: #505050 !important;
        transform: translateY(-50%) scale(1.1) !important;
    }
    
    /* STEP 8: Ensure small-screen class is properly applied */
    #cssmenu.small-screen {
        width: 100% !important;
        float: left !important;
        clear: both !important;
    }
    
    /* STEP 9: Override any conflicting asrm-custom-nav styles */
    #cssmenu.asrm-custom-nav #menu-button {
        display: block !important;
    }
    
    #cssmenu.asrm-custom-nav > ul {
        display: none !important;
    }
    
    #cssmenu.asrm-custom-nav.open > ul,
    #cssmenu.asrm-custom-nav > ul.open {
        display: block !important;
    }
}

/* STEP 10: Desktop styles - ensure menu works properly on larger screens */
@media screen and (min-width: 1200px) {
    #cssmenu {
        display: block !important;
        visibility: visible !important;
    }
    
    #cssmenu > ul,
    #cssmenu ul#nav {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        left: auto !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    #cssmenu #menu-button {
        display: none !important;
    }
    
    #cssmenu.small-screen {
        /* Remove small-screen class effects on desktop */
    }
}

/* STEP 11: Accessibility improvements */
#cssmenu #menu-button:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

#cssmenu ul li a:focus {
    outline: 2px solid #007bff !important;
    outline-offset: -2px !important;
}

/* STEP 12: Animation for smooth menu appearance */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#cssmenu ul.open {
    animation: slideDown 0.3s ease-out !important;
}

/* STEP 13: Loading state protection */
#cssmenu.loading #menu-button {
    opacity: 0.7 !important;
    cursor: wait !important;
}

/* STEP 14: High contrast mode support */
@media (prefers-contrast: high) {
    #cssmenu #menu-button {
        border: 2px solid currentColor !important;
    }
    
    #cssmenu ul li a {
        border: 1px solid currentColor !important;
    }
}

/* STEP 15: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #cssmenu #menu-button,
    #cssmenu ul,
    #cssmenu ul li a,
    #cssmenu .submenu-button {
        transition: none !important;
        animation: none !important;
    }
}