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

body {
	font-size: 18px;
}

.button {
	background-color:@purple;
	border:1px solid @purple;
	color:#fff;
	display:block;
	.font(Source Sans Pro, 700, 24px);
	.margin-sides(auto);
	padding:.75em 1em;
	text-align:center;
	text-transform:uppercase;
	width:fit-content;
	.hover();
	&:hover {
		background-color:#fff;
		color:@purple;
	}
}

#header {
	position:fixed;
	top:0;
	width:100%;
}

h1 {
	letter-spacing:.1em;
}
h2 {
	.max({ font-size:24px; });
}

#testimonials {
	background-color:#E5E1E6;
	> div {	
		.padding-ends(3vw);
		max-width:1600px;
		overflow:visible;
	}
	.grid {
		align-items:center;
		justify-items:center;
		> div:nth-child(1) {	
			h4 {
				color:#4b4b4b;
				display:block;
				.font(Lato, 800, 36px);
				letter-spacing:.1em;
				margin-bottom:50px;
				.max({ font-size:24px; });
				text-align:center;
				text-transform:uppercase;
			}
		}
	}

	#reviews {
		display:grid;
		grid-gap:25px;
		.max({ grid-gap:15px; });
		grid-template-columns:auto 1fr auto;
		.review {
			p {
				color:#4B4B4B;
				.font(Source Sans Pro, 400, 20px, 1.375);
				strong {
					.inherit();
					.bold();
				}
			}
			b {
				color:#4B4B4B;
				display:block;
				.font(Source Sans Pro, 700, 20px);
				text-align:right;
				text-transform:uppercase;
				&:before { content:'-'; }
			}
		}
	}
	.slick-arrow {
		align-self:center;
		color:@purple;
		background-color:currentcolor;
		font-size:55px;
		.max({ font-size:(55px * .75); });
		height:1em;
		width:.5em;
		display:block;
		overflow:hidden;
		&.slick-prev { .clip(@arrow_left); }
		&.slick-next { .clip(@arrow_right); }
	}
	.slick-dots {
		grid-column:1 / -1;
		.vertAlign;
		gap:10px;
		li {
			border:2px solid #4B4B4B;
			border-radius:50%;
			width:20px;
			height:20px;
			display:block;
			overflow:hidden;
			cursor:pointer;
			* { opacity:0; }

			background-color:#E6E6E6;
			.transition();
			&:hover {
				background-color:#4B4B4B;
			}
			&.slick-active {
				background-color:@purple-light;
			}
		}
	}

	#google-reviews {
		background-color:#fff;
		box-shadow:0 3px 12px fade(#000, 25);
		padding:50px;
		.max({ padding:25px; });
		h4 {
			color:#4b4b4b;
			.font(Merriweather, 700, 24px);
			.max({ font-size:18px; });
			letter-spacing:.1em;
			margin-bottom:1em;
			text-align:center;
			b {
				color:@purple-light;
				display:block;
				.font(Source Sans Pro, 700, .9em);
			}
		}
		.stars {
			.vertAlign;
			font-size:60px;
			.max({ font-size:36px; });
			gap:.1em;
			margin-bottom:50px;
		}
		.star {
			width:1em;
			height:1em;
			display:block;
			background-color:@purple-light;
			.clip(@star);
		}
	}
}

