/**
 * Header nav — desktop submenu (Figma 4299:24886 openMenu, 4299:24887 header).
 * Mobile/column burger menu is handled separately.
 *
 * Breakpoint: 1440+ only.
 */

@media (min-width: 1440px) {
	/* Top-level links — Figma content/inverse/constant (#f2f2f2). */
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item
		> .elementor-item {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--techbbq-content-inverse-constant);
	}

	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item
		> .elementor-item.highlighted,
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item
		> .elementor-item[aria-expanded="true"] {
		color: var(--techbbq-content-inverse-constant);
	}

	/* Submenu open: dim inactive top-level links (Figma openMenu). */
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main.techbbq-nav-submenu-open
		> .elementor-nav-menu
		> .menu-item
		> .elementor-item:not(.highlighted):not([aria-expanded="true"]) {
		color: var(--techbbq-content-secondary);
	}

	/* Custom 12px chevron on parent items — ::after from first paint
	 * (menu-item-has-children is server HTML). SmartMenus .sub-arrow is
	 * injected later and must not affect layout. */
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item-has-children
		> .elementor-item::after {
		content: "";
		/* Reset Elementor pointer ::after (absolute, left: 0, opacity: 0). */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		position: static;
		inset: auto;
		z-index: auto;
		flex: 0 0 12px;
		flex-shrink: 0;
		width: 12px;
		height: 12px;
		opacity: 1;
		line-height: 1;
		background-color: currentColor;
		-webkit-mask: url("../../images/icon-chevron-down-12.svg") center / contain no-repeat;
		mask: url("../../images/icon-chevron-down-12.svg") center / contain no-repeat;
		transform: none;
	}

	/* Instant submenu close — override Elementor .4s link transition. */
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		.elementor-nav-menu
		a,
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		.elementor-nav-menu
		a::after {
		transition: none !important;
	}

	/* Chevron rotation when submenu opens/closes. */
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item-has-children
		> .elementor-item::after {
		transition: transform 250ms ease !important;
	}

	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown {
		transition: none !important;
		animation: none !important;
	}

	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item-has-children
		> .elementor-item:hover::after,
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item-has-children
		> .elementor-item:focus::after,
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item-has-children
		> .elementor-item:focus-visible::after {
		opacity: 1;
		transform: none;
	}

	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item-has-children
		> .elementor-item.highlighted::after,
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item-has-children
		> .elementor-item[aria-expanded="true"]::after {
		opacity: 1;
		transform: rotate(180deg);
	}

	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		> .elementor-nav-menu
		> .menu-item-has-children
		> .elementor-item
		.sub-arrow {
		display: none !important;
	}

	/* Nested desktop submenu panel — not the burger dropdown container. */
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown {
		box-sizing: border-box;
		display: none;
		flex-direction: column;
		width: 296px !important;
		min-width: 296px !important;
		max-width: 296px !important;
		padding: var(--techbbq-space-sm);
		border: 0;
		border-radius: var(--techbbq-radius-md);
		background-color: var(--techbbq-bg-surface-glass) !important;
		isolation: isolate;
		-webkit-backdrop-filter: blur(15px) !important;
		backdrop-filter: blur(15px) !important;
		/* SmartMenus sets top on the parent li; JS sets --techbbq-header-submenu-top
		 * so the panel sits 8px below the glass header bar, not under the link. */
		top: var(--techbbq-header-submenu-top, calc(100% + var(--techbbq-space-1))) !important;
		margin-top: 0 !important;
		pointer-events: none;
		visibility: hidden;
	}

	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown[aria-hidden="false"] {
		/* SmartMenus sets inline display:block — that kills flex gap. */
		display: flex !important;
		pointer-events: auto;
		visibility: visible;
	}

	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown
		> .menu-item {
		width: 100%;
	}

	/* 4px between items (6px link padding is on .elementor-sub-item). */
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown
		> .menu-item + .menu-item {
		margin-top: 4px !important;
	}

	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown
		.elementor-sub-item {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 100%;
		min-width: 0;
		min-height: 42px;
		padding: 6px var(--techbbq-space-sm);
		border-radius: var(--techbbq-radius-lg);
		color: var(--techbbq-content-primary);
		font-family: var(--techbbq-font-family-body);
		font-size: var(--techbbq-text-paragraph-s-size);
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: 0.02em;
		text-decoration: none;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown
		.elementor-sub-item:hover,
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown
		.elementor-sub-item:focus,
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown
		.elementor-sub-item:focus-visible,
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown
		.elementor-sub-item.highlighted,
	.techbbq-header:not(.elementor-sticky__spacer)
		.elementor-nav-menu--main
		ul.elementor-nav-menu--dropdown
		.elementor-sub-item.elementor-item-active {
		background-color: var(--techbbq-color-grey-alpha-50-15);
		border-radius: var(--techbbq-radius-md);
		color: var(--techbbq-content-primary);
		text-decoration: none;
	}
}