/**
 * Nav V2 mega menu panels. Issue #53.
 *
 * Scope: the dropdown panels plus the nav row's layout.
 *
 * WHERE TO CHANGE WHAT — most nav and panel styling is NOT here. Max Mega Menu
 * compiles ~228 Menu Theme settings into app/uploads/maxmegamenu/style.css
 * (auto-generated, never edit). Item colours, paddings, borders, shadows, panel
 * padding and panel link padding are all settings, asserted from
 * scripts/nav/configure-location.php so they deploy. Only put a rule here when
 * MMM has no setting for it: our own widget markup (brand bar, feature card,
 * announcement), the panel's two-region grid, the group heading labels, and
 * overrides of the theme's own style.css.
 *
 * Sizes follow the V0.3 wireframe; colours and fonts stay on brand. In
 * particular --color-primary is the brand gold (#b17e20 since the 2026
 * redesign). Heads-up: this gold is 3.6:1 on white, so small gold-on-white or
 * white-on-gold text fails AA — the redesign pairs gold with dark #1e1e1e
 * text; check contrast wherever this variable colours text.
 *
 * Panel structure, provisioned by scripts/nav/build-panels.php:
 *   ul.mega-sub-menu                      the panel
 *     li.treg-nav-row--announcement       full width, first
 *     li.treg-nav-row--brand              full width
 *     li.treg-nav-row--columns            the link columns
 *     li.treg-nav-row--feature            the promo card
 *
 * DOM order is also the mobile and screen-reader order. On desktop the feature
 * row is lifted into a right-hand rail with grid placement.
 */

:root {
	--treg-nav-ink: #221f1c;
	--treg-nav-muted: #5c5854;
	--treg-nav-label: #6b6661;
	--treg-nav-rule: #e6e5e0;
	--treg-nav-surface: #f6f5f2;
	--treg-nav-radius: 10px;
	--treg-nav-gap: 36px;
	/* Breathing room above and below the nav row. With the row's height driven by
	   content (see the desktop block) this also puts the panel's top edge exactly
	   on the header's bottom edge, with no nudge needed. */
	--treg-nav-row-pad: 10px;
}

/* ---------------------------------------------------------------- panel shell */

/* Horizontal padding is MMM's, computed from panel_inner_width so the content
   lands on the same container box as the header; vertical is panel_padding_*. */

/* Rows carry no spacing of their own, so a row whose widget rendered nothing
   (an unconfigured announcement) collapses to zero height instead of leaving a
   gap. Spacing lives on the row's content. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-row {
	padding: 0;
	margin: 0;
}

/* Gutter between columns, not inside them. As padding-right on every column it
   also applied to the last one, so the right-hand content stopped short of the
   container edge while the left sat flush. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column {
	padding: 0;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-row--columns > ul.mega-sub-menu {
	gap: 0 var(--treg-nav-gap);
}

/* --- migrated from Mega Menu > Menu Themes > Custom Styling -----------------
   That field is now empty. It held a `padding: 20px !important` on the panel
   which beat the inline padding MMM computes for panel_inner_width, making it
   impossible to align panel content with the header. The rules below are the
   parts of it that still matter, kept here so they are version controlled and
   deploy with git rather than having to be retyped per environment. */

/* The theme ships its own menu toggle; MMM renders the one we use. */
.site-menu-toggle {
	display: none !important;
}

#mega-menu-wrap-menu-1 {
	clear: both;
}

/* Belt and braces: hide the announcement row outright when it has no content.
   The collapse above already handles it; this also removes it from the grid in
   browsers that support :has(). */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-row--announcement:not(:has(.treg-nav-announcement)) {
	display: none;
}

/* ------------------------------------------------------------ desktop layout */

/* MMM's own mobile CSS uses max-width: 1200px, so desktop must start at
   1201px. At exactly 1200px both would apply and this block's display:grid
   would override MMM's display:none, flashing every panel open. */
