/**
 * OSHIDA — primary navigation.
 *
 * @figma 1571:845  pill measured on tools/figma/renders/home-1440.webp:
 *                  x 391..1048 (658 wide), y 82..142 (61 tall), centred on 720.
 * @figma 1571:801  fill #2C2C2C, pill radius, NO border, NO backdrop blur.
 * @figma 1571:802  knob #3F3F3F — a 38px circle, 12px inset on every side.
 * @figma 1571:804  item type 18px / 300 / +0.01em, pure white.
 *
 * The item-to-item gap is NOT directly measurable: the nav ships as a Figma
 * symbol, so its children are absent from section-metadata.xml, and the gaps
 * read off the render (66..72px) are ink-to-ink — every glyph run is inflated a
 * few pixels on each side by antialiasing, which shrinks the apparent gap.
 * 74.6px is what the gap has to be for the pill to come out at its
 * authoritative 659.17px given the measured 12px knob inset, 58px inline-end
 * padding, 38px knob and the browser's own advance widths for the four labels.
 * Verified: it puts the knob at x=998.3 against the render's 1000, and «خانه»
 * at x=892.4 against the render's 891.
 *
 * DESIGN CONFLICT — docs/ai/design-tokens.md §9.1. Two navs exist in the file.
 * This one, 1571:801, is the one instanced on every phase-1 page: opaque, no
 * border, no blur. The other, 2082:3590, is glass. The glass treatment is
 * `.o-nav--glass` at the bottom of this file: ONE class, no other rule changes,
 * so switching is `<nav class="o-nav o-nav--glass">` and nothing else.
 *
 * Owner: work package B1.
 */

.o-nav {
	position: relative;
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-inline: auto;
}

.o-nav__pill {
	display: flex;
	align-items: center;
	gap: var(--o-nav-gap, 74.6px);
	min-block-size: 62px;
	padding-inline: 12px 58px;
	border-radius: var(--o-radius-pill);
	background-color: var(--o-surface-nav);
}

/* --------------------------------------------------------------------------
 * The knob — <summary>, so the drawer works with JavaScript switched off.
 * -------------------------------------------------------------------------- */

.o-nav__disclosure {
	/* Static, so .o-nav__drawer positions against .o-nav and can escape the pill. */
	position: static;
}

.o-nav__toggle {
	display: inline-flex;
	align-items: center;
	list-style: none;
	border-radius: var(--o-radius-pill);
}

.o-nav__toggle::-webkit-details-marker {
	display: none;
}

.o-nav__knob {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background-color: var(--o-surface-knob);
}

/* Two bars, 14 x 2, 6px pitch — measured at y 108-109 and 114-115 on the render. */
.o-nav__burger {
	position: relative;
	display: block;
	inline-size: 14px;
	block-size: 8px;
}

.o-nav__burger::before,
.o-nav__burger::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: 2px;
	border-radius: 1px;
	background-color: var(--o-text);
}

.o-nav__burger::before {
	inset-block-start: 0;
}

.o-nav__burger::after {
	inset-block-end: 0;
}

/* Open state: the two bars cross. Pure transform, so it is free to animate and
 * free to not animate. */
[open] > .o-nav__toggle .o-nav__burger::before {
	translate: 0 3px;
	rotate: 45deg;
}

[open] > .o-nav__toggle .o-nav__burger::after {
	translate: 0 -3px;
	rotate: -45deg;
}

@media (prefers-reduced-motion: no-preference) {
	.o-nav__burger::before,
	.o-nav__burger::after {
		transition:
			translate var(--o-dur-fast) var(--o-ease-standard),
			rotate var(--o-dur-fast) var(--o-ease-standard);
	}
}

/* --------------------------------------------------------------------------
 * The menu
 * -------------------------------------------------------------------------- */

