/* ── Mobile nav — behavior below 980px ──
   Two mutually exclusive strategies. Divi's hamburger with collapsible
   submenus (most of this file), or `.pa-open-mobile-menu` at the bottom, which
   skips the hamburger and renders the list stacked — a menu using that class
   uses none of the collapse rules.

   Collapse pairs with js/mobile-menu.js, which injects the `.mobile-toggle`
   anchor and flips `.dt-open` / `.visible`.

   `!important` is required: Divi ships
   `.et_pb_menu .et_mobile_menu li ul { display: block !important }`, which is
   what forces submenus open. The `#main-header` variants cover the legacy
   non-Theme-Builder header, whose Divi rule carries an ID.

   Collapse is scoped under `.eos-menu-js` (set by the script) so submenus stay
   expanded if the JS never runs, rather than hidden with no way to open them.
   The chevron uses currentColor and the ETModules font Divi already loads, so
   it needs 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;
}

/* Divi tints and bolds parent rows to signal "has children" — the chevron says
   it now, and the tint clashes with custom menu backgrounds. */
ul.et_mobile_menu li.menu-item-has-children > a {
  background-color: transparent;
  font-weight: 400;
}

/* ── .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;
  }
}