/* ============================================================================
   COLAMCO mega menu — Concept C "Merged" full-bleed overlay.
   Header redesign 2026-08-17, Session S2
   (Documentation/UI-Modernization/HEADER-REDESIGN-2026-08-17-PLAN.md §1.4 + §2b).

   REPLACES the 2026-07-22 pane-swap dropdown that hung off the nav container.
   What changed, and why the old rules are gone rather than amended:
     - the panel is a FULL-BLEED OVERLAY under the whole header, so it is anchored
       to .section-header (menu.js writes .mm-anchor there) instead of the tier-2
       .container. Nothing about it is container-width any more, so every rule that
       sized a track against that container went with it;
     - the left rail became a 320px INDEX on --ground in display type, with a blue
       + 6px translateX hover and a bold active row;
     - the ASSIST promo CARD and the Customer Service contact column / ad stack are
       DELETED. Their job is done by the two panel FOOTERS: a four-block errand row
       on Customer Service, a one-line ASSIST strip everywhere else;
     - Customer Service keeps its links in ONE column and spends the width beside
       them on an approved message card (§2b item 1).

   Interaction (hover intent, grace close, pane swap, keyboard, veil) is menu.js.
   Colours come from the skin's :root tokens. Desktop only — the phone chrome uses
   the Sidebar template — and the tabs themselves take their ON-NAVY ink from
   _chrome.scss's #navMenuMega block, because they sit on the header field while
   everything below is a --paper surface.
   ========================================================================== */

#navMenuMega.mm-root {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 2026-08-16 batch, Session 1 item 6: the tabs must NOT shrink. With the default flex-shrink of 1
   the five tabs divided the track between them instead of overflowing it — MEASURED at 768: every
   tab compressed to exactly 108px while its own `white-space: nowrap` label kept its natural width,
   so "Customer Service" ran ~20px into the tab beside it. */
#navMenuMega.mm-root > .mm-top {
	flex: none;
}

/* The overlay's positioning parent. menu.js writes this class on .section-header — the whole navy
   field — so `left: 0; right: 0` on the panel is the VIEWPORT, not the tier-2 container. 100vw was
   the other way to full-bleed and it is wrong here: the page reserves a scrollbar gutter, so 100vw
   overstates the content width and would put a horizontal scrollbar on every page. */
.mm-anchor {
	position: relative;
}

/* R93, 2026-08-09 — button-shaped menu links.
   menu.txt's disabled-node arms emit <button type="button"> where they used to emit
   <a href="javascript:void(0)">: a disabled node is a panel trigger or a dead label, never a link,
   and Lighthouse's crawlable-anchors audit flagged every one of them.

   A <button> was the right element rather than a bare href-less <a> because menu.js drives keyboard
   traversal with .focus() on .mm-top-link / .mm-rail-link — an <a> without href is not focusable and
   the arrow-key path would have died on exactly the nodes that own the panels.

   ⚠ type="button" in menu.txt is load-bearing: DNN wraps the page in a WebForms <form runat="server">,
   so a bare <button> defaults to submit and opening a menu would post the page. */
button.mm-top-link,
button.mm-rail-link,
button.mm-errand {
	width: 100%;
	margin: 0;
	background: none;
	border: 0;
	font-family: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* ---------- tier-2 tabs ----------
   S1 shipped these on the navy field; _chrome.scss's #navMenuMega block owns their colour and the
   compact padding. Only the geometry is here.
   2026-08-16 batch, Session 1 item 7: the vertical padding IS the tab strip's height — the row has
   no padding of its own — so it is the only lever for tightening tier 2. */
.mm-top > .mm-top-link {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.62rem 1.15rem;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.mm-top > .mm-top-link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 70, 127, 0.28));
}

/* CURRENT PAGE (2026-08-19). The DDRMenu SELECTED token can never fire on a pointer tab, so the
   class is derived in menu.txt from the URLs the template already emits, and it lands on .mm-top
   ONLY - .mm-rail-item.active is menu.js's "this pane is showing" state further down this file.
   Concept C's treatment: the accent underline and no fill, same as the open tab, because a
   persistent mark and a transient one never coexist on the same tab.
   Colour is NOT restated here: _chrome.scss owns the on-navy tab ink with an id selector plus
   !important, so a 3-class rule in this file would lose the fight. The underline colour and the
   weight are unclaimed there, which is what makes those two the whole rule. */
