/* Mobile drawer + accordion submenus (loaded last) */

/* Lock page scroll while drawer is open — never paint a dark backdrop */
body.mobile-nav-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Kill any leftover/cached dark overlay on body */
body.mobile-nav-open::before,
body.mobile-nav-open::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Theme overlays must stay off while the drawer is open */
body.mobile-nav-open .body__overlay,
body.mobile-nav-open .offcanvas-overlay,
body.mobile-nav-open .offcanvas-overlay-white,
body.mobile-nav-open .modal-backdrop {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media only screen and (max-width: 991px) {
  /* Keep the open drawer above page chrome */
  .mobile-sider-drawer-menu.active {
    z-index: 10050 !important;
  }

  /* While menu is open, neutralize dark header / sticky bar */
  body.mobile-nav-open .site-header.header-style-4,
  .mobile-sider-drawer-menu.active.site-header.header-style-4 {
    background: transparent !important;
  }

  body.mobile-nav-open .sticky-header,
  body.mobile-nav-open .sticky-header.active,
  .mobile-sider-drawer-menu.active .sticky-header,
  .mobile-sider-drawer-menu.active .sticky-header.active {
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
    z-index: auto !important;
    width: auto !important;
  }

  body.mobile-nav-open .sticky-header .main-bar,
  body.mobile-nav-open .header-style-4 .main-bar,
  .mobile-sider-drawer-menu.active .sticky-header .main-bar,
  .mobile-sider-drawer-menu.active .header-style-4 .main-bar,
  .mobile-sider-drawer-menu.active .main-bar {
    background: transparent !important;
  }

  .header-style-4 .main-bar .container > .header-nav,
  .mobile-sider-drawer-menu .header-nav {
    position: fixed !important;
    top: 0 !important;
    left: -110% !important;
    width: min(300px, 88vw) !important;
    max-width: 300px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10050 !important;
    background: #ffffff !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transition: left 0.35s ease !important;
    clear: none !important;
    border: 0 !important;
    display: block !important;
    float: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Same-element classes on <header> */
  .header-style-4.mobile-sider-drawer-menu.active .main-bar .container > .header-nav,
  .mobile-sider-drawer-menu.active > .sticky-header .header-nav,
  .mobile-sider-drawer-menu.active .sticky-wrapper .header-nav,
  .mobile-sider-drawer-menu.active .header-nav {
    left: 0 !important;
  }

  .mobile-sider-drawer-menu .header-nav .nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 72px 0 48px !important;
    background: #ffffff !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  .mobile-sider-drawer-menu .header-nav .nav > li {
    float: none !important;
    width: 100% !important;
    position: relative !important;
    display: block !important;
    margin: 0 !important;
  }

  .mobile-sider-drawer-menu .header-nav .nav > li > a {
    display: block !important;
    padding: 14px 48px 14px 18px !important;
    border-top: 1px solid #eef1ec !important;
    color: #3a4f5a !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: transparent !important;
    line-height: 1.3 !important;
  }

  .mobile-sider-drawer-menu .header-nav .nav > li > .sub-menu,
  .mobile-sider-drawer-menu .header-nav .nav > li > .mega-menu,
  .mobile-sider-drawer-menu .header-nav .nav > li ul.sub-menu,
  .mobile-sider-drawer-menu .header-nav .nav > li .sub-menu li > .sub-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #f4f8ea !important;
    z-index: auto !important;
    transform: none !important;
    animation: none !important;
  }

  .mobile-sider-drawer-menu .header-nav .nav > li:hover > .sub-menu,
  .mobile-sider-drawer-menu .header-nav .nav > li:hover > .mega-menu,
  .mobile-sider-drawer-menu .header-nav .nav > li .sub-menu li:hover > .sub-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    animation: none !important;
  }

  .mobile-sider-drawer-menu .header-nav .nav > li .sub-menu > li,
  .mobile-sider-drawer-menu .header-nav .nav > li .mega-menu > li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #e4ebdd !important;
  }

  .mobile-sider-drawer-menu .header-nav .nav > li .sub-menu > li > a,
  .mobile-sider-drawer-menu .header-nav .nav li .sub-menu > li a {
    display: block !important;
    padding: 12px 18px 12px 28px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #3a4f5a !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
  }

  .mobile-sider-drawer-menu .header-nav .nav > li .sub-menu > li > a:hover {
    color: #577804 !important;
    background: #eef5d9 !important;
  }

  .mobile-sider-drawer-menu .has-child .submenu-toogle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #577804 !important;
    background: transparent !important;
    z-index: 2 !important;
    font-size: 18px !important;
  }

  .mobile-sider-drawer-menu .has-child.nav-active > a + .submenu-toogle.fa.fa-angle-right::before {
    content: "\f107" !important;
  }

  .header-style-4 .navbar-toggler {
    z-index: 10060 !important;
    position: relative !important;
  }

  .mobile-sider-drawer-menu.active .navbar-toggler,
  body.mobile-nav-open .navbar-toggler {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    background: #3a4f5a;
    border-radius: 6px;
    padding: 10px 8px !important;
    z-index: 10060 !important;
  }
}

@media only screen and (max-width: 767px) {
  .header-style-4 .main-bar .container > .header-nav {
    grid-area: 1 / 1 / 2 / 2;
    justify-self: start;
    align-self: start;
  }
}