@import "@{parenturl}/less/mixins.less";
@import "@{themeurl}/less/vars.less";

#header {
	position:sticky;
	top:0;
	.blur(10px);
	.header-area {
		background-color:fade(#fff, 80);
		padding:40px 50px;
		> div {
			.max-width(1750px);
			display:grid;
			grid-gap:15px 50px;
			align-items:center;
			grid-template-columns:1fr auto auto auto;
		}
	}
	#logo {
		justify-items:start;
	}
	.header-phone,
	.click-to-text {
		color:#808285;
		display:grid;
		grid-gap:.1em .25em;
		grid-template-columns:auto 1fr;
		grid-template-rows:auto auto;
		align-items:center;
		justify-items:center;
		.font(Poppins, 500, 28px);
		letter-spacing:.05em;
		text-align:center;
		text-transform:uppercase;
		svg {
			height:1.5em;
			width:auto;
			fill:@blue-faded;
			grid-column:1;
			grid-row:1 / span 2;
		}
		span {
			color:#58595B;
			font-size:.57em;
		}
	}
	.header-phone {
		span {
			letter-spacing:.2em;
		}
	}
	.click-to-text {
		span {
			letter-spacing:.14em;
		}
	}
	nav {
		background-color:fade(@blue, 80);
		text-align:center;
		.padding-sides(25px);
		ul.nav {
			> li {
				> a {
					display:inline-block;
					padding:1em;
				}
				&:not(:last-child):after {
					content:' ';
					display:inline-block;
					width:2px;
					height:1em;
					background-color:#fff;
					vertical-align:middle;
					.translateY(-.1em);
				}
			}
		}
	}
}

#header {
	margin-bottom:0;
	.transition(margin-bottom);
	.header-area {
		padding:40px 50px;
		.transition(padding);
	}
}
#header.shrink {
	margin-bottom:( (40px - 15px) * 2);
	.header-area {
		padding:15px 50px;
	}
}

@media (max-width:1280px) {
	#header {
		.header-area > div {
			grid-gap:15px 25px;
		}
		.header-phone,
		.click-to-text {
			font-size:20px;
		}
		.button {
			font-size:14px;
		}
	}
}
@media (max-width:1080px) {
	#header {
		.header-area {
			> div {
				grid-template-columns:1fr auto auto;
				grid-template-rows:auto auto;

				#logo {
					grid-column:1;
					grid-row:1 / span 2;
				}
				.header-phone {
					grid-column:2;
					grid-row:1;
				}
				.click-to-text {
					grid-column:2;
					grid-row:2;
				}
				.header-phone,
				.click-to-text {
					justify-items:start;
				}
				.button {
					grid-column:3;
					grid-row:1 / span 2;
				}
			}
		}
	}
}
@media (max-width:800px) {
	#header {
		.nav > li {
			font-size:15px;
		}
	}
}