/* ============================================================
   THE JEWELLERY WORKSHOP — Mega navigation
   Layout layer for the core/navigation block, restyled into the
   nav-prototype.html mega menu. See PLUGIN_PLAN.md.

   Tokens, fonts and base utilities (.meta/.num/.wrap/.cta/em.acc)
   come from the .tjw scope in section-patterns.css — the render
   filter adds `tjw` to this nav, so everything here may use
   var(--bg), var(--dark), var(--bronze), var(--serif) … directly.

   Everything is scoped under .tjw-mega-nav (added by the render
   filter only to a nav that has mega panels) so it never touches
   the footer nav, the editor, or any other navigation block.

   Build order:
     Phase 1 ✓ this scaffold + nav inherits .tjw tokens
     Phase 2   mega grid / dropdown / mobile drawer (desktop panels)
     Phase 3   handled in mega-nav.js (hover, a11y, drawer)
     Phase 4   feature tiles
   ============================================================ */

/* Alpine hasn't run yet on first paint (its script is deferred, same as
   mega-nav.js); anything with x-show that would otherwise be visible by
   default — the scrim overlay is the one real case here — needs hiding until
   Alpine's init walk removes this attribute. */
[x-cloak] { display: none !important; }

/* Placeholder nav items (functions.php's greyd_child_mega_nav_neutralize_
   placeholder_links(), tagged `no-link` by the content editor) are demoted
   to a <span> server-side; this just strips the hover feedback a real link
   would get, since it isn't one. */
.tjw-mega-nav .wp-block-navigation-item__content.is-no-link {
	cursor: default;
	pointer-events: none;
}

/* ---------- Phase 1: scope baseline ----------
   The nav now carries `.tjw`, which sets the light-grey brand ground and
   Instrument Sans on the element. Keep the bar transparent so it sits on
   the header's own ground rather than painting a second panel, and let the
   header's flex layout (header.css / .jw-header) own positioning. */
.tjw-mega-nav {
	background: transparent;
}

/* ============================================================
   PHASE 2 — desktop mega panels, simple dropdown, mobile shell.

   Maps the nav-prototype.html mega layer onto core's Navigation
   markup. Selectors out-specify core's .wp-block-navigation rules,
   so order vs core's style.css doesn't matter. Colour/type/spacing
   all reference the inherited .tjw tokens.

   Panel anchoring: a top-level .is-mega item is made position:static
   so its panel escapes to the full-width header group (.jw-header,
   made the positioning context only when it contains this nav).
   ============================================================ */

/* establish the full-width positioning context for mega panels */
.jw-header:has(.tjw-mega-nav) { position: relative; }
/* core sets .wp-block-navigation{position:relative}; neutralise it so the panel
   anchors to .jw-header (full width), not the narrow nav. NOTE: core puts the
   `wp-block-navigation` class on BOTH the outer <nav> AND the inner
   `.wp-block-navigation__container`, so the container must be neutralised too —
   otherwise it stays position:relative and becomes the panel's offset parent
   (the panel then pins to the narrow nav, ~546px, not the full header). */
.tjw.tjw-mega-nav { position: static; }

/* keep the top-level items on one line (core defaults to flex-wrap:wrap, which
   was letting "About" wrap above the row) */
.tjw-mega-nav .wp-block-navigation__container {
	position: static;
	flex-wrap: nowrap;
	align-items: center;
}

/* ---------- top-level trigger row ---------- */
.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 60px;
	padding: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-60);
	transition: color 200ms var(--ease);
}
.tjw-mega-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.tjw-mega-nav .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.tjw-mega-nav .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current] {
	color: var(--ink);
}

/* core's submenu caret button -> prototype caret; rotates when open */
.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
	margin: 0 0 0 2px;
	padding: 0;
	background: transparent;
	color: var(--ink-60);
	transition: transform 300ms var(--ease-big);
}
.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon svg {
	width: 9px;
	height: 9px;
}
/* the caret flips when the panel is open: mega-nav.js sets aria-expanded on the
   toggle button (click + keyboard, all viewports). Desktop hover is added in the
   min-width:1181px block below so the caret also flips while the item is hovered. */
