/*-------------------------------------------------------*/
/* Navigation
/*-------------------------------------------------------*/
.nav {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 120;
  min-height: $nav-height;
  position: relative;

  &__wrap {
    @include bp-xl-up {
      padding-left: 44px;
    }

    padding-left: 20px;
  }

  &__container {
    position: relative;
    
    &--side-padding {
      @include bp-xl-up {
        padding: 0 70px;
      }

      @include bp-xl-down {
        padding: 0 30px;
      }

      @include bp-lg-down {
        padding: 0 20px;
      }
    }      
  }

  &__container-box {
    padding: 0 30px;
    background-color: #fff;
    border-radius: 2px;
    position: relative;
  }
  
  &__menu,
  &__dropdown-menu {
    list-style: none;
  }

  &__menu {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    @include display-inline-flex;
    align-items: center;
    flex-wrap: wrap;

    li {
      position: relative;      
    }

    & > li > a {
      font-family: $heading-font;
      font-weight: 700;
      color: $heading-color;
      font-size: 15px;
      padding: 0 17px;
      line-height: $nav-height;
      display: block;
      position: relative;

      &:hover {
        color: $main-color;
      }
    }

    & > .active > a {
      color: $main-color;
    }
  }

  /* Dropdowns (large screen) */
  @include bp-lg-up {

    &__wrap {
      display: block !important;
      height: auto !important;
    }

    &__menu > li {
      display: inline-block;
      text-align: center;
    }

    &__dropdown-menu {
      position: absolute;
      left: -5px;      
      top: 100%;
      z-index: 1000;
      min-width: 220px;
      width: 100%;
      text-align: left;
      padding: 20px 0;
      list-style: none;
      background-color: $bg-dark;
      border-radius: 0;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      display: block;
      visibility: hidden;
      opacity: 0;
      @include transition (all .2s ease-in-out);

      & > li > a {
        color: $text-color;
        padding: 5px 30px;
        font-size: 14px;
        line-height: 21px;
        display: block;

        &:hover,
        &:focus {
          color: $main-color;
        }
      }
    }

    &__dropdown-menu.hide-dropdown {
      visibility: hidden !important;
      opacity: 0 !important;
    }

    &__dropdown-menu--right {
      right: 0;
    }

    &__dropdown:hover > .nav__dropdown-menu {
      opacity: 1;
      visibility: visible;
    }

    &__dropdown-menu {
      .nav__dropdown-menu {
        left: 100%;
        top: -20px;
      }
    }

    &__dropdown &__dropdown {
      position: relative;
    }

    &__dropdown &__dropdown > a:after {
      content: '\e876';
      font-family: 'ui-icons';
      font-size: 10px;
      position: absolute;
      right: 20px;
      top: 50%;
      @include transform(translateY(-50%));
    }

    &__dropdown-trigger {
      display: none;
    }
  }
}

.mobile body {
  cursor: pointer;
}

.nav__menu > .current_page_parent > a {
  color: $main-color;
}


/* Logo
-------------------------------------------------------*/
.logo {
  line-height: 1;
}


/* Nav Flexbox
-------------------------------------------------------*/
header .flex-parent {
  align-items: center;

  @include bp-lg-down {
    display: block;
  }
}

.nav--align-right {
  margin-left: auto;
}

.nav--align-left {
  margin-right: auto;
}


/* Top Bar
-------------------------------------------------------*/
.top-bar {
  height: 60px;

  &--transparent {
    background-color: transparent;
    position: absolute;
    width: 100%;
    z-index: 120;

    .social,
    .top-bar__icon,
    .top-bar__phone-number,
    .top-bar__email {
      opacity: .7;
      color: #fff;

      &:hover,
      &:focus {
        opacity: 1;
      }
    }
  }

  &__item {
    height: 60px;
    line-height: 60px;
    display: inline-block;
    margin-right: 16px;

    &:last-child {
      margin-right: 0;
    }

    &--align-right {
      float: right;
    }
  }

  &__phone-number,
  &__email {
    font-size: 14px;    
  }
}

