/*
 Theme Name: MVP Child Theme
 Theme URI: https://mvp.axiomthemes.com/
 Description: MVP is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
 Author: AxiomThemes
 Author URI:  https://axiomthemes.com/
 Template:     mvp
 Version:      1.0
 Tags:         flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
 Text Domain:  mvp
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

@media (min-width: 992px) {
    /* Base sub-menu styles */
    .sub-menu,
    .children,
    ul.sub-menu,
    ul.children,
    .menu ul ul,
    .nav-menu .sub-menu,
    .main-navigation .sub-menu,
    .sc_layouts_menu_nav .sub-menu {
        max-height: 500px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: auto !important;
        scrollbar-width: thin !important;
    }
    
    /* Specific targeting for your theme's animated classes */
    .sub-menu.animated,
    .sc_layouts_menu_nav .sub-menu.animated,
    .sc_layouts_menu_popup .sc_layouts_menu_nav.animated,
    .sc_layouts_menu_nav>li ul:not(.sc_item_filters_tabs).animated,
    .fadeOut.sub-menu,
    .faster.fadeOut {
        max-height: 500px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Remove any max-height restrictions that might be conflicting */
    .sub-menu[style*="max-height"],
    .sc_layouts_menu_nav .sub-menu[style*="max-height"] {
        max-height: 500px !important;
    }
    
    /* Custom scrollbar styling for Webkit browsers */
    .sub-menu::-webkit-scrollbar,
    .sc_layouts_menu_nav .sub-menu::-webkit-scrollbar {
        width: 6px !important;
    }
    
    .sub-menu::-webkit-scrollbar-track,
    .sc_layouts_menu_nav .sub-menu::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 10px !important;
    }
    
    .sub-menu::-webkit-scrollbar-thumb,
    .sc_layouts_menu_nav .sub-menu::-webkit-scrollbar-thumb {
        background: #888 !important;
        border-radius: 10px !important;
    }
    
    .sub-menu::-webkit-scrollbar-thumb:hover,
    .sc_layouts_menu_nav .sub-menu::-webkit-scrollbar-thumb:hover {
        background: #555 !important;
    }
    
    /* Ensure proper box sizing */
    .sub-menu,
    .sc_layouts_menu_nav .sub-menu {
        box-sizing: border-box !important;
        padding-right: 8px !important;
    }
    
    /* Fix for any absolute/fixed positioning issues */
    .sub-menu,
    .sc_layouts_menu_nav .sub-menu {
        position: absolute !important;
        z-index: 99999 !important;
    }
    
    /* ================================================
       CONDITIONAL COLUMNS BASED ON ITEM COUNT
       Using :has() selector
    ================================================ */
    
    /* DEFAULT: Single column for all sub-menus */
    .sc_layouts_menu_nav > li > .sub-menu {
        width: 250px !important;
        min-width: 200px !important;
        columns: 1 !important;
        column-gap: 0 !important;
    }
    
    /* 2+ ITEMS: Keep single column (still less than 7) */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(2)) {
        width: 250px !important;
        columns: 1 !important;
    }
    
    /* 3+ ITEMS: Keep single column */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(3)) {
        width: 250px !important;
        columns: 1 !important;
    }
    
    /* 4+ ITEMS: Keep single column */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(4)) {
        width: 250px !important;
        columns: 1 !important;
    }
    
    /* 5+ ITEMS: Keep single column */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(5)) {
        width: 250px !important;
        columns: 1 !important;
    }
    
    /* 6+ ITEMS: Keep single column */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(6)) {
        width: 250px !important;
        columns: 1 !important;
    }
    
    /* 7+ ITEMS: Switch to 2 columns */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(7)) {
        width: 400px !important;
        columns: 2 !important;
        column-gap: 20px !important;
    }
    
    /* 10+ ITEMS: Keep 2 columns */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(10)) {
        width: 400px !important;
        columns: 2 !important;
    }
    
    /* 12+ ITEMS: Keep 2 columns */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(12)) {
        width: 400px !important;
        columns: 2 !important;
    }
    
    /* 13+ ITEMS: Switch to 3 columns */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(13)) {
        width: 600px !important;
        columns: 3 !important;
        column-gap: 20px !important;
    }
    
    /* 20+ ITEMS: Switch to 4 columns */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(20)) {
        width: 800px !important;
        columns: 4 !important;
        column-gap: 20px !important;
    }
    
    /* 30+ ITEMS: Keep 4 columns */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(30)) {
        width: 800px !important;
        columns: 4 !important;
    }
    
    /* ================================================
       SPECIAL CASE: COUNTRIES MENU (Always 4 columns)
    ================================================ */
    
    /* Target by menu item class or link text */
    .sc_layouts_menu_nav > li.menu-item-object-country > .sub-menu,
    .sc_layouts_menu_nav > li.menu-country-profile > .sub-menu,
    .sc_layouts_menu_nav > li.menu-item-123 > .sub-menu { /* Replace 123 with actual menu item ID */
        width: 800px !important;
        columns: 4 !important;
        column-gap: 20px !important;
    }
    
    /* Alternative: Target by link text content (if no specific class) */
    .sc_layouts_menu_nav > li > a[href*="country"] + .sub-menu,
    .sc_layouts_menu_nav > li > a:contains("Countries") + .sub-menu,
    .sc_layouts_menu_nav > li > a:contains("Profiles") + .sub-menu {
        width: 800px !important;
        columns: 4 !important;
        column-gap: 20px !important;
    }
    
    /* ================================================
       ENSURE PROPER ITEM BREAKING
    ================================================ */
    
    /* For multi-column sub-menus */
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(7)),
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(13)),
    .sc_layouts_menu_nav > li > .sub-menu:has(> li:nth-child(20)),
    .sc_layouts_menu_nav > li.menu-item-object-country > .sub-menu {
        /* Apply column styling */
        column-gap: 20px !important;
    }
    
    /* Ensure items don't break across columns */
    .sc_layouts_menu_nav > li > .sub-menu > li {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        margin-bottom: 8px !important;
    }
    
    /* Single column menus - no margin between items */
    .sc_layouts_menu_nav > li > .sub-menu:not(:has(> li:nth-child(7))) > li {
        margin-bottom: 0 !important;
        padding: 5px 0 !important;
    }
}

/* Mobile devices - keep default behavior */
@media (max-width: 991px) {
    .sub-menu,
    .sc_layouts_menu_nav .sub-menu {
        max-height: none !important;
        overflow-y: visible !important;
        columns: 1 !important;
        width: 100% !important;
    }
}