.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon[aria-expanded="true"] {
	transform: rotate(180deg);
}

/* ---------- the mega panel (top-level .is-mega) ---------- */
.tjw-mega-nav .wp-block-navigation-submenu.is-mega { position: static; }

/* kill core's decorative submenu pointer arrow (a CSS-border triangle on the
   container's ::before/::after) — it shows as a stray triangle top-left of each
   drawer item on mobile. */
.tjw-mega-nav .wp-block-navigation__submenu-container::before,
.tjw-mega-nav .wp-block-navigation__submenu-container::after {
	content: none;
	display: none;
}

.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container {
	position: absolute;
	/* full-bleed: the panel's containing block (.jw-header) starts at the viewport
	   left edge, so left:0 + width:100vw spans the whole screen edge-to-edge. */
	left: 0;
	right: auto;
	top: 100%;
	width: 100vw !important; /* beat a theme/core submenu-width rule (shrink-fit) */
	min-width: 0;
	/* core collapses submenu containers to height:0;overflow:hidden (animated
	   open by the nav view script we dequeue). The panel must take its natural
	   height or the grid row overflows the 0-height box and the background only
	   covers the padding — the page then shows through below the headings. */
	height: auto;
	overflow: visible;
	margin: 0 !important; /* a theme rule adds margin-top:6px -> gap below the bar */
	padding: 0;
	display: grid;
	gap: clamp(24px, 3vw, 56px);
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* default; per-panel slugs below */
	background: var(--bg);
	border: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	box-shadow: 0 30px 50px -40px rgba(22, 22, 22, .32);
	/* internal padding mirrors .wrap (44px) + the prototype's vertical rhythm */
	padding: var(--sp-12) var(--gutter) 56px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 280ms var(--ease-big), transform 280ms var(--ease-big), visibility 0s linear 280ms;
	z-index: 90;
}
/* click-only: panels open solely via [data-open] (set by mega-nav.js on click).
   No :hover / :focus-within trigger, so mousing over the bar does nothing. */
.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 280ms var(--ease-big), transform 280ms var(--ease-big), visibility 0s;
}
/* Desktop: hide closed panels with display:none, not just opacity/visibility.
   Stacked absolute panels with opacity:0 + transform still paint a faint ghost
   of the other panels' links over the open one (a compositing quirk); display
   reliably removes them. Scoped to desktop so the mobile max-height accordion
   (in the <=1180px block, which keeps display:block) is untouched. */
@media (min-width: 1181px) {
	/* Desktop: hovering (or keyboard-focusing) anywhere on a top-level item opens
	   its panel — the whole link is the trigger, not just the caret. The JS
	   click/keyboard toggle (data-open) still works alongside this. The panel is a
	   DOM descendant of its <li>, so moving the pointer down onto the panel keeps
	   the <li> :hover active and the panel stays open. */
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container { display: none; }
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container[data-open="true"],
	.tjw-mega-nav .is-mega:hover > .wp-block-navigation__submenu-container,
	.tjw-mega-nav .is-mega:focus-within > .wp-block-navigation__submenu-container { display: grid; }

	/* hover/focus reveal: mirror the [data-open] visible state so the panel that
	   display:grid just laid out also fades/slides in. */
	.tjw-mega-nav .is-mega:hover > .wp-block-navigation__submenu-container,
	.tjw-mega-nav .is-mega:focus-within > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 280ms var(--ease-big), transform 280ms var(--ease-big), visibility 0s;
	}

	/* simple dropdown (About): same whole-item hover/focus trigger. */
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:not(.is-mega) > .wp-block-navigation__submenu-container { display: none; }
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:not(.is-mega) > .wp-block-navigation__submenu-container[data-open="true"],
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:not(.is-mega):hover > .wp-block-navigation__submenu-container,
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:not(.is-mega):focus-within > .wp-block-navigation__submenu-container { display: block; }
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:not(.is-mega):hover > .wp-block-navigation__submenu-container,
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:not(.is-mega):focus-within > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 280ms var(--ease-big), transform 280ms var(--ease-big), visibility 0s;
	}

	/* caret flips while hovering the whole item, too (not only when data-open is set) */
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-icon,
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-icon {
		transform: rotate(180deg);
	}
}