.mm-top.active > .mm-top-link {
	border-bottom-color: var(--field-accent);
	font-weight: 700;
}

.mm-caret {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.7;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.15s ease;
	flex: none;
}

.mm-top.open .mm-caret {
	transform: rotate(225deg) translateY(-3px);
}

/* ---------- the page veil ----------
   NOT a new element: menukit's darken_activate() already appends one <span class="screen-darken">
   and darken_remove() already guards on `.mm-top.open`, so the open/close wiring exists and is
   shared with the offcanvas. menu.js only stamps .mm-veil on it while the mega menu owns it, which
   is what re-points the colour to Concept C's navy veil and lifts it over the page.
   z-index 1019 is deliberate: one under Bootstrap's .sticky-top (1020, which #HeaderContent wears),
   so the veil dims the PAGE and the header stays lit. The panel is a child of the header, so it
   paints inside that 1020 stacking context and needs no z-index of its own to clear the veil. */
.screen-darken.mm-veil {
	background-color: rgba(5, 21, 38, .45);
}

.screen-darken.active.mm-veil {
	z-index: 1019;
}

/* ---------- the overlay panel ---------- */
.mm-panel {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--paper);
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
	box-shadow: var(--shadow-3, 0 18px 48px rgba(6, 43, 76, 0.18));
	/* The panel scrolls as a whole only as a backstop — the index and the pane each carry their own
	   scroller below, which is what keeps the footer reachable without scrolling past the links. */
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	overflow-x: hidden;
}

.mm-top.open > .mm-panel {
	display: block;
	animation: mmPanelIn 0.16s ease;
}

@keyframes mmPanelIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mm-top.open > .mm-panel {
		animation: none;
	}
}

/* ---------- panel head (FLAT panels only) ----------
   A two-level panel carries its head inside the swapped pane, so this one is revealed only where
   there is no pane to carry it. */
.mm-panel > .mm-panel-head {
	display: none;
}

.mm-panel.mm-simple > .mm-panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.875rem 2.5rem 0;
}

.mm-panel-title {
	font-family: var(--ff-d);
	font-weight: 700;
	font-size: 1.6875rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.mm-panel-all,
.mm-pane-all {
	font-size: 0.84375rem;
	font-weight: 600;
	color: var(--blue-link);
	text-decoration: none;
	white-space: nowrap;
}

.mm-panel-all:hover,
.mm-panel-all:focus-visible,
.mm-pane-all:hover,
.mm-pane-all:focus-visible {
	color: var(--blue-link);
	text-decoration: underline;
}

/* ---------- index | pane ---------- */
.mm-grid {
	position: relative;
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	/* MEASURED at 1920x1080: without this row track the Products index stood at its own 862px inside a
	   750px box and was CLIPPED rather than scrolled - a grid item's automatic minimum size keeps it
	   at content height, and `overflow: hidden` on the container hid the last four categories with no
	   scrollbar to reach them. `minmax(0, 1fr)` lets the row take the capped height instead, and
	   `min-height: 0` on the index (below) is the other half: it is what un-blocks its own scroller. */
	grid-template-rows: minmax(0, 1fr);
	min-height: 360px;
	/* The pane is absolutely positioned, so it cannot push this box open — the cap is what the two
	   inner scrollers measure themselves against. 330px is the header plus the footer strip plus a
	   margin, so the whole overlay stays on screen at a 768px-tall laptop. */
	max-height: calc(100vh - 330px);
	overflow: hidden;
}

/* ---------- left index ---------- */
.mm-rail {
	list-style: none;
	margin: 0;
	min-height: 0;
	padding: 1.375rem 0;
	background: var(--ground);
	border-right: 1px solid var(--rule);
	overflow-y: auto;
	overflow-x: hidden;
	/* UI batch 2026-08-27, B1 (Juan): `scrollbar-width: thin` was here and WAS the reported
	   defect. The standard property WINS over this site's ::-webkit-scrollbar branding (measured,
	   _global.scss:83), so this rail drew a plain UA bar while .mm-pane beside it - which declares
	   nothing - drew the blue one. Declare NOTHING here; _global.scss:98 paints it. */
}

.mm-rail-link {
	display: block;
	width: 100%;
	padding: 0.5625rem 1.875rem;
	font-family: var(--ff-d);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--ink-2);
	text-decoration: none;
	transition: transform 0.14s ease-out, color 0.14s ease-out;
}

