/* hide toggles on desktop */
@media (min-width: 992px) {
  .submenu-toggle { display: none; }




}

/* hide all dropdown-menus by default on mobile */
@media (max-width: 991.98px) {
  .dropdown-menu {
    display: none;
    padding-left: .5rem; /* indent if you like */
  }
  .dropdown-menu.show {
    display: block;
  }

  .dropdown-toggle::after {
    display: none;
  }

  .touch-target {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Minimum touch target size */
    width: 44px;
    height: 44px;

    /* Remove extra Bootstrap button padding */
    padding: 0;
    border: none;
    background: transparent;

    /* Give it some left-margin so it’s not jammed against text */
    margin-left: 0.5rem;
  }

  /* If you want a bit more horizontal gap between icon & text: */
  .submenu-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
}


/* Make the toggle at least 44×44 px, center the icon */