@media only screen and (min-width: 1201px) {

	/* Match the nav row to the topbar's content width.
	   The theme's style.css pins the menu to `min-width: 1300px` (under
	   min-width: 1024px), while .topbar-inner and .header-inner are
	   `max-width: 1300px`. Above ~1300px viewport they coincidentally agree, but
	   below it the containers shrink and the menu does not, so the nav items
	   overhang the header content on both sides. Following the container instead
	   keeps the nav inside the same box as the header at every width.

	   .header-inner is a centred flex row whose only visible child on desktop is
	   .site-navigation (.header-inner__left is display:none there). It defaults to
	   flex: 0 1 auto, so without the old min-width it shrink-wraps its items and
	   centres them instead of spanning the header's content box. Let it grow. */
	#masthead .site-navigation {
		flex: 1 1 auto;
		/* The theme sets padding-top: 15px and nothing at the bottom, so the nav
		   sat top-heavy in the row. Even padding instead. */
		padding: var(--treg-nav-row-pad) 0;
	}

	/* The theme fixes the header row at 70px while the nav needs only 52px, which
	   left 23px of dead space below the nav and above the header's bottom edge.
	   Content-driven height removes it, so the row is as tall as the nav is. */
	#masthead .header-inner {
		height: auto;
	}

	#mega-menu-wrap-menu-1 #mega-menu-menu-1 {
		min-width: 0;
		width: 100%;
		/* Spread across the container, so the first and last item sit flush with
		   the topbar's content edges. This needs menu_item_spacing at 0 — that
		   setting emits a right margin on every item, including the last, which
		   would hold the last item short of the right edge. */
		justify-content: space-between;
	}

	/* Two regions: main content left, feature card in a fixed right rail that
	   spans the panel's full height — matching the wireframe, where the card's
	   top edge aligns with the brand bar rather than sitting under it.
	   Only panels that actually have a feature card reserve the rail, otherwise
	   a card-less panel (Robotics) would squeeze its columns into two thirds of
	   the width for no reason. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		column-gap: var(--treg-nav-gap);
		align-items: start;
	}

	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu:has(> li.treg-nav-row--feature) {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-row {
		grid-column: 1;
	}

	/* Announcement spans both regions so it reads as a banner across the panel. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu > li.treg-nav-row--announcement {
		grid-column: 1 / -1;
	}

	/* The card's top aligns with the brand bar, as in the wireframe, and it runs
	   down past the columns. Row numbers have to be relative to the rows that
	   actually exist: an unconfigured announcement row is display:none, so it is
	   removed from the grid and everything below shifts up by one. Starting at a
	   hard-coded row 2 put the card level with the columns instead of the logo. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu > li.treg-nav-row--feature {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: stretch;
	}

	/* Only when an announcement is actually rendered does it take row 1. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu:has(.treg-nav-announcement) > li.treg-nav-row--feature {
		grid-row: 2 / span 2;
	}

	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-row--columns > ul.mega-sub-menu {
		display: flex;
		flex-wrap: nowrap;
	}

	/* Migrated from Custom Styling: keep a long panel scrollable rather than
	   letting it run past the viewport. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu {
		max-height: calc(100vh - 150px);
		overflow-y: auto;

		/* Sit the panel on the header's bottom edge.
		   MMM anchors the panel at the menu item's height (top: 32px, from
		   menu_item_link_height), which is the nav row's *item* bottom — not the
		   row's bottom. That left the panel overlapping up into the bar by exactly
		   the row's bottom padding. 100% tracks the menu's height, so this stays
		   correct if the item height changes, and the variable keeps it correct if
		   the row padding changes. */
		top: calc(100% + var(--treg-nav-row-pad));
	}
}

/* --- mobile drawer, migrated from Custom Styling ---------------------------
   Load-bearing: without the fixed positioning the mobile menu is not a drawer
   at all, it just pushes the page down. */

/* Height of the two stacked bars above the drawer. See the note on the drawer's
   `top` below for where these come from. */
:root {
	--treg-drawer-top: 139px;
}

@media only screen and (min-width: 1024px) {

	:root {
		--treg-drawer-top: 154px;
	}
}

