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

#header {
	> div {
		display:grid;
		align-items:center;
		justify-items:center;
		grid-template-columns:2fr 2fr 3fr 2fr 2fr;
		> * {
			grid-row:1;
		}
		#logo { grid-column:3; }
	}
	nav {
		background-color:fade(@blue, 50);
		.blur(7px);
		body.template-hero-video &,
		body.template-hero-image & {
			position:absolute;
			width:100%;
			top:100%;
			left:0;
		}
		ul.nav {
			display:grid;
			justify-items:center;
			grid-template-columns:3fr repeat(3, 7fr) 6fr repeat(3, 8fr);
			> li {
				text-align:center;
			}
			li.spacer {
				//display:none !important;
				pointer-events:none;
				opacity:0;
				visibility:hidden;
				> a { display:none;}
				&:nth-child(3), &:nth-child(2) { grid-column:2; }
				&:nth-child(5), &:nth-child(4) { grid-column:3; }
				&:nth-child(7), &:nth-child(6) { grid-column:4; }
				&:nth-child(9), &:nth-child(8) { grid-column:5; }
			}
			.home {
				a {
					background-image:url('/wp-content/uploads/2021/09/home.svg');
					background-size:auto ~"calc(100% - 10px)";
					background-position:center;
					background-repeat:no-repeat;
					color:transparent;
					filter:invert(100%);
				}
			}
		}
	}
}

body.hilliard {
	#header {
		#westerville { display:none !important; }
		#hilliard { grid-column: 1 / span 2; }
	}
}
body.westerville {
	#header {
		#hilliard { display:none !important; }
		#westerville { grid-column: 1 / span 2; }
	}
}

.header-info {
	color:#a6a8ab;
	.vertAlign;
	.font(Raleway, 500, 24px);
	margin-top:1em;
	padding:10px;
	text-align:left;
	text-transform:uppercase;
	svg {
		fill:@light_blue;
		height:2em;
		width:auto;
		margin-right:.5em;
	}
	b {
		display:block;
		.inherit();
		.font(@weight:600);
	}
}

#header {
	margin-bottom:0;
	.transition();
	#logo a {
		overflow:hidden;
		svg {
			margin-top:0;
			.transition();
		}
	}
	body.home & nav {
		background-color:rgba(27,102,157,0.5);
		.transition();
	}
	.header-info {
		margin-top:1em;
		.transition();
	}
}
#header.shrink {
	margin-bottom:67px;
	#logo a {
		svg {
			margin-top:-67px;
		}
	}
	body.home & nav {
		background-color:fade(@blue, 50);
	}
	.header-info {
		margin-top:0;
	}
}

#header {
	.dcmo_search {
		form {
			&, label {
				height:100%;
				.vertAlign;
			}
			position:relative;
		}
		input[type="submit"] {
			background-color:transparent;
			background-image:url('/wp-content/uploads/2021/09/search.svg');
			background-size:contain;
			background-position:center;
			background-repeat:no-repeat;
			border:none;
			font-size:0;
			width:30px;
			height:30px;
			filter: invert(100%);
		}
		input[type="search"] {
			background-color:transparent;
			border:none;
			border-bottom:1px solid #fff;
			color:#fff;
			.font(Raleway, 400, 18px);
			position:absolute;
			right:100%;
			.placeholder(#f7f7f7);
			&:focus {
				outline:none;
			}
		}
		input[type="search"] {
			.clip(@square_right);
			.transition();
		}
		&:hover input[type="search"],
		input[type="search"]:focus {
			.clip(@square);
		}
	}
}

#after-footer { display:none !important; }