/*
 * Navigation (docs/DESIGN_SYSTEM.md section 8.4, docs/SITEMAP.md section 3).
 *
 * The desktop bar and the mobile accordion use the disclosure pattern: a button with aria-expanded
 * opens a plain list of links. With JavaScript, aria-expanded is the only thing that shows or hides a
 * panel. Without it (html:not(.js)) the panels open on :hover and :focus-within, and the mobile list is
 * always open. :has() reads the state of the toggle from the list item.
 */
@layer components {
	/* ---- Desktop bar (1024 px and up) ---- */
	.primary-nav {
		display: none;
	}

	.primary-nav__list,
	.mobile-nav__list,
	.primary-nav__submenu,
	.mobile-nav__submenu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.primary-nav__link,
	.primary-nav__toggle,
	.primary-nav__sublink {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		min-height: var(--size-control-sm);
		padding-inline: var(--space-3);
		border: 0;
		background: none;
		color: var(--color-text);
		font-family: var(--font-body);
		font-size: var(--fs-body);
		font-weight: 500;
		text-decoration: none;
		white-space: nowrap;
	}

	@media (hover: hover) {
		.primary-nav__link:hover,
		.primary-nav__sublink:hover {
			color: var(--color-text);
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: var(--space-1);
		}
	}

	/* The current page keeps its underline, and so does the section that holds it while its list is closed
	   (.is-current is on the item for the page itself and for its parents). */
	.primary-nav__link[aria-current="page"],
	.primary-nav__sublink[aria-current="page"],
	.primary-nav__item.is-current > .primary-nav__link,
	.primary-nav__item.is-current > .primary-nav__split > .primary-nav__link {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: var(--space-1);
	}

	.primary-nav__link--button {
		cursor: pointer;
	}

	.primary-nav__split {
		display: inline-flex;
		align-items: center;
	}

	.primary-nav__toggle {
		justify-content: center;
		width: var(--size-control-sm);
		padding-inline: 0;
		cursor: pointer;
	}

	/* A chevron keeps its size when the row is squeezed (it has no icon class of its own to say so). */
	.primary-nav__chevron,
	.mobile-nav__chevron {
		flex: none;
		transition: transform var(--dur-fast) var(--ease-out);
	}

	[aria-expanded="true"] > .primary-nav__chevron,
	[aria-expanded="true"] > .mobile-nav__chevron {
		transform: rotate(180deg);
	}

	.primary-nav__item {
		position: relative;
	}

	.primary-nav__submenu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: var(--z-dropdown);
		min-width: var(--dropdown-min);
		padding: var(--space-2);
		border: var(--border-hairline);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		box-shadow: var(--shadow-lg);
	}

	.primary-nav__sublink {
		display: flex;
		min-height: var(--size-control-md);
		border-radius: var(--radius-sm);
	}

	@media (hover: hover) {
		.primary-nav__sublink:hover {
			background: var(--color-surface-tint);
		}
	}

	/* With JavaScript: closed unless the toggle says expanded. */
	.js .primary-nav__submenu {
		visibility: hidden;
		opacity: 0;
		transform: translateY(var(--space-2));
		transition:
			opacity var(--dur-base) var(--ease-out),
			transform var(--dur-base) var(--ease-out),
			visibility 0s linear var(--dur-base);
	}

	.js .primary-nav__item:has(> [aria-expanded="true"], > .primary-nav__split > [aria-expanded="true"]) > .primary-nav__submenu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	/* Without JavaScript: hover and keyboard focus open the panel. These rules apply only then, so they
	   can never keep a panel open after Esc returns focus to the toggle. */
	html:not(.js) .primary-nav__submenu {
		display: none;
	}

	html:not(.js) .primary-nav__item:focus-within > .primary-nav__submenu {
		display: block;
	}

	@media (hover: hover) {
		html:not(.js) .primary-nav__item:hover > .primary-nav__submenu {
			display: block;
		}
	}

	html:not(.js) .primary-nav__toggle {
		display: none;
	}

	@media (min-width: 64em) {
		.primary-nav {
			display: block;
			margin-inline: auto;
		}

		.primary-nav__list {
			display: flex;
			align-items: center;
			gap: var(--space-1);
		}

		.mobile-nav {
			display: none;
		}
	}

	/* ---- Mobile and tablet panel (below 1024 px) ---- */
	.mobile-nav {
		border-bottom: var(--border-hairline);
		background: var(--color-surface);
	}

	.mobile-nav__head {
		display: none;
	}

	.mobile-nav__panel {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		padding: var(--space-4) var(--gutter) var(--space-6);
	}

	.mobile-nav__item + .mobile-nav__item {
		border-top: var(--border-hairline);
	}

	.mobile-nav__split {
		display: flex;
		align-items: stretch;
	}

	.mobile-nav__link {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		min-height: var(--size-control-lg);
		color: var(--color-text);
		font-size: var(--fs-lead);
		font-weight: 500;
		text-decoration: none;
	}

	.mobile-nav__link--button {
		width: 100%;
		padding: 0;
		border: 0;
		background: none;
		font-family: var(--font-body);
		text-align: start;
		cursor: pointer;
	}

	.mobile-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--size-control-lg);
		border: 0;
		background: none;
		color: var(--color-text);
		cursor: pointer;
	}

	.mobile-nav__sublink {
		display: flex;
		align-items: center;
		min-height: var(--size-control-md);
		padding-inline-start: var(--space-4);
		color: var(--color-text-secondary);
		text-decoration: none;
	}

	.mobile-nav__link[aria-current="page"],
	.mobile-nav__sublink[aria-current="page"],
	.mobile-nav__item.is-current > .mobile-nav__link,
	.mobile-nav__item.is-current > .mobile-nav__split > .mobile-nav__link {
		color: var(--color-link);
		font-weight: 600;
	}

	.mobile-nav__foot {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}

	.mobile-nav__social {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Submenus: closed until the toggle says expanded. Without JavaScript they are all open. */
	.js .mobile-nav__submenu {
		display: none;
	}

	.js .mobile-nav__item:has(> [aria-expanded="true"], > .mobile-nav__split > [aria-expanded="true"]) > .mobile-nav__submenu {
		display: block;
	}

	.js .mobile-nav__toggle {
		display: inline-flex;
	}

	html:not(.js) .mobile-nav__toggle {
		display: none;
	}

	/* With JavaScript the panel is off-canvas: a full-height panel from the right over a scrim. */
	.js .mobile-nav {
		position: fixed;
		inset: 0;
		z-index: var(--z-overlay);
		display: none;
		border-bottom: 0;
		background: transparent;
	}

	.js .mobile-nav.is-open {
		display: block;
	}

	.js .mobile-nav::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--color-surface-footer);
		opacity: 0.6;
		animation: nayumi-fade-in var(--dur-base) var(--ease-out);
	}

	.js .mobile-nav__panel {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		width: min(100%, 26rem);
		height: 100dvh;
		overflow-y: auto;
		background: var(--color-surface);
		animation: nayumi-slide-in var(--dur-base) var(--ease-out);
	}

	.js .mobile-nav__head {
		display: flex;
		justify-content: flex-end;
		min-height: calc(var(--header-h) - var(--space-4));
		align-items: center;
	}

	html.is-scroll-locked {
		overflow: hidden;
	}

	@keyframes nayumi-fade-in {
		from {
			opacity: 0;
		}
	}

	@keyframes nayumi-slide-in {
		from {
			transform: translateX(100%);
		}
	}
}