/* per-panel column counts (client adds is-mega-shop / -bridal / -repairs) */
/* Shop has no feature tile (removed 2026-06-15), so it lays out as four even
   category columns — no reserved feature slot, or the 5th column sits empty. */
.tjw-mega-nav .is-mega-shop    > .wp-block-navigation__submenu-container { grid-template-columns: repeat(4, 1fr); }
.tjw-mega-nav .is-mega-bridal  > .wp-block-navigation__submenu-container { grid-template-columns: repeat(3, 1fr) 1.5fr; }
.tjw-mega-nav .is-mega-repairs > .wp-block-navigation__submenu-container { grid-template-columns: repeat(2, 1fr) 1.7fr; }
.tjw-mega-nav .is-mega-bespoke > .wp-block-navigation__submenu-container { grid-template-columns: repeat(2, 1fr) 1.7fr; }

/* ---------- a column = a 2nd-level submenu item ---------- */
/* core makes items display:flex (a row); force block so the heading stacks
   ABOVE its link list instead of sitting beside it (the links were squeezed
   to zero width). */
.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	display: block;
	position: static;
	background: transparent;
}
/* column heading: the 2nd-level link styled as the numbered .meta label */
.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	margin-bottom: 18px;
	padding: 0;
	font-family: var(--mono);
	font-size: var(--fs-3xs);
	font-weight: 400;
	letter-spacing: var(--tr-wider);
	text-transform: uppercase;
	color: var(--ink-40);
}
/* hide the caret on column headings (only top-level triggers keep it) */
.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { display: none; }

/* ---------- the link list = 3rd-level submenu, shown inline ---------- */
.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	position: static;
	opacity: 1;
	/* inherit (not `visible`) so the links follow the parent panel's open/closed
	   visibility — `visible` here would override a closed panel's hidden state
	   and the links of closed panels would ghost through the open one. */
	visibility: inherit;
	transform: none;
	display: block;
	/* core collapses submenu containers to height:0;overflow:hidden and animates
	   them open via the nav view script — which we dequeue. As always-open mega
	   columns, force them back to natural height. */
	height: auto;
	overflow: visible;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	transition: none;
}
/* the 3rd-level link <li>s: core renders them as display:flex submenu items,
   which take no block height, so the list collapsed onto the heading line.
   Force plain block list items (the prototype's `.mega__list li`) so they
   stack and build the column's height. */
.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	display: block;
	position: static;
	width: 100%;
	margin: 0;
}
.tjw-mega-nav .is-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: inline-block;
	padding: 7px 0;
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--ink-60);
	transition: color 200ms var(--ease), transform 250ms var(--ease-big);
}
.tjw-mega-nav .is-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--ink);
	transform: translateX(4px);
}

/* ---------- simple dropdown: a top-level submenu WITHOUT .is-mega (About) ---------- */
.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:not(.is-mega) > .wp-block-navigation__submenu-container {
	min-width: 210px;
	padding: var(--sp-3) 0;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	box-shadow: 0 30px 50px -38px rgba(22, 22, 22, .4);
}
/* only the dropdown's own links — NOT About's top-level label (the `>` keeps
   the label flex-centred like the other top items instead of block/top-aligned). */
.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:not(.is-mega) > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 9px var(--sp-6);
	font-size: var(--fs-base);
	color: var(--ink-60);
	white-space: nowrap;
	transition: color 200ms var(--ease), background 200ms var(--ease);
}
.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu:not(.is-mega) > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--ink);
	background: var(--bg-2);
}

/* ---------- burger + scrim (injected by mega-nav.js) ---------- */
.tjw-burger { display: none; }
.tjw-scrim { display: none; }
/* shared back-arrow/heading row (server-rendered once by
   greyd_child_mega_nav_wire_nav_chrome()) — only shown inside the mobile
   drawer, and even there only while a child panel is drilled into (x-show). */
.tjw-child-head { display: none; }
/* drawer footer (injected by mega-nav.js) — only shown inside the mobile drawer */
.tjw-nav-footer { display: none; }

