/* ------------------ */
/* Base + variables   */
/* ------------------ */
:root {
	--nav-bg: var(--color-nav-bg);
	--nav-fg: var(--color-nav-fg);
	--nav-muted: var(--color-nav-muted);
	--brand: var(--color-accent-primary);
	--ring: var(--color-nav-ring);
	--shadow: 0 10px 30px rgba(15, 23, 42, .08);
	--radius: 14px;
}

* {
	box-sizing: border-box
}

body {
	margin: 0
}

/* ------------------ */
/* Navbar             */
/* ------------------ */
.navbar {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 1000;
	transition: 0.5s ease;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	pointer-events: none;
}

.nav-wrap {
	/* Reset container styles as logo is now outside */
	margin: 0;
	padding: 0;
	width: fit-content;
	pointer-events: none;
	position: absolute;
	top: 0px;
	right: 0px;
	transition: all 0.5s ease;
}

/* Scrolled state - ONLY applies on desktop */
@media (min-width: 1251px) {
	.navbar.scrolled .nav-wrap {
		right: 50%;
		top: 50px;
		border-radius: 10px;
		transform: translate(50%, -50%);
		width: fit-content;
	}

	.navbar.scrolled .logo img {
		height: 75px;
	}
}

/* Logo */
.logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	background: var(--nav-bg);
	padding: 5px;
	margin: 10px;
	border-radius: 10px;
	pointer-events: auto;
	z-index: 1100;
	position: relative;
}

.logo img {
	height: 100px;
	width: auto;
	border-radius: 10px;
	display: block;
	transition: height 0.5s ease;
}

.logo-text {
	font-size: 18px;
	font-weight: 700;
	display: none;
}

/* Nav Actions Container */
.nav-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--nav-bg);
	backdrop-filter: saturate(140%) blur(16px);
	padding: 20px;
	border-radius: 0px 0px 0px 10px;
	pointer-events: auto;
}

.navbar.scrolled .nav-actions {
	border-radius: 10px;
}

/* Links row */
.nav-links {
	list-style: none;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: bold;
}

.mobile-nav-header {
	display: none;
}

.nav-item {
	position: relative;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 5px;
	text-decoration: none;
	color: var(--nav-fg);
	letter-spacing: .1px;
	background-color: var(--color-mask-foreground);
	white-space: nowrap;
	transition: color .5s ease;
}

.nav-link:hover,
.nav-link.active {
	color: var(--brand);
}

/* Remove underline */
.nav-link.active::after {
	display: none;
}

/* ------------------ */
/* Mega Menu          */
/* ------------------ */
.nav-item.dropdown {
	position: relative;
}

.dropdown-toggle {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	color: var(--nav-fg);
	border-radius: 5px;
	transition: color .5s ease, background-color .5s ease;
}

.dropdown-toggle:hover,
.nav-item.dropdown:focus-within>.dropdown-toggle {
	background-color: var(--color-mask-foreground);
	color: var(--brand);
}

/* Keep menu open */
@media (min-width: 1251px) {
	.nav-item.dropdown:hover .mega-menu,
	.nav-item.dropdown:focus-within .mega-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(8px) scale(1);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
	}
}

/* Menu container */
.mega-menu {
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	width: max-content;
	background: var(--color-mask-foreground);
	padding: 20px;
	margin-top: -10px;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .06);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 999;
	transform-origin: top center;
	transform: translateY(0) scale(0.98);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.mega-inner {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 40px;
}

.mega-col {
	position: relative;
}

.mega-col:not(:first-child)::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 15%;
	height: 70%;
	width: 1px;
	background-color: var(--brand);
}

.mega-col h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--nav-fg);
	margin-bottom: 18px;
}

