/*
 * ASAE Grouped Nav — dropdown presentation for the primary navigation.
 *
 * TWO SEPARATE LAYERS, deliberately kept apart:
 *
 *   1. DROPDOWN BASE (§2) — typography and spacing for EVERY primary-nav
 *      dropdown link, on every site this plugin is installed on. This exists
 *      so the grouped Topic panel doesn't look like a foreign object next to
 *      the untouched dropdowns beside it.
 *
 *   2. GROUPED COLUMNS (§4) — layout, applied ONLY inside .neve-mega-menu,
 *      which the PHP only ever puts on a parent listed in the grouping map.
 *      Nothing here can give columns to an ordinary dropdown.
 *
 * So: installing this plugin restyles dropdowns. It does NOT add columns
 * unless a parent is explicitly configured for grouping.
 *
 * Loaded after Neve's own stylesheets (see the priority-20 enqueue), so
 * same-specificity rules win.
 */

/* ── §1 Tokens ──────────────────────────────────────────────────────────── */
:root {
	--asae-gn-accent: var(--nv-primary-accent, #bd491e);
	--asae-gn-label: var(--asae-text-muted, #595959);
	--asae-gn-link: var(--nv-text-color, #2b2b2b);
	--asae-gn-link-size: 15px;
	/* Deliberately LIGHTER than the top-level nav (18px/700) so the two levels
	 * read as different tiers. Dropdown links are the quieter of the pair. */
	--asae-gn-link-weight: 400;
	/* Tight leading WITHIN a link, so a label that wraps to two lines reads as
	 * one item. Space BETWEEN items comes from padding, never line-height —
	 * that separation is the whole point. */
	--asae-gn-link-leading: 1.25;
	/* Mobile keeps roomier rows for touch; desktop is tightened, since Neve's
	 * own .wrap padding is zeroed there and this becomes the only spacing. */
	--asae-gn-row-gap: 9px;
	--asae-gn-row-gap-desktop: 10px;
	/* Distance from the top of ANY dropdown panel to the first line of text in
	 * it. In the grouped panel that first line is a group heading; in a plain
	 * dropdown it is the first link. Holding both to the same inset is what
	 * makes the panels feel like one system as you roll across the nav.
	 *
	 * A plain panel therefore gets (inset - row gap) of padding, because its
	 * first link contributes its own top padding; the grouped panel gets the
	 * full inset, because its heading has none. Derived, not eyeballed — so
	 * changing the row gap keeps the alignment instead of breaking it. */
	--asae-gn-panel-inset: 20px;
	/* Ceiling, not a target: the panel shrink-wraps to its content. */
	--asae-gn-panel-max: 820px;

	/* Desktop group-label chip (§4). The label sits in its own tinted band,
	 * one per column — NOT one bar across the panel, which would visually weld
	 * the four columns into a single strip and undo the grouping.
	 *
	 * The tint is bounded by contrast, not taste: the label colour below holds
	 * WCAG AA (4.5:1) against any grey down to #D0D0D0 and fails at #CECECE
	 * (4.45:1). #EFEFEF measures 6.09:1 with the muted label colour, which the
	 * chip and the panel default now share — that headroom means the tint can
	 * be deepened later without a second edit.
	 *
	 * --chip-pad-y does double duty: it is also what the panel's top inset is
	 * reduced by, so the first line of text still lands on
	 * --asae-gn-panel-inset and the grouped panel keeps the first-text
	 * alignment it shares with the plain dropdowns beside it.
	 *
	 * The label HANGS LEFT of its links rather than lining up with them —
	 * the same hierarchy the mobile drawer builds with its 16px child indent
	 * (§5). --chip-pad-x is the only lever: Neve pads every dropdown link 20px
	 * via its own .wrap, and the label's text edge is --chip-pad-x, so
	 *
	 *     hang = 20px - --chip-pad-x
	 *
	 * At 10px that is a 10px hang. Raising --chip-pad-x moves the label right
	 * and shortens the hang; the two are deliberately one control, because a
	 * label that hangs further than its own chip padding looks detached from
	 * the chip. Grouped links therefore add NO padding of their own, which
	 * also lands them on the same text edge as every plain dropdown's links. */
	--asae-gn-chip-bg: #efefef;
	/* Hairline closing the bottom of the chip, so the band reads as a header
	 * over its list rather than a floating swatch. Decorative only — the fill
	 * and the uppercase label already carry the "this is a label" meaning, so
	 * no contrast minimum applies to it (1.55:1 on the chip, 1.78:1 where it
	 * meets the panel). Keep it thin and grey: at 2px, or much darker, the
	 * chip stops reading as a label and starts reading as a tab. */
	--asae-gn-chip-rule: #c2c2c2;
	--asae-gn-chip-label: #555555;
	--asae-gn-chip-pad-x: 10px;
	--asae-gn-chip-pad-y: 6px;
	--asae-gn-chip-gap: 6px;
	/* Column side padding. Halved from 16px when the chips landed: the chip
	 * edges now carry the column separation that whitespace used to. */
	--asae-gn-col-pad: 8px;
}

/* ── §2 Dropdown base — ALL primary-nav dropdowns ───────────────────────── */
/*
 * Replaces the theme defaults, which differ per site (AN: 18px/500/#666,
 * Primary: 18px/700/#666) and differ again from the grouped panel. One
 * treatment everywhere.
 */
.header--row .nv-nav-wrap .primary-menu-ul .sub-menu li > .wrap > a,
.header-menu-sidebar-inner .primary-menu-ul .sub-menu li > .wrap > a {
	font-size: var(--asae-gn-link-size);
	font-weight: var(--asae-gn-link-weight);
	color: var(--asae-gn-link);
	/* Leading is for wrapped lines only. */
	line-height: var(--asae-gn-link-leading);
	padding-top: var(--asae-gn-row-gap);
	padding-bottom: var(--asae-gn-row-gap);
	text-decoration: none;
}

.header--row .nv-nav-wrap .primary-menu-ul .sub-menu li > .wrap > a:hover,
.header--row .nv-nav-wrap .primary-menu-ul .sub-menu li > .wrap > a:focus,
.header-menu-sidebar-inner .primary-menu-ul .sub-menu li > .wrap > a:hover,
.header-menu-sidebar-inner .primary-menu-ul .sub-menu li > .wrap > a:focus {
	color: var(--asae-gn-accent);
}

/* Keyboard focus must stay visible on every dropdown link (WCAG 2.2 AA). */
.header--row .nv-nav-wrap .primary-menu-ul .sub-menu a:focus-visible,
.header-menu-sidebar-inner .primary-menu-ul .sub-menu a:focus-visible {
	outline: 2px solid var(--asae-gn-accent);
	outline-offset: 2px;
}

/* ── §3 Group headings ──────────────────────────────────────────────────── */
/*
 * Orientation labels, not links. Neve renders these as a bare <span> (because
 * the menu item's URL is '#'), which keeps them out of the tab order for free —
 * no tabindex needed, and deliberately NOT aria-hidden, since the grouping is
 * useful context for screen reader users too.
 *
 * Selector note: Neve wraps the span in its own <div class="wrap">, so the
 * span is NOT a direct child of the <li>. A `>` here matches nothing and the
 * label inherits the theme's submenu colour — which is white, i.e. invisible
 * on a white panel. Match by descendant.
 */
.neve-mega-menu .neve-mm-heading span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--asae-gn-label);
	cursor: default;
}

/* Never look interactive. The desktop chip has its own matching guard in §4 —
 * it can't be written here, because both the colour it must hold and the
 * background it must not lose only exist above 960px. */
.neve-mega-menu .neve-mm-heading span:hover,
.neve-mega-menu .neve-mm-heading span:focus {
	color: var(--asae-gn-label);
	text-decoration: none;
}

/* A heading has no children so Neve adds no caret — belt and braces in case a
 * future edit gives one a child by accident. */
.neve-mega-menu .neve-mm-heading > .wrap > .caret-wrap,
.neve-mega-menu .neve-mm-col > .wrap > .caret-wrap {
	display: none;
}

/* ── §4 Grouped columns — desktop, .neve-mega-menu ONLY ─────────────────── */
@media (min-width: 960px) {
	/* ── Where the panel sits ───────────────────────────────────────────────
	 * Neve positions a mega-menu panel as a CONTAINER-WIDE strip: it drops
	 * `position: unset` on the parent item and then pins the panel with
	 * `left: 50% !important` + `transform: translateX(-50%) !important`. With no
	 * positioned ancestor left, that 50% resolves against the full-bleed header
	 * row — i.e. the panel is centred on the PAGE, which is exactly right when
	 * it spans the container.
	 *
	 * This panel does not span the container: it shrink-wraps (below). Centred
	 * on the page, a ~700px panel hung under a Topic item sitting far right in
	 * the nav lands almost entirely to its LEFT — only a few pixels of the two
	 * overlap, so a pointer moving straight down off "Topic" leaves the item
	 * without entering the panel and the dropdown closes before it can be used.
	 *
	 * So give the item back its positioning context and right-align the panel
	 * to it, the same edge every plain dropdown on the site already uses. The
	 * panel then hangs directly under its own item, flush to the item's bottom
	 * (no gap to cross), and extends leftwards into the header's empty space.
	 * !important is required only because Neve's own rule carries it.
	 */
	.header--row .nv-nav-wrap .primary-menu-ul li.neve-mega-menu {
		position: relative;
	}

	.header--row .nv-nav-wrap .primary-menu-ul .neve-mega-menu > .sub-menu {
		left: auto !important;
		right: 0 !important;
		transform: none !important;
	}

	/* Neve defaults the panel to the full container width, which is what makes
	 * a mega menu read as a mega menu. Shrink-wrap to content instead. */
	.header--row .nv-nav-wrap .primary-menu-ul .neve-mega-menu > .sub-menu {
		width: auto;
		max-width: min(var(--asae-gn-panel-max), calc(100vw - 40px));
		background: var(--nv-site-bg, #fff);
		/* Reduced by the chip's own top padding so the LABEL TEXT — not the
		 * chip's edge — still lands on --asae-gn-panel-inset, holding the
		 * first-text alignment this panel shares with the plain dropdowns. */
		padding: calc(var(--asae-gn-panel-inset) - var(--asae-gn-chip-pad-y)) 8px;
		border-radius: 0;
	}

	/* Plain dropdowns (Role, Format, and every dropdown on any other site):
	 * no columns, no headings — just aligned to the same first-text inset. */
	.header--row .nv-nav-wrap .primary-menu-ul > li:not(.neve-mega-menu) > .sub-menu {
		padding-top: calc(var(--asae-gn-panel-inset) - var(--asae-gn-row-gap-desktop));
		padding-bottom: calc(var(--asae-gn-panel-inset) - var(--asae-gn-row-gap-desktop));
	}

	.header--row .nv-nav-wrap .primary-menu-ul .neve-mega-menu .neve-mm-col {
		padding: 0 var(--asae-gn-col-pad);
		flex: 1 1 0;
		min-width: 0;
	}

	/* Neve rules a border between columns; the spec doesn't ask for one and it
	 * adds noise to what should read as four quiet clusters. */
	.header--row .nv-nav-wrap .primary-menu-ul .neve-mega-menu .neve-mm-col:not(:last-child) {
		border-right: 0;
	}

	/* Long labels WRAP rather than forcing the panel wider — with the tight
	 * leading from §2, a two-line label still reads as a single item. */
	.header--row .nv-nav-wrap .primary-menu-ul .neve-mega-menu .neve-mm-col > .sub-menu a {
		white-space: normal;
	}

	/* The chip supplies all the label's spacing now, so the span carries none. */
	.header--row .nv-nav-wrap .primary-menu-ul .neve-mm-heading > .wrap > span {
		padding: 0;
		color: var(--asae-gn-chip-label);
	}

	/* Neve's .wrap adds its own 10px top/bottom on every dropdown row, which
	 * stacks with the link padding and pushed desktop rows to 57px. Zero it
	 * here so link padding is the single lever, then set that tight. Mobile is
	 * left alone — the roomier rows there are wanted for touch. */
	.header--row .nv-nav-wrap .primary-menu-ul .sub-menu li > .wrap {
		padding-top: 0;
		padding-bottom: 0;
	}

	.header--row .nv-nav-wrap .primary-menu-ul .sub-menu li > .wrap > a {
		padding-top: var(--asae-gn-row-gap-desktop);
		padding-bottom: var(--asae-gn-row-gap-desktop);
	}

	/* ── The chip ──────────────────────────────────────────────────────────
	 * Must be declared AFTER the wrap-zeroing rule above and out-specify it:
	 * that rule is (0,5,1) and matches this same .wrap, so an obvious
	 * `.neve-mm-heading > .wrap` at (0,5,0) would silently lose its vertical
	 * padding and the chip would collapse to a hairline. The `.sub-menu
	 * li.neve-mm-heading` qualifier is what buys the extra class. */
	.header--row .nv-nav-wrap .primary-menu-ul .sub-menu li.neve-mm-heading > .wrap {
		background-color: var(--asae-gn-chip-bg);
		padding: var(--asae-gn-chip-pad-y) var(--asae-gn-chip-pad-x);
		/* Bottom only. A full box would draw a rectangle around the label and
		 * make it a control; closing just the bottom edge points the label at
		 * the list under it. Costs 1px of chip height and pushes the links down
		 * by that much — the label's own text position is unaffected, so the
		 * panel inset derivation above still holds. */
		border-bottom: 1px solid var(--asae-gn-chip-rule);
		margin-bottom: var(--asae-gn-chip-gap);
		/* Square, deliberately. Rounding is what would make a tinted band read
		 * as a button; a label is not a control. */
		border-radius: 0;
	}

	/* Nothing about the chip may respond to the pointer — see §3. */
	.header--row .nv-nav-wrap .primary-menu-ul .sub-menu li.neve-mm-heading > .wrap:hover {
		background-color: var(--asae-gn-chip-bg);
	}

	.header--row .nv-nav-wrap .primary-menu-ul .neve-mm-heading > .wrap > span:hover,
	.header--row .nv-nav-wrap .primary-menu-ul .neve-mm-heading > .wrap > span:focus {
		color: var(--asae-gn-chip-label);
	}

	/* Grouped links take NO padding of their own — Neve's 20px on .wrap is the
	 * whole indent, and the hang comes from the chip being padded less than
	 * that (see §1). Declared rather than left to the default so a future Neve
	 * or theme rule can't quietly widen it: this is the value the hang is
	 * derived from. */
	.header--row .nv-nav-wrap .primary-menu-ul .neve-mega-menu .neve-mm-col > .sub-menu > li:not(.neve-mm-heading) > .wrap > a {
		padding-left: 0;
	}
}

/* ── §4b Current page ───────────────────────────────────────────────────── */
/*
 * Desktop and mobile alike: show where you are. WordPress already marks the
 * item (current-menu-item) and its top-level parent (current-menu-ancestor),
 * and those survive the regrouping because core applies them before the items
 * are rearranged — so this is pure styling, no PHP.
 *
 * Matches the top-level nav's own convention: underline + accent colour, with
 * the weight left exactly as the inactive state. Weight is deliberately NOT
 * changed — a bolder current item shifts the text metrics and makes the row
 * appear to jump between pages.
 *
 * The underline is also what satisfies WCAG 1.4.1: colour alone would not be
 * enough to convey "you are here".
 */
.header--row .nv-nav-wrap .primary-menu-ul .sub-menu li.current-menu-item > .wrap > a,
.header-menu-sidebar-inner .primary-menu-ul .sub-menu li.current-menu-item > .wrap > a {
	color: var(--asae-gn-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── §5 Mobile ─────────────────────────────────────────────────────────── */
/*
 * The lever here is row spacing, not the headings. Tightening rows recovers
 * more height than the four headings cost, so the grouped list is shorter than
 * the flat one it replaces — and scannable rather than one undifferentiated
 * column.
 *
 * CRITICAL: do NOT set `display` on `.neve-mega-menu > .sub-menu`. That is the
 * element Neve's accordion opens and closes; forcing it visible makes Topic
 * render permanently expanded and fight the toggle on first tap. Only the
 * COLUMN's inner list is forced open (Neve already does this), which is what
 * keeps the grouping from becoming a second accordion level.
 */
@media (max-width: 959px) {
	.header-menu-sidebar-inner .neve-mega-menu .neve-mm-col {
		display: block;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		border-right: 0;
	}

	.header-menu-sidebar-inner .primary-menu-ul .sub-menu li > .wrap > a {
		min-height: 44px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/* Children sit visibly subordinate to their section. */
	.header-menu-sidebar-inner .neve-mega-menu .neve-mm-col > .sub-menu > li:not(.neve-mm-heading) > .wrap > a {
		padding-left: 16px;
	}

	/* Breathing room around each group label — more above than below, so the
	 * label binds to the links it introduces rather than floating between two
	 * groups. Without this it sits as close to the previous group's last link
	 * as to its own first one. */
	.header-menu-sidebar-inner .neve-mega-menu .neve-mm-heading {
		margin-top: 22px;
		margin-bottom: 2px;
	}

	.header-menu-sidebar-inner .neve-mega-menu .neve-mm-col:first-child .neve-mm-heading {
		margin-top: 6px;
	}

	/* NO top-level weight rule here, deliberately.
	 *
	 * There used to be a `font-weight: 700` on the drawer's top-level links, to
	 * make parents read heavier than their children. It was a no-op on Primary
	 * (whose Neve typography is already 700) and actively wrong on AN, where the
	 * nav is Stag Sans at 500 — a display face whose 700 cut is a genuine Bold,
	 * so the drawer rendered far heavier than the same site's desktop bar and
	 * than the live asaecenter.org nav it's meant to match.
	 *
	 * Each site's own nav weight is the right answer, and each site already
	 * declares it. Parent/child separation survives without this: children are
	 * 15px/400 and indented, parents 16px at the site's own weight. */
}

/* ── §6 Motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.neve-mega-menu > .sub-menu {
		transition: none !important;
	}
}