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

/* mobile.less */

@media (max-width: 768px) {
	@blue: #03baca;

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

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

	#header {
		background-image:url('/wp-content/uploads/2021/11/hero@2x.jpg');
		background-size:cover;
		background-position:center;
		border-bottom:2px solid @blue;
	
		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;
			.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;
				&: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();
				}
				span { display:none !important; }
			}
			ul.nav {
				background-color:#fff;
				position:fixed;
				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;
				}
				.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();
						&: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();
						}
					}
					> input:not(:checked) {
						left:50%;
						height:10em;
						.translateX(-50%);
						~ 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(0);
					pointer-events:none;
				}
			}
			input.navbar-toggle:checked {
				~ figure.navbar-toggle {
					&:before { .rotate(-45deg); }	
					&:after { .rotate(45deg); }	
				}
				~ ul.nav {
					opacity:1;
					.scale(1);
					pointer-events:auto;
					z-index:1;
				}
			}
		}
	}

	#header nav #logo,
	.search-li { display:none !important; }

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

/* desktop.less */

@media (min-width: 769px) { 
	#header {
		position:sticky;
		left:0;
		width:100%;
		margin-bottom:-228px;
	}

	#header-background {
		position:sticky;
		height:640px;
		margin-bottom:-450px;
	}

	#header {
		top:-228px;
		.transition(top);
		z-index:3;
		+ #header-background {
			clip-path: ellipse(80% 100% at 50% 0%);
			z-index:2;
			top:-500px;
			.transition(top);
			.transition(clip-path);
		}
	}
	#header.shrink {
		position: fixed;
		top:0;
		z-index:20;
		+ #header-background {
			clip-path: ellipse(150% 100% at 50% 0%);
			z-index:2;
			top:-400px;
		}
	}

	#header {
		> #logo { display:none !important; }
		ul.nav {
			display:grid;
			grid-template-columns:repeat(3, 1fr) 5fr repeat(3, 1fr);
			align-items:center;
			justify-items:center;
			.logo {
				padding:20px 0;
				img {
					max-width:300px;
				}
			}
		}
	}


	@media (max-width:1280px) {
		#header {
			ul.nav {
				grid-template-columns:repeat(3, 1fr) 3fr repeat(3, 1fr);
				li {
					a {
						font-size:.75em;
					}
				}
				.logo {
					&, * {
						width:250px;
					}
					img {
						width:100%;
					}
				}
			}
		}
	}
	@media (max-width:960px) {
		#header {
			ul.nav {
				li {
					a {
						font-size:.7em;
					}
				}
				.logo {
					&, * {
						width:200px;
					}
					img {
						width:100%;
					}
				}
			}
		}
	}
}
#content {
	padding-top:125px;
}

.search-li {
	flex:1;
	display:grid;
	align-items:center;
	justify-items:end;
	form {
		display:flex;
		max-width:100%;
		flex-direction:row-reverse;
	}
	input[type="search"] {
		position:absolute;
		top:100%;
		right:0;
		background:transparent;
		border:none;
		color:#fff;
		padding-top:20px;
		width:250px;
		border-bottom:1px solid #fff;
		font-weight:400;
		.placeholder(#fff);
		&: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(100%);
		width:100%;
	}
	input[type="search"] {
		opacity:0;
		.transition();
	}
	&:hover input[type="search"],
	input[type="search"]:focus {
		opacity:1;
	}
}
/* mobile.less END */

/* desktop.less END *//* desktop.less */

@media (min-width: 769px) { 
	#header {
		position:sticky;
		left:0;
		width:100%;
		margin-bottom:-228px;
	}

	#header-background {
		position:sticky;
		height:640px;
		margin-bottom:-450px;
	}

	#header {
		top:-228px;
		.transition(top);
		z-index:3;
		+ #header-background {
			clip-path: ellipse(80% 100% at 50% 0%);
			z-index:2;
			top:-500px;
			.transition(top);
			.transition(clip-path);
		}
	}
	#header.shrink {
		position: fixed;
		top:0;
		z-index:20;
		+ #header-background {
			clip-path: ellipse(150% 100% at 50% 0%);
			z-index:2;
			top:-400px;
		}
	}

	#header {
		> #logo { display:none !important; }
		ul.nav {
			display:grid;
			grid-template-columns:repeat(3, 1fr) 5fr repeat(3, 1fr);
			align-items:center;
			justify-items:center;
			.logo {
				padding:20px 0;
				img {
					max-width:300px;
				}
			}
		}
	}


	@media (max-width:1280px) {
		#header {
			ul.nav {
				grid-template-columns:repeat(3, 1fr) 3fr repeat(3, 1fr);
				li {
					a {
						font-size:.75em;
					}
				}
				.logo {
					&, * {
						width:250px;
					}
					img {
						width:100%;
					}
				}
			}
		}
	}
	@media (max-width:960px) {
		#header {
			ul.nav {
				li {
					a {
						font-size:.7em;
					}
				}
				.logo {
					&, * {
						width:200px;
					}
					img {
						width:100%;
					}
				}
			}
		}
	}
}
#content {
	padding-top:125px;
}

.search-li {
	flex:1;
	display:grid;
	align-items:center;
	justify-items:end;
	form {
		display:flex;
		max-width:100%;
		flex-direction:row-reverse;
	}
	input[type="search"] {
		position:absolute;
		top:100%;
		right:0;
		background:transparent;
		border:none;
		color:#fff;
		padding-top:20px;
		width:250px;
		border-bottom:1px solid #fff;
		font-weight:400;
		.placeholder(#fff);
		&: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(100%);
		width:100%;
	}
	input[type="search"] {
		opacity:0;
		.transition();
	}
	&:hover input[type="search"],
	input[type="search"]:focus {
		opacity:1;
	}
}

/* desktop.less END */