/*----------------------------------
  Header v2
------------------------------------*/

/* Navbar
------------------------------ */
.s-header-v2__navbar {
  @include position(relative);
  z-index: $zindex-navbar;
  min-height: 3.125rem;
  border-bottom: .0625rem solid $color-white-opacity-lighter;
  @include clearfix;
  @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));

  @include media-breakpoint-down(md) {
  	background: $color-white;
    box-shadow: 0 0 .9375rem .25rem rgba($color-dark, .05);
  }
}

/* Navbar Row
------------------------------ */
.s-header-v2__navbar-row {
  display: table-row;
  clear: both;

  @include media-breakpoint-down(md) {
    display: inherit;
  }
}

/* Columns */
.s-header-v2__navbar-col {
  display: table-cell;
  vertical-align: middle;

  @include media-breakpoint-down(md) {
    display: block;
  }
}

/* Space */
.s-header-v2__navbar-col-width--180 {
  width: 11.250rem;

  @include media-breakpoint-down(md) {
    width: auto;
  }
}

/* Variations */
.s-header-v2__navbar-col {
	&--left {
    @include media-breakpoint-up(lg) {
      float: left;

      .dropdown__mega-menu {
        right: auto;
        left: 10rem;
      }
    }
  }

  &--right {
    @include media-breakpoint-up(lg) {
      float: right;
    }
  }
}

/* Navbar Toggle
------------------------------ */
.s-header-v2__toggle {
  @include position(relative);
  display: none;
  float: right;
  background: transparent;
  border: none;
  outline: none;
  line-height: 4.3rem;
  padding: .5625rem .3125rem .5625rem .625rem;
  margin: 0;

  &-icon-bar {
    @include position(relative);
    @include size(1.315rem, .0625rem);
    display: inline-block;
    @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));

    @include plain-before-after {
      background: $color-dark;
    }

    @include before-after {
      @include position(absolute, $left: 0);
      content: " ";
      @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
    }

    @include before {
      @include size(.625rem, .0625rem);
      bottom: .625rem;
    }
    
    @include after {
      @include size(1rem, .0625rem);
      top: -.3125rem;
    }
  }

  @include hover {
    .s-header-v2__toggle-icon-bar {
      @include before-after {
        @include size(1.315rem, .0625rem);
      }
    }
  }

  @include media-breakpoint-down(md) {
    display: block;
  }
}

/* Logo
------------------------------ */
.s-header-v2__logo {
  @include size(100%, auto);
  float: left;

  &-link {
    display: inline-block;
    padding: 1rem 1.25rem 1rem 0;
    @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));

    @include hover-focus {
      text-decoration: none;
    }
  }
  
  &-img {
    display: inline-block;

    &--default {
    	display: block;

    	@include media-breakpoint-down(md) {
    		display: none;
    	}
    }

    &--shrink {
    	display: none;

    	@include media-breakpoint-down(md) {
    		display: block;
    	}
    }
  }

  @include media-breakpoint-down(md) {
    @include size(auto);
    float: left;

    &-link {
      padding-left: .875rem;
      padding-right: .625rem;
    }
  }
}

/* Collapse
------------------------------ */
.s-header-v2__navbar-collapse {
  @include media-breakpoint-down(md) {
    width: 100%;
    padding: 0 .9375rem !important;
  }

  &.collapse {
    @include media-breakpoint-down(md) {
      display: none !important;

      &.in {
        display: block !important;
        max-height: 35rem;
        overflow-y: auto !important;
      }
    }
  }
}

/* Nav Menu
------------------------------ */
.s-header-v2__nav {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  @include clearfix;

  @include media-breakpoint-down(md) {
		background: $color-white;
    padding: 1.25rem 0;
  }

  &-item {
    @include position(relative);
    display: block;
    float: left;

    @include last-child {
      .s-header-v2__nav-link {
        margin-right: 0;
      }
    }

    @include media-breakpoint-down(md) {
      float: none;
    }

    .dropdown-backdrop {
      @include position(relative);
    }
  }

  &-link {
    @include position(relative);
    display: block;
    @include font($size: $font-size-13, $weight: 700, $family: $font-family-secondary);
    color: rgba($color-white, .75);
    line-height: $navbar-height;
    text-transform: uppercase;
    margin: 0 .9rem;
    @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));

    @include hover {
  		color: $color-white;
  	}

  	@include focus {
  		color: rgba($color-white, .75);
  	}

    &.-is-active {
	  	color: $color-white;
	  }

    @include media-breakpoint-down(md) {
      color: rgba($color-dark, .7);
      line-height: $line-height;
      margin: 1.5rem 0;

      @include hover-focus {
        color: rgba($color-dark, .7);
      }

      &.-is-active {
        color: $color-primary;
      }
    }
  }
}

/* Dropdown
------------------------------ */
.s-header-v2__dropdown-menu {
  display: none;
  @include font($size: $font-size-13);
  min-width: 13.750rem;
  background: $color-white;
  border: none;
  @include border-radius(0);
  box-shadow: 0 .3125rem .75rem rgba($color-dark, .05);
  padding: .9375rem 0;
  margin-top: 0;

  @include media-breakpoint-down(md) {
  	@include position(static);
  	float: none;
    box-shadow: none;
  }

  @include hover-focus {
  	.s-header-v2__dropdown-menu-link {
    	background: transparent;
  	}
  }

  &-link {
    @include font($size: $font-size-14, $weight: 400, $family: $font-family-primary);
    color: rgba($color-dark, .7) !important;
    padding: .4375rem 2rem .4375rem 1.375rem !important;
    @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
    
    @include hover {
	    color: $color-primary !important;
    }

	  &.-is-active {
	  	color: $color-primary !important;
	  }
  }
}

/* Dropdown Menu Open On Hover
------------------------------ */
.s-header-v2__dropdown-on-hover {
  @include media-breakpoint-up(lg) {
    @include hover {
      > .s-header-v2__dropdown-menu {
        display: block;
      }
    }
  }
}

/* Shrink
------------------------------ */
@include media-breakpoint-up(lg) {
	.s-header__shrink {
	  .s-header-v2__navbar {
	    background: $color-white;
	    box-shadow: 0 0 .9375rem .25rem rgba($color-dark, .05);
	  }
	}

	/* Toggle */
	.s-header__shrink {
		.s-header-v2__toggle-icon-bar--white {
		  @include plain-before-after {
		    background: $color-dark;
		  }
		}
	}

	/* Logo */
	.s-header__shrink {
		.s-header-v2__logo-img {
		  &--default { display: none; }
		  &--shrink { display: block; }
		}
	}

	/* Nav Link */
	.s-header__shrink {
		.s-header-v2__nav-link {
	  	color: rgba($color-dark, .7);

      @include hover {
        color: $color-primary;
      }

	  	@include focus {
	  		color: rgba($color-dark, .7);
	  	}

	  	&.-is-active {
		  	color: $color-primary;
		  }
		}
	}
}