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

#header {
	border-bottom:15px solid @blue;
	position:sticky;
	top:0;
	padding:25px;
	display:grid;
	align-items:center;
	grid-template-columns:auto 1fr auto;
	grid-gap: 10px;
	.blur(10px);
	background-color:fade(#fff, 80);
	.header-area { grid-column:1; }
	nav { grid-column:3; }
	
	figure.navbar-toggle {
		font-size:0;
		color:@blue;
		border:2px solid #8AAEC7;
		border-radius:10px;
		line-height:1;
		padding:5px 10px;
		.transition(background-color, .3s);
		cursor:pointer;
		position:relative;
		&, span {
			&:before, &:after {	
				content:' ';
				display:block;
				position:absolute;
				width:43px;
				height:4px;
				background-color:@blue;
				border-radius:2px;
				top:12px;
				bottom:0;
				margin:auto;
			}
		}
		span {
			display:block;
			font-size:16px;
			line-height:1;
			padding-bottom:35px;
			&:before {
				.translateY(-10px);
			}
			&:after {
				.translateY(10px);
			}
		}
		&:hover {
			background-color:#8AAEC7;
		}
	}
	input.navbar-toggle:hover + figure.navbar-toggle {
		background-color:#8AAEC7;
	}
	
	.header-phone, .click-to-text, .button {
		display:none !important;
	}
}

#header {
	#header-menu {
		.navbar-toggle {
			~ ul.nav {
				position:absolute;
				top:~"calc(100% - -15px)";
				right:0;
				width:320px;
				max-width:90vw;
				height:100vh;
				background-color:#fff;
				box-shadow:0 0 6px fade(#555, 50);
				> li { color:@blue; }
				> li.active, li:hover { color:@green; }
				.sub-menu {
					> li {
						> a {
							padding-top: 1px;
							padding-bottom: 1px;
						}
					}
				}
			}
			~ figure.navbar-toggle {
				&:before, &:after {
					.rotate(0);
					.transition(all, .3s);
				}
				span {
					&:before, &:after {
						opacity:1;
						.transition(all, .3s);
					}
				}
			}
			&:checked ~ figure.navbar-toggle {
				&:before {
					.rotate(-45deg);
				}
				&:after {
					.rotate(45deg);
				}
				span {
					&:before, &:after {
						opacity:0;
					}
				}
			}
		}
	}
}

#welcome {
	> div {
		* {
			max-width: 100%;
			width: 100%;
			overflow: hidden;
		}
	}
	.wpcf7 .better-input input[type="submit"] {
		font-size: 12px;
	}
}