/* Fix for Sectors Menu Scroll Issue and Responsive Design */

/* Sectors Menu - Two Column Layout for Better Responsiveness */
.main-menu .navigation > li.dropdown > ul {
    width: 600px !important; /* Increased width to accommodate two columns and prevent horizontal scroll */
    max-height: 400px !important; /* Limit height to prevent overflow */
    overflow-y: auto !important; /* Enable scrolling if needed */
    overflow-x: hidden !important; /* Prevent horizontal scroll */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two equal columns */
    gap: 0 !important; /* No gap between columns */
    column-gap: 0 !important;
}

/* Two Column Layout for Sectors Menu Items */
.main-menu .navigation > li.dropdown > ul > li {
    width: 100% !important; /* Full width within grid cell */
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important; /* Consistent height for alignment */
}

/* Ensure proper spacing in two-column layout */
.main-menu .navigation > li.dropdown > ul > li:nth-child(odd) {
    padding-right: 15px !important;
}

.main-menu .navigation > li.dropdown > ul > li:nth-child(even) {
    padding-left: 15px !important;
}

/* Fix for menu items that might be cut off */
.main-menu .navigation > li.dropdown > ul > li > a {
    white-space: nowrap !important;
    overflow: visible !important; /* Allow text to be fully visible */
    text-overflow: clip !important; /* Don't use ellipsis */
    max-width: 100% !important;
    min-width: 0 !important; /* Allow flex shrinking if needed */
}

/* Mobile Responsive - Single Column on Small Screens */
@media (max-width: 768px) {
    .main-menu .navigation > li.dropdown > ul {
        width: 280px !important; /* Back to single column on mobile */
        max-height: 300px !important;
        display: block !important; /* Single column on mobile */
        grid-template-columns: none !important;
    }
    
    .main-menu .navigation > li.dropdown > ul > li {
        width: 100% !important; /* Full width on mobile */
        padding: 0px 30px !important; /* Reset padding */
        min-height: 35px !important; /* Slightly smaller on mobile */
    }
    
    .main-menu .navigation > li.dropdown > ul > li:nth-child(odd),
    .main-menu .navigation > li.dropdown > ul > li:nth-child(even) {
        padding: 0px 30px !important; /* Reset padding */
    }
}

/* Tablet Responsive - Adjust for medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-menu .navigation > li.dropdown > ul {
        width: 500px !important; /* Increased for tablets to prevent horizontal scroll */
    }
}

/* Ensure parent menu item has relative positioning */
.main-menu .navigation > li.dropdown {
    position: relative !important; /* Ensure dropdown is positioned relative to this */
}

/* Fix for menu positioning to prevent scroll issues */
.main-menu .navigation > li.dropdown > ul {
    position: absolute !important; /* Use absolute positioning for proper alignment */
    top: 100% !important; /* Position directly below the menu item */
    left: 0 !important; /* Align with the left edge of the menu item */
    right: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    z-index: 9999 !important; /* Ensure it stays on top */
    opacity: 0 !important; /* Hidden by default */
    visibility: hidden !important; /* Hidden by default */
    transition: all 0.3s ease !important; /* Smooth transition */
}

/* Ensure menu stays aligned with its parent item */
.main-menu .navigation > li.dropdown:hover > ul {
    position: absolute !important; /* Keep absolute positioning on hover */
    top: 100% !important; /* Stay below the menu item */
    left: 0 !important; /* Stay aligned with menu item */
    right: auto !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for menu items that might extend beyond viewport */
.main-menu .navigation > li.dropdown > ul {
    max-width: 90vw !important; /* Never exceed viewport width */
}

/* Smooth scrolling for menu content */
.main-menu .navigation > li.dropdown > ul {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
}

/* Custom scrollbar for menu */
.main-menu .navigation > li.dropdown > ul::-webkit-scrollbar {
    width: 6px;
}

.main-menu .navigation > li.dropdown > ul::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.main-menu .navigation > li.dropdown > ul::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.main-menu .navigation > li.dropdown > ul::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Ensure menu doesn't interfere with page scroll */
.main-menu .navigation > li.dropdown > ul {
    z-index: 9999 !important; /* High z-index to stay on top */
    pointer-events: auto !important; /* Ensure menu is clickable */
    will-change: opacity, visibility !important; /* Optimize for opacity/visibility changes only */
}

/* Prevent menu from moving during hover */
.main-menu .navigation > li.dropdown > ul,
.main-menu .navigation > li.dropdown:hover > ul {
    transform: translateX(0) translateY(0) !important; /* No transform movement */
    left: 0 !important; /* Always stay aligned with parent */
    right: auto !important;
}

/* Fix for menu animation and transitions */
.main-menu .navigation > li.dropdown > ul {
    transition: opacity 300ms ease, visibility 300ms ease !important; /* Only animate opacity and visibility */
    -webkit-transition: opacity 300ms ease, visibility 300ms ease !important;
    -moz-transition: opacity 300ms ease, visibility 300ms ease !important;
    -ms-transition: opacity 300ms ease, visibility 300ms ease !important;
    -o-transition: opacity 300ms ease, visibility 300ms ease !important;
}

/* Ensure menu items are properly aligned */
.main-menu .navigation > li.dropdown > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 15px !important; /* Consistent padding */
    line-height: 1.4 !important; /* Consistent line height */
    height: 100% !important; /* Full height of container */
    box-sizing: border-box !important;
}

/* Fix for icons in menu items */
.main-menu .navigation > li.dropdown > ul > li > a i {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Hover effects for better UX */
.main-menu .navigation > li.dropdown > ul > li > a:hover {
    background-color: #f8f9fa !important;
    color: #667eea !important;
    transform: translateX(5px) !important;
    transition: all 200ms ease !important;
}

/* Ensure menu closes properly when scrolling */
.main-menu .navigation > li.dropdown > ul {
    will-change: transform, opacity !important; /* Optimize for animations */
}

/* Fix for menu positioning on different screen sizes */
@media (min-width: 1200px) {
    .main-menu .navigation > li.dropdown > ul {
        width: 650px !important; /* Wider on large screens to prevent horizontal scroll */
    }
}

/* Ensure menu doesn't break on very small screens */
@media (max-width: 480px) {
    .main-menu .navigation > li.dropdown > ul {
        width: 250px !important;
        max-height: 250px !important;
    }
    
    .main-menu .navigation > li.dropdown > ul > li > a {
        font-size: 14px !important;
        padding: 10px 0px !important;
    }
}