/* https://youtu.be/xXze-haVm7g?si=ks7mktgoL_egrX-R */

header {
	padding: var(--side-spacing);
		padding-top: var(--top-bottom-spacing);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	z-index: 5;

	position: fixed;
	top: 0px;
	/* top: -100px; */
	/* width: calc(100% - 24px); */
	width: 100dvw;
}

header h1 {
	font-size: 16px;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--clr-accent);
		border-radius: 3.5px;
	margin: 0 auto;
	padding-top: 3.5px;
		padding-bottom: 3.5px;
}

nav {
	position: relative;

	/* transition: top 0.3s; */

	ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;

		@media screen and (max-width: 680px) {
			position: absolute;
			right: 0;
			top: 150%;
			background: rgba(0, 100, 0, 0.9);
			flex-direction: column;
			z-index: 1;
			border-radius: 3px;
			padding: 5px 0;
			box-shadow: 0 0 10px #222;
			display: none;
		}

		@media screen and (max-width: 485px) {
			width: 100vw;
			height: 100vh;
			right: 0px;
			top: 0px;
			position: fixed;
			align-items: center;
			justify-content: center;
			/* background: rgba(#222, 0.9); */
			display: none;
		}
	}

	li {
		margin: auto 8px;
		a {
			--alpha: 0.7;
			text-transform: uppercase;
			font-size: 12px;
			letter-spacing: 0.1em;
			padding: 16px 8px;
				padding-bottom: 10px;
			border-bottom: 2px solid transparent;
			border-radius: 2.5px;
			transition:
				--alpha 0.3s ease-in-out,
				border-bottom 0.3s ease;
		}

		a:hover, a:focus {
			--alpha: 0.9;
			border-bottom: 2px solid var(--clr-accent-dark);
		}

		&.active a {
			--alpha: 1;
			border-bottom: 2px solid var(--clr-accent);
		}

		@media screen and (max-width: 680px) {
			margin: 0;

			a {
				display: block;
				text-align: center;
				min-width: 125px;
			}

			&.active a {
				background: rgba(0, 65, 0, 1);
				border-width: 1px;
			}

		}

		@media screen and (max-width: 485px) {
			margin: 2vh 0;

			a {
				font-size: 5vw;
				width: 40vw;
			}

			&.active a {
				background: none;
			}
		}
	}

	/* Hamburger menu for tablets and phones */
	@media screen and (max-width: 680px) {
		width: 40px;
		height: 25px;
		cursor: pointer;

		&::before,
		&::after {
			content: '';
			display: inline-block;
			height: 3px;
			width: 70%;
			position: absolute;
			left: 15%;
			top: 50%;
			background: var(--clr-primary);
			transition:
				transform 0.2s ease,
				top 0.2s ease;
			transform: rotate(0deg) translateY(-50%);
		}

		&::before {
			top: 30%;
		}

		&::after {
			top: 70%;
		}

		/* add hover to focus somehow to keep dropdown visible too*/
		&:focus,
		&:focus-within {
			&::before {
				top: 50%;
				transform: rotate(40deg) translateY(-50%);
			}

			&::after {
				top: 50%;
				transform: rotate(-40deg) translateY(-50%);
			}

			ul {
				display: flex;
			}
		}
	}
}

@property --alpha {
	syntax: "<number>";
	inherits: true;
	initial-value: 1.0;
}