/**
 * OMI desktop mega menu panels.
 * Figma: Sub Menu Design (71:7) → "About OMI Mega Menu".
 *
 * @author Sameer Ali
 */

@media (min-width: 1200px) {

	/*
	 * Panel: unfolds downward (clip-path) + fades in, then columns and
	 * links cascade in. Closing folds it back up. Moving from one top item
	 * to another swaps the content without the unfold (.is-mega-switching).
	 */
	.omi-header .omi-mega {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 5;
		/* Overlap the header by 1px: at browser zoom / display scaling
		   (e.g. 125%) Chrome otherwise leaves a hairline seam where the
		   page shows through between header and panel (fix 3.4). */
		margin-top: -1px;
		background: var(--omi-color-white);
		opacity: 0;
		visibility: hidden;
		clip-path: inset(0 0 100% 0);
		pointer-events: none;
		transition:
			clip-path .38s cubic-bezier(.65, 0, .35, 1),
			opacity .3s ease .08s,
			visibility 0s linear .38s;
	}

	.omi-header .omi-menu__item.is-open > .omi-mega {
		opacity: 1;
		visibility: visible;
		clip-path: inset(0 0 -80px 0); /* -80px keeps the shadow visible */
		pointer-events: auto;
		transition:
			clip-path .55s cubic-bezier(.16, 1, .3, 1),
			opacity .3s ease,
			visibility 0s;
	}

	/*
	 * Switching between top items: the panel stays unfolded (no flash of
	 * the page behind), the old content disappears and the new columns
	 * cascade in.
	 */
	.omi-header.is-mega-switching .omi-menu__item > .omi-mega {
		clip-path: inset(0 0 -80px 0);
		transition: none;
	}

	/* No-JS fallback: open on hover / keyboard focus. */
	.omi-header:not(.is-mega-ready) .omi-menu__item:hover > .omi-mega,
	.omi-header:not(.is-mega-ready) .omi-menu__item:focus-within > .omi-mega {
		opacity: 1;
		visibility: visible;
		clip-path: none;
		pointer-events: auto;
		transition: none;
	}

	.omi-header .omi-mega__inner {
		width: 100%;
		max-width: calc(var(--omi-container) + var(--omi-gutter) * 2);
		margin: 0 auto;
		padding: 8px var(--omi-gutter) 40px; /* divider stays 35px under the search pill (header now 127px) */
	}

	/* 1px line across the content width, 35px above the columns. */
	.omi-header .omi-mega__divider {
		display: block;
		height: 1px;
		background: var(--omi-color-border);
	}

	/* Columns: right-aligned, last column ends 40px before the edge. */
	.omi-header .omi-mega__cols {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 24px 21px;
		margin: 35px 0 0;
		padding: 0 40px 0 0;
		list-style: none;
	}

	.omi-header .omi-mega__col {
		flex: 0 1 360px;
		min-width: 180px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.omi-header .omi-mega__col:last-child {
		flex: 0 0 auto;
		min-width: 126px;
	}

	.omi-header .omi-mega__col::before,
	.omi-header .omi-mega__col::after,
	.omi-header .omi-mega__item::before,
	.omi-header .omi-mega__item::after {
		content: none;
	}

	/* Column heading + underline (heading group gap 8). */
	.omi-header .omi-mega__head {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.omi-header .omi-mega__heading {
		font: 700 16px/19px var(--omi-font);
		color: var(--omi-color-primary);
		text-decoration: none;
		white-space: nowrap;
	}

	.omi-header a.omi-mega__heading:hover,
	.omi-header a.omi-mega__heading:focus-visible {
		color: var(--omi-color-text);
	}

	.omi-header .omi-mega__rule {
		display: block;
		width: 120px;
		min-width: 100%;
		height: 2px;
		background: var(--omi-color-primary);
	}

	.omi-header .omi-mega__col:last-child .omi-mega__rule {
		width: 100px;
	}

	/* Links (gap 16, heading group → links 20). */
	.omi-header .omi-mega__links,
	.omi-header .omi-mega__simple {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.omi-header .omi-mega__links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-top: 20px;
	}

	.omi-header .omi-mega__item {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.omi-header .omi-mega__link {
		position: relative;
		display: inline-block;
		font: 500 14px/17px var(--omi-font);
		color: var(--omi-color-text);
		text-decoration: none;
		transition: color .25s var(--omi-ease);
	}

	.omi-header .omi-mega__link:hover,
	.omi-header .omi-mega__link:focus-visible,
	.omi-header .omi-mega__item.is-current > .omi-mega__link {
		color: var(--omi-color-primary);
	}

	.omi-header .omi-mega__link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -3px;
		height: 1.5px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform .35s cubic-bezier(.16, 1, .3, 1);
	}

	.omi-header .omi-mega__link:hover::after,
	.omi-header .omi-mega__link:focus-visible::after {
		transform: scaleX(1);
		transform-origin: left center;
	}

	.omi-header .omi-mega__link:focus-visible,
	.omi-header .omi-mega__heading:focus-visible {
		outline: 2px solid var(--omi-color-primary);
		outline-offset: 3px;
		border-radius: 2px;
	}

	/* Simple panel (top item whose sub-items have no children). */
	.omi-header .omi-mega__simple {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 300px));
		justify-content: end;
		gap: 16px 32px;
		margin-top: 35px;
		padding-right: 40px;
	}

	/* Cascade: divider draws in, columns rise in, then each link. */
	.omi-header .omi-menu__item.is-open .omi-mega__divider {
		animation: omi-mega-line .6s cubic-bezier(.16, 1, .3, 1) both;
		transform-origin: left center;
	}

	.omi-header .omi-menu__item.is-open .omi-mega__head {
		animation: omi-mega-in .5s cubic-bezier(.16, 1, .3, 1) both;
		animation-delay: calc(var(--omi-col, 0) * 70ms + 80ms);
	}

	.omi-header .omi-menu__item.is-open .omi-mega__rule {
		animation: omi-mega-line .6s cubic-bezier(.16, 1, .3, 1) both;
		animation-delay: calc(var(--omi-col, 0) * 70ms + 200ms);
		transform-origin: left center;
	}

	.omi-header .omi-menu__item.is-open .omi-mega__links > .omi-mega__item,
	.omi-header .omi-menu__item.is-open .omi-mega__simple > .omi-mega__item {
		animation: omi-mega-in .45s cubic-bezier(.16, 1, .3, 1) both;
		animation-delay: calc(var(--omi-col, 0) * 70ms + var(--omi-row, 0) * 35ms + 160ms);
	}

	/* When switching items the cascade is shorter. */
	.omi-header.is-mega-switching .omi-menu__item.is-open .omi-mega__head,
	.omi-header.is-mega-switching .omi-menu__item.is-open .omi-mega__links > .omi-mega__item,
	.omi-header.is-mega-switching .omi-menu__item.is-open .omi-mega__simple > .omi-mega__item {
		animation-duration: .35s;
		animation-delay: calc(var(--omi-col, 0) * 40ms + var(--omi-row, 0) * 20ms);
	}

	.omi-header.is-mega-switching .omi-menu__item.is-open .omi-mega__divider {
		animation: none;
	}
}

/* Panels are never shown below desktop (the mobile menu is used). */
@media (max-width: 1199px) {
	.omi-header .omi-mega {
		display: none;
	}
}

@keyframes omi-mega-in {
	from { opacity: 0; transform: translate3d(0, 12px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes omi-mega-line {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.omi-header .omi-mega,
	.omi-header .omi-mega * {
		transition: none !important;
		animation: none !important;
	}
}