/* Mobile Dropdown Menu Fix for NickyM Website */

@media screen and (max-width: 768px) {
    
    /* Ensure proper menu structure */
    #mainmenu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    #mainmenu li {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
        position: relative !important;
    }
    
    /* Main menu links */
    #mainmenu li > a {
        display: block !important;
        width: 100% !important;
        padding: 15px 20px !important;
        background: transparent !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-align: center !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Dropdown container */
    #mainmenu li .topsubs {
        display: none !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(0,0,0,0.4) !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
        z-index: 20 !important;
    }
    
    /* Show dropdown when open */
    #mainmenu li.mobile-dropdown-open .topsubs {
        display: block !important;
    }
    
    /* Dropdown content */
    #mainmenu li .topsubs div {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Dropdown links */
    #mainmenu li .topsubs div a {
        display: block !important;
        width: 100% !important;
        padding: 12px 15px !important;
        margin: 2px 0 !important;
        background: rgba(255,255,255,0.1) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 13px !important;
        border-radius: 3px !important;
        border-left: 3px solid #A6CE3A !important;
        min-height: 44px !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
    }
    
    /* Dropdown link hover/active states */
    #mainmenu li .topsubs div a:hover {
        background: rgba(255,255,255,0.2) !important;
        color: #A6CE3A !important;
        transform: translateX(5px) !important;
    }
    
    #mainmenu li .topsubs div a:active {
        background: rgba(166,206,58,0.3) !important;
        color: #ffffff !important;
    }
    
    /* Visual indicators */
    #mainmenu li.has-dropdown > a::after {
        content: ' ▼' !important;
        font-size: 10px !important;
        color: #A6CE3A !important;
        margin-left: 8px !important;
    }
    
    #mainmenu li.mobile-dropdown-open > a::after {
        content: ' ▲' !important;
        color: #A6CE3A !important;
    }
    
    /* Active main menu item */
    #mainmenu li.mobile-dropdown-open > a {
        background: rgba(0,0,0,0.2) !important;
        color: #A6CE3A !important;
    }
    
    /* Ensure proper spacing between menu items */
    #mainmenu li:not(:last-child) {
        margin-bottom: 0 !important;
    }
    
    /* Prevent text selection on menu items */
    #mainmenu li > a,
    #mainmenu li .topsubs div a {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Touch feedback */
    #mainmenu li > a:active {
        background: rgba(255,255,255,0.1) !important;
        transform: scale(0.98) !important;
    }
    
    #mainmenu li .topsubs div a:active {
        transform: scale(0.98) !important;
    }
    
    /* Smooth animations */
    #mainmenu li .topsubs {
        transition: all 0.3s ease !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }
    
    #mainmenu li.mobile-dropdown-open .topsubs {
        max-height: 500px !important;
        overflow: visible !important;
    }
    
    /* Ensure dropdown doesn't overlap other elements */
    #mainmenu li.mobile-dropdown-open {
        z-index: 100 !important;
        position: relative !important;
    }
    
    /* Fix for menu container */
    #mainmenubg {
        overflow: visible !important;
        z-index: 50 !important;
    }
}