/* ── Mobile nav (≤980px) — two mutually exclusive strategies ──
   (1) Divi's hamburger with collapsible submenus (most of this file), or
   (2) .pa-open-mobile-menu (bottom) — skips the hamburger, renders the list stacked.

   Collapse pairs with js/mobile-menu.js (injects .mobile-toggle, flips .dt-open/.visible)
   and is scoped under .eos-menu-js so submenus stay OPEN if the JS never runs. !important
   is required — Divi ships li ul{display:block!important} to force submenus open. The
   #main-header variants cover the legacy non-Theme-Builder header (its rule carries an ID).
   The chevron uses currentColor + the ETModules font Divi already loads (no per-site tuning). */

/* Positioning context for the absolutely-placed toggle (nested items too). */
ul.et_mobile_menu li.menu-item-has-children,
ul.et_mobile_menu li.page_item_has_children {
  position: relative;
}

/* 44px minimum tap target, pinned right. The parent link keeps the rest of the
   row, so it still navigates. */
ul.et_mobile_menu li.menu-item-has-children > .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children > .mobile-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  height: 100%;
  padding: 0 !important;
  border: none;
  background-color: transparent;
}

ul.et_mobile_menu li.menu-item-has-children > .mobile-toggle::after,
ul.et_mobile_menu li.page_item_has_children > .mobile-toggle::after {
  font-family: "ETModules";
  content: "\33";
  color: currentColor;
}

ul.et_mobile_menu li.dt-open > .mobile-toggle::after {
  content: "\32";
}

/* An expanded <li> grows to wrap its submenu, and `height: 100%` would grow the
   toggle with it — covering the nested rows and swallowing their taps. */
ul.et_mobile_menu li.dt-open > .mobile-toggle {
  height: auto;
}

/* Collapsed by default. `.children` covers page-based fallback menus. */
.eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .sub-menu,
.eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .children,
.eos-menu-js ul.et_mobile_menu li.page_item_has_children > .sub-menu,
.eos-menu-js ul.et_mobile_menu li.page_item_has_children > .children,
.eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .sub-menu,
.eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .children,
.eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .sub-menu,
.eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .children {
  display: none !important;
  visibility: hidden !important;
}

/* One class heavier than the rule above, so it wins on specificity rather than
   source order. */
.eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .sub-menu.visible,
.eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .children.visible,
.eos-menu-js ul.et_mobile_menu li.page_item_has_children > .sub-menu.visible,
.eos-menu-js ul.et_mobile_menu li.page_item_has_children > .children.visible,
.eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .sub-menu.visible,
.eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .children.visible,
.eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .sub-menu.visible,
.eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .children.visible {
  display: block !important;
  visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children > a {
  background-color: transparent;
  font-weight: 600;
}

/* ── .pa-open-mobile-menu — always-open stacked list ──
   Put on any Divi Menu module (builder CSS-class field) whose links should stay
   visible ≤980px instead of collapsing to the hamburger. Used by the footer
   menu; a header nav omits it. Pairs with the footer rule in footer.css. */
@media (max-width: 980px) {
  .pa-open-mobile-menu .et_pb_menu__menu {
    display: flex !important;
    flex-direction: column !important;
  }
  .pa-open-mobile-menu .et_mobile_nav_menu {
    display: none !important;
  }
}
