/* Landing navigation — dark glass bar + mobile drawer */

.vala-landing-nav--glass {
	--nav-bg: rgba(7, 24, 42, 0.78);
	--nav-bg-solid: #07182a;
	--nav-border: rgba(130, 230, 255, 0.16);
	--nav-text: #eaf7ff;
	--nav-text-muted: rgba(234, 247, 255, 0.72);
	--nav-hover-bg: rgba(255, 255, 255, 0.08);
	--nav-accent-cyan: #22d3ee;
	--nav-accent-mint: #5ef0be;
	--nav-cta-text: #061421;
	--nav-panel-bg: #06121f;

	position: sticky;
	top: 14px;
	z-index: 200;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--nav-text);
	border: 0;
}

.vala-landing-nav__sticky {
	width: 100%;
}

.vala-landing-nav__shell {
	width: 100%;
	max-width: none;
	padding: 0 clamp(12px, 2.4vw, 22px);
	box-sizing: border-box;
}

.vala-landing-nav__card {
	width: 100%;
	border-radius: 22px;
	background: var(--nav-bg);
	border: 1px solid var(--nav-border);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transition:
		box-shadow 0.22s ease,
		backdrop-filter 0.22s ease,
		border-color 0.22s ease;
}

.vala-landing-nav.is-scrolled .vala-landing-nav__card {
	box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-color: rgba(130, 230, 255, 0.22);
}

.vala-landing-nav__inner {
	min-height: 56px;
	padding: 8px clamp(10px, 1.6vw, 16px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(8px, 1.2vw, 14px);
	flex-wrap: nowrap;
}

.logo-pill,
.vala-landing-brand.logo-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	flex-shrink: 0;
	min-width: 0;
}

.vala-landing-brand img {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(34, 211, 238, 0.28);
	flex-shrink: 0;
}

.vala-landing-brand__name {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.vala-landing-nav__links {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	gap: clamp(4px, 0.8vw, 8px);
	justify-content: center;
}

.vala-landing-nav__links--tablet {
	display: none;
}

.vala-nav-link {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.2;
	color: var(--nav-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease;
}

.vala-nav-link:hover,
.vala-nav-link:focus-visible {
	background: var(--nav-hover-bg);
	color: #fff;
	transform: translateY(-1px);
	text-decoration: none;
}

.vala-nav-link.is-active {
	color: #fff;
	background: var(--nav-hover-bg);
	position: relative;
}

.vala-nav-link.is-active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--nav-accent-cyan);
}

.vala-landing-nav__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.vala-lang-switch--nav-desktop {
	display: inline-flex;
}

.vala-lang-switch__filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0 10px 0 8px;
	min-height: 38px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
	position: relative;
}

.vala-lang-switch__globe {
	display: inline-flex;
	color: var(--nav-text-muted);
}

.vala-lang-switch__select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 0 18px 0 2px;
	min-width: 2.4rem;
	background: transparent;
	color: var(--nav-text);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.vala-lang-switch__chevron {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--nav-text-muted);
	pointer-events: none;
}

.vala-lang-switch__filter:focus-within {
	border-color: rgba(130, 230, 255, 0.35);
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.vala-landing-btn--nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	background: linear-gradient(135deg, #1cc8f2 0%, #48e5b5 100%);
	color: var(--nav-cta-text);
	box-shadow: 0 10px 26px rgba(28, 200, 242, 0.22);
	transition: filter 0.18s ease, transform 0.18s ease;
}

.vala-landing-btn--nav-cta:hover,
.vala-landing-btn--nav-cta:focus-visible {
	filter: brightness(1.05);
	transform: translateY(-1px);
	color: var(--nav-cta-text);
}

.vala-nav-link--login {
	color: var(--nav-text);
	font-weight: 700;
}

.vala-landing-nav__menu-btn {
	display: none;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.08);
	color: var(--nav-text);
	font: inherit;
	font-size: 13px;
	font-weight: 750;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.vala-landing-nav__menu-btn:hover,
.vala-landing-nav__menu-btn:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(130, 230, 255, 0.28);
}

.vala-landing-nav__menu-icon {
	display: none;
	line-height: 0;
}

/* Drawer — portaled to document.body via vala-landing-nav.js */
.vala-landing-nav__backdrop {
	position: fixed;
	inset: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	z-index: 9998;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(2, 12, 24, 0.58);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 1;
}

.vala-landing-nav__backdrop[hidden],
.vala-landing-nav__drawer[hidden] {
	display: none !important;
}

