/**
 * nav.css — site navigation styles.
 *
 * Floating glass-pill desktop nav + slide-in mobile drawer + hamburger
 * button + active-page state treatments (#133). NOT wrapped in @layer
 * because the original inline <style> block in nav.njk was not wrapped in @layer;
 * preserving that lets the rules sit above @layer components in the
 * cascade with the same specificity behavior as before.
 *
 * Loaded on every page from base.njk AFTER shared.css.
 *
 * Migrated from src/_includes/partials/nav.njk inline <style> block as
 * part of #147 PR 1 — CSS file split foundation. The migration replaces
 * the prior co-located-styling pattern with an external cacheable
 * stylesheet. Reasoning (from #147 discussion): browser caching +
 * smaller HTML payload + file-size-cap compliance (nav.njk was 594
 * lines with the inline CSS, drops to under-cap once removed) +
 * tooling-friendly (stylelint, cspell, IDE highlighting all work
 * cleanly on .css files). Content byte-for-byte preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	DESKTOP NAV — floating glass pill
	───────────────────────────────────────────────────────────────────── */

.innov8-nav-wrapper {
	position: fixed;
	top: 28px;
	left: 0;
	right: 0;
	z-index: 250;
	display: flex;
	justify-content: center;
	padding: 0 20px;
	pointer-events: none;
	transition: top 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.innov8-nav-wrapper[data-scrolled='true'] {
	top: 16px;
}

.innov8-nav {
	pointer-events: auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	width: min(1100px, 100%);
	/* 126px left padding makes room for the absolutely-positioned logo
			 that overhangs both top and bottom of the pill. */
	padding: 4px 8px 4px 126px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	overflow: visible;
}

/* Logo anchor is the absolute-positioned overhanging element, not
	the <img> inside it. Reparenting the position rules to the <a>
	means the entire clickable area sits in the overhang region —
	previously the anchor was a 0×0 inline element with the absolutely-
	positioned <img> living outside its bounds, which caused hit-test
	surprises (the visible logo wasn't clickable on its own area). */
.innov8-nav-logo {
	text-decoration: none;
	color: var(--fg-primary);
	display: block;
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
}

.innov8-nav-logo-img {
	width: auto;
	height: 70px;
	filter: drop-shadow(0 8px 24px rgba(31, 86, 245, 0.45));
}

/* The link list fills the pill's vertical extent so each link can
	stretch to the full nav-pill height. `gap: 2px` plus the per-link
	`padding: 0 10px` below adds up to the original ~22px of visual
	breathing room between adjacent link labels — same look, but the
	spacing now lives inside each link's hit area instead of outside it. */
.innov8-nav-links {
	display: flex;
	gap: 2px;
	height: 100%;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Larger hit area for easier mousing/tapping — the link fills the
	pill's full vertical extent and gets 10px of horizontal padding on
	each side, so the clickable region grows from the bare text bounds
	to the entire vertical column of the pill at that label's
	position. `align-content: center` vertically centers the single-line
	label inside the now-taller box (modern CSS3 block-container support
	— Chromium 123+ / Firefox 125+ / Safari 17.6+). The active-page
	--active span below inherits these dimensions so the active item's
	hit area matches the rest. */
.innov8-nav-link {
	color: var(--fg-secondary);
	text-decoration: none;
	transition: color 120ms;
	display: inline-block;
	height: 100%;
	padding: 0 10px;
	align-content: center;
}

.innov8-nav-link:hover,
.innov8-nav-link:focus-visible {
	color: var(--color-cyan-300);
}

.innov8-nav-link:focus-visible {
	outline: 2px solid var(--color-cyan-300);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Active-page state (#133) — applied to the rendered <span> when the
	current page URL matches the nav link's href. Visual treatment: the
	text adopts the same cyan as the hover/focus color so the link "lights
	up" as if permanently hovered, signaling to the visitor that they are
	already on this page. `cursor: default` (the standard arrow, not the
	pointing-hand) reinforces the non-interactive nature of the span —
	the visitor sees the cyan accent saying "you are here" and the cursor
	saying "no action available," which together communicate the
	disabled-but-current-page semantic clearly. The span itself carries
	no href so it is naturally removed from the keyboard tab order and
	announced as the current page via aria-current="page". */
.innov8-nav-link--active {
	color: var(--color-cyan-300);
	cursor: default;
}

.innov8-nav-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────────
	HAMBURGER BUTTON — visible only <760px
	Three lines that morph into an X when the drawer is open (the
	aria-expanded="true" attribute drives the transform).
	───────────────────────────────────────────────────────────────────── */

.innov8-nav-hamburger {
	/* Hidden on desktop; promoted to flex via the mobile @media rule. */
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--radius-pill);
	cursor: pointer;
	color: var(--fg-primary);
}

.innov8-nav-hamburger:hover {
	background: rgba(255, 255, 255, 0.06);
}

.innov8-nav-hamburger:focus-visible {
	outline: 2px solid var(--color-cyan-300);
	outline-offset: 2px;
}

.innov8-nav-hamburger-line {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition:
		transform 220ms var(--ease-out),
		opacity 160ms;
}

/* X-morph state: top line rotates down, middle disappears, bottom
		 rotates up — meeting at center forming the close (×) glyph. */
.innov8-nav-hamburger[aria-expanded='true'] .innov8-nav-hamburger-line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.innov8-nav-hamburger[aria-expanded='true'] .innov8-nav-hamburger-line:nth-child(2) {
	opacity: 0;
}

.innov8-nav-hamburger[aria-expanded='true'] .innov8-nav-hamburger-line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────────────
	MOBILE BREAKPOINT — hide desktop links, show hamburger
	───────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
	.innov8-nav-links,
	.innov8-nav-status,
	.innov8-nav-cta {
		display: none;
	}

	.innov8-nav-hamburger {
		display: flex;
	}

	/* NOTE: the logo stays 70px at all viewports per design — distinctive
		brand-mark moment must not shrink. The nav pill keeps its 126px
		left padding to make room for the overhanging logo even on
		narrow viewports; at very small widths (~375px iPhone SE) the
		middle of the pill becomes empty space between the logo and
		the hamburger button, which is intentional + brand-correct. */
}

@media (min-width: 768px) {
	.innov8-nav {
		justify-content: space-between;
	}
}

/* ─────────────────────────────────────────────────────────────────────
	DRAWER + BACKDROP — slide-in panel from right
	───────────────────────────────────────────────────────────────────── */

.innov8-nav-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: var(--bg-overlay);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms var(--ease-out);
	z-index: 60;
}

.innov8-nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(360px, 85vw);
	padding: 80px 32px 32px;
	background: rgba(7, 11, 24, 0.92);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		-24px 0 64px rgba(0, 0, 0, 0.55),
		inset 1px 0 0 rgba(255, 255, 255, 0.04);
	transform: translateX(100%);
	transition: transform 280ms var(--ease-out);
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 32px;
	overflow-y: auto;
}

