/* Navbar (desktop) */
.nav_container {
	display: flex;
	column-gap: 1rem;
	position: fixed;
	top: 0;
	right: 2%;
	padding: 1rem 2rem;
	z-index: 9;
	background: transparent;
}

/* Overlay (click outside closes sidebar) */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

/* Sidebar (hidden by default on mobile) */
.aside_container {
	position: fixed;
	top: 0;
	left: -250px; /* hidden off-screen */
	height: 100vh;
	width: 250px;
	background: oklch(from rgb(78, 78, 78) l c h);
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
	padding: 2rem 1rem;
	display: flex;
	padding-top: 8ch;
	flex-direction: column;
	row-gap: 1rem;
	transition: left 0.3s ease-in-out;
	z-index: 10;
}

/* When sidebar is open */
.aside_container.open {
	left: 0;
}

/* Hamburger button */
.hamburger {
	color: white;
	display: none;
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 11;
	background: none;
	border: none;
	font-size: 2rem;
	cursor: pointer;
}

/* RESPONSIVE BEHAVIOR */
@media (max-width: 768px) {
	.nav_container {
		display: none; /* hide top navbar */
	}

	.hamburger {
		display: block; /* show hamburger */
	}
}
