/* =============================
   ADD THESE FOR SUBMENU STYLES
   ========================= */
   

/* Make each parent row a two-part layout: [link][big toggle area] */
body #mobile-nav > li.menu-item-has-children {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

body #mobile-nav > li.menu-item-has-children > a {
  display: inline-block;           /* only the text area is clickable for navigation */
  padding: 12px 14px;
  flex: 0 0 auto;                  /* width fits the text */
}

body #mobile-nav > li.menu-item-has-children > ul.sub-menu {
  width: 100%;
}

body #mobile-nav > li.menu-item-has-children > a i { display: none; }

body #mobile-nav > li.menu-item-has-children > .submenu-toggle {
  flex: 1 1 auto;                  /* fills the rest of the row */
  text-align: right;
  padding: 12px 14px;
  background: transparent!important;
  border: 0;
  cursor: pointer;
}

/* Optional: rotate the chevron when open */
body #mobile-nav > li.menu-item-has-children.open .chevron {
  transform: rotate(180deg);
  transition: transform 150ms ease;
  display: inline-block;
  margin-top: -7px;
}

/* Submenu spacing */
body #mobile-nav > li.menu-item-has-children > ul.sub-menu {
  padding: 8px 16px 12px;
}

body #mobile-navigation ul li i {
  display: block;
  padding: 10px 0px 10px 0px;
  float: right;
  margin: -7px 0 0 0;
  font-size: 14px;
}

/* Only for FULLROW_TOGGLE = true */
body #mobile-nav > li.menu-item-has-children { cursor: pointer; }
body #mobile-nav > li.menu-item-has-children > a[aria-disabled="true"] {
  pointer-events: none; /* prevent accidental text-only clicks doing anything special */
}

/* =========================
   Smooth slide animation
   (Append at the end)
   ========================= */

/* Ensure submenu is animatable (override any display:none from other scripts) */
body #mobile-nav > li.menu-item-has-children > ul.sub-menu {
  display: block !important;                     /* keep it in flow so we can animate */
  max-height: 0;                                 /* collapsed */
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.35s ease,
    padding-top 0.2s ease,
    padding-bottom 0.2s ease;
  /* collapse vertical padding while closed so height can hit 0 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  will-change: max-height, opacity, transform;
}

/* Expanded state driven by the .open class from JS */
body #mobile-nav > li.menu-item-has-children.open > ul.sub-menu {
  max-height: 800px;                              /* large enough for your longest list */
  opacity: 1;
  transform: translateY(0);
  padding: 8px 16px 12px !important;              /* restore your original padding when open */
}

/* Smooth chevron rotation baseline */
body #mobile-nav i.chevron { transition: transform 0.25s ease; }

/* Respect reduced-motion user preferences */
@media (prefers-reduced-motion: reduce) {
  body #mobile-nav > li.menu-item-has-children > ul.sub-menu { transition: none; }
  body #mobile-nav i.chevron { transition: none; }
}