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

@gold: #D19F5D;
@navy: #134C56;
@teal: #AFDFE4;

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/fonts/montserrat/Montserrat-ExtraLight.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/wp-content/fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/wp-content/fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/wp-content/fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

#header {
	position:sticky;
	top:0;
	z-index:99999;
	background-color:fade(#fff, 80);
	.blur(10px);
	> div {
		.vertAlign(@justifyContent:space-around);
		> * {
			padding:20px;
		}
		#logo { order:2; }
		.ctt { order:1; }
		.phone { order:3; }
	}
	#logo {
		line-height:0;
		.transition();
		a { display:block; }

		img {
			max-height: 145px;
			.transition();
		}
	}
	&.smaller #logo {
		padding: 5px;
	}
	.header-info {
		display:grid;
		grid-gap:.25em .75em;
		/*grid-template-columns:auto 1fr;*/
		grid-template-rows:auto auto;
		align-items:center;
		justify-items:center;
		color:#231F20;
		.font(Poppins, 400, 18px);
		text-transform:uppercase;
		svg {
			line-height:0;
			fill:@gold;
			grid-column:1;
			grid-row:1 / span 2;
			height:40px;
			width:40px;
		}
		b {
			color:@navy;
		}
	}
	@media (min-width:769px) {
		&.smaller {
			#logo {
				img {
					max-height: 75px;
				}
			}
			
			.home & ~ .hero {
				margin-top: 30px;
			}
		}
	}
	
	.search-field {
		display: block;
		line-height: 35px;
	}
	
	@media (max-width:768px) {
		&.smaller {
			#logo img {
				max-height: 50px;
			}
		}
		.header-info { display: none; }
		.nav {
			max-height: calc(100vh - 240px);
			overflow-y: scroll;
			padding: 0 20px;
		}
	}
}

@media (min-width:769px) {
	nav {
		line-height:0;
		text-align:center;
	}
	ul.nav {
		display: inline-grid;
		grid-gap:5px;
		grid-auto-flow: column;
		li {
			position:relative;
			a {
				display:block;
				line-height:1.5;
				padding:.5em 1em;
				@media (max-width:1200px) {
					padding: .5em;
				}
			}
		}
		.sub-menu {
			position:absolute;
			left:0;
			top:100%;
			display:grid;
			white-space:pre;
			.clip("0 0, 100% 0, 100% 0, 0 0");
			opacity:0;
			.transition(opacity);
			.transition(clip-path);
		}
		li:hover > .sub-menu {
			.clip("0 0, 500% 0, 500% 300%, 0% 300%");
			opacity:1;
			box-shadow: 3px 3px 15px rgba(0,0,0,0.2);
		}
	}
}
#header-menu .menu-item-has-children figure { color: #fff; }

#responsiveHeader {
	@media (min-width:769px) {
		display: none;
	}
	@media (max-width:768px) {
		position: fixed;
		bottom: 0;
		z-index: 9999;
		
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 5px;
		width: 100%;
		
		a {
			background-color: @navy;
			color: #fff;
			text-align: center;
		}
	}
}

#before-footer {
	background-image:url('/wp-content/uploads/2021/03/footer.jpg');
	border-top:9px solid #fff;
	border-bottom:9px solid #fff;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-gap:9px;

	> * {
		outline: 9px solid #fff;
	}

	.footer-bar {
		background-color:@teal;
		color:@navy;
		.font(Montserrat, 500, 18px);
		padding:.5em;
		.vertAlign;
		svg {
			fill:currentcolor;
			margin-right:.75em;
			height:2em;
			width:auto;
		}
		&:nth-child(even) {
			background-color:@navy;
			color:#fff;
		}
	}
	#footer-info {
		background-color:fade(@navy, 70);
		padding:50px;
		.vertAlign;
		flex-direction:column;
		a, address {
			color:#fff;
			.font(Montserrat, 400, 18px, 1.25);
			text-align:center;
		}
		a {
			&:not(:last-child) {
				margin-bottom:50px;
			}
		}
		svg {
			fill:@teal;
			display:block;
			margin:0 auto 10px;
		}
	}
	#footer-logo {
		background-color: rgba(0,0,0,.3);
		padding:50px;
		text-align:center;
		svg {
			fill:#fff;
		}
	}
	#contact-us {
		background-color:fade(@navy, 70);
		padding:50px;

		h5 {
			color:#fff;
			.font(Poppins, 300, 36px);
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
		}
	}
	
	@media (max-width:1200px) and (min-width:769px) {
		grid-template-columns: 1fr 1fr;
	}
	@media (max-width:768px) {
		grid-template-columns: 1fr;
		padding: 0 10px;
		
		#footer-info, #contact-us {
			padding: 20px;
		}
	}
}

