/* ==========================================================================
   Off-canvas drawer — self-contained.
   Flatsome opens #main-menu through magnificPopup, which depends on a jQuery
   plugin and a lazily fetched webpack chunk. When any of that fails the tap
   does nothing, so this drawer is driven entirely by our own CSS + JS.
   ========================================================================== */

body.av-drawer-open { overflow: hidden; }

#main-menu.mobile-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 86vw;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  z-index: 999999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform .25s ease;
  display: block !important;      /* beats magnificPopup's .mfp-hide */
  visibility: hidden;
  box-shadow: none;
}

body.av-drawer-open #main-menu.mobile-sidebar {
  transform: translateX(0);
  visibility: visible;
  box-shadow: 0 0 40px rgba(0,0,0,.28);
}

.av-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
body.av-drawer-open .av-drawer-backdrop { opacity: 1; pointer-events: auto; }

/* close button (the reference relies on magnificPopup's chrome for this) */
.av-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  width: 100%;
  height: 52px;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
  background: #fff;
  font-size: 30px;
  line-height: 1;
  color: #1a3857;
  cursor: pointer;
  z-index: 2;
}
.av-drawer-close:active { background: #f2f2f2; }

#main-menu .sidebar-menu { padding: 0 0 30px; }
#main-menu .nav-sidebar > li > a { display: block; padding: 14px 18px; }
#main-menu .nav-sidebar .sub-menu a { display: block; padding: 11px 18px 11px 30px; }

/* tap-friendly caret for parents, without hijacking the link */
#main-menu li.menu-item-has-children > a { padding-right: 48px; position: relative; }
#main-menu .av-submenu-toggle {
  position: absolute;
  top: 0; right: 0;
  width: 48px; height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0;
}
#main-menu .av-submenu-toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #1a3857;
  transform: translate(-50%,-70%) rotate(45deg);
  transition: transform .2s ease;
}
#main-menu li.av-submenu-open > .av-submenu-toggle::after { transform: translate(-50%,-30%) rotate(-135deg); }
#main-menu li.menu-item-has-children > ul.sub-menu {
  display: none;
  background: #f7f9fb;
}
#main-menu li.av-submenu-open > ul.sub-menu { display: block; }

/* Flatsome injects its own <button class="toggle"> inside the drawer once its
   JS runs (homepage). Two stacked carets fight for the same tap target, and
   theirs stops working on pages where Flatsome's init aborts — so hide theirs
   and keep ours, which behaves identically everywhere. */
#main-menu .toggle,
#main-menu button.toggle { display: none !important; }
#main-menu .av-submenu-toggle { z-index: 3; }

/* Flatsome renders nested menus as a position:fixed, opacity:0 flyout (that is
   its desktop hover-dropdown styling). Inside an off-canvas drawer it must be
   a normal in-flow block, or the links never become visible. */
#main-menu .sub-menu,
#main-menu .nav-sidebar-ul,
#main-menu ul ul {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-height: none !important;
  display: none;
  background: #f7f9fb;
  border: 0;
  margin: 0;
  padding: 4px 0;
}
#main-menu li.av-submenu-open > .sub-menu,
#main-menu li.av-submenu-open > .nav-sidebar-ul { display: block !important; }