/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 07 2026 | 07:16:19 */
/* --- 1. MAIN MENU WRAPPER --- */
.mobile-offcanvas-wrapper {
  position: fixed;
  top: 0;
  left: -100%; /* Hidden by default */
  width: 350px;
  max-width: 85%;
  height: 100vh;
  background-color: #ffffff;
  z-index: 9999;
  transition: left 0.3s ease-in-out; 
  /* IMPORTANT: hides overflow so submenus sit off-screen cleanly */
  overflow-x: hidden; 
  overflow-y: auto; 
}

.mobile-offcanvas-wrapper.is-open {
  left: 0;
}

/* --- 2. DARK OVERLAY --- */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- 3. SUBMENU CONTAINERS --- */
.submenu-container {
  /* Position absolute aligns it inside the .mobile-offcanvas-wrapper */
  position: absolute; 
  top: 0;
  left: 100%; /* Hidden to the RIGHT by default */
  width: 100%;
  min-height: 100%;
  background-color: #ffffff;
  z-index: 10; /* Sits above main menu items */
  transition: left 0.3s ease-in-out;
}

/* Slide the submenu in to exactly cover the wrapper */
.submenu-container.is-open {
  left: 0; 
}