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

@red: #670C0F;
@blue: #0E3048;

body {
	background:linear-gradient(
		fade(#F8F9F9, 95), 
		fade(#F8F9F9, 95)
	),
		url(/wp-content/uploads/2021/08/anchors.svg);
}

hr {
	height:22px;
	background-color:transparent;
	background-image:url('/wp-content/uploads/2021/12/rope.svg');
	background-position:center;
	background-size:auto 100%;
	background-repeat:no-repeat;
}

.flex {
	display:grid;
	grid-gap:25px;
	@media (min-width:769px) { grid-template-columns:1fr 1fr; }
}

address {
	display:inline-block;
}
.hours table {
	td {
		line-height:1.25em;
	}
	td:first-child {
		text-align:right;
		padding-right:.25em;
	}
	td[rowspan="2"] {
		position:relative;
		b {
			position:absolute;
			top:50%;
			.translateY(-50%);
		}
	}
}

.entry-content {
	p, li {	.max({ font-size:15px; }); }
}

#before-header {
	background-color:@blue;
	color:#fff;
	display:block;
	.font(~"Fira Sans", 300, 24px);
	font-size:~"min(2.5vw, 24px)";
	padding:.375em;
	text-align:center;
}

div#header-menu a {
	@media (max-width:768px) {
		padding: 1px 1em;
	}
}

#header-links {
	display:grid;
	grid-gap:25px;
	grid-auto-flow:column;
	position:absolute;
	right:0;
	top:100%;
	padding:0 25px 25px;
	@media (max-width: 768px) {
		display: flex;
		justify-content: space-evenly;
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		top: unset;
		grid-gap: 0px;
		padding: 0px;
	}
	a {
		.vertAlign;
		flex-direction:column;
		color:#fff;
		background-color:fade(@blue, 80);
		padding:.75em 1em;
		height:100%;
		position:relative;
		.blur(10px);
		.font(~"Fira Sans", 300, 24px);
		@media (max-width: 768px) {
			height: inherit;
			border: 1px solid #fff;
    		width: 100%;
		}
		&:hover {
			color:@blue;
			background-color:fade(#fff, 80);
		}
		b {
			display:block;
			.inherit();
			.font();
		}
	}
	a:not(.header-phone) {
		background-image:url('/wp-content/uploads/2021/08/chevron.svg');
		background-size:auto 1.5em;
		background-repeat:no-repeat;
		background-position:~"calc(100% - .5em)" center;
		padding-right:2em;
	}
	.click-to-text {
		b { font-size:.6em; }
		@media (max-width: 768px) {
			display: none;
		}
	}
	.ctt-mobile {
		display: none;
		@media (max-width: 768px) {
			display: flex;
		}
	}
}

body:not(.home) {
	#header-links {
		.transition();
		.clip(@square_up);
	}
	#header:not(.timer) #header-links,
	#header:hover #header-links {
		.clip(@square);
	}
}

.button {
	border:1px solid @red;
	background-color:@red;
	color:#fff;
	display:inline-block;
	.font(~"Fira Sans", 700, 18px);
	padding:.75em 1em;
	text-align:center;
	.hover();
	&:hover {
		background-color:#fff;
		color:@red;
	}
}

body.safari #header { position:relative !important; }