.vala-landing-nav__drawer {
	--nav-drawer-text: rgba(245, 250, 255, 0.95);
	--nav-drawer-text-muted: rgba(220, 235, 245, 0.78);
	--nav-drawer-label: rgba(235, 247, 255, 0.92);

	position: fixed;
	top: max(12px, env(safe-area-inset-top, 0px));
	right: 16px;
	left: 16px;
	bottom: auto;
	z-index: 9999;
	width: auto;
	max-width: none;
	height: auto;
	max-height: min(640px, calc(100dvh - 24px));
	display: flex;
	flex-direction: column;
	padding: 14px 16px max(16px, env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	border-radius: 24px;
	border: 1px solid rgba(148, 210, 255, 0.18);
	background-color: #07182b;
	background-image:
		radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.14), transparent 34%),
		linear-gradient(180deg, rgba(7, 24, 43, 0.98) 0%, rgba(3, 14, 28, 0.98) 100%);
	color: var(--nav-drawer-text);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	opacity: 1;
	isolation: isolate;
}

.vala-landing-nav__drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
	flex-shrink: 0;
	position: relative;
	top: auto;
	z-index: 2;
	padding: 10px 2px 10px;
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

.vala-landing-nav__drawer-head::before,
.vala-landing-nav__drawer-head::after {
	content: none;
	display: none;
}

.vala-landing-nav__drawer-title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

.vala-landing-nav__drawer-close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--nav-drawer-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.vala-landing-nav__drawer-close:hover,
.vala-landing-nav__drawer-close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(148, 210, 255, 0.28);
	color: #fff;
}

.vala-landing-nav__drawer-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.vala-nav-link--drawer {
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid transparent;
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--nav-drawer-text);
	background: transparent;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}

.vala-nav-link--drawer:hover,
.vala-nav-link--drawer:focus-visible {
	background: rgba(255, 255, 255, 0.035);
	border-color: rgba(148, 210, 255, 0.12);
	color: #fff;
	transform: none;
}

.vala-nav-link--drawer.is-active {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(34, 211, 238, 0.2);
	color: #fff;
}

.vala-nav-link--drawer.is-active::after {
	bottom: 12px;
	left: 16px;
	margin-left: 0;
}

.vala-landing-nav__drawer-lang {
	flex-shrink: 0;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vala-landing-nav__drawer-lang-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nav-drawer-label);
}

.vala-landing-nav__drawer-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.vala-landing-nav__lang-btn {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 10px 16px;
	min-height: 40px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--nav-drawer-text-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	transition:
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.vala-landing-nav__lang-btn:hover,
.vala-landing-nav__lang-btn:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(148, 210, 255, 0.28);
	color: #fff;
}

