/* Divi Accordion Mobile Menu — accordion-menu.css
   All colour/timing values come from --dam-* custom properties
   injected by PHP (Settings page → wp_head inline style).
   Do NOT hardcode colours here — edit via Settings → Accordion Menu.
*/

@media (max-width: 980px) { /* overridden at runtime by JS breakpoint */

  /* ── 1. Collapse all sub-menus by default ───────────────────────── */
  .et_mobile_menu .menu-item-has-children > ul,
  .et_mobile_menu ul ul {
    display:    block !important;
    max-height: 0;
    overflow:   hidden;
    opacity:    0;
    visibility: hidden;
    transition: max-height var(--dam-transition, 350ms) cubic-bezier(.4,0,.2,1),
                opacity    calc(var(--dam-transition, 350ms) * .7) ease,
                visibility 0s linear calc(var(--dam-transition, 350ms) * .7);
  }

  /* ── 2. Open state — JS adds .dam-open to parent <li> ─────────── */
  .et_mobile_menu .menu-item-has-children.dam-open > ul {
    max-height: 600px;
    opacity:    1;
    visibility: visible;
    transition: max-height var(--dam-transition, 350ms) cubic-bezier(.4,0,.2,1),
                opacity    calc(var(--dam-transition, 350ms) * .7) ease,
                visibility 0s linear 0s;
  }

  /* ── 2b. DIVI CONFLICT FIX ──────────────────────────────────────
     Divi's own JS adds .et_pb_slide_open to the <li> AND directly
     sets display:block on the <ul> via jQuery .slideToggle().
     We neutralize both so our max-height animation is the only one
     controlling visibility. We also re-apply our open state via
     Divi's class in case our .dam-open hasn't synced yet.
  ─────────────────────────────────────────────────────────────── */

  /* Override Divi's jQuery inline style that sets display:block */
  .et_mobile_menu .menu-item-has-children > ul,
  .et_mobile_menu ul ul {
    display: block !important;  /* always block — we use max-height not display */
  }

  /* If Divi's class fires, mirror the open state identically */
  .et_mobile_menu .menu-item-has-children.et_pb_slide_open > ul {
    max-height: 600px !important;
    opacity:    1 !important;
    visibility: visible !important;
  }

  /* Prevent Divi's slideToggle height from leaking through */
  .et_mobile_menu .menu-item-has-children > ul[style] {
    height: auto !important;  /* neutralise inline height set by jQuery */
  }

  /* ── 3. Parent link row (label + chevron) ───────────────────────── */
  .et_mobile_menu .menu-item-has-children > a {
    display:         flex !important;
    align-items:     center;
    justify-content: space-between;
    padding-right:   16px !important;
  }

  .et_mobile_menu .menu-item-has-children > a::after {
    display: none !important; /* remove Divi's own arrow if present */
  }

  /* ── 4. Chevron SVG (injected by JS) ────────────────────────────── */
  .dam-chevron {
    width:            18px;
    height:           18px;
    flex-shrink:      0;
    opacity:          0.5;
    pointer-events:   none;
    transition:       transform var(--dam-transition, 350ms) cubic-bezier(.4,0,.2,1),
                      opacity   200ms ease;
  }

  .menu-item-has-children.dam-open > a .dam-chevron {
    transform: rotate(180deg);
    opacity:   1;
  }

  /* ── 5. Active parent text colour ───────────────────────────────── */
  .menu-item-has-children.dam-open > a {
    color: var(--dam-accent, #5a7a3a) !important;
  }

  /* ── 6. Sub-menu item indent & dot bullet ───────────────────────── */
  .et_mobile_menu ul ul li > a {
    padding-left: var(--dam-indent, 36px) !important;
    font-size:    14px !important;
    color:        #555 !important;
    position:     relative;
  }

  .et_mobile_menu ul ul li > a::before {
    content:          '';
    position:         absolute;
    left:             calc(var(--dam-indent, 36px) - 14px);
    top:              50%;
    transform:        translateY(-50%);
    width:            5px;
    height:           5px;
    border-radius:    50%;
    background:       #bbb;
    opacity:          var(--dam-dot-opacity, 1);
    transition:       background 0.15s;
  }

  .et_mobile_menu ul ul li > a:hover::before {
    background: var(--dam-accent, #5a7a3a);
  }

  /* ── 7. Sub-menu background ─────────────────────────────────────── */
  .et_mobile_menu ul ul {
    background: rgba(0,0,0,0.025) !important;
  }

  .et_mobile_menu ul ul li {
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  }

  .et_mobile_menu ul ul li:last-child {
    border-bottom: none !important;
  }

  /* ── 8. Top-level items ─────────────────────────────────────────── */
  .et_mobile_menu > li {
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }

  .et_mobile_menu > li > a {
    padding:     14px 20px !important;
    font-size:   15px !important;
    font-weight: 500 !important;
  }

  /* ── 9. Hamburger → ✕ animation ────────────────────────────────── */
  .et_toggle_slide_menu span,
  #et_mobile_nav_menu .mobile_nav span {
    transition:       transform 0.3s cubic-bezier(.4,0,.2,1),
                      opacity   0.2s ease !important;
    transform-origin: center !important;
  }

  body.dam-menu-open .et_toggle_slide_menu span:nth-child(1),
  body.dam-menu-open #et_mobile_nav_menu .mobile_nav span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body.dam-menu-open .et_toggle_slide_menu span:nth-child(2),
  body.dam-menu-open #et_mobile_nav_menu .mobile_nav span:nth-child(2) {
    opacity:   0 !important;
    transform: scaleX(0) !important;
  }

  body.dam-menu-open .et_toggle_slide_menu span:nth-child(3),
  body.dam-menu-open #et_mobile_nav_menu .mobile_nav span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}