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

.entry-content {
	@media (max-width:768px) {
		h1 { font-size:24px; }
		h2 { font-size:20px; }	
		h3 { font-size:18px; }	
	}
}

body {
	overflow-x:hidden;
	@media (min-width:769px) {
		padding-top:202px;
	}
	@media (max-width:768px) {
		padding-top:110px;
	}
	@media (max-width:420px) {
		padding-top:90px;
	}
}
#header { 
	position:fixed;
	z-index:99999;
	top:0;
	left:0;
	background-color:fade(#fff, 80);
	.blur(10px);
	width:100%;
	box-shadow:0 3px 6px fade(#232536, 25);
	> div {
		.flex(space-between);
		.max-width(1650px);
	}



	nav {
		background-color:@green;
		> ul {
			.max-width(1650px);
			.flex(flex-end);
			.padding-sides(25px);
		}
		.sub-menu {
			li {
				.hover();
				a {
					transition:none;
				}
			}
		}
	}

	.search {
		.vertAlign;
		form {
			display:flex;
			flex-direction:row-reverse;
		}
		input[type="search"] {
			background:transparent;
			border:none;
			border-bottom:1px solid @dark-green;
			color:#fff;
			overflow:hidden;
			&:focus { outline:none; }
			.placeholder(#efefef);
		}
		input[type="submit"] {
			background:transparent;
			background-image:url('/wp-content/uploads/2021/05/search.svg');
			background-position:center;
			background-repeat:no-repeat;
			border:none;
			font-size:0;
			color:transparent;
			width:30px;
		}


		input[type="search"] {
			width:0;
			.transition();
		}
		&:hover input[type="search"],
		input[type="search"]:focus {
			width:150px;
		}
	}

	& {
		> div {
			padding:25px;
			.transition();
		}
		#logo {
			margin-top:0;
			.transition();
			a {
				margin-top:0;
				.transition();
			}
		}
	}
	@media (min-width:769px) {
		&.smaller {
			> div {
				padding: 10px 0;
			}
			#logo {
				a {
					margin-top:-60px;
				}
			}
		}
		@media (max-width:1100px) {
			> div { justify-content: space-around; }
			#logo {
				margin-top:15px;
			}
			#header-info {
				grid-auto-flow: row;
				grid-gap: 0;
				//margin: -20px 0;
				a address { white-space: normal; }
			}
		}
	}
	@media (max-width:768px) {
		//max-height: 100vh;
		//overflow-y: scroll;
		//.hideScrollbar();
		#header-info { display: none; }
		nav>ul { display: none; }
	}
}

@media (min-width:769px) {
	#header {
		#mobile-sms { display:none !important; }
	}
}
@media (max-width:768px) {
	#header {
		display:grid;
		align-items:center;
		justify-items:center;
// 		grid-template-columns:auto 1fr auto;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap:25px;
		padding:20px;
		.max({
			grid-gap:15px;
			padding:10px;
		}, 420);
		> div {
			padding:0;
		}
		#logo {
			img {
				height: 70px;
				width:auto;
			}
		}

		#mobile-sms {
			.vertAlign;
			border:.15em solid @dark-green;
			border-radius:.75em;
			.font(Montserrat, 500, 16px);
			.max({ font-size:12px; }, 420);
			padding:.75em 1.5em;
			gap:.5em;
			text-transform:uppercase;
			text-align:center;
			svg {
				fill:currentcolor;
				height:1.5em;
				width:auto;
			}
			color:@dark-green;
			background-color:transparent;
			.hover();
			&:hover {
				color:#fff;
				background-color:@dark-green;
			}
		}

		nav#header-menu {
			background-color:transparent;
			figure.navbar-toggle {
				position:relative;
				background-color:none;
				font-size:0 !important;
				color:transparent;
				padding:8px 10px;
				width:60px;
				span {
			        color: #8aa791;
			        display: block;
        			font-size: 12px;
	    		    position: absolute;
			        bottom: 100%;
					font-weight: 700;
				}
				&:before, &:after {
					content:' ';
					display:block;
					position:absolute;
					left:0;
					right:0;
					margin:auto;
					background-color:#8aa791;
					width:40px;
					height:4px;
					grid-column:1;
					grid-row:1;
					.transition();
					transform-origin:center;
				}
				&:before {
					top:10px;
				}
				&:after {
					bottom:10px;
				}
			}
			input.navbar-toggle:checked ~ figure.navbar-toggle {
				&:before {
					.rotate(-45deg);
					top:18px;
				}
				&:after {
					.rotate(45deg);
					bottom:18px;
				}
			}
			ul.nav {
				position:absolute;
				padding:25px;
				width:100vw;
				height:100vh;
				top:100%;
				left:0;
				background-color:fade(@dark-green, 95);
				.blur(20px);
			}
		}
	}
}

