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

@blue: #4b4b4b;
@orange: @yellow;

body {
	--mobile-header-height: 130px;
	//padding-top:var(--mobile-header-height);
}

#header {
	.header-info, .button { display:none !important; }
}

#header {
	background-color:#fff;
	border-bottom:5px solid @purple;
	
	position:fixed;
	left:0;
	top:0;
	width:100%;
	padding: 15px 25px;
	height:var(--mobile-header-height);
	
	#logo {
		max-width:50vw;
	}
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	justify-items:center;
	&:before {
		content:' ';
		display:block;
		grid-column:2;
		grid-row:1;
	}
	> * { grid-row:1; }
	
	#header-info { display:none !important; }
	
	#header-menu {
		height:100%;
		.grid-one();
		align-items:center;
		justify-items:center;
		position:relative;
		z-index:10;
		.navbar-toggle {
			display:block;
			width:100%;
			height:100%;
		}
		input.navbar-toggle {
			opacity:0;
		}
		figure.navbar-toggle {
			pointer-events:none;
			color:transparent;
			font-size:5px;
			height:8em;
			width:8em;
			position:relative;
			//overflow:hidden;
			padding-bottom:1em;
			border-bottom:1em solid @blue;
			.transition(border-bottom);
			&:before, &:after {
				content:' ';
				display:block;
				position:absolute;
				z-index:0;
				font-size:1em;
				height:1em;
				width:8em;
				background-color:@blue;
				top:0;
				left:0;
				right:0;
				bottom:0;
				margin:auto;
				.transition();
			}
			span {
				font-size:3em;
				font-weight:700;
				color:@blue;
				display:block;
				.translateY(-1em);
				.transition();
			}
		}
		ul.nav {
			background-color:#fff;
			position:fixed;
			z-index:99;
			top:var(--mobile-header-height);
			.vertAlign;
			flex-direction:column;
			width:100vw;
			min-height:~"calc(100vh - var(--mobile-header-height))";
			left:0;
			bottom:0;
			.transition();
			
			li {
				background-color:transparent;
				color:@blue;
				text-align:center;
				position:unset;
				.grid-one();
				align-items:center;
				justify-items:center;
				> a {
					position:relative;
					z-index:1;
				}
			}
			.sub-menu {
				background-color:#fff;
				width:100%;
				height:100%;
				top:0;
				left:0;
				.vertAlign;
				flex-direction:column;
				position:absolute;
				.transition();
			}
			li.menu-item-has-children {
				> a {
					pointer-events:none !important;
					&:after {
						content:' ';
						display:inline-block;
						.translateY(.15em);
						width:1em;
						height:1em;
						margin-left:.5em;
						background-color:currentcolor;
						.clip("0% 40%, 40% 40%, 40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%");
					}
				}
				> input {
					position:absolute;
					display:block;
					width:100%;
					opacity:0;
					font-size:.25em;
				}
				> figure {
					display:block;
					pointer-events:none;
					color:transparent;
					font-size:.25em;
					height:8em;
					width:8em;
					top:1em;
					right:1em;
					z-index:5;
					position:absolute;
					overflow:hidden;
					-webkit-clip-path:none;
					clip-path:none;
					.transition(opacity);
					&:before, &:after {
						content:' ';
						display:block;
						position:absolute;
						font-size:1em;
						height:1em;
						width:8em;
						background-color:@blue;
						top:0;
						left:0;
						right:0;
						bottom:0;
						margin:auto;
						.transition(transform);
					}
				}
				> input:not(:checked) {
					left:50%;
					height:10em;
					.translateX(-50%);
					z-index:1;
					~ figure {
						opacity:0;
						&:before { .translateY(-1.4em); }	
						&:after { .translateY(1.4em); }	
					}
					~ ul.sub-menu {
						opacity:0;
						.scale(.9);
						pointer-events:none;
					}
				}
				> input:checked {
					position:absolute;
					z-index:5;
					height:8em;
					width:8em;
					top:1em;
					right:1em;
					
					~ figure {
						opacity:1;
						&:before { .rotate(-45deg); }	
						&:after { .rotate(45deg); }	
					}
					~ ul.sub-menu {
						opacity:1;
						.scale(1);
						pointer-events:auto;
						z-index:2;
					}
				}
			}
		}
		input.navbar-toggle:not(:checked) {
			~ figure.navbar-toggle {
				&:before { .translateY(-1.4em); }	
				&:after { .translateY(1.4em); }	
			}
			~ ul.nav {
				opacity:0;
				.scale(.9);
				pointer-events:none;
			}
		}
		input.navbar-toggle:checked {
			~ figure.navbar-toggle {
				&:before { .rotate(-45deg); }	
				&:after { .rotate(45deg); }
				border-bottom:1em solid transparent;
				span {
					opacity:0;
				}
			}
			~ ul.nav {
				opacity:1;
				.scale(1);
				pointer-events:auto;
				z-index:1;
			}
		}
	}
	.sub-menu {
		input:checked {
			&, ~ figure {
				margin-top:50px;
			}
		}
	}
}

#header-menu .menu-item-has-children:after {
	display:none;
}

.searchLi {
	display:grid;
	align-items:center;
	justify-items:end;
	padding-top:5px;
	border-bottom:2px solid @yellow;
	padding-bottom:2px;
	form {
		display:flex;
		max-width:250px;
		flex-direction:row-reverse;
	}
	input[type="search"] {
		background:transparent;
		border:none;
		color:#fff;
		.placeholder(#ccc);
		&:focus { outline:none; }
	}
	input[type="submit"] {
		background:transparent;
		border:none;
		color:transparent;
		background-image:url('/wp-content/uploads/2021/11/search.svg');
		background-position:center;
		background-size:contain;
		background-repeat:no-repeat;
		filter:invert(10%);
	}
}

figure.video.hero {
	@media (max-width: 768px) {
    	margin-top: var(--mobile-header-height);
	}
}

body {
	padding-bottom:95px;
}

body.ows-widget.ows-widget__closed #ows-widget {
	bottom:(95px + 20px) !important;
	z-index:10 !important;
	display:none !important;
}

#mobile-footer {
	box-shadow:0 3px 6px fade(#454545, 50);
	display:grid;
	position:fixed;
	width:100%;
	left:0;
	bottom:0;
	z-index:10;
	grid-template-columns:repeat(4, 1fr);
	a {
		&:nth-child(1) { background-color:@purple; }
		&:nth-child(2) { background-color:@purple-light; }
		&:nth-child(3) { background-color:#4B4B4B; }
		&:nth-child(4) { background-color:#888888; }
		display:block;
		color:#fff;
		font-size:16px;
		padding:1em .5em;
		text-align:center;
		text-transform:uppercase;
		svg {
			fill:currentcolor;
			display:block;
			margin:0 auto .25em;
			width:2em;
			height:2em;
		}
	}
}