/* navigation: sticky bar, wordmark left, menu right — nomi's nav pattern:
   a hamburger dropdown on small screens, the same links inline on desktop. */

.navigation {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: var(--space-2xs) 0;
	backdrop-filter: blur(0.75rem);
	-webkit-backdrop-filter: blur(0.75rem);

	& > div {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);

		/* the wordmark is the brand: lowercase, display face, primary teal */
		& > .wordmark {
			font-family: var(--font-family-0);
			font-size: var(--font-size-2);
			color: var(--color-color-0);
			text-decoration: none;
		}

		& > .nav-menus {
			display: flex;
			align-items: center;
			gap: var(--space-xs);
		}
	}

	summary {
		cursor: pointer;
		list-style: none;

		& > svg {
			width: 1.7rem;
			height: 1.7rem;
			display: block;
		}

		&::-webkit-details-marker {
			display: none;
		}
	}

	details[open] {
		& > nav {
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 100%;
			right: 0;
			background: var(--color-neutral-10);
			padding: var(--space-s);
			border: 1px solid var(--color-neutral-7);
			border-radius: var(--border-radius);
			min-width: 12rem;
			z-index: 20;
			align-items: stretch;
			width: fit-content;
			gap: var(--space-xs);
		}
	}

	/* menu links look the same on mobile (dropdown) and desktop (inline):
	   pills. Classless links only — the CTA links in the logged-out menu
	   keep their own button styling from elements.css */
	details.menu > nav > a:not([class]) {
		padding: var(--space-3xs) var(--space-xs);
		border-radius: var(--border-radius);
		color: var(--color-neutral-4);
		text-decoration: none;
		font-weight: 500;
		white-space: nowrap;

		&:hover {
			/* background: var(--color-neutral-9); */
			color: var(--color-neutral-1);
		}
	}

	details.menu > nav > form {
		display: flex;

		& > button {
			flex: 1;
		}
	}
}

/* Desktop: reveal the closed <details> content and lay the links out inline;
   the hamburger disappears. Same breakpoint and mechanism as nomi's nav. */
@media (min-width: 50rem) {
	.navigation {
		details.menu {
			flex: 1;
			min-width: 0;

			&::details-content {
				content-visibility: visible;
				block-size: auto;
				overflow: visible;
			}

			& > summary {
				display: none;
			}

			& > nav {
				display: flex !important;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				gap: var(--space-3xs);
				position: static;
				inset: auto;
				width: auto;
				min-width: 0;
				padding: 0;
				border: 0;
				background: transparent;
			}
		}
	}
}