/*
 * AP2 Mega Menu — front-end styles.
 *
 * Layered as:
 *  - Tokens (overridable via `:root` from the parent theme/plugin)
 *  - Top-level horizontal nav
 *  - Mega panel (depth 1 + 2)
 *  - Deep flyout (depth 3)
 *
 * Desktop only — Breakdance handles the mobile menu, so we hide the entire
 * widget below the breakpoint to avoid any visual conflict.
 *
 * Specificity strategy
 * --------------------
 * Every BEM selector is scoped under `.ap2-mega-menu` so each rule lands
 * at (0,2,0) instead of (0,1,0). Breakdance ships a lot of `(0,2,0)`+
 * selectors that target descendants of its menu/header builders; without
 * the extra class our base rules (e.g. `.ap2-mega-menu__top-link`) lose
 * the specificity tie-break and Breakdance defaults bleed through.
 * Prefer adding new selectors here in the same scoped form.
 */

/* -------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------- */

.ap2-mega-menu {
	--ap2mm-color-text: #00344d;
	--ap2mm-color-text-muted: rgba(0, 52, 77, 0.7);
	--ap2mm-color-accent: #000;
	--ap2mm-color-bg: #ffffff;
	--ap2mm-color-rule: rgba(0, 52, 77, 0.18);

	/* AP2 brand link colors. The muted variant (`#00344db3` = #00344d at
	 * 70 % alpha) is the resting state for every menu link sitting on a
	 * light surface; hover/focus / active state escalate to the full
	 * `#00344d`. Top-link gets a separate "closed-state" white so it
	 * stays legible on the dark hero when the panel isn't open. */
	--ap2mm-color-link: #00344db3;
	--ap2mm-color-link-hover: #00344d;
	--ap2mm-color-top-link: #fcfdfd;
	--ap2mm-color-top-link-active: var(--ap2mm-color-link);

	--ap2mm-link-gap: 0.625rem;
	--ap2mm-top-gap: 1.75rem;
	--ap2mm-panel-padding-y: 2.5rem;
	--ap2mm-panel-padding-x: 4rem;
	--ap2mm-panel-shadow: 0 18px 32px -24px rgba(0, 52, 77, 0.25);
	--ap2mm-panel-radius: 0;

	--ap2mm-font-top: 1rem;
	--ap2mm-font-title: 24px;
	--ap2mm-font-column-header: 1rem;
	--ap2mm-font-column-link: 1rem;

	--ap2mm-transition: 180ms ease;
	--ap2mm-fade-transition: 140ms ease;

	--ap2mm-link-hover-scale: 1.04;

	--ap2mm-logo-width: 120px;

	font-family: inherit;
	color: var(--ap2mm-color-text);
}

/* -------------------------------------------------------------------------
 * Reset inside the menu — wp_get_nav_menu_items + Breakdance bring their
 * own list/button styles. Keep us isolated.
 * ------------------------------------------------------------------------- */

.ap2-mega-menu,
.ap2-mega-menu * {
	box-sizing: border-box;
}

.ap2-mega-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap2-mega-menu a {
	color: inherit;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Top-level nav
 * ------------------------------------------------------------------------- */

.ap2-mega-menu .ap2-mega-menu__top {
	display: flex;
	align-items: center;
	gap: var(--ap2mm-top-gap);
}

.ap2-mega-menu .ap2-mega-menu__top-item {
	position: static; /* panel is positioned against the <nav>, not the item */
	display: flex;
	align-items: center;
}

.ap2-mega-menu .ap2-mega-menu__top-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.75rem 0;
	font-size: var(--ap2mm-font-top);
	font-weight: 500;
	line-height: 1.2;
	/* Closed-state default: white over the dark hero. `!important` is
	 * needed both to outrank Breakdance's `<a>` rules and to win over
	 * the inherited `--ap2mm-color-text` set on the menu root. */
	color: var(--ap2mm-color-top-link) !important;
	transform-origin: left center;
	transition:
		color var(--ap2mm-transition),
		opacity var(--ap2mm-transition),
		transform var(--ap2mm-transition);
}

/* When the stage is open the top-bar sits over the white panel, so
 * swap the link color to the muted dark-blue variant for contrast.
 * `!important` is required because Breakdance ships an `:hover` color
 * rule on every `<a>` inside its menu/header builders that otherwise
 * wins on specificity. */
.ap2-mega-menu.is-open .ap2-mega-menu__top-link {
	color: var(--ap2mm-color-top-link-active) !important;
}