.mm-rail-link:hover,
.mm-rail-link:focus-visible,
.mm-rail-item.active > .mm-rail-link {
	color: var(--blue-link);
	text-decoration: none;
	transform: translateX(6px);
}

.mm-rail-item.active > .mm-rail-link {
	font-weight: 700;
}

.mm-rail-link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 70, 127, 0.28));
}

@media (prefers-reduced-motion: reduce) {
	.mm-rail-link {
		transition: none;
	}

	.mm-rail-link:hover,
	.mm-rail-link:focus-visible,
	.mm-rail-item.active > .mm-rail-link {
		transform: none;
	}
}

/* ---------- content pane (swapped in place) ---------- */
.mm-pane {
	display: none;
	position: absolute;
	left: 320px;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 1.875rem 2.5rem 1.5rem;
	overflow-y: auto;
	overflow-x: hidden;
	flex-direction: column;
}

.mm-rail-item.active > .mm-pane {
	display: flex;
}

.mm-pane-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.125rem;
}

.mm-pane-title {
	font-family: var(--ff-d);
	font-size: 1.6875rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.mm-links {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	column-gap: 2.5rem;
}

/* UI BATCH 2026-08-27 (Juan): "the mega menu sub-categories list entries are very small, there's
   tons of space available - increase the font size, weight, and spacing to make them easier to
   click and fill the available space a little better."

   MEASURED at 1920 before the change: the Products panel's pane is 1520px wide holding three
   293px columns of 14px/400 links on a 4.5px+4.5px vertical padding, i.e. a ~23px hit target in a
   pane whose height cap is 100vh-330px and which the longest category (23 children) does not fill.
   The pane had the space; the rows were the smallest type on the panel.

   The row is now 16px/500 on 0.5rem padding - a 34px target, which clears the 24x24 WCAG 2.5.8
   minimum with room, and reads one step under the 19px .mm-rail-link index beside it rather than
   five steps under it. The 3-column track is UNCHANGED: 293px still takes the longest label
   ("Keyboard & Keypad & Pointing Device Kits") in two lines at 16px, and dropping to two columns
   would push the tallest pane past its own cap and into a scroller.
   NOT applied to `.mm-panel.mm-simple .mm-rail-link` (Brands / Services / Customer Service): those
   panels are a flat list capped at 960px, so a size rise there costs column height, not dead air. */
.mm-link-item {
	break-inside: avoid;
	padding: 0.5rem 0;
}

.mm-link {
	display: block;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink-2);
	text-decoration: none;
}

.mm-link:hover,
.mm-link:focus-visible {
	color: var(--blue-link);
	text-decoration: underline;
}

/* ---------- flat panel (a top item with no second level anywhere) ----------
   Brands, Services and Customer Service. The index IS the link list here, so it drops the --ground
   sidebar treatment and becomes three columns of ordinary links under the panel head. */
.mm-panel.mm-simple .mm-grid {
	display: block;
	min-height: 0;
	max-height: none;
	overflow: visible;
	padding: 1.125rem 2.5rem 1.75rem;
}

.mm-panel.mm-simple .mm-rail {
	columns: 3;
	column-gap: 2.5rem;
	/* The cap is what keeps the entries near each other, and it is measured, not taste. `columns`
	   treats its count as a division of whatever box it is in, so with no cap the three columns
	   divided the full 1830px panel at 1920 and stood ~570px apart - the exact complaint that set the
	   2026-08-09 two-column cap ("pages are very far from each other"). That ruling accepted ~286px
	   columns ~334px apart; three of those plus two 40px gutters is 960. Re-measure before widening. */
	max-width: 960px;
	padding: 0;
	background: none;
	border-right: 0;
	overflow: visible;
}

.mm-panel.mm-simple .mm-rail-item {
	/* a label that wraps to two lines must not be split across a column boundary */
	break-inside: avoid;
}

.mm-panel.mm-simple .mm-rail-link {
	padding: 0.15625rem 0;
	font-family: inherit;
	font-size: 0.90625rem;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--ink-2);
}

.mm-panel.mm-simple .mm-rail-link:hover,
.mm-panel.mm-simple .mm-rail-link:focus-visible,
.mm-panel.mm-simple .mm-rail-item.active > .mm-rail-link {
	transform: none;
	font-weight: 400;
	text-decoration: underline;
}

