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

@background: #113751;
@background: linear-gradient(90deg, #113751 0%, #d3d655 100%);

@type-background: #113751;
@type-background: linear-gradient(0deg, #113751 0%, #d3d655 50%,  #113751 100%);
@type-background-hover: #113751;
@type-background-hover: linear-gradient(0deg, #d3d655 0%, #113751 50%, #d3d655 100%);

@pain-overlay: #113751;
@pain-overlay: linear-gradient(0deg, #113751 0%, #d3d655 100%);

@icon-color:#E33440;

@arrow_left: "100% 0, 0 50%, 100% 100%";

// figure.video { display:none !important; }
.why svg { display:none !important; }

.entry-content {
	h2 {
		.font(~"Open Sans", 700, 26px);
		margin-bottom:25px;
	}
	h3 {
		.font(~"Open Sans", 700, 20px);
		margin-bottom:25px;
	}
	.dcmo_block, figure.video {
		margin:0;
	}
	section.dcmo_block > div {	.padding-ends(4vw); }

	.wpcf7 {
		.max-width(400px);
		.better-input {
			.wpcf7-form-control-wrap {
				position: relative;
				background-color:fade(#fff, 80);
				border:none;
				margin-bottom:10px;
				display:block;
				margin-top: 1.75em;
				color:#606060;
				.font(~"Open Sans", 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:100px;
				}
				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:#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: .8em;
				}
			}
			input[type="submit"] {
				border:none;
				display:block;
				margin:25px auto 0;
				height: 2em;
				width: 10em;
				.font(~"Open Sans", 400, 20px);
				letter-spacing:.1em;
				text-align:center;
				text-transform:uppercase;
			}
		}
	}
}


#welcome {
	background-image:url('http://daniel.blackmarlin.dentalcmo.com/wp-content/uploads/2021/04/football.jpg');
	.pseudoBefore;
	&:before {
		background-color:#152100;
		opacity:.8;
	}
	h2, h3, .copy, .copy p, li {
		color:#fff;
	}
	h3 {
		text-align:center;
	}
	.wpcf7 {
		input[type="submit"] {
			background:@background;
			color:#fff;
		}
	}
	ul {
		columns:300px 2;
	}
}

#urgency {

	.copy {
		align-self:center;
		justify-self:center;
		* {
			color:#606060;
		}

	}
	h2 b {
		.inherit();
		.bold();
	}

	ol {
		list-style-type:none;
		counter-reset: ol-counter;
		&, li {
			margin:0;
		}
		li {
			counter-increment: ol-counter;
			text-align:center;
			svg {
				background:@background;
				width:50px;
				height:50px;
				padding:10px;
				border-radius:50%;
				display:block;
				overflow:visible;
				margin:0 auto 8px;
				fill:#fff;
			}
			b {
				display:block;
				margin-bottom:7px;
				text-transform:uppercase;
				letter-spacing:.05em;
				&:before {
					content: counter(ol-counter) ". ";
				}
			}
		}
	}

}

#types {
	background:@type-background;
	background-size: 200% 200%;
	background-position:0% 100%;

	> div { overflow:visible; }

	h2, h4 {
		color:#fff;
		text-align:center;
	}
	.type {
		position:relative;
		img, svg {
			display:block;
			margin:0 auto 20px;
		}
		p {
			color:#fff;
		}
	}
}

#map {
	.iframe-container {
		padding:0;
		height:56.25vw;
		max-height:420px;
	}
}

#why {
	h2, h4 {
		text-align:center;
	}
	* {
		color:#606060;
	}
	.why {
		img, svg {
			display:block;
			margin:0 auto 20px;
		}
		svg {
			path { fill:@icon-color; }
		}
	}
}

#reviews {
	background-color:#F1F2F2;

	* { color:#606060; }
	h2 {
		text-align:center;
	}
	.grid {
		grid-template-columns:repeat(2, ~"calc(50% - 25px)");
	}
	
	.reviews {
		width:100%;
		display:grid;
		grid-template-columns:25px 1fr 25px;
		align-items:center;
		grid-gap:25px;
		.slick-arrow {
			width:25px;
			height:82px;
			cursor:pointer;
			.pseudoBeforeAfter;
			&:before, &:after {
				.clip(@arrow_left);
			}
			&:before {
				background:@background;
			}
			&:after {
				background-color:#F1F2F2;
				left:2px;
			}
			&.next {
				.rotate(180deg);
			}
		}
		.slick-track {
			display:grid;
			grid-auto-flow:column;
		}
		.review {
			.vertAlign;
			margin:0;
			height:100%;
			&:focus { outline:none; }
			> * {
				display:block;
				.max-width(420px);
			}
			img {
				height:150px;
				width:150px;
				max-width:100%;
				border-radius:50%;
				margin:0 auto 25px;
			}
			cite {
				text-align:right;
			}
		}
	}
}