@media only screen and (min-width: 1025px) {

	:root {
		--treg-drawer-top: 171px;
	}
}

@media only screen and (max-width: 1200px) {

	.header-inner {
		justify-content: space-between !important;
		width: 100% !important;
		padding-right: 15px;
	}

	.site-navigation {
		order: -1;
	}

	/* The drawer hangs off the bottom of the header stack. Because it is fixed, its
	   top cannot be expressed as a percentage of anything useful, so it is a
	   number — but it must equal the top bar's height plus the header row's, and
	   the migrated value of 125px matched neither. It sat 20px up inside the header
	   on mobile, and at 1025px, where the stack is 171px tall, it covered all but
	   one pixel of the hamburger: the menu could be opened but not closed.

	   Keep these in step with the two bars. Measured on a fresh load, from .header's
	   bottom edge: 82 + 57 below 1024, 82 + 72 at exactly 1024 (a min-width: 1024px
	   rule in style.css raises the row for that single pixel), and 100 + 71 from
	   1025 up. Measure by reloading at the width — resizing an already-loaded page
	   reports the top bar 6px taller than it renders. */
	#mega-menu-menu-1 {
		position: fixed !important;
		top: var(--treg-drawer-top, 139px) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: auto !important;
		overflow: auto !important;
		/* The theme's style.css makes the menu a flex column with
		   justify-content: space-between below 1281px. In a drawer that is as tall
		   as the viewport that spread the eight items down the whole height, leaving
		   ~48px of dead air between each. Stack them from the top instead. */
		justify-content: flex-start !important;
	}

	#masthead #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
		float: right;
		display: block;
	}

	#mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 {
		border-top: 1px solid var(--treg-nav-rule);
	}

	/* The drawer now matches the desktop nav: dark text on white. Colour, size and
	   the hover wash all come from the mobile_* Menu Theme settings, so the only
	   thing left here is the reset of the border and radius the theme's own CSS
	   put on these links. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
		margin: 0;
		border: 0;
		text-align: left;
	}

	/* Square the drawer's rows. The 7px radius is right for a pill-shaped nav item
	   on desktop, but in the drawer the item spans the full width, so the radius
	   clips the hover/open wash at the top corners and lets the white drawer show
	   through — which reads as a gap at the screen edge. The open state needs
	   naming explicitly: MMM re-applies the radius via .mega-toggle-on, so a reset
	   on the link alone loses on specificity. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link,
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover,
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:focus,
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
		border-radius: 0;
	}

	/* Hairline between rows, so a list of eight reads as rows rather than a block. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item + li.mega-menu-item {
		border-top: 1px solid var(--treg-nav-rule);
	}

	/* The panel is white and the drawer is now white too, so an open panel would
	   merge into the list. The surface wash makes it read as nested content —
	   on desktop that job is done by the panel's border and shadow. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu {
		background: var(--treg-nav-surface);
		border-top: 1px solid var(--treg-nav-rule);
	}

	/* Cards and strips inside the panel invert to white, so they stay distinct
	   from the washed panel behind them. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 .treg-nav-feature,
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 .treg-nav-announcement {
		background: #fff;
	}
}

/* ----------------------------------------------------------------- brand bar */

.treg-nav-brandbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 0 13px;
	margin: 0 0 16px;
	border-bottom: 1px solid var(--treg-nav-rule);
}

.treg-nav-brandbar__brand {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

/* Sized by height so both lockups match optically despite different aspect
   ratios (Bernard 252x60, Tregaskiss 306x60). */
.treg-nav-brandbar__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 26px;
}

.treg-nav-brandbar__tagline {
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1.3;
	color: var(--color-primary);
	border-left: 1px solid var(--treg-nav-rule);
	padding-left: 16px;
}

/* --------------------------------------------------------- group headings */

/* Rendered as spans, not links — see treg_nav_v2_heading_markup(). */
.treg-nav-heading__label {
	display: block;
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--treg-nav-label);
	margin: 0 0 12px;
}