/* ---------- the "View All …" entry ----------
   §2b item 3 (Juan): "View All Categories" and "View All Brands" sit BELOW a separator instead of
   inline with their siblings. menu.js marks the entry by its own label rather than by the tab it is
   under — NodeManipulator_Desktop appends it last on exactly those two menus — and on a flat panel
   it also LIFTS it out of the column flow into .mm-viewall, because a border on the last item of a
   multi-column list draws itself at the foot of whichever column that item happened to land in. */
.mm-vall {
	margin-top: 0.625rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--rule);
}

/* Item 1 (Juan, 2026-08-21): /promotions has no desktop entry outside the footer link. The deals entry
   is the FIRST item of the Products index (menu.txt) and wears .mm-vall's treatment MIRRORED - the
   separator sits below it, because what it is being separated from is the category list underneath.
   No type override: matching "View All Categories" means matching the plain .mm-rail-link it is. */
.mm-deal-item {
	margin-bottom: 0.625rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--rule);
}

/* D9 (2026-08-21, Juan): "on brands mega menu, the horizontal line above View All Brands should only
   go for 1 column, it's going across the whole menu."

   MEASURED on devbeta at 1470 before the change: this block is 1380px wide at x=40 while the rail it
   separates is 960px at x=40 in three 293px columns with a 40px gutter. It is wide because menu.js
   LIFTS it out of the rail (a border-top on the last item of a `columns` list draws at the foot of
   whichever column that item landed in, which is a stray rule in the middle of the panel, not a
   separator) - so it becomes a sibling of .mm-rail and takes the panel's content width instead of the
   rail's.

   The width is DERIVED from the two constants on `.mm-panel.mm-simple .mm-rail` above rather than
   written as 293px, so a change to that measured 960px cap or its 2.5rem gutter carries here: three
   columns and two gutters means one column is (960 - 2 x 2.5rem) / 3 = 293.33px. The block already
   starts at x=40, the same left edge as the rail's first column, so capping the width is the whole of
   the alignment.
   ⚠ Keep the spaces around the `-` inside calc(). This file is loaded directly by the DNN menu
   provider and is NOT in bundleconfig.json, so nothing minifies it today - but a collapsed `calc(960px-5rem)`
   is invalid CSS that is dropped SILENTLY, and this repo has already lost a round to that. */
.mm-viewall {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0.875rem 0 0;
	width: calc((960px - 5rem) / 3);
	max-width: 100%;
	border-top: 1px solid var(--rule);
}

/* MEASURED: the flat panel's own `.mm-panel.mm-simple .mm-rail-link` block is 3 selectors and this
   was 2, so the entry came back --ink-2 and weight 400 whatever the source order. Matching that
   scope is the fix; source order then settles the tie. */
.mm-panel.mm-simple .mm-viewall .mm-rail-link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--blue-link);
}

/* ---------- Customer Service panel (§2b item 1, Juan 2026-08-17 round 3) ----------
   The links stay in ONE column and the width beside them carries the approved message card.
   menu.js writes .mm-cs on this panel from the top node's TabName, and deletes .mm-cs-card from
   every other panel, so this is the only place the card exists in the live DOM. */
.mm-panel.mm-cs .mm-grid {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 2.875rem;
	align-items: start;
	padding: 1.125rem 2.5rem 1.875rem;
}

.mm-panel.mm-cs .mm-rail {
	columns: 1;
}

.mm-panel.mm-cs .mm-rail-link {
	font-size: 0.90625rem;
	padding: 0.3125rem 0;
}

.mm-cs-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	/* MEASURED at 1920: without a cap the card ran to 1525px and left ~400px of dead air between the
	   paragraph (capped at 46ch) and the image. 1040 gives the copy ~710px and keeps the two halves
	   reading as one card. */
	max-width: 1040px;
	gap: 1.875rem;
	align-items: center;
	background: var(--ground);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg, 16px);
	padding: 1.625rem 1.875rem;
}

.mm-cs-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mm-cs-kicker {
	font-family: var(--ff-u);
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--blue-link);
}

.mm-cs-title {
	font-family: var(--ff-d);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0.375rem 0 0.5rem;
}

.mm-cs-body {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 46ch;
}

