/**
 * Sanaa Menu — mega panels and navigation styling.
 * Loaded site-wide while the Sanaa theme is active. Every rule consumes
 * the theme's design tokens, so design systems and event-scoped
 * overrides (.sanaa-event-{id}) rebrand navigation with zero extra CSS.
 *
 * Panel model: a flagged top-level item renders a label column (parent
 * title + childless sub-items) beside one column per sub-item that has
 * children. Selectors carry extra specificity so they hold against the
 * theme's .primary-menu link rules regardless of enqueue order.
 */

/* Panel context: inside .site-header the .sanaa-container wrapper is the
   context, so the panel boxes to the site measure rather than bleeding
   to the viewport; inside a Site Nav widget or an unwrapped menu the
   nav/list becomes it.
   Desktop only — at <=860px the theme collapses .primary-menu behind
   .nav-toggle, and repositioning the menu UL puts the hidden nav
   in-flow inside the header. */
@media (width > 860px) {
	ul:has(> .sanaa-mega-item),
	.sanaa-site-nav:has(.sanaa-mega-item) {
		position: relative;
	}

	.site-header .sanaa-container:has(.sanaa-mega-item) {
		position: relative;
	}

	.site-header ul:has(> .sanaa-mega-item),
	.site-header .sanaa-site-nav:has(.sanaa-mega-item) {
		position: static;
	}

	li.menu-item.sanaa-mega-item {
		position: static;
	}
}

/* Without :has() the panel anchors to its own item instead. */
@supports not (selector(:has(*))) {
	li.menu-item.sanaa-mega-item {
		position: relative;
	}
}

/* ------------------------------------------------------ Mega panel */

li.menu-item.sanaa-mega-item > .sanaa-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--sanaa-z-overlay, 200);
	color: var(--sanaa-text-inverse);
	background: var(--sanaa-ink);
	box-shadow: var(--sanaa-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity var(--sanaa-duration) var(--sanaa-ease),
		transform var(--sanaa-duration) var(--sanaa-ease),
		visibility var(--sanaa-duration);
}

li.menu-item.sanaa-mega-item:hover > .sanaa-mega,
li.menu-item.sanaa-mega-item:focus-within > .sanaa-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* The open parent stays highlighted while its panel is visible — the
   same text + bottom-border treatment the theme gives hover/active. */
li.menu-item.sanaa-mega-item:hover > a,
li.menu-item.sanaa-mega-item:focus-within > a {
	color: var(--sanaa-primary);
	border-bottom-color: var(--sanaa-primary);
}

/* Columns live on a container-width inner grid — the panel bleeds full
   width while content keeps the Sanaa measure. The label column (only
   rendered when childless sub-items exist) takes the first track. */
.sanaa-mega__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.75rem var(--sanaa-grid-gap, 1.5rem);
	max-width: var(--sanaa-container);
	margin-inline: auto;
	padding: 2.25rem var(--sanaa-gutter, 1.25rem) 2.75rem;
}

.sanaa-mega--label .sanaa-mega__inner {
	grid-template-columns: minmax(11rem, 1.2fr) repeat(auto-fit, minmax(10rem, 1fr));
}

