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

@brown: #A75325;
@gray: #595B5C;

.entry-content {
	&, p, li {
		.max({ font-size:16px; line-height:1.375; });
	}
	hr {
		clear:both;
		color:@brown;
	}
}

.implant-video {
	width: 50%;
    clear: both;
    float: right;
	@media (max-width: 768px) {
		width: 100%;
	}
}

#covid {
	h5 {
		background-color:@brown;
		color:#fff;
		.font(Montserrat, 600, 22px, 1.25);
		font-size:~"clamp(16px, 3vw, 22px)";
		padding:.2em 1em;
		text-align:center;
		text-transform:none;
		cursor:pointer;
	}
	.copy {
		background-color:@gray;
		color:#fff;
		> div {
			padding:25px;
			.max-width(720px);
			p {
				line-height:1.25;
				text-align:justify;
				text-align-last:center;
			}
		}
	}
}

.click-to-call {
    color: white;
    padding: 1em;
    display: block;
    font-size: 1.3rem;
}

#text-11 {
    background-color: #A75325;
	&:hover {
		background-color: #fff;
		a {
			color: #A75325;
		}
	}
}

#header-info {
	display:grid;
	grid-gap:25px;
	grid-template-columns:auto 2px auto 2px auto 2px auto;
	hr {
		background-color:@brown;
		width:100%;
		height:100%;
		margin:0;
	}
	a {
		color:@brown;
		.vertAlign;
		padding:.25em;
		.font(Montserrat, 400, 24px);
		text-align:center;
		text-transform:uppercase;
		svg {
			fill:@gray;
			height:auto;
			width:1.25em;
			margin-right:.5em;
		}
		span {
			display:block;
		}
		&#header-phone { text-transform:none; }
	}
}


#header {
	box-shadow:0 1px 10px fade(@gray, 50);
	@media (min-width:769px) {
		padding:20px 50px;
		display:grid;
		grid-gap:0px 25px;
		align-items:center;
		justify-items:end;
		grid-template-columns:auto 1fr;
		grid-template-rows:auto auto;
		grid-template-areas:
			"logo info"
			"logo nav";
		#logo { grid-area:logo; justify-self:start; }
		#header-info { grid-area:info; }
		nav { grid-area:nav; align-self:end; }
	}
	@media (max-width:1600px) {
		#header-info a { font-size:20px;}
	}
	@media (max-width:1450px) and (min-width:960px) {
		grid-template-columns:1fr 1fr;
		grid-template-areas:
			"logo info"
			"nav nav";
		#header-info {
			grid-template-columns:auto 2px auto;
			grid-template-rows:auto 2px auto;
			hr:nth-of-type(2) {
				grid-column:1 / -1;
			}
		}
	}
	@media (max-width:1080px) {
		#header-info a { font-size:18px;}
	}
	@media (max-width:959px) and (min-width:769px) {
		grid-template-columns:1fr;
		grid-template-areas:
			"logo"
			"info"
			"nav";
		ul.nav > li > a { font-size:.9em; }
	}
	@media (max-width:959px) and (min-width:850px) {	
		ul.nav > li > a { font-size:.9em; }
	}
	@media (max-width:849px) and (min-width:769px) {
		#header-info a { font-size:16px;}	
		ul.nav > li > a { font-size:.8em; }
	}
}
#header {
	@media (max-width:768px) {
		padding:25px;
		display:grid;
		grid-gap:25px;
		grid-template-columns:1fr auto;
		align-items:center;
		justify-items:start;
		#logo {
			max-width:50vw;
		}
		#header-info { display:none !important; }

		nav#header-menu {
			.padding-ends(20px);
			position:relative;
			ul.nav {
				background-color:#fff;
				position:absolute;
				right:-25px;
				top:100%;
				min-width:320px;
				box-shadow:0 1px 10px fade(@gray, 50);
			}
			li {
				position:relative;
				text-align:right;
				figure {
					position:absolute;
					left:0;
					top:0;
					height:48px;
					width:48px;
					.transition();
					background-color:transparent;
					background-image:url('/files/arrow-1.svg');
					background-position:center;
					background-size:25px 25px;
					background-repeat:no-repeat;
				}
				input {
					height:48px;
					+ figure { .rotate(-90deg); }
					&[type=checkbox]:checked {
						left:0;
						width:48px;
						right:auto;
						+ figure { .rotate(90deg); }
					}
				}
			}
		}
	}
}

