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

@red: #670C0F;
@blue: #0E3048;
@cursive: ~"Mrs Saint Delafield";

.hero {
	video {
		max-height:720px;
	}
	.hero-overlay {
		background-color:fade(#000, 66);
		width:100%;
		height:100%;
		position:relative;
		font-size:42px;
		font-size:~"min(42px, 4vw)";
		display:grid;
		align-items:center;
		justify-items:center;
		padding:25px;
		grid-template-rows:1fr auto 1fr;
		h1 {
			color:#fff;
			.bold(~"Fira Sans");
			text-align:center;
			text-transform:uppercase;
			b {
				display:block;
				.inherit(@transform:capitalize);
				.font(@cursive, 400, 5em);
				margin-top:.1em;
			}
		}
		svg.play.with-sound {
			position:relative;
			top:0;
			left:0;
			transform:none;
			width:2em;
			path { fill:#fff; }
		}
		&:before { content:' '; }
	}
}

#responsiveLinks { display:none !important; }

.entry-content {
	> section,
	> .dcmo_block {
		.margin-ends(5vw);
	}
}

#welcome {
	> div { overflow:visible; }
	#ribbon {
		width:350px;
	}
	h2 {
		font-size:62px;
		font-size:~"clamp(32px, 4.25vw, 62px)";
		text-align:center;
		margin-top:0;
		margin-bottom:25px;
		.padding-ends(10px);
		position:relative;
		&:before, &:after {
			content:' ';
			display:block;
			position:absolute;
			width:50px;
			height:2px;
			background-color:@blue;
			top:0;
			bottom:0;
			margin:auto;
		}
		&:before {
			right:100%;
		} &:after {
			left:100%;
		}
	}
	.grid {
		@media (max-width:960px) {
			grid-template-columns:1fr;
			> * { grid-column:1; }
			#npoo { grid-row:1; }
			.copy { grid-row:2; }
		}
	}
	.copy {
		img {
			width:100%;
			aspect-ratio:16/9;
			object-fit:cover;
			object-position:center 25%;
		}
	}
	textarea {
		height:143px;
	}
}

#testimonials {
	clip-path: ellipse(200% 100% at 50% 100%);
	background-color:#FAF1E3;
	padding:50px 25px;
	text-align:center;
	h2 {
		display:inline-block;
		margin-bottom:25px;
		padding:0 15px;
		font-weight:300;
		position:relative;
		&:before, &:after {
			content:' ';
			display:block;
			position:absolute;
			width:50px;
			height:2px;
			background-color:@blue;
			top:0;
			bottom:0;
			margin:auto;
		}
		&:before {
			right:100%;
		} &:after {
			left:100%;
		}
	}
	
	#testimonial {
		display:grid;
		grid-template-columns:auto 1fr auto;
		grid-template-rows:~"calc(720px * (9 / 16))" auto;
		grid-template-areas:
			"prev slick next"
			". slick .";
		.prev { grid-area:prev; }
		.next { grid-area:next; }
		.slick-list { grid-area:slick; }
		grid-gap:25px;
	}
	.slick-arrow {
		background-color:@blue;
		display:block;
		width:35px;
		height:165px;
		@media (max-width:768px) {
			width:(35px * .9);
			height:(165px * .9);
		}
		@media (max-width:640px) {
			width:(35px * .8);
			height:(165px * .8);
		}
		@media (max-width:540px) {
			width:(35px * .7);
			height:(165px * .7);
		}
		@media (max-width:360px) {
			width:(35px * .6);
			height:(165px * .6);
		}
		align-self:center;
		cursor:pointer;
	}
	.prev { .clip(@arrow_left); }
	.next { .clip(@arrow_right); }
	
	.testimonial {
		margin:0 10px;
		width:720px;
		.min({ max-width:75vw; });
		.max({ max-width:66vw; });
		.max({ max-width:50vw; }, 540);
		&:focus { outline:none; }
		span.su-lightbox {
			display:block;
			background-size:cover;
			background-position:center;
			height:auto;
			width:100%;
			aspect-ratio:16/9;
			margin-bottom:10px;
			.vertAlign;
			.pseudoBefore();
			&:before {
				background-color:#fff;
			}
			&:after {
				content:' ';
				background-image:url('/wp-content/uploads/2021/08/play.svg');
				background-size:contain;
				background-position:center;
				background-repeat:no-repeat;
				display:block;
				cursor:pointer;
				width:112px;
				height:30%;
			}
		}
	}
	.testimonial {
		pointer-events:none;
		span.su-lightbox {
			&:before {
				opacity:.75;
				.transition();
			}
			&:after {
				opacity:0;
				.transition();
			}
		}
		blockquote {
			line-height:1.5;
			.max({ font-size:16px; });
			opacity:0;
			.transition();
		}
	}
	.testimonial.slick-center {
		pointer-events:auto;
		blockquote {
			opacity:1;
		}
		span.su-lightbox {
			&:before {
				opacity:0;
			}
			&:after {
				opacity:1;
			}
		}
	}
	
	.Tim span.su-lightbox {
		background-image:url('/wp-content/uploads/2018/02/Tim-.png');
	}
	.Grace span.su-lightbox {
		background-image:url('/wp-content/uploads/2018/02/Grace.png');
	}
	.Etta span.su-lightbox {
		background-image:url('/wp-content/uploads/2018/02/Etta.png');
	}
	.Bill span.su-lightbox {
		background-image:url('/wp-content/uploads/2017/08/Bill.png');
	}
	.Kelly span.su-lightbox {
		background-image:url('/wp-content/uploads/2017/08/Kelly.png');
	}
}

