/* ForgePress Component: Navigation
 * Accessible primary, secondary, footer navigation. Includes mobile
 * toggle, dropdown indicators, and keyboard-friendly focus states. */

.fp-nav {
	display: flex;
	align-items: center;
}

.fp-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-nav__list li {
	position: relative;
}

.fp-nav__list > li > a {
	display: block;
	padding: 0.5rem 0.875rem;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--fp-color-foreground);
	border-radius: var(--fp-radius, 6px);
	transition: background-color var(--fp-transition-fast, 150ms ease),
	            color var(--fp-transition-fast, 150ms ease);
}

.fp-nav__list > li > a:hover,
.fp-nav__list > li > a:focus {
	background-color: var(--fp-color-surface);
	color: var(--fp-color-primary);
}

.fp-nav__list > li > a[aria-current="page"] {
	color: var(--fp-color-primary);
	font-weight: 600;
}

/* Dropdown. */
.fp-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: var(--fp-color-background);
	border: 1px solid var(--fp-color-border);
	border-radius: var(--fp-radius, 6px);
	box-shadow: var(--fp-shadow-md, 0 4px 12px rgba(31,41,51,0.10));
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--fp-transition-fast, 150ms ease),
	            transform var(--fp-transition-fast, 150ms ease),
	            visibility var(--fp-transition-fast, 150ms ease);
	z-index: 100;
}

.fp-nav__list li:hover > .sub-menu,
.fp-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fp-nav__list .sub-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: 0.9rem;
	color: var(--fp-color-foreground);
	border-radius: 4px;
}

.fp-nav__list .sub-menu a:hover {
	background-color: var(--fp-color-surface);
	color: var(--fp-color-primary);
}

/* Mobile toggle. */
.fp-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
}

.fp-nav-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--fp-color-foreground);
	border-radius: 2px;
	transition: transform var(--fp-transition-base, 250ms ease),
	            opacity var(--fp-transition-fast, 150ms ease);
}

.fp-nav-toggle[aria-expanded="true"] .fp-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.fp-nav-toggle[aria-expanded="true"] .fp-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.fp-nav-toggle[aria-expanded="true"] .fp-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile breakpoint. */
@media (max-width: 879px) {
	.fp-nav-toggle {
		display: flex;
	}

	.fp-nav--primary .fp-nav__list {
		position: fixed;
		top: 72px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 1rem;
		background: var(--fp-color-background);
		border-bottom: 1px solid var(--fp-color-border);
		box-shadow: var(--fp-shadow-lg, 0 10px 30px rgba(31,41,51,0.14));
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height var(--fp-transition-slow, 400ms ease),
		            opacity var(--fp-transition-base, 250ms ease);
	}

	.fp-nav--primary.fp-nav-open .fp-nav__list {
		max-height: calc(100vh - 72px);
		opacity: 1;
		overflow-y: auto;
	}

	.fp-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding-left: 1rem;
	}
}

/* Footer nav. */
.fp-nav--footer .fp-nav__list {
	gap: 1rem;
}
.fp-nav--footer .fp-nav__list a {
	font-size: 0.875rem;
	color: var(--fp-color-muted);
}
.fp-nav--footer .fp-nav__list a:hover {
	color: var(--fp-color-primary);
}