/**
 * Slide-in nav overlay ("mega menu") + the shared "Category Tabs" walker
 * output. Global (every page).
 *
 * Full-width by explicit request: the literal source constrains this to
 * `width:min(100% - 48px, 1440px)` (centered, matching content width),
 * but a true edge-to-edge full-width layout is what was asked for here
 * instead — "properly as normally mega menus are" — a deliberate
 * deviation from the source, not a bug. Internal content still respects
 * the global side-spacing (--gutter-desktop) so text doesn't touch the
 * viewport edge.
 *
 * The source toggles visibility via plain display:none → .open{
 * display:flex} with NO transition on the panel itself. A subtle fade-in
 * is added here anyway since a "smooth open/close animation" was
 * explicitly requested — kept minimal (opacity only).
 *
 * The walker's description span is `.cs` (matching the homepage tab
 * bar's class) — selectors below target `.cs` to match what the walker
 * (inc/class-malasiya-category-tabs-walker.php) actually outputs.
 */

.nav-menu {
	position: fixed;
	inset: 0;
	width: 100%;
	z-index: var(--z-nav-overlay);
	background: var(--color-bar);
	color: var(--color-white);
	display: none;
	flex-direction: column;
	/* Reduced from 40/46px per explicit feedback that the panel was
	   taller than the viewport, forcing an internal scrollbar. max-height
	   is a hard safety net on top of the reduced padding below. */
	max-height: 100vh;
	padding: 28px 0 32px;
	overflow: hidden auto;
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Content max-width — the panel's own background/glow (.nav-menu, above)
   still runs full-bleed edge-to-edge; only the actual content (logo row,
   sections grid, trending topics) stops growing past the site's standard
   content width and centers on large screens (matches
   https://smartinvestor.com.my/ reference), especially noticeable on
   desktop where the overlay is otherwise edge-to-edge. */
.nm-inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter-desktop);
	/* .nav-menu is the flex column now holding just this one child — it
	   must become the flex column itself (and stretch to fill .nav-menu's
	   height) so .nm-foot's margin-top:auto still pushes Trending Topics
	   to the bottom of the panel, same as before this wrapper existed. */
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/**
 * Permanent ambient glow, top-right corner — confirmed directly from
 * source (`.nav-menu::after`), a decoration that's ALWAYS visible, not a
 * hover effect. Missed entirely in earlier rounds; this is the "yellow
 * shadow" that was expected to be permanent.
 */
.nav-menu::after {
	content: '';
	position: absolute;
	right: -120px;
	top: -120px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 200, 9, 0.28), transparent 68%);
	pointer-events: none;
}

.nav-menu.open {
	display: flex;
	opacity: 1;
}

.nm-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/**
 * Full wordmark, plain white — per explicit correction: no per-letter
 * brand colors here (unlike the header/footer usage of the same markup),
 * every span just inherits this element's white color.
 */
/**
 * Kept identical to the header logo (.ui-logo in site-header.css) in
 * font-family/weight/size/line-height/letter-spacing/alignment, per
 * explicit request — the only allowed difference is color, which is
 * driven by its own Theme Setting (Mega Menu Logo Text Color,
 * --color-mega-logo, default white) instead of a hardcoded value.
 * white-space: nowrap + no max-width so it never wraps to a second line
 * (mobile override below keeps this in sync with .ui-logo's own mobile
 * size).
 */
.nm-logo {
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 58px;
	line-height: 0.9;
	letter-spacing: -1px;
	color: var(--color-mega-logo);
	white-space: nowrap;
}

/* The tokened letters (T/S/I) keep the SAME brand green/yellow colors as
   the header logo (.wm-g/.wm-y/.dot base rules, site-header.css) — per
   explicit request, only the plain/untokened text differs from the
   header, using --color-mega-logo (white) above instead of --color-ink. */

/**
 * No border, no background at rest, no per-button shadow either — the
 * "permanent yellow glow" that was wanted turned out to be the ambient
 * `.nav-menu::after` corner decoration above, not a button-specific
 * effect, so this stays simple: just a color change on hover. (The
 * literal source actually has a translucent white background pill here
 * at rest — explicitly overridden per direct instruction to have none.)
 */
.nm-close {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--color-white);
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 10px 12px;
	cursor: pointer;
	transition: color 0.15s;
}

.nm-close:hover,
.nm-close:focus-visible {
	color: var(--color-accent);
}

.nm-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	padding: 24px 0;
}

