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

@blue: #1B4F72;
@brown: #826040;

@pacific-ave: @brown;
@foothills: @blue;

body {
	@media (min-width:1280px) {	padding-top:230px; }
	@media (max-width:1279px) { padding-top:280px; }
	@media (max-width:768px) { padding-top:192px; padding-bottom:88px; }
}

#header {
	background-color:#fff;
	padding:0 25px;
	position:fixed;
	z-index:1000;
	width:100%;
	top:0;
	left:0;
	box-shadow:0px 0px 8px fade(#393939, 50);
	> div {
		.max-width(1750px);
		display:grid;
		@media (min-width:769px) {
			#logo { grid-area:logo; }
			.click-to-text { grid-area:ctt; }
			#header-phone { grid-area:phone; }
			nav { grid-area:nav; }
			#emergency { grid-area:emergency; }
		}
		@media (min-width:1280px) {
			grid-gap:15px 25px;
			align-items:end;
			justify-items:center;
			grid-template-columns:auto 1fr auto auto auto;
			grid-template-areas:
				"logo . ctt phone phone"
				"logo nav nav nav emergency";
		}
		@media (max-width:1279px) and (min-width:769px) {
			grid-gap:10px;
			align-items:center;
			justify-items:center;
			grid-template-columns:auto 1fr auto;
			grid-template-areas:
				"logo . ctt"
				"logo . phone"
				"nav nav nav";
			#emergency { display:none; }
		}
	}

	#emergency a{
		color:#C42026;
		.font(Poppins, 400, 16px);
		.vertAlign;
		padding:.5em .25em;
		img {
			font-size:1em;
			height:2em;
			width:2em;
			margin-right:1em;
		}
		
	}

	.click-to-text {
		@media(max-width: 1440px){
			font-size: 13px !important;
		}
		.grid-template-one();
		grid-gap:.25em 1em;
		color:#505152;
		.font(Poppins, 300, 18px);
		text-transform:uppercase;
		b {
			.inherit();
			.bold();
			display:block;
		}
		svg {
			fill:@blue;
			width:2.39em;
			height:2.5em;
			align-self:center;
			justify-self:center;
		}
	}
	#header-phone {
		display:grid;
		grid-gap:.25em 1em;
		grid-template-columns:auto repeat(2, 1fr);
		color:#505152;
		.font(Poppins, 300, 22px);
		text-align:center;
		text-transform:uppercase;
		span {
			grid-column:2 / -1;
		}
		a {
			.inherit();
			.font();
		}
		b {
			background-color:@blue;
			.inherit(#fff);
			.font(inherit, 500, @size:.75em);
			display:block;
			padding:.25em 1em;
			margin-bottom:.1em;
		}
		svg {
			fill:@blue;
			width:1.59em;
			height:1.82em;
			align-self:center;
			justify-self:center;
		}
	}

	nav {
		justify-self:end;
	}

	ul.nav {
		.menu-item-has-children>a { padding-right:1em; }
		ul.sub-menu {
			box-shadow:2px 2px 8px fade(#393939, 50);
		}
		> li.home {
			@media (min-width:769px) {
				position:relative;
				overflow: hidden;
				> a {
					opacity:0;
				}
				ul.sub-menu {
					position:absolute;
					top:0;
					left:0;
					width:100%;
					height:100%;
					opacity:1;
					pointer-events:none;
					box-shadow:none;
					li {
						text-align:center;
					}
				}
				svg {
					fill:#505152;
					.transition(fill, .3s, linear);
				}
				&:hover {
					svg {
						fill:@blue;
					}
				}
				&.current-menu-item {
					svg {
						fill:@blue;
					}
				}
			}
			@media (max-width:768px) {
				ul.sub-menu, figure { display:none !important; }
			}
		}
	}
	.searchLi {
		ul { right:0 !important; }
		form {
			.flex;
			flex-direction:row-reverse;
			input {
				padding:3px 5px;
				&:focus { outline:none; }
			}
		}
	}
}
ul.nav li{
	position:relative;
}
#header {
	#logo { padding:15px 0; }
	#logo img { height:200px; }
	.click-to-text { font-size:18px; }
	#header-phone { font-size:22px; }
	ul.nav > li > a, #emergency {
		font-size:16px;
		@media(max-width: 1440px){
			font-size:13px;
		}
	}
	#logo, #logo img, .click-to-text, #header-phone, ul.nav > li > a, #emergency { .transition(); }

	@media (max-width:960px) and (min-width:769px) {
		ul.nav > li > a {
			font-size:15px;
		}
	}

}
#header.smaller {
	#logo { padding:5px 0; }
	#logo img { height:125px; }
	.click-to-text { font-size:14px; }
	#header-phone { font-size:18px; }
	ul.nav > li > a, #emergency { font-size:14px; }
}

