/* ============================================
   LOOP MOBILE MENU — CSS (v2)
   Upload as: loop-mobile-menu.css in your theme folder
   ============================================ */

:root {
  --loop-mm-bg: #2b3a4a;
  --loop-mm-bg-hover: #344455;
  --loop-mm-text: #ffffff;
  --loop-mm-text-muted: #c7d0d8;
  --loop-mm-border: rgba(255,255,255,0.08);
}

/* Hamburger button
   --loop-mm-hamburger-color controls the 3 lines' color.
   Default is white (for dark headers). If your site header
   background is LIGHT, change this variable to a dark color
   e.g. add: .loop-mm-hamburger { --loop-mm-hamburger-color: #2b3a4a; } */
.loop-mm-hamburger {
  --loop-mm-hamburger-color: #ffffff;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10001;
  position: relative;
  padding: 0;
}
.loop-mm-hamburger span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--loop-mm-hamburger-color);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.loop-mm-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.loop-mm-hamburger.is-active span:nth-child(2) { opacity: 0; }
.loop-mm-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay */
.loop-mm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999998;
}
.loop-mm-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Drawer — FULL SCREEN */
.loop-mm-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: var(--loop-mm-bg);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.loop-mm-drawer.is-open {
  transform: translateX(0);
}

/* Header */
.loop-mm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  flex: 0 0 auto;
}
.loop-mm-logo {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--loop-mm-text);
}
.loop-mm-close {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.loop-mm-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Search — only visible on the root/main panel */
.loop-mm-search {
  position: relative;
  margin: 0 24px 16px;
  flex: 0 0 auto;
  transition: opacity 0.2s ease, max-height 0.2s ease;
  overflow: hidden;
}
.loop-mm-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 40px 12px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: var(--loop-mm-text);
  font-size: 14px;
  outline: none;
}
.loop-mm-search-input::placeholder {
  color: var(--loop-mm-text-muted);
}
.loop-mm-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--loop-mm-text-muted);
  font-size: 14px;
  pointer-events: none;
}

/* Hide search when a submenu panel is open */
.loop-mm-drawer.submenu-open .loop-mm-search {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  pointer-events: none;
}

/* Panels container — holds all sliding panels as flat siblings */
.loop-mm-panels {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

/* Every panel is positioned using ONE simple formula based on its
   own depth (--depth, set once via JS when the menu builds) versus
   the currently active depth (--active-level, updated via JS on
   every navigation). At any moment only ONE panel ever sits at
   translateX(0) — every other panel is fully off-screen at a clean
   multiple of 100%. Because there is no z-index juggling and no
   class-based push/active state, there is nothing that can race or
   flicker, no matter how many levels deep you go. */
.loop-mm-panels {
  --active-level: 0;
}
.loop-mm-panel {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--loop-mm-bg);
  box-sizing: border-box;
  will-change: transform;
  transform: translateX(calc((var(--depth, 0) - var(--active-level, 0)) * 100%));
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Menu items */
.loop-mm-item {
  border-bottom: 1px solid var(--loop-mm-border);
  list-style: none;
}
.loop-mm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  color: var(--loop-mm-text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.2s ease;
}
.loop-mm-link:hover,
.loop-mm-link:active {
  background: var(--loop-mm-bg-hover);
  color: var(--loop-mm-text);
}

/* Arrows */
.loop-mm-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--loop-mm-text-muted);
  border-top: 2px solid var(--loop-mm-text-muted);
  flex-shrink: 0;
}
.loop-mm-arrow-right {
  transform: rotate(45deg);
}
.loop-mm-arrow-left {
  transform: rotate(-135deg);
  margin-right: 8px;
}

/* Back button row */
.loop-mm-back {
  border-bottom: 1px solid var(--loop-mm-border);
  list-style: none;
}
.loop-mm-back-btn {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  color: var(--loop-mm-text);
  font-size: 15px;
  font-weight: 500;
  padding: 16px 24px;
  cursor: pointer;
  box-sizing: border-box;
}

/* Lock body scroll when menu open */
body.loop-mm-no-scroll {
  overflow: hidden;
}

/* ============================================
   Responsive: show hamburger / menu only on mobile
   Adjust breakpoint (768px) to match your theme
   ============================================ */
@media (max-width: 768px) {
  .loop-mm-hamburger {
    display: flex;
  }
}
@media (min-width: 769px) {
  .loop-mm-drawer,
  .loop-mm-overlay,
  .loop-mm-hamburger {
    display: none !important;
  }
}