@media (max-width: 1180px) {
	/* burger sits in the header bar, sized to match the utility icons
	   (search/account/wishlist/bag — see header.css's own mobile block).
	   2026-07-06: button box stays 24x24 (the Lighthouse target-size minimum),
	   but the bars are inset 3px on each side so the VISUAL glyph reads at 18px
	   — matching the other utility icons and the wordmark's own visual weight
	   — instead of a 24px glyph dominating the header. Bars re-spaced
	   proportionally for an 18px box (scale factor 18/15=1.2 from the original
	   15px baseline): 0/6.5/13 -> 0/7.8/15.6, ±6.5px morph -> ±7.8px. */
	.tjw-burger {
		display: block;
		position: relative;
		width: 24px;
		height: 24px;
		flex: none;
		background: transparent;
		border: 0;
		padding: 0;
		z-index: 96;
	}
	.tjw-burger span {
		position: absolute;
		left: 3px;
		right: 3px;
		/* 1.8px -> 1.4px (2026-07-06): matches the utility icons' own stroke-width
		   (search/account/wishlist SVGs use stroke-width="1.4"). Three solid bars
		   read visually heavier than a single outline stroke at the same
		   thickness, so equalising the stroke value (not just the box) is what
		   actually makes the burger stop reading larger than its neighbours. */
		height: 1.4px;
		background: var(--ink);
		transition: transform 300ms var(--ease-big), opacity 200ms var(--ease);
	}
	.tjw-burger span:nth-child(1) { top: 3px; }
	.tjw-burger span:nth-child(2) { top: 10.8px; }
	.tjw-burger span:nth-child(3) { top: 18.6px; }
	.tjw-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.8px) rotate(45deg); }
	.tjw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.tjw-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.8px) rotate(-45deg); }

	/* `display:block` overrides the desktop default (display:none, above); the
	   fade itself is entirely Alpine's (x-show + x-transition:enter/
	   leave.opacity in mega-nav.js) — this just sets the box, not its motion. */
	.tjw-scrim {
		display: block;
		position: fixed;
		inset: var(--tjw-header-h, 60px) 0 0;
		background: rgba(22, 22, 22, .28);
		z-index: 80;
	}

	/* ---------- Concept-1 visual language (tested static mockup, user-approved
	   2026-07-04; background reverted 2026-07-05 to match the rest of the site
	   instead of white) — full-contrast ink text, no serif. Mobile-drawer
	   only: redeclaring these custom properties on `.tjw.tjw-mega-nav` remaps
	   every existing var(--ink-60)/var(--ink-40) reference inside the drawer
	   automatically, while the desktop mega panel (which reads the same var
	   names but is never inside this media query's scope) is untouched —
	   mist-grey ground, muted ink tones, serif tile titles all stay exactly as
	   they are above 1180px. `--bg` itself is left alone here on purpose — the
	   drawer now uses the site's own Mist Grey ground, not a bespoke white. */
	.tjw.tjw-mega-nav {
		--ink-60: var(--ink);
		--ink-40: var(--ink);
	}

	/* ---------- nav becomes a slide-in drawer ---------- */
	/* `.tjw.tjw-mega-nav` matches the desktop position:static rule's specificity,
	   and being later + in this media query it wins when the query applies. */
	.tjw.tjw-mega-nav {
		position: fixed;
		top: var(--tjw-header-h, 60px);
		right: 0;
		width: min(440px, 100%);
		height: calc(100svh - var(--tjw-header-h, 60px));
		background: var(--bg);
		border-left: 1px solid var(--line);
		/* padding-top lives on the top-level list below, not here: this element
		   is the scrolling container `.tjw-child-head` sticks (top:0) within, so
		   any top padding on IT stays permanently visible above the stuck
		   header — an un-scrollable 8px gap the sibling list's own links keep
		   peeking through as the drawer scrolls. Bottom padding is fine here
		   since nothing sticks to the bottom edge. */
		padding: 0 0 40px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* keep the drawer's own scroll from chaining into the page behind it */
		overscroll-behavior: contain;
		transform: translateX(100%);
		/* 380ms -> 600ms (2026-07-06): measured against a competitor's mobile
		   drawer (600ms, cubic-bezier(0.4,0,0.2,1)) — ours felt rushed by
		   comparison; matched their pace. */
		transition: transform 600ms var(--ease-big);
		z-index: 95;
		/* top-anchor the drawer contents: the desktop horizontal rule leaves the nav
		   `flex-direction:row; align-items:center`, which vertically centres the single
		   child (the link list) and leaves large dead bands top + bottom. Lay the drawer
		   out as a top-aligned column so the links start under the header and flow down;
		   the footer block (margin-top:auto) then fills the space below purposefully. */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		/* core's own nav layout sets flex-wrap:wrap (for the desktop horizontal
		   row, so many top-level items can wrap onto a second row). Left as-is
		   here, once total content height (link list + an open accordion panel)
		   exceeds the drawer's fixed height, flexbox started a SECOND COLUMN
		   instead of just letting the drawer scroll vertically — which is what
		   caused the drawer to also scroll sideways, and dragged the sticky
		   close button and footer CTA out of place along with it. */
		flex-wrap: nowrap;
	}
	.tjw-mega-nav.is-open { transform: translateX(0); }

	/* ---------- shared back-arrow/heading row ---------- */
	/* Server-rendered once (greyd_child_mega_nav_wire_nav_chrome()); x-show only
	   toggles it while a child is drilled into. Sticky so it stays reachable
	   at the top of the drawer's own scroll area regardless of list length —
	   minimal layout for the skeleton; Concept-1 pass restyles type/spacing. */
	.tjw-child-head {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		position: sticky;
		top: 0;
		z-index: 5;
		background: var(--bg);
		padding: 14px 30px;
		border-bottom: 1px solid var(--line);
	}
	.tjw-child-back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		margin-left: -8px;
		background: transparent;
		border: 0;
		padding: 0;
		font-size: 20px;
		color: var(--ink);
	}
	.tjw-child-head__title {
		/* serif, matching the site's other serif headings (.mat h3/.team__name
		   in section-patterns.css) rather than the sans-serif body/UI type. */
		font-family: var(--serif);
		font-size: var(--fs-xl);
		font-weight: 500;
		letter-spacing: var(--tr-snug);
		color: var(--ink);
	}

	/* ---------- drawer footer: account link + contact ---------- */
	/* fills the space below the top-anchored link list; margin-top:auto pins it to
	   the bottom of the flex-column drawer. `.tjw.tjw-mega-nav` prefix (0,3,0) beats
	   a theme/core nav-child margin reset that was zeroing margin-top at 0,1,0. */
	.tjw.tjw-mega-nav .tjw-nav-footer {
		display: flex;
		flex-direction: column;
		gap: var(--sp-5);
		margin-top: auto;
		padding: 28px 30px 4px;
		border-top: 1px solid var(--line);
	}
	/* plain text link (2026-07-06, replaces the old "Begin a commission" .cta
	   button now that the footer's job is just to surface account access). */
	.tjw-nav-footer .tjw-nav-account {
		font-size: var(--fs-base);
		font-weight: 600;
		color: var(--ink);
		text-decoration: none;
	}
	.tjw-nav-footer .tjw-nav-account:hover { text-decoration: underline; }
	.tjw-nav-contact {
		display: flex;
		flex-direction: column;
		gap: 5px;
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--ink-60);
	}
	.tjw-nav-contact a { color: var(--ink); text-decoration: none; }
	.tjw-nav-contact a:hover { text-decoration: underline; }

	.tjw-mega-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		/* the drawer's own top padding moved here (see `.tjw.tjw-mega-nav`
		   above) — this list is hidden whenever a child panel is active, so
		   the gap only ever shows above the top-level rows, never behind the
		   sticky child-head. */
		padding-top: 8px;
		/* flush, divided list — the base 12.5px row gap left the hairlines floating
		   with space above/below; 0 lets each row's border-bottom read as a true
		   list divider */
		gap: 0;
	}
	/* top-level rows: full-width, tappable, hairline-separated */
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item {
		display: block;
		height: auto;
	}
	/* hairline lives on the trigger link, not the <li> itself — the link is
	   what x-show hides while this item's own panel is drilled into (see
	   isTriggerVisible() below), so the divider disappears along with it
	   instead of stranding a stray line above the now-absolute panel. */
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		height: auto;
		padding: 19px 30px;
		font-size: var(--fs-base);
		border-bottom: 1px solid var(--line);
		/* Concept-1: bolder top-level rows (600, not 700 — see tjw-child-head__title). */
		font-weight: 600;
		color: var(--ink);
	}
	/* Decorative only — the whole row (this <a>, spanning full width above) is
	   the actual tap target, including the area under the caret. The caret is
	   a separate sibling element sitting on top of it (position:absolute), so
	   without pointer-events:none it would silently swallow taps in its own
	   corner, leaving only the text portion of the row responsive. */
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 54px;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}
	/* rotated to point right, not down — this is a drill-into-a-screen
	   affordance now (like the back row's own `‹`), not an in-place accordion
	   expand/collapse, so a downward chevron reads wrong here. */
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon svg {
		width: 12px;
		height: 12px;
		transform: rotate(-90deg);
	}
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-submenu { position: relative; }

	/* Top-level panels (mega + About) are no longer an in-place accordion —
	   greyd_child_mega_nav_wire_submenu_item()/wire_link_item() bake x-show onto each one, so Alpine
	   alone gates display:none <-> block via activeChild; no max-height clip or
	   [data-open] state is needed here any more (data-open now only exists on
	   desktop, driven by openDesktopPanel()/closeDesktopPanel() in mega-nav.js).
	   position:absolute (against the owning <li>'s position:relative, set
	   above) rather than in-flow: closing a child reveals every sibling <li>
	   instantly (their x-show has no transition), and with the panel itself
	   still in normal flow for the ~250ms of its own leave transition, that
	   sibling reflow and the panel's leave were measured (Performance panel
	   trace, back-navigation) fighting over layout on the same frames — a
	   CLS of 0.65 and a forced reflow inside Alpine's transition code, which
	   is what read as clunky/un-smooth paint. Taking the panel out of flow
	   means the sibling reveal can't shove it around; its enter/leave motion
	   becomes a pure opacity+transform composite over whatever is beneath. */
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container,
	.tjw-mega-nav .wp-block-navigation-submenu:not(.is-mega) > .wp-block-navigation__submenu-container {
		position: absolute;
		top: 0;
		left: 0;
		/* beat the desktop full-bleed rule's `width: 100vw !important` (this panel
		   is positioned against its own <li> here, not escaped to the full-width
		   header) — left unset it was forcing the accordion wider than the
		   drawer, which triggered a horizontal scrollbar on the whole panel and
		   dragged everything (including the sticky close button) sideways with it. */
		width: 100% !important;
		/* core collapses submenu containers to height:0 (expects its own
		   dequeued view-script to animate it open) — the is-mega panel has
		   always carried its own `height:auto` override further up for this
		   exact reason (see that rule's comment), but the plain-dropdown
		   (About) branch never did, because while `position:static` its
		   height simply came along for free from being in normal flow. Now
		   that the panel is absolute (see above), core's height:0 wins
		   outright for About and clips its links to nothing — hence the
		   `height:auto` here too. */
		height: auto;
		transform: none;
		box-shadow: none;
		border: 0;
		background: transparent;
		min-width: 0;
		max-height: none;
		padding: var(--sp-4) 30px var(--sp-6);
		overflow: visible;
		visibility: visible;
		opacity: 1;
	}
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container { grid-template-columns: 1fr; }

	/* roomier vertical rhythm in the drawer: more air between the grey section
	   labels (BY CATEGORY / ENGAGEMENT / WEDDING …) and their link lists, and more
	   separation between one section's links and the next label. The panel is
	   display:block here (not grid), so section spacing is margin, not gap. */
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { margin-bottom: 8px; }
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-submenu { margin-bottom: var(--sp-8); }
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-submenu:last-of-type { margin-bottom: 0; }
	/* the 3rd-level link lists are NOT a second accordion level — when a panel is
	   open its columns + links show together (prototype parity). The :not(.is-mega)
	   accordion rule above also matches these nested lists and collapses them to
	   max-height:0; reset them so the links render.
	   position:static: core has these nested lists `position:absolute;top:0`
	   against their own (position:static) group <li> by default, so the
	   containing-block search walks up to the nearest positioned ancestor —
	   which used to be harmless further up the tree, but is now the panel
	   itself (position:absolute, see above), pinning every group's link list
	   to the panel's own top edge instead of flowing under its own header. */
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
	}

	/* Greyd's theme.css gives EVERY submenu-container an elevated box-shadow, a
	   4px border-radius and margin-top:6px via a 0,5,0 selector
	   (.wp-block-navigation .wp-block-navigation__container
	    .wp-block-navigation-submenu.has-child .wp-block-navigation__submenu-container),
	   and on mobile it also re-asserts the shadow inside a max-width query. Our
	   flatten rules above are only 0,3,0/0,4,0, so that chrome leaked through as a
	   floating "card" (shadow + rounded outline + 6px gap) around each panel
	   and each column's link list. Strip it flat with a 0,6,0 selector (extra
	   `.tjw`) that also loads after theme.css, so it wins outright.

	   `overflow: hidden` here is harmless, not load-bearing: now that visibility
	   is x-show/display-driven rather than a max-height clip, an unconstrained
	   (max-height:none) box never has anything to overflow regardless of this
	   property — kept only because it's part of the same flatten pass that
	   zeroes Greyd's shadow/border/radius. */
	.tjw-mega-nav.tjw .wp-block-navigation__container .wp-block-navigation-submenu.has-child .wp-block-navigation__submenu-container {
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		overflow: hidden;
	}
}

