/* AAFSW RQ-010: collapsible submenus in the WA mobile menu panel.
   Paste into Website > CSS. These rules only apply to menu items the
   Global JavaScript has marked (mm-collapsible), so if the script is off
   or fails, the mobile menu simply shows everything as it does today.
   WA markup: li > div.item > (a + ul.secondLevel) */

.WaGadgetMobilePanel li.mm-collapsible {
  position: relative;
}

/* Hide subpages until the parent is opened */
.WaGadgetMobilePanel li.mm-collapsible > ul,
.WaGadgetMobilePanel li.mm-collapsible > .item > ul {
  display: none !important;
}
.WaGadgetMobilePanel li.mm-collapsible.mm-open > ul,
.WaGadgetMobilePanel li.mm-collapsible.mm-open > .item > ul {
  display: block !important;
}

/* Leave room on the right of each parent's own link for the toggle */
.WaGadgetMobilePanel li.mm-collapsible > .item > a,
.WaGadgetMobilePanel li.mm-collapsible > a {
  padding-right: 48px;
}

/* The toggle button (a chevron) */
.WaGadgetMobilePanel .mm-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 30px;             /* = one Tinted Tiles mobile menu row */
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: inherit;           /* swap in a hex color to match the menu text */
  cursor: pointer;
  z-index: 2;
}
.WaGadgetMobilePanel .mm-toggle::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: -4px auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);          /* points down = closed */
  transition: transform 0.2s ease;
}
.WaGadgetMobilePanel li.mm-open > .mm-toggle::before {
  margin-top: 4px;
  transform: rotate(-135deg);        /* points up = open */
}
.WaGadgetMobilePanel .mm-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}