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

@blue: #2EB1AE;
@gray: #BBBDBF;

.fonts(@size: 54px) {
	.max({ font-size:(@size * .8); }, 1280);
	.max({ font-size:(@size * .6); });
	.max({ font-size:(@size * .4); }, 540);
}
#content {
	position:relative;
	z-index:1;
}
#header {
	position:relative;
	z-index:10;
	> div {
		padding:15px 50px;
		display:grid;
		grid-gap:25px;
		align-items:center;
		grid-template-columns:1fr auto;
		#logo { justify-self:start; }
	}
	figure.navbar-toggle {
		text-align:right;
		color:#fff;
		padding:10px 25px;
		font-size:32px;
		span { display:inline-block !important; }
	}
	nav {
		.padding-sides(25px);
		.searchLi {
			p:empty { display:none !important; }
			position:relative;
			* { height:100%; }
			.sub-menu {
				position:absolute;
				top:0;
				right:0;
				left:unset !important;
				li { background-color:transparent; }
				form {
					display:grid;
					grid-template-columns:1fr auto;
				}
				input[type="search"] {
					background-color:#fff;
					border:1px solid @blue;
					text-align:right;
					width:320px;
					&:focus { outline:none; }
				}
				input[type="submit"] {
					opacity:0;
				}
			}
		}
	}
}

#logo {
	max-width:400px;
}

#header-info {
	display:grid;
	@media (min-width:1081px) {	
	grid-gap:25px;
		grid-auto-flow:column;
	}
	.mobile {display: none;}
	@media (max-width:1080px) {	
		grid-gap:10px;
		grid-template-columns:auto 2px auto;
		grid-template-rows:auto 2px auto;
		grid-template-areas:
			"call hr-one schedule"
			"hr-two hr-two hr-two"
			"address hr-three contact";
		.header-info:nth-of-type(1) { grid-area:call; }
		.header-info:nth-of-type(2) { grid-area:address; }
		.header-info:nth-of-type(3) { grid-area:schedule; }
		.header-info:nth-of-type(4) { grid-area: contact; }
		hr:nth-of-type(1) { grid-area:hr-one; }
		hr:nth-of-type(2) { grid-area:hr-two;
			height:2px;
			width:100%;
		}
		hr:nth-of-type(3) { grid-area: hr-three; }
		.mobile { display: block; }
		.desktop { display: none; }
	}
	color:@blue;

	hr {
		width:2px;
		height:100%;
		margin:0;
	}
}

.header-info {
	color:inherit;
	.font(Montserrat, 500, 20px);
	.max({ font-size:18px; }, 1280);
	.max({ font-size:16px; }, 1080);
	padding:.5em;
	text-align:center;
	.vertAlign();
	span, address {
		display:block;
	}
	svg {
		fill:@gray;
		height:1.5em;
		width:auto;
		margin-right:1em;
	}
	@media (max-width:768px) {
		padding:.25em;
		span, address { display:none !important; }
		svg { margin-right:0; }
	}
}

nav#header-menu {
	background-color:@blue;
	text-align:center;
}

#before-footer {
	background-image:url('/wp-content/uploads/2021/07/createasmilepc.jpg');
	.pseudoBefore();
	&:before { background-color:fade(@blue, 80); }
	.grid {
		align-items:center;
	}
	#footer-info {
		color:#fff;
		* { color:inherit; }
		svg * { fill:currentcolor; }
		p {
			.font(Montserrat, 500, 24px);
			text-align:center;
			svg { height:2em; width:auto; }
			&:not(:last-child) {
				margin-bottom:10px;
			}
		}
	}

	#footer-logo {
		margin:0 25px;
		svg {
			width:100%;
			height:auto;
			> g > g > g { opacity:0; }
		}
	}
	#contact-us {
		h5 {
			color:#fff;
			.font(Montserrat, 400, 42px);
			.fonts(42px);
			text-align:center;
			text-transform:uppercase;
		}
	}
}

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

		input, select, textarea {
			color:inherit;
			font-size:inherit;
			font-weight:inherit;
			font-family:inherit;
			padding:.6em .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(.7em) translateX(.3em);
			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
			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;
		}
	}
	.betterSubmit {
		.font(Montserrat, 600, 32px);
		.fonts(32px);
		color:#fff;
		display:block;
		margin:25px 0 0 auto;
		max-width: 9em;
		position:relative;
		text-align:center;
		text-transform:uppercase;
		input {
			padding: 0.5em;
			width:100%;
			border:none;
			background:transparent;
			.inherit();
			.font();
		}
		&:before, &:after {
			content:' ';
			display:block;
			position:absolute;
			width:.75em;
			height:.75em;
		}
		&:before {
			top:0;
			left:0;
			.transition(top);
			.transition(left);
			border-top:2px solid;
			border-left:2px solid;
		}
		&:after {
			right:0;
			bottom:0;
			.transition(right);
			.transition(bottom);
			border-bottom:2px solid;
			border-right:2px solid;
		}
		&:hover {
			&:before {
				top:.2em;
				left:.2em;
			}
			&:after {
				right:.2em;
				bottom:.2em;
			}
		}
	}
}

#footer {
	background-color:#BBBDBF;
	padding:50px 25px 15px;
	overflow:hidden;
	> *:not(:last-child) {
		margin-bottom:25px;
	}
	ul.footer-menu {
		.max-width(1280px);
		margin-bottom:25px;
		display:grid;
		grid-gap:25px;
		.min({ grid-template-columns:2fr 2fr 1fr; });
		a[href="#"] { pointer-events:none !important; }
		> li {
			> a {
				font-size:1.25em;
				font-weight:700;
				padding-bottom:.25em;
				margin-bottom:.375em;
				text-transform:uppercase;
				position:relative;
				display:block;
				&:after {
					content:' ';
					display:block;
					position:absolute;
					width:200vw;
					height:1px;
					background-color:currentcolor;
					bottom:0;
					left:50%;
					.translateX(-50%);
				}
			}
		}
		ul {
			columns:2 200px;
		}
	}
}

#wpcf7-f371-p369-o1 {
	.wpcf7-form-control-wrap { display:block; }
	label {
		display:inline-block;
	}
	input[type="text"],
	input[type="tel"],
	input[type="email"],
	textarea, {
		display:block;
		width:100%;
		border:none;
		border-bottom:1px solid @blue;
		&:focus { outline:none; }
		.placeholder(transparent);
	}
	textarea {
		resize:none;
		height:100px;
	}
	input[type="submit"] {
		margin-top:20px;
		display:inline-block;
		padding:.5em;
		border:1px solid @blue;
		background-color:transparent;
	}
}