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

#tpbr_topbar { display:none !important; }

body {
	> * {
		position:relative;
	}
}

#header {
	position:sticky !important;
	z-index:1000;
	padding:20px 25px 0;
	background-color: #fff;
	box-shadow: 3px 0 5px rgba(0,0,0,0.2);
	
	&, #logo img, .fancy svg { .transition(); }
	
	> div {
		.max-width(1800px);
		display:grid;
		grid-gap:10px 50px;
		align-items:center;
		justify-items:center;
		grid-template-columns:auto 1fr auto auto auto;
		grid-template-rows:auto auto;
		grid-template-areas:
			"logo . ctt schedule phone"
			"logo nav nav nav nav";
		#logo { grid-area:logo; }
		.ctt-header { grid-area:ctt; }
		.schedule-header { grid-area:schedule; }
		.phone-header { grid-area:phone; }
		nav {
			grid-area:nav;
			justify-self: end;
		}
	}

	#logo {
		line-height:0;
		img { max-height: 140px; }
	}
	.phone-header {
		span {
			letter-spacing:.15em;
		}
	}
	.simple {
		color:#464748;
		display:grid;
		grid-gap:.25em .5em;
		grid-template-columns:auto 1fr;
		grid-template-rows:auto auto;
		align-items:center;
		justify-items:left;
		svg {
			grid-column:1;
			grid-row:1 / span 2;
		}
		> *:nth-child(2) {
			grid-column:2;
			grid-row:1;
		}
		> *:nth-child(3) {
			grid-column:2;
			grid-row:2;
		}
		.font(Montserrat, 400, 22px);
		text-align:center;
		text-transform:uppercase;
		svg {
			fill:@light_blue;
		}
		small {
			.inherit();
			.font(@size:.825em);
			display:block;
		}
		span {
			display:block;
		}
	}
	.fancy {
		background-color:@light_blue;
		border-radius: 10px;
		color:#fff;
		display:block;
		.font(Montserrat, 400, 22px);
		padding:.425em;
		padding-left:0;
		margin-left:3px;
		text-align:center;
		text-transform:uppercase;
		span {
			display:inline-block;
			.translateY(.075em);
		}
		svg {
			fill:@dark_blue;
			vertical-align:middle;
			height:62px;
			width:auto;
			margin:-17px 0 -15px;
			margin-right:.425em;
			filter:
				drop-shadow(1px 0px 0px @light_blue)
				drop-shadow(2px 2px 0px @light_blue)
				drop-shadow(2px -2px 0px @light_blue)
				drop-shadow(-2px 2px 0px @light_blue)
				drop-shadow(-2px -2px 0px @light_blue);
		}
		b {
			.inherit();
			.bold();
		}
	}

	nav {
		.menu-item-has-children {
			> a {
				padding:.5em 1em;
			}
		}
		.sub-menu {
			box-shadow:2px 2px 6px fade(#464748, 50);
			> li:not(:last-child) > a {
				border-bottom:1px solid;
			}
			a {
				line-height:1.5;
			}
		}
	}
}

#online-offer {
	padding:0 25px;
	overflow:hidden;
	margin-bottom:9px;
	> div {
		padding:50px 25px;
		.max-width(1010px);
		overflow:visible;
		.pseudoBeforeAfter;
		&:before, &:after {
			background-color:@dark_blue;
			opacity:.6;
		}
		&:before {
			left:unset;
			right:100%;
		}
		&:after {
			left:100%;
		}
	}
	&.lazyloaded { background-image:url('/wp-content/uploads/2021/03/vase.jpg'); }
	p {
		color:#6D6E71;
		.font(Montserrat, 500, 24px);
		text-align:center;
		b {
			.inherit(#F36B21);
			.font(@size:1.75em);
		}
		a {
			border:2px solid #F36B21;
			border-radius:.5em;
			display:inline-block;
			letter-spacing:.1em;
			.inherit();
			.font(@weight:700);
			padding:.375em .5em;
			text-transform:uppercase;
			&:hover {
				background-color:#F36B21;
				color:#fff;
			}
		}
	}
}

#above-footer {
	&.lazyloaded { background-image:url('/wp-content/uploads/2021/03/footer.jpg'); }
	display:grid;
	grid-gap:9px;
	grid-template-columns:1fr 1fr 1fr;
	margin-bottom:9px;
	> * {
		padding:25px;
		outline:9px solid #fff;
		.vertAlign;
		flex-direction:column;
	}
	#footer-info, #contact-us {
		background-color:fade(#6C7A34, 75);
		padding:50px 25px;
	}
	.footer-info {
		svg {
			fill:@light_blue;
			display:block;
			margin:0 auto 15px;
			width:auto;
			height:45px;
		}
		a, address {
			color:#fff;
			.font(Montserrat, 400, 18px, 1.25);
			text-align:center;
		}
		&:not(:last-child) {
			margin-bottom:50px;
		}
	}
	#footer-logo {
		background-color: rgba(0,0,0,0.25);
		img {
			display:block;
			margin:0 auto auto;
		}
		#social-media {
			text-align:center;

			a {
				display:inline-block;
				padding:10px;
				vertical-align:top;
				line-height: 1;
				margin:8px;
			}
			svg {
				height:32px;
				width:auto;
				path {
					fill:#fff;
					fill-opacity:.8;
					transition:fill-opacity .3s;
					-webkit-transition:fill-opacity .3s;
				}
			}
			a:hover svg path {
				fill-opacity:1;
			}
		}
	}
	#contact-us {
		h5 {
			color:#fff;
			letter-spacing:.1em;
			padding:.25em;
			margin-bottom:0;
			text-align:center;
			.font(~"Montserrat", 400, 36px);
		}
	}
}