/* ============================================================
   Phase 4 — feature tiles (one <li.tjw-mega-feature> injected by the render
   filter into each panel's last grid slot: repeat(N,1fr) 1.3/1.5/1.7fr).
   Colour/type come from the .tjw system; this is the prototype's .feature layer.
   ============================================================ */
/* the injected <li> is the grid item; flex so its <a> fills the cell height */
.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .tjw-mega-feature {
	display: flex;
	margin: 0;
	padding: 0;
}
.tjw-mega-nav .feature {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--sp-4);
	min-height: 280px;
	padding: 26px;
	border-radius: var(--r-sm);
	background: var(--bg-2);
	text-decoration: none;
}
/* `.feature` is an <a>, so section-patterns' `.tjw a:not(.wp-block-button__link)
   {color:inherit}` reset (0,2,1) out-specifies a plain `.feature--dark` (0,2,0)
   and the card title inherits ink (black) from the nav. Pin the colour on the
   anchor AND the title with an extra class (0,3,1) so the light text wins. */
.tjw-mega-nav a.feature.feature--dark { background: var(--dark); color: var(--bg); }
.tjw-mega-nav a.feature.feature--dark .feature__title { color: var(--bg); }
.tjw-mega-nav .feature .meta { margin: 0; color: var(--ink-40); }
.tjw-mega-nav a.feature.feature--dark .meta { color: var(--paper-40); }
.tjw-mega-nav .feature__title {
	font-family: var(--serif);
	font-weight: 500;
	letter-spacing: var(--tr-snug);
	line-height: 1.1;
	font-size: clamp(24px, 2.3vw, 32px);
}
.tjw-mega-nav .feature__cta { align-self: flex-start; }

