/**
 * Features Mega Menu
 *
 * Premium SaaS-style mega menu for the Features navigation item.
 * Displayed when a nav link has the class `has-features-mega-menu`.
 *
 * Architecture:
 *   - The mega menu panel is rendered inside the nav <li> by PHP.
 *   - JavaScript moves it to a portal (appended to .nivo-header__bar)
 *     on desktop so it can escape the nav's stacking context.
 *   - On mobile it stays inline inside the overlay and displays as
 *     an accordion-style list.
 *
 * All design tokens come from theme.json — zero hardcoded colours.
 *
 * @see mega-menu.js for interaction logic
 */

/* ─── Trigger nav item — show chevron indicator ──────────────── */

.nivo-header__nav .nivo-mega-menu-trigger > .wp-block-navigation-item__content {
	display: inline-flex !important;
	align-items: center;
	gap: 3px;
}

/* Chevron icon injected by JS */
.nivo-mega-menu-trigger .nivo-mega-menu__chevron {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--text-muted);
	transition: transform var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}

/* Override navigation.css wp-block-navigation__submenu-icon svg rule */
.nivo-mega-menu-trigger .nivo-mega-menu__chevron svg {
	width: 20px !important;
	height: 20px !important;
	display: block;
}

.nivo-mega-menu-trigger.is-mega-menu-open .nivo-mega-menu__chevron,
.nivo-mega-menu-trigger:hover .nivo-mega-menu__chevron {
	transform: rotate(180deg);
	color: var(--wp--preset--color--primary-500);
}

/* ─── Mega Menu Panel (desktop — positioned via JS portal) ───── */

/*
 * Default state: visually hidden but accessible.
 *
 * The panel is appended to .nivo-header__bar by JS, giving it
 * position:absolute relative to the already-positioned bar.
 * The JS sets top/left/width dynamically and adds .is-open.
 *
 * We control opacity + transform so the CSS transition runs
 * cleanly. The JS adds aria-hidden="true" when closed.
 */
.nivo-mega-menu {
	position: absolute;
	z-index: var(--wp--custom--z-index--dropdown);

	background-color: var(--wp--preset--color--surface-primary);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 2px solid var(--wp--preset--color--primary-500);
	border-radius: var(--wp--custom--border-radius--xl);
	box-shadow:
		0 20px 40px -8px rgb(0 0 0 / 0.10),
		0 8px 16px -4px rgb(0 0 0 / 0.06),
		0 0 0 1px rgb(0 0 0 / 0.02);

	/* Closed state */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);

	transition:
		opacity    var(--wp--custom--transition--slow),
		transform  var(--wp--custom--transition--slow),
		visibility 0s linear var(--wp--custom--transition--slow);
}

/* Open state — JS adds .is-open */
.nivo-mega-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}

/*
 * Hover bridge — invisible strip above the panel that covers the gap
 * between the header pill and the panel top edge. Without this the
 * cursor "falls through" the gap and triggers the close timer.
 */
.nivo-mega-menu::before {
	content: '';
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

/* Reduced-motion override */
@media (prefers-reduced-motion: reduce) {
	.nivo-mega-menu {
		transition: opacity var(--wp--custom--transition--fast), visibility 0s linear var(--wp--custom--transition--fast);
		transform: none;
	}

	.nivo-mega-menu.is-open {
		transform: none;
	}
}

/* ─── Inner padding ──────────────────────────────────────────── */

.nivo-mega-menu__inner {
	padding: var(--wp--preset--spacing--5);
}

/* ─── Feature grid — 2 columns on desktop ───────────────────── */

.nivo-mega-menu__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--2);
}

/* ─── Feature card ───────────────────────────────────────────── */

.nivo-mega-menu__item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--border-radius--xl);
	text-decoration: none !important;
	color: inherit;
	background-color: var(--wp--preset--color--neutral-50);

	transition:
		background-color var(--wp--custom--transition--fast),
		transform        var(--wp--custom--transition--fast);
}

