// Primary Navigation Menu
@keyframes menu-open {
  from {
    @apply opacity-50;
    transform: translateX(-50%) scaleY(.85);
  }
  to {
    @apply opacity-100;
    transform: translateX(-50%) scaleY(1);
  }
}
@keyframes menu-open_secondary {
  from {
    @apply opacity-75;
    transform: translateX(50%) scaleX(.95);
  }
  to {
    @apply opacity-100;
    transform: translateX(50%) scaleX(1);
  }
}

.menu-item {
  padding: 0;
}
.menu-item--expanded {
  @apply relative;
  list-style: none;
  .menu {
    @apply border border-gray_nav_outter rounded absolute flex-col whitespace-no-wrap text-center text-white ml-0;
    display: none !important;
    transform: translateX(-50%);
    transform-origin: top;
    margin-top: 48px;
    left: 50%;
    background: rgb(32,32,32); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(32,32,32,1) 0%, rgba(66,66,66,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(32,32,32,1) 0%,rgba(66,66,66,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(32,32,32,1) 0%,rgba(66,66,66,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#424242',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    animation: menu-open .2s ease-out forwards;

    li {
      &:first-of-type {
        a {
          @apply;
        }
      }
      &:last-of-type {
        a {
          @apply border-b-0;
        }
      }
    }

    a {
      @apply py-4 text-sm px-8 block font-body normal-case font-normal border-b border-gray_nav;
      &:hover {
        @apply text-white;
        background-color: #4D4D4D;
        transition: all .3s ease-out;
      }
    }

    &:before {
      content: '';
      @apply w-0 h-0 absolute ml-auto mr-auto;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 25px solid #272727;
      top: -25px;
      left: 0;
      right: 0;
    }

    &:after {
      content: '';
      @apply absolute w-full bg-transparent left-0;
      top: -50px;
      height: 52px;
      left: 0;
    }
  }

  &:hover, &:focus {
    .menu {
      display: flex !important;
    }
  }

  .menu-item--expanded {
    &:after {
      @apply absolute right-0;
      content: "\f061";
      font-family: 'icomoon' !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;

      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      top: 50%;
      transform: translateY(-50%);
      right: .8rem;
      transition: all .4s ease-out;
    }
    &:hover {
      &:after {
        right: .6rem;
      }
    }
    .menu {
      display: none !important;
      width: 100%;
      right: 100%;
      top: 0;
      transform: translateX(50%);
      margin: 0;
      animation: menu-open_secondary .3s ease-out forwards;
      transform-origin: left;
      &:before {
        display: none;
      }
    }
    &:hover {
      .menu {
        display: flex !important;
      }
    }
  }

}

.header-scroll {
  @apply shadow-lg;
  .wrapper {
    @apply py-1;
  }
  .site-logo img {
    width: 9rem;
    @apply py-1;
  }
  .header-bottom {
    @apply hidden;
  }
  .menu-item--expanded .menu {
    margin-top: 25px;
  }
  .menu-item--expanded > .menu > .menu-item--expanded .menu {
    @apply mt-0;
  }
  .menu-item--expanded .menu:before {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #272727;
    top: -15px;
  }

  .menu-item--expanded .menu:after {
    top: -30px;
    height: 30px;
  }
}