/* SentinelCore Safari menu + preloader targeted fix
   Add AFTER the main style.css. Does not change desktop browsers. */

/* WebKit/Safari scoped only */
@supports (-webkit-touch-callout: none) {
  html, body {
    overflow-x: hidden !important;
  }

  /* If the loader JS fails, do not let the loader sit over the page or block clicks. */
  body.loaded,
  body.dom-loaded,
  body.page-loaded,
  body.de-loaded {
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  #de-loader,
  .de-loader,
  #loader,
  .loader,
  #loader-area,
  .loader-area,
  #preloader,
  .preloader,
  .de-preloader,
  .page-loader,
  .loading-overlay,
  .page-overlay {
    pointer-events: none !important;
  }

  body.loaded #de-loader,
  body.loaded .de-loader,
  body.loaded #loader,
  body.loaded .loader,
  body.loaded #loader-area,
  body.loaded .loader-area,
  body.loaded #preloader,
  body.loaded .preloader,
  body.loaded .de-preloader,
  body.loaded .page-loader,
  body.loaded .loading-overlay,
  body.loaded .page-overlay,
  body.safari-loader-done #de-loader,
  body.safari-loader-done .de-loader,
  body.safari-loader-done #loader,
  body.safari-loader-done .loader,
  body.safari-loader-done #loader-area,
  body.safari-loader-done .loader-area,
  body.safari-loader-done #preloader,
  body.safari-loader-done .preloader,
  body.safari-loader-done .de-preloader,
  body.safari-loader-done .page-loader,
  body.safari-loader-done .loading-overlay,
  body.safari-loader-done .page-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    z-index: -1 !important;
  }

  @media only screen and (max-width: 992px) {
    header,
    header.header-mobile {
      display: block !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      min-height: 74px !important;
      height: auto !important;
      overflow: visible !important;
      z-index: 2147483000 !important;
      background: var(--bg-dark-1, #1B1663) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      transform: translateZ(0);
    }

    header .container,
    header .header-row,
    header .header-col,
    header .header-col.left,
    header .header-col.mid,
    header .header-col.right {
      overflow: visible !important;
    }

    nav {
      height: auto !important;
      overflow: visible !important;
    }

    #menu-btn {
      display: block !important;
      position: relative !important;
      z-index: 2147483002 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: rgba(255,255,255,.18);
      touch-action: manipulation;
    }

    #mainmenu {
      pointer-events: auto !important;
      z-index: 2147483001 !important;
      -webkit-overflow-scrolling: touch;
    }

    /* Closed state: keep menu out of the way, but do not hide the header/menu button. */
    body:not(.sc-menu-open) header.header-mobile #mainmenu,
    body:not(.sc-menu-open) #mainmenu {
      display: none;
    }

    /* Open state controlled by the JS below. */
    body.sc-menu-open header.header-mobile,
    body.sc-menu-open header {
      min-height: 100vh !important;
      overflow-y: auto !important;
    }

    body.sc-menu-open header.header-mobile #mainmenu,
    body.sc-menu-open #mainmenu,
    header.header-mobile.sc-menu-open #mainmenu,
    header.header-mobile #mainmenu.sc-menu-open,
    #mainmenu.sc-menu-open {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: relative !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      width: 100% !important;
      height: auto !important;
      max-height: calc(100vh - 82px) !important;
      margin: 16px 0 0 0 !important;
      padding: 12px 20px 80px 20px !important;
      overflow-y: auto !important;
      background: var(--bg-dark-1, #1B1663) !important;
      color: #fff !important;
      border: 0 !important;
    }

    body.sc-menu-open #mainmenu li,
    body.sc-menu-open header.header-mobile #mainmenu li {
      display: block !important;
      float: none !important;
      width: 100% !important;
      clear: both !important;
    }

    body.sc-menu-open #mainmenu a,
    body.sc-menu-open #mainmenu a.menu-item,
    body.sc-menu-open header.header-mobile #mainmenu a,
    body.sc-menu-open header.header-mobile #mainmenu a.menu-item {
      display: block !important;
      width: 100% !important;
      padding: 13px 0 !important;
      color: #fff !important;
      text-align: left !important;
      pointer-events: auto !important;
    }
  }
}