@media (max-width:768px) {	
	#header {
		.padding-sides(0);
		> div {
			grid-template-columns: 1fr 120px;
			align-items: center;
			grid-auto-flow:row;
		}
		#logo {
			align-self:center;
			justify-self:center;
			text-align:center;
		}
		ul.nav {
			position:absolute;
			width:100%;
			right:0;
			top:100%;
			background-color:#fff;

			max-height: calc(100vh - 250px);
			overflow-y: scroll;
			.hideScrollbar();
		}
		#header-menu {
			width:100%;
			figure {
				padding:.25em .5em;
				text-align:right;
			}
		}
	}

	#header {
		.click-to-text, #header-phone, #emergency { display:none; }	
		#logo img { height:125px; }
	}
	#header.smaller {
		#logo img { height:75px; }
	}
}
@media (orientation: landscape) {
	body.mobile {
		#header {
			.padding-sides(0);
			> div {
				grid-template-columns: 1fr 120px;
				align-items: center;
				grid-auto-flow:row;
			}
			#logo {
				align-self:center;
				justify-self:center;
				text-align:center;
			}
			ul.nav {
				position:absolute;
				width:100%;
				right:0;
				top:100%;
				background-color:#fff;

				max-height: calc(100vh - 250px);
				overflow-y: scroll;
				.hideScrollbar();
			}
			#header-menu {
				width:100%;
				figure {
					padding:.25em .5em;
					text-align:right;
				}
			}
		}

		#header {
			.click-to-text, #header-phone, #emergency { display:none; }	
			#logo img { height:125px; }
		}
		#header.smaller {
			#logo img { height:75px; }
		}
	}
}
#contact-us {
	.max-width(1800px);
	padding:0 25px;
	margin-bottom:75px;
	h5 {
		color:@blue;
		.font(Poppins, 300, 42px);
		letter-spacing:.1em;
		margin:0;
		text-align:center;
		text-transform:uppercase;
		display:grid;
		grid-template-columns:1fr auto 1fr;
		grid-gap:25px;
		align-items:center;
		justify-items:center;

		&:before, &:after {
			content:' ';
			display:block;
			width:100%;
			height:1px;
			background-color:currentcolor;
		}
	}

	.better-input {
		display:grid;
		grid-gap:10px 25px;
		@media (min-width:640px) {
			grid-template-columns:repeat(2, 1fr);
			grid-template-rows:repeat(4, 1fr);
			grid-auto-flow:column;
			.your-message { grid-row:1 / span 3; }
			textarea { height:100%; }
		}
		.betterSubmit {
			align-self:end;
			justify-self:end;
			max-width: 240px;
			width: 100%;
		}
	}

	.wpcf7 {
		.max-width(875px);
	}

	.wpcf7 .better-input {
		.wpcf7-form-control-wrap {
			position: relative;
			background-color:#efeff0;
			border:1px solid #5496bc !important;
			margin-bottom:0;
			display:block;
			margin-top: 1.75em;
			color:#414042;
			.font(Poppins, 400, 16px);
		}
		.betterInput {
			.inherit();
			.font();

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

			* {
				color:inherit;
				border: 0;
				padding: 1px 2px;
				//background: transparent;
				resize:none;
			}
			label {
				.transition();
			}
			input[type="text"] {
				border: 0;
			}
			input, select, textarea {
				color:inherit;
				font-size:inherit;
				font-weight:inherit;
				font-family:inherit;
				padding:.3em;
				width:100%;
				&:focus {
					outline:none;
				}
			}
			select {
				display:block;
				width:100%;
				margin-bottom:0;
			}

			label {
				position: absolute;
				width:100%;
				top:0;
				transform: translateY(.5em) translateX(.25em);
				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:@blue; // Inputting
			}
			*:not(:placeholder-shown) + label,
			*:not(:placeholder-shown) + label .req {
				color:#414042; // Inputted
			}
			*:focus + label,
			*:not(:placeholder-shown) + label {
				transform: translateY(-1.3em);
				font-size: .8em;
			}
		}
		input[type="submit"] {
			max-width:240px;
			width:100%;
			display:block;
			border:none;
			background-color:fade(@brown, 85);
			color:#fff;
			.font(Poppins, 300, 18px);
			padding:.5em;
			letter-spacing:.075em;
			text-align:center;
			text-transform:uppercase;
			.transition(background-color, .3s, linear);
			&:hover {
				background-color:fade(@brown, 100);
			}
			-webkit-clip-path: url(#my-clip-path);
			clip-path: url(#my-clip-path);

		}
	}

}

.svg {
	position: absolute;
	width: 0;
	height: 0;
}

#footer-offices {
	.max-width(1800px);
	padding:0 25px;
	margin-bottom:50px;
	display:grid;
	@media (min-width:960px) {
		grid-gap:0 15px;
		grid-template-columns:repeat(2, 1fr);
		grid-template-rows:repeat(2, auto);
		grid-auto-flow:column;	
	}
	@media (max-width:961px) {
		.Pacific.Ave.office-info {
			margin-bottom:15px;
		}
	}

	h5 {
		color:#fff;
		.font(Poppins, 500, 28px);
		.max({ font-size:22px; });
		letter-spacing:.1em;
		margin:0;
		padding:.6em .5em .5em;
		text-align:center;
		text-transform:none;
		b {
			.inherit();
			.font();
		}
	}
	.office-info {
		padding:25px;
		.vertAlign;
		gap:10px;
		flex-direction:column;
		a {
			color:#505152;
			.font(Poppins, 400, 16px);
			.max({ font-size:14px; });
			text-align:center;
		}
		address {
			white-space:pre-wrap;
		}
		svg {
			width: 45px;
			height: 45px;
		}
	}
	h5.Pacific.Ave {
		background-color:@pacific-ave;
		b {
			color:lighten(@pacific-ave, 25);
		}
	}
	.office-info.Pacific.Ave {
		background-color:lighten(@pacific-ave, 50);
	}
	h5.Foothills {
		background-color:@foothills;
		b {
			color:lighten(@foothills, 25);
		}
	}
	.office-info.Foothills {
		background-color:lighten(@foothills, 50);
	}
}