.wpcf7 .better-input {
	.wpcf7-form-control-wrap {
		position: relative;
		background-color:fade(#fff, 80);
		margin-bottom:10px;
		display:block;
		margin-top: 1.75em;
		color:#414042;
		.font(Montserrat, 400, 16px);
	}
	.betterInput {
		.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:#fff;
			border:0;
			padding: 1px 2px;
			resize:none;
		}
		label {
			.transition();
		}

		input, select, textarea {
			color:@navy;
			font-size:inherit;
			font-weight:inherit;
			font-family:inherit;
			padding:.3em;
			width:100%;
			&:focus {
				outline:none;
			}
			
			.entry-content & {
				background-color: #ececec;
			}
			#sidebar & {
				background-color: #fff;
			}
		}
		textarea {
			height:150px;
		}
		select {
			display:block;
			width:100%;
			margin-bottom:5px;
		}

		label {
			position: absolute;
			width:100%;
			top:0;
			transform: translateY(.4em) translateX(.25em);
			left:0;
			pointer-events: none;
			color:@navy;
			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
			display: none;
			
			.entry-content &, #sidebar & {
				color: #000;
			}
		}
		*:not(:placeholder-shown) + label,
		*:not(:placeholder-shown) + label .req {
			color:#ddd; // Inputted
			display: none;
		}
		*:focus + label,
		*:not(:placeholder-shown) + label {
			transform: translateY(-1.3em);
			font-size: .8em;
			display: none;
		}
	}
	input[type="submit"] {
		border:none;
		display:block;
		margin:25px 0 0 auto;
		height: 2em;
		width: 10em;
		.font(Montserrat, 400, 20px);
		letter-spacing:.1em;
		text-transform:uppercase;
		background-color:fade(#F47621, 80);
		color:#fff;
		.transition(background-color, .3s, linear);
		.transition(color, .3s, linear);
		&:hover {
			background-color:fade(#fff, 80);
			color:#F47621;
		}
	}
}

#requestAppointment {
	a {
		display: block;
		padding: 10px;
		background-color: @gold;
		color: #fff;
		font-size: 20px;
		text-transform: uppercase;
		font-weight: 700;
		text-align: center;
	}
}

.search-form {
	display: grid;
    grid-template-columns: 1fr auto;
	
	.search-field {
		width: 100%;
		border: 0;
		padding-left: 6px;
	}
	
	.search-submit {
		border: 0;
		padding-left: 10px;
		padding-right: 10px;
	}
}

#social-media {
	background-color:fade(#C18951, 20);
	text-align:center;

	a {
		display:inline-block;
		padding:10px;
		vertical-align:top;
		line-height: 1;
		margin:8px;
	}
	svg {
		height:32px;
		width:auto;
		path, ellipse {
			fill:@navy;
			fill-opacity:.8;
			transition:fill-opacity .3s;
			-webkit-transition:fill-opacity .3s;
		}
	}
	a:hover svg {
		path, ellipse {
			fill-opacity:1;
		}
	}

	@media (max-width:768px) {
		a { margin: 0; }
	}
}

#footer {
	background-color:fade(#C18951, 20);
	
	ul.footer-menu {
		.max-width(960px);
		margin-bottom:25px;
		display:grid;
		grid-gap:25px;
		padding: 0 20px;
		@media (min-width:900px) {
			grid-auto-flow:column;
			align-items: start;
			justify-items: center;
		}
		li {
			line-height:1.25;
		}
		> li > a {
			display:block;
			font-size:22px;
			padding:0 5px;
			border-bottom:1px solid @navy;
			margin-bottom:5px;
			text-align:left;
		}
		> li:nth-child(1) {
			ul {
				columns:200px 2;
			}
		}
	}
	.copyright {
		text-align:center;
	}
}

#header-links {
	@media (min-width:769px) {
		position:absolute;
		right:0;
		z-index:999;
		padding-top:50px;
		a {
			display:block;
			position:relative;
			padding-left:6.5em;
			padding-right:1em;
			line-height:0;
			&:not(:last-child) {
				margin-bottom:100px;
			}
			color:#fff;
			.font(Poppins, 700, 24px);
			text-align:left;
			text-transform:uppercase;
		}
		svg {
			overflow:visible;
			position:absolute;
			z-index:-1;
			left:0;
			top:50%;
			.translateY(-50%);
			height:80px;
			width:auto;
			max-width:unset;
		}
	}
	@media (max-width: 768px) { display: none; }
}

