/* navigation styles */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--black);
  color: var(--white);
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

a.anchor {
  display: block;
  position: relative;
  top: -60px;
  visibility: hidden;
}

.menu-icon,
.fal.menu-closer,
.fas.menu-closer,
.fas.menu-back {
  display: none;
}
#main-menu {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
	#main-menu a {
    position: relative;
    display: flex;
    align-items: center;
    font-family: var(--text);
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    letter-spacing: 1px;
	}
  #main-menu a.search-icon,
  #main-menu a.fa-times {
    position: relative;
    z-index: 9;
    font-family: var(--icons);
    font-size: 20px;
    font-weight: 300;
  }
  #main-menu a.fa-times {
    z-index: 10;
    font-size: 30px;
  }
  #main-menu .sub-menu li.mobile {
    display: block;
	}
  /* submenu parent-label heading is mobile-only; hidden by default */
  #main-menu .menu-title {
    display: none;
  }

@media screen and (min-width: 1201px) {

	#main-menu li {
	  position: relative;
    display: flex;
	}
  #main-menu .sub-menu li.mobile {
    display: none;
	}
  #main-menu > li:after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--white);
    opacity: 0;
    transition: var(--transition-normal);
	}
  #main-menu > li:hover:after {
    bottom: 8px;
    opacity: 1;
	}

  /* second Level */
	#main-menu .sub-menu {
    position: absolute;
    z-index: 15;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: inline;
    min-width: 200px;
    max-width: 300%;
    padding: 6px;
    margin: 0;
    opacity: 0;
    background: var(--black);
    border-top: none;
    white-space: nowrap;
    visibility: hidden;
    transition: all 0.15s linear;
	}
	#main-menu .sub-menu .sub-menu {
    top: -6px;
    left: 100%;
    transform: translateX(0);
    background: var(--black);
    border-left: 1px solid var(--white);
	}
		#main-menu li:hover > .sub-menu,
    #main-menu li.menu-item-has-children:focus-within > .sub-menu {
      opacity: 1 !important;
      height: auto;
      visibility: visible !important;
		}
		#main-menu .sub-menu li {
      position: relative;
      display: block;
      margin: 0;
		}
		#main-menu .sub-menu li a {
      display: block;
      font-size: 13px;
      color: var(--white);
      padding: 10px 15px;
      transition: var(--transition-fast);
		}
			#main-menu .sub-menu li:hover > a {
        background: var(--darkgrey);
        color: var(--white);
			}

    /* chevron on expandable submenu items only, aligned right */
    #main-menu .sub-menu li.menu-item-has-children > a {
      justify-content: space-between;
    }
    #main-menu .sub-menu li.menu-item-has-children > a:after {
      content: '\f105';
      font-family: var(--icons);
      font-weight: 300;
      font-size: 0.9em;
      line-height: 1;
      color: var(--white);
      margin-left: 12px;
    }
}
@media screen and (max-width: 1200px) {
  #main-menu a.search-icon,
  #main-menu a.fa-times {
    display: none;
  }
  .fal.navicon {
    font-weight: 100;
	}
	.menu-icon,
  .menu-close,
  .menu-icon:hover,
	.menu-close:hover,
  .menu-icon:focus,
	.menu-close:focus {
    align-self: center;
    display: flex;
    align-items: center;
    font-size: 46px;
    color: var(--white);
    line-height: 1;
    text-transform: uppercase;
    text-align: right;
    cursor: pointer;
    transition: var(--transition-normal);
	}
  .menu-icon *,
  .menu-close *,
  .menu-closer {
    font-weight: 100 !important;
  }
	#main-menu {
    position: fixed;
    z-index: 100;
    top: 0;
    left: -150vw;
    margin: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, #2393b7 0%,#124a5c 100%);
    transition: var(--transition-normal);
	}
		#main-menu a,
    #main-menu li:hover > a,
    #main-menu li.current-menu-item > a {
      font-family: var(--text);
      font-size: 2.2rem;
      line-height: 1.2;
      font-weight: 400;
		  color: var(--white);
      text-align: center;
      padding: 15px 0;
      opacity: 1;
		}
    #main-menu > li.menu-item-has-children > a:after,
    #main-menu .sub-menu li.menu-item-has-children > a:after {
      position: relative;
      top: 1px;
      content: '\f105';
      font-family: var(--icons);
      font-weight: 300;
      color: var(--white);
      margin-left: 20px;
    }
	#main-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    align-items: center;
	}
	#main-menu.show-menu .menu-closer {
    position: absolute;
    z-index: 999999;
    top: 40px;
    right: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 52px;
    font-weight: 100;
    color: var(--white);
	}
  .admin-bar #main-menu.show-menu .menu-closer {
    top: 76px;
	}
	#main-menu.show-menu .menu-back {
    position: absolute;
    z-index: 999999;
    top: 50px;
    left: 44px;
    right: auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 400 !important;
    color: var(--white);
	}
  /* if a submenu has a deeper open submenu, its own back button is
     covered — disable it so taps hit the topmost (deepest) back button */
  #main-menu .sub-menu:has(.sub-menu.show-menu) > .menu-back {
    pointer-events: none;
  }
	.menu-closer.fa-times {
	  z-index: 9999;
    right: 4%;
	  left: auto;
	}
	.menu-back {
	  z-index: 102;
	}
  /* parent label shown as heading inside an open submenu */
  #main-menu .sub-menu .menu-title {
    display: none;
  }
  #main-menu .sub-menu.show-menu > .menu-title {
    display: block;
    width: 100%;
    margin-top: 120px;
    margin-bottom: 30px;
    font-family: var(--text);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white);
    text-align: center;
  }
		.menu-back:before {
      font-size: 22px;
		}
    .menu-back:after {
      font-family: var(--text);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 1px;
      content: 'BACK';
      margin: 0 0 0 10px;
		}
		.menu-closer:hover {
		  color: var(--white);
		}
	#main-menu .sub-menu .sub-menu {
	  background-color: var(--black);
	}
	#header .show-menu {
	  left: 0 !important;
	}
	#header .hide-menu {
	  left: -150vw !important;
	}
  .sub-menu,
	.sub-menu .sub-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
	}
  #main-menu,
	#main-menu .sub-menu {
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 100vh;
    align-items: center;
	}
    #main-menu li:first-of-type {
      margin-top: 140px;
    }
    /* title provides the top spacing inside submenus, so reset the first link */
    #main-menu .sub-menu li:first-of-type {
      margin-top: 0;
    }
	#main-menu .sub-menu {
    position: absolute;
    z-index: 1002;
    top: 0;
    left: -100vw;
    margin: 0;
    padding: 20px;
    width: 100%;
    height: 100vh;
    list-style: inherit;
    background-color: var(--darkgrey);
    transition: var(--transition-normal);
	}
  #main-menu .sub-menu .sub-menu {
	  background-color: var(--black);
	}
  /* opened submenu fully covers the level behind it */
  #main-menu .sub-menu.show-menu {
    left: 0;
  }
}
@media screen and (max-width: 1200px) {
  #main-menu li:hover > a,
  #main-menu > li.current-menu-item > a,
  #main-menu > li.current-menu-parent > a,
  #main-menu > li.current_page_parent > a,
  #main-menu li.menu-item-has-children:hover a:after {
    color: var(--white);
  }
}
@media screen and (max-width: 768px) {
  #main-menu.show-menu .menu-closer:not(.menu-back) {
    top: 36px;
  }
}
@media screen and (max-width: 580px) {
  #main-menu.show-menu .menu-back {
    top: 50px;
    left: 44px;
    right: auto;
    padding: 0;
    border: none;
  }
  #main-menu.show-menu .menu-back:before {
    font-size: 24px;
  }
}
@media screen and (max-width: 486px) {
  #main-menu a,
  #main-menu li:hover > a,
  #main-menu li.current-menu-item > a {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 374px) {
  #main-menu.show-menu .menu-closer {
    right: 15px;
  }
}