:root {
	--header-padding: 			15px 0;
	--header-border-top-height:	30px;
	--header-border-top:		var(--header-border-top-height) solid var(--sage);
	--header-bg-color:			var(--sage-light);
	
	--menu-a-color:			var(--chocolate);
	--menu-a-color-hvr:		var(--white);
	--menu-a-spacing:		15px;
	
	--logo-width: 			180px;
	--logo-height: 			70px;
}

header {
	width:					100%;
	position:				fixed;
    top:					0;
    left:					0;
	z-index:				99;
	line-height:			1;
	font-weight:			500;
	box-sizing: 			border-box;
	height: 				var(--header-total-height);
	background-color: 		var(--header-bg-color);
	padding: 				var(--header-padding);
	border-top:				var(--header-border-top); 
	font-size: 				var(--header-font-size);
	line-height: 			var(--header-line-height);
}
	
header .logo {
	width:					var(--logo-width);
	height:					var(--logo-height);
	position: 				relative;
	z-index: 				1;
}

header .logo img {
	height:					var(--logo-height);
	width:					auto;
}

#header-menu {
	box-sizing: 						border-box;
}

@media (min-width: 991px) {
	:root {
		--header-font-size:				12px;
		--header-line-height: 			1;
		--header-total-height:			140px;
	}

	.menu-button a {
		--btn-border-color: 			var(--appricot);
		--btn-border-width: 			2px;
		--btn-bg-color:					var(--appricot);
		--btn-txt-color:				var(--chocolate);
		--btn-border-color-hvr:			var(--chocolate);
		--btn-bg-color-hvr:				var(--chocolate);
		--btn-txt-color-hvr:			var(--white);
	}

	.menu-button a {
		--btn-font-size:				var(--header-font-size);
		--btn-font-weight:				500;
	}

	header .menu-button a {
		transition: 			color .25s linear, border-color .25s linear, background-color .25s linear;
		text-decoration:		none;
		display:				inline-block;
		border: 				var(--btn-border-width) solid var(--btn-border-color);
		color: 					var(--btn-txt-color)			!important;
		background-color:		var(--btn-bg-color);
		padding:				var(--btn-padding);
		white-space: 			nowrap;
		border-radius:			var(--btn-radius);
		font-size: 				var(--btn-font-size);
		font-weight: 			var(--btn-font-weight)
	}

	header .menu-button a:hover,
	header .menu-button.current-menu-item a {
		border-color: 			var(--btn-border-color-hvr);
		background: 			var(--btn-bg-color-hvr);
		color: 					var(--btn-txt-color-hvr)		!important;
	}

	#header-nav {
		--btn-padding:					7px 13px;
		--btn-radius:					17px;
	}

	#hamburger {
		display:				none;
	}

	#header-nav {
		flex:					1 1 auto;
		min-width:				0;
		max-width: 				calc(100% - var(--logo-width) - var(--g-s));
		margin-left:			auto; /* This makes it right justified */
		align-content: 			center;
	}
	
	header .menu-main-menu-container {
		width:					100%;
	}	
	
	header .menu {
		display:				flex;
		align-items:			stretch;
		justify-content:		flex-end;
		gap:					var(--menu-a-spacing);
	}

	header .menu > .menu-item {
		display:				flex;
		align-items:			center;
		min-width:				0;
	}

	header .menu > .menu-item > a {
		display:				block;
		text-align:				center;
		z-index:				2;
	}

	header .menu-item-has-children .submenu-toggle {
		height: 				100%;
	}
	
	header .sub-menu {
		display:				none;
		text-transform:			none;
		position:				absolute;
		top: 					0;
		left:					-30px;
		background:				var(--header-bg-color);
		white-space: 			nowrap;
		z-index:				1;
		padding:				35px 30px 5px;
		text-align:				left;
	}
	
	header .sub-menu .menu-item {
		padding: 				10px 0;
		float: 					left;
		width: 					100%;
	}
	
	header li.menu-item-has-children:hover	.sub-menu,
	header li.open	.sub-menu,
	.sub-menu:hover	{
		display:				block;
	}
	
	header .sub-menu .menu-item a {
		padding:				10px 0;
		width:					100%;
	}
}