/* mid-desktop: drop Shop to 4 columns and lay its tile across the full width */
@media (min-width: 1181px) and (max-width: 1320px) {
	.tjw-mega-nav .is-mega-shop > .wp-block-navigation__submenu-container { grid-template-columns: repeat(4, 1fr); }
	.tjw-mega-nav .is-mega-shop > .wp-block-navigation__submenu-container > .tjw-mega-feature { grid-column: 1 / -1; }
	.tjw-mega-nav .is-mega-shop .feature { flex-direction: row; align-items: center; min-height: 0; }
	.tjw-mega-nav .is-mega-shop .feature__title { font-size: var(--fs-xl); }
}

/* mobile drawer: drop the tile to keep the accordion lean (prototype parity).
   Must match the base tile rule's specificity (4 classes) to win in-query. */
@media (max-width: 1180px) {
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .tjw-mega-feature { display: none; }
}

/* ---------- View All {X} link (greyd_child_mega_nav_prepare_inner_blocks()) ----------
   Mobile-drawer-only: it's the drill-down's stand-in for the top-level item's
   own href, which the drawer intercepts with @click for openChild(). Hidden by
   default so it doesn't show up as a stray grid cell in the desktop mega panel,
   which never had this problem (its top-level link still just navigates).
   Needs (0,4,0) specificity to beat the column-item rule's own
   `display:block` (line ~211), which also matches — .tjw-view-all carries
   `wp-block-navigation-item` too so it qualifies as a "column" to that rule. */