.treg-nav-subheading__label {
	display: block;
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--treg-nav-label);
	margin: 0;
	padding: 2px 0 4px 12px;
}

/* A heading's own <li> must not inherit MMM's link padding. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-heading,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-subheading {
	padding: 0;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-heading + li.treg-nav-heading,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-heading ~ li.treg-nav-heading {
	margin-top: 20px;
}

/* Sub-groups get the wireframe's indent and left rule. Also forces the nested
   list to stay open: MMM treats the third level as a flyout and would otherwise
   position it absolutely and hide it until hover. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-subheading {
	margin: 0 0 6px;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-subheading > ul.mega-sub-menu {
	position: static !important;
	display: block !important;
	/* `inherit`, NOT `visible`: a child's visibility:visible punches through a
	   hidden ancestor for hit-testing, which made the closed (opacity:0)
	   panel's links hoverable/clickable while invisible. Inheriting follows
	   the panel's own open/closed state. */
	visibility: inherit !important;
	opacity: 1 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	left: auto !important;
	top: auto !important;
	padding: 0 !important;
	margin: 0 0 4px !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
}

/* ---------------------------------------------------------------- panel links */

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column a.mega-menu-link {
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--treg-nav-ink);
	line-height: 1.35;
	font-weight: 400;
	background-color: transparent;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column a.mega-menu-link:hover,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column a.mega-menu-link:focus {
	background-color: var(--treg-nav-surface);
}

/* Sub-group items indent past a 2px rule drawn per item, so it highlights with
   the item on hover instead of running the whole group's height.
   !important because this is a fourth-level item and MMM has no setting for that
   depth, while its generated third-level rule (two IDs, six classes) still
   matches and would win on specificity. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-subheading ul.mega-sub-menu a.mega-menu-link {
	position: relative;
	padding-left: 24px !important;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-subheading ul.mega-sub-menu a.mega-menu-link::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 2px;
	background: var(--treg-nav-rule);
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-subheading ul.mega-sub-menu a.mega-menu-link:hover::before,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-subheading ul.mega-sub-menu a.mega-menu-link:focus::before {
	background: var(--color-primary);
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column a.mega-menu-link .mega-menu-title {
	display: block;
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--treg-nav-ink);
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column a.mega-menu-link .mega-menu-description {
	display: block;
	font-size: 12.5px;
	/* MMM's generated stylesheet italicises descriptions; the wireframe does not. */
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	color: var(--treg-nav-muted);
	margin-top: 2px;
	text-transform: none;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column a.mega-menu-link:hover .mega-menu-title,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column a.mega-menu-link:focus .mega-menu-title {
	color: var(--color-primary);
}

/* The wireframe's gold "Help Me Choose →" entry. Add the CSS class
   treg-nav-link--accent to a menu item to promote it. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-link--accent a.mega-menu-link .mega-menu-title {
	color: var(--color-primary);
}

/* ---------------------------------------------------------------- feature card */

.treg-nav-feature {
	display: block;
	background: var(--treg-nav-surface);
	border-radius: var(--treg-nav-radius);
	padding: 18px;
	height: 100%;
}

.treg-nav-feature__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 12px;
	border-radius: var(--treg-nav-radius);
	overflow: hidden;
	border: 1px solid var(--treg-nav-rule);
	background: linear-gradient(135deg, #efeee9, #dedcd4);
	/* width first, so the ratio sets the height rather than the capped height
	   setting the width and leaving the box narrower than the card. */
	width: 100%;
	aspect-ratio: 21 / 9;
	max-height: 150px;
}

/* Shown until artwork is chosen — see the feature card widget. */
.treg-nav-feature__placeholder {
	position: absolute;
	bottom: 9px;
	left: 10px;
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 5px;
}

.treg-nav-feature__image {
	display: block;
	width: 100%;
	max-height: 150px;
	height: auto;
	object-fit: cover;
	aspect-ratio: 21 / 9;
}

.treg-nav-feature__eyebrow {
	display: block;
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0 0 6px;
}

.treg-nav-feature__title {
	display: block;
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--treg-nav-ink);
	margin: 0 0 8px;
}