#above-footer {
	background-image:url('/wp-content/uploads/2021/08/Dental19-1.jpg');
	.hero();
	.max-width(1750px);
	.vertAlign;
	margin-bottom:50px;
	flex-direction:column;
	.clip(~"0% 30px, 30px 30px, 30px 0%, calc(100% - 30px) 0%, calc(100% - 30px) 30px, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 30px calc(100% - 30px), 0% calc(100% - 30px)");
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:~"calc(100% - 60px)";
		height:~"calc(100% - 60px)";
		top:0;
		left:0;
		border:30px solid #fff;
		opacity:.5;
		pointer-events:none;
	}

	h5 {
		color:#fff;
		.font(Poppins, 400, 120px, 0);
		.max({ font-size:64px; });
		margin-bottom:.5em;
		.max({ margin-bottom:.25em; });
		text-align:center;
		text-transform:none;
		small {
			color:#fff;
			display:block;
			.font(Poppins, 400, .25em);
			letter-spacing:.1em;
			text-align:center;
			text-transform:uppercase;
		}
		img {
			width:3em;
			height:auto;
		}
	}

	#social-media {
		display:grid;
		grid-auto-flow:column;
		grid-gap:25px;
		padding-bottom:10px;
		border-bottom:1px solid #fff;
		a {
			color:#fff;
			svg {
				fill:currentcolor;
				height:32px;
				width:auto;
			}
			&:hover {
				color:@blue;
			}
		}
	}
}

