:root {
	--red: rgb(255, 36, 36);
	--blue: rgb(25, 196, 253);
	--green: rgb(0, 168, 0);
	--orange: rgb(255, 166, 0);
	--yellow: yellow;
	--purple: rgb(170, 0, 255);
	--pink: rgb(255, 105, 180);
	--teal: rgb(0, 180, 180);
	--cyan: rgb(0, 255, 255);
	--lime: rgb(180, 255, 0);
	--brown: rgb(180, 120, 60);
	--gray: rgb(160, 160, 160);
	--white: white;
}

header {
	background-color: rgb(0, 0, 0);
	height: 5vh;
	display: flex;
	flex-direction: row;
	color: white;
	font-weight: bold;
	align-items: center;
	gap: 1rem;
	font-size: 16pt;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 100;
	transition: transform 0.3s ease;
}

header.header-hidden {
	transform: translateY(-100%);
}

.hamburger {
	display: none;
	background: none;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	color: white;
	font-size: 1.8rem;
	cursor: pointer;
	padding: 6px 14px;
	line-height: 1;
	margin-left: auto;
}

.header-logo {
	text-decoration: none;
	color: white;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	padding-left: 1em;
	flex-shrink: 0;
}

header > ul {
	font-family: "Roboto", sans-serif;
}

header ul {
	display: flex;
	flex-direction: row;
	list-style: none;
	height: 100%;
}

header > ul > li > a {
	padding: 10px;
	border: none;
	background-color: rgb(42, 42, 43);
	font-weight: 800;
	cursor: pointer;
	height: 5vh;
	width: 10rem;
	font-size: 1rem;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* Dynamic hoverColor rules for all supported colors */
[data-hoverColor="red"] {
	border-bottom: 5px solid var(--red);
	color: var(--red);
}
[data-hoverColor="blue"] {
	border-bottom: 5px solid var(--blue);
	color: var(--blue);
}
[data-hoverColor="green"] {
	border-bottom: 5px solid var(--green);
	color: var(--green);
}
[data-hoverColor="orange"] {
	border-bottom: 5px solid var(--orange);
	color: var(--orange);
}
[data-hoverColor="yellow"] {
	border-bottom: 5px solid var(--yellow);
	color: var(--yellow);
}
[data-hoverColor="purple"] {
	border-bottom: 5px solid var(--purple);
	color: var(--purple);
}
[data-hoverColor="pink"] {
	border-bottom: 5px solid var(--pink);
	color: var(--pink);
}
[data-hoverColor="teal"] {
	border-bottom: 5px solid var(--teal);
	color: var(--teal);
}
[data-hoverColor="cyan"] {
	border-bottom: 5px solid var(--cyan);
	color: var(--cyan);
}
[data-hoverColor="lime"] {
	border-bottom: 5px solid var(--lime);
	color: var(--lime);
}
[data-hoverColor="brown"] {
	border-bottom: 5px solid var(--brown);
	color: var(--brown);
}
[data-hoverColor="gray"] {
	border-bottom: 5px solid var(--gray);
	color: var(--gray);
}
[data-hoverColor="white"] {
	border-bottom: 5px solid var(--white);
	color: var(--white);
}

[data-hoverColor]:hover {
	color: black;
	font-weight: 900;
	border-bottom: 5px solid black;
}

[data-hoverColor="red"]:hover {
	background-color: var(--red);
}
[data-hoverColor="blue"]:hover {
	background-color: var(--blue);
}
[data-hoverColor="green"]:hover {
	background-color: var(--green);
}
[data-hoverColor="orange"]:hover {
	background-color: var(--orange);
}
[data-hoverColor="yellow"]:hover {
	background-color: var(--yellow);
}
[data-hoverColor="purple"]:hover {
	background-color: var(--purple);
}
[data-hoverColor="pink"]:hover {
	background-color: var(--pink);
}
[data-hoverColor="teal"]:hover {
	background-color: var(--teal);
}
[data-hoverColor="cyan"]:hover {
	background-color: var(--cyan);
}
[data-hoverColor="lime"]:hover {
	background-color: var(--lime);
}
[data-hoverColor="brown"]:hover {
	background-color: var(--brown);
}
[data-hoverColor="gray"]:hover {
	background-color: var(--gray);
}
[data-hoverColor="white"]:hover {
	background-color: var(--white);
}

/* ─── Mobile header ──────────────────────────────────────── */

@media (max-width: 768px) {
	header {
		height: 5vh;
		min-height: 5vh;
		padding: 0;
		position: relative;
		flex-wrap: wrap;
		overflow: visible;
	}
	header.nav-expanded {
		height: auto;
		min-height: auto;
	}
	header.header-hidden {
		transform: none;
	}

	.hamburger {
		display: block;
	}

	header > ul {
		display: none;
		flex-direction: column;
		gap: 4px;
		padding: 0 10px 6px;
		width: 100%;
	}
	header > ul.nav-open {
		display: flex;
	}

	header > ul > li {
		width: 100%;
	}
	header > ul > li > a {
		height: auto;
		width: 100%;
		padding: 8px 12px;
		font-size: 0.9rem;
		border-bottom-width: 3px;
	}
	#admin-nav-link {
		margin-left: 0 !important;
	}
}