.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .tjw-view-all,
.tjw-mega-nav .wp-block-navigation-submenu:not(.is-mega) > .wp-block-navigation__submenu-container > .tjw-view-all {
	display: none;
}
@media (max-width: 1180px) {
	.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container > .tjw-view-all,
	.tjw-mega-nav .wp-block-navigation-submenu:not(.is-mega) > .wp-block-navigation__submenu-container > .tjw-view-all {
		display: block;
		margin-bottom: var(--sp-6);
		padding-bottom: var(--sp-4);
		border-bottom: 1px solid var(--line);
	}
	.tjw-view-all > .wp-block-navigation-item__content {
		font-weight: 500;
		color: var(--ink);
	}
}

/* ============================================================
   MOTION — drill-in/out transition classes (Alpine x-transition, wired in
   greyd_child_mega_nav_wire_submenu_item()) + staggered top-level row reveal on
   drawer open (:class binding in greyd_child_mega_nav_wire_nav_chrome()).
   Both mobile-only; prefers-reduced-motion neutralises everything below in
   one place rather than duplicating a reduced-motion variant per rule.
   ============================================================ */
@media (max-width: 1180px) {
	/* panel enter/leave: content slides in from the right + fades, matching
	   the drill-down's implied "push forward" direction; leave is the mirror,
	   shorter (250ms vs 350ms) so back-navigation feels snappier than forward. */
	/* !important: these classes toggle on the same element as the
	   `.tjw-mega-nav .is-mega > .wp-block-navigation__submenu-container` panel
	   reset above, whose 3-4 class selectors otherwise out-specify these
	   1-2 class ones — silently pinning opacity:1/transform:none throughout
	   and making the whole enter/leave motion a no-op (confirmed via a
	   computed-style trace: opacity/transform never left their resting
	   values while these classes were applied). */
	.tjw-panel-enter { transition: opacity 350ms var(--ease-big), transform 350ms var(--ease-big); }
	.tjw-panel-enter-start { opacity: 0 !important; transform: translateX(24px) !important; }
	.tjw-panel-enter-end { opacity: 1 !important; transform: translateX(0) !important; }
	.tjw-panel-leave { transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
	.tjw-panel-leave-start { opacity: 1 !important; transform: translateX(0) !important; }
	.tjw-panel-leave-end { opacity: 0 !important; transform: translateX(-24px) !important; }

	/* staggered top-level row reveal: each row starts offset+transparent,
	   `.tjw-stagger-in` (toggled on drawerOpen) reveals them with a per-row
	   delay. Six top-level items exist today (Shop/Engagement & Wedding/
	   Bespoke/Repairs/Valuations/About); nth-child covers a few spares. */
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 320ms var(--ease), transform 320ms var(--ease);
	}
	.tjw-mega-nav .wp-block-navigation__container.tjw-stagger-in > .wp-block-navigation-item {
		opacity: 1;
		transform: translateY(0);
	}
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { transition-delay: 30ms; }
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { transition-delay: 65ms; }
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { transition-delay: 100ms; }
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { transition-delay: 135ms; }
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { transition-delay: 170ms; }
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { transition-delay: 205ms; }
	.tjw-mega-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+7) { transition-delay: 240ms; }
}

/* Zero the DURATION only — every element still reaches the exact same end
   state (open drawer, formed X, revealed row) instantly instead of animated.
   Deliberately does NOT touch `transform` itself: several of these transforms
   are functional end-states, not decoration — the burger's bars->X morph and
   the drawer's translateX(0) open position both depend on their transform
   actually applying, just without the animated journey there. */
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
	.tjw-mega-nav,
	.tjw-mega-nav *,
	.tjw-scrim,
	.tjw-burger,
	.tjw-burger * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}