/*
 * Design System - AELITA
 * components/nav.css - the .a-nav desktop navigation.
 *
 * Source of truth: docs/aelita-design/DESIGN.md
 * Uses only CSS variables from tokens.css. No hex values, no Bootstrap
 * classes (.navbar/.dropdown/.open), no global selectors, no
 * `transition: all`.
 *
 * Desktop navigation is hidden mobile-first and revealed from 992px,
 * matching the existing header breakpoint. The dropdown submenu is a single
 * horizontal light panel that bleeds to the full viewport width while its
 * items stay on the .a-header__inner content grid (.a-header clips the
 * scrollbar-width overhang); long menus scroll sideways instead of wrapping.
 *
 * Focus note: the legacy theme ships `*:focus { outline: none !important; }`
 * (css/main.css), so the focus-visible rules below use a local `!important`
 * on the outline only.
 */

.a-nav {
	display: none; /* mobile-first: hidden until the lg breakpoint */
}

.a-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The item is intentionally static: the submenu's containing block must be
 * .a-header__inner (set in header.css), not the individual menu item. */
.a-nav__item {
	position: static;
	display: flex;
	align-items: center;
}

.a-nav__link,
.a-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: calc(var(--space-6) + var(--space-3)); /* 44px touch target */
	padding: var(--space-2) var(--space-3);
	border: 0;
	background-color: transparent;
	color: var(--text-on-brand);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	/* Design-system navigation uses one regular weight; emphasis is carried
	 * by color / underline only, never by a heavier face. */
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color var(--dur-popover) var(--ease-out);
}

/* Current page: color plus a thin inset rule, still regular weight. */
.a-nav__link[aria-current="page"] {
	box-shadow: inset 0 -2px 0 0 var(--focus-ring);
	color: var(--link-hover);
}

/* All main-menu entries are uppercase, including submenu items. */
.a-nav__link,
.a-nav__toggle {
	text-transform: uppercase;
}

/* Expanded parent (visual state; open/close is driven by .is-open). */
.a-nav__toggle[aria-expanded="true"] {
	color: var(--link-hover);
}

/* Top-level items with children carry a small caret so the disclosure is
 * visible before hover. It flips up when the submenu is open. Same bordered
 * square pattern as .a-about__toggle-arrow. */
.a-nav__toggle::after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dur-popover) var(--ease-out);
}

.a-nav__toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

/* -------------------------------------------------------------------- */
/* Submenu: full-bleed light panel, items on the header content grid    */
/* -------------------------------------------------------------------- */
.a-nav__submenu {
	position: absolute;
	inset-block-start: 100%; /* directly under the main menu */
	/* Full-bleed: the panel reaches both window edges. `50% - 50vw` is the
	 * distance from the .a-header__inner centre to the viewport edge;
	 * .a-header clips the scrollbar-width overhang so no horizontal scroll
	 * ever appears. */
	inset-inline: calc(50% - 50vw);
	z-index: var(--z-dropdown);
	display: flex;
	flex-wrap: nowrap;       /* never wrap onto a second line */
	align-items: stretch;
	gap: var(--space-5);     /* even intervals between entries */
	min-width: 0;
	margin: 0;
	/* Vertical rhythm is symmetric; the horizontal padding reproduces the
	 * header content gutter. `100%` is the .a-header__inner width and `100vw`
	 * the window, so the first item's text lines up with the site container
	 * at any viewport width; the -`--space-1` offset cancels the link's own
	 * inline padding so the text (not the hit area) is flush. */
	padding-block: var(--space-2);
	padding-inline: calc(var(--space-1) + (100vw - 100%) / 2);
	list-style: none;
	/* Light surface, a hairline base and a soft shadow separate the panel
	 * from the page without decoration. */
	background-color: var(--submenu-bg);
	border-bottom: var(--border-w) solid var(--submenu-border);
	box-shadow: var(--shadow-submenu);
	overflow-x: auto;        /* long rows scroll sideways instead of wrapping */
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--c-ink-100) transparent;
	-webkit-overflow-scrolling: touch;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition:
		opacity var(--dur-nav) var(--ease-nav),
		transform var(--dur-nav) var(--ease-nav),
		visibility 0s linear var(--dur-nav);
}