.nivo-mega-menu__item:hover,
.nivo-mega-menu__item:focus-visible {
	background-color: var(--wp--preset--color--primary-50);
	transform: translateY(-1px);
	text-decoration: none !important;
}

.nivo-mega-menu__item:active {
	transform: translateY(0);
}

/* ─── Icon ───────────────────────────────────────────────────── */

.nivo-mega-menu__item-icon {
	font-size: 1.375rem;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 1px;
	width: 2rem;
	text-align: center;
	/* Subtle icon container */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background-color: var(--wp--preset--color--neutral-100);
	border-radius: var(--wp--custom--border-radius--lg);
	flex-shrink: 0;
	transition: background-color var(--wp--custom--transition--fast);
}

.nivo-mega-menu__item:hover .nivo-mega-menu__item-icon {
	background-color: var(--wp--preset--color--primary-50);
}

/* ─── Card body ──────────────────────────────────────────────── */

.nivo-mega-menu__item-body {
	flex: 1;
	min-width: 0;
}

/* ─── Title row (title + badge) ──────────────────────────────── */

.nivo-mega-menu__item-header {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--1);
}

.nivo-mega-menu__item-title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
	line-height: 1.4;
	transition: color var(--wp--custom--transition--fast);
}

.nivo-mega-menu__item:hover .nivo-mega-menu__item-title,
.nivo-mega-menu__item:focus-visible .nivo-mega-menu__item-title {
	color: var(--wp--preset--color--primary-600);
}

/* ─── Excerpt ────────────────────────────────────────────────── */

.nivo-mega-menu__item-excerpt {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-muted);
	line-height: 1.55;
	margin: 0;

	/* Two-line clamp */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Badges ─────────────────────────────────────────────────── */

.nivo-mega-menu__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.1em 0.5em;
	border-radius: var(--wp--custom--border-radius--full);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: auto;
}

/* New — primary */
.nivo-mega-menu__badge--new {
	background-color: var(--wp--preset--color--primary-100);
	color: var(--wp--preset--color--primary-700);
}

/* Hot — warm amber */
.nivo-mega-menu__badge--hot {
	background-color: #fff3e0;
	color: #b84500;
}

/* Popular — green accent */
.nivo-mega-menu__badge--popular {
	background-color: var(--wp--preset--color--accent-50);
	color: var(--wp--preset--color--accent-600);
}

/* Pro — gradient brand */
.nivo-mega-menu__badge--pro {
	background: var(--wp--preset--gradient--brand-primary);
	color: var(--wp--preset--color--neutral-0);
}

/* Beta — neutral subtle */
.nivo-mega-menu__badge--beta {
	background-color: var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--neutral-600);
}

/* Coming Soon — muted */
.nivo-mega-menu__badge--coming-soon {
	background-color: var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--text-muted);
}

/* ─── Mobile — inline accordion within the nav overlay ──────── */

/*
 * On mobile (<= 767px) JavaScript leaves the panel inside the <li>.
 * The panel is hidden by default and shown when the trigger <li>
 * has the .is-mega-menu-open class (added by JS on tap).
 */
@media (max-width: 767px) {
	.nivo-mega-menu {
		/* Override the portal / absolute styles */
		position: static !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;

		/* Start collapsed */
		display: none;

		/* Reset panel chrome for inline flow */
		width: 100% !important;
		background: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
		border-top: 1px solid var(--wp--preset--color--border);
		padding-top: var(--wp--preset--spacing--2);
		margin-top: var(--wp--preset--spacing--2);
	}

	.wp-block-navigation-item.nivo-mega-menu-trigger.is-mega-menu-open .nivo-mega-menu {
		display: block;
	}

	/* Single column on mobile */
	.nivo-mega-menu__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--1);
	}

	/* Compact cards on mobile */
	.nivo-mega-menu__item {
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
		border-radius: var(--wp--custom--border-radius--lg);
	}

	.nivo-mega-menu__item-icon {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 1rem;
	}

	/* No lift on mobile (touch devices) */
	.nivo-mega-menu__item:hover {
		transform: none;
	}
}