.search {
	position:relative;
	input {
		&:focus {
			outline:none;
		}
	}
	input[type="search"] {
		border:none;
		.padding-sides(.25em);
		border-bottom:1px solid @gray;
		position:absolute;
		right:100%;
		background-color:#fff;
		top:0;
		width:215px;
		&:focus {
			border-bottom:1px solid @brown;
		}
	}
	input[type="submit"] {
		background:transparent;
		background-image:url('/files/search.svg');
		background-position:center;
		background-repeat:no-repeat;
		color:transparent;
		overflow:hidden;
		width:45px;
	}
	input[type="search"] {
		.clip(@square_right);
		.transition();
	}
	&:hover input[type="search"], input[type="search"]:focus {
		.clip(@square);
	}
}

.button {
	clear:both;
	border-radius:.5em;
	display:block;
	.font(Montserrat, 600, 32px);
	font-size:~"clamp(16px, 2vw, 32px)";
	.margin-sides(auto);
	text-align:center;
	text-transform:uppercase;
	width:fit-content;

	background-color:@brown;
	color:#fff;
	.hover();
	&:hover {
		background-color:#fff;
		color:@brown;
	}

	padding:.75em 1em;
	&.wide {
		padding:.5em 1.5em;
		min-width:15em;
	}
	&.inverted {
		background-color:#fff;
		color:@brown;
		&:hover {
			background-color:@brown;
			color:#fff;
		}
	}
}

#before-footer {
	background-image:url('/files/familyoutdoors.jpg');
	display:grid;
	.min({
		grid-template-columns:1fr 2fr;
		#office-info { grid-row:1 / span 2; }
	});
	> div {
		padding:25px;
	}

	#office-info {
		background-color:fade(@brown, 80);
		.vertAlign;
		a, p, address {
			color:#fff;
			.font(Montserrat, 400, 20px, 1.25);
			text-align:center;
		}
		> div > p {
			margin-top:20px;
		}
	}

	#footer-logo {
		display:block;
		line-height:0;
		text-align:center;
		margin-bottom:25px;
		svg * {
			fill:#fff;
		}
	}

	#contact-us {
		background-color:fade(#fff, 85);
		.vertAlign;
		h5 {
			color:@brown;
			.font(Montserrat, 300, 42px);
			text-align:center;
			text-transform:uppercase;
		}
		.better-input {
			display:grid;
			grid-gap:0 25px;
			@media (min-width:540px) {
				grid-template-columns:1fr 1fr;
				grid-template-areas:
					"name message"
					"email message"
					"phone message"
					". submit";
				.name { grid-area:name; }
				.email { grid-area:email; }
				.phone { grid-area:phone; }
				.your-message { grid-area:message; }
				.submit { grid-area:submit; }
				*:focus:not(:placeholder-shown) + label,
				*:focus + label,
				*:focus:not(:placeholder-shown) + label .req,
				*:focus + label .req {
					display: none;
				}
				*:not(:placeholder-shown) + label,
				*:not(:placeholder-shown) + label .req {
					display: none;
				}
				*:focus + label,
				*:not(:placeholder-shown) + label {
					display: none;
				}
			}
			.submit {
				justify-self:end;
				margin-top:25px;
			}
		}
	}
	#social-media {
		background-color:fade(@gray, 85);
		text-align:center;
		word-spacing:.5em;
		font-size:54px;
		a {
			color:#fff;
			display:inline-block;
			line-height:0;
			svg {
				fill:currentcolor;
				height:1em;
				width:auto;
			}
		}
	}
}

