website/components/Header.css

header {
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: var(--_translucent);
	color: var(--_font-color);
	user-select: none;
}

header div {
	max-width: var(--_wide-screen);
	margin: auto;
	padding: var(--_gap);
	display: flex;
	gap: var(--_gap);
}

.components__header__brand {
	text-wrap: nowrap;
	padding: var(--_gap);
	font-size: large;
	font-weight: bolder;

	& a {
		text-decoration: none;
		color: currentColor;
	}

	@media (width < 800px) {
		.components__header__brand__text {
			display: none;
		}

		& img {
			min-width: 1rem;
		}
	}
}

header nav {
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	gap: var(--_gap);
	align-items: center;

	& > li {
		list-style: none;
		transition: border var(--_transition-delay) ease;
		border: var(--_border-size) solid transparent;
	}

	& > li:hover,
	& > li:has(a:focus-visible),
	& > li:has(summary:focus-visible),
	& > li:has(details[open]) {
		border: var(--_border-size) solid currentColor;
	}

	@media (width < 800px) {
		& {
			justify-content: space-around;
		}
	}
}

header details {
	cursor: pointer;
	padding: var(--_gap-half);

	& summary {
		display: flex;
		gap: var(--_gap);
		list-style: none;
		outline: none;

		& i {
			display: none;
		}

		&::after {
			display: inline-block;
			content: '▽';
			transition: all var(--_transition-delay) ease;
		}

		@media (width < 800px) {
			& {
				display: grid;
				gap: 0;
				font-size: x-small;
				justify-items: center;
				align-items: center;
				font-weight: normal;
			}

			& i {
				display: inline;
				font-size: 1rem;
			}

			&::after {
				display: none;
			}
		}
	}

	&[open] summary::after {
		transform: rotate(60deg);
	}

	& ul {
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		position: absolute;
		background-color: var(--_translucent);
		backdrop-filter: blur(var(--_blur));
		border: var(--_border-size) solid currentColor;
		border-top: none;
		transform: translate(
			calc(-1 * var(--_gap-half) - 2px),
			calc(var(--_gap-half) + 2px)
		);

		@media (width < 800px) {
			& {
				border: var(--_border-size) solid currentColor;
				transform: translate(-33%, var(--_gap));
			}
		}
	}

	& li {
		list-style: none;
		border: none;
	}

	& li:hover,
	& li:has(a:focus-visible) {
		background-color: var(--_translucent);
	}

	& a {
		text-decoration: none;
		padding: var(--_gap) calc(var(--_gap-half) + 0.21rem);
		display: inline-block;
		outline: none;
	}
}

.components__header__nav_button {
	color: var(--_font-color);
	display: inline-block;
	text-decoration: none;
	outline: none;
	padding: var(--_gap-half) var(--_gap);

	& i {
		display: none;
	}

	@media (width < 800px) {
		& {
			display: grid;
			font-size: x-small;
			justify-items: center;
			align-items: center;
			font-weight: normal;
		}

		& i {
			display: inline;
			font-size: 1rem;
		}
	}
}