/* ==========================================================================
   Nav Extensions
   Loaded AFTER main.css to override hover-to-open and add 3-level nav support.
   Uses visibility/opacity/pointer-events instead of the -9999px positioning
   hack — eliminates flicker and provides smooth, predictable transitions.

   Desktop dropdowns respond to BOTH CSS :hover (instant) and the JS-toggled
   .submenu-open class (provides a 140 ms grace period on close via
   nav-extensions.js).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Desktop: Override main.css hover rules & establish dropdown system
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	/* --- Kill main.css descendant hover rule that shows ALL sub-menus --- */
	.menu__item.has-submenu:hover .sub-menu {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: none;
	}

	/* Also kill the last-child variation from main.css */
	.menu__item:last-child.has-submenu:hover .sub-menu {
		left: auto;
		right: auto;
	}

	/* --- First-level dropdown: base hidden state --- */
	.menu__item.has-submenu > .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		display: flex;
		flex-direction: column;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	/* --- First-level dropdown: show on hover or via JS class --- */
	.menu__item.has-submenu:hover > .sub-menu,
	.menu__item.has-submenu.submenu-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.2s ease, visibility 0s linear 0s;
	}

	/* Last top-level item: open left to prevent viewport overflow */
	.menu__item:last-child.has-submenu:hover > .sub-menu,
	.menu__item:last-child.has-submenu.submenu-open > .sub-menu {
		left: auto;
		right: 0;
	}

	/* --- Nested items: positioning context for flyout --- */
	.sub-menu .has-submenu {
		position: relative;
	}

	/* --- Nested dropdown: base hidden state (flyout right) --- */
	.sub-menu .has-submenu > .sub-menu {
		position: absolute;
		top: 0;
		left: 100%;
		z-index: 150;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.15s ease, visibility 0s linear 0.15s;
	}

	/* --- Nested dropdown: show on hover or via JS class --- */
	.sub-menu .has-submenu:hover > .sub-menu,
	.sub-menu .has-submenu.submenu-open > .sub-menu {
		top: 0;
		left: 100%;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.15s ease, visibility 0s linear 0s;
	}
}

/* --------------------------------------------------------------------------
   2. Desktop: Mega-menu multi-column layout
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	/* !important overrides the flex-direction:column set on the parent .sub-menu rule */
	.sub-menu--columns {
		display: flex !important;
		flex-wrap: wrap;
		width: 480px;
		max-width: 90vw;
		white-space: normal;
	}

	.sub-menu--columns > li {
		flex: 0 0 50%;
		box-sizing: border-box;
	}

	/* Compact styling for nested sub-menu items */
	.sub-menu .sub-menu li a {
		font-size: 15px;
		padding: 7px 16px;
		line-height: 1.4;
	}
}

/* Narrower viewports: shrink mega-menu and switch to single column */
@media (min-width: 1024px) and (max-width: 1279px) {
	.sub-menu--columns {
		width: 300px;
	}

	.sub-menu--columns > li {
		flex: 0 0 100%;
	}
}

/* --------------------------------------------------------------------------
   3. Desktop: Sub-arrow for nested items (right-pointing chevron)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.sub-menu .has-submenu > .sub-arrow {
		position: absolute;
		top: 0;
		right: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 100%;
		cursor: pointer;
		z-index: 9;
	}

	/* Override main.css top-level arrow size */
	.sub-arrow::before {
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid currentColor;
	}

	.sub-menu .has-submenu > .sub-arrow::after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 6px solid currentColor;
		transition: transform 0.25s ease;
	}

	/* Rotate chevron when submenu is open or hovered */
	.sub-menu .has-submenu.submenu-open > .sub-arrow::after,
	.sub-menu .has-submenu:hover > .sub-arrow::after {
		transform: rotate(90deg);
	}
}

/* --------------------------------------------------------------------------
   4. Mobile: 3rd-level accordion
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	/* 3rd-level sub-menu hidden by default */
	.sub-menu .sub-menu {
		display: none;
		padding-left: 15px;
	}

	/* Show when parent has .submenu-open */
	.submenu-open > .sub-menu {
		display: block;
	}

	/* Ensure sub-arrows are visible and tappable at all levels */
	.sub-menu .has-submenu > .sub-arrow {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		min-height: 44px;
		cursor: pointer;
		z-index: 9;
	}

	.sub-menu .has-submenu > .sub-arrow::before {
		content: "";
		width: 9px;
		height: 9px;
		border-bottom: 1px solid currentColor;
		border-left: 1px solid currentColor;
		opacity: 0.7;
		transform: rotate(-135deg);
		transition: transform 0.25s ease;
	}

	/* Rotate arrow when open */
	.sub-menu .has-submenu.submenu-open > .sub-arrow::before {
		transform: rotate(-45deg);
	}

	/* Split tap targets: link and arrow have distinct areas */
	.sub-menu .has-submenu {
		position: relative;
	}

	.sub-menu .has-submenu > a {
		padding-right: 50px;
	}
}

/* --------------------------------------------------------------------------
   5. Reduced motion: disable dropdown transitions for users who prefer it
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.menu__item.has-submenu > .sub-menu,
	.sub-menu .has-submenu > .sub-menu {
		transition: none !important;
	}
}