/* Hover / focus escalates from the muted to the full brand color,
 * regardless of whether the panel is open. Source order matters here
 * — this rule must come *after* the `.is-open` block above so the
 * specificity tie (both pseudo-class and class add up to the same
 * weight) resolves in favour of the hover state. */
.ap2-mega-menu .ap2-mega-menu__top-link:hover,
.ap2-mega-menu .ap2-mega-menu__top-link:focus-visible {
	color: var(--ap2mm-color-link-hover) !important;
}

/* -------------------------------------------------------------------------
 * Mega stage + panels
 *
 * All panels share a single stage container so we only animate the
 * curtain-style slide-down once — when the user enters the menu — and
 * cross-fade the inner content when they hover between top items.
 *
 * The stage sits behind the header (`z-index: -1`) and "drops down" from
 * behind the header chrome via `clip-path`. Inside the stage, every panel
 * occupies the same grid cell; only the active one is `is-active` and
 * fades in over the previous.
 *
 * `--ap2mm-panel-content-top` is set by JS to the bottom edge of the
 * `.ap2-mega-menu` element — that's where the panel content (title +
 * columns) starts, so it never hides behind the header chrome.
 * ------------------------------------------------------------------------- */

.ap2-mega-menu {
	position: relative;
}

.ap2-mega-menu .ap2-mega-menu__stage {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--ap2mm-color-bg);
	box-shadow: var(--ap2mm-panel-shadow);
	border-radius: var(--ap2mm-panel-radius);
	z-index: -1; /* below the typical Breakdance header z-index */

	display: grid; /* stack all panels in the same cell for cross-fade */

	opacity: 0;
	clip-path: inset(0 0 100% 0);
	-webkit-clip-path: inset(0 0 100% 0);
	pointer-events: none;
	transition:
		opacity var(--ap2mm-transition),
		clip-path var(--ap2mm-transition),
		-webkit-clip-path var(--ap2mm-transition);
}

.ap2-mega-menu .ap2-mega-menu__stage[hidden] {
	display: grid; /* keep layout for animation; visibility handled below */
}

.ap2-mega-menu.is-open .ap2-mega-menu__stage {
	opacity: 1;
	clip-path: inset(0 0 0 0);
	-webkit-clip-path: inset(0 0 0 0);
	pointer-events: auto;
}

.ap2-mega-menu:not(.is-open) .ap2-mega-menu__stage {
	visibility: hidden;
}

.ap2-mega-menu .ap2-mega-menu__panel {
	grid-area: 1 / 1; /* stack all panels in the same grid cell */

	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ap2mm-fade-transition);
}

.ap2-mega-menu .ap2-mega-menu__panel.is-active {
	opacity: 1;
	pointer-events: auto;
}

.ap2-mega-menu .ap2-mega-menu__panel-inner {
	position: relative;
	display: grid;
	grid-template-columns:
		minmax(180px, 1fr)   /* title */
		minmax(0, 1fr)       /* depth-1 columns */
		minmax(0, 2fr);      /* depth-2 flyouts */
	gap: 3rem;
	padding:
		calc(var(--ap2mm-panel-content-top, 6rem) + var(--ap2mm-panel-padding-y))
		var(--hsp-m)
		var(--hsp-xxl);
	max-width: 80rem;
	margin: 0 auto;
}

.ap2-mega-menu .ap2-mega-menu__panel-title {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	font-family: "Playfair Local";
	color: #000000e6;
}

.ap2-mega-menu .ap2-mega-menu__panel-title span {
	position: relative;
	display: inline-block;
	padding-bottom: 0.75rem;
}

/* Underline as a pseudo-element so its width is independent of the title
 * text length. Tweak `--ap2mm-title-rule-width` to adjust. */
.ap2-mega-menu .ap2-mega-menu__panel-title span::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--ap2mm-title-rule-width, 3rem);
	height: 1px;
	background-color: var(--ap2mm-color-rule);
}

.ap2-mega-menu .ap2-mega-menu__columns {
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: start;
}

.ap2-mega-menu .ap2-mega-menu__column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ap2-mega-menu .ap2-mega-menu__column-header {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--ap2mm-color-accent);
	line-height: 1.3;
	transform-origin: left center;
	transition:
		opacity var(--ap2mm-transition),
		transform var(--ap2mm-transition);
}

.ap2-mega-menu .ap2-mega-menu__chevron {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
 * Depth-2 flyouts
 *
 * Each column with children has a matching `.ap2-mega-menu__flyout` in the
 * shared `.ap2-mega-menu__flyouts` grid cell. All flyouts stack on top of
 * each other; only the one whose column is active fades in. This way the
 * children appear in a NEW column to the right of the depth-1 list, not
 * inline below the column header.
 * ------------------------------------------------------------------------- */

.ap2-mega-menu .ap2-mega-menu__flyouts {
	position: relative;
	min-height: 1px; /* keep the cell present even when empty */
}

.ap2-mega-menu .ap2-mega-menu__flyout {
	padding-top: 1rem;
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ap2mm-link-gap);

	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ap2mm-fade-transition);
}