html[data-nav-drawer-open='true'] .innov8-nav-drawer-backdrop {
	opacity: 1;
	pointer-events: auto;
}

html[data-nav-drawer-open='true'] .innov8-nav-drawer {
	transform: translateX(0);
}

/* Body scroll-lock — applied via data-nav-drawer-open on <html>. */
html[data-nav-drawer-open='true'] {
	overflow: hidden;
}

.innov8-nav-drawer-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-pill);
	color: var(--fg-primary);
	cursor: pointer;
	transition:
		background-color 160ms,
		border-color 160ms;
}

.innov8-nav-drawer-close:hover {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

.innov8-nav-drawer-close:focus-visible {
	outline: 2px solid var(--color-cyan-300);
	outline-offset: 3px;
}

.innov8-nav-drawer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.innov8-nav-drawer-link {
	display: block;
	padding: 12px 16px;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: var(--tracking-snug);
	color: var(--fg-primary);
	text-decoration: none;
	border-radius: var(--radius-md);
	transition:
		background-color 160ms,
		color 160ms;
}

.innov8-nav-drawer-link:hover,
.innov8-nav-drawer-link:focus-visible {
	background-color: rgba(95, 236, 253, 0.08);
	color: var(--color-cyan-300);
}

.innov8-nav-drawer-link:focus-visible {
	outline: 2px solid var(--color-cyan-300);
	outline-offset: -2px;
}

/* Active-page state (#133) — mobile drawer variant. Mirrors the
	desktop nav's --active treatment with the drawer's hover styling
	(subtle cyan-tinted background + cyan text) so the active item
	reads as "permanently hovered." `cursor: default` matches the
	desktop variant — the cyan accent says "you are here," the cursor
	says "no action available." The rendered <span> is excluded from
	the drawer's focus trap because the trap selector targets a[href];
	on drawer open the focus script targets a.innov8-nav-drawer-link,
	skipping over the active span even when it is first in the list. */
.innov8-nav-drawer-link--active {
	background: rgba(95, 236, 253, 0.08);
	color: var(--color-cyan-300);
	cursor: default;
}

.innov8-nav-drawer-footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

/* Honor reduced-motion: skip the slide animation, instant show/hide. */
@media (prefers-reduced-motion: reduce) {
	.innov8-nav-drawer,
	.innov8-nav-drawer-backdrop {
		transition: none;
	}
}