/**
 * CSS support for dropdown click behavior
 * Ensures dropdowns respond properly to JavaScript controls
 */

/* Default hidden state for dropdowns */
.sp-dropdown {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* Show on hover */
.sp-megamenu-parent > li:hover > .sp-dropdown,
.sp-megamenu-parent > li.sp-dropdown-open > .sp-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure dropdowns can be hidden by JavaScript */
.sp-dropdown[style*="display: none"] {
    display: none !important;
}

/* Remove sticky hover states on touch devices */
@media (hover: none) and (pointer: coarse) {
    .sp-megamenu-parent > li:hover > .sp-dropdown {
        display: none !important;
    }
    
    .sp-megamenu-parent > li.sp-dropdown-open > .sp-dropdown {
        display: block !important;
    }
}

/* Ensure links are clickable */
.sp-dropdown a {
    cursor: pointer !important;
    user-select: none !important;
}

/* Visual feedback on click */
.sp-dropdown a:active {
    background-color: #e0e0e0 !important;
}

/* Prevent dropdown from reopening immediately after click */
.sp-megamenu-parent > li.dropdown-closing > .sp-dropdown {
    display: none !important;
}

/* Fix for iOS devices */
@supports (-webkit-touch-callout: none) {
    .sp-dropdown a {
        -webkit-tap-highlight-color: transparent;
    }
}