.submenu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    position: relative; /* Required for pseudo-element positioning */
}

/* Create a larger invisible tap area for mobile */
.submenu-toggle::after {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: transparent; /* Invisible background */
    z-index: 1; /* Ensure it's above other elements */
}

.submenu-toggle::before {
    content: "▼"; /* Down arrow */
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.3s ease;
    display: inline-block;
    z-index: 2; /* Ensure the arrow is above the tap area */
}

.has-submenu.open .submenu-toggle::before {
    transform: rotate(180deg); /* Rotate arrow when submenu is open */
}

.submenu-toggle {
    touch-action: manipulation; /* Disables double-tap zoom */
}