#header {
	position:sticky;
	top:0;
	box-shadow:2px 0 6px fade(#393939, 50);
	background-color:#fff;
	z-index:999;

	hr {
		margin:0;
		width:100vw;
		margin-left:-25px;
	}

	@media (min-width:1280px) {
		display:grid;
		align-items:center;
		justify-items:center;
		grid-gap:25px;
		grid-template-columns:auto auto auto;
		grid-template-areas:
			"logo nav payment"
			"hr hr hr";
		#logo { grid-area:logo; }
		nav { grid-area:nav; }
		#payment { grid-area:payment; }
		hr { grid-area:hr; }
	}
	@media (min-width:769px) and (max-width:1279px) {
		display:grid;
		align-items:center;
		justify-items:center;
		grid-gap:25px;
		grid-template-columns:auto auto;
		grid-template-areas:
			"logo payment"
			"nav nav"
			"hr hr";
		#logo { grid-area:logo; justify-self:start; }
		nav { grid-area:nav; }
		#payment { grid-area:payment; }
		hr { grid-area:hr; }
	}
	@media (min-width:851px) and (max-width:960px) {
		ul.nav > li > a { font-size:.95em; }
	}
	@media (min-width:769px) and (max-width:850px) {
		ul.nav > li > a { font-size:.9em; }
	}

	.search {
		position:relative;
		.vertAlign;
		* { font-size:1em; }
		input[type="search"] {
			border:none;
			border-bottom:1px solid #111;
			line-height:1.5em;
			background-color:fade(#fff, 75);
			.blur(5px);
			position:absolute;
			right:100%;
			width:200px;
			padding:0 1em;
			.transition();
			&:focus {
				outline:none;
				border-bottom:1px solid @blue;
			}
		}
		input[type="submit"] {
			background-color:transparent;
			border:none;
			color:transparent;
			overflow:hidden;
			height:1.5em;
			width:3em;
			background-image:url('/wp-content/uploads/2021/08/search.svg');
			background-position:center;
			background-repeat:no-repeat;
			background-size:contain;
		}

		input[type="search"] {
			.clip(@square_right);
		}
		&:hover input[type="search"],
		input[type="search"]:focus {
			.clip(@square);
		}
	}

}
nav#header-menu ul.nav {
	> li:not(:last-child):after {
		content:' ';
		display:block;
		position:absolute;
		pointer-events:none;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
		height:1em;
		border-right:1px solid @blue;
	}
	ul.sub-menu { .blur(5px); }
}

#header {
	margin-bottom:0;
	padding:20px 25px 2px;
	.transition(margin-bottom);
	.transition(padding);
	#logo {
		img {
			width:auto;
			height:75px;
			.transition(height);
		}
	}
	#header-links {
		a {
			font-size:18px;	
			.hover();
			.transition(font-size);
		}
	}
	hr {
		height:40px;
		.transition(height);
	}
}
#header.shrink {
	padding:11px 25px 2px;
	margin-bottom:75px - 50px + 9px + 18px;
	#logo {
		img {
			height:50px;
		}
	}
	#header-links {
		a {
			font-size:18px;
			border: 1px solid #fff;
			@media (max-width: 425px) {
				font-size: 11px;		
			}
		}
	}
	hr {
		height:22px;
		.transition(height);
	}
}

#header {
	@media (min-width:769px) {
		ul.sub-menu {
			box-shadow:1px 1px 3px fade(#111, 50);
		}
	}
	@media (max-width:768px) {
		#payment { display:none !important; }
		display:grid;
		align-items:center;
		justify-items:center;
		grid-gap:25px;
		grid-template-areas:
			"logo nav"
			"hr hr";
		#logo { grid-area:logo; }
		nav { grid-area:nav; }
		hr { grid-area:hr; }
		
		nav {
			margin-right:25px;
			.navbar-toggle span { display:none !important; }
			ul.nav {
				position:absolute;
				background-color:#fff;
				top:100%;
				right:0;
				min-width:320px;
				li { text-align:right; }
			}
		}
		.search {
				display:block;
				position:relative;
				text-align:right;
			form {
				display:grid;
				grid-template-columns:1fr auto;
			}
			input[type="search"] {
				position:relative;
				.clip(@square);
				width:100%;
				right:unset;
			}
		}
	}
}

