// -----------------------------------------------------------------------------
// Main Navigation
// -----------------------------------------------------------------------------

.navbar-with-columns {
  .navbar-collapse,
  .navbar-nav,
  .main-nav-items {
    // undo boostrap default margin so aligns with grid
    margin-left: -$grid-gutter-width/2; 
    margin-right: -$grid-gutter-width/2;
  }
  .navbar-toggle {
    margin-right: 0;
  }
  &.navbar .navbar-brand {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }
  @media(max-width:$screen-xs-max) {
    .navbar-form {
      margin-left: 0;
      margin-right: 0;
    }
  }
  // use main-nav-items-offset sm and md for reducing vertical spacing when subnav goes full width
  .main-nav-items.main-nav-items-offset {
    @media (min-width: $screen-sm) and (max-width: $screen-md-max) {
      &.navbar-nav>li>a {
        padding-top: 16px;
        padding-bottom: 32px;
        margin-top: -8px;
      }
      .navbar-form-search {
        margin-top: -4px;
        margin-bottom: 0;
      }
    }
  }
}
.navbar-form {
  padding-top: 16px;
  padding-bottom: 16px;
  @media(min-width:$screen-sm) {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
.navbar-form-search {
    $form-height: 40px;

    position: relative;
    margin-top: ($navbar-height - $form-height)/2;
    margin-bottom: ($navbar-height - $form-height)/2;
    .form-control,
    .btn {
        border-radius: $form-height !important;
        height: $form-height;
    }
    .form-control {
        padding-right: $form-height + 16;
        border-color: $gray-light;
        &:focus {
            @include shadow-level(3);
            background-color: white;
        }
    }
    .input-group-btn {
        left: $form-height - 8;
        z-index: 500;
    }
    .btn {
        padding: 0;
        width: $form-height;
        position: absolute;
        top: 16px;
        right: 16px;
        &:focus { 
            outline: none;
            // color: $gray-dark;
            @include shadow-level(3);
            background-color: white;
        }
        &:active {
            color: $brand-info;
        }
        @media(min-width:$screen-sm) {
            top: 0;
        }
    }
}
.navbar-toggle {
  .icon-bar {
    width: 16px;
    border-radius: 0;
  }
  @media(max-width: $grid-float-breakpoint-max) {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

.navbar-brand.navbar-brand-gt {
  padding-top: 24px;
  padding-bottom: 24px;
}
.navbar-brand {
  line-height: 16px;
  font-weight: 900;
  transition: opacity .2s ease;
  position: relative;
  white-space: nowrap;
  img {
    transition: all .15s cubic-bezier(0.215, 0.61, 0.355, 1);
    max-height: 100%;
    max-width: 100%;
  }
  @media(min-width: $screen-sm-min) {
    width: 100%;
    img.navbar-brand-logo-gt {
      transform: translate(0%,0) scale(1);
      transform-origin: left 30%;
      transition-duration: .3s;
      width: 48px;
    }
    img.navbar-brand-logo-full {
      position: absolute;
      top: 50%;
      transform: translate(-10%,-50%);
      opacity: 0;
      transition-duration: .1s;
      width: 117px;
    }
    &:hover {
      img.navbar-brand-logo-gt {
        opacity: 0;
        transform: translate(-20%,0) scale(.8);
        transition-duration: .15s;
      }
      img.navbar-brand-logo-full {
        opacity: 1;
        transform: translate(0,-50%);
        transition-duration: .4s;
      }
    }
  }
  @media(max-width: $grid-float-breakpoint-max) {
    padding-top: 16px;
    padding-bottom: 16px;
    height: auto;
    img.navbar-brand-logo-gt {
      width: 32px;
    }
  }
}

.navbar {
  @media(min-width: $grid-float-breakpoint) {
    .main-nav-items {
      & > li > a {
        position: relative;
        &:after {
          content: "";
          height: 1px;
          position: absolute;
          bottom: -1px; // to offset the navbar border
          left: 16px;
          right: 16px;
          transform: scaleX(0) translateZ(0);
          transition: all .2s ease;
          transform-origin: left center;
        }
        &:hover {
          &:after {
            transform: scaleX(1) translateZ(0);
            opacity: 1;
          }
        }
      }
      .active {
        a {
          &:after {
            transform: scaleX(1) translateZ(0);
          }
        }
      }
    }
  }
  @media(max-width: $grid-float-breakpoint-max) {
    min-height: auto;
  }
}

.navbar-default {
  border-color: $gray-lighter;
  @media(min-width: $grid-float-breakpoint) {
    .main-nav-items {
      & > li > a {
        &:after {
          background-color: $gray-base;
        }
        &:active,&:focus {
          color: $brand-info;
        }
      }
      .active a {
        &:hover:after {
          background-color: $gray;
        }
      }
    }
  }
}
.navbar-inverse {
  border: none;
  @media(min-width: $grid-float-breakpoint) {
    .main-nav-items {
      & > li > a {
        &:after {
          background-color: $gray-lighter;
          height: 3px;
          bottom: -1px;
          z-index: 10;
        }
      }
    }
  }
  @media(max-width: $grid-float-breakpoint-max) {
    .navbar-nav .open .dropdown-menu {
      background-color: $gray-light;
      margin-bottom: 16px;
    }
    .navbar-collapse {
      background-color: $gray-dark;
      border: none;
    }
  }
}

.navbar-sub {
  // border-top: 1px solid $gray-light;
  border: none;
  min-height: auto;
  background-color: $gray-lighter;
  .navbar-nav {
    li a {
      &:after {
        display: none;
      }
    }
    .active {
      a {
        color: $link-color;
      }
    }
  }
  .navbar-collapse {
    border-top-color: $gray-light;
  }
  @media (min-width: $screen-sm-min){
    li a {
      padding-top: 24px;
      padding-bottom: 24px;
    }
  }
}



// -----------------------------------------------------------------------------
// Dropdowns
// -----------------------------------------------------------------------------
.dropdown-menu {
  @include shadow-level(3);
  padding-top: 8px;
  padding-bottom: 8px;
  li {
    a {
      padding: 8px 16px;
    }
  }
}
.secondary-menu {
  .open {
    .dropdown-menu {
      min-width: 320px;
    }
  }
}

// -----------------------------------------------------------------------------
// Sub Menu
// -----------------------------------------------------------------------------
.sub-menu {
  text-align: center;
  display: block;
  width: 100%;

  @media (min-width: $screen-sm-min) {
    display: table;
  }

  > li {
    display: inline-block;
    margin: 0;

    @media (min-width: $screen-sm-min) {
      display: table-cell;
      vertical-align: middle;
    }

    &.active {
      a {
        background-color: $gray-light;
        color: $gray-darker;
        font-weight: 700;

        &:hover {
          background-color: $gray-light;
          color: $gray-darker;
        }
      }
    }

    a {
      color: $gray-darker;
      font-weight: 400;
      padding: 10px 10px;

      @media (min-width: $screen-sm-min) {
        padding: $grid-gutter-width/2 $grid-gutter-width/2;
      }

      &:hover {
        background-color: $gray-light;
      }
    }
  }
}


// -----------------------------------------------------------------------------
// Promo Bar
// -----------------------------------------------------------------------------
.promo-bar-item {
  display: none;
  &:first-child {
    display: block;
  }
}