#highlights {
	> div {
		overflow:visible;
		display:grid;
		grid-gap:20px;
		@media (min-width:769px) {
			grid-template-columns:1fr 1fr;
			grid-template-rows:auto auto auto;
		}
	}
	#cosmetic { background-image:url('/wp-content/uploads/2021/08/iStock-79.jpg'); }
	#family { background-image:url('/wp-content/uploads/2017/06/Family-Highlight.jpg'); }
	#cerec { background-image:url('/wp-content/uploads/2021/08/Stock-26.jpg'); }
	#implant { background-image:url('/wp-content/uploads/2017/03/iStock-52-Vert.jpg'); background-position:top center; }
	#apnea { background-image:url('/wp-content/uploads/2019/10/Stock-47.jpg'); }
	#highlight { background-image:url('/wp-content/uploads/2021/09/Stock-60.jpg'); }
	.service {
		background-image:url('/wp-content/uploads/2021/08/photo-coming-soon.svg');
		background-size:cover;
		background-position:center;
		overflow:hidden;
		> div {
			height:100%;
			font-size:54px;
			.min({ font-size:~"min(54px, 4vw)"; });
			.max({ font-size:~"min(54px, 8vw)"; });
			padding:5px 25px 25px;
			.blur(5px);
		}
		h2 {
			font-size:1em;
			font-weight:700;
			height:2em;
			margin-bottom:25px;
			line-height:1;
			text-align:center;
			.vertAlign;
			position:relative;
		}
		p {
			text-align-last:center;
			line-height:1.5;
			.max({ font-size:16px; });
		}
		.learn-more {
			display:inline-block;
			border:1px solid @red;
			color:@red;
			.font(~"Fira Sans", 400, 22px);
			padding:.5em 1em;
			&:after {
				content:' >';
			}
			&:hover {
				background-color:@red;
				color:#fff;
			}
		}
	}
	.service {
		box-shadow:0 0 5px fade(#393939, 0);
		.transition();
		> div {
			background-color:fade(@red, 75);
			.translateY(~"calc(100% - 2em - 5px)");
			clip-path: ellipse(200% 100% at 50% 100%);
			.transition();
		}
		h2 {
			color:#fff;
			.transition(color);
		}
	}
	.service:hover {
		box-shadow:0 0 10px fade(#393939, 50);
		> div {
			background-color:fade(#fff, 90);
			.translateY(0);
			clip-path: ellipse(200% 100% at 50% 75%);
		}
		h2 {
			color:@red;
		}
	}
	@media (max-width:768px) {
		.service.waypointEffect {
			box-shadow:0 0 10px fade(#393939, 50);
			> div {
				background-color:fade(#fff, 90);
				.translateY(0);
				clip-path: ellipse(200% 100% at 50% 75%);
			}
			h2 {
				color:@red;
			}
		}
	}
	
	.highlight {
		background-image:url('/wp-content/uploads/2021/08/photo-coming-soon.svg');
		background-size:cover;
		background-position:center;
		overflow:hidden;
		.pseudoBefore();
		.vertAlign(center, space-between);
		flex-direction:column;
		font-size:54px;
		font-size:~"min(54px, 4vw)";
		padding:.5em;
		&:before {
			background-color:fade(@blue, 60);
		}
		h3 {
			color:#fff;
			.font(~"Fira Sans", 400, 1em);
			text-align:center;
			text-align-last:right;
			text-transform:none;
			b {
				.inherit();
				.bold();
				display:inline-block;
				margin-right:-.5em;
			}
		}
		img {
			width:170px;
		}
		p {
			color:#fff;
			.font(~"Fira Sans", 300, .8em);
			text-transform:none;
			text-align:center;
			a {
				.inherit();
				.bold();
			}
		}
	}
}