figure.video {
	align-self:center;
	justify-self:center;
	width:100%;
	.play {
		path { fill:#fff; }
	}
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		z-index:4;
		background-color:#000000;
		opacity:.5;
		.transition(opacity);
	}
	&.played:before {
		opacity:0;
		pointer-events:none;
	}
}

#pain {
	background-image:url('http://daniel.blackmarlin.dentalcmo.com/wp-content/uploads/2021/04/pain.jpg');
	.pseudoBefore;
	> div { max-width:640px; }
	&:before {
		background:@pain-overlay;
		opacity:.85;
	}
	h2, p {
		color:#fff;
		text-align:center;
	}
	input[type="submit"]:hover {
		background-color:#113751;
	}
	
}

/**********/

.grid {
	display:grid;
	> * { grid-column: span 1; }
	& { // Default
		grid-row-gap:25px;
		grid-column-gap:~"min(25px, calc(100% / 11))";
		&.gap-0,
		&[gap="0"] {
			grid-row-gap:0px;
			grid-column-gap:0;
		}
		&.gap-50,
		&[gap="50"] {
			grid-row-gap:50px;
			grid-column-gap:~"min(50px, calc(100% / 11))";
		}
		&.gap-100,
		&[gap="100"] {
			grid-row-gap:100px;
			grid-column-gap:~"min(100px, calc(100% / 11))";
		}
		grid-template-columns:repeat(12, 1fr);
		> .full,
		> *[grid="12"] { grid-column: span 12; }
		> *[grid="11"] { grid-column: span 11; }
		> *[grid="10"] { grid-column: span 10; }
		> .three-quarters,
		> .three-quarter,
		> *[grid="9"] { grid-column: span 9; }
		> .two-thirds,
		> .two-third,
		> *[grid="8"] { grid-column: span 8; }
		> *[grid="7"] { grid-column: span 7; }
		> .half,
		> *[grid="6"] { grid-column: span 6; }
		> *[grid="5"] { grid-column: span 5; }
		> .third,
		> *[grid="4"] { grid-column: span 4; }
		> .quarter,
		> *[grid="3"] { grid-column: span 3; }
		> *[grid="2"] { grid-column: span 2; }
		> *[grid="1"] { grid-column: span 1; }

		@media (max-width:768px) {
			grid-column-gap:~"min(25px, calc(100% / 5))";
			&.gap-0, &[gap="0"] { grid-column-gap:0; }
			&.gap-50, &[gap="50"] { grid-column-gap:~"min(50px, calc(100% / 5))"; }
			&.gap-100, &[gap="100"] { grid-column-gap:~"min(100px, calc(100% / 5))"; }
			grid-template-columns:repeat(6, 1fr);
			> .full,
			> .three-quarters,
			> .three-quarter,
			> .two-third,
			> .two-thirds,
			> .half,
			> *[grid="12"],
			> *[grid="11"],
			> *[grid="10"],
			> *[grid="9"],
			> *[grid="8"],
			> *[grid="7"],
			> *[grid="6"] {
				grid-column: span 6; // Full
			}
		}

		@media (max-width:540px) {
			grid-column-gap:~"min(25px, calc(100% / 2))";
			&.gap-0, &[gap="0"] { grid-column-gap:0; }
			&.gap-50, &[gap="50"] { grid-column-gap:~"min(50px, calc(100% / 2))"; }
			&.gap-100, &[gap="100"] { grid-column-gap:~"min(100px, calc(100% / 2))"; }
			grid-template-columns:repeat(3, 1fr);
			> .full,
			> .three-quarters,
			> .three-quarter,
			> .two-thirds,
			> .two-third,
			> .half,
			> .third,
			> .quarter,
			> *[grid="12"],
			> *[grid="11"],
			> *[grid="10"],
			> *[grid="9"],
			> *[grid="8"],
			> *[grid="7"],
			> *[grid="6"],
			> *[grid="5"],
			> *[grid="4"],
			> *[grid="3"] {
				grid-column: span 3; // Full
			}
		}

		@media (max-width:320px) {
			> *[grid="2"],
			> *[grid="1"],
			> * {
				grid-column: span 3; // Full
			}
		}
	}
	
	&[columns="4"] {
		grid-column-gap:~"min(25px, calc(100% / 3))";
		&.gap-0, &[gap="0"] { grid-column-gap:0; }
		&.gap-50, &[gap="50"] { grid-column-gap:~"min(50px, calc(100% / 3))"; }
		&.gap-100, &[gap="100"] { grid-column-gap:~"min(100px, calc(100% / 3))"; }
		grid-template-columns:repeat(4, 1fr);
		> .full,
		> *[grid="4"] { grid-column: span 4; }
		> .three-quarters,
		> .three-quarter,
		> *[grid="3"] { grid-column: span 3; }
		> .half,
		> *[grid="2"] { grid-column: span 2; }
		> .quarter,
		> *[grid="1"] { grid-column: span 1; }
		
		@media (max-width:768px) {
			> .three-quarters,
			> .three-quarter,
			> *[grid="3"] { grid-column: span 4; }
			> .quarter,
			> *[grid="1"],
			> * { grid-column: span 2; }
		}	
		@media (max-width:540px) {
			> .quarter,
			> *[grid="1"],
			> * { grid-column: span 4; }
		}
	}
	
	&[columns="3"] {
		grid-column-gap:~"min(25px, calc(100% / 2))";
		&.gap-0, &[gap="0"] { grid-column-gap:0; }
		&.gap-50, &[gap="50"] { grid-column-gap:~"min(50px, calc(100% / 2))"; }
		&.gap-100, &[gap="100"] { grid-column-gap:~"min(100px, calc(100% / 2))"; }
		grid-template-columns:repeat(3, 1fr);
		> .full,
		> *[grid="3"] { grid-column: span 3; }
		> .two-thirds,
		> .two-third,
		> *[grid="2"] { grid-column: span 2; }
		> .third,
		> *[grid="1"] { grid-column: span 1; }
		
		@media (max-width:768px) {
			> .full,
			> .two-thirds,
			> .two-third,
			> *[grid="2"] { grid-column: span 3; }
			> .third,
			> *[grid="1"] { grid-column: span 2; }
		}	
		@media (max-width:540px) {
			> .third,
			> *[grid="1"],
			> * { grid-column: span 3; }
		}	
	}
	
	&[columns="2"] {
		grid-column-gap:~"min(25px, calc(100% / 1))";
		&.gap-0, &[gap="0"] { grid-column-gap:0; }
		&.gap-50, &[gap="50"] { grid-column-gap:~"min(50px, calc(100% / 1))"; }
		&.gap-100, &[gap="100"] { grid-column-gap:~"min(100px, calc(100% / 1))"; }
		grid-template-columns:repeat(2, 1fr);
		> .full,
		> *[grid="2"] { grid-column: span 2; }
		> .half,
		> *[grid="1"] { grid-column: span 1; }
		
		@media (max-width:768px) {
			> .half,
			> *[grid="1"],
			> * { grid-column: span 2; }
		}	
	}
}

