/* Ves_Megamenu Global Fix for Brushyourideas/Base Theme */
/* Global fixes applied to all pages for consistency */

/* Fix navigation menu items - prevent text truncation (applies to all pages) */
.ves-megamenu .navigation .level0 > .nav-item > .nav-anchor,
.ves-megamenu .navigation .level0 > a,
.ves-megamenu .navigation .nav-item.level0 > .nav-anchor {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    max-width: none !important;
}

/* Ensure hover works - minimal z-index fix for navigation (all pages) */
.ves-megamenu .navigation .level0:hover,
.ves-megamenu .navigation .level0.current {
    z-index: 1001;
    position: relative;
}

/* Ensure submenu appears on hover (all pages) */
.ves-megamenu .navigation .level0:hover .submenu,
.ves-megamenu .navigation .level0.current .submenu {
    display: block !important;
    z-index: 1000;
}

/* Fix navigation overflow (all pages) */
.ves-megamenu .navigation {
    overflow: visible;
}

.ves-megamenu .navigation > ul {
    overflow: visible;
}

/* Fix for second line dropdown menu spacing issue - applies to all pages */
@media (min-width: 768px) {
    .ves-megamenu .navigation .nav-item.subhover>.submenu {
        top: 100% !important;
    }
    .ves-megamenu .navigation .level0.current>a {
        background: #333333 !important;
    }
}
    @media (max-width: 768px) {
        .nav-sections-item-content {
            float: none;
            margin-left: 0;
            margin-top: 0;
            padding-bottom: 0;
        }
        .nav-sections-item-content:last-of-type {
            margin-top: 0 !important;
            float: none;
            padding-top: 0;
        }
        .ves-megamenu>.navigation {
            float: none;
        }
        .ves-megamenu>.navigation .nav-item {
            float: none !important;
        }

        /* Fix for mobile menu opener/plus button - spacing and styling */
        .ves-megamenu .navigation .nav-item .nav-anchor {
            position: relative;
            padding-right: 50px !important;
        }

        .ves-megamenu .navigation .opener,
        .ves-megamenu .navigation .nav-anchor > .opener {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            cursor: pointer !important;
            z-index: 100 !important;
            position: absolute !important;
            right: 10px !important;
            top: 50% !important;
            transform: translateY(-50%);
            width: 30px !important;
            height: 30px !important;
            min-width: 30px !important;
            min-height: 30px !important;
            line-height: 30px !important;
            text-align: center !important;
            margin: 0 !important;
            padding: 0 !important;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            transition: transform 0.2s ease;
        }

        /* Ensure opener button is visible and clickable on mobile */
        .ves-megamenu .navigation .nav-item .nav-anchor .opener {
            display: block !important;
        }

        /* Fix icon display - show + or - using CSS */
        .ves-megamenu .navigation .opener::before,
        .ves-megamenu .navigation .nav-anchor > .opener::before {
            content: '+' !important;
            display: block;
            font-size: 20px;
            font-weight: bold;
            line-height: 30px;
            text-align: center;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        /* Change to - when active */
        .ves-megamenu .navigation .nav-item.item-active .opener::before,
        .ves-megamenu .navigation .nav-item.item-active .nav-anchor .opener::before {
            content: '−' !important;
            transform: none;
        }

        /* Alternative: If using FontAwesome icons */
        .ves-megamenu .navigation .opener.fa-plus::before {
            content: '\f067' !important; /* FontAwesome plus */
            font-family: 'FontAwesome' !important;
        }

        .ves-megamenu .navigation .opener.fa-minus::before,
        .ves-megamenu .navigation .nav-item.item-active .opener.fa-plus::before {
            content: '\f068' !important; /* FontAwesome minus */
            font-family: 'FontAwesome' !important;
        }

        /* Fix submenu toggle on mobile - smooth animation */
        .ves-megamenu .navigation .nav-item .submenu {
            display: none;
            overflow: hidden;
        }

        .ves-megamenu .navigation .nav-item.item-active .submenu,
        .ves-megamenu .navigation .nav-item.current .submenu {
            display: block !important;
        }

        /* Prevent flickering - ensure smooth transitions */
        .ves-megamenu .navigation .nav-item .submenu {
            transition: none !important;
            -webkit-transition: none !important;
            -moz-transition: none !important;
            -o-transition: none !important;
        }

        /* Ensure submenu doesn't cause layout shift */
        .ves-megamenu .navigation .nav-item {
            position: relative;
            overflow: visible;
        }
    }

    /* Simple alphabetical product list styling */
    .ves-megamenu .product-list-simple {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 400px;
        overflow-y: auto;
        column-count: 3;
        column-gap: 20px;
    }
    .ves-megamenu .product-list-simple .product-item {
        break-inside: avoid;
        margin-bottom: 8px;
        padding: 0;
    }
    .ves-megamenu .product-list-simple .product-item a {
        display: block;
        padding: 5px 0;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        line-height: 1.4;
    }
    .ves-megamenu .product-list-simple .product-item a:hover {
        color: #1979c3;
        text-decoration: underline;
    }
    @media (max-width: 768px) {
        .ves-megamenu .product-list-simple {
            column-count: 1;
        }
    }

    /* Fix for custom HTML content in megamenu - prevent jQuery UI from hiding it */
    .ves-megamenu .nav-dropdown ul.ui-menu,
    .ves-megamenu .nav-dropdown ul.ui-widget,
    .ves-megamenu .nav-dropdown ul[role="menu"],
    .ves-megamenu .item-content .nav-dropdown ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Remove jQuery UI menu styling from custom content */
    .ves-megamenu .nav-dropdown ul.ui-menu li,
    .ves-megamenu .nav-dropdown ul[role="menu"] li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ves-megamenu .nav-dropdown ul.ui-menu li a,
    .ves-megamenu .nav-dropdown ul[role="menu"] li a {
        display: block;
        padding: 5px 0;
        color: #333;
        text-decoration: none;
    }

    .ves-megamenu .nav-dropdown ul.ui-menu li a:hover,
    .ves-megamenu .nav-dropdown ul[role="menu"] li a:hover {
        color: #1979c3;
        text-decoration: underline;
    }

    /* Remove jQuery UI menu dividers that shouldn't be there */
    .ves-megamenu .nav-dropdown .ui-menu-divider {
        display: none !important;
    }

    /* Ensure custom HTML lists are displayed properly */
    .ves-megamenu .nav-dropdown > ul {
        display: block !important;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .ves-megamenu .nav-dropdown > ul > li {
        display: list-item;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Custom HTML dropdown menu items - match default megamenu dropdown style */
    .ves-megamenu .nav-dropdown > ul > li > a {
        display: block;
        padding: 8px 20px;
        color: #575757;
        text-decoration: none;
        font-size: 14px;
        line-height: 1.4;
        transition: border-color 0.2s ease;
        margin: 0;
        width: 100%;
        border-left: 3px solid transparent;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ves-megamenu .nav-dropdown > ul > li > a:hover,
    .ves-megamenu .nav-dropdown > ul > li > a:focus,
    .ves-megamenu .nav-dropdown > ul > li > a.ui-state-focus {
        border-left-color: #ff5501;
        text-decoration: none;
        background-color: transparent;
        color: #575757;
    }

    /* Ensure full width coverage */
    .ves-megamenu .nav-dropdown > ul > li {
        width: 100%;
        margin: 0;
    }

    /* Alphabetical product list with letter headings - Multi-column layout */
    .ves-megamenu .nav-dropdown > ul.alphabetically-organized {
        display: block !important;
        list-style: none;
        padding: 0;
        margin: 0;
        column-count: 4;
        column-gap: 20px;
        column-fill: auto;
        min-height: auto;
        max-height: 60dvh;
        overflow: auto;
    }

    /* Letter headings styling */
    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li.alphabet-letter-heading {
        display: block;
        break-inside: avoid;
        margin-top: 15px;
        margin-bottom: 8px;
        padding: 0 20px;
        font-weight: bold;
        font-size: 16px;
        color: #333;
        text-transform: uppercase;
        border: none !important;
        page-break-inside: avoid;
    }

    /* Remove extra spacing and ensure consistent layout across all pages */
    .ves-megamenu .nav-dropdown {
        padding: 0 !important;
        margin: 0 !important;
    }

    .ves-megamenu .item-content {
        padding: 0 !important;
    }

    .ves-megamenu .submenu .item-content .nav-dropdown {
        padding: 0;
        margin: 0;
    }

    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li.alphabet-letter-heading:first-child {
        margin-top: 0;
    }

    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li.alphabet-letter-heading strong {
        font-weight: bold;
        color: #333;
    }

    /* Ensure letter headings don't get link styling */
    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li.alphabet-letter-heading > a {
        border: none !important;
        padding: 0;
        color: #333 !important;
    }

    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li.alphabet-letter-heading > a:hover {
        border: none !important;
        background: transparent !important;
        color: #333 !important;
    }

    /* Product items in alphabetical list */
    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li:not(.alphabet-letter-heading) {
        display: block;
        break-inside: avoid;
        margin: 0;
        padding: 0;
        list-style: none;
        min-width: 0;
    }

    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li:not(.alphabet-letter-heading) > a {
        display: block;
        padding: 8px 20px;
        color: #575757;
        text-decoration: none;
        font-size: 14px;
        line-height: 1.4;
        transition: border-color 0.2s ease;
        margin: 0;
        width: 100%;
        border-left: 3px solid transparent;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li:not(.alphabet-letter-heading) > a:hover,
    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li:not(.alphabet-letter-heading) > a:focus,
    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li:not(.alphabet-letter-heading) > a.ui-state-focus {
        border-left-color: #ff5501;
        text-decoration: none;
        background-color: transparent;
        color: #575757;
    }

    /* Also apply to regular lists (non-alphabetical) for consistency */
    .ves-megamenu .nav-dropdown > ul:not(.alphabetically-organized) > li > a {
        display: block;
        padding: 8px 20px;
        color: #575757;
        text-decoration: none;
        font-size: 14px;
        line-height: 1.4;
        transition: border-color 0.2s ease;
        margin: 0;
        width: 100%;
        border-left: 3px solid transparent;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ves-megamenu .nav-dropdown > ul:not(.alphabetically-organized) > li > a:hover,
    .ves-megamenu .nav-dropdown > ul:not(.alphabetically-organized) > li > a:focus,
    .ves-megamenu .nav-dropdown > ul:not(.alphabetically-organized) > li > a.ui-state-focus {
        border-left-color: #ff5501;
        text-decoration: none;
        background-color: transparent;
        color: #575757;
    }

    /* Ensure consistent column width and prevent wrapping issues */
    .ves-megamenu .nav-dropdown > ul.alphabetically-organized > li {
        min-width: 0;
        max-width: 100%;
    }

    /* Responsive columns */
    @media (max-width: 1200px) {
        .ves-megamenu .nav-dropdown > ul.alphabetically-organized {
            column-count: 3;
        }
    }

    @media (max-width: 768px) {
        .ves-megamenu .nav-dropdown > ul.alphabetically-organized {
            column-count: 2;
        }
    }

    @media (max-width: 480px) {
        .ves-megamenu .nav-dropdown > ul.alphabetically-organized {
            column-count: 1;
        }
    }

    /* Ensure consistent spacing and layout on all page types */
    .catalog-category-view .ves-megamenu .nav-dropdown,
    .catalog-product-view .ves-megamenu .nav-dropdown,
    .cms-page-view .ves-megamenu .nav-dropdown,
    .cms-index-index .ves-megamenu .nav-dropdown {
        padding: 0 !important;
        margin: 0 !important;
    }

    .catalog-category-view .ves-megamenu .item-content,
    .catalog-product-view .ves-megamenu .item-content,
    .cms-page-view .ves-megamenu .item-content,
    .cms-index-index .ves-megamenu .item-content {
        padding: 0 !important;
    }