#bookOnlineWidget {
	position: relative;
	margin-bottom: 40px;
	padding: 50px;
	border-bottom: 5px solid #23aeae;
	
	&::before, &::after {
		content: '';
		position: absolute;
		top: 0;
		z-index: -1;
		height: 100.5%;
		width: 50%;
		background-size: cover;
		background-position: center center;
	}
	&::before {
		left: 0;
		background-image: url('/wp-content/uploads/2020/06/widget-left.jpg');
	}
	&::after {
		right: 0;
		background-image: url('/wp-content/uploads/2020/06/widget-right.jpg');
	}
	
	@media (max-width:768px) {
		padding: 30vw 20px;
		
		&::before, &::after {
			left: 0;
			height: 50%;
			width: 100%;
		}
		&::before { top: 0; }
		&::after { top: 50%; }
	}
	
	.circle {
		position: relative;
		z-index: 1;
		padding: 5em 1em;
		width: fit-content;
		margin: auto;
		
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: -1;
			width: 110%;
			height: 0;
			padding-bottom: 110%;
			background-color: rgba(35, 174, 174, 0.8);
			border-radius: 50%;
		}
		
		h4, p {
			color: #fff;
			text-align: center;
		}
		
		h4 {
			text-transform: uppercase;
			font-weight: 700;
			font-size: 30px;
		}

		.button {
			display: block;
			width: 200px;
			max-width: 100%;
			margin: auto;
			color: #000;
			background-color: #fff;
			text-align: center;
			font-size: 18px;
			border-radius: 1em;
		}
	}
}

#npo {
	background-color: @gold;
	margin-bottom: 20px;
	padding: 10px;
	font-size: 16px;
	color:#fff;
	text-align:center;
// 	.home & {
// 		width:270px;
// 	}
	h4 {
		margin-top: 0;
		color: #fff;
		font-size: 30px;
		line-height: 1.2em;
		text-align:center;
		span {
			font-weight:100;
		}
	}
	p {
		text-align:center;
	}
	a, b, strong {
		color:inherit;
	}
}

#testimonial {
	display: grid;
	grid-auto-flow:column;
	grid-gap:25px;
	overflow-x: scroll;
	overflow-y: hidden;
	&::-webkit-scrollbar {
		display: none;
	}
	
	.slick-track {
		display: flex;
		gap: 20px;
	}
	
	.slick-arrow {
		display: flex;
		align-items: center;
		
		&::before {
			font-family: 'FontAwesome';
			font-size: 45px;
			color: #AEDEE2;
			cursor: pointer;
		}
		
		&.prev::before {
			content: '\f053';
		}
		&.next::before {
			content: '\f054';
		}
	}
	
	.testimonial {
		display:grid;
		grid-template-rows:auto 1fr;
		grid-gap:10px;
		width:570px;
		max-width: calc(90vw - 50px);
		
		#sidebar & { width: 250px; }
	}
	.svg {
		position: absolute;
		width: 0;
		height: 0;
	}
	.testimonial > div {
		display:block;
		width:100%;
		aspect-ratio:570/340;
		background-size:cover;
		background-position:center;
		-webkit-clip-path: url(#my-clip-path);
		clip-path: url(#my-clip-path);
		position:relative;
		img {
			position:absolute;
			top:40%;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			max-width:16%;
			height:auto;
			cursor:pointer;
		}
	}
	p {
		color:#666666;
		.font(Montserrat, 400, 18px, 1.375);
		text-align:center;
		display:grid;
		grid-gap:.5em;
		grid-template-rows:1fr auto;
		b {
			color:@navy;
			.font(Poppins, 400, 1.25em);
			display:block;
			text-align:center;
			text-transform:uppercase;
		}
	}
	
	@media (max-width: 768px) {
		
	}
}

.testimonial  {
	.su-lightbox {
		display:block;
		height:0;
		width:100%;
		padding-bottom:52.25%;
		position:relative;
		background-size:cover;
		border:5px solid #AEDEE2;
		cursor: pointer;

		svg {
			position:absolute;
			width:50px;
			right:20px;
			top:0;
			bottom:0;
			margin:auto;

			path {
				fill:rgba(255,255,255,.5);
				-webkit-transition: fill .3s;
				transition: fill .3s;
			}
		}

		&:hover {
			svg {
				path {
					fill:rgba(255,255,255,.9);
				}
			}
		}
	}

	p {
		font-style:italic;
		font-size:24px;
		line-height:1;
		padding:20px;
		margin-bottom:0;
	}
}
.Tina .su-lightbox {
	background-image:url('/wp-content/uploads/2013/10/Tina.png');
}
.Terri .su-lightbox {
	background-image:url('/wp-content/uploads/2013/10/Terri.png');
}
.Curt .su-lightbox {
	background-image:url('/wp-content/uploads/2013/10/Curt.png');
}
.Ruth .su-lightbox {
	background-image:url('/wp-content/uploads/2013/10/Ruth.png');
}
.Rick .su-lightbox {
	background-image:url('/wp-content/uploads/2018/12/Rick.jpg');
}
.Benjamin .su-lightbox {
	background-image:url('/wp-content/uploads/2018/12/benjamin.jpg');
}
.Regina .su-lightbox {
	background-image:url('/wp-content/uploads/2018/12/regina.jpg');
}
.Kay .su-lightbox {
	background-image:url('/wp-content/uploads/2018/12/kay.jpg');
}


.mfp-bg { z-index: 104200 !important; }
.mfp-wrap { z-index: 104300 !important; }
.mfp-title { display: none; }

.geo-served {
	padding: 30px;
	text-align: center;
}