.dcmo_full_block  {
	@media (min-width:769px) {
		.translateX(-50%);
		left: 50%;
		position:relative;
		body.layout-left-sidebar & {
			.translateX(~"calc(-50% - (360px / 2) - (25px / 2))");
		}
		body.layout-right-sidebar & {
			.translateX(~"calc(-50% - (-360px / 2) - (-25px / 2))");
		}
		& {
			width: 100vw;
			> div {
				width: 100vw;
			}	
		}
	}
	@media (min-width:960px) {
		body.template-side-featured-image &, &.half {
			width: 50vw;
			> div {
				width: 50vw;
			}
		}
	}
}

.iframe-container {
	height:0;
	padding-bottom:56.25%;
	position:relative;
	overflow:hidden;
	&, iframe {
		line-height:0;
	}
	iframe {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
}

.dcmo_block {
	padding:25px;
	> div {
		overflow:hidden;
	}
	&:not(.full) {
		> div {
			.max-width(1400px);
		}
	}
}

figure.video {
	line-height:0;
	.grid-one();
	align-items:center;
	justify-items:center;
	grid-template-rows:1fr;
	grid-template-columns:1fr;
	overflow:hidden;
	position:relative;
	
	> * {
		position:relative;
		z-index:3;
	}

	> video {
		object-fit: cover;
		width:100%;
		height:auto;
		z-index:1;
		object-fit: cover;
		object-position: center;
		&:focus {
			outline: none;
		}
	}
	&.fullscreen video {
		width:100vw;
		height:100vh;
	}

	&.has-play:not(.played) {
		video { pointer-events:none; }
	}

	> .video-controls {
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		pointer-events:none;
		z-index:2;
		.translateY(~"calc(100% - .3125em)");
		.transition(all, .5s, @easing);
		padding:0 0 .5em;
		background-color:fade(#333, 40);
		.blur(3px);
		font-size:16px;
		display: grid;
		grid-gap:0.3125em .5em;
		align-items:center;
		justify-items:center;
		grid-template-columns:.1875em repeat(3, auto) 1fr repeat(4, auto) .1875em;
		grid-template-areas:
			"progress progress progress progress progress progress progress progress progress progress"
			". play volume time . quality pip branding full .";
		> * {
			display:block;
			width:100%;
			line-height:0;
			font-size:1em;
			color:#fff;
		}
		* {
			-moz-user-select: -moz-none;
			-khtml-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		svg {
			height:1.5em;
			width:auto;
			fill:currentColor;
		}
		.youtube svg {
			height:1em;
		}
		.seek { grid-area: progress; }
		.play-controls { grid-area:play; }
		.volume-controls { grid-area:volume; }
		.time { grid-area:time; }
		.quality-controls { grid-area:quality; }
		.pip-controls { grid-area: pip; }
		.branding { grid-area: branding; }
		.fullscreen-controls { grid-area:full; }

		.seek, .play-controls, .volume-controls, .quality-controls, .fullscreen-controls, .qualities > div {
			display:grid;
			> * {
				grid-row:1;
				grid-column:1;
			}
		}

		.seek {
			> * {
				margin:0;
				height:.3125em;
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				opacity:.75;
				width:100%;
				&::-webkit-progress-bar {
					background:transparent;	
				}
				&.buffer {
					opacity:.25;
					&::-moz-progress-bar {
						background-color:#f7f7f7;
						.transition(all, .5s, @easing);
					}
					&::-webkit-progress-value {
						background-color:#f7f7f7;
						.transition(all, .5s, @easing);
					}
				}
				&.progress {
					&::-moz-progress-bar {
						background-color:#338ffc;
						.transition(all, .25s, @easing);
					}
					&::-webkit-progress-value {
						background-color:#338ffc;
						.transition(all, .25s, @easing);
					}
				}
				&.seek-to {
					opacity:.5;
					&::-moz-progress-bar {
						background-color:#338ffc;
					}
					&::-webkit-progress-value {
						background-color:#338ffc;
					}
				}
			}

			.seek-input {
				opacity:0;
				cursor:pointer;
			}
		}

		.volume-controls {
			position:relative;
			.volume-input {
				height:3.5em;
				width:1em;
				cursor:pointer;
				margin:0;
				writing-mode: bt-lr; /* IE */
				-webkit-appearance: slider-vertical; /* WebKit */
				position:absolute;
				left:50%;
				bottom:100%;
				.translateY(0);
				.translateX(-50%);
				opacity:0;
				pointer-events:none;
				.clip(~"0 100%, 100% 100%, 100% 100%, 0% 100%");
				.transition(all, .3s, @easing);
			}
			&:hover .volume-input {
				opacity:1;
				.clip(~"0 0, 100% 0, 100% 100%, 0% 100%");
				pointer-events:auto;
			}
		}

		.quality-controls {
			position:relative;
			.qualities {
				position:absolute;
				bottom:~"calc(100% - -1em)";
				left:50%;
				.translateX(-50%);
				.blur(3px);
				.transition(all, .3s, @easing);
				div {
					align-items:center;
					justify-items:center;
					font-family: Helvetica, Arial;
					font-size:1em;
					font-weight:300;
				}
				input {
					appearance: none;
					-moz-appearance: none;
					-webkit-appearance: none;
					margin:0;
					padding:0;
					font-size:.7em;
					width:8em;
					height:2.75em;
					cursor:pointer;
					background-color:fade(#333, 80);
					.transition(all, .25s, @easing);
					&:checked {
						background-color:#338ffc;
						pointer-events:none;
					}
					&:hover {
						background-color:fade(#555, 80);
					}
					&:focus {
						outline:none;
					}
				}
				label {
					pointer-events:none;
				}
				&.hide {
					opacity:0;
					pointer-events:none;
				}
			}
		}
	}

	&:not(.has-play),
	&.has-play.played {
		&:hover .video-controls,
		.video-controls:hover {
			.translateY(0);
			pointer-events:auto;
		}
	}

	.video-icon {
		.transition(all, .3s, @easing);
		cursor:pointer;
		&.hide {
			opacity:0;
			pointer-events:none;
		}
	}

	.play {
		cursor:pointer;
		&.default, &.with-sound {
			position:absolute;
			z-index:5;
			height:auto;
			width:18%;
			top:50%; 
			left:50%;
			.translate(-50%, -50%);
			display:block;
			.clip(~"0 0, 100% 50%, 0 100%");
			.transition(opacity, .25s, @easing);
			opacity:1;
			pointer-events:auto;
			.blur(3px);
		}
	}
	&.played .play.with-sound,
	&.played .play.default {
		opacity:0;
		pointer-events:none;
	}
}