.vala-landing-nav__lang-btn.is-active {
	background: linear-gradient(135deg, #1cc8f2 0%, #48e5b5 100%);
	border-color: transparent;
	color: #061421;
	box-shadow: 0 8px 22px rgba(28, 200, 242, 0.28);
}

.vala-landing-nav__lang-sep {
	color: rgba(255, 255, 255, 0.35);
}

.vala-landing-nav__drawer-foot {
	flex-shrink: 0;
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vala-landing-btn--drawer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	padding: 0 20px;
	box-sizing: border-box;
	font-size: 15px;
	font-weight: 800;
	background: linear-gradient(135deg, #1cc8f2 0%, #48e5b5 100%);
	color: #061421;
	border: 0;
	box-shadow: 0 10px 26px rgba(28, 200, 242, 0.28);
}

.vala-landing-btn--drawer:hover,
.vala-landing-btn--drawer:focus-visible {
	filter: brightness(1.05);
	color: #061421;
	transform: none;
}

.vala-nav-link--drawer-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 16px;
	box-sizing: border-box;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: var(--nav-drawer-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}

.vala-nav-link--drawer-login:hover,
.vala-nav-link--drawer-login:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(148, 210, 255, 0.28);
	color: #fff;
	transform: none;
}

html.vala-nav-drawer-open,
body.vala-nav-drawer-open {
	overflow: hidden;
	overscroll-behavior: none;
}

body.vala-nav-drawer-open {
	touch-action: none;
}

.vala-landing-nav.is-drawer-open {
	z-index: 201;
}

body.vala-nav-drawer-open .vala-hero-section .vala-landing-hero,
body.vala-nav-drawer-open .vala-hero-section header.vala-landing-hero {
	z-index: 0;
	pointer-events: none;
}

/* Tablet: subset links + menu */
@media (max-width: 1100px) {
	.vala-landing-nav__links--desktop {
		display: none;
	}

	.vala-landing-nav__links--tablet {
		display: flex;
		justify-content: flex-end;
		flex: 1 1 auto;
	}

	.vala-lang-switch--nav-desktop,
	.vala-nav-link--login {
		display: none;
	}

	.vala-landing-nav__menu-btn {
		display: inline-flex;
	}

	.vala-landing-nav__menu-label--text {
		display: inline;
	}
}

/* Mobile: logo + CTA + hamburger */
@media (max-width: 768px) {
	.vala-lang-switch--nav-desktop {
		display: none !important;
	}

	.vala-nav-link--login {
		display: none !important;
	}
}

@media (max-width: 720px) {
	.vala-landing-nav__links--tablet {
		display: none;
	}

	/* Homepage keeps logo + ValaHub on mobile (see vala-homepage-header-layout.css) */
	body:not(:has(#vala-main.vala-homepage)) .vala-landing-brand__name {
		display: none;
	}

	.vala-landing-nav__inner {
		min-height: 50px;
		padding: 7px 10px;
		gap: 8px;
	}

	.vala-landing-nav__menu-label--text {
		display: none;
	}

	.vala-landing-nav__menu-icon {
		display: inline-flex;
	}

	.vala-landing-nav__menu-btn {
		padding: 0 10px;
		min-width: 40px;
		justify-content: center;
	}

	.vala-landing-btn--nav-cta {
		min-height: 38px;
		padding: 0 12px;
		font-size: 12px;
		max-width: min(42vw, 160px);
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (max-width: 480px) {
	.vala-landing-nav--glass {
		top: 10px;
	}

	.vala-landing-nav__shell {
		padding: 0 10px;
	}

	.vala-landing-nav__inner {
		gap: 6px;
		padding-inline: 10px;
	}

	.vala-landing-btn--nav-cta {
		max-width: min(38vw, 132px);
		padding: 0 10px;
		font-size: 11px;
	}

	.vala-nav-link--drawer {
		min-height: 46px;
		padding: 9px 12px;
		font-size: 15px;
	}

	.vala-landing-btn--drawer,
	.vala-nav-link--drawer-login {
		min-height: 44px;
		font-size: 14px;
	}
}

/* Homepage — compact floating drawer (portaled to body; use :has on #vala-main) */
@media (min-width: 769px) {
	body:has(#vala-main.vala-homepage) .vala-landing-nav__drawer {
		top: max(20px, env(safe-area-inset-top, 0px));
		right: 24px;
		left: auto;
		width: min(460px, calc(100vw - 48px));
		max-width: 460px;
		max-height: min(680px, calc(100dvh - 40px));
		border-radius: 28px;
		padding: 14px 18px max(18px, env(safe-area-inset-bottom, 0px));
	}

	body:has(#vala-main.vala-homepage) .vala-landing-nav__drawer-nav {
		gap: 4px;
	}

	body:has(#vala-main.vala-homepage) .vala-nav-link--drawer {
		min-height: 46px;
		padding: 10px 12px;
		font-size: clamp(17px, 1.6vw, 20px);
	}
}

@media (max-width: 768px) {
	body:has(#vala-main.vala-homepage) .vala-landing-nav__drawer {
		top: max(12px, env(safe-area-inset-top, 0px));
		right: 16px;
		left: 16px;
		width: auto;
		max-width: none;
		max-height: min(560px, calc(100dvh - 32px));
		border-radius: 24px;
		padding: 12px 14px max(14px, env(safe-area-inset-bottom, 0px));
	}

	body:has(#vala-main.vala-homepage) .vala-landing-nav__drawer-nav {
		gap: 2px;
	}

	body:has(#vala-main.vala-homepage) .vala-nav-link--drawer {
		min-height: 44px;
		padding: 10px 12px;
		font-size: 15px;
		line-height: 1.35;
	}
}

/* Homepage: prefer inline nav on wide viewports (drawer toggle hidden) */
@media (min-width: 901px) {
	body:has(#vala-main.vala-homepage) .vala-landing-nav__links--desktop {
		display: flex;
		justify-content: center;
		flex: 1 1 auto;
	}

	body:has(#vala-main.vala-homepage) .vala-landing-nav__links--tablet {
		display: none !important;
	}

	body:has(#vala-main.vala-homepage) .vala-landing-nav__menu-btn {
		display: none !important;
	}

	body:has(#vala-main.vala-homepage) .vala-lang-switch--nav-desktop {
		display: inline-flex;
	}

	body:has(#vala-main.vala-homepage) .vala-nav-link--login {
		display: inline-flex;
	}
}

/* Safer tablet (narrow): only logo + CTA + menu */
@media (max-width: 900px) and (min-width: 721px) {
	.vala-landing-nav__links--tablet {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vala-nav-link,
	.vala-landing-btn--nav-cta,
	.vala-landing-nav__card {
		transition: none;
	}

	.vala-nav-link:hover,
	.vala-nav-link:focus-visible,
	.vala-landing-btn--nav-cta:hover,
	.vala-landing-btn--nav-cta:focus-visible {
		transform: none;
	}
}