/* Touch Menu */

:root {
  --nav-bar: 60px;
}

.menu-wrap {
  display: none;
}

.hover-menu.menu-wrap {
  display: none;
}

.touch-menu {
  display: block;

  &.menu-wrap {
    width: 100%;
    position: fixed;
    top: var(--nav-mobile); /* Height of the nav bar */
    right: 0;
    height: calc(100vh - var(--nav-mobile));
    z-index: -1;
    padding: 0;

    @media (min-width: 768px) {
      top: var(--nav-tablet);
      height: calc(100vh - var(--nav-tablet));
    }
  }

  .main-menu {
    background: var(--secondary-color);
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    text-align: left;
    opacity: 0;

    li {
      /* Set baseline "li" styling -- reset */
      margin: 0;
      padding: 0;
      position: relative;
      list-style-type: none;

      &::before {
        display: none;
      }
    }

    a {
      /* Set baseline "a" styling -- reset */
      font-size: 14px;
      line-height: 1em;
      text-decoration: none;
      display: block;
      color: var(--light-color);

      &:hover,
      &:active,
      &:focus {
        background: var(--primary-accent);
        outline: none;
      }
    }

    /* Touch Menu Items */
    .menu-item {
      > a {
        padding: 16px 20px;
        border-bottom: 1px solid rgb(from var(--light-color) r g b / 0.15);
      }

      &.first {
        border-top: 1px solid rgb(from var(--light-color) r g b / 0.15);
      }
    }

    /* General Sub-Menu Styling */
    .sub-menu {
      display: none;

      a {
        font-size: 0.85em;
        padding-left: 40px;
      }

      .sub-menu {
        a {
          padding-left: 60px;
        }
      }
    }
  }

  .nav-dropdown-button {
    position: absolute;
    z-index: 25;
    width: 100%;
    height: 46px;
    right: 0;
    top: 0px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    align-items: center;
  }
}

.menu-is-open {
  .touch-menu {
    z-index: 500;

    .main-menu {
      opacity: 1;
      transition: 0.25s ease-in-out;
      height: calc(100vh - var(--nav-mobile));

      @media (min-width: 768px) {
        height: calc(100vh - var(--nav-tablet));
      }
    }
  }
}

.menu-is-closed {
  .touch-menu {
    z-index: -1;
    height: 0.1px;

    .main-menu {
      opacity: 0;
      transition-duration: 0.25s;
      height: 0.1px;
    }
  }
}

/* Menu Triggers */

.menu-trigger {
  cursor: pointer;
}

/* Hamburger Menu */

.nav-hamburger {
  width: 15px;
  height: 12px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;

  @media (min-width: 768px) {
    width: 30px;
    height: 14px;
    top: -5px;
  }

  &::after {
    @media (min-width: 768px) {
      content: 'Menu';
      font-size: 12px;
      line-height: 1em;
      color: var(--light-color);
      position: relative;
      top: 10px;
    }
  }

  span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--light-color);
    border-radius: 1.5px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;

    &:nth-child(1) {
      top: 0px;
      width: 9px;

      @media (min-width: 768px) {
        width: 15px;
      }
    }

    &:nth-child(2),
    &:nth-child(3) {
      top: 5px;

      @media (min-width: 768px) {
        top: 6px;
      }
    }

    &:nth-child(4) {
      top: 10px;

      @media (min-width: 768px) {
        top: 12px;
      }
    }
  }

  /* open */
  &.open {
    span {
      &:nth-child(1) {
        top: 9px;
        width: 0%;
        left: 50%;
      }

      &:nth-child(2) {
        transform: rotate(45deg);
      }

      &:nth-child(3) {
        transform: rotate(-45deg);
      }

      &:nth-child(4) {
        top: 9px;
        width: 0%;
        left: 50%;
      }
    }
  }
}

/* Nav Expander (Plus button) */

.nav-expander {
  width: 16px;
  height: 16px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;

  span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: white;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;

    &:nth-child(1) {
      top: 8px;
    }

    &:nth-child(2) {
      top: 8px;
      transform: rotate(90deg);
    }
  }
}

.sub-menu-open {
  > .nav-dropdown-button {
    .nav-expander {
      span {
        &:nth-child(2) {
          transform: rotate(180deg);
        }
      }
    }
  }
}

/* This site specific */

.touch-menu {
  .social-segment {
    display: none;
  }
}