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

/* ── .pa-open-mobile-menu submenus — inline accordion ≤980px ──
   Divi renders submenus in the open list as hover dropdowns (absolute, hidden
   until :hover), which touch can't open. ≤980 they render inline instead,
   collapsed behind the `.mobile-toggle` chevron js/mobile-menu.js injects.
   Collapse is scoped under `.eos-menu-js`, so with no JS they stay expanded.
   ≥981 the toggle is hidden and Divi's hover dropdown is left alone.
   `!important` on the reset: the module's own dropdown colours/border are
   generated per module with a heavier selector. Where the toggle sits beside
   its label is footer positioning, in footer.css. */
.pa-open-mobile-menu .et-menu .mobile-toggle {
  display: none;
}

@media (max-width: 980px) {
  /* Dropdown → inline: undo Divi's absolute, hidden, boxed dropdown. */
  .pa-open-mobile-menu .et-menu li > .sub-menu,
  .pa-open-mobile-menu .et-menu li > .children {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
  }
  .pa-open-mobile-menu .et-menu li li { display: block; padding: 0; }  /* Divi: inline-block */
  .pa-open-mobile-menu .et-menu li li a { width: auto; padding: 0; }

  /* The toggle replaces Divi's dropdown arrow and the room kept for it. */
  .pa-open-mobile-menu .et-menu .menu-item-has-children > a:first-child { padding-right: 0; }
  .pa-open-mobile-menu .et-menu .menu-item-has-children > a:first-child::after { display: none; }

  /* 44px tap target; same ETModules chevron as the hamburger toggle. */
  .pa-open-mobile-menu .et-menu li > .mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
  }
  /* `transform: none` — the toggle is an <a> in the top-level list, so Divi's
     logo-menu arrow rule (`.et_pb_menu--with-logo … > li > a::after`,
     top: 50% + translateY(-50%), meant for an absolute arrow) matches it and
     lifts the static glyph half a line above the label. */
  .pa-open-mobile-menu .et-menu li > .mobile-toggle::after {
    font-family: "ETModules";
    content: "\33";
    color: currentColor;
    transform: none;
  }
  .pa-open-mobile-menu .et-menu li.dt-open > .mobile-toggle::after {
    content: "\32";
  }

  /* Collapsed until the toggle adds `.visible`. */
  .eos-menu-js .pa-open-mobile-menu .et-menu li > .sub-menu:not(.visible),
  .eos-menu-js .pa-open-mobile-menu .et-menu li > .children:not(.visible) {
    display: none;
  }
}