/* ═══════════════════════════════════════════════════════════
   Nav Transition — Vertical ↔ Horizontal FLIP
   ═══════════════════════════════════════════════════════════ */

/* ── Shared ── */
.lp-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}


.lp-nav__list .menu-item {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.lp-nav__list .menu-item::after {
	content: '';
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, #1AA871, #354D54);
	background-size: 100% auto;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 10;
}

.lp-nav__list .menu-item:hover::after,
.lp-nav__list .menu-item.current-menu-item::after {
	transform: scaleX(1);
	transform-origin: left;
}

.lp-nav__list .menu-item a,
.lp-nav__list .lp-nav__item a {
	display: flex;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-aim-white, #FFFFFF);
	white-space: nowrap;
	transition: transform 0.2s ease;
}

.lp-nav__list .menu-item a:hover,
.lp-nav__list .lp-nav__item a:hover {
	color: #1AA871;
	transform: scale(1.1);
}

.lp-nav--vertical .menu-item.current-menu-item a {
	color: #1AA871;
}

/* ── Vertical Nav (Fixed, Top-Right of Hero) ── */
.lp-nav--vertical {
	position: fixed;
	top: 10rem;
	right: 8rem;
	z-index: 100;
	pointer-events: auto;
}

.lp-nav--vertical .lp-nav__list {
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15rem;
}

.lp-nav--vertical .menu-item::after {
	display: none !important;
}



.lp-nav--vertical .menu-item a,
.lp-nav--vertical .lp-nav__item a {
	padding: 0.3rem 0;
	font-size: 1.5rem;
}

/* ── Horizontal Nav (Sticky, Top-Center) ── */
.lp-nav--horizontal {
	position: fixed;
	top: 0.5rem;
	right: 20px;
	z-index: 100;
	display: flex;
	width: fit-content;
	justify-content: center;
	align-items: center;
	height: 52px;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
	opacity: 0;
	pointer-events: none;
	transform: translate(0, 20px);
	padding: 2rem;
	border-radius: 20px;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.lp-nav--horizontal.is-active {
	opacity: 1;
	pointer-events: auto;
}

.lp-nav--horizontal .lp-nav__list {
	flex-direction: row;
	align-items: center;
	gap: 2rem;
}

.lp-nav--horizontal .lp-nav__list li {
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

.lp-nav--horizontal .lp-nav__list li a {
	display: inline-flex !important;
	color: var(--color-aim-dark, #1a1a1a) !important;
	font-size: 1.25rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.5rem 0 !important;
	transition: color 0.2s ease, transform 0.2s ease !important;
}

.lp-nav--horizontal .lp-nav__list li a:hover {
	color: #1AA871 !important;
	transform: scale(1.08) !important;
}

.lp-nav--horizontal .lp-nav__list li.current-menu-item a {
	color: #1AA871 !important;
}

/* Hide arrow icon and line-gradient underline inside horizontal navigation */
.lp-nav--horizontal .lp-nav__list li img,
.lp-nav--horizontal .lp-nav__list li .line-gradient {
	display: none !important;
}

/* ── Ghost (flying item during FLIP) ── */
.lp-nav__ghost {
	position: fixed;
	pointer-events: none;
	z-index: 9999;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	will-change: transform;
}

.lp-nav__ghost a {
	display: inline-flex !important;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 1.25rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-aim-dark, #1a1a1a) !important;
	white-space: nowrap;
	padding: 0.5rem 0 !important;
}

/* Hide arrow icon and line-gradient underline inside ghost during flight */
.lp-nav__ghost img,
.lp-nav__ghost .line-gradient {
	display: none !important;
}

/* ── aria-hidden visual sync ── */
.lp-nav[aria-hidden="true"] {
	pointer-events: none;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
	.lp-nav--horizontal {
		transition: none;
	}

	.lp-nav__ghost {
		display: none;
	}
}

/* ── Responsive: hide vertical nav on small screens ── */
@media (max-width: 820px) {
	.lp-nav--vertical {
		display: none;
	}

	.lp-nav--horizontal {
		display: none;
	}
}