/* --- Submenu styling --- */
#offcanvasMenu .dropdown-submenu > .submenu {
  display: none;
  position: static;
  margin-top: 0.25rem;
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
  
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
 border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  
  transition: all 0.25s ease;
}

#offcanvasMenu .dropdown-submenu.show > .submenu {
  display: block;
}

/* --- Submenu links --- */
#offcanvasMenu .submenu .dropdown-item {
  padding-left: 0.75rem;
  color: #555;
  transition: color 0.2s ease, background-color 0.2s ease;
}

#offcanvasMenu .submenu .dropdown-item:hover {
  background-color:#e9e7e8;
  color: #000;
  border-radius: 0.25rem;
}

/* --- Toggle icon (Bootstrap icon) --- */
#offcanvasMenu .submenu-toggle {

  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.6;
}

/* Rotate chevron when submenu is open */
#offcanvasMenu .dropdown-submenu.show > a .submenu-toggle {
  transform: rotate(180deg);
  opacity: 1;
}

/* --- Remove bullets and extra spacing from submenu --- */
#offcanvasMenu .submenu {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* Optional: slide-down animation */
#offcanvasMenu .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#offcanvasMenu .dropdown-submenu.show > .submenu {
  max-height: 500px; /* adjust as needed */
}

/* === Highlight parent while submenu is hovered/focused or open === */
/* when mouse is over the li (this includes hovering inside submenu) */
#offcanvasMenu .dropdown-submenu:hover > a.dropdown-item,
#offcanvasMenu .dropdown-submenu:focus-within > a.dropdown-item,
#offcanvasMenu .dropdown-submenu.show > a.dropdown-item {
  background-color: #e9e7e8; /* subtle primary tint */
  color: #e9e7e8;
  border-radius: .25rem;
  font-weight: 500;
  
}


#offcanvasMenu.submenu {
	background-color: white;
	padding: 0.5rem  2rem 0.5rem 0rem;
	border: #000;
	border-width: 1px;
}

#offcanvasMenu .dropdown-submenu > a.dropdown-toggle::after {
  content: "";
  display: inline-block !important;
  margin-left: 0.5em;
  vertical-align: middle;
  border-top: 0.3em solid currentColor;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
  border-bottom: 0;
  transform: rotate(-90deg); /* caret points right */
  transition: transform 0.2s ease;
}

/* When submenu is open (if you toggle .show), rotate caret downward */
#offcanvasMenu .dropdown-submenu.show > a.dropdown-toggle::after {
  transform: rotate(0deg);
}