#logo {
	overflow:hidden;
}
#header-info {
	display:grid;
	grid-gap:25px;
	grid-auto-flow:column;
	a {
		color:#909091;
		.font(~"Myriad Pro, Montserrat", 400, 20px);
		#header.smaller & { font-size:16px; }
		padding:.25em .5em;
		text-transform:uppercase;
		.vertAlign;
		.hover();
		.transition(font-size);
		svg {
			fill:none;
			margin-right:.75em;
			stroke:currentcolor;
			stroke-width:2px;
			overflow:visible;
		}
		address {
			text-transform:none;
		}
	}
	.click-to-text svg { stroke-width: 0; }
}

@media (min-width:1101px) {
	#header-address .directions { display:none; }
}
@media (max-width:1100px) and (min-width:769px) {
	#header-info {
		display:grid;
		grid-template-columns:1fr 1fr;
		.click-to-text { grid-column: 1 / -1; }
	}
	#header-phone .text { display:none; }
	#header-address address { display:none; }
}

.mobile-header-phone{color: rgb(26, 86, 50);}
@media (min-width:769px){
	.mobile-header-phone{
		display:none;
	}
}

.green-button {
	background-color:@dark-green;
	color:#fff;
	display:inline-block;
	border:1px solid @dark-green !important;
	border-radius:.5em !important;
	padding:.4em 1.25em .35em;
	text-align:center;
	text-transform:uppercase;
	.hover();
	&:hover {
		background-color:fade(@dark-green, 0);
		color:@dark-green;
	}
}

.npoo,
.npoo-contact {
	background-color:#E8EFE9;
	padding:25px;
	max-width:450px;
	h4 {
		color:@orange;
		.font(Montserrat, 300, 24px);
		text-align:center;
		text-transform:uppercase;
	}
	p {
		color:#7E8080;
		.font(Montserrat, 400, 16px, 1.25);
		text-align:center;
		margin-bottom:20px;
	}
}
.npoo {
	text-align:center;
	h4 { margin-bottom:.5em; }
}

.npoo-contact {
	h4 { margin-bottom:.75em; }	
}
form.wpcf7-form {
	div { text-align:center; }
	input:not([type="submit"]), textarea {
		border:1px solid @dark-green;
		border-radius:.75em;
		color:#7E8080;
		display:block;
		.font(Montserrat, 400, 14px);
		margin-bottom:15px;
		padding:1em;
		width:100%;
		&:focus { outline:none; }
	}
	input:not([type="submit"]) { border-radius:.75em; }
	textarea {
		border-radius:1.25em;
		resize:none;
		height:7em;
	}
}
// @media (min-width:769){
// 	.mobile-header-phone{
// 		display:none;
// 	}
// }
#above-footer {
	background-image:url('/wp-content/uploads/2021/05/footer.jpg');
	> div {
		display:grid;
		grid-template-columns:1fr 1px 1fr;
		grid-gap:25px;
		.max({
			display: block;
		});
	}
	hr {
		background-color:#fff;
		margin:0;
		width:100%;
		height:100%;
	}
	#contact-us,
	#review-us {
		display:grid;
		grid-template-rows:auto 1fr auto;
		.max-width(540px);
		grid-gap:25px;
		padding:50px 25px;
		p {
			color:#fff;
			text-align-last:center;
			margin-bottom:20px;
		}
		form {
			.max-width(420px);	
			input[type="submit"] {
				background-color:#fff;
				border:1px solid #fff !important;
				color:@dark-green;
				&:hover {
					background-color:fade(#fff, 0);
					color:#fff;
				}
			}
		}
	}
	h5 {
		color:#fff;
		.font(Montserrat, 300, 40px);
		letter-spacing:.05em;
		margin-bottom:0;
		text-align:center;
		text-transform:uppercase;
	}
}

#reviews,
#social-media {
	.vertAlign;
	gap:20px;
	a {
		display:block;
		line-height:0;
		color:#fff;
		&:hover { color:@dark-green; }
		svg {
			fill:currentcolor;
			height:40px;
			width:auto;
		}
	}
}
#social-media {
	background-color:@green;
	padding:25px 25px 0;
}

