/* --- Base Resets & Variables --- */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: #f4f6f9;
	overflow-x: hidden;
	/* Prevents horizontal scrolling when menu is hidden */
}

:root {
	--nav-bg: #04142A;
	--nav-text: #ffffff;
	--nav-accent: #00fff0;
}

/* --- Navbar Container --- */
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* background-color: var(--nav-bg); */
	padding: 32px var(--pad) 0 var(--pad);
	position: relative;
}

/* --- Logo Styling --- */
.logo a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--nav-text);
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: 700;
}

.logo a img {
	height: 40px;
}

.logo-icon {
	stroke: var(--nav-accent);
}

/* --- Hidden Checkbox Input --- */
.nav-toggle {
	display: none;
}

/* --- Mobile Hamburger Button --- */
.nav-toggle-label {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
	cursor: pointer;
	z-index: 200;
	/* Keeps hamburger on top of the slide-out menu */
}

.nav-toggle-label span {
	display: block;
	height: 3px;
	width: 100%;
	background-color: var(--nav-text);
	border-radius: 3px;
	transition: all 0.3s ease-in-out;
}

/* --- Mobile Slide-Out Navigation Drawer --- */
.nav-menu {
	list-style: none;
	position: fixed;
	/* Fixed position stays relative to screen viewport */
	top: 0;
	left: 0;
	width: 280px;
	/* Width of your slide-out drawer */
	height: 100vh;
	background-color: var(--nav-bg);
	/* padding: 32px var(--pad); */
	padding-top: 5rem;
	/* Pushes links down below the top bar area */
	display: flex;
	flex-direction: column;
	z-index: 100;

	/* Slide out transition mechanics */
	transform: translateX(-100%);
	/* Moves menu completely off-screen to the left */
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	/* Ultra-smooth slide effect */
	box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
}

.nav-link {
	display: block;
	padding: 1.2rem 2rem;
	color: var(--nav-text);
	text-decoration: none;
	font-size: 1.2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.2s ease;
}

.nav-link:hover {
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--nav-accent);
	padding-left: 2.5rem;
	/* Slight shift to the right on hover */
}

/* --- The Magic: Checkbox Hack Slide Functionality --- */
/* When checkbox is checked, slide the menu into view */
.nav-toggle:checked~.nav-menu {
	transform: translateX(0);
}

/* Hamburger to 'X' animation */
.nav-toggle:checked~.nav-toggle-label span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.nav-toggle:checked~.nav-toggle-label span:nth-child(2) {
	opacity: 0;
}

.nav-toggle:checked~.nav-toggle-label span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* --- Responsive Desktop Layout --- */
@media (min-width: 768px) {
	.nav-toggle-label {
		display: none;
		/* Hide hamburger icon */
	}

	.nav-menu {
		position: static;
		height: auto;
		width: auto;
		padding-top: 0;
		flex-direction: row;
		transform: translateX(0);
		background-color: transparent;
		/* Ensure layout resets on larger screens */
		box-shadow: none;
		gap: 32px
	}

	.nav-link {
		padding: 0;
		border: none;
		font-family: 'Montserrat', Arial, sans-serif;
		font-size: 0.875rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		color: rgba(255, 255, 255, 0.78);
	}

	.nav-link:hover {
		background-color: transparent;
		/* padding-left: 1rem; */
		/* Reset mobile text shift */
	}

	.white-hero .nav-link {
		color: rgba(0, 0, 0, 0.78) !important;
	}
}