/* Menu Optimization - Fix for dropdown positioning and border colors */

/* 1. Fix for menu width/position on 1025px - 1700px resolutions */
@media (min-width: 1025px) and (max-width: 1700px) {
    /* Reset li positioning so dropdown takes reference from the main menu container */
    .tv-menu-horizontal li.level-1 {
        position: static !important;
    }

    /* Ensure the menu wrapper is the reference */
    .tv-menu-horizontal {
        position: relative !important;
    }

    #header .tv-sub-menu.menu-dropdown.tv-sub-auto {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important; /* Stretch to right edge */
        width: 100% !important; /* Take full width of the menu bar */
        min-width: auto !important; /* CRITICAL: Override the 1600px min-width that causes overflow */
        max-width: 100vw !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Override the min-width globally for this range if the above selector isn't enough */
@media (min-width: 1025px) {
    .menu-dropdown.col-sm-12 {
        min-width: auto !important;
    }
}

/* 2. Fix for border-bottom color (Yellow #FFC700 -> Red #CF0000) */
/* Apply to all resolutions or specifically where it appears */
@media (min-width: 992px) {
    .tv-menu-horizontal .menu-dropdown {
        border-bottom-color: #CF0000 !important;
    }
}

/* Ensure it applies on smaller screens too as requested */
@media (max-width: 991px) {
    .tv-menu-horizontal .menu-dropdown,
    #tvdesktop-megamenu .tv-menu-horizontal .menu-dropdown {
        border-bottom-color: #CF0000 !important;
        border-bottom-style: solid !important;
        border-bottom-width: 4px !important;
    }
    
    .tv-menu-horizontal li.level-1 {
        border-bottom-color: #CF0000 !important;
    }
}

/* 3. Fix for menu hover text color (Yellow #FFC700 -> Red #CF0000) - All resolutions */
#header .tv-menu-horizontal ul li.level-1 ul li.item-header a:hover,
#header .tv-menu-horizontal ul li.level-1 ul li.item-line a:hover {
    color: #CF0000 !important;
}

/* 4. Fix for tvmega-menu-link hover border color (#FFC700 -> #CF0000) */
#header .tv-menu-horizontal ul li.level-1 ul li.item-line.tvmega-menu-link a:hover:before {
    border-color: #CF0000 !important;
    background-color: transparent !important;
}

/* 5. Fix for specific menu elements hover text color (span) */
#tv-menu-horizontal > ul > li > ul > li > a:hover > span,
.tv-menu-horizontal ul li ul li a:hover span,
#header .tv-menu-horizontal ul li.level-1 ul li a:hover span {
    color: #CF0000 !important;
}

/* 6. Fix for menu elements hover text/icon color when hovering the list item container */
.tv-menu-horizontal .cat-drop-menu .level-1:hover>a:after, 
.tv-menu-horizontal .cat-drop-menu .level-2:hover>a:after, 
.tv-menu-horizontal .cat-drop-menu .level-3:hover>a:after, 
.tv-menu-horizontal .cat-drop-menu .level-4:hover>a:after, 
.tv-menu-horizontal .cat-drop-menu .level-1:hover>a span, 
.tv-menu-horizontal .cat-drop-menu .level-2:hover>a span, 
.tv-menu-horizontal .cat-drop-menu .level-3:hover>a span, 
.tv-menu-horizontal .cat-drop-menu .level-4:hover>a span {
    color: #CF0000 !important;
}