/* --- CSS for Desktop Screens (992px and wider) --- */
@media (min-width: 992px) {
  /* Keep your original hover effect for desktops */
  .dropdown-menu > li:hover > .dropdown-menu {
    display: block;
  }

  /* Position the 3rd level menu to the side */
  .dropdown-menu .dropdown-menu {
    left: 100%;
    /* Adjust top position to align with the parent menu item */
    top: 0;
  }

  /* Prevent text from wrapping in dropdown links */
  .navbar-nav .dropdown-menu a {
    white-space: nowrap;
  }

  /* Ensure dropdown width fits its content */
  .navbar-nav > li > .dropdown-menu {
    width: max-content !important;
  }
}

/* --- CSS for Mobile & Tablet Screens (up to 991px) --- */
@media (max-width: 991px) {
  /* This class is toggled by JS to show the submenu */
  .navbar-nav .dropdown-menu.open {
    display: block;
    position: static; 
    width: 100%;
    border: none;
    box-shadow: none;
  }

  /* Initially hide the 2nd level+ submenus on mobile */
  li > .dropdown-menu {
    display: none;
  }

  /* Use '.dropdown' to add the plus/minus indicator */
  .navbar-nav .dropdown > a::after {
    content: '▼';
    float: right;
    margin-left: 10px;
    font-weight: bold;
    
    /* --- Add these lines to hide the arrow --- */
    border: none !important;
    width: auto !important;
    height: auto !important;
    vertical-align: baseline !important;
    margin-top: 0 !important;
    /* ----------------------------------------- */
  }

  /* Change the indicator when the submenu is open */
  .navbar-nav .dropdown.open > a::after {
    content: '▲';
  }
}