/*
 * header
 */
#header{z-index:1000;position:fixed;top:0;left:0;right:0;background:rgba($white,1);@include animate-element();@include has-shadow();}


/*
 * coloured top info bar
 */
.info-bar{
	
	width:100%;
	background: $primary-color;
	box-shadow: inset 0 -1rem 1rem -1rem rgba($black,0.25);	
	color:$white;
	text-align:right;
	position:relative;
	max-height:100px;
	
	@include animate-element();	
	@include has-gradient($primary-color,10%);
	

	.inner{padding:0.5rem 1rem 0.625rem 1rem;}

	ul{list-style:none;margin:0;font-size:0.875rem;}
	li{position:relative;display:inline-block;padding:0 0.75rem;}
	li::after{content:"";border-right:solid 2px rgba($white,0.25);padding-left:1rem;position:absolute;right:0;top:0%;height:100%;}		
	li:last-child{padding-right:0;}
	li:last-child::after{display:none;}
	
	a{color:$white;}
	
	a.button{background:$white;padding:0.25rem 0.5rem;color:$primary-color;border:none;}
	
}


/*
 * top-bar
 */
.top-bar{
	background:rgba($white,0);width:100%;z-index:250;padding:0;padding:0.5em 1em;
}


/*
 * top-bar left
 */
.top-bar .top-bar-left{
	
	padding:0.5em;
	
	// Logo
	.logo-primary{
	
		display:block;
		float:left;
		height:2.5rem;
	
		svg{
			fill:$white;height:100%;display:block;@include animate-element();		
		}
	}
	
	// toggle navigation
	.toggle-navigation{
		float:right;margin:0.25rem 0 0 0;position:relative;width:1.5em;height:1.5em;padding:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;
	
		span{display:block;position:absolute;height:0.125em;width:100%;background:$black;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;}
		span:nth-child(1){top:0.5em;}
		span:nth-child(2),
		span:nth-child(3){top:1em;}
		span:nth-child(4){top:1.5em;}
		
		&.open span:nth-child(1){top:18px;width:0%;left:50%;}
		&.open span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
		&.open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
		&.open span:nth-child(4){top:18px;width:0%;left:50%;}
		
	}
	
}

.top-bar .top-bar-right{
	
	a{color:$black;}
	a.current{font-weight:bold;color:$primary-color;}
	a:hover{color:$primary-color;}
	
	ul{background:none;}
	ul ul{background:$white;@include has-shadow(0.125);margin-top:1.5rem;}
	ul ul li{border-bottom:solid 1px $light-gray;}
	ul ul li::after{display:none;}
	
	li{position:relative;}
	li::after{content:"";border-right:solid 1px rgba($black,0.1);padding-left:1rem;position:absolute;right:0;top:0%;height:100%;}		
	li:last-child::after{display:none;}
	
	a.toggle-search{display:block;float:right;padding-right:0.25rem;}
	a.toggle-search > svg{fill: $black;width:1rem;height:1rem;overflow:hidden;}
	
	.cart-count{background-color:$primary-color;width:0.875rem;height:0.875rem;border-radius:50%;display:block;position:absolute;top:0.5rem;right:0.5rem;font-size:0.75rem;color:$white;text-align:center;}
}




/*
 * header has scrolled 
 */	
#header.has-scrolled,
#header.no-header-transition,
#header.navigation-open
{	
	
	background:rgba($white,1);
	
	/*a:hover{color:$primary-color;}
	.top-bar-left::after{display:none;}*/
	
	.info-bar{max-height:0;overflow:hidden;}
	
}

#header.has-showcase + div.header-spacer{
	height:6.5em;
	@include breakpoint(medium down){height:4.5rem;}
}

//#header.subpage + div.header-spacer{height:9em;}
#header + div.header-spacer{
	height:7em;
	
	@include breakpoint(medium down) {
		height:6rem;
	}
}





/*
 * Mobile adjustments
 */
.top-bar{
	
	@include breakpoint(medium down){
		
		.menu{margin:0;background:none;}
		.menu a{background:none;}
		.menu .button{font-size:1em}
		.menu > li{border-bottom:solid 1px rgba($light-gray,0.5);text-align:center;}
		.menu > li:last-child{border:none;}
		.menu .button{background:none;}
				
		a.toggle-search{float:none;}
		
	}
} 	


/*
 * Search 
 */	
.search-site{
	
	background:$white;
	transition: max-height 0.5s;  
	overflow: hidden;
	max-height: 0;
	position:relative;
	z-index:300;
	
	&.search-visible{ max-height: 300px;}
	> div{padding:1em;border-top:solid 1px $light-gray;}
	&::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;border-top:solid 1px $light-gray;}
	
	
	form{position:relative;}
	input[type="text"]{width:100%;padding:0.375em 2em !important;border:none;font-size:1.25em;max-width:none;margin-bottom:0;box-shadow:none;height:auto;}
	button{border:none;margin:0;background:none;float:left;padding:0;width:2em;position:absolute;top:0.125em;left:0;background:none !important;border:none !important;margin-top:0.125em !important;}
	button:hover{color:$primary-color;background:none;}
	svg{fill: $primary-color;}	
	.close-search{position:absolute;top:0.5em;right:0;width:1.5em;height:1.5em;cursor:pointer;padding:0;}
	.close-search:hover{  fill: #941b80;}	
	
}