/* Main Menu Component Styles */
/* This CSS is specifically for the main-menu component only */

/* Dropdown Menu Styles */
#mainMenu .dropdown {
    position: relative;
}

#mainMenu .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

#mainMenu .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    min-width: 200px;
    max-height: 300px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
}

#mainMenu .dropdown-menu li {
    margin: 0;
    padding: 0;
}

#mainMenu .dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 14px;
}

#mainMenu .dropdown-menu a:hover {
    background: none;
    color: #932018;
}

/* Main menu active and hover states */
#mainMenu nav ul li a.active {
    color: #ffffff !important;
    background-color: #007bff;
}

#mainMenu nav ul li a:hover {
    background-color: #007bff;
    color: #ffffff !important;
}

/* Arrow indicator for dropdown */
#mainMenu .dropdown > a::after {
    content: ' ▼';
    font-size: 10px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

#mainMenu .dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* Hidden Scrollbar for Dropdown */
#mainMenu .dropdown-menu::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

#mainMenu .dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

#mainMenu .dropdown-menu::-webkit-scrollbar-thumb {
    background: transparent;
}

/* Firefox scrollbar - hidden */
#mainMenu .dropdown-menu {
    scrollbar-width: none;
}

/* Mobile Styles */
@media (max-width: 991px) {
    #mainMenu {
        position: relative;
        background: #fff;
        border-bottom: 1px solid #e9ecef;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #mainMenu .container {
        padding: 0;
        display: block !important;
        visibility: visible !important;
    }
    
    #mainMenu nav {
        display: block !important;
        visibility: visible !important;
        width: 100%;
    }
    
    #mainMenu nav ul {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #mainMenu nav ul li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #mainMenu nav ul li:last-child {
        border-bottom: none;
    }
    
    #mainMenu nav ul li a {
        display: block !important;
        padding: 15px 20px;
        color: #333 !important;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        border: none;
        transition: all 0.3s ease;
        position: relative;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    #mainMenu nav ul li a:hover {
        background-color: #007bff;
        color: #ffffff !important;
    }
    
    #mainMenu .dropdown > a {
        position: relative;
        cursor: pointer;
    }
    
    #mainMenu .dropdown > a::after {
        content: ' ▼';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #666;
        transition: transform 0.3s ease;
    }
    
    #mainMenu .dropdown.active > a::after {
        transform: translateY(-50%) rotate(180deg);
    }
    
    #mainMenu .dropdown-menu {
        position: static;
        display: none;
        transform: none;
        left: auto;
        min-width: auto;
        width: 100%;
        max-height: 0;
        background: #f8f9fa;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        opacity: 1;
        visibility: visible;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        border-top: 1px solid #e9ecef;
    }
    
    #mainMenu .dropdown.active .dropdown-menu {
        display: block !important;
        max-height: 500px;
        padding: 8px 0;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible;
    }
    
    #mainMenu .dropdown-menu li {
        border-bottom: none;
    }
    
    /* Mobile submenu styling */
    #mainMenu .dropdown-menu li a {
        padding: 12px 40px;
        font-size: 14px;
        color: #666 !important;
        font-weight: 400;
        background: transparent !important;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-decoration: none;
        width: 100%;
        box-sizing: border-box;
    }
    
    #mainMenu .dropdown-menu li a:hover {
        background: none !important;
        color: #932018 !important;
        border-left-color: #932018;
    }
    
    /* Mobile touch improvements */
    #mainMenu .dropdown > a {
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    #mainMenu .dropdown-menu li a {
        -webkit-tap-highlight-color: rgba(0, 123, 255, 0.1);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Smooth scrolling for mobile */
    #mainMenu {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better visual feedback for mobile */
    #mainMenu .dropdown.active > a {
        background-color: #007bff;
        color: #ffffff !important;
    }
    
    /* Ensure proper spacing on very small screens */
    @media (max-width: 480px) {
        #mainMenu nav ul li a {
            padding: 12px 15px;
            font-size: 15px;
        }
        
        #mainMenu .dropdown-menu li a {
            padding: 10px 30px;
            font-size: 13px;
        }
        
        #mainMenu .dropdown > a::after {
            right: 15px;
            font-size: 11px;
        }
    }
    
    /* Force visibility for all mobile devices */
    @media (max-width: 991px) {
        #mainMenu * {
            visibility: visible !important;
        }
        
        #mainMenu nav ul li a {
            text-indent: 0 !important;
            font-size: 16px !important;
            line-height: 1.4 !important;
            white-space: normal !important;
            word-wrap: break-word !important;
        }
        
        /* Ensure minimum height for mobile menu */
        #mainMenu {
            min-height: 50px;
        }
        
        #mainMenu nav ul li {
            min-height: 50px;
        }
        
        /* Fix submenu display issues */
        #mainMenu .dropdown-menu {
            position: static !important;
            display: none !important;
            transform: none !important;
            left: auto !important;
            top: auto !important;
            min-width: auto !important;
            width: 100% !important;
            max-height: 0 !important;
            background: #f8f9fa !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            opacity: 1 !important;
            visibility: visible !important;
            overflow: hidden !important;
            transition: max-height 0.3s ease, padding 0.3s ease !important;
            border-top: 1px solid #e9ecef !important;
            z-index: 1 !important;
        }
        
        #mainMenu .dropdown.active .dropdown-menu {
            display: block !important;
            max-height: 500px !important;
            padding: 8px 0 !important;
            visibility: visible !important;
            opacity: 1 !important;
            overflow: visible !important;
        }
        
        #mainMenu .dropdown-menu li {
            border-bottom: none !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Ensure service menu items are visible in mobile */
        #mainMenu .dropdown-menu li a {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            padding: 12px 40px !important;
            font-size: 14px !important;
            color: #666 !important;
            font-weight: 400 !important;
            text-decoration: none !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
    }
}

/* Hide mobile-only items on desktop */
@media (min-width: 992px) {
    #mainMenu .mobile-only {
        display: none !important;
    }
}

/* Show mobile-only items on mobile */
@media (max-width: 991px) {
    #mainMenu .mobile-only {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Desktop: force 3 items per row */
@media (min-width: 992px) {
    #mainMenu .dropdown-menu {
        min-width: 600px;
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 8px 12px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 16px;
        row-gap: 0;
    }
    #mainMenu .dropdown:hover .dropdown-menu {
        display: grid;
        transform: translateX(-50%) translateY(0);
    }
    #mainMenu .dropdown-menu li a {
        white-space: nowrap;
        padding: 8px 12px;
    }
}