#npoo {
	.npoo {
		background-color:#F2F2F2;
		padding:20px;
		margin-bottom:20px;
		text-align:center;
		h4 {
			color:@blue;
			.font(~"Fira Sans", 700, 38px);
			margin-bottom:15px;
			text-align:center;
			text-transform:none
		}
		a {
			color:@red;
			display:inline-block;
			.font(~"Fira Sans", 500, 32px);
			.translateY(.125em);
			text-align:center;
			text-transform:none
		}
		p {
			.font(~"Fira Sans", 300, 20px, 1.75em);
			text-align:center;
			margin-bottom:0;
		}
	}
	.contact {
		h4 {
			background-color:@blue;
			color:#fff;
			.font(~"Fira Sans", 300, 38px);
			margin-bottom:15px;
			padding:.25em;
			text-align:center;
			text-transform:none
		}
		.input {
			.grid-one();
			color:#000;
			.font(~"Fira Sans", 300, 20px);
			margin-bottom:10px;
			label, input, textarea {
				background-color:#FAF1E3;
				padding:.5em .75em;
			}
			textarea { resize:none; }
			* {
				border:none;
				background-color:transparent;
				display:block;
				width:100%;
				.inherit();
				.font();
			}
			input, textarea {
				opacity:0;
				.transition();
				&:focus {
					opacity:1;
					outline:none;
				}
				&:not(:focus):not(:placeholder-shown) {
					background-color:#F2F2F2;
					color:@blue;
					opacity:1;
				}
			}
		}
		input[type="submit"] {
			.button;
			display:block;
			width:100%;
			font-size:24px;
		}
	}
}

#before-footer {
	background-image:url('/wp-content/uploads/2021/08/footer.jpg');
	clip-path: ellipse(200% 100% at 50% 100%);
	.padding-ends(75px);
	h5 {
		background-color:@blue;
		color:#fff;
		.font(~"Fira Sans", 300, 38px);
		margin-bottom:12px;
		padding:.25em;
		text-align:center;
		text-transform:none
	}
	form {
		.grid {
			grid-gap:12px;
			@media (max-width:540px) {
				grid-template-columns:1fr;
				> * {
					grid-column:span 1 !important;
				}
			}
		}
		.hide {
			display:block !important;
			overflow:hidden;
			opacity:0;
			width:0;
			height:0;
			pointer-events:none;
		}
		.input {
			.grid-one();
			color:#000;
			.font(~"Fira Sans", 300, 20px);
			margin-bottom:0;
			label, input, textarea {
				background-color:fade(#fff, 80);
				padding:.75em;
				margin-bottom:0;
			}
			textarea { resize:none; height:125px; }
			* {
				border:none;
				background-color:transparent;
				display:block;
				width:100%;
				.inherit();
				.font();
			}
			input, textarea {
				.transition();
				.blur(0);
				&:focus {
					opacity:1;
					outline:none;
				}
				&:not(:focus):not(:placeholder-shown) {
					.blur(10px);
					color:@blue;
				}
			}
		}
		input[type="submit"] {
			.button;
			display:block;
			width:100%;
			font-size:24px;
		}
	}
}

#office-info {
	padding:25px;
	h5 {
		color:@red;
		margin-bottom:10px;
		text-align:center;
		.font("Fira Sans", 700, 48px);
		text-transform:none;
	}
	div {
		text-align:center;
		.font("Fira Sans", 300, 32px);
		* {
			.inherit();
			.font();
			display:inline-block;
		}
		address { white-space:normal; }
	}
}

hr.no-margin {
	margin:1px 0;
}

#footer {
	clip-path: ellipse(200% 100% at 50% 100%);
	background-color:@blue;
	padding:50px 25px 10px;

	> div {
		.max-width(1400px);
		display:grid;
		grid-gap:25px;
		grid-template-columns:auto 1fr;
	}

	#social-media {
		align-self:start;
		display:grid;
		grid-gap:25px;
		a {
			border-radius:.1em;
			width:1.5em;
			height:1.5em;
			.vertAlign;
			font-size:32px;
			background-color:#fff;
			color:@blue;
			svg {
				fill:currentcolor;
				width:1em;
				height:auto;
			}
		}
	}

	nav#footer-menu {
		ul.footer-menu {
			display:grid;
			grid-gap:25px;
			.min({ grid-template-columns:2fr 2fr 1fr; });
			> li {
				border-left:1px solid #fff;
				padding-left:25px;
				> a {
					display:inline-block;
					.bold(@size:1.75em);
					margin-bottom:.25em;
				}
			}
			ul.sub-menu {
				columns:200px 2;
			}
		}
		li { line-height:1; }
	}
	.geo-served {
		line-height:1.5em;
	}
	.geo-served, .copyright {
		grid-column:1 / -1;
	}
}

@media screen and (max-width 768px){
	ul#menu-main-menu {
		max-height: 75vh;
		overflow: auto;
	}
}