/**
 * Menu Hover Fix CSS
 * Overrides default CSS hover when JavaScript is controlling the menu
 */

/* When JavaScript is controlling hover, disable CSS hover effect */
@media screen and (min-width: 993px) {
    .header .menu > ul > li.menu-item-has-children.js-hover-controlled:hover .menu-subs {
        /* Remove the CSS hover effect - JavaScript will handle it */
        opacity: 0;
        visibility: hidden;
    }
    
    /* Active state controlled by JavaScript */
    .header .menu > ul > li.menu-item-has-children.menu-active > a {
        color: var(--color-orange-700);
    }
    
    /* Ensure smooth transitions */
    .header .menu > ul > li.js-hover-controlled .menu-subs {
        transition: opacity 0.3s ease, visibility 0.3s ease, margin-top 0.3s ease;
    }
}

/* Add a subtle shadow to make submenu boundaries clearer */
.header .menu > ul > li .menu-subs {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Optional: Add a small invisible border to expand hover area */
.header .menu > ul > li.menu-item-has-children::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 999;
}

/* Ensure submenu has proper z-index */
.header .menu > ul > li .menu-subs {
    z-index: 1000;
}