.ap2-mega-menu .ap2-mega-menu__flyout.is-active {
	opacity: 1;
	pointer-events: auto;
}

/*
 * Depth-3 sub-list — inline expansion under a depth-2 item that has its
 * own children. Hidden until the depth-2 item is hovered/focused.
 */

.ap2-mega-menu .ap2-mega-menu__sub-list {
	display: none;
	flex-direction: column;
	gap: var(--ap2mm-link-gap);
	margin-top: 0.5rem;
	padding-left: 0.875rem;
	border-left: 1px solid var(--ap2mm-color-rule);
}

.ap2-mega-menu .ap2-mega-menu__column-item.is-open > .ap2-mega-menu__sub-list {
	display: flex;
}

.ap2-mega-menu .ap2-mega-menu__column-link {
	/* `inline-flex` is required for the chevron alignment AND to give
	 * `transform: scale()` a transformable box — plain inline `<a>` makes
	 * the scale render inconsistently. */
	display: inline-flex;
	align-items: center;
	color: #000;
	gap: 0.5rem;
	transform-origin: left center;
	transition:
		opacity var(--ap2mm-transition),
		transform var(--ap2mm-transition);
}

/* -------------------------------------------------------------------------
 * Color affordance — every panel link sits at the muted brand blue
 * (`var(--ap2mm-color-link)` = #00344db3) and escalates to the full
 * `var(--ap2mm-color-link-hover)` (#00344d) on hover / focus, plus when
 * its container is in an "active" state (active column, current page,
 * open depth-3 sub-list).
 *
 * `!important` is required because Breakdance ships an `<a>:hover` rule
 * inside its menu/header builders that injects `var(--bde-links-color-
 * hover)` (a blue tint) past plain class selectors. Pinning every state
 * lets opacity-equivalent contrast be the sole hover signal.
 *
 * Top-link is handled separately above so its closed-state white over
 * the hero isn't accidentally overwritten by these rules.
 * ------------------------------------------------------------------------- */

.ap2-mega-menu .ap2-mega-menu__column-header,
.ap2-mega-menu .ap2-mega-menu__column-link {
	color: var(--ap2mm-color-link) !important;
}

.ap2-mega-menu .ap2-mega-menu__column-header:hover,
.ap2-mega-menu .ap2-mega-menu__column-header:focus-visible,
.ap2-mega-menu .ap2-mega-menu__column.is-active > .ap2-mega-menu__column-header,
.ap2-mega-menu .ap2-mega-menu__column-link:hover,
.ap2-mega-menu .ap2-mega-menu__column-link:focus-visible,
.ap2-mega-menu .ap2-mega-menu__column-item.is-current > .ap2-mega-menu__column-link,
.ap2-mega-menu .ap2-mega-menu__column-item.is-open > .ap2-mega-menu__column-link {
	color: var(--ap2mm-color-link-hover) !important;
}

/* -------------------------------------------------------------------------
 * Hover / focus scale — applied to every interactive link in the menu.
 * Tweak `--ap2mm-link-hover-scale` to dial it up or down (1.0 = no scale).
 * ------------------------------------------------------------------------- */

.ap2-mega-menu .ap2-mega-menu__top-link:hover,
.ap2-mega-menu .ap2-mega-menu__top-link:focus-visible,
.ap2-mega-menu .ap2-mega-menu__column-header:hover,
.ap2-mega-menu .ap2-mega-menu__column-header:focus-visible,
.ap2-mega-menu .ap2-mega-menu__column.is-active > .ap2-mega-menu__column-header,
.ap2-mega-menu .ap2-mega-menu__column-link:hover,
.ap2-mega-menu .ap2-mega-menu__column-link:focus-visible {
	transform: scale(var(--ap2mm-link-hover-scale));
}

.ap2-mega-menu .ap2-mega-menu__column-item .ap2-mega-menu__chevron {
	width: 0.4rem;
	height: 0.4rem;
}

/* -------------------------------------------------------------------------
 * Hide on mobile — Breakdance ships its own mobile menu.
 *
 * Override the breakpoint per-site by re-declaring this media query.
 * ------------------------------------------------------------------------- */

/* @media (max-width: 991px) {
	.ap2-mega-menu {
		display: none;
	}
} */