nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	/*background-color: #00BAF0;
	background: linear-gradient(to left, #f46b45, #eea849);*/
	/*height: 50px;*/
	padding: .5em;
	/*box-sizing: border-box;*/
	color: var(--button-primary-color);
	background-color: hsl(var(--accent-hue), 86%, 70%);
}

header {
	position:sticky;
	top:0;
	left:0;
	box-shadow: 0px 0px 11px 4px rgba(0,0,0, .2);
	z-index: 1; /* For elements with reduced opacity to stay in background*/
}

.logoMobile svg {
	fill:white;
}

.menu {
	display: flex;
	flex-direction: row;
	list-style-type: none;
	margin: 0;
	padding: 0;
	align-items: center;
	gap:.5em;
}

.submenu {
	opacity:0;
	visibility: hidden;
	/*display: none;*/
	position: absolute;
	transition: visibility 0s linear 400ms, opacity 400ms;
	background-color: hsl(var(--accent-hue), 86%, 70%);
	z-index: 100;
	padding-top:.5em;
	padding-bottom:.5em;
	min-width:200px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.menu li a {
	display:inline-block;
	padding:1em;
	box-sizing: border-box;
	color:#222;
}

.menu li a:hover {
	color:white;
}

.submenu li a {
	padding:.5em;
	padding-left:1em;
	padding-right:1em;
	width:100%;
}

/*.menu li {
	background-color:red;
	height:100%;
}*/

.menu li a[data-page="Home"] svg {
	max-height:40px;
}

.menu li a[data-page="Home"]:has(svg) {
	padding-top:0;
	padding-bottom:0;
}

.menu li a[data-page="Home"] svg {
	fill:#222;
	transition: fill 1s 0s;
}

.menu li a[data-page="Home"]:hover svg, .menu li.current a[data-page="Home"] svg {
	fill:white;
	transition: fill .5s 0s;
}

.menu li {
	border-radius:5px;
	transition: background-color 1s 0s, border-radius 1s 0s;
	margin-bottom:0;
}

.submenu li {
	border-radius: 0;
}

.menu li:hover {
	background-color:rgba(255, 255, 255, .5);
	transition: all .5s 0s;
}

.menu li:has(.submenu):hover {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	transition: border-radius .5s 0s;
}

.menu li.Home:has(svg):hover {
	background-color: transparent;
}

.menu li:hover .submenu {
	/*display:block;*/
	visibility: visible;
	opacity:1;
	transition: visibility 0s linear 0s, opacity 300ms;
}

.menu > li.current, .submenu > li.current {
	color: var(--button-primary-color);
	background-color: var(--accent-color);
}

.menu > li.current a, .submenu > li.current a {
	color: white;
}

.menu > li:not(.current) a, .submenu > li:not(.current) a {
	color: #222;
}
@media (min-width: 701px) {
	.menu > li.current:has(svg) {
		background-color: transparent;
	}
}

.menu-button-container {
	display: none;
	height: 100%;
	width: 30px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#menu-toggle, .submenu-toggle {
	display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
	display: block;
	background-color: #fff;
	position: absolute;
	height: 4px;
	width: 30px;
	transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
	border-radius: 2px;
}

.menu-button::before {
	content: "";
	margin-top: -8px;
}

.menu-button::after {
	content: "";
	margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
	margin-top: 0px;
	transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
	background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
	margin-top: 0px;
	transform: rotate(-405deg);
}

.submenu-toggle-label {
	display:none;
	width:100px;
	text-align:center;
}

.showMobile {
	display:none;
}

.hideMobile {
	display:inline-block;
}

@media (max-width: 700px) {
	nav {
		height: 50px;
		box-sizing: border-box;
	}
	
	.menu-button-container {
		display: flex;
	}

	.menu {
		position: absolute;
		top: 0;
		margin-top: 50px;
		left: 0;
		flex-direction: column;
		width: 80%;
		justify-content: center;
		align-items: center;
		--shadow-color: 286deg 36% 48%;
		--shadow-elevation-low:
		  0.5px 0.5px 0.6px hsl(var(--shadow-color) / 0.67),
		  0.8px 0.7px 1px -1.9px hsl(var(--shadow-color) / 0.51),
		  2.1px 2.1px 2.7px -3.9px hsl(var(--shadow-color) / 0.35);
		--shadow-elevation-medium:
		0.5px 0.5px 0.6px hsl(var(--shadow-color) / 0.7),
		1.2px 1.2px 1.6px -1.3px hsl(var(--shadow-color) / 0.58),
		3.9px 3.7px 4.9px -2.6px hsl(var(--shadow-color) / 0.45),
		10.7px 10.3px 13.6px -3.9px hsl(var(--shadow-color) / 0.32);
		box-shadow:var(--shadow-elevation-medium);
		border-bottom-right-radius: 5px;
		background-color:white;
	}
	
	.menu > li:last-child {
		border-bottom-right-radius: 5px;
	}
	
	.submenu {
		display:none;
		position:static;
		padding-left:1em;
		opacity: 1;
		/*visibility: visible;*/
		border-radius:0;
		background-color: white;
		transition:none;
	}

	
	#menu-toggle ~ .menu {
		margin-left:-100%;
		transition: margin-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	#menu-toggle:checked ~ .menu {
		display:block;
		margin-left:0px;
		transition: margin-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	.submenu-toggle-label {
		display:inline-block;
	}
	
	.submenu-toggle:checked ~ .submenu {
		display:block;
		visibility: visible;
	}
	
	.menu li {
		margin: 0;
		width: 100%;
		color: #222;
		background-color: white;
		border-radius: 0;
	}
	
	.menu li:not(.current):hover {
		background-color:white;
	}
	
	.menu li div {
		display:flex;
		align-items:center;
	}
	
	.menu li.subCurrent {
		/*background-color:transparent;*/
	}
	
	.menu li a {
		display:block;
		width:100%;
		font-size: 110%;
	}
	/*.menu li:hover {
		background-color:white;
		transition: all .5s 0s;
	}*/
	
	.showMobile {
		display:inline-block;
	}
	
	.hideMobile {
		display:none;
	}
}