/* The artwork is a background rather than an <img> because this stylesheet sits beside menu.txt in
   the skin's Menus/Mega folder, so a relative URL resolves against the skin — and DDRMenu's template
   language has no token for the skin path. The element still carries role="img" + aria-label in
   menu.txt, so it is announced. */
.mm-cs-art {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md, 10px);
	background-image: url("../../resources/images/cs_menu_support.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ---------- panel footer, variant 1: the ASSIST strip (every panel but Customer Service) ---------- */
.mm-assist {
	display: flex;
	align-items: baseline;
	gap: 0.875rem;
	padding: 0.75rem 2.5rem;
	background: var(--ground);
	border-top: 1px solid var(--rule);
	font-size: 0.8125rem;
	color: var(--ink-2);
}

.mm-assist-brand {
	flex: none;
	font-family: var(--ff-m);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--blue-link);
}

.mm-assist-brand em {
	font-style: normal;
	font-weight: 400;
}

.mm-assist-copy {
	min-width: 0;
}

.mm-assist-link {
	flex: none;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--blue-link);
	text-decoration: none;
	white-space: nowrap;
}

.mm-assist-link:hover,
.mm-assist-link:focus-visible {
	text-decoration: underline;
}

/* ---------- panel footer, variant 2: the errand row (Customer Service only) ---------- */
.mm-errands {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--rule);
}

.mm-errand {
	display: flex;
	align-items: center;
	gap: 0.8125rem;
	padding: 1.0625rem 1.625rem;
	border-right: 1px solid var(--rule);
	color: var(--ink);
	text-decoration: none;
}

.mm-errand:last-child {
	border-right: 0;
}

.mm-errand:hover,
.mm-errand:focus-visible {
	background: var(--ground);
	color: var(--ink);
	text-decoration: none;
}

.mm-errand:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--focus, #00467f);
}

.mm-errand-icon {
	flex: none;
	font-size: 1.125rem;
	color: var(--blue-link);
}

.mm-errand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mm-errand-label {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
}

.mm-errand-meta {
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--ink-faint);
}

/* ---------- tablet band (768-991) ----------
   The index gives up 80px and the pane drops to two columns; the errand row folds to 2x2 and the
   Customer Service links move ABOVE the card rather than beside it, because 4 tracks and a 300px image
   do not fit beside 260px of links at this width. The card itself stays two-track (see below). */
@media (max-width: 991.98px) {
	.mm-grid {
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.mm-pane {
		left: 240px;
		padding: 1.375rem 1.5rem 1.25rem;
	}

	.mm-links {
		columns: 2;
	}

	.mm-panel.mm-simple .mm-grid {
		padding: 1rem 1.5rem 1.5rem;
	}

	.mm-panel.mm-simple .mm-rail {
		columns: 2;
	}

	.mm-panel.mm-cs .mm-grid {
		display: block;
		padding: 1rem 1.5rem 1.5rem;
	}

	/* MEASURED at 768/820 (§9.5): the card is 710px wide once the links stack above it, so the copy and
	   a 240px image DO fit side by side — stacking them left the 320px-capped artwork alone on a 710px
	   row with ~370px of dead air to its right. Keep the base two-track layout, only narrow the image
	   track. The 46ch body cap then leaves the copy ~370px, which wraps to 4 lines at 768. */
	.mm-cs-card {
		grid-template-columns: minmax(0, 1fr) 240px;
		gap: 1.5rem;
		margin-top: 1.25rem;
	}

	.mm-panel > .mm-panel-head,
	.mm-panel.mm-simple > .mm-panel-head {
		padding: 1.5rem 1.5rem 0;
	}

	.mm-assist {
		flex-wrap: wrap;
		padding: 0.75rem 1.5rem;
	}

	.mm-errands {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mm-errand:nth-child(2n) {
		border-right: 0;
	}

	.mm-errand:nth-child(-n + 2) {
		border-bottom: 1px solid var(--rule);
	}

	/* 2026-08-16 batch, Session 1 items 6 + 7: the tab strip is far wider than the container at
	   768/820, so 0.25rem off each of ten paddings takes 40px out and puts its left edge back inside
	   the page margin. Re-measure before widening. */
	.mm-top > .mm-top-link {
		padding: 0.58rem 0.55rem;
		font-size: 0.9rem;
	}
}

/* phones never see this menu (phone chrome uses the Sidebar template) */
@media (max-width: 767.98px) {
	#navMenuMega.mm-root {
		display: none;
	}
}