#footer {
	.max-width(1750px);
	.vertAlign;
	flex-direction:column;
	padding:0 25px 10px;
	> * {
		&:not(:last-child) {
			margin-bottom:25px;
		}
	}
	ul.footer-menu {
		display:grid;
		grid-gap:25px;
		@media (min-width:640px) {
			grid-template-columns:1fr 2fr 1fr;	
		}
		> li > a {
			font-size:16px;
			font-weight:700;
			border-bottom:1px solid currentcolor;
			display:block;
			width:100%;
			margin-bottom:5px;
		}
		> li:nth-child(2) {
			ul { columns:2 300px; }
		}
		ul.sub-menu {
			padding-left:15px;
		}
	}
}

#header-contact {
	body.home & {
		position:absolute;
		right:0;
		z-index:10;
		.max({ display:none !important; &.footer {display: block !important; position: relative; width: 100%; margin: auto;} });
	}
	background-color:#fff;
	max-width:360px;
	.tabs {
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-template-rows:auto 1fr;
		> label:nth-of-type(1),
		> input:nth-of-type(1) {
			grid-column:1;
			grid-row:1;
			background-color:@blue;
		}
		> .npoo:nth-of-type(1) {
			grid-column:1 / -1;
			grid-row:2;
			background-color:@blue;
		}
		> label:nth-of-type(2),
		> input:nth-of-type(2) {
			grid-column:2;
			grid-row:1;
			background-color:@brown;
		}
		> .npoo:nth-of-type(2) {
			grid-column:1 / -1;
			grid-row:2;
			background-color:@brown;
		}
		label {
			color:#fff;
			.font(Poppins, 400, 16px);
			padding:10px 25px;
			pointer-events:none;
			text-align:center;
		}
		input {
			width:100%;
			height:100%;
			cursor:pointer;
			opacity:0;
			&.checked + .npoo {
				opacity:1;
				pointer-events:auto;
			}
		}
		.npoo {
			opacity:0;
			padding:25px;
			pointer-events:none;
			h5 {
				color:#fff;
				.font(Poppins, 400, 28px);
				.max({ font-size:24px; }, 1280);
				letter-spacing:.15em;
				margin-bottom:10px;
				text-align:center;
				text-transform:uppercase;
				b {
					.inherit();
					.bold();
					display:block;
					letter-spacing:.1em;
				}
			}
			p {
				color:#fff;
				text-align:center;
				.max({ font-size:14px; }, 1280);
			}
		}
	}

	.wpcf7 {
		padding:25px;
	}
	.wpcf7 .better-input {
		.wpcf7-form-control-wrap {
			position: relative;
			background-color:#fff;
			border:1px solid #5496bc;
			margin-bottom:0;
			display:block;
			margin-top: 1.75em;
			color:#414042;
			.font(Poppins, 400, 16px);
		}
		.betterInput {
			.inherit();
			.font();

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

			* {
				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;
				}
			}
			select {
				display:block;
				width:100%;
				margin-bottom:0;
			}

			label {
				position: absolute;
				width:100%;
				top:0;
				transform: translateY(.5em) translateX(.25em);
				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:@blue; // Inputting
			}
			*:not(:placeholder-shown) + label,
			*:not(:placeholder-shown) + label .req {
				color:#414042; // Inputted
			}
			*:focus + label,
			*:not(:placeholder-shown) + label {
				transform: translateY(-1.3em);
				font-size: .8em;
			}
		}
		input[type="submit"] {
			max-width:240px;
			width:100%;
			display:block;
			margin:25px auto 0;
			background-color:fade(@brown, 85);
			color:#fff;
			.font(Poppins, 300, 18px);
			padding:.5em;
			letter-spacing:.075em;
			text-align:center;
			text-transform:uppercase;
			.transition(background-color, .3s, linear);
			&:hover {
				background-color:fade(@brown, 100);
			}
			-webkit-clip-path: url(#my-clip-path);
			clip-path: url(#my-clip-path);

		}
	}

}