/* Nav Icon Toggle (mobile nav)
-------------------------------------------------------*/
.nav__icon-toggle {
  margin-left: auto;
  position: relative;
  padding: 9px 0 9px 10px;
  background-color: transparent;
  border: none;
  z-index: 50;

  @include bp-lg-up {
    display: none;
  }

  &-bar {
    background-color: $heading-color;
    width: 18px;
    display: block;
    height: 2px;
    border-radius: 1px;
    margin-bottom: 4px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &:focus .nav__icon-toggle-bar,
  &:hover .nav__icon-toggle-bar {
    background-color: $main-color;
  }

  &:focus {
    outline: none;
  }
}


/* Nav Sticky
-------------------------------------------------------*/
.nav__holder {

  &.offset {
    @include transform (translate3d(0, -100%, 0));
    @include transition ($all);
  }

  &.scrolling {
    @include transform (translate3d(0, 0px, 0));
  }

  &.sticky {
    position: fixed;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;

    &.scrolling {
      opacity: 1;
      visibility: visible;
    }

    .nav__menu > li > a {
      line-height: $nav-short-height;
    }

    .nav__container-box {
      padding: 0;
    }
  }
}


/* Nav Boxed
-------------------------------------------------------*/
@include bp-lg-up {

  .nav--boxed {
    position: absolute;
    top: 60px;
    width: 100%;
  }
}


/* Nav Side
-------------------------------------------------------*/
@include bp-lg-up {
  .nav--side {    
    z-index: 500;
    height: 100%;
    width: 240px;

    .nav__holder,
    .nav__container,
    .flex-parent {
      height: 100%;
    }

    .nav__container {
      padding: 60px 40px 40px;
    }

    .flex-parent {
      flex-direction: column;
      align-items: flex-start;
    }

    .nav__wrap {
      padding-left: 0;
      width: 100%;
      margin-top: 40px;
    }

    .nav__menu,
    .nav__menu > li {
      display: block;
    }

    .nav__menu > li {
      text-align: left;
    }

    .nav__menu > li > a {
      line-height: 1;
      padding: 17px 0;
    }

    // Dropdowns
    .nav__dropdown-menu {
      position: relative;
      display: none;
      visibility: visible;
      opacity: 1;
      padding: 0;
      left: 0;
      top: auto;
      background-color: transparent;
      @include transition( none );
    }

    .nav__dropdown-menu .nav__dropdown-menu {
      top: auto;
      padding-left: 10px;
    }

    .nav__dropdown .nav__dropdown > a:after {
      display: none;
    }

    .nav__dropdown-menu > li > a {
      padding: 8px;
    }

    .nav__dropdown .nav__dropdown .nav__dropdown-trigger {
      height: 37px;
      line-height: 37px;
    }

    .nav__dropdown-trigger {
      display: block;
      width: 36px;
      height: 49px;
      line-height: 49px;
      text-align: center;
      cursor: pointer;
      position: absolute;
      right: 0;
      font-size: 12px;
      top: 0;

      &:hover,
      &:focus {
        color: $main-color;
      }
    }

    .nav__phone--mobile  {
      margin-top: 40px;
    }
  }

  .nav--side-sticky-left {
    position: fixed;
    left: 0;
    top: 0;
  }
}

@include bp-xl-up {
  .nav--side {
    width: 300px;
  }
}

.nav__footer {
  margin-top: auto;

  .socials {
    margin-bottom: 24px;
  }
}


/* Nav 1
-------------------------------------------------------*/
@include bp-lg-up {
  .nav-1 {
    min-height: 70px;

    .flex-parent {
      height: 70px;
    }

    .nav__container {
      padding: 0 70px;
    }

    .nav__wrap {
      display: none !important;
    }
  }  
}


/* Nav Icon Toggle
-------------------------------------------------------*/
.nav-icon-toggle {
  padding: 0;
  display: inline-block;
  cursor: pointer;
  @include transition( 0.15s linear );
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  margin-left: 40px;
  overflow: visible;

  &:focus {
    outline: none;
  }

  &__box {
    width: 24px;
    height: 24px;
    position: relative;
    display: block;
  }

  &__inner {
    display: block;
    top: 50%;
    margin-top: -1px;
  }

  &__inner,
  &__inner:before,
  &__inner:after {
    width: 24px;
    height: 1px;
    background-color: $heading-color;
    position: absolute;
    @include transition( .2s all );
  }

  &:hover .nav-icon-toggle__inner,
  &:hover .nav-icon-toggle__inner:before,
  &:hover .nav-icon-toggle__inner:after {
    background-color: $main-color;
  }

  &__inner:before,
  &__inner:after {
    content: "";
    display: block;
  }

  &__inner:before {
    top: -8px;
  }

  &__inner:after {
    bottom: -8px;
  }

  @include bp-lg-down {
    position: absolute;
    @include vertical-align;
    right: 20px;
  }
}


/* Sidenav
-------------------------------------------------------*/
@include bp-lg-up {
  .sidenav {
    background-color: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 60px 40px;
    width: 320px;
    z-index: 121;
    overflow-y: auto;
    @include transition( transform .5s cubic-bezier(0.55, 0, 0.1, 1) );
    @include transform(translateX(320px));

    &--is-open {
      @include transform(translateX(0));
    }

    &__close {
      position: absolute;
      right: 40px;
      top: 24px;

      &-label {
        float: left;
        margin-right: 8px;
        @include uppercase;
        line-height: 27px;
        font-size: 12px;
      }

      &-button {
        padding: 0;
        background: transparent;
        border: 0;        
        color: $text-color;
        height: 24px;

        &:hover {
          color: $main-color;
        }

        &:focus {
          outline: none;
        }
      }

      &-icon {
        font-size: 20px;
      }
    }
  }

  .content-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    z-index: 121;
    visibility: hidden;
    opacity: 0;
    @include transition( .3s cubic-bezier(.16,.36,0,.98) );
    background-color: rgba(#000,.5);

    &--is-visible {
      opacity: 1;
      visibility: visible;
    }
  }
}


/* Nav Phone / Email / Socials
-------------------------------------------------------*/
.nav__phone {
  font-size: 14px;
  font-family: $heading-font;
  font-weight: 600;

  &-text,
  &-number {
    color: $heading-color;
  }

  & + .nav__socials {
    padding-left: 44px;
    margin-left: 44px;
    border-left: 1px solid $border-color;

    @include bp-xl-down {
      padding-left: 20px;
      margin-left: 20px;
    }

    @include bp-lg-down {
      padding-left: 0;
      margin-left: 0;
      border-left: 0;
    }
  }

  &--mobile {
    padding: 20px 0 8px;
  }
}

.nav__socials--mobile,
.nav__email--mobile {
  padding: 8px 0 20px;
}

.nav__email {
  font-family: $heading-font;
  font-weight: 14;
  font-weight: 600;
  color: $heading-color;
}


/* Nav Search
-------------------------------------------------------*/
.nav__search {

  &-link {
    position: relative;
    display: block;
    color: inherit;
    font-size: 22px;
  }

  &-form {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 23;
  }

  &-input {
    font-family: $body-font;
    padding: 0 30px;
    height: 100%;
    border: none;
    font-size: 24px;
    margin-bottom: 0;
    background-color: #fff;
  }

  &-close {
    position: absolute;
    width: 16px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    top: 50%;
    margin-top: -18px;
    right: 30px;
    font-size: 24px;
    color: $text-color;
    cursor: pointer;
  }
}

.ui-search:before {
  position: relative;
  top: 1px;
}

.ui-close:before {
  position: relative;
  top: -2px;
}

/* Mobile Search */
.nav__search-mobile {

  .search-input {
    height: 46px;
    padding: 0;
    border: none;
    border-bottom: 1px solid $border-color;
    border-radius: 0;
    background-color: transparent;
    margin-bottom: 0;
    font-family: $body-font;
    font-size: 13px;
    color: $text-color;

    &:focus {
      background-color: transparent;
    }
  }

  .search-button {
    width: 46px;
    height: 46px;
    padding-left: 26px;
    font-size: 18px;
  }
}

.search-icon {
  color: $text-color;
}


/* Go to Top
-------------------------------------------------------*/
#back-to-top {
  display: block;
  z-index: 100;
  width: 34px;
  height: 34px;
  text-align: center;
  font-size: 12px;
  position: fixed;
  bottom: -34px;
  right: 20px;
  line-height: 34px;
  background-color: $bg-light;
  box-shadow: 0px 1px 4px 0px rgba( 154, 161, 171, .4 );
  @include transition ($all);
  text-decoration: none;

  i {
    @include transition ($all);
  }

  a {
    display: block;
    color: $heading-color;
  }

  &.show {
    bottom: 20px;
  }

  &:hover {
    background-color: $main-color;
    bottom: 24px;
  }

  &:hover i {
    color: #fff;
  }
}