/**** Full BORDER Color ****/
.wpcf7 .better-input {
	.wpcf7-form-control-wrap {
		position: relative;
		background-color:fade(#fff, 0);
		border:1px solid @brown !important;
		border-radius:8px;
		margin-bottom:0;
		display:block;
		margin-top: 1.75em;
		color:@brown !important;
		.font(Montserrat, 400, 16px);
	}
	.betterInput {
		.inherit();
		.font();

		*::placeholder { color: rgba(0,0,0,1); opacity: 1; }
		*:-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;
			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: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: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:#393939; // Inputting
			display: none;
		}
		*: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;
		.button;
	}
}

#hours {
	background-color:fade(#BBBDBF, 30);
	padding:25px 25px 0;
	> div {
		.max-width(1280px);
	}
}

#footer {
	background-color:fade(#BBBDBF, 30);
	padding:25px 25px 10px;
	> * {
		.max-width(1280px);
	}
	#footer-menu {
		ul.footer-menu > li {
			margin-bottom:25px;
		}
	}
}
#hours, nav#footer-menu {
	text-align:center;
	pre { white-space:normal; }
	span.bold, li.bold > a {
		color:@brown;
		display:block;
		.font(Montserrat, 300, 18px);
		text-align:center;
		text-transform:uppercase;
		&:after { display:none !important; }
	}
	b {
		color:@gray;
	}
	span, li {
		font-size:16px;
	}
	span, li, small {
		color:#595B5C;
		display:inline-block;
		text-align:center;
	}
	span, .sub-menu li, small {
		&:not(:last-child) {
			&:after {
				margin-left:.5em;
				content:'|';
				margin-right:.4em;
			}
		}
	}
}

.fixed-ctas {
    position: fixed;
    right: 15px;
    bottom: 50%;
    transform: translateY(70%);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--first-color);
    box-shadow: 0px 3px 10px #00000065;
    border-radius: 10px;
    z-index: 1000;
}
.fixed-ctas .cta {
    position: relative;
    width: 45px;
    text-align: center;
    cursor: pointer;
}
.fixed-ctas .cta svg path {
	fill: #fff;
}
.fixed-ctas .desktop-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}
.fixed-ctas .cta .mobile-label, .fixed-ctas .cta .label-hover {
    display: none;
}
.fixed-ctas .cta .label-hover .top-text {
    font-size: 11px;
    text-align: left;
}
.fixed-ctas .cta .label-hover .bottom-text {
    font-size: 15px;
    text-align: left;
    font-weight: bold;
}
.fixed-ctas .cta .desktop-label:hover {
    background-color: #fff;
}
.fixed-ctas .cta .desktop-label:hover .label-hover {
    box-shadow: 0px 3px 10px #00000065;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    visibility: visible;
    right: 44px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: var(--second-color);
    padding: 5px 15px;
    height: 100%;
    width: 140px;
    line-height: 1;
    color: #fff;
    z-index: -1;
}
.fixed-ctas .cta .desktop-label:hover svg path {
    fill: var(--first-color);
}
 

@media only screen and (max-width: 768px) {
	.fixed-ctas {
        bottom: 0;
        left: 0;
        right: 0;
        transform: translate(0);
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Change depending on number of CTAs */
        align-items: end;
        border-radius: 0;
		background-color: #A75325;
    }
    .fixed-ctas .cta {
        width: auto;
        text-decoration: none;
        margin: 0;
		padding: 1em 0;
		height: 100%;
		display: flex;
    	justify-content: center;
    	align-items: center;
		line-height: 1.1;
    }
	.fixed-ctas .cta:nth-of-type(2n+1) {
		background-color: #A75325;
	}
	.fixed-ctas .cta:nth-of-type(2n+2) {
		background-color: #7B7979;
	}
    .fixed-ctas .cta svg {
        height: 38px;
        width: auto;
        margin-bottom: 5px;
    }
	.fixed-ctas .cta svg rect {
    	fill: #fff;
	}
    .fixed-ctas .cta .mobile-label {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-align: center;
		gap: 7px;
		font-size: clamp(1rem, 4vw, 1.125rem);
    }
    .fixed-ctas .cta .desktop-label, .fixed-ctas .cta .desktop-label:hover {
        display: none;
	}
}