nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;

  transform: translateY(-100%);
  transition: opacity 0.3s, transform 0.3s;
}

.nav--is-visble {
  transform: translateY(0%);
}
.nav--is-top {
  transform: translateY(0%);
}

.admin-bar nav {
  top: var(--admin-bar-height);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
}

.logo {
  text-decoration: none;
  font-size: var(--font-size-med);
}

.open-nav-toggle,
.close-nav-toggle {
  cursor: pointer;
}

.nav-menu {
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  color: var(--color-white);
  font-size: var(--font-size-reg);
  padding-right: calc(50vw - var(--max-width) / 2);

  transform: translateX(100%);
  transition: transform 0.5s;
}

.nav-menu.nav-menu__is-visible {
  transform: translateX(0);
}

.nav-menu-inner {
  padding: calc(var(--grid-gap) * 2);
  padding-top: calc(var(--grid-gap) * 4);
  max-width: calc(var(--one-col-max-width) * 4 + var(--grid-gap) * 3);
}

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu ul li {
  margin: 0;
}
.nav-menu ul li:before {
  content: none;
  display: none;
}

.nav-menu ul ul {
  padding-left: 2em;
}

.nav-menu ul a {
  display: block;
  text-decoration: none;
  padding: 0.5em 0;
}
.nav-menu ul a:hover {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  color: var(--color-orange);
}

a.is-not-clickable:hover,
.nav-menu ul li.not-clickable > a:hover {
  text-decoration: none;
  color: inherit;
}

.nav-toggle {
  --nav-toggle-width: 24px;
  --nav-toggle-height: calc(var(--nav-toggle-width) * 0.8);

  position: absolute;
  left: calc(
    -1 * var(--nav-toggle-width) - (50vw - var(--max-width) / 2) - var(
        --one-col-max-width
      ) / 2 + var(--nav-toggle-width) / 2
  );
  top: calc(var(--grid-gap) + var(--nav-toggle-height) / 2);
  color: var(--color-black);

  width: var(--nav-toggle-width);
  height: var(--nav-toggle-height);

  cursor: pointer;

  transition: left 0.5s;
}
.nav-toggle::before {
  position: absolute;
  content: "";
  min-width: auto;
  min-height: auto;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav-menu.nav-menu__is-visible .nav-toggle {
  left: calc(var(--grid-gap) * 2);
}

.nav-toggle-line {
  position: absolute;
  left: 0px;
  width: var(--nav-toggle-width);
  height: 2px;
  background: var(--color-black);
  transition: all 0.5s, background 0s;
}
.nav-toggle-line__top {
  top: 0px;
  transform-origin: top left;
}
.nav-toggle-line__mid {
  top: calc(var(--nav-toggle-height) / 2);
  transform-origin: center center;
}
.nav-toggle-line__bot {
  top: var(--nav-toggle-height);
  transform-origin: bottom left;
}

.nav-menu.nav-menu__is-visible .nav-toggle-line {
  background: var(--color-white);
}
.nav-menu.nav-menu__is-visible .nav-toggle-line__top {
  transform: rotate(45deg) scaleX(1.2);
}
.nav-menu.nav-menu__is-visible .nav-toggle-line__mid {
  transform: scaleX(0);
}
.nav-menu.nav-menu__is-visible .nav-toggle-line__bot {
  transform: rotate(-45deg) scaleX(1.2);
}

.nav__is-white .nav-toggle-line {
  background: var(--color-white);
}
.nav__is-white .logo {
  color: var(--color-white);
}

.nav__is-hidden {
  opacity: 0;
  pointer-events: none;
}

.nav-toggle:hover .nav-toggle-line {
  background: var(--color-orange) !important;
}

/* max width adjustments */
@media (max-width: 1672px) {
  .nav-menu {
    padding-right: 0;
  }
  .nav-toggle {
    left: calc(
      var(--grid-gap) * -1 - var(--nav-toggle-width) - var(--one-col-calc-width) /
        2 + var(--nav-toggle-width) / 2
    );
  }
}

/* mobile adjustments */
@media (max-width: 720px) {
  .nav-menu {
    left: 0;
  }

  .nav-menu.nav-menu__is-visible .nav-toggle {
    left: var(--grid-gap);
  }

  .nav-menu-inner {
    padding: var(--grid-gap);
    padding-top: calc(var(--grid-gap) * 4);
    width: 100%;
    max-width: initial;
  }
}