#before-footer {
	background-image:url('/wp-content/uploads/2021/12/footer.jpg');
	padding-top:(1920vw / 125vw);
	&:before {
		content:' ';
		display:block;
		position:absolute;
		left:-1px;
		top:-1px;
		width:~"calc(100vw - -2px)";
		height:125px;
		background-image:url('/wp-content/uploads/2021/12/before-footer.svg');
		background-size:100% auto;
		background-position:top center;
		background-repeat:no-repeat;
	}
	> div {	
		.padding-ends(3vw);
		max-width:1600px;
		overflow:visible;
		> .grid {
			align-items:center;
		}
	}

	h5 {
		color:#fff;
		display:block;
		.font(Lato, 800, 24px);
		margin-bottom:20px;
		letter-spacing:.1em;
		.max({ font-size:18px; });
		text-transform:uppercase;
	}
	#contact-us {
		h5 {
			font-size:48px;
		}
	}

	#connect {
		#social-media {
			display:inline-grid;
			grid-auto-flow:column;
			grid-gap:1em;
			font-size:42px;
			a {
				display:block;
				color:@purple-light;
				svg {
					fill:currentcolor;
					display:block;
					height:1em;
					width:auto;
				}
			}
		}
	}

	#footer-info {
		h5 {
			border-bottom:none;
			margin-bottom:25px;
			padding:0;
			text-align:center;
		}
		.footer-info {
			color:#fff;
			.font(Source Sans Pro, 700, 24px);
			margin-top:50px;
			text-align:center;
			svg {
				fill:@purple-light;
				display:block;
				height:2.25em;
				width:auto;
				margin:0 auto .5em;
			}
		}
	}

	/**** Full BORDER Color ****/
	.wpcf7 .better-input {
		.wpcf7-form-control-wrap {
			position: relative;
			background-color:fade(#fff, 0);
			border:none;
			border-bottom:1px solid #fff;
			margin-bottom:0;
			display:block;
			margin-top: 1.75em;
			color:#fff;
			.font(Source Sans Pro, 400, 18px);
		}
		.betterInput {
			.inherit();
			.font();

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

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

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

			label {
				position: absolute;
				width:100%;
				top:0;
				transform: translateY(.6em) translateX(.6em);
				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
			}
			*:focus + label,
			*:not(:placeholder-shown) + label {
				transform: translateY(-1.3em);
				font-size: 18px;
			}
		}
		input[type="submit"] {
			margin-right:0;
		}
	}

}

#footer {
	background-color:#292929;
	padding:50px 25px 10px;

	> * {
		.max-width(1280px);
		&:not(:last-child) {
			margin-bottom:25px;
		}
	}
	.geo-served {
		line-height:1.5;
	}

	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;
			line-height:1;
			.vertAlign(flex-end, flex-start);
			height:2.25em;
			margin-bottom:.25em;
		}
		> li:nth-child(2) {
			ul {
				columns:200px 2;
			}
		}
	}
}

#logos {
	.margin-ends(5vw);
	> div {
		max-width:1280px;
		@media (min-width:769px) {
			display:flex;
			gap:50px 5px;
			flex-wrap:wrap;
			justify-content:space-around;
		}
		@media (max-width:768px) {
			.vertAlign();
			gap:25px;
			flex-wrap:wrap;
		}
	}
	img {
		object-fit:contain;
		height:100px;
		width:auto;
		max-width:250px;
	}
}