.o-nav__list {
	display: flex;
	align-items: center;
	gap: var(--o-nav-gap, 74.6px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-nav__link {
	display: block;
	padding-block: 6px;
	color: var(--o-text);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-light);
	line-height: var(--o-lh-tight);
	letter-spacing: var(--o-track-nav);
	text-decoration: none;
	white-space: nowrap;
}

.o-nav__link[aria-current="page"] .o-nav__label,
.o-nav__item.current-menu-item > .o-nav__link .o-nav__label {
	box-shadow: 0 2px 0 -1px currentcolor;
}

/* --------------------------------------------------------------------------
 * The drawer
 *
 * Anchored under the pill and sized to it. `.o-nav__disclosure` is static, so
 * this positions against `.o-nav`.
 * -------------------------------------------------------------------------- */

.o-nav__drawer {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-start: 0;
	z-index: var(--o-z-overlay);
	inline-size: 100%;
	padding: var(--o-space-2xs);
	border-radius: var(--o-radius-lg);
	background-color: var(--o-surface-nav);
	box-shadow: var(--o-shadow-panel);
}

.o-nav__drawer .o-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.o-nav__drawer .o-nav__link {
	padding-block: var(--o-space-2xs);
	padding-inline: var(--o-space-xs);
	border-radius: var(--o-radius-xs);
}

.o-nav__drawer .o-nav__item + .o-nav__item {
	border-block-start: 1px solid var(--o-line-soft);
}

/* The inline list and an open drawer would otherwise name the same four links
 * twice. `visibility: hidden` takes the inline copy out of the accessibility
 * tree without moving anything. */
.o-nav:has(.o-nav__disclosure[open]) .o-nav__menu--inline {
	visibility: hidden;
}

/* Applied to <html> by assets/js/nav.js while the drawer is open. `html` already
 * carries scrollbar-gutter: stable (base/reset.css), so nothing shifts. */
.o-nav-locked {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Below lg the pill cannot hold the menu.
 *
 * The measured pill is 658px wide and the design's own gutter is 102.5px, so it
 * needs ~863px before it stops crowding the frame. Collapse at 900px: the pill
 * becomes the knob alone, parked at the inline start, and the menu moves into
 * the drawer.
 * -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.o-nav {
		margin-inline: 0 auto;
	}

	.o-nav__pill {
		padding-inline: 12px;
	}

	.o-nav__menu--inline {
		display: none;
	}

	.o-nav__drawer {
		inline-size: min(320px, calc(100vw - 2 * var(--o-gutter)));
	}
}

/* --------------------------------------------------------------------------
 * The glass variant — @figma 2082:3590, OUTSIDE the phase-1 section.
 *
 * Not used by anything today. It exists so that switching the nav treatment is
 * one class on one element rather than a rewrite, if the user confirms that
 * 2082:3590 is the intended nav. See docs/ai/design-tokens.md §9.1.
 *
 * 2082:3590 measures a #1C1C1C fill, a 1px rgba(105,105,105,0.5) border and
 * backdrop-filter: blur(11.5px). None of those three is a token: A1 measured
 * them, found them outside the phase-1 section and deliberately kept them out
 * of tokens.css. So the variant is built from the tokens that DO exist and is
 * a close approximation, not the measured value. If the user confirms the glass
 * nav, ask A1 for --o-surface-nav-glass and --o-line-glass and swap them in
 * here — nothing else in this file changes.
 * -------------------------------------------------------------------------- */

.o-nav--glass .o-nav__pill {
	border: var(--o-line-width) solid var(--o-line);
	background-color: var(--o-bg-deep);
}

@supports (color: color-mix(in srgb, red, blue)) {
	.o-nav--glass .o-nav__pill {
		border-color: color-mix(in srgb, var(--o-line) 60%, transparent);
		background-color: color-mix(in srgb, var(--o-bg-deep) 82%, transparent);
	}
}

@supports (backdrop-filter: blur(1px)) and (color: color-mix(in srgb, red, blue)) {
	.o-nav--glass .o-nav__pill {
		backdrop-filter: blur(var(--o-blur-veil));
		background-color: color-mix(in srgb, var(--o-bg-deep) 55%, transparent);
	}
}