/*!
 * @be-partner-labs/ds v1.8.0 — components/nav
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/nav.min.css">
 * npm:  @import "@be-partner-labs/ds/components/nav";
 * Docs: https://ds.bepartnerlabs.com/components/nav/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/**
	 * .bp-nav
	 * Navigation component with simple links, dropdowns, and megamenu.
	 * Public API:
	 *   --nav-gap        Gap between top-level items
	 *   --nav-link-color Text color of nav links
	 */

	/* cqi fluid type — fires when nav is inside a container (e.g. .bp-header__actions) */
	@container (inline-size > 0) {
		.bp-nav__link,
		.bp-nav__dropdown-btn,
		.bp-nav__megamenu-btn {
			font-size: clamp(var(--bp-text-xs), 1.4cqi, var(--bp-text-sm));
		}
	}

	.bp-nav {
		--_gap: var(--nav-gap, var(--bp-space-1));
		--_link-color: var(--nav-link-color, var(--bp-color-text));

		display: flex;
		align-items: center;
		gap: var(--_gap);
		list-style: none;
	}

	/* ===================== Simple link ===================== */
	.bp-nav__link {
		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-1);
		padding: var(--bp-space-2) var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--_link-color);
		text-decoration: none;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__link:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__link:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	.bp-nav__link[aria-current='page'] {
		color: var(--bp-primary);
		background-color: var(--bp-primary-subtle);
	}

	/* ===================== Dropdown ===================== */
	.bp-nav__item {
		position: relative;
	}

	.bp-nav__dropdown-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-1);
		padding: var(--bp-space-2) var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--_link-color);
		background: none;
		border: none;
		cursor: pointer;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__dropdown-btn:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__dropdown-btn:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* Arrow icon */
	.bp-nav__dropdown-btn::after {
		content: '';
		display: inline-block;
		width: 0.5em;
		height: 0.5em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform var(--bp-duration-fast) var(--bp-ease);
	}

	/* Arrow rotates when dropdown open */
	.bp-nav__item--dropdown:is(:hover, :focus-within) .bp-nav__dropdown-btn::after,
	.bp-nav__item--dropdown[data-open] .bp-nav__dropdown-btn::after {
		transform: rotate(-135deg) translateY(-2px);
	}

	.bp-nav__dropdown-panel {
		position: absolute;
		top: calc(100% + var(--bp-space-2));
		left: 0;
		z-index: 200;
		min-width: 14rem;
		background-color: var(--bp-color-bg-elevated);
		border: 1px solid var(--bp-color-border);
		border-radius: var(--bp-radius-lg);
		box-shadow: var(--bp-shadow-lg);
		padding: var(--bp-space-2);
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-1);

		/* Hidden state */
		opacity: 0;
		transform: scale(0.95) translateY(-4px);
		pointer-events: none;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease),
			transform var(--bp-duration-fast) var(--bp-ease);
	}

	/* Open via hover (pointer devices only) */
	@media (hover: hover) {
		.bp-nav__item--dropdown:hover .bp-nav__dropdown-panel {
			opacity: 1;
			transform: scale(1) translateY(0);
			pointer-events: auto;
		}
	}

	/* Open via focus-within (keyboard / touch) */
	.bp-nav__item--dropdown:focus-within .bp-nav__dropdown-panel {
		opacity: 1;
		transform: scale(1) translateY(0);
		pointer-events: auto;
	}

	.bp-nav__dropdown-link {
		display: flex;
		align-items: center;
		gap: var(--bp-space-2);
		padding: var(--bp-space-2) var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--bp-color-text);
		text-decoration: none;
		font-size: var(--bp-text-sm);
		transition: background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__dropdown-link:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__dropdown-link:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* ===================== Megamenu ===================== */
	.bp-nav__item--megamenu {
		position: static;
	}

	.bp-nav__megamenu-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-1);
		padding: var(--bp-space-2) var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--_link-color);
		background: none;
		border: none;
		cursor: pointer;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__megamenu-btn:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__megamenu-btn:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* Popover-based megamenu panel */
	.bp-nav__megamenu-panel {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 1px);
		inset-inline: 0;
		z-index: 200;
		background-color: var(--bp-color-bg-elevated);
		border-top: 1px solid var(--bp-color-border);
		border-bottom: 1px solid var(--bp-color-border);
		box-shadow: var(--bp-shadow-xl);
		padding: var(--bp-space-8) var(--bp-space-6);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--bp-space-8);
	}

	/* Popover open animation via @starting-style */
	.bp-nav__megamenu-panel[popover] {
		border: none;
		padding: var(--bp-space-8) var(--bp-space-6);
		max-width: 100%;
		width: 100%;
		margin: 0;
		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			transform var(--bp-duration-normal) var(--bp-ease),
			display var(--bp-duration-normal) var(--bp-ease) allow-discrete;
	}

	.bp-nav__megamenu-panel:popover-open {
		opacity: 1;
		transform: translateY(0);
	}

	@starting-style {
		.bp-nav__megamenu-panel:popover-open {
			opacity: 0;
			transform: translateY(-8px);
		}
	}

	.bp-nav__megamenu-section-title {
		font-size: var(--bp-text-xs);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-color-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		margin-bottom: var(--bp-space-3);
	}

	.bp-nav__megamenu-links {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-1);
	}

	.bp-nav__megamenu-link {
		display: flex;
		align-items: flex-start;
		gap: var(--bp-space-3);
		padding: var(--bp-space-3);
		border-radius: var(--bp-radius-md);
		color: var(--bp-color-text);
		text-decoration: none;
		transition: background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-nav__megamenu-link:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-primary);
	}

	.bp-nav__megamenu-link:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	.bp-nav__megamenu-link-icon {
		width: 2rem;
		height: 2rem;
		display: grid;
		place-items: center;
		background-color: var(--bp-primary-subtle);
		border-radius: var(--bp-radius-md);
		color: var(--bp-primary);
		flex-shrink: 0;
		font-size: var(--bp-text-base);
	}

	.bp-nav__megamenu-link-text strong {
		display: block;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-semibold);
	}

	.bp-nav__megamenu-link-text span {
		display: block;
		font-size: var(--bp-text-xs);
		color: var(--bp-color-text-muted);
		margin-top: var(--bp-space-1);
	}

	/* Featured block inside megamenu */
	.bp-nav__megamenu-featured {
		background-color: var(--bp-color-bg-subtle);
		border-radius: var(--bp-radius-lg);
		padding: var(--bp-space-6);
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-3);
	}

	.bp-nav__megamenu-featured-title {
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-weight-semibold);
	}

	.bp-nav__megamenu-featured-desc {
		font-size: var(--bp-text-sm);
		color: var(--bp-color-text-muted);
		line-height: var(--bp-leading-normal);
	}
}