/**
 * Spiegelloft — mobile drill-down for Max Mega Menu + Elementor megapanels
 * Paste: Elementor → Custom Code → CSS
 *
 * Open:  child panel slides in left → right
 * Back:  panel slides out to the left, then root menu returns
 */

:root {
  --dd-accent: #0d7377;
  --dd-speed: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  --dd-logo-height: 36px;
  --dd-line: #e6e6e6;
}

@media (max-width: 1024px) {
  #mega-menu-menu-1 {
    position: relative;
  }

  /* Logo as first <li> — root + child panels */
  #mega-menu-menu-1 > li.dd-logo-item {
    display: block !important;
    list-style: none;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dd-line);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 6;
    pointer-events: none;
  }

  #mega-menu-menu-1 > li.dd-logo-item img {
    display: block;
    height: var(--dd-logo-height);
    width: auto;
    max-width: 70%;
    object-fit: contain;
  }

  #mega-menu-menu-1:has(> li.mega-toggle-on),
  #mega-menu-menu-1:has(> li.dd-leaving) {
    overflow: hidden;
  }

  /* Keep siblings hidden while open OR while sliding closed — keep logo */
  #mega-menu-menu-1:has(> li.mega-toggle-on) > li:not(.mega-toggle-on):not(.dd-leaving):not(.dd-logo-item),
  #mega-menu-menu-1:has(> li.dd-leaving) > li:not(.mega-toggle-on):not(.dd-leaving):not(.dd-logo-item) {
    display: none !important;
  }

  /* Hide parent title while panel is showing / leaving */
  #mega-menu-menu-1 > li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link,
  #mega-menu-menu-1 > li.mega-menu-item-has-children.dd-leaving > a.mega-menu-link {
    display: none !important;
  }

  /* Child panel base */
  #mega-menu-menu-1 > li.mega-menu-item-has-children.mega-toggle-on > ul.mega-sub-menu,
  #mega-menu-menu-1 > li.mega-menu-item-has-children.dd-leaving > ul.mega-sub-menu {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    opacity: 1 !important;
    overflow: visible !important;
    will-change: transform;
  }

  /* Open: slide in from left → right */
  #mega-menu-menu-1 > li.mega-menu-item-has-children.mega-toggle-on:not(.dd-leaving) > ul.mega-sub-menu {
    animation: dd-slide-in-ltr var(--dd-speed) both;
  }

  /* Back: slide out to the left */
  #mega-menu-menu-1 > li.mega-menu-item-has-children.dd-leaving > ul.mega-sub-menu {
    animation: dd-slide-out-left var(--dd-speed) both;
  }

  @keyframes dd-slide-in-ltr {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes dd-slide-out-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  /* Nested Mega Menu grid wrappers — strip desktop mega layout on mobile */
  #mega-menu-menu-1 > li.mega-toggle-on .mega-menu-row,
  #mega-menu-menu-1 > li.mega-toggle-on .mega-menu-column,
  #mega-menu-menu-1 > li.dd-leaving .mega-menu-row,
  #mega-menu-menu-1 > li.dd-leaving .mega-menu-column,
  #mega-menu-menu-1 > li.mega-toggle-on ul.mega-sub-menu ul.mega-sub-menu,
  #mega-menu-menu-1 > li.dd-leaving ul.mega-sub-menu ul.mega-sub-menu {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Elementor back row (arrow + title) — clickable */
  #mega-menu-menu-1 .elementor-hidden-desktop {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  #mega-menu-menu-1 .elementor-hidden-desktop .elementor-heading-title {
    color: var(--dd-accent) !important;
  }

  /* Optional: hide image-box descriptions on mobile list */
  #mega-menu-menu-1 .menu-image-item .elementor-image-box-description,
  #mega-menu-menu-1 .menu-image-item-column-vertical .elementor-image-box-description {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  #mega-menu-menu-1 > li.dd-logo-item {
    display: none !important;
  }
}