.sanaa-mega--cols-2 .sanaa-mega__inner {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sanaa-mega--cols-2 .sanaa-mega--label .sanaa-mega__inner {
	grid-template-columns: minmax(11rem, 1.2fr) repeat(2, minmax(0, 1fr));
}

.sanaa-mega--cols-3 .sanaa-mega__inner {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sanaa-mega--cols-3 .sanaa-mega--label .sanaa-mega__inner {
	grid-template-columns: minmax(11rem, 1.2fr) repeat(3, minmax(0, 1fr));
}

.sanaa-mega--cols-4 .sanaa-mega__inner {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sanaa-mega--cols-4 .sanaa-mega--label .sanaa-mega__inner {
	grid-template-columns: minmax(11rem, 1.2fr) repeat(4, minmax(0, 1fr));
}

/* ------------------------------------------------------ Columns */

/* Column head — title centered between equal hairline rules. The rules
   are flex items sharing the leftover track, so they stay symmetric at
   any column width and a long title wraps instead of pushing them out. */
.sanaa-mega .sanaa-mega__col-head {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
	font-weight: 700;
	text-align: center;
	color: var(--sanaa-text-inverse);
}

.sanaa-mega .sanaa-mega__col-head::before,
.sanaa-mega .sanaa-mega__col-head::after {
	content: '';
	flex: 1;
	min-width: 1.25rem;
	height: 1px;
	background: color-mix(in srgb, var(--sanaa-text-inverse) 28%, transparent);
}

.sanaa-mega a.sanaa-mega__col-head {
	text-decoration: none;
}

.sanaa-mega a.sanaa-mega__col-head:hover,
.sanaa-mega a.sanaa-mega__col-head:focus {
	color: var(--sanaa-text-inverse);
	background: none;
}

.sanaa-mega .sanaa-mega__desc {
	margin: -0.4rem 0 0.9rem;
	font-size: var(--sanaa-text-sm);
	line-height: var(--sanaa-leading-body, 1.5);
	color: color-mix(in srgb, var(--sanaa-text-inverse) 68%, transparent);
}

.sanaa-mega .sanaa-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Long lists balanced into sub-columns sit side by side under their
   shared column head. */
.sanaa-mega .sanaa-mega__lists {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem var(--sanaa-grid-gap, 1.5rem);
}

.sanaa-mega .sanaa-mega__lists > .sanaa-mega__list {
	flex: 1;
	min-width: 9rem;
}

.sanaa-mega .sanaa-mega__list .sanaa-mega__leaf {
	position: static;
}

.sanaa-mega .sanaa-mega__leaf > a {
	display: block;
	padding: 0.3rem 0;
	font-size: var(--sanaa-text-sm);
	color: color-mix(in srgb, var(--sanaa-text-inverse) 82%, transparent);
}

.sanaa-mega .sanaa-mega__leaf > a:hover,
.sanaa-mega .sanaa-mega__leaf > a:focus {
	color: var(--sanaa-text-inverse);
	background: none;
}

/* Lone sub-items sit under the panel label a notch louder. */
.sanaa-mega .sanaa-mega__list--lone .sanaa-mega__leaf > a {
	padding: 0.35rem 0;
	font-size: var(--sanaa-text-base);
	font-weight: 600;
	color: var(--sanaa-text-inverse);
}

/* ------------------------------------------------------- Indicator */

.sanaa-mega__caret {
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.45em;
	vertical-align: 0.05em;
	border-right: 0.1em solid currentcolor;
	border-bottom: 0.1em solid currentcolor;
	transform: rotate(45deg) translateY(-0.1em);
	transition: transform var(--sanaa-duration) var(--sanaa-ease);
}

li.menu-item.sanaa-mega-item:hover > a .sanaa-mega__caret,
li.menu-item.sanaa-mega-item:focus-within > a .sanaa-mega__caret {
	transform: rotate(225deg) translateY(-0.15em);
}

/* --------------------------------------------------------- Mobile */

@media (width <= 860px) {
	li.menu-item.sanaa-mega-item {
		position: relative;
	}

	li.menu-item.sanaa-mega-item > .sanaa-mega {
		position: static;
		margin-left: 0.5rem;
		padding-left: 1rem;
		color: var(--sanaa-text);
		background: none;
		border-left: 1px solid var(--sanaa-border);
		box-shadow: none;
		transform: none;
		transition: none;
	}

	/* Only inside an open menu. An always-visible panel under a
	   collapsed nav is invisible (parent opacity:0) yet hit-testable —
	   it covers the page and eats clicks. */
	.nav-open li.menu-item.sanaa-mega-item > .sanaa-mega,
	.sanaa-site-nav.is-open li.menu-item.sanaa-mega-item > .sanaa-mega {
		opacity: 1;
		visibility: visible;
	}

	.sanaa-mega__inner {
		display: block;
		max-width: none;
		padding: 0.5rem 0 1rem;
	}

	.sanaa-mega__label,
	.sanaa-mega__col {
		margin-bottom: 0.75rem;
	}

	.sanaa-mega .sanaa-mega__col-head {
		margin-bottom: 0.3rem;
		color: var(--sanaa-heading-color);
	}

	.sanaa-mega .sanaa-mega__col-head::before,
	.sanaa-mega .sanaa-mega__col-head::after {
		background: var(--sanaa-border);
	}

	.sanaa-mega .sanaa-mega__desc {
		margin: 0 0 0.4rem;
		color: var(--sanaa-text-muted);
	}

	.sanaa-mega .sanaa-mega__leaf > a,
	.sanaa-mega .sanaa-mega__list--lone .sanaa-mega__leaf > a {
		font-weight: 400;
		color: var(--sanaa-text);
	}

	.sanaa-mega .sanaa-mega__leaf > a:hover,
	.sanaa-mega .sanaa-mega__leaf > a:focus {
		color: var(--sanaa-primary);
	}
}