#mobile-header-contact {
	display: none;
	@media (max-width: 768px) {
		display: block;
	}
	body.home & {
		position:relative;
		z-index:10;
		margin: auto;
	}
	background-color:#fff;
	max-width:360px;
	.tabs {
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-template-rows:auto 1fr;
		> label:nth-of-type(1),
		> input:nth-of-type(1) {
			grid-column:1;
			grid-row:1;
			background-color:@blue;
		}
		> .npoo:nth-of-type(1) {
			grid-column:1 / -1;
			grid-row:2;
			background-color:@blue;
		}
		> label:nth-of-type(2),
		> input:nth-of-type(2) {
			grid-column:2;
			grid-row:1;
			background-color:@brown;
		}
		> .npoo:nth-of-type(2) {
			grid-column:1 / -1;
			grid-row:2;
			background-color:@brown;
		}
		label {
			color:#fff;
			.font(Poppins, 400, 16px);
			padding:10px 25px;
			pointer-events:none;
			text-align:center;
		}
		input {
			width:100%;
			height:100%;
			cursor:pointer;
			opacity:0;
			&.checked + .npoo {
				opacity:1;
				pointer-events:auto;
			}
		}
		.npoo {
			opacity:0;
			padding:25px;
			pointer-events:none;
			h5 {
				color:#fff;
				.font(Poppins, 400, 28px);
				.max({ font-size:24px; }, 1280);
				letter-spacing:.15em;
				margin-bottom:10px;
				text-align:center;
				text-transform:uppercase;
				b {
					.inherit();
					.bold();
					display:block;
					letter-spacing:.1em;
				}
			}
			p {
				color:#fff;
				text-align:center;
				.max({ font-size:14px; }, 1280);
			}
		}
	}
}

#post-1562 {
	.your-name, .your-email, .phone, .office {
		max-width: 50%;
	}
}

#footer-links {
	.min({display:none;});
	.max({
		background-color:#fff;
		position:fixed;
		display:grid;
		grid-template-columns: 1fr .25fr .25fr 1fr;
		grid-template-areas:
			"phead phead fhead fhead"
			"pinfo email email finfo";
		bottom:0;
		width:100%;
		left:0;
		z-index:10;
		box-shadow:0px 0px 8px fade(#393939, 50);

		grid-gap:0 15px;

		h5 {
			color:#fff;
			.font(Poppins, 500, 18px);
			.max({ font-size:14px; }, 540);
			letter-spacing:.1em;
			margin:0;
			padding:.6em .5em .5em;
			text-align:center;
			text-transform:none;
			b {
				.inherit();
				.font();
			}
		}
		.office-info {
			display:grid;
			grid-template-columns:1fr 1fr 1fr;
			grid-gap:15px;
			a {
				color:#fff;
				line-height:0;
				padding:10px;
				text-align:center;
				svg {
					fill:currentcolor;
				}
			}
		}
		h5.Pacific.Ave {
			grid-area: phead;
			background-color:@pacific-ave;
			b {
				color:lighten(@pacific-ave, 25);
			}
		}
		.office-info.Pacific.Ave {
			grid-area: pinfo;
			a {
				background-color:lighten(@pacific-ave, 50);
			}
		}
		h5.Foothills {
			grid-area: fhead;
			background-color:@foothills;
			b {
				color:lighten(@foothills, 25);
			}
		}
		.office-info.Foothills {
			grid-area: finfo;
			a {
				background-color:lighten(@foothills, 50);
			}
		}
		> a {
			grid-area: email;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #b8e0b8;
			svg * { fill: #fff; }
		}
	});
}

@media (max-width:768px) {
	#SwellCX .swell-chat-fixed {
		bottom: 100px !important;
	}
}

#SwellCX {
	> div {
		> div:first-child {
			> div:first-child {
				> div > div { background-color:@blue !important; }
			}
			> div:last-child {
				> img { filter: sepia(100%) hue-rotate(180deg) saturate(100%); }
			}
		}
		> div:last-child { background-color:@brown !important; }
	}
}

#clickToCallForm {
	display:grid;
	grid-gap:25px;
	grid-template-columns:1fr 1fr;
	max-width: 800px !important;
	.howItWorksSection {
		padding-left:0;
	}
}
#footerCTT .click-to-text {
	max-width: 252px;
	margin: auto;
	display: flex;
	flex-direction: column;
	position: relative;
	margin-bottom: 20px;
	svg {
		position: absolute;
		right: 34px;
		top: 0;
		bottom: 0;
		margin: auto;
		fill: #1b4f72;
	}
}
#post-87 {
	.su-tabs {
		background: #1b4f72;
	}
}
@media (max-width:768px) {
	#footerCTT {
		display:none;
	}
}