.treg-nav-feature__body {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--treg-nav-muted);
	margin: 0 0 16px;
}

.treg-nav-feature__cta,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 .treg-nav-feature__cta {
	display: inline-block;
	padding: 13px 22px;
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	background-color: var(--color-primary);
	border-radius: 8px;
	text-decoration: none;
}

.treg-nav-feature__cta:hover,
.treg-nav-feature__cta:focus {
	color: #fff;
	background-color: var(--color-primary-hover);
	text-decoration: underline;
}

/* --------------------------------------------------------------- announcement */

.treg-nav-announcement {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 13px 16px;
	margin: 0 0 18px;
	background: var(--treg-nav-surface);
	border: 1px solid var(--treg-nav-rule);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--treg-nav-radius);
	text-decoration: none;
}

a.treg-nav-announcement:hover,
a.treg-nav-announcement:focus {
	background: #f1ede4;
}

.treg-nav-announcement__flag {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 4px 9px;
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-primary);
	border-radius: 999px;
}

.treg-nav-announcement__body {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.treg-nav-announcement__title {
	display: block;
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--treg-nav-ink);
}

.treg-nav-announcement__text {
	display: block;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--treg-nav-muted);
	margin-top: 2px;
}

.treg-nav-announcement__go {
	flex: 0 0 auto;
	font-family: "HelveticaNeueCyr", sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary);
	white-space: nowrap;
}

.treg-nav-announcement__go::after {
	content: " \2192";
}

/* -------------------------------------------------------------------- mobile */

@media only screen and (max-width: 1200px) {

	/* The theme's own style.css (written for the pre-V2 menu) sets
	   `min-width: 1080px` on the menu inside @media (max-width: 1281px). That
	   rule also catches phones, where it turns the panel into a 1080px block
	   scrolling sideways inside a fixed ~430px overlay — the right-hand two
	   thirds of every panel simply unreachable. Unset it here rather than edit
	   the shared rule, which the old menu may still rely on elsewhere. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 {
		min-width: 0 !important;
		width: auto !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	/* One stacked column: rows, columns and their lists all go full width. MMM
	   floats columns, so the float has to be cleared or they shuffle sideways
	   as soon as two fit. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-row,
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column {
		float: none !important;
		clear: both !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0;
	}

	/* Padding only — deliberately no `display`. MMM keeps closed panels at
	   `display: none` and reveals them with `.mega-toggle-on > ul.mega-sub-menu`.
	   Setting display here matches that selector's specificity but loads later,
	   which forced every panel open at once and broke the accordion. Let MMM own
	   the open/closed state so panels stay closed until tapped. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu {
		padding: 16px 20px 24px;
	}

	/* Breathing room between stacked column groups, which on desktop came from
	   them sitting side by side. */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column + li.mega-menu-column {
		margin-top: 22px;
	}

	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.treg-nav-heading ~ li.treg-nav-heading {
		margin-top: 22px;
	}

	/* Logo above tagline — side by side leaves the tagline a few characters. */
	.treg-nav-brandbar {
		display: block;
		padding-bottom: 14px;
		margin-bottom: 18px;
	}

	.treg-nav-brandbar__logo {
		height: 24px;
	}

	.treg-nav-brandbar__tagline {
		font-size: 13px;
		padding-left: 0;
		margin-top: 8px;
		border-left: 0;
	}

	/* Stack the announcement so the flag, copy and link don't squeeze. */
	.treg-nav-announcement {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 20px;
	}

	.treg-nav-feature {
		margin-top: 22px;
	}

	/* The feature image is decoration on a phone; the copy and CTA carry it. */
	.treg-nav-feature__media {
		display: none;
	}
}

/* ------------------------------------------------------------------- */
/* Vertically centre the dropdown chevron with the nav item text. MMM   */
/* renders it as a 15px dashicons glyph with vertical-align: top inside */
/* the 32px line box, which sinks it below the text's optical centre.   */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
	vertical-align: middle;
	line-height: 1;
	margin-top: -2px;
}