/* Links with icons */
.mega-link {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.mega-link .material-icons {
	color: var(--color-accent-blue);
	font-size: 22px;
}

.mega-link .fi {
	font-size: 22px;
	height: 22px;
}

.mega-link div strong {
	display: block;
	font-weight: 600;
	color: var(--nav-fg);
}

.mega-link div span {
	display: block;
	font-size: 14px;
	color: var(--nav-muted);
	margin-top: 2px;
}

.mega-link:hover strong,
.mega-link:hover span {
	color: var(--color-accent-blue);
}

/* ------------------ */
/* Theme Toggle       */
/* ------------------ */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 10px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--nav-fg);
	background-color: var(--color-mask-foreground);
	transition: color 0.5s ease;
}

.theme-toggle:hover {
	color: var(--brand);
}

.theme-toggle .moon { display: none; }
.theme-toggle .sun { display: block; }

[data-theme="dark"] .theme-toggle .moon { display: block; }
[data-theme="dark"] .theme-toggle .sun { display: none; }

/* Remove default visited/underline */
.navbar a {
	color: inherit;
	text-decoration: none;
}

/* ------------------ */
/* Mobile             */
/* ------------------ */
.mobile-menu-btn {
	display: none;
	border: none;
	background: none;
	padding: 10px;
	border-radius: 10px;
	cursor: pointer;
	background-color: var(--color-mask-foreground);
}

.mobile-menu-btn .material-icons {
	font-size: 28px;
	color: var(--nav-fg);
}

/* ------------------ */
/* Mobile Only Styles */
/* ------------------ */
@media (max-width: 1250px) {

	.logo {
		position: fixed !important;
		top: 10px;
		left: 10px;
		margin: 0;
		z-index: 1100;
	}

	.logo img {
		height: 60px;
	}

	.nav-wrap {
		position: fixed !important;
		top: 10px;
		right: 10px;
		padding: 0;
		margin: 0;
		transform: none !important;
		border-radius: 10px;
	}

	.nav-actions {
		padding: 10px;
		border-radius: 10px;
		backdrop-filter: none;
	}

	.mobile-menu-btn {
		display: inline-flex;
		color: var(--nav-fg);
	}

	.nav-actions > .nav-links {
		display: flex;
	}

	.mobile-nav-header {
		display: flex;
		align-items: center;
		gap: 10px;
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 1100;
	}

	.mobile-close-btn {
		background: none;
		border: none;
		cursor: pointer;
		color: var(--nav-fg);
	}

	.mobile-back-btn {
		background: none;
		border: none;
		cursor: pointer;
		color: var(--nav-fg);
		display: none;
	}

	.nav-links {
		position: fixed;
		top: 0;
		right: 0;
		margin: 10px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		border-radius: 20px;
		background: var(--color-mask-foreground);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
		padding: 20px;
		transform: translateX(100vw);
		transition: transform .5s ease, visibility 0s linear .5s, box-shadow .5s ease;
		overflow-y: auto;
		overflow-x: hidden;
		visibility: hidden;
		z-index: 1050;
	}

	.nav-links.open {
		transform: translateX(0);
		display: flex;
		visibility: visible;
		transition: transform .5s ease, visibility 0s linear 0s, box-shadow .5s ease;
	}

	.nav-link {
		width: auto;
		justify-content: center;
	}

	.nav-item {
		position: static;
	}

	.dropdown .mega-menu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--color-mask-foreground);
		z-index: 100;
		padding: 80px 20px 20px;
		overflow-y: auto;
		overflow-x: hidden;
		transform: translateX(100%);
		opacity: 0;
		visibility: hidden;
		transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
		box-shadow: none;
		max-height: none;
		margin-top: 0;
		pointer-events: auto;
		border-radius: 20px;
	}

	.dropdown.open .mega-menu {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
		transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
		padding: 100px 50px 50px;
	}

	.nav-links.submenu-open {
		overflow: hidden;
		justify-content: center;
		padding-top: 20px;
	}

	.nav-links.submenu-open .nav-item:not(.open) {
		display: none;
	}

	.nav-links.submenu-open .nav-item.open {
		position: static;
	}

	.nav-links.submenu-open .dropdown-toggle {
		display: none;
	}

	.nav-links.submenu-open .mega-menu {
		position: absolute;
	}

	.mega-inner {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.mega-col:not(:first-child)::before {
		display: none;
	}
}