@media (max-width: 990px) {
	:root {
		--header-font-size:		19px;
		--header-line-height: 	34px;
		--header-total-height:	125px;
	}

	#hamburger {
		position: 				absolute;
		top: 					50%;
		right: 					var(--gutter);
		transform: 				translateY(-50%);
		width: 					56px;
		height: 				42px;
		padding: 				0;
		overflow: 				hidden;
		text-indent: 			-999px;
		background: 			transparent;
		border: 				0;
		cursor: 				pointer;
	}

	#hamburger::before {
		content: 				"";
		position: 				absolute;
		top: 					50%;
		left: 					0;
		transform: 				translateY(-50%);
		width: 					56px;
		height: 				5px;
		background: 			var(--chocolate);
		border-radius: 			999px;
		box-shadow:
								0 -15px 0 var(--chocolate),
								0 15px 0 var(--chocolate);
	}
	
	.menu-open #hamburger::before {
		box-shadow:				none;
	}
	
	#header-menu {
		padding: 				0 20px 80px;
		float:					left;
		width:					100%;
	}
	
	header .menu-main-menu-container,
	header .menu,
	header .menu-item {
		display:				block;
		width:					100%;
		box-sizing:				border-box;
	}
	
	#header-nav {
		display:				none;
		overflow-y: 			auto;
		top: 					var(--header-total-height);
		transform:				none;
		height: 				var(--viewport-minus-header-height);
		background:				inherit;
		opacity:				0;
		transition: 			opacity .25s linear;
		position:				absolute;
		right:					0;
		width: 					100%;
	}
	
	.menu-open 			#header-nav {
		display:				block;
	}

	.menu-opaque 		#header-nav {
		opacity:				1;
	}

	header .sub-menu {
		display:				none;
		box-sizing: 			border-box;
		padding-left: 			30px;
	}

	header li.open	.sub-menu {
		display:				block;
	}

	header .menu-item-has-children .submenu-toggle {
		height: 				54px;
	}

	header .menu-item a {
		display: 				inline-block;
		padding:				10px 20px 10px 0;
		font-weight: 			600;
	}

	header .header-tel {
		position: 				fixed;
		top: 					55px;
		right: 					100px;
		text-align: 			right;
	}

	#page-overlay {
		display:				none;
		position: 				fixed;
		top: 					var(--header-total-height);
		left: 					0;
		width: 					100%;
		height: 				calc( 100% - var(--header-total-height) );
		background-color: 		var(--header-bg-color);
		opacity:				0;
		transition: 			opacity .25s linear;
	}

	.menu-open		#page-overlay {
		display:				block;
	}
	
	.menu-opaque	#page-overlay {
		opacity:				1;
	}

	body:has(#header.menu-open) {
		overflow:					hidden;
	}
}

@media (max-width: 475px) {
	header .header-tel {
		display: 				none;
	}
}
	
header .menu-item a {
	color:						var(--menu-a-color);
	text-decoration: 			none;
}

header .current-menu-parent			> 	a,
header .menu-item.current-menu-item	> 	a,
.menu-item								a:hover {
	color:						var(--menu-a-color-hvr);
}

header .menu-item-has-children .submenu-toggle {
	position: 				absolute;
	z-index:				3;
	cursor: 				pointer;
	right:					0;
	top:					0;
	width:					100%;
	background:				none;
	border:					none;
	-webkit-appearance: 	none;
	-moz-appearance: 		none;
	appearance: 			none; 
}

#footer-nav {
	font-size:				14px;
	margin: 				10px 0;
}

@media (min-width: 941px) {
	#footer-top {
		align-items:			flex-end;
	}
}

#footer-menu .menu {
	column-count:			2;
	column-gap:				var(--col-gap);
}

#footer-menu .menu > .menu-item {
	break-inside:			avoid;
}

#footer-nav .sub-menu,
#footer-nav .header-tel {
	display:				none;
}