/*-------------------------------------------------------*/
/* Nav Mobile Styles
/*-------------------------------------------------------*/

@include bp-lg-down {

  .nav {
    min-height: $nav-short-height;
    margin-top: 0;
    background-color: #fff;

    &__wrap {
      padding-left: 0;
    }

    &__header {
      height: $nav-short-height;
      @include display-flex;
      align-items: center;      
    }


    &__menu {
      display: block;
    }

    &__menu li a {
      padding: 0;
      line-height: 46px;
      height: 46px;
      display: block;      
      border-bottom: 1px solid $border-color;
    }

    &__dropdown-menu a {
      color: $text-color;

      &:hover {
        color: #000;
      }
    }

    &__dropdown-menu > li > a {
      padding-left: 10px;
    }

    &__dropdown-menu > li > ul > li > a {
      padding-left: 20px;
    }

    &__dropdown-trigger {
      display: block;
      width: 20px;
      height: 46px;
      line-height: 46px;
      font-size: 12px;
      text-align: center;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 50;
      cursor: pointer;
    }

    &__dropdown-menu {
      padding: 0;
      display: none;
      width: 100% !important;
    }

    &__dropdown-trigger.active + .nav__dropdown-menu {
      display: block;
    }
  }

  .logo-container {
    flex: auto 0 0;
  }

  .logo-wrap {
    float: left;

    a {
      display: table-cell;
      vertical-align: middle;
      height: $nav-short-height;
    }
  }

  .sticky-on-mobile .navbar {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}