/* Make placeholder items non-clickable but still interactive for submenus */
.menu-item-placeholder > a {
    cursor: pointer !important;
    /* Remove default link styling */
    text-decoration: none !important;
}

/* Prevent navigation when clicking placeholder links */
.menu-item-placeholder > a[href="#"] {
    pointer-events: none;
}

/* Alternative approach - prevent default click behavior */
.menu-item-placeholder > a {
    pointer-events: none;
}

/* But allow hover for desktop submenus */
@media (min-width: 768px) {
    .menu-item-placeholder:hover > .sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    .menu-item-placeholder > a {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Style to indicate it's clickable for mobile */
    .menu-item-placeholder > a::after {
        content: '▾';
        margin-left: 5px;
        opacity: 0.7;
    }

    .menu-item-placeholder.menu-open > .sub-menu {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* I don't think we need this, just use the default styling... */
/* Ensure submenus are properly styled */
/*.menu-item-placeholder .sub-menu {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 100%;*/
/*    z-index: 9999;*/
/*    background: #fff;*/
/*    box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
/*    min-width: 200px;*/
/*}*/

/*.menu-item-placeholder .sub-menu li {*/
/*    display: block;*/
/*    width: 100%;*/
/*}*/

/*.menu-item-placeholder .sub-menu a {*/
/*    pointer-events: auto !important;*/
/*    cursor: pointer !important;*/
/*    display: block;*/
/*    padding: 10px 15px;*/
/*    text-decoration: none;*/
/*}*/

/*.menu-item-placeholder .sub-menu a:hover {*/
/*    background: #f5f5f5;*/
/*}*/