.nm-h {
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 18px;
}

/**
 * Category tabs walker output (.ui-cat / .cat-row / .cs / .ub) reused
 * here — corrected per explicit feedback (3rd round):
 *   - Title + description side-by-side, space-between (confirmed correct).
 *   - Hover: NO text-decoration underline (still correct not to have
 *     this), but the `.ub` growing left-to-right bar IS wanted — an
 *     earlier round removed it entirely, which was wrong; it's a
 *     smooth animated transition, not a plain instant underline, so it
 *     was never really "an underline" in the first place.
 *   - Color: accent yellow (matches the literal source
 *     `.nm-sections a:hover{color:var(--y)}`, confirmed correct after
 *     going back and forth — a previous round wrongly used green).
 *   - The static grey divider (border-bottom) stays, unrelated to hover.
 */
.nm-sections {
	display: flex;
	flex-direction: column;
}

.nm-sections .cat-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.nm-sections .ui-cat {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	transition: color 0.15s;
}

/* No divider after the last item — same rule on both desktop and mobile
   (no breakpoint override needed, :last-child applies everywhere). */
.nm-sections .ui-cat:last-child {
	border-bottom: 0;
}

.nm-sections .ui-cat .cn {
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -0.5px;
	color: var(--color-white);
	transition: color 0.15s;
}

.nm-sections .ui-cat:hover .cn,
.nm-sections .ui-cat:focus-visible .cn {
	color: var(--color-accent);
}

.nm-sections .ui-cat .cs {
	flex: none;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #9fb4a6;
	white-space: nowrap;
}

.nm-sections .ui-cat .ub {
	display: block;
	height: 2px;
	background: var(--color-accent);
	width: 0;
	transition: width 0.2s ease;
	margin-top: 6px;
}

.nm-sections .ui-cat:hover .ub,
.nm-sections .ui-cat:focus-visible .ub {
	width: 48px;
}

/* Company pages — default wp_nav_menu() <ul><li> output */
.nm-pages {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nm-pages li a {
	display: block;
	font-family: var(--font-primary);
	font-size: 16px;
	color: #dfe7dd;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	transition: color 0.15s;
}

/* No divider after the last item — same as .nm-sections above. */
.nm-pages li:last-child a {
	border-bottom: 0;
}

/* No underline — only a color change on hover, matching the Sections
   list's corrected behavior; the permanent grey divider above is not a
   hover effect, it's always visible. */
.nm-pages li a:hover,
.nm-pages li a:focus-visible {
	color: var(--color-accent);
}

.nm-foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nm-foot .nm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.nm-foot .nm-tags a {
	font-size: 12.5px;
	color: #dfe7dd;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-pill);
	padding: 6px 15px;
	transition: 0.15s;
}

.nm-foot .nm-tags a:hover,
.nm-foot .nm-tags a:focus-visible {
	background: var(--color-accent);
	color: var(--color-ink);
	border-color: var(--color-accent);
}

@media (max-width: 768px) {
	.nav-menu {
		padding: 22px 0 30px;
	}

	.nm-inner {
		padding-inline: 18px;
	}

	.nm-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 16px 0 8px;
	}

	.nm-sections .ui-cat,
	.nm-pages li a {
		padding-block: 8px;
	}

	/* .cn has its own explicit font-size (32px, desktop), which a
	   parent-level override doesn't cascade past — same bug pattern
	   found elsewhere; must target .cn directly. */
	.nm-sections .ui-cat .cn {
		font-size: 24px;
	}

	/* Matches .ui-logo's own mobile size — single line, never wraps. */
	.nm-logo {
		font-size: 34px;
	}
}

/* Below ~480px, .nm-logo (34px, same intrinsic width as .ui-logo) plus
   the "Close" label button no longer both fit on .nm-top's row — unlike
   the header, whose equivalent control is just a small icon button with
   no label. Hiding the label (keeping just the × icon, same footprint as
   the header's hamburger) gives the logo the exact same room to render at
   the exact same size as .ui-logo, rather than shrinking the logo itself
   and breaking the "must match the header logo exactly" requirement. */
@media (max-width: 480px) {
	.nm-close-label {
		display: none;
	}
}

/* Matches .ui-logo's own narrow-screen size (site-header.css) exactly —
   even with the Close label hidden above, below ~360px the logo alone is
   still too wide for the row next to the (now icon-only) Close button. */
@media (max-width: 360px) {
	.nm-logo {
		font-size: 26px;
	}
}