/****************************************************************
 *
 *  Name: Navigation Slide-in Styles
 *  Author: Samantha Pasch
 *  Author URI: http://www.samanthapasch.com/
 *  Description: Slide-in navigation CSS styles.
 *  Notes: Add "slide-nav-css" to the body classes.
 *
****************************************************************/

/*===============================================================
 *
 *	2) SIDEBAR
 *
===============================================================*/

/* A) Sidebar Overlay
=================================*/

body.slide-nav-css .menu-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0);
  z-index: 750;
  -webkit-transition-property: background-color, visibility;
  -moz-transition-property: background-color, visibility;
  -o-transition-property: background-color, visibility;
  transition-property: background-color, visibility;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-delay: 520ms;
  -moz-transition-delay: 520ms;
  -o-transition-delay: 520ms;
  transition-delay: 520ms;
}

body.slide-nav-css #main-navigation[data-status-sidebar="active"] .menu-sidebar-overlay,
body.slide-nav-css .menu-sidebar-overlay.modal-active {
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition-property: background-color, visibility;
  -moz-transition-property: background-color, visibility;
  -o-transition-property: background-color, visibility;
  transition-property: background-color, visibility;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}


/* B) Sidebar Container
=================================*/

body.slide-nav-css .menu-sidebar .sidebar-container {
  width: 100%;
  height: 100%;
  background-color: var(--mobile-bg-colour);
  touch-action: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body.slide-nav-css .menu-sidebar .sidebar-drawer {
  position: fixed;
  min-height: calc(var(--vh, 1vh) * 100)!important;
  max-height: none;
  top: 0;
  left: 0;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
  background-color: var(--mobile-bg-colour);
  visibility: hidden;
  z-index: 1000;
  -webkit-box-shadow: 0.125rem 0rem 0.375rem 0.25rem rgb(0 0 0 / 0%);
  -moz-box-shadow: 0.125rem 0rem 0.375rem 0.25rem rgb(0 0 0 / 0%);
  box-shadow: 0.125rem 0rem 0.375rem 0.25rem rgb(0 0 0 / 0%);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition-property: box-shadow, transform, visibility;
  -moz-transition-property: box-shadow, transform, visibility;
  -o-transition-property: box-shadow, transform, visibility;
  transition-property: box-shadow, transform, visibility;
  -webkit-transition-duration: 500ms;
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

body.slide-nav-css .menu-sidebar .sidebar-drawer[aria-hidden="false"] {
  visibility: visible!important;
  -webkit-box-shadow: 0.125rem 0rem 0.375rem 0.25rem rgb(0 0 0 / 15%)!important;
  -moz-box-shadow: 0.125rem 0rem 0.375rem 0.25rem rgb(0 0 0 / 15%)!important;
  box-shadow: 0.125rem 0rem 0.375rem 0.25rem rgb(0 0 0 / 15%)!important;
  -webkit-transform: translateX(0)!important;
  -moz-transform: translateX(0)!important;
  -ms-transform: translateX(0)!important;
  -o-transform: translateX(0)!important;
  transform: translateX(0)!important;
}

/* Desktop */
@media (min-width: 1021px) {

  body.slide-nav-css .menu-sidebar .sidebar-drawer {
    width: calc(100vw - 2rem);
    max-width: 21.875rem; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

  body.slide-nav-css .menu-sidebar .sidebar-drawer {
    width: calc(100vw - 2rem);
    max-width: 21.875rem; }

}

/* Mobile */
@media (max-width: 767px) {

  body.slide-nav-css .menu-sidebar .sidebar-drawer {
    width: calc(100vw - 2rem);
    max-width: 21.875rem; }
  
}


/* C) Sidebar Header
=================================*/

body.slide-nav-css .menu-sidebar header {
  position: relative;
  width: 100%;
  min-height: 2.5rem;
  margin: 0!important;
  padding-top: 0rem;
  padding-bottom: 2.5rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

body.slide-nav-css .menu-sidebar .header-container {
  position: relative;
  width: 100%;
  padding: 0px 2.5rem;
  margin-top: var(--topbar-height);
  margin-bottom: 0rem;
}

body.slide-nav-css .menu-sidebar .exit-container {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

body.slide-nav-css .menu-sidebar .sidebar-exit-set {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

body.slide-nav-css .menu-sidebar .sidebar-exit {
  font-size: 0.75rem;
  text-transform: lowercase;
  letter-spacing: 0em;
  color: #000000;
}

body.slide-nav-css .menu-sidebar .modal-opt-out .x-button {
  position: relative;
  left: auto;
}

body.slide-nav-css .menu-sidebar .x-button {
  position: absolute;
  height: 1.25rem;
  width: 1.25rem;
  cursor: pointer;
  z-index: 250;
}

body.slide-nav-css .menu-sidebar .x-button-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: transform 800ms cubic-bezier(.3,0,.2,1) 0ms;
  -moz-transition: transform 800ms cubic-bezier(.3,0,.2,1) 0ms;
  -o-transition: transform 800ms cubic-bezier(.3,0,.2,1) 0ms;
  transition: transform 800ms cubic-bezier(.3,0,.2,1) 0ms;
}

body.slide-nav-css .menu-sidebar .x-button-inner::before,
body.slide-nav-css .menu-sidebar .x-button-inner::after {
  width: 0.05rem;
}

body.slide-nav-css .menu-sidebar .x-button-inner::before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

body.slide-nav-css .menu-sidebar .x-button-inner::after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

body.slide-nav-css .menu-sidebar .x-button-inner::before,
body.slide-nav-css .menu-sidebar .x-button-inner::after {
  content: " ";
  position: absolute;
  width: 0.063rem;
  height: calc(100%);
  left: calc(50% - 0.063rem);
  top: 0;
}

body.slide-nav-css .menu-sidebar .x-button:hover .x-button-inner {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

body.slide-nav-css .menu-sidebar .x-button-inner::before,
body.slide-nav-css .menu-sidebar .x-button-inner::after {
  background-color: var(--mobile-menu-colour);
}


/* D) Sidebar Drawer Content
=================================*/

body.slide-nav-css .menu-sidebar .drawer-content {
  display: flex;
  flex-direction: column;
  position: relative;
  height: calc(100% - 5.375rem);
}

/* Adjust when there's admin bar */
/* Desktop */
@media (min-width: 783px) {

    html body.admin-bar.slide-nav-css .menu-sidebar .drawer-content {
        height: calc(100% - 5.375rem); }
        
}

/* Tablet */
@media (min-width: 768px) and (max-width: 782px) {

    html body.admin-bar.slide-nav-css .menu-sidebar .drawer-content {
        height: calc(100% - 5.375rem); }

}

/* Mobile */
@media (max-width: 767px) {

    html body.admin-bar.slide-nav-css .menu-sidebar .drawer-content {
        height: calc(100% - 5.375rem); }

}

body.slide-nav-css .menu-sidebar [data-scrollable] {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body.slide-nav-css .menu-sidebar .drawer-container {
  flex: 1 1 auto;
  padding: 0px 2.5rem;
  margin: 0px;
  overflow-x: hidden;
  background-color: var(--mobile-bg-colour);
}

body.slide-nav-css .menu-sidebar .drawer-menu {
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
}


/* E) Sidebar Footer 
=================================*/

body.slide-nav-css .drawer-footer {
  flex: none;
  box-shadow: none;
  padding: 0px 2.5rem;
  background-color: var(--mobile-bg-colour);
}

body.slide-nav-css .menu-sidebar .drawer-footer {
  width: 100%;
  min-height: 6.25rem;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}



/*===============================================================
 *
 *  3) MENU ITEMS
 *
===============================================================*/

/* A) 1st Level Items
=================================*/

body.slide-nav-css .menu-sidebar [id*="menu-"] a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: auto;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

body.slide-nav-css .menu-sidebar [id*="menu-"] li {
  display: block;
  position: relative;
  list-style: none;
}

body.slide-nav-css .menu-sidebar [id*="menu-"] li ul.sub-menu-1 {
  display: none;
  position: relative;
  padding-inline-start: 0px;
  -webkit-transition-property: padding;
  -moz-transition-property: padding;
  -o-transition-property: padding;
  transition-property: padding;
  -webkit-transition-duration: 0ms;
  -moz-transition-duration: 0ms;
  -o-transition-duration: 0ms;
  transition-duration: 0ms;
}

body.slide-nav-css .menu-sidebar [id*="menu-"] li.is-active ul.sub-menu-1 {
  display: block;
}

body.slide-nav-css .menu-sidebar [id*="menu-"] li:not(ul.sub-menu li) {
  padding: 0em;
}

body.slide-nav-css .menu-sidebar [id*="menu-"] li:not(ul.sub-menu li)::after {
  content: " ";
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

body.slide-nav-css .menu-sidebar [id*="menu-"] li:not(ul.sub-menu li):last-child::after {
  content: " ";
  position: absolute;
  width: 100%;
  top: 0;
  left:  0;
  bottom: 0;
  right:  0;
  z-index: -1;
}

body.slide-nav-css .menu-sidebar [id*="menu-"] li a:not(ul.sub-menu li a) {
  display: block;
  position: relative;
  margin: 0.125rem 0;
  padding: 0.375rem 0;
  color: var(--mobile-menu-colour);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* B) 2nd Level Items
=================================*/

body.slide-nav-css .menu-sidebar [id*="menu-accordion-menu"] li ul.sub-menu-1 > li ul.sub-menu {
  position: relative;
  margin-left: 1.25rem;
  padding-top: 0.188rem;
}

body.slide-nav-css .menu-sidebar [id*="menu-"] li > ul.sub-menu-1 li {
  display: block;
  position: relative;
  width: auto;
  padding: 0.25em 0em;
  line-height: 1.4em;
  cursor: default!important;
}

body.slide-nav-css .menu-sidebar [id*="menu-"] li > ul.sub-menu-1 li:has(ul) {
  padding-bottom: 0;
}


/* C) Submenu Item Count
=================================*/

html body.menu-item-count-inactive.slide-nav-css .menu-sidebar [id*="menu-accordion-menu"] li > a.leading-zero::after {
  content: "";
  display: none;
  opacity: 0;
  visibility: hidden;
}

body.slide-nav-css .menu-sidebar [id*="menu-accordion-menu"] li > a.leading-zero::after {
  content: var(--item-count);
  display: inline-block;
  position: relative;
  float: right;
  width: auto;
  font-family: var(--mobile-font);
  font-style: var(--mobile-style);
  font-weight: var(--mobile-weight);
  font-size: calc( var(--mobile-size) - 0.313rem);
  text-transform: var(--mobile-transform);
  letter-spacing: 0;
  color: var(--mobile-menu-colour);
}