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

body {
	overflow: hidden;
}

#content {
	z-index:2;
	article {
		min-height:300px;
	}
}

#header-background {
	background-image:url('/wp-content/uploads/2021/11/hero@2x.jpg');
	margin:0;
	height:56.25vw;
	clip-path: ellipse(80% 100% at 50% 0%);
	/**
	@media all and (max-width: 768px) {
		display: none !important;
	}
	**/
}

#header-menu {
	grid-column: 3;
}

.button {
	background-color:#03BACA;
	border-radius:2.5em;
	border:1px solid #03BACA;
	color:#fff;
	display:block;
	.font(Poppins, 700, 20px);
	margin: 20px auto;
	padding:.75em;
	text-align:center;
	text-transform:uppercase;
	width:275px;
	max-width: 100%;
	.hover();
	&:hover {
		background-color:#fff;
		color:#03BACA;
	}
}

#before-footer {
	clip-path: ellipse(150% 100% at 50% 100%);
	background: repeating-linear-gradient(
		45deg,
		#4e4e4e,
		#4e4e4e 20px,
		#454545 20px,
		#454545 40px
	);
	.pseudoBefore();
	&:before {
		background: linear-gradient(90deg, #555 0%, #454545 50%, #555 100%);
		opacity:.75;
	}
	> div {
		.padding-ends(3vw);
	}
	h5 {
		color:#03BACA;
		.font(Poppins, 700, 48px);
		text-align:center;
		text-transform:none;
	}
	
	.better-input {
		margin-bottom:50px;
		display:grid;
		grid-gap:0 25px;
		@media (min-width:769px) {
			grid-template-columns:1fr 1fr;
			.your-message {
				grid-column:2;
				grid-row:1 / span 3;
			}
			.betterSubmit {
				grid-column:1 / -1;
			}
		}
	}
	#footer-info {
		.max-width(720px);
		display:grid;
		grid-gap:25px;
		@media (min-width:769px) {
			grid-template-columns:repeat(3, 1fr);
		}
	}
	.footer-info {
		color:#fff;
		display:block;
		.font(Poppins, 400, 20px);
		span, address {
			display:block;
			text-align:center;
		}
		svg {
			background: linear-gradient(135deg, rgba(3,186,202,1) 0%, rgba(117,217,152,1) 100%);
			border-radius:50%;
			fill:#fff;
			width:82px;
			height:82px;
			display:block;
			margin:0 auto 10px;
			padding:20px;
			overflow:visible;
		}
	}
}

/**** Full BORDER Color ****/
.wpcf7 {
	.wpcf7-form-control-wrap {
		position: relative;
		background-color:fade(#fff, 40);
		border:none;
		margin-bottom:0;
		display:block;
		margin-top: 1.75em;
		color:#414042;
		.font(Montserrat, 400, 16px);
	}
	form > div {
		.inherit();
		.font();

		*::placeholder { color: rgba(0,0,0,1); opacity: 0.7; }
		*:-ms-input-placeholder { color: rgba(0,0,0,1); }
		*::-ms-input-placeholder { color: rgba(0,0,0,1); }
		*:-moz-input-placeholder { color: rgba(0,0,0,1); }
		*::-moz-input-placeholder { color: rgba(0,0,0,1); }

		* {
			color:inherit;
			border:0;
			padding: 1px 2px;
			resize:none;
		}
		label {
			.transition();
		}

		input, select, textarea {
			color:#ffffff;
			font-size:inherit;
			font-weight:inherit;
			font-family: Poppins;
			padding:.8em;
			width:100%;
			&:focus {
				outline:none;
			}
		}
		textarea {
			height:150px;
		}
		select {
			display:block;
			width:100%;
			margin-bottom:5px;
		}

		label {
			position: relative;
			width:100%;
			top:0;
			transform: translateY(.8em) translateX(.7em);
			left:0;
			pointer-events: none;
			color:inherit;
			font-size:inherit;
			font-weight:inherit;
			font-family:inherit;
		}
		.req {
			color:#FF4136;
			.transition(.3s, color, @easing);
		}

		*:focus:not(:placeholder-shown) + label,
		*:focus + label,
		*:focus:not(:placeholder-shown) + label .req,
		*:focus + label .req {
			color:#fff; // Inputting
		}
		*:not(:placeholder-shown) + label,
		*:not(:placeholder-shown) + label .req {
			color:#ddd; // Inputted
		}
	}
	input[type="submit"] {
		background-color:#03BACA;
		border-radius:2.5em;
		border:1px solid #03BACA;
		color:#fff;
		display:block;
		.font(Poppins, 700, 20px);
		margin-top:50px;
		.margin-sides(auto);
		padding:.75em;
		text-align:center;
		text-transform:uppercase;
		width:275px;
		.hover();
		&:hover {
			background-color:#fff;
			color:#03BACA;
		}
	}
}

#social-media {
	.vertAlign;
	gap:25px;
	margin-top:50px;
	a {
		color:#03BACA;
		font-size:36px;
		&:hover {
			color:#74d999;
		}
		svg {
			fill:currentcolor;
			height:1em;
			width:auto;
		}
	}
}

#footer {
	background: linear-gradient(175deg, rgba(3,186,202,1) 0%, rgba(116,217,153,1) 100%);
	padding:50px 25px 5px;
	
	> * {
		.max-width(960px);
		&:not(:last-child) {
			margin-bottom:25px;
		}
	}
	
	ul.footer-menu {
		display:grid;
		grid-gap:25px;
		@media (min-width:769px) {
			grid-template-columns:1fr 2fr 1fr;
		}
		> li > a {
			font-size:1.5em;
			font-weight:700;
		}
		> li:nth-child(2) {
			ul {
				columns:200px 2;
			}
		}
	}
}
ul.nav > li:hover {
  z-index:10;
}

/*#fan-drive {
	position: fixed;
	top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 400px;
    z-index: 99999;
    max-width: 90%;
    background-color: #fff;
    padding: 10px;
	height: auto;
    max-height: 240px;
    display: none;
    justify-content: center;
}

#closeAd {
    cursor: pointer;
    position: absolute;
	left: 0px;
	top: -30px;
	padding: 5px 10px;
	background-color: #03baca;
	z-index: 9;
	font-size:20px;
	color: #fff;
}*/

body.blog main#content {
	.entry-header {
		grid-column: 1;
		.entry-title {
			text-align: right;
		}
	}
}

/* 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,1.2fr) 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 */

/* 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;
	}
}