.npoo {
	background-color:#fff;
	box-shadow:0 1px 12px fade(#000, 50);
	.max-width(420px);
	font-size:20px;
	* { font-size:1em; }
	
	> div {
		padding:25px 50px;
	}

	h4 {
		background-color:@purple-light;
		color:#fff;
		.font(Source Sans Pro, 400);
		letter-spacing:.2em;
		padding:20px 25px;
		text-align:center;
		b {
			color:#fff;
			display:block;
			.font(Merriweather, 700, 1.5em);
			margin-top:.1em;
			letter-spacing:.1em;
		}
	}
	p {
		color:#4B4B4B;
		.font(Source Sans Pro, 400, .9em);
		text-align:center;
		&:not(:last-child) {
			margin-bottom:5px;
		}
		b {
			color:@purple;
			font-size:1.5em;
		}
		span {
			color:#919191;
			font-size:1.25em;
			font-weight:700;
		}
	}
	.wpcf7 .better-input {
		.wpcf7-form-control-wrap {
			font-size:18px;
		}
		input[type="submit"] {
			font-size:.9em;
		}
	}
	.wpcf7 + p {
		font-weight:700;
		a {
			color:#8D8D8D;
		}
	}
}

/**** Full BORDER Color ****/
.wpcf7 .better-input {
	.wpcf7-form-control-wrap {
		position: relative;
		background-color:fade(#fff, 0);
		border:none;
		border-bottom:1px solid #707070;
		margin-bottom:0;
		display:block;
		margin-top: 1.75em;
		color:#707070;
		.font(Source Sans Pro, 400, 16px);
	}
	.betterInput {
		.inherit();
		.font();

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

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

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

		label {
			position: absolute;
			width:100%;
			top:0;
			transform: translateY(.3em) translateX(.3em);
			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:#707070; // Inputting
		}
		*:not(:placeholder-shown) + label,
		*:not(:placeholder-shown) + label .req {
			color:#ddd; // Inputted
		}
		*:focus + label,
		*:not(:placeholder-shown) + label {
			transform: translateY(-1.3em);
			font-size: 18px;
		}
	}
	input[type="submit"] {
		background-color:@purple;
		border:1px solid @purple;
		color:#fff;
		display:block;
		.font(Source Sans Pro, 700, 24px);
		margin-top:25px;
		.margin-sides(auto);
		padding:.75em 1em;
		text-align:center;
		text-transform:uppercase;
		width:fit-content;
		.hover();
		&:hover {
			background-color:#fff;
			color:@purple;
		}
	}
}
.wpcf7 .otherInput {
	margin-top:1.75em;
	.wpcf7-form-control-wrap {
		border-bottom:none;
		margin-top:0;
	}
}

.dd-post-image {
	@media (min-width:769px) {
		float:left;
		margin-right:25px;
		margin-bottom:15px;
		max-width:50%;
		height:auto;
	}
	@media (max-width:768px) {
		margin-bottom:20px;
		width:100%;
		height:auto;
	}
}

/*** Search ***/
.searchLi {
	.sub-menu {
		right:0;
		left:unset;
	}
	.search-form {
		display:flex;
	}
	input {
		padding:.25em;
		&:focus { outline:none; }
	}
}
/*** End Search ***/

body:not(.home) main#content {
	@media (max-width: 768) {
		margin-top: var(--mobile-header-height);
	}
	.alignright, .alignleft {
		padding:0;
	}
	.entry-header {
		.max({ margin-top:-25px; });
		line-height:1;
		margin-bottom:0;
	}
	h1.entry-title {
		.max({ font-size:36px; });
		line-height:1.1;
		padding-bottom:0;
	}
	p, h2 {
		text-align:left !important;
	}
	.entry-content p:empty { display:none !important; }
}

#text-14 {
	.grid {
		grid-template-columns:1fr 1fr;
		align-items:center;
		justify-items:center;
	}
}
#mobile-footer{
	z-index: 1 !important;
}
ul#menu-header {
    z-index: 9999999999 !important;
}

.wpcf7 .better-input input[type="submit"] {
	margin-bottom: 25px;
}

/* npoo form sidebar homepage*/
#wpcf7-f1413-o1 input {
	width:100%;
	border: 1px solid;
}

#wpcf7-f1413-o1 textarea {
	width:100%;
}

#wpcf7-f1413-p23-o2 input {
	width:100%;
	border: 1px solid;
}

#wpcf7-f1413-p23-o2 textarea {
	width:100%;
}

/*contact form in footer*/
#wpcf7-f1413-o3 p {
	color:white;
}

#wpcf7-f1413-o2 p{
	color:white;
}

@media (max-width: 768px) {
   #wpcf7-f1413-o1 input {
	   width:90%;
	   border: 1px solid;	
	}
}	



/* request an appointment form*/

.wpcf7 textarea,
.wpcf7 input {
border: 1px solid black;
width: 100%;
font-size:20px;	
} 

form.wpcf7-form label {
    color: black;
}

/* mobile.less rules */

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

@media (max-width: 768px) {
	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;
			}
		}
	}
}