@layer components {
	.nav { display: none; }
	@media (min-width: 1024px) { .nav { display: block; } }
	.nav__list {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}
	.nav__link {
		display: inline-block;
		padding: 0.5rem 0.75rem;
		border-radius: var(--radius-sm);
		font-size: 0.875rem;
		font-weight: 500;
		text-decoration: none;
		color: var(--color-foreground);
	}
	.nav__link:hover { color: var(--color-accent); }

	/* Mobile nav trigger */
	.mobile-nav-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border: none;
		background: transparent;
		border-radius: var(--radius-sm);
		cursor: pointer;
	}
	@media (min-width: 1024px) { .mobile-nav-trigger { display: none; } }
	.mobile-nav-trigger:hover { background-color: var(--color-muted); }
	.mobile-nav-trigger__icon {
		width: 1.5rem;
		height: 1.25rem;
		position: relative;
		display: block;
	}
	.mobile-nav-trigger__icon::before,
	.mobile-nav-trigger__icon::after,
	.mobile-nav-trigger__icon {
		background-color: currentColor;
	}
	.mobile-nav-trigger__icon,
	.mobile-nav-trigger__icon::before,
	.mobile-nav-trigger__icon::after {
		height: 2px;
		border-radius: 1px;
	}
	.mobile-nav-trigger__icon::before,
	.mobile-nav-trigger__icon::after {
		content: '';
		position: absolute;
		left: 0; right: 0;
	}
	.mobile-nav-trigger__icon::before { top: 0; }
	.mobile-nav-trigger__icon { top: 50%; transform: translateY(-50%); }
	.mobile-nav-trigger__icon::after { bottom: 0; }

	/* Mobile nav dialog */
	.mobile-nav[hidden] { display: none; }
	.mobile-nav {
		position: fixed;
		inset: 0;
		z-index: 50;
		background-color: color-mix(in srgb, var(--color-foreground) 40%, transparent);
	}
	.mobile-nav__panel {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: 100%;
		max-width: 24rem;
		background-color: var(--color-background);
		padding: 1.5rem;
		overflow-y: auto;
		box-shadow: -4px 0 24px rgba(0,0,0,0.15);
		display: flex;
		flex-direction: column;
	}
	.mobile-nav__close {
		position: absolute;
		top: 1rem; right: 1rem;
		width: 2.25rem; height: 2.25rem;
		border: none;
		background: transparent;
		border-radius: var(--radius-sm);
		font-size: 1.25rem;
		cursor: pointer;
	}
	.mobile-nav__close:hover { background-color: var(--color-muted); }
	.mobile-nav__list { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 2rem; }
	.mobile-nav__link {
		display: block;
		padding: 0.75rem;
		border-radius: var(--radius-sm);
		font-size: 1rem;
		font-weight: 500;
		text-decoration: none;
		color: var(--color-foreground);
	}
	.mobile-nav__link:hover { background-color: var(--color-muted); }
	.mobile-nav__cta { margin-top: 1.5rem; width: 100%; text-align: center; }
}