/**** Full BORDER Color ****/
.wpcf7 .better-input {
	.wpcf7-form-control-wrap {
		position: relative;
		background-color:fade(#fff, 80);
		border-radius:5px;
		margin-bottom:10px;
		display:block;
		margin-top: 1.75em;
		color:#464748;
		.font(Montserrat, 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:#464748;
			border:0;
			padding: 1px 2px;
			// background: transparent;
			resize:none;
		}
		label {
			.transition();
		}

		input, select, textarea {
			color:#464748;
			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:#464748;
			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:#464748; // 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 0 25px auto;
		height: 2em;
		width: 10em;
		.font(~"Montserrat", 400, 20px);
		letter-spacing:.1em;
		background-color:fade(#fff, 80);
		border-radius:5px;
		text-transform:uppercase;
		color:#464748;
		.transition(color, .3s, linear);
		.transition(background-color, .3s, linear);
		&:hover {
			background-color:#464748;
			color:#fff;
		}
	}
}

#footer {
	padding:25px 25px 10px;
	text-align:center;
	> * {
		.max-width(1280px);
	}
	
	.footer-menu {
		display:grid;
		grid-template-columns:1fr 1fr 1fr;
		grid-gap:25px;
		margin-bottom:25px;
		> li > a {
			color:@blue;
			.font(~"Montserrat", 700, 20px);
		}
		ul {
			padding-left:10px;
		}
		li {
			line-height:1.375;
		}
	}
	
	.copyright { text-align:center;}
}

@media (min-width:769px) {
	#header {
		#logo { padding-bottom: 20px; }
		&.smaller {
			padding: 10px;
			
			#logo {
				img { max-height: 80px; }
			}
			.fancy svg { height: 40px; }
		}
	}
	#responsiveHeader { display: none; }
}

@media (max-width:1250px) and (min-width:769px) {
	#header {
		> div {
			grid-template-areas:
				"logo phone"
				"schedule ctt"
				"nav nav";
			grid-template-columns: 1fr auto;
			grid-template-rows: auto auto auto;
			grid-gap: 10px;
		}
	}
}
@media (max-width:768px) {
	#header {
		max-height: 100vh;
		padding: 10px;
		overflow-y: scroll;
		
		& { .transition(); }
		&.smaller {
			
			
		}
		
		
		
		> div {
			grid-template-areas:
				"logo buttons"
				"nav nav";
			grid-template-columns: 1fr 1fr;
			.ctt-header, .phone-header, .schedule-header {
				display: none;
			}
			
			#logo {
				text-align: center;
				
				img { max-height: 60px; }
			}
		}
	}
	#header-menu { width: 100%; }
	#responsiveHeader {
		display: grid;
		grid-template-columns: auto auto auto auto;
		grid-gap: 2px;
		width: 100%;
		a {
			padding: 5px;
			background-color: @blue;
			color: #fff;
			text-align: center;
			line-height: 1.2em;
			.transition();
			
			i {
				display: block;
			}
		}
	}
	#above-footer, #footer .footer-menu {
		grid-template-columns: 1fr;
	}
}

@media (max-width:450px) {
	#header {
		padding-bottom: 0;
		> div {
			grid-template-areas:
				"logo menu"
				"buttons buttons"
				"nav nav";
			grid-template-columns: 1fr 150px;
			grid-template-rows: calc(50px - -1.5vw) auto;
			grid-gap: 10px;
		}
	}
	#responsiveHeader { grid-area: buttons; }
	#header-menu {
		.navbar-toggle {
			position: absolute;
			top: 10px;
			right: 0;
			width: 150px !important;
			height: calc(50px - -1.5vw) !important;
		}
		figure {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
#wfboxOverlay {
	display:none;
}
body.safari.mobile #header { position:relative !important; }

.ma-portrait {
	display: flex;
    flex-direction: column;
    margin-bottom: 50px;
	p {
		margin: 0;
    	text-align: center;
    	font-weight: 700;
	}
	img {
		margin-bottom: 0;
    	border: 16px solid #fff;
	}
	.name {
    	font-size: 40px;
    	font-style: italic;
    	font-family: cursive;
    	margin-bottom: 6px;
	}
}