/* Slim, palette-consistent horizontal scrollbar for long rows (WebKit). */
.a-nav__submenu::-webkit-scrollbar {
	height: 6px;
}

.a-nav__submenu::-webkit-scrollbar-track {
	background-color: transparent;
}

.a-nav__submenu::-webkit-scrollbar-thumb {
	background-color: var(--c-ink-100);
}

/* Open state, owned by the header controller: hovering opens and leaving
 * closes; a click pins exactly one item open. The trailing close delay on
 * visibility keeps the panel open while the cursor travels from the parent
 * item to the submenu, and gives the fade-out below the same timing. */
.a-nav__item.is-open > .a-nav__submenu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

/* No-JS fallback: without the controller the submenu still opens on hover or
 * focus. Once the controller runs it adds .a-header--js and owns the state. */
.a-header:not(.a-header--js) .a-nav__item:hover > .a-nav__submenu,
.a-header:not(.a-header--js) .a-nav__item:focus-within > .a-nav__submenu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

/* Submenu entries keep their intrinsic width and never wrap. */
.a-nav__submenu .a-nav__item {
	flex: 0 0 auto;
}

.a-nav__submenu .a-nav__link,
.a-nav__submenu .a-nav__toggle {
	display: inline-flex;
	width: auto;
	min-height: calc(var(--space-6) + var(--space-3));
	padding-inline: var(--space-3);
	/* Dark text on the light panel, always regular weight. */
	color: var(--submenu-text);
	white-space: nowrap;
}

/* Light-panel accents: hover and the current page use the brand red
 * (#CB002C) instead of the dark-bar link colour. */
.a-nav__submenu .a-nav__link[aria-current="page"] {
	box-shadow: inset 0 -2px 0 0 var(--submenu-hover);
	color: var(--submenu-hover);
}

/* Hover colour, pointer devices only. Opening/closing itself is owned by the
 * header controller (hover opens, leaving closes, click pins). */
@media (hover: hover) and (pointer: fine) {
	.a-nav__link:hover,
	.a-nav__toggle:hover {
		color: var(--link-hover);
	}

	.a-nav__submenu .a-nav__link:hover,
	.a-nav__submenu .a-nav__toggle:hover {
		color: var(--submenu-hover);
	}
}

/* Keyboard focus: local !important only for the outline. */
.a-nav__link:focus-visible,
.a-nav__toggle:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: -2px;
}

/* Keep [hidden] hidden even if a component rule sets display. */
.a-nav [hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.a-nav__link,
	.a-nav__toggle,
	.a-nav__toggle::after {
		transition-duration: 0.01ms;
	}

	/* Keep the opacity swap, drop the movement and the close delay. */
	.a-nav__submenu {
		transform: none;
		transition-duration: 0.01ms;
		transition-delay: 0s;
	}
}

/* -------------------------------------------------------------------- */
/* Desktop reveal - same breakpoint as the current header (992px)       */
/* -------------------------------------------------------------------- */
@media (min-width: 992px) {
	.a-nav {
		display: flex;
		align-self: stretch;
		align-items: stretch;
	}

	/* Stretch the row to the full bar height: the hover target of each
	 * top-level item then reaches the submenu with no dead gap. */
	.a-nav__list {
		height: 100%;
		align-items: stretch;
	}
}

/* Compact spacing for the 992-1200px window so the navigation keeps a
 * comfortable gap to the actions even with long labels. Font size unchanged. */
@media (min-width: 992px) and (max-width: 1200px) {
	.a-nav__list {
		gap: var(--space-4);
	}
}