#footer {
	padding:25px 25px 10px;
	background-color:@green;
	position:relative;
	text-align-last: center;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		background-image:url('/wp-content/uploads/2021/05/footer-icon.svg');
		background-position:center;
		background-repeat:no-repeat;
		background-size:contain;
		width:1120px;
		height:275px;
		bottom:15px;
		left:50%;
		.translateX(-50%);
		pointer-events:none;
	}
	> * {
		.max-width(1080px);
		&:not(:last-child) {
			margin-bottom:25px;
		}
	}
	.geo-served {
		a {.inherit();}
	}
	ul.footer-menu {
		li { display:inline-block; }
		> li {
			display:block;
			> a {
				text-decoration:underline;
			}
		}
		ul {
			display:inline;
			li {
// 				&:not(:last-child):after {
// 					content:' |';
// 				}
			}
		}
	}
}
nav#footer-menu ul#menu-footer-menu{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 25px;
}
.footer-column-head a{
	display:block;
}
#footer ul.footer-menu li{
	display:block;
}
@media (max-width: 650px){
	#footer-menu ul#menu-footer-menu {
		grid-template-columns: 1fr;
	}
}

#mobile-footer {
	@media (min-width:769px) { display:none !important; }
	position:fixed;
	left:0;
	bottom:0;
	z-index:9999;
	width:100%;
	margin-top:-35px;
	
	display:grid;
	input, label {
		grid-row:1;
		align-self:end;
		justify-self:end;
		grid-column:1;
		width:150px;
		height:35px;
		.vertAlign;
		margin-right:25px;
		text-align:center;
	}
	input {
		&:focus { outline:none; }
	}
	input:not(:checked) {
		~ label:before { .rotate(0);}
		~ div { max-height:0;}
	}
	input:checked {
		~ label:before { .rotate(180deg);}
		~ div { max-height:78px;}
		
		@media (max-width:420px) { 
			~ div 
			{
				max-height:234px; 
			} 
		}
	}
	> div {
		grid-column:1;
		display:grid;
		grid-gap:2px;
		grid-template-columns:repeat(4, 1fr);
		//@media (max-width:420px) { grid-template-columns:repeat(1, 1fr); }
		background-color:#909091;
		padding-top:2px;
		overflow:hidden;
		.transition();
	}
	label {
		color:#909091;
		background-color:#fff;
		.vertAlign;
		gap:.5em;
		.font(Montserrat, 500, 14px);
		padding:.5em 1em .5em .5em;
		border:2px solid #909091;
		border-bottom:0;
		border-top-left-radius:5px;
		border-top-right-radius:5px;
		pointer-events:none;
		position:relative;
		&:before {
			content:' ';
			display:block;
			width:2em;
			height:1em;
			.transition();
			background-color:currentcolor;
			.clip("50% 0, 100% 100%, 90% 100%, 50% 20%, 10% 100%, 0 100%");
		}
	}
	a {
		display:block;
		background-color:@green;
		color:#fff;
		padding:8px;
		text-align:center;
		text-transform:uppercase;
		.font(Montserrat, 400, 14px, 1.25);
		span {
			.vertAlign;
			height:2.5em;
		}
		svg {
			height:20px;
			width:auto;
			margin:5px auto 0;
			display:block;
			fill:#fff;
		}
	}
}

#sidebar {
	.widget_text {
		padding-top:25px;
		h4 {
			line-height:1;
		}
		a { .inherit(); }
	}
}

.footerInfo {
	text-align: center;
	font-size: 24px;
	color: #fff;
	address {
		margin: 25px 0;
	}
	a {
		color: #fff;
		&:hover {
			color: #909091;
		}
	}
}

@media all and (max-width: 768px) {
	.twentytwenty-container {
		max-width: 90vw !important;
	}
}

@media (min-width:769px) {
	#header {
		ul.nav {
			li.menu-item-has-children {
				> a { pointer-events:none; }
			}
		}
	}
}

.click-to-text #Layer_1-2 > path:first-child { display:none !important; }

@media all and (max-width: 768px) {
    #header-menu a {
        padding: 0.2em 1em;
    }
    .nav > li {
        font-size: 12px;
    }
    #header .sub-menu > li {
        font-size: 12px;
    }
}