/*
 * Toga mega-menu panel — hover/focus dropdown driven by mega-menu.js.
 *
 * Independent of navigation.css, which owns the existing native
 * <details>/<summary> department flyout. Panels are shown and hidden by
 * mega-menu.js toggling the `hidden` attribute; this file only draws the
 * open panel and its optional transition. That transition lives entirely
 * inside `prefers-reduced-motion: no-preference`, so a visitor who has
 * asked for reduced motion gets an instant, un-animated panel — the same
 * show/hide, with no motion added on top.
 */

.toga-mega-menu {
	position: relative;
	justify-self: start;
}

.toga-mega-menu__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: clamp(1.25rem, 2.5vw, 2.75rem);
}

.toga-mega-menu__item {
	position: relative;
}

.toga-mega-menu__trigger {
	display: inline-flex;
	align-items: center;
	min-height: var(--toga-tap-target, 44px);
	padding: 0;
	color: inherit;
	font-family: "Poppins", "Inter", var(--toga-font-ui, sans-serif);
	font-size: 0.875rem;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.015em;
	white-space: nowrap;
	transition: var(--toga-transition);
}

.toga-mega-menu__trigger:hover {
	color: var(--toga-header-terracotta, #C65D3B);
}

.toga-mega-menu__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.toga-mega-menu__panel {
	position: absolute;
	top: calc(100% + 18px);
	left: 0;
	z-index: 40;
	width: min(38rem, calc(100vw - 2rem));
	background: var(--toga-header-paper, #FAF7F2);
	color: var(--toga-header-ink, #1A1815);
}

.toga-mega-menu__panel[hidden] {
	display: none;
}

@media ( prefers-reduced-motion: no-preference ) {
	.toga-mega-menu__panel {
		opacity: 0;
		transform: translateY( -6px );
		transition: opacity var(--toga-duration-menu, 220ms) var(--toga-ease, ease),
			transform var(--toga-duration-menu, 220ms) var(--toga-ease, ease);
	}

	.toga-mega-menu__panel:not( [hidden] ) {
		opacity: 1;
		transform: translateY( 0 );
	}

	/* Mirrors the open transition on the way out. mega-menu.js keeps the
	   panel visible (hidden stays false) for this rule's duration, then
	   hides it — so closing fades like opening instead of snapping away. */
	.toga-mega-menu__panel.toga-mega-menu__panel--closing {
		opacity: 0;
		transform: translateY( -6px );
	}
}

.toga-mega-menu__panel-inner {
	padding: var(--toga-space-6, 2rem) var(--toga-space-7, 2.5rem);
}

.toga-mega-menu__children {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	grid-auto-rows: min-content;
	align-content: start;
	gap: 0.25rem 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.toga-mega-menu__child-link {
	display: block;
	padding: 0.5em 0;
	color: inherit;
	font-family: "Inter", var(--wp--preset--font-family--inter, sans-serif);
	font-size: 0.9375rem;
	line-height: 1.8;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: var(--toga-transition);
}

.toga-mega-menu__child-link:hover,
.toga-mega-menu__child-link:focus-visible {
	color: var(--toga-header-terracotta, #C65D3B);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}