/* ── NAV ── */
#main-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 65;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 16px;
	font-size: var(--text-body-size);
	transition:
		background 0.3s,
		backdrop-filter 0.3s;
}

#main-nav.scrolled {
	background: var(--color-white);
	/* backdrop-filter: blur(8px); */
	border-bottom: 1px solid var(--color-dark);
}

/* Classes are toggled from script.js (works in browsers without :has() support) */
body.modal-open #main-nav,
body.overlay-open #main-nav {
	display: none;
}

body.overlay-open {
	overflow: hidden;
}

.nav-logo {
	font-weight: 400;
	letter-spacing: var(--text-body-tracking);
	opacity: 0;
	transform: translateY(-20px);
	user-select: none;
	transition:
		opacity 0.2s cubic-bezier(0, 0.75, 0.56, 1),
		transform 0.2s cubic-bezier(0, 0.75, 0.56, 1);
}

#main-nav.scrolled .nav-logo {
	opacity: 1;
	transform: translateY(0);
}

.nav-toggle {
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--text-body-size);
	font-weight: 400;
	letter-spacing: var(--text-body-tracking);
	transition: color 0.2s cubic-bezier(0, 0.75, 0.56, 1);
}

@media (hover: hover) {
	.nav-toggle:hover {
		color: var(--color-gray);
	}
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 999px;
	background: var(--color-dark);
	color: var(--color-white);
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	transition:
		width 0.15s cubic-bezier(0.24, 0, 0.65, 1),
		padding 0.15s cubic-bezier(0.24, 0, 0.65, 1);
}

.nav-home-btn-label {
	font-size: 1rem;
	line-height: 1em;
	opacity: 0;
	transition: opacity 0.15s cubic-bezier(0.24, 0, 0.65, 1);
}

.nav-home-btn.open .nav-home-btn-label {
	opacity: 1;
}

/* ── OVERLAY NAV (inside legal overlays) — same look as #main-nav.scrolled ── */
.overlay-nav {
	flex-shrink: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	padding-bottom: 20px;
	font-size: var(--text-body-size);
	background: var(--color-white);
	border-bottom: 1px solid var(--color-dark);
}

.overlay-nav .nav-logo {
	opacity: 1;
	transform: none;
}