/* ==========================================================================
   MathuraNow — original stylesheet. Mobile-first, no framework.
   (LiteSpeed Cache already minifies/combines this for delivery, so the
   source stays readable rather than hand-minified.)
   ========================================================================== */

/* -- Design tokens --------------------------------------------------- */
/* Values match the confirmed design-handoff palette
   (design-handoff/design_handoff_mathuranow/README.md) - updated
   2026-08-31 from this file's original values so the theme and the
   shared mathuranow-design-system asset never run two different
   palettes in parallel. Token names are unchanged. */
:root {
	--mn-navy: #0D1B2A;
	--mn-navy-light: #1E3A5F;
	--mn-red: #D90429;
	--mn-ink: #2A3542;
	--mn-gray-700: #5B6774;
	--mn-gray-400: #7A848E;
	--mn-gray-200: #EEF0F3;
	--mn-gray-100: #F8F9FA;
	--mn-white: #ffffff;
	--mn-accent: var(--mn-red);

	/* New tokens from the design-handoff table - not previously modeled
	   in this file, added rather than overloading an existing name. */
	--mn-teal: #2A9D8F;
	--mn-teal-bg: #E6F5F3;
	--mn-amber: #E09F3E;
	/* Completes the existing --mn-positive/--mn-positive-bg and
	   --mn-negative/--mn-negative-bg base+tint pairing convention for
	   amber too (2026-09-15, Daily Needs redesign) - amber had a base
	   color but no matching light tint yet, needed for a bolder-but-
	   tasteful stale-data notice background. Not a new one-off hue - a
	   light tint of the existing --mn-amber, same derivation the other
	   three pairs already use. */
	--mn-amber-bg: #FBEEDA;
	--mn-positive: #1B7F5F;
	--mn-positive-bg: #E8F6F0;
	--mn-negative: #C1121F;
	--mn-negative-bg: #FDEEEF;
	--mn-faint: #8A949E;
	--mn-divider: #F1F3F5;
	--mn-border-2: #E7EBEF;

	/* New radius step matching the design's 12px card corners - kept
	   separate from --mn-radius (6px) so components not yet restyled to
	   the new design aren't visually affected by this step. */
	--mn-radius-lg: 12px;

	/* Corner scrim behind an overlaid badge (.mn-card__media-wrap::before)
	   - see that rule's own comment for why this exists. Plain black-based,
	   not a brand-tinted color: the whole point is it has to read as a
	   neutral "dimmer" against ANY image content (a bright graphic, a dark
	   photo, baked-in colored text), not add its own color that could
	   clash with what's underneath. */
	--mn-media-scrim: linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 55%, rgba(0, 0, 0, 0) 100%);

	--mn-font-body: 'MN Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mn-font-head: 'MN Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* Long-form article body only (.mn-single__body) - everything else
	   (nav, cards, badges, headings) stays on --mn-font-body/-head above. */
	--mn-font-read: 'MN Serif', Georgia, serif;

	--mn-radius: 6px;
	--mn-gap: 1.25rem;
	--mn-container: 1200px;
}

/* -- Fonts: self-hosted, cover both Latin and Devanagari (English +
   Hindi via TranslatePress) so Hindi text never silently falls back to
   a mismatched system font. font-display: swap avoids blocking text
   render on font load (good for LCP). -------------------------------- */
/* Both are variable fonts (a single file covers the whole weight axis),
   so one @font-face per script with a font-weight range replaces what
   would otherwise be several separate static-weight files. The 'MN
   Sans' family name is kept from the original build - only the Latin
   FILE it points to changed (Noto Sans Latin -> Plus Jakarta Sans, per
   the design-handoff package's confirmed UI typeface); the Devanagari
   file is untouched, since the design's Hindi UI font (Noto Sans
   Devanagari) is the same one already self-hosted here. */
@font-face {
	font-family: 'MN Sans';
	src: url('../fonts/plus-jakarta-sans-latin-variable.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'MN Sans';
	src: url('../fonts/noto-sans-devanagari-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* Article body copy only - Source Serif 4 (EN) / Noto Serif Devanagari
   (HI), per the design-handoff package. Separate family from 'MN Sans'
   so nav/cards/headings are unaffected. */
@font-face {
	font-family: 'MN Serif';
	src: url('../fonts/source-serif-4-latin-variable.woff2') format('woff2');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'MN Serif';
	src: url('../fonts/noto-serif-devanagari-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

/* -- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	max-width: 100%;
	/* Belt-and-suspenders against any element bleeding past the viewport
	   on narrow phones (varies by device — this guarantees no horizontal
	   scroll regardless of the exact cause). `clip` is listed after
	   `hidden` so modern browsers use it — unlike `hidden`, it doesn't
	   break position:sticky on descendants (the header uses that), AS
	   LONG AS overflow-y is explicitly `visible` too: leaving it unset
	   makes the browser silently upgrade it to `auto`, which creates a
	   scroll container and breaks sticky anyway — confirmed by testing,
	   not just spec-reading. */
	overflow-x: hidden;
	overflow-x: clip;
	overflow-y: visible;
}
body {
	margin: 0;
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip; /* same clip-over-hidden reasoning as html, above */
	overflow-y: visible;
	font-family: var(--mn-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--mn-ink);
	background: var(--mn-white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mn-navy); text-decoration: none; }
a:hover { text-decoration: underline; }
/* In-content article links only (added 2026-09-11) - the site-wide `a`
   rule above stays navy (nav, buttons, header/footer, share bar, follow
   bar, etc. all reuse --mn-navy for chrome, not just link color, so it's
   deliberately left untouched). Scoped to .mn-single__body (the
   long-form article body) and .mn-read-also ("यह भी पढ़ें" / Also-Read
   boxes, rendered via the_content filter but outside .mn-single__body's
   own wrapper) so only genuine in-content links turn red. Reuses
   --mn-red (#D90429) - already the site's own defined --mn-accent token,
   already proven in production (breaking-news ticker etc.), not a new
   invented color. Same rule for default and hover state so the color
   reads as intentional, not a hover-only glitch. */
.mn-single__body a, .mn-read-also a { color: var(--mn-red); }
.mn-single__body a:hover, .mn-read-also a:hover { color: var(--mn-red); text-decoration: underline; }
/* Automatically-inserted internal links (News Writer AI, added 2026-09-11) -
   a subtle dotted underline so an auto-added link stays visually
   distinguishable from the author's own hand-typed links within the same
   article body, without a jarring color change or icon. Inherits
   whichever color applies to its surrounding context (now red inside
   .mn-single__body, per the rule above) - only the resting-state
   underline differs. */
.mn-auto-link { text-decoration: underline dotted; text-decoration-color: currentColor; text-underline-offset: 3px; }
.mn-auto-link:hover { text-decoration-style: solid; }
ul, ol { padding-left: 1.25em; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mn-font-head);
	line-height: 1.25;
	margin: 0 0 0.5em;
	font-weight: 700;
}
button { font-family: inherit; cursor: pointer; }

/* Every image gets an intrinsic box so late-loading images never shift
   layout (CLS). */
.mn-card__media img,
.mn-single__media img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

/* -- Accessibility utilities -------------------------------------------- */
.mn-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.mn-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--mn-navy);
	color: var(--mn-white);
	padding: 0.75em 1.25em;
}
.mn-skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

:focus-visible {
	outline: 3px solid var(--mn-navy);
	outline-offset: 2px;
}

/* -- Layout -------------------------------------------------------------- */
.mn-main {
	max-width: var(--mn-container);
	margin: 0 auto;
	padding: var(--mn-gap);
}
.mn-layout--with-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--mn-gap) * 1.5);
}
@media (min-width: 900px) {
	.mn-layout--with-sidebar:not(.mn-no-sidebar) {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
	}
}
/* A grid item's automatic minimum width defaults to its content's
   min-content size, not 0 - without this, a wide-but-meant-to-scroll-
   internally descendant (e.g. the Mandi page's price table, which
   relies on .blmf-table-wrap{overflow-x:auto} to contain its own
   horizontal scroll) forces the WHOLE grid column wide instead, pushing
   the entire page into horizontal scroll below the 900px breakpoint
   above. Found live on /mathura-mandi/ (2026-09-15) - present in both
   languages (not Hindi-specific: the table's own long unbreakable
   column text is what forces the min-content width, not this rule),
   confirmed via a corrected mobile-width test that properly re-applies
   the single-column grid instead of only faking the outer body width
   (the previously-known limitation - see the Mandi page's own 0.4.0
   changelog entry - was masking this, not just misreporting it clean). */
.mn-content,
.mn-sidebar {
	min-width: 0;
}

/* -- Breaking ticker ------------------------------------------------------ */
.mn-ticker {
	background: var(--mn-gray-100);
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius-lg);
	color: var(--mn-ink);
	display: flex;
	align-items: stretch;
	overflow: hidden;
	font-size: 0.875rem;
	max-width: var(--mn-container);
	margin: 0.75rem auto;
}
.mn-ticker__label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	padding: 0.5em 1.1em;
	background: var(--mn-red);
	color: var(--mn-white);
	position: relative;
	z-index: 1;
}
.mn-ticker__label::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--mn-white);
	animation: mn-cricket-pulse 1.4s ease-in-out infinite;
}
.mn-ticker__track {
	display: flex;
	align-items: center;
	gap: 3rem;
	white-space: nowrap;
	padding: 0.5em 1.25em;
	animation: mn-ticker-scroll 35s linear infinite;
	position: relative;
	z-index: 0;
}
.mn-ticker.is-paused .mn-ticker__track { animation-play-state: paused; }
.mn-ticker__item { color: var(--mn-ink); flex: 0 0 auto; font-weight: 500; }
.mn-ticker__pause {
	flex: 0 0 auto;
	margin-left: auto;
	background: transparent;
	border: none;
	color: var(--mn-gray-700);
	width: 2.25em;
	height: 2.25em;
	position: relative;
}
.mn-ticker__pause::before {
	content: "❚❚";
	font-size: 0.75em;
}
.mn-ticker.is-paused .mn-ticker__pause::before { content: "►"; }

@keyframes mn-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.mn-ticker__track { animation: none; overflow-x: auto; }
}

/* -- Utility bar: date + social, above the header ---------------------------- */
.mn-utility-bar { background: var(--mn-white); color: var(--mn-gray-700); font-size: 0.75rem; border-bottom: 1px solid var(--mn-gray-200); }
.mn-utility-bar__inner {
	max-width: var(--mn-container);
	margin: 0 auto;
	padding: 0.55em var(--mn-gap);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
/* min-width:0 is the actual fix here, not the overflow/text-overflow
   pair alone — a flex item's default min-width is `auto`, which for
   nowrap text resolves to the FULL unwrapped text width as the floor
   flexbox won't shrink below, so overflow:hidden/text-overflow:ellipsis
   silently never had a chance to engage on a narrow viewport without
   this. Confirmed via real rendered content, not a hypothetical: the
   live date string ("Sunday, 6 September 2026" / "रविवार, 6 सितम्बर
   2026" on /hi/) combined with the social-icon block, gap and padding
   is long enough to be a real risk at 320-375px — previously only
   invisible because of the site-wide overflow-x:clip safety net on
   html/body (see gotcha #3 in project memory), which hides the
   symptom, not the cause. */
.mn-utility-bar__date { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-utility-bar__social { display: flex; align-items: center; gap: 0.75em; flex: 0 0 auto; }
.mn-utility-bar__social a { color: var(--mn-gray-700); display: flex; }
.mn-utility-bar__social a:hover { color: var(--mn-red); }
.mn-utility-bar__social svg { width: 14px; height: 14px; }

/* -- Site header ----------------------------------------------------------- */
.mn-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--mn-white);
	border-bottom: 3px solid var(--mn-red);
	transition: box-shadow 0.2s ease;
}
.mn-site-header--stuck { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.mn-site-header__bar {
	max-width: var(--mn-container);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem var(--mn-gap);
	gap: 0.5rem 1rem;
}

.mn-site-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--mn-navy);
}
.mn-site-branding { flex-shrink: 0; }
.mn-site-branding img { max-height: 40px; width: auto; }
@media (min-width: 480px) {
	.mn-site-branding img { max-height: 48px; }
}

/* Actions never get squeezed/truncated by a tight logo — if the row
   can't fit both, it wraps to a second line instead (flex-wrap above)
   rather than compressing the language switcher's text. */
.mn-site-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
/* min-width/min-height floor to 44px regardless of the 2.1em intent —
   2.1em resolves to ~33.6px at the inherited 16px base font, under the
   44x44px minimum touch-target size. The em sizing is kept (so this
   still scales if a future font-size context change is introduced
   upstream), just floored so it can never render below the minimum. */
.mn-search-toggle, .mn-menu-toggle {
	background: transparent;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	width: 2.1em;
	height: 2.1em;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mn-ink);
	flex: 0 0 auto;
}
.mn-search-toggle svg { width: 16px; height: 16px; }

.mn-menu-toggle__bars,
.mn-menu-toggle__bars::before,
.mn-menu-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	position: relative;
}
.mn-menu-toggle__bars::before { content: ""; position: absolute; top: -6px; }
.mn-menu-toggle__bars::after { content: ""; position: absolute; top: 6px; }

.mn-search-panel { border-bottom: 1px solid var(--mn-gray-200); padding: 0.75rem var(--mn-gap); }
.mn-search-panel[hidden] { display: none; }
.mn-search-panel .mn-search-form { max-width: 320px; }

.mn-primary-nav {
	display: none;
	border-top: 1px solid var(--mn-gray-200);
}
.mn-primary-nav.is-open { display: block; }
.mn-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem var(--mn-gap);
	display: flex;
	flex-direction: column;
}
.mn-nav-menu a {
	display: block;
	padding: 0.6em 0;
	color: var(--mn-ink);
	font-weight: 600;
}
.mn-nav-menu a:hover { color: var(--mn-red); text-decoration: none; }

/* Mobile-menu login/account row — desktop keeps the icon button in the
   header bar instead (.mn-header-account-only above), so this is hidden
   there. */
.mn-nav-account {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 0.75em var(--mn-gap) 1em;
	border-top: 1px solid var(--mn-gray-200);
	margin-top: 0.5em;
}
.mn-nav-account__link { display: flex; align-items: center; gap: 0.5em; color: var(--mn-ink); font-weight: 600; padding: 0.4em 0; }
.mn-nav-account__link img { border-radius: 50%; }
.mn-nav-account__link--cta {
	background: var(--mn-navy);
	color: var(--mn-white);
	justify-content: center;
	border-radius: 999px;
	padding: 0.7em;
	font-weight: 700;
}
.mn-nav-account__link--cta:hover { background: var(--mn-navy-light); color: var(--mn-white); text-decoration: none; }
@media (min-width: 900px) {
	.mn-nav-account { display: none; }
}

@media (min-width: 900px) {
	.mn-menu-toggle { display: none; }
	.mn-primary-nav {
		display: block;
		border-top: none;
		background: var(--mn-navy);
	}
	.mn-nav-menu {
		max-width: var(--mn-container);
		margin: 0 auto;
		flex-direction: row;
		gap: 1.75rem;
		padding: 0 var(--mn-gap);
	}
	.mn-nav-menu a {
		padding: 0.75em 0;
		color: var(--mn-gray-100);
		font-size: 0.9375rem;
	}
	.mn-nav-menu a:hover { color: var(--mn-white); }
}

.mn-lang-switcher { font-size: 0.875rem; }

/* Floating instead of sitting in the header bar — keeps header/footer
   space free. scale() shrinks the whole TranslatePress-rendered widget
   uniformly regardless of its own internal CSS (more robust than trying
   to override TranslatePress's own CSS custom properties one by one). */
.mn-lang-switcher--floating {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%) scale(0.78);
	transform-origin: right center;
	z-index: 150;
	background: var(--mn-white);
	border-radius: 999px 0 0 999px;
	box-shadow: -2px 2px 10px rgba(13, 27, 42, .15);
	padding: 3px;
}
/* Mobile QA fix (2026-09-02): top:50% floats this over whatever content
   happens to be scrolled to viewport-center - harmless on desktop (empty
   sidebar space there), but confirmed sitting on top of "Braj Temple
   Stories" / "Vrindavan Stories" in the open mobile nav menu, and drifting
   over card content generally, on a single-column mobile layout. Docked to
   the bottom-left corner instead - NOT top-right: the utility bar's social
   icons and the breaking-news ticker both occupy the top of the page at
   rest and a top-anchored fixed element measurably overlapped them there
   (confirmed via getBoundingClientRect during the fix, not just visually).
   Bottom-left mirrors the News Tip button's own bottom-right corner dock
   (see .mn-news-tip-wrap below) - same small-corner-FAB treatment, opposite
   corner so the two never collide with each other. Still not provably
   clear of every possible scroll position on its own, so it's also hidden
   outright while the mobile nav menu or search panel is open (:has(), same
   browser-support bar already used elsewhere in this codebase, e.g.
   .anp-source-item:has() in the AI News Publisher admin CSS) -
   #mn-primary-nav.is-open / .mn-search-panel:not([hidden]) are the real
   open-state hooks assets/js/main.js's setupToggle() already sets, not
   new markup. */
@media (max-width: 899px) {
	.mn-lang-switcher--floating {
		top: auto;
		right: auto;
		bottom: 0.75rem;
		left: 0.75rem;
		transform: scale(0.72);
		transform-origin: bottom left;
		border-radius: 0 999px 999px 0;
		box-shadow: 2px 2px 10px rgba(13, 27, 42, .15);
	}
	body:has(#mn-primary-nav.is-open) .mn-lang-switcher--floating,
	body:has(.mn-search-panel:not([hidden])) .mn-lang-switcher--floating {
		display: none;
	}
}

/* -- Weather + date widget ---------------------------------------------- */
.mn-weather-widget {
	display: none;
	align-items: center;
	gap: 0.5em;
	font-size: 0.8125rem;
	color: var(--mn-gray-700);
	white-space: nowrap;
	margin-right: 0.5em;
}
.mn-weather-widget__icon { font-size: 1em; }
.mn-weather-widget__place { font-weight: 600; }
.mn-weather-widget__sep { color: var(--mn-gray-400); }
@media (min-width: 700px) {
	.mn-weather-widget { display: flex; }
}

/* -- Header account button (Login/Sign Up, or name+logout when signed in) - */
/* Icon-only, matching .mn-search-toggle/.mn-menu-toggle sizing — small
   footprint on mobile, plus a solid background so it stays legible
   against the weather-reactive header background just like those. */
/* Same 44px touch-target floor as .mn-search-toggle/.mn-menu-toggle
   above — see that rule's comment. This button is desktop-only
   (.mn-header-account-only, min-width:900px) today, but floored anyway
   so it stays correct if that ever changes. */
.mn-account-btn {
	background: var(--mn-navy);
	color: var(--mn-white);
	border-radius: 50%;
	width: 2.1em;
	height: 2.1em;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.mn-account-btn:hover { background: var(--mn-navy-light); color: var(--mn-white); text-decoration: none; }
/* Header icon only on desktop — mobile gets the equivalent links inside
   the hamburger menu (.mn-nav-account below) instead, so this doesn't
   compete for space with search/menu in the tight mobile header row. */
.mn-header-account-only { display: none; }
@media (min-width: 900px) {
	.mn-header-account-only { display: block; }
}
/* Solid pill background (not plain text) — the header's background
   changes with live weather (sun/moon/cloud graphics can sit right
   behind this corner), so account text needs guaranteed contrast
   against ANY of those, not just whichever one was visible when this
   was designed. */
.mn-account {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.75rem;
	white-space: nowrap;
	flex: 0 0 auto;
	background: var(--mn-white);
	border-radius: 999px;
	padding: 0.4em 0.9em;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.mn-account__avatar { display: block; line-height: 0; }
.mn-account__avatar img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
.mn-account__logout { color: var(--mn-gray-400); }
.mn-account__logout:hover { color: var(--mn-red); }
@media (max-width: 480px) {
	.mn-account__logout { display: none; }
}

/* -- Eyebrow / category badge ---------------------------------------------- */
.mn-eyebrow {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mn-white);
	background: var(--mn-accent);
	padding: 0.35em 0.7em;
	border-radius: 999px;
	margin-bottom: 0.6em;
}
.mn-eyebrow:hover { text-decoration: none; opacity: 0.85; }

/* Secondary category signal (article-pipeline SEO #6, 2026-09-22) - the same
   .mn-eyebrow shape/size, but deliberately lighter than the solid, per-
   category-accent-colored primary badge above: an outline instead of a
   filled background, muted gray instead of the category accent, and a
   normal (not 800) weight, so it never competes with the primary category
   for attention. mathuranow_secondary_category() in inc/template-tags.php
   decides whether one is shown at all. */
.mn-eyebrow--secondary {
	background: transparent;
	color: var(--mn-gray-700);
	border: 1px solid var(--mn-gray-200);
	font-weight: 600;
	margin-left: 0.4em;
}
.mn-eyebrow--secondary:hover { color: var(--mn-ink); border-color: var(--mn-gray-400); }

/* "Mathura" local-identity badge (mathuranow_local_badge(), 2026-09-15) -
   a second, separate signal next to the per-category eyebrow, shown on
   the homepage hero's guaranteed-local slots and on the local half of a
   non-local article's blended Related Stories, so the site's local-first
   hero/related-stories logic is legible to a reader, not just present in
   the query. Intentionally in the body text flow (not overlaid on the
   thumbnail like .mn-eyebrow can be) - keeps this purely additive, no
   change to the existing overlay/scrim positioning above. */
.mn-badge-local {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--mn-teal);
	background: var(--mn-teal-bg);
	padding: 0.3em 0.65em;
	border-radius: 999px;
	margin: 0 0 0.6em 0.4em;
	vertical-align: middle;
}
.mn-badge-local svg { flex: none; }
.mn-card--secondary .mn-badge-local { margin-bottom: 0; }

/* Overlaid on a card's thumbnail (featured hero card, standard grid
   cards) instead of sitting in the body text flow. A sibling wrapper
   around the media link and the badge link, not nested inside the media
   link itself - both stay independently clickable without invalid
   nested-anchor markup. */
.mn-card__media-wrap { position: relative; }

/* Scrim behind the overlaid badge - added after a real visual bug: many
   of this site's article thumbnails are AI-generated graphics with their
   OWN baked-in Hindi headline text and a small site-logo mark, both
   usually starting top-left - the exact corner the badge already sits
   in. A plain solid-color pill (what this was before) doesn't stop it
   from visually colliding with whatever's already printed into the image
   there. Checked several real examples for a corner that's reliably
   clear instead (top-right, bottom) - none were: some images have a
   second graphic element top-right, all of them run a text/branding
   strip across the full bottom. So this is a scrim, not a reposition -
   works the same regardless of what's actually in the image (a busy
   graphic, baked-in text, or a plain photo with nothing there at all),
   without needing to know its content. Sized to comfortably cover the
   badge's own footprint plus a little breathing room, corner-anchored
   and fading out rather than a hard-edged box, so it reads as a soft
   vignette rather than a visible rectangle pasted over the image. */
.mn-card__media-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: min(70%, 240px);
	height: 64px;
	background: var(--mn-media-scrim);
	z-index: 0;
	pointer-events: none;
}
.mn-card__media-wrap .mn-eyebrow {
	position: absolute;
	top: 12px;
	left: 12px;
	margin-bottom: 0;
	z-index: 1;
}

/* -- Entry meta --------------------------------------------------------- */
.mn-entry-meta {
	font-size: 0.8125rem;
	color: var(--mn-gray-700);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em;
}
.mn-entry-meta--compact { margin-top: 0.35em; }
.mn-entry-meta__sep { color: var(--mn-gray-400); }

/* -- Section headers ------------------------------------------------------ */
.mn-section { margin: 2.5rem 0; }
.mn-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 3px solid var(--mn-accent, var(--mn-navy));
	margin-bottom: 1rem;
	padding-bottom: 0.4rem;
}
.mn-section__title {
	font-size: 1.25rem;
	margin: 0 0 1rem;
	border-bottom: 3px solid var(--mn-accent, var(--mn-navy));
	padding-bottom: 0.4rem;
	display: inline-block;
}
.mn-section__header .mn-section__title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.mn-section__more { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }

/* Plain variant: fixed navy underline instead of the per-category accent
   color - used by sections with no category of their own (Daily Needs,
   Rashifal). */
.mn-section__header--plain,
.mn-section__title--plain {
	border-bottom-color: var(--mn-navy);
	border-bottom-width: 2px;
}

/* -- Hero cluster: big lead + secondary story list -------------------------- */
.mn-hero {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2rem;
}
.mn-hero__secondary {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (min-width: 900px) {
	.mn-hero {
		flex-direction: row;
		align-items: stretch;
	}
	.mn-hero__lead { flex: 1.5; min-width: 0; }
	.mn-hero__secondary {
		flex: 1;
		min-width: 0;
		gap: 1.25rem;
	}
	.mn-hero__secondary .mn-card--secondary { flex: 1; }
}

/* -- Hero / featured card -------------------------------------------------- */
.mn-card.mn-card--featured {
	display: grid;
	gap: 0;
	margin: 0;
	background: var(--mn-white);
	border-radius: var(--mn-radius-lg);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(149, 157, 165, 0.12);
}
.mn-card--featured .mn-card__media { margin-bottom: 0; }
/* 16:9, not the old 2:1 - matches the registered mathuranow-hero/-card
   image sizes (1200x675 / 600x338, both real 16:9 files, inc/setup.php)
   and Google Discover's own documented image guidance (Search Central's
   "Get on Discover": min 1200px wide, 16:9 recommended, important content
   in the center third since Discover may re-crop). The previous 2:1 box
   was a second, mismatched crop on top of an already-16:9 file - exactly
   the class of bug the 2.47.0 crop-safety fix (CHANGELOG.md) had to work
   around rather than resolve at the source. Fixing the ratio itself here
   removes the mismatch for good, for every image using this card - not
   another skip-crop workaround. */
.mn-card--featured .mn-card__media img { aspect-ratio: 16 / 9; border-radius: 0; }
.mn-card--featured .mn-card__body { padding: 1.375rem 1.5rem 1.625rem; }
.mn-card--featured .mn-card__title { font-size: 1.5rem; margin: 0.3em 0; }
.mn-card--featured .mn-card__excerpt { color: var(--mn-gray-700); display: none; }

@media (min-width: 700px) {
	.mn-card--featured .mn-card__excerpt { display: block; }
}
@media (min-width: 900px) {
	.mn-card--featured .mn-card__title { font-size: 1.875rem; }
}

/* -- Compact horizontal card: hero sidebar list, trending, etc. -------------
   The design's equivalent ("side" list) has no thumbnail at all, but this
   card's real thumbnail is genuine content already working today - kept
   rather than removed, restyled into the design's card-box treatment
   instead of dropped to chase pixel parity with a mockup that has less
   information than the real site. ------------------------------------- */
.mn-card.mn-card--secondary {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.875rem;
	background: var(--mn-white);
	border: 1px solid var(--mn-divider);
	border-radius: var(--mn-radius-lg);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	padding: 0.875rem;
}
.mn-card--secondary .mn-card__media {
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	margin-bottom: 0;
	border-radius: 8px;
}
.mn-card--secondary .mn-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mn-card--secondary .mn-card__body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.mn-card--secondary .mn-eyebrow { margin-bottom: 0; }
.mn-card--secondary .mn-card__title { font-size: 0.9375rem; line-height: 1.35; margin: 0; }

/* -- Card grid ------------------------------------------------------------- */
.mn-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mn-gap);
}
@media (min-width: 600px) {
	.mn-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.mn-card-grid:not(.mn-card-grid--compact) { grid-template-columns: repeat(3, 1fr); }
}

.mn-card {
	display: flex;
	flex-direction: column;
	background: var(--mn-white);
	border: 1px solid var(--mn-divider);
	border-radius: var(--mn-radius-lg);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}
.mn-card__media { display: block; border-radius: 0; overflow: hidden; margin-bottom: 0; }
.mn-card__body { padding: 1rem 1.125rem 1.125rem; }
.mn-card__title { font-size: 1.0625rem; margin: 0 0 0.3em; }
.mn-card__title a { color: var(--mn-ink); }
.mn-card__title a:hover { color: var(--mn-red); text-decoration: none; }

.mn-card--compact.mn-card {
	background: none;
	border: none;
	box-shadow: none;
}
.mn-card--compact .mn-card__body { padding: 0; }
.mn-card--compact .mn-card__title { font-size: 0.9375rem; }

/* Subtle lift on hover for any card with a linked thumbnail — a static
   page otherwise gives zero feedback that cards are interactive. */
.mn-card__media { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.mn-card:hover .mn-card__media:not(.mn-card--secondary .mn-card__media) {
	box-shadow: 0 6px 18px rgba(16, 35, 63, 0.16);
}
.mn-card:hover .mn-card__media img { transform: scale(1.03); }
.mn-card__media { overflow: hidden; }
.mn-card__media img { transition: transform 0.25s ease; }

/* -- Ad slots --------------------------------------------------------------- */
.mn-ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mn-radius);
	font-size: 0.75rem;
	color: var(--mn-gray-400);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
/* Auto ads (see inc/ad-slots.php) picks its own placement and doesn't
   use these reserved containers at all, so an empty one currently means
   "nothing is hooked to this position yet" — not "an ad is loading."
   Show nothing rather than a permanent "ADVERTISEMENT" label with no ad
   behind it (looked broken to readers, and unnecessary clutter during
   AdSense's approval review). The moment a real ad unit is hooked via
   add_action( 'mathuranow_ad_slot_{position}', ... ), the div stops
   being :empty and this rule no longer applies — the reserved
   min-height/margin/background then come back automatically so that ad
   doesn't cause a layout shift. */
.mn-ad-slot:empty {
	display: none;
}
.mn-ad-slot:not(:empty) {
	min-height: 90px;
	background: var(--mn-gray-100);
	border: 1px dashed var(--mn-gray-200);
	margin: 1.5rem 0;
}

/* -- Single post ------------------------------------------------------------ */
.mn-entry-header { margin-bottom: 0.5rem; }
.mn-entry-title {
	max-width: 22ch;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0.35em 0 0.4em;
	text-wrap: pretty;
}
.mn-entry-standfirst {
	max-width: 62ch;
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--mn-gray-700);
	text-wrap: pretty;
}
.mn-entry-header .mn-entry-meta {
	font-size: 0.875rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--mn-gray-200);
}
.mn-entry-meta__byline { font-weight: 700; color: var(--mn-ink); }
@media (min-width: 900px) {
	.mn-entry-title { font-size: 2.6875rem; }
	.mn-entry-standfirst { font-size: 1.1875rem; }
}

/* Bilingual typography: negative letter-spacing never applies to
   Devanagari, and Hindi line-height/display sizes get a little more
   room, per the design-handoff package's bilingual typography rule.
   TranslatePress sets the html lang attribute per URL (hi / hi-IN). */
html[lang^="hi"] .mn-entry-title {
	/* Devanagari conjuncts run wider per character than the Latin glyphs
	   the 22ch cap above was sized for — at the same character count a
	   Hindi headline was wrapping a line earlier than an equivalent
	   English one, sometimes into 4-5 short lines instead of a clean 2-3.
	   28ch (not "none") keeps a deliberate max measure for readability,
	   just sized for the wider script instead of silently inheriting the
	   Latin-tuned value. */
	max-width: 28ch;
	letter-spacing: 0;
	line-height: 1.33;
}
/* Same Devanagari-is-wider-per-character reasoning as .mn-entry-title
   above, extended here per the 2026-09-06 audit (the 2.51.0 fix only
   covered the headline itself, not the standfirst/excerpt right below
   it) — proportionally the same ~+27% ch increase (62 -> 79ch). */
html[lang^="hi"] .mn-entry-standfirst { max-width: 79ch; line-height: 1.68; }
@media (min-width: 900px) {
	html[lang^="hi"] .mn-entry-title { font-size: 2.5rem; }
}

/* -- Article audio ("Listen to this article", Web Speech API) ---------------- */
.mn-audio-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--mn-white);
	color: var(--mn-navy);
	border: 1.5px solid var(--mn-navy);
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
	margin: 0.75rem 0 0;
}
/* Hidden until a voice for the page language is confirmed (assets/js/main.js
   syncAvailability). While undecided it only turns invisible (visibility keeps the
   slot, so the layout does not jump when it appears); once no voice / no TTS is
   confirmed, data-voice=none removes it entirely. */
.mn-audio-btn[hidden] { display: inline-flex; visibility: hidden; }
.mn-audio-btn[data-voice="none"] { display: none; }
.mn-audio-btn:hover { background: var(--mn-navy); color: var(--mn-white); }
.mn-audio-btn[data-state="playing"],
.mn-audio-btn[data-state="paused"] { background: var(--mn-navy); color: var(--mn-white); }
.mn-audio-btn__icon { display: inline-flex; align-items: center; }

/* -- Share bar (single post + card variant) ----------------------------------- */
.mn-share-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0 1.25rem; }
.mn-share-bar__label { font-size: 0.875rem; font-weight: 700; color: var(--mn-gray-700); }
.mn-share-bar__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	color: var(--mn-white);
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,.08);
	transition: transform .12s ease, box-shadow .12s ease;
}
.mn-share-bar__link svg { width: 20px; height: 20px; }
.mn-share-bar__link:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.mn-share-bar__link--whatsapp { background: #25D366; }
.mn-share-bar__link--facebook { background: #1877F2; }
.mn-share-bar__link--twitter { background: #000000; }
.mn-share-bar__link--linkedin { background: #0A66C2; }
.mn-share-bar__link--copy { background: var(--mn-navy); }
.mn-share-bar__link--copy.is-copied { width: auto; padding: 0 1em; background: var(--mn-red); }
.mn-share-bar__copy-label { font-size: 0.8125rem; font-weight: 700; }

/* Compact variant (card thumbnails) - sized to sit comfortably inside the
   new card body padding (main.css .mn-card__body) alongside the eyebrow
   badge and meta line. */
.mn-share-bar--compact { gap: 0.35rem; margin: 0.65rem 0 0; }
.mn-share-bar--compact .mn-share-bar__link { width: 28px; height: 28px; box-shadow: none; }
.mn-share-bar--compact .mn-share-bar__link svg { width: 14px; height: 14px; }
.mn-share-bar--compact .mn-share-bar__link:hover { transform: none; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.mn-share-bar--compact .mn-share-bar__link--copy.is-copied { padding: 0 0.7em; }
.mn-share-bar--compact .mn-share-bar__copy-label { font-size: 0.75rem; }

/* -- "Prioritize on Google" CTA ----------------------------------------------- */
.mn-follow-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: linear-gradient(135deg, #ffe4c9, #ffcfa3);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}
.mn-follow-bar__copy { display: flex; flex-direction: column; gap: 0.15em; }
.mn-follow-bar__title { font-weight: 800; font-size: 1rem; color: var(--mn-navy); }
.mn-follow-bar__sub { font-size: 0.8125rem; color: var(--mn-gray-700); }
.mn-follow-bar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; flex: none; }
.mn-follow-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--mn-navy);
	color: var(--mn-white);
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.6em 1.15em;
	border-radius: 999px;
}
.mn-follow-bar__btn:hover { background: var(--mn-navy-light); color: var(--mn-white); text-decoration: none; }
.mn-follow-bar__btn--alexa { background: #00CAFF; }
.mn-follow-bar__btn--alexa:hover { background: #00b2e0; color: var(--mn-white); }
.mn-follow-bar__btn--whatsapp { background: #25D366; }
.mn-follow-bar__btn--whatsapp:hover { background: #1fb959; color: var(--mn-white); }
.mn-follow-bar__btn svg { flex: none; width: 18px; height: 18px; }
/* Alexa icon (2026-09-22, owner-supplied asset - assets/images/alexa-icon.png,
   used unmodified). A raster image, not the site's usual inline SVG glyphs, and
   not square (404x271) - height:auto keeps its real proportions, never
   stretched. The white badge behind it matches the same white-circle treatment
   already used for .mn-follow-bar__icon elsewhere in this bar. */
.mn-follow-bar__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mn-white);
	flex: none;
	overflow: hidden;
}
.mn-follow-bar__btn-icon img { width: 18px; height: auto; display: block; }
.mn-follow-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mn-white);
	color: var(--mn-navy);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	flex: none;
}
.mn-follow-bar__icon:hover { text-decoration: none; }
.mn-follow-bar__icon--whatsapp:hover { background: #25d366; color: var(--mn-white); }
/* Brand-compliance pass, 2026-09-22: the X glyph rendered in the site's own
   navy (.mn-follow-bar__icon's shared default color) before any interaction -
   a recolor of the mark, the exact thing every platform's brand guidelines
   (Meta's, WhatsApp's, and X's own) explicitly prohibit. Its own color
   (black, same value already used correctly for X in the share bar -
   .mn-share-bar__link--twitter) now applies at rest, not just on hover. */
.mn-follow-bar__icon--x { color: #000; }
.mn-follow-bar__icon--x:hover { background: #000; color: var(--mn-white); }
@media (max-width: 480px) {
	.mn-follow-bar { flex-direction: column; align-items: flex-start; }
	.mn-follow-bar__actions { width: 100%; }
}

/* Despite the name, this keyframe is NOT cricket-specific — it's the
   generic pulsing-dot animation the breaking-news ticker's own live
   indicator uses (.mn-ticker__label::before, earlier in this file).
   Kept when the cricket widget itself was removed (2026-09-06) because
   the ticker still depends on it; not renamed to avoid touching
   unrelated, still-in-use ticker CSS for a purely cosmetic reason. */
@keyframes mn-cricket-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* -- Homepage design-placeholder sections -----------------------------------
   Local bento row, Daily Needs, Rashifal - shapes/colors match the
   design-handoff package; content is an honest "not connected yet"
   state (see each template-part's own docblock for why nothing here is
   fabricated). Shares the --mn-radius-lg / shadow language introduced for
   cards in step (a). (The weather/disaster alert strip that used to share
   this section was removed 2026-10-01 along with the SACHET pipeline it
   displayed.) --------------------------------------------------------- */

.mn-bento-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 1.75rem 0;
}
@media (min-width: 700px) {
	.mn-bento-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
	.mn-bento-row { grid-template-columns: 1.2fr 1fr 1fr; }
	.mn-bento-card--civic { grid-column: span 2; }
}
.mn-bento-card {
	border-radius: var(--mn-radius-lg);
	padding: 1.375rem;
	background: var(--mn-gray-100);
	border: 1px solid var(--mn-gray-200);
}
.mn-bento-card--panchang { background: linear-gradient(180deg, #FFF9F0, var(--mn-white)); border-color: #F3E7D6; }
.mn-bento-card--temple { background: var(--mn-navy); border-color: var(--mn-navy); }
.mn-bento-card--weather { background: #F0F7F6; border-color: #DCEBE8; }
.mn-bento-card__link-title {
	display: block;
	margin: 0.6rem 0 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--mn-ink);
	line-height: 1.35;
}
.mn-bento-card__link-title:hover { color: var(--mn-red); }
.mn-bento-card__meta { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--mn-gray-400); }
.mn-bento-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.45rem 0;
	border-bottom: 1px dashed var(--mn-divider);
	font-size: 0.875rem;
}
.mn-bento-card__row:last-child { border-bottom: none; }
.mn-bento-card__row--dark { border-bottom-color: rgba(255, 255, 255, 0.12); }
/* --mn-gray-700 (~5.5:1 on white), replacing a hardcoded #8A7B66 that
   measured 4.11:1 - failed WCAG AA for this row-label text. Same fix
   class as the --mn-faint -> --mn-gray-700 swap on .mn-bento-card__title
   below, and the plugin-side --mnds-text-faint -> --mnds-text-muted swap
   on /mathura-mandi/ (commit df9cc36) - one consistent standard applied
   everywhere it was found, 2026-09-15. */
.mn-bento-card__row-label { flex: 1 1 auto; color: var(--mn-gray-700); }
.mn-bento-card__row--dark .mn-bento-card__row-label { color: rgba(255, 255, 255, 0.6); }
.mn-bento-card__row-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mn-ink); }
.mn-bento-card__row--dark .mn-bento-card__row-value { color: #FFD166; }
/* Colorful Panchang row icons (2026-09-07) — same color grouping as the
   full-page card (template-parts/panchang-header-card.php): day identity
   navy, celestial teal, the day's auspicious pick green, sun times amber.
   Scoped to rows that opt in via a --day/--celestial/--good/--sun
   modifier, so the Temple Aarti card's plain/dark rows are untouched. */
.mn-bento-card__row-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: currentColor;
	color: var(--mn-gray-400);
}
.mn-bento-card__row-icon svg { color: var(--mn-white); }
.mn-bento-card__row--day .mn-bento-card__row-icon { color: var(--mn-navy); }
.mn-bento-card__row--celestial .mn-bento-card__row-icon { color: var(--mn-teal); }
.mn-bento-card__row--sun .mn-bento-card__row-icon { color: var(--mn-amber); }
.mn-bento-card__row--good .mn-bento-card__row-icon { color: var(--mn-positive); }
.mn-bento-card__row--good .mn-bento-card__row-label,
.mn-bento-card__row--good .mn-bento-card__row-value { color: var(--mn-positive); }
/* Health & Blood Bank Directory rows (2026-09-15) - icon only, not the
   label/value text like --good does: a phone number in full red reads as
   an alarm/emergency siren, which this isn't (a directory listing, not
   an active alert) - the accent on the icon badge alone is enough to
   give the card its identity without the row itself looking alarming. */
.mn-bento-card__row--urgent .mn-bento-card__row-icon { color: var(--mn-red); }
/* Bolder stale-data notice (2026-09-15) - the previous #8A6A2A-on-#FFF4DF
   combination only just cleared WCAG AA (4.54:1) and read as washed-out
   pale yellow rather than a genuinely noticeable notice. --mn-ink on
   --mn-amber-bg comfortably passes (~6.8:1) while staying warm/tasteful
   rather than alarming - --mn-ink was chosen over a darkened amber tone
   specifically so this stays "noticeable, not alarming" per the design
   brief, not a second red/negative-toned warning color on the page. */
.mn-stale-chip {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--mn-ink);
	background: var(--mn-amber-bg);
	border: 1px solid var(--mn-amber);
	border-radius: 999px;
	padding: 0.35em 0.85em;
	margin: 0 0 0.6rem;
}
.mn-bento-card__weather-value {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--mn-teal);
}
.mn-bento-card__weather-condition { font-size: 0.875rem; font-weight: 500; color: var(--mn-gray-700); }
.mn-bento-card--civic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	background: var(--mn-white);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.mn-bento-card__title {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* --mn-gray-700 (~5.5:1 on white), replacing --mn-faint (#8A949E,
	   2.93:1 - failed WCAG AA for this bold-but-small heading text).
	   Applies to every card sharing this title class (Panchang, Weather,
	   Civic, PIB), not just Daily Needs - a real, valid fix wherever this
	   exact pattern occurs, found while auditing Daily Needs' colors
	   2026-09-15. Per-card accent colors (Mandi/Health) override this
	   below. */
	color: var(--mn-gray-700);
}
.mn-bento-card__title--dark { color: rgba(255, 255, 255, 0.6); }
.mn-bento-card__panchang-link { display: block; text-decoration: none; }
.mn-bento-card__panchang-link:hover .mn-bento-card__title { color: var(--mn-red); }
.mn-bento-card__body { margin: 0.6rem 0 0; max-width: 60ch; font-size: 0.9375rem; line-height: 1.5; color: var(--mn-gray-700); }
.mn-bento-card__placeholder { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--mn-faint); font-style: italic; }
.mn-bento-card__placeholder--dark { color: rgba(255, 255, 255, 0.5); }
.mn-bento-card__cta {
	flex: none;
	background: var(--mn-red);
	color: var(--mn-white);
	padding: 0.8em 1.4em;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
}
.mn-bento-card__cta:hover { background: var(--mn-navy); color: var(--mn-white); text-decoration: none; }

.mn-daily-needs__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 900px) {
	/* Market Today removed (no licence-clean real-time quote API) — two
	   cards now, so this row sizes itself instead of a fixed 3-up
	   template that would leave a permanent empty third column. */
	.mn-daily-needs__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
/* Balance fix (2026-09-15): the Mandi card (5 rows) and Health card (3
   real directory rows - genuinely only 3 blood banks in this district
   carry a phone number, confirmed live; padding it with placeholder rows
   would violate this project's own "no data = render nothing" rule) used
   to look lopsided purely because a shorter list left dangling empty
   space below it. Flex-column + the CTA's margin-top:auto below pins
   both cards' footer button to the same bottom edge regardless of row
   count, so the extra space above a shorter list reads as normal
   breathing room, not as "incomplete." The grid row's own default
   align-items:stretch already matched both cards' outer height; this
   fixes what happens INSIDE that box. */
.mn-daily-needs__card {
	display: flex;
	flex-direction: column;
	border-radius: var(--mn-radius-lg);
	padding: 1.25rem;
	background: var(--mn-white);
	border: 1px solid var(--mn-gray-200);
	border-top: 4px solid var(--mn-gray-200);
	box-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
}
.mn-daily-needs__card--pib { background: var(--mn-gray-100); box-shadow: none; border-top-color: var(--mn-gray-200); }
/* Per-card accent (2026-09-15) - existing tokens only. Mandi: --mn-positive
   (fresh-produce green, already used for "auspicious/good" semantics
   elsewhere in this same card family). Health: --mn-red, the site's own
   primary brand accent - a natural, universally-understood blood/medical
   association, not a new color introduced for this. Both pass WCAG AA as
   text on white (--mn-positive ~4.9:1, --mn-red ~5.3:1 - verified, not
   assumed) so the title itself can safely carry the color, not just a
   decorative element. */
.mn-daily-needs__card--mandi { border-top-color: var(--mn-positive); }
.mn-daily-needs__card--mandi .mn-bento-card__title { color: var(--mn-positive); }
.mn-daily-needs__card--health { border-top-color: var(--mn-red); }
.mn-daily-needs__card--health .mn-bento-card__title { color: var(--mn-red); }
/* Pins the footer CTA to the bottom of the flex-column card regardless
   of how many rows sit above it - the actual mechanism behind the
   balance fix above. Scoped to this section only (not a bare
   .mn-bento-card__cta rule) so the Civic bento card's own horizontal-flex
   use of the same class elsewhere is untouched. */
.mn-daily-needs__cta { margin-top: auto; align-self: flex-start; }
/* Compact "Today: X ₹price/quintal, Y ₹price/quintal" intro line
   (2026-09-15) - primary, readable content (the human-language answer
   this card exists to give), not a de-emphasized caption like
   .mn-daily-needs__source below - --mn-ink is the site's main dark
   text color, already established elsewhere as high-contrast. */
.mn-daily-needs__intro {
	margin: 0.35rem 0 0.6rem;
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--mn-ink);
}
/* Small, subdued source attribution — deliberately generic (never names
   the exact upstream API by name, so it isn't trivially copyable by a
   competitor), same tiny/faint treatment as the alert strip's own
   .mn-alert-strip__source. Reused by both the homepage Mandi card and
   the standalone /mathura-mandi/ page (braj-live-mandi-feeds-pro's own
   shortcode template) so the two stay visually consistent. */
.mn-daily-needs__source {
	margin: 0.6rem 0 0;
	font-size: 0.6875rem;
	letter-spacing: 0.01em;
	color: var(--mn-gray-400);
}

.mn-rashifal-card {
	border-radius: var(--mn-radius-lg);
	padding: 1.375rem;
	margin: 1.75rem 0;
	background: linear-gradient(180deg, #FFF9F0 0%, var(--mn-white) 100%);
	border: 1px solid #F3E7D6;
}

.mn-single__media { margin: 1rem 0; }
/* Override the site-wide card reset (aspect-ratio:16/9 + object-fit:cover)
   for the single-post hero specifically — that reset is right for grid
   thumbnails where uniform cells matter, but it was visually cropping
   hand-designed posters/banners a second time even after switching to
   the uncropped 'full' image size above. Show the whole image instead:
   natural ratio, capped so a portrait phone photo can't dominate the
   page, letterboxed (not stretched/cropped) if it doesn't fill the box. */
.mn-single__media img {
	aspect-ratio: auto;
	width: 100%;
	height: auto;
	max-height: 640px;
	object-fit: contain;
	background: var(--mn-gray-100);
	border-radius: var(--mn-radius);
}
/* Photo credit caption - real WordPress attachment Caption data
   (post_excerpt, set by News Writer AI's per-image credit field or edited
   later via that attachment's own Edit Media screen), rendered here by
   get_the_post_thumbnail_caption() below. Previously matched the same
   small/subdued treatment as .mn-daily-needs__source (the Mandi source
   line) - raised 2026-09-16 per explicit feedback that it read as too
   small/muted to work as a real "photo credit" line; deliberately
   diverges from that other element now; --mn-gray-700 + 0.8125rem is
   itself not a new value - it's the same "readable secondary text" pair
   already used sitewide for .mn-follow-bar__sub / .mn-share-bar__label,
   just applied here for the first time. font-weight 600 (not the
   share-bar label's 700) keeps it a clear step up from plain body text
   without reading as a heading. .mn-single__media__caption-link inherits
   color/no-underline-by-default so a linked caption (see single.php)
   looks identical to a plain-text one until hovered/focused - the link
   is a bonus affordance, not a visual change of its own. */
.mn-single__media figcaption { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--mn-gray-700); margin-top: 0.5em; }
.mn-single__media__caption-link { color: inherit; text-decoration: none; }
.mn-single__media__caption-link:hover,
.mn-single__media__caption-link:focus-visible { text-decoration: underline; }

/* -- Panchang full-article-page structured header (single.php, braj-panchang
   category only). Colorful redesign, 2026-09-07: each row is grouped by
   color + icon rather than one flat cream list — day identity (navy),
   celestial (teal), sun times (amber), the day's auspicious verdict
   (green), inauspicious periods (red) — all real --mn-* tokens, same
   grouping/colors as the homepage widget (.mn-bento-card--panchang) for
   consistency between the two surfaces. */
.mn-panchang-header {
	background: var(--mn-white);
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius-lg);
	padding: 1.5rem;
	margin: 1.5rem 0;
	max-width: 72ch;
	box-shadow: 0 4px 20px rgba(13, 27, 42, 0.06);
}
.mn-panchang-header__title {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--mn-navy);
}
.mn-panchang-header__subtitle {
	margin: 1.5rem 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mn-negative);
}
.mn-panchang-header__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
}
@media (min-width: 560px) {
	.mn-panchang-header__grid { grid-template-columns: 1fr 1fr; }
}
.mn-panchang-header__grid--caution { grid-template-columns: 1fr; }
@media (min-width: 560px) {
	.mn-panchang-header__grid--caution { grid-template-columns: repeat(3, 1fr); }
}
.mn-panchang-header__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.75rem;
	border-radius: var(--mn-radius);
	font-size: 0.9375rem;
	background: var(--mn-gray-100);
	border-left: 3px solid var(--mn-gray-200);
}
.mn-panchang-header__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	background: currentColor;
}
.mn-panchang-header__icon svg { color: var(--mn-white); position: relative; }
.mn-panchang-header__icon { color: var(--mn-gray-400); }
.mn-panchang-header__label { flex: 1 1 auto; color: var(--mn-gray-700); font-weight: 600; }
.mn-panchang-header__value { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mn-ink); text-align: right; }
/* Day identity: Vaar, Tithi — navy. */
.mn-panchang-header__row--day { border-left-color: var(--mn-navy); }
.mn-panchang-header__row--day .mn-panchang-header__icon { color: var(--mn-navy); }
/* Celestial: Nakshatra, Yoga — teal. */
.mn-panchang-header__row--celestial { border-left-color: var(--mn-teal); }
.mn-panchang-header__row--celestial .mn-panchang-header__icon { color: var(--mn-teal); }
/* Sun times: Sunrise, Sunset — amber/gold, the natural sun association. */
.mn-panchang-header__row--sun { border-left-color: var(--mn-amber); }
.mn-panchang-header__row--sun .mn-panchang-header__icon { color: var(--mn-amber); }
/* The day's auspicious verdict: Muhurat, and Karana when it's not a
   caution case — green, the site's existing "positive" token. */
.mn-panchang-header__row--good { background: var(--mn-positive-bg); border-left-color: var(--mn-positive); }
.mn-panchang-header__row--good .mn-panchang-header__icon { color: var(--mn-positive); }
.mn-panchang-header__row--good .mn-panchang-header__label,
.mn-panchang-header__row--good .mn-panchang-header__value { color: var(--mn-positive); }
/* Caution: Rahu Kaal/Yamaganda/Gulika Kaal, and Karana when it's Vishti/
   Bhadra — the site's existing "negative" token, a clearer stop/avoid
   signal than the amber now reserved for sun times above. */
.mn-panchang-header__row--caution { background: var(--mn-negative-bg); border-left-color: var(--mn-negative); }
.mn-panchang-header__row--caution .mn-panchang-header__icon { color: var(--mn-negative); }
.mn-panchang-header__row--caution .mn-panchang-header__label,
.mn-panchang-header__row--caution .mn-panchang-header__value { color: var(--mn-negative); }
.mn-panchang-header__flag {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--mn-negative);
	text-transform: none;
}

.mn-single__body {
	font-family: var(--mn-font-read);
	font-size: 1.0625rem;
	line-height: 1.62;
	color: #26313D;
	max-width: 72ch;
}
.mn-single__body p { margin: 0 0 1.25em; }
.mn-single__body img { border-radius: var(--mn-radius); }
.mn-single__body h2, .mn-single__body h3 { margin-top: 1.5em; }
@media (min-width: 900px) { .mn-single__body { font-size: 1.15625rem; } }
/* Same Devanagari-wider-per-character reasoning as .mn-entry-title/
   .mn-entry-standfirst above, extended here per the 2026-09-06 audit
   (proportionally the same ~+27% ch increase, 72 -> 92ch). */
html[lang^="hi"] .mn-single__body { max-width: 92ch; line-height: 1.8; }

/* Directory/Reference List content mode (2026-09-17) generates a raw
   <table> directly into post_content, with no wrapper markup of its
   own - unlike the Mandi price table, which has its own dedicated
   .blmf-table-wrap{overflow-x:auto} container (df9cc36). Without this,
   a table wider than .mn-single__body's own box (long ward-list/
   designation cells are the common real case) doesn't create a
   scrollbar - it silently overflows past its own column with the
   right-hand columns permanently clipped and unreachable, confirmed
   live on a real 390px viewport (right-hand columns invisible, no way
   to scroll to them - see CHANGELOG). display:block + overflow-x:auto
   on the table element itself achieves the same real containment as
   Mandi's wrapper div, without needing one - the table's own thead/
   tbody/tr/td keep their normal table layout inside this block box,
   this only changes how the OUTER table box participates in the page.
   Scoped to any table inside .mn-single__body so this protects any
   future AI-generated or manually-authored table too, not just
   Directory mode specifically. */
.mn-single__body table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	margin: 1.25em 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.mn-single__body caption {
	caption-side: top;
	text-align: left;
	font-weight: 600;
	color: var(--mn-navy);
	margin-bottom: 0.5em;
}
.mn-single__body th,
.mn-single__body td {
	padding: 0.65em 0.9em;
	border: 1px solid var(--mn-border-2);
	text-align: left;
	vertical-align: top;
}
.mn-single__body thead th {
	background: var(--mn-gray-100);
	color: var(--mn-navy);
	font-weight: 700;
	white-space: nowrap;
}
.mn-single__body tbody tr:nth-child(even) { background: var(--mn-gray-100); }

.mn-single__body blockquote {
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	border-left: 4px solid var(--mn-red);
	background: linear-gradient(90deg, #FFF5F6 0%, var(--mn-white) 100%);
	border-radius: 0 var(--mn-radius-lg) var(--mn-radius-lg) 0;
}
.mn-single__body blockquote p {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mn-navy);
}
.mn-single__body blockquote cite {
	display: block;
	margin-top: 0.6em;
	font-family: var(--mn-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.02em;
	color: var(--mn-faint);
}

.mn-read-also {
	background: var(--mn-gray-100);
	border-left: 4px solid var(--mn-red);
	padding: 0.75em 1em;
	margin: 1.25em 0 !important;
	font-size: 0.9375rem;
}
.mn-read-also__label {
	font-weight: 700;
	color: var(--mn-red);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.8125rem;
}
.mn-read-also a { font-weight: 600; }

.mn-tag-list { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1.5rem 0; }
.mn-tag {
	font-size: 0.8125rem;
	font-weight: 600;
	background: var(--mn-gray-100);
	border: 1px solid var(--mn-gray-200);
	border-radius: 999px;
	padding: 0.5em 0.9em;
	color: var(--mn-gray-700);
}
.mn-tag:hover { background: var(--mn-gray-200); text-decoration: none; }

.mn-related {
	margin-top: 2.5rem;
	border-top: none;
	padding-top: 0;
}
/* Red accent kicker bar before the section title — same "bold color
   block marks a section boundary" language already used for the
   ticker label and read-also strip, so this section reads as a clear
   premium divider rather than a plain heading dropped onto white. */
.mn-related__title {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.25rem;
	padding-bottom: 0.875rem;
	border-bottom: 2px solid var(--mn-navy);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--mn-navy);
}
.mn-related__title::before {
	content: "";
	flex: none;
	width: 5px;
	height: 1.2em;
	border-radius: 999px;
	background: var(--mn-red);
}
html[lang^="hi"] .mn-related__title { letter-spacing: 0; }

/* -- Author box -------------------------------------------------------------- */
.mn-author-box { margin-top: 2rem; }
.mn-author-box--archive { margin-top: 1rem; max-width: 640px; }
.mn-author-box__heading {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--mn-gray-700);
	margin: 0 0 0.75rem;
}
.mn-author-card {
	display: flex;
	gap: 1rem;
	background: var(--mn-gray-100);
	border-radius: var(--mn-radius);
	padding: 1.25rem;
}
.mn-author-card + .mn-author-card { margin-top: 0.75rem; }
.mn-author-card__avatar {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}
.mn-author-card__body { min-width: 0; }
.mn-author-card__name {
	display: inline-block;
	font-weight: 700;
	font-size: 1rem;
	color: var(--mn-navy);
	margin-bottom: 0.35rem;
}
a.mn-author-card__name:hover { color: var(--mn-red); text-decoration: none; }
.mn-author-card__rating {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #b8860b;
	margin: 0 0 0.4rem;
}
/* Distinguishes this author-level aggregate from the per-article
   "Rate this article:" widget elsewhere on the same page (mn-rating__label
   above) - muted/uppercase so it reads as a label, not part of the score
   itself. */
.mn-author-card__rating-label {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mn-gray-700);
	margin-inline-end: 0.35em;
}
.mn-author-card__bio {
	font-size: 0.875rem;
	color: var(--mn-gray-700);
	margin: 0 0 0.6rem;
	line-height: 1.6;
}
.mn-author-card__links { display: flex; gap: 0.5rem; }
.mn-author-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mn-white);
	color: var(--mn-navy);
	border: 1px solid var(--mn-gray-200);
}
.mn-author-card__link:hover { background: var(--mn-navy); color: var(--mn-white); }
@media (max-width: 480px) {
	.mn-author-card { flex-direction: column; }
}

/* -- Breadcrumbs ------------------------------------------------------------- */
.mn-breadcrumbs, .rank-math-breadcrumb {
	font-size: 0.8125rem;
	color: var(--mn-gray-700);
	margin-bottom: 1rem;
}

/* -- Archive header --------------------------------------------------------- */
.mn-archive-header { border-bottom: 3px solid var(--mn-accent); padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.mn-archive-title { font-size: 1.75rem; }
.mn-archive-description { color: var(--mn-gray-700); }

/* -- Day archive: count + date-picker ---------------------------------------
   Same flex-strip/pill structure as .mn-alert-strip (badge + text, rounded,
   shadowed), but --mn-teal/--mn-positive instead of the danger-red used for
   real disaster alerts - this is routine informational content, not a
   warning, and shouldn't visually compete with a genuine SACHET alert if
   both ever render on the same page. */
.mn-day-archive-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.5rem;
}
.mn-day-archive-meta__count {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--mn-positive);
	margin: 0;
}
.mn-date-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; }
.mn-date-picker__label { font-size: 0.8125rem; color: var(--mn-gray-700); font-weight: 600; }
.mn-date-picker__input {
	font: inherit;
	font-size: 0.875rem;
	padding: 0.45em 0.7em;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	background: var(--mn-white);
	color: var(--mn-ink);
}
.mn-date-picker__input:focus { outline: 2px solid var(--mn-accent); outline-offset: 1px; }

/* -- Homepage "today's news" badge -------------------------------------------
   Structurally matches .mn-alert-strip (pill + text, --mn-radius-lg, same
   shadow language), --mn-teal instead of the danger-red reserved for real
   alerts - this is good/neutral news, not a warning. */
.mn-today-badge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.125rem;
	margin: 0.75rem auto;
	max-width: var(--mn-container);
	border-radius: var(--mn-radius-lg);
	background: var(--mn-positive-bg);
	border: 1px solid #CDEAE0;
	box-shadow: 0 4px 20px rgba(149, 157, 165, 0.08);
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}
.mn-today-badge:hover { box-shadow: 0 6px 24px rgba(149, 157, 165, 0.14); text-decoration: none; }
.mn-today-badge__pill {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25em;
	background: var(--mn-teal);
	color: var(--mn-white);
	font-size: 0.9375rem;
	font-weight: 800;
	padding: 0.4em 0.6em;
	border-radius: 999px;
}
.mn-today-badge__text { font-size: 0.9375rem; font-weight: 600; color: var(--mn-navy); }

/* -- Sidebar / widgets -------------------------------------------------------- */
.mn-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.mn-widget {
	border: 1px solid var(--mn-divider);
	border-radius: var(--mn-radius-lg);
	padding: 1.125rem;
	background: var(--mn-white);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.mn-widget-title { font-size: 1rem; margin: 0 0 0.75em; text-transform: uppercase; letter-spacing: 0.03em; }

/* Baseline styling for plain core blocks dropped into a widget area
   (search, categories, lists) so they look intentional even without
   per-block customization. */
.mn-widget .wp-block-search__inside-wrapper {
	display: flex;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	overflow: hidden;
}
.mn-widget .wp-block-search__input {
	flex: 1;
	border: none;
	padding: 0.6em 0.8em;
	font-family: inherit;
	min-width: 0;
}
.mn-widget .wp-block-search__button {
	border: none;
	background: var(--mn-navy);
	color: var(--mn-white);
	padding: 0 1em;
	font-family: inherit;
	cursor: pointer;
}
.mn-widget ul { list-style: none; margin: 0; padding: 0; }
.mn-widget li { padding: 0.4em 0; border-bottom: 1px solid var(--mn-gray-100); }
.mn-widget li:last-child { border-bottom: none; }
.mn-widget h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.75em; }

/* -- Trending Now (native most-read list) ------------------------------------- */
.mn-trending { border-top: 3px solid var(--mn-red); }
.mn-trending__title { color: var(--mn-navy); }
.mn-trending__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.mn-trending__item {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.65em 0;
	border-bottom: 1px solid var(--mn-gray-100);
}
.mn-trending__item:last-child { border-bottom: none; }
.mn-trending__rank {
	flex: 0 0 auto;
	font-size: 1.25rem;
	font-weight: 800;
	font-style: italic;
	color: var(--mn-gray-200);
	line-height: 1;
	min-width: 1.1em;
}
.mn-trending__link { color: var(--mn-ink); font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
.mn-trending__link:hover { color: var(--mn-red); text-decoration: none; }

/* -- Footer -------------------------------------------------------------------- */
/* -- Daily digest email signup (footer) --------------------------------- */
.mn-digest-signup-wrap { background: var(--mn-navy-light); padding: 2rem var(--mn-gap); }
.mn-digest-signup { max-width: var(--mn-container); margin: 0 auto; text-align: center; }
.mn-digest-signup__title { margin: 0 0 0.4rem; color: var(--mn-white); font-size: 1.25rem; font-weight: 800; }
.mn-digest-signup__sub { margin: 0 0 1.25rem; color: rgba(255, 255, 255, 0.75); font-size: 0.9375rem; }
.mn-digest-signup__form { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-width: 560px; margin: 0 auto; }
.mn-digest-signup__input {
	flex: 1 1 180px;
	padding: 0.75em 1em;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	color: var(--mn-white);
	font-family: inherit;
	font-size: 0.9375rem;
	text-align: left; /* .mn-digest-signup centers the box, but that cascades
		into form-control text via inheritance — inputs need their own
		left alignment or typed/placeholder text renders centered, which
		reads as broken on mobile where the field spans the full width. */
	min-height: 44px; /* same 44px touch-target floor as .mn-search-toggle */
}
.mn-digest-signup__input::placeholder { color: rgba(255, 255, 255, 0.55); }
.mn-digest-signup__btn {
	flex: 0 0 auto;
	background: var(--mn-red);
	color: var(--mn-white);
	border: none;
	border-radius: 999px;
	padding: 0.75em 1.6em;
	font-weight: 700;
	font-size: 0.9375rem;
	min-height: 44px; /* same 44px touch-target floor as .mn-search-toggle */
}
.mn-digest-signup__btn:hover { background: var(--mn-white); color: var(--mn-red); }
.mn-digest-signup__notice { color: var(--mn-white); font-weight: 600; max-width: 480px; margin: 0 auto; }
@media (max-width: 480px) {
	.mn-digest-signup__form { flex-direction: column; }
	.mn-digest-signup__input, .mn-digest-signup__btn { width: 100%; }
	/* .mn-digest-signup__input's base rule sets flex: 1 1 180px, where 180px
	   is a WIDTH basis intended for the desktop row layout — flipping to
	   flex-direction: column re-interprets that same 180px as a HEIGHT
	   basis instead, inflating the field into a ~180px-tall oval. Reset the
	   basis to auto so height goes back to being padding/content-driven
	   (floored at 44px by the base rule) now that the axis has flipped. */
	.mn-digest-signup__input { flex: 0 0 auto; }
	/* 16px floor prevents iOS Safari's auto-zoom-on-focus, which otherwise
	   triggers below 16px and jolts the viewport when a visitor taps in. */
	.mn-digest-signup__input { font-size: 16px; }
}

/* -- Push-notification preferences (footer, only shown once actually
   subscribed — see setupPushPreferences() in assets/js/main.js) ------- */
.mn-push-prefs-wrap:has(> [hidden]) { display: none; } /* collapses the wrapper's own padding while the panel inside is still hidden */
.mn-push-prefs { background: var(--mn-gray-100); padding: 1.25rem var(--mn-gap); text-align: center; }
.mn-push-prefs__title { margin: 0 0 0.6rem; font-weight: 700; color: var(--mn-ink); font-size: 0.9375rem; }
.mn-push-prefs__option {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 1rem;
	font-size: 0.875rem;
	color: var(--mn-gray-700);
	cursor: pointer;
}
.mn-push-prefs__option input { width: 18px; height: 18px; accent-color: var(--mn-red); cursor: pointer; }

.mn-site-footer { background: var(--mn-navy); color: var(--mn-gray-200); margin-top: 3rem; border-top: 3px solid var(--mn-red); }
.mn-footer-widgets, .mn-footer-nav, .mn-social-links, .mn-site-footer__bottom {
	max-width: var(--mn-container);
	margin: 0 auto;
	padding: 1.25rem var(--mn-gap);
}
.mn-footer-widgets { display: grid; gap: 1.5rem; border-bottom: 1px solid var(--mn-navy-light); }
.mn-footer-widgets .mn-widget { border-color: var(--mn-navy-light); color: var(--mn-gray-200); max-width: 320px; }
@media (min-width: 700px) {
	.mn-footer-widgets { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
/* The core Search block widget hardcodes width:100% as an inline style
   (higher specificity than a plain class) — !important is the only way
   to cap it without editing the widget's own block markup. */
.mn-footer-widgets .wp-block-search__inside-wrapper { width: 100% !important; max-width: 320px !important; }

.mn-footer-nav-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}
.mn-footer-nav-menu a { color: var(--mn-gray-200); }
.mn-footer-nav-menu a:hover { color: var(--mn-white); }

.mn-social-links { display: flex; gap: 0.85rem; }
.mn-social-links__item {
	width: 2.5em; height: 2.5em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--mn-white);
	transition: background 0.2s ease, border-color 0.2s ease;
}
.mn-social-links__item:hover { background: var(--mn-red); border-color: var(--mn-red); text-decoration: none; }
.mn-social-links__item svg { display: block; width: 20px; height: 20px; }

.mn-site-footer__bottom {
	border-top: 1px solid var(--mn-navy-light);
	font-size: 0.8125rem;
}
.mn-site-footer__bottom p { margin: 0; }

/* -- Rating widget (native, see inc/rating.php — no AggregateRating schema) -------
   2.113.0: orange stars (outline until chosen), 44px targets, a clear thank-you line. The old stars were #EEF0F3 on a
   #F8F9FA bar (about 1.1:1), which read as an empty strip. */
.mn-rating {
	--rt-orange: #F26A1B;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.9rem;
	margin: 1.5rem 0;
	padding: 0.7rem 1.1rem;
	background: var(--mn-gray-100);
	border: 1px solid var(--mn-gray-200);
	border-left: 4px solid var(--rt-orange);
	border-radius: var(--mn-radius);
}
.mn-rating__label { flex: 1 1 100%; font-weight: 700; font-size: 0.9375rem; color: var(--mn-navy); }
.mn-rating__stars { display: inline-flex; gap: 0; }
.mn-rating__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--rt-orange);
	cursor: pointer;
	line-height: 0;
}
.mn-rating__star svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: transform 0.15s ease; }
.mn-rating__star.is-filled svg { fill: currentColor; }
.mn-rating__star:hover svg, .mn-rating__star:focus-visible svg { transform: scale(1.12); }
.mn-rating__star:focus-visible { outline: 2px solid var(--mn-navy); outline-offset: 1px; }
.mn-rating__star:disabled { cursor: default; }
.mn-rating__star:disabled:hover svg { transform: none; }
.mn-rating__summary { font-size: 0.875rem; font-weight: 600; color: var(--mn-gray-700); }
.mn-rating__summary:empty, .mn-rating__thanks:empty { display: none; }
.mn-rating__thanks { flex: 1 1 100%; font-size: 0.9375rem; font-weight: 700; color: var(--mn-navy); }
.mn-rating.is-done .mn-rating__thanks::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; margin-right: 0.5em; border-radius: 50%; background: var(--rt-orange); color: #fff; font-size: 0.8em; }
.mn-rating.has-error:not(.is-done) .mn-rating__thanks { color: var(--mn-red); }
@media (min-width: 600px) {
	.mn-rating__label { flex: 0 0 auto; }
	.mn-rating__summary { margin-left: auto; }
	.mn-rating__thanks { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .mn-rating__star svg { transition: none; } }
/* -- Auth pages: /login/ /register/ (native, see inc/membership.php) ------------- */
.mn-auth-page {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	padding: 3rem 1rem;
	flex-wrap: wrap;
}
.mn-auth-card {
	width: 100%;
	max-width: 420px;
	background: var(--mn-white);
	border: 1px solid var(--mn-gray-200);
	border-radius: 14px;
	padding: 2rem;
	border-top: 4px solid var(--mn-red);
}
.mn-auth-promo {
	width: 100%;
	max-width: 380px;
	padding: 1rem 0;
}
.mn-auth-promo__title { font-size: 1.5rem; color: var(--mn-navy); margin: 0 0 1em; line-height: 1.3; }
.mn-auth-promo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1em; }
.mn-auth-promo__list li {
	position: relative;
	padding-left: 1.6em;
	font-size: 0.9375rem;
	color: var(--mn-gray-700);
	line-height: 1.5;
}
.mn-auth-promo__list li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--mn-red);
	font-weight: 700;
}
@media (max-width: 780px) {
	.mn-auth-page { flex-direction: column-reverse; gap: 1.5rem; padding: 2rem 1rem; }
	.mn-auth-promo { max-width: 420px; text-align: center; }
	.mn-auth-promo__list { align-items: flex-start; text-align: left; }
}
.mn-auth-card__title { font-size: 1.375rem; margin: 0 0 0.35em; color: var(--mn-navy); }
.mn-auth-card__sub { font-size: 0.9375rem; color: var(--mn-gray-700); margin: 0 0 1.5em; }
.mn-auth-form p { margin: 0 0 1em; }
.mn-auth-form label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.35em; }
.mn-auth-form input[type="text"],
.mn-auth-form input[type="email"],
.mn-auth-form input[type="password"] {
	width: 100%;
	padding: 0.7em 0.85em;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	font-family: inherit;
	font-size: 1rem;
}
.mn-auth-form__submit {
	width: 100%;
	background: var(--mn-navy);
	color: var(--mn-white);
	border: none;
	border-radius: 999px;
	padding: 0.8em;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 0.5em;
}
.mn-auth-form__submit:hover { background: var(--mn-navy-light); }
.mn-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 100%;
	background: var(--mn-white);
	color: var(--mn-ink);
	border: 1px solid var(--mn-gray-200);
	border-radius: 999px;
	padding: 0.75em;
	font-weight: 600;
	font-size: 0.9375rem;
}
.mn-google-btn:hover { background: var(--mn-gray-100); color: var(--mn-ink); text-decoration: none; }
.mn-google-btn__hint { text-align: center; font-size: 0.75rem; color: var(--mn-gray-400); margin: 0.5em 0 0; }
.mn-auth-divider { display: flex; align-items: center; gap: 0.75em; margin: 1.1em 0; color: var(--mn-gray-400); font-size: 0.8125rem; }
.mn-auth-divider::before, .mn-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--mn-gray-200); }
.mn-auth-error {
	background: #fdecea;
	color: var(--mn-red);
	border: 1px solid #f5c6c2;
	border-radius: var(--mn-radius);
	padding: 0.75em 1em;
	font-size: 0.9375rem;
	margin: 0 0 1.25em;
}
.mn-auth-success {
	background: #eaf6ec;
	color: #1e7a34;
	border: 1px solid #c3e6cb;
	border-radius: var(--mn-radius);
	padding: 0.75em 1em;
	font-size: 0.9375rem;
}
.mn-auth-success a { color: #1e7a34; font-weight: 700; text-decoration: underline; }
.mn-auth-card__footer { margin: 1.5em 0 0; font-size: 0.9375rem; text-align: center; }

.mn-comment-login-note {
	font-size: 0.875rem;
	color: var(--mn-gray-700);
	background: var(--mn-gray-100);
	border-radius: var(--mn-radius);
	padding: 0.75em 1em;
	margin: 1rem 0;
}
.mn-comment-login-note a { font-weight: 700; }

/* -- Comments -------------------------------------------------------------------- */
.mn-comments { margin-top: 2.5rem; border-top: 1px solid var(--mn-gray-200); padding-top: 1.5rem; }
.mn-comment-list { list-style: none; margin: 0; padding: 0; }
.mn-comment-form input[type="text"],
.mn-comment-form input[type="email"],
.mn-comment-form input[type="url"],
.mn-comment-form textarea {
	width: 100%;
	max-width: 480px;
	padding: 0.6em;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	font-family: inherit;
	display: block;
	margin-bottom: 0.75em;
}
.mn-comment-form textarea { max-width: 100%; }

/* -- Comment anti-spam (native, see inc/comment-security.php) -------------------- */
.mn-comment-captcha label { display: block; font-weight: 600; margin-bottom: 0.35em; }
.mn-comment-captcha input { max-width: 140px; }
.mn-required { color: var(--mn-red); }
/* Honeypot: off-screen, not display:none — a real visitor (and screen
   reader, via aria-hidden on the wrapper) never encounters it, but it
   stays a real, visible-to-a-naive-bot form field rather than one some
   bots already know to skip. */
.mn-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -- Search form ------------------------------------------------------------------- */
.mn-search-form { display: flex; gap: 0.5em; max-width: 480px; }
.mn-search-form__input {
	flex: 1;
	padding: 0.6em 0.9em;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	font-family: inherit;
}
.mn-search-form__submit {
	background: var(--mn-navy);
	color: var(--mn-white);
	border: none;
	border-radius: var(--mn-radius);
	padding: 0 1.25em;
}

/* -- No-results / 404 ---------------------------------------------------------------- */
.mn-no-results { max-width: var(--mn-container); margin: 3rem auto; padding: 0 var(--mn-gap); text-align: center; }
.mn-no-results .mn-search-form { margin: 1.5rem auto; }

/* ======================================================================
   Weather-reactive header/footer theme
   Live Mathura weather (inc/template-tags.php) drives a body class —
   mn-weather-{clear|cloudy|rain|storm|snow|fog} + mn-weather-{day|night} —
   which these rules turn into a matching animated background + text
   color scheme. Toggle: Customize > Weather-Reactive Header/Footer.
   ====================================================================== */

/* NOT setting position:relative on .mn-site-header here — it's already
   position:sticky (set earlier, needed for the sticky scroll behaviour),
   and sticky already establishes a valid containing block for the
   absolutely-positioned decorative pseudo-elements below, same as
   relative would. Overwriting it with relative silently cancelled the
   sticky header site-wide — caught via computed-style inspection, not
   visually obvious. */
.mn-site-header,
.mn-site-footer { overflow: hidden; }
.mn-site-footer { position: relative; }
.mn-site-header { transition: background 1s ease; }
/* The decorative sun/rain/stars pseudo-elements below are absolutely
   positioned, which (per stacking-context rules) paints them above any
   plain static-flow content regardless of DOM order — so the actual
   nav/search/widgets/social-links need their own stacking context to
   stay on top and clickable/readable. */
.mn-site-header > * { position: relative; z-index: 1; }
.mn-site-footer > * { position: relative; z-index: 1; }

/* -- Clear / sunny day: warm sky gradient + glowing sun --------------- */
body.mn-weather-clear.mn-weather-day .mn-site-header {
	background: linear-gradient(135deg, #bfe3ff 0%, #ffe9b3 100%);
}
body.mn-weather-clear.mn-weather-day .mn-site-header::before,
body.mn-weather-clear.mn-weather-day .mn-site-footer::before {
	content: "";
	position: absolute;
	top: -26px; right: 50px;
	width: 80px; height: 80px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff6cc 0%, #ffd35c 60%, rgba(255,211,92,0) 75%);
	box-shadow: 0 0 36px 10px rgba(255,211,92,.5);
	animation: mn-sun-pulse 4s ease-in-out infinite;
	pointer-events: none;
}
body.mn-weather-clear.mn-weather-day .mn-site-footer::before { top: auto; bottom: -30px; width: 64px; height: 64px; }
@keyframes mn-sun-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.08); opacity: .85; }
}

/* -- Cloudy day: soft gradient + drifting clouds ----------------------- */
body.mn-weather-cloudy.mn-weather-day .mn-site-header {
	background: linear-gradient(135deg, #dfe7ee 0%, #c7d3de 100%);
}
body.mn-weather-cloudy.mn-weather-day .mn-site-header::before,
body.mn-weather-cloudy.mn-weather-day .mn-site-header::after,
body.mn-weather-cloudy .mn-site-footer::before {
	content: "";
	position: absolute;
	top: 16px; left: -140px;
	width: 70px; height: 24px;
	background: rgba(255,255,255,.85);
	border-radius: 50px;
	filter: blur(1px);
	animation: mn-cloud-drift 20s linear infinite;
	pointer-events: none;
}
body.mn-weather-cloudy.mn-weather-day .mn-site-header::after { top: 36px; width: 46px; height: 16px; animation-delay: 7s; }
body.mn-weather-cloudy .mn-site-footer::before { top: 22px; background: rgba(255,255,255,.12); animation-duration: 24s; }
@keyframes mn-cloud-drift {
	from { transform: translateX(0); }
	to { transform: translateX(calc(100vw + 200px)); }
}

/* -- Fog: hazy gradient + drifting mist --------------------------------- */
body.mn-weather-fog.mn-weather-day .mn-site-header {
	background: linear-gradient(135deg, #e9e9e9 0%, #d3d3d3 100%);
}
body.mn-weather-fog.mn-weather-day .mn-site-header::before,
body.mn-weather-fog .mn-site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
	animation: mn-fog-drift 8s ease-in-out infinite;
	pointer-events: none;
}
body.mn-weather-fog .mn-site-footer::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); }
@keyframes mn-fog-drift {
	0%, 100% { opacity: .3; transform: translateX(-10%); }
	50% { opacity: .7; transform: translateX(10%); }
}

/* -- Rain (day or night): dim gradient + falling rain, light text ------ */
body.mn-weather-rain .mn-site-header { background: linear-gradient(135deg, #4a5b73 0%, #6b7c93 100%); }
body.mn-weather-rain .mn-site-header::before,
body.mn-weather-rain .mn-site-footer::before,
body.mn-weather-storm .mn-site-header::before,
body.mn-weather-storm .mn-site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, transparent 0, transparent 8px, rgba(255,255,255,.35) 9px, transparent 10px);
	background-size: 40px 40px;
	animation: mn-rain-fall .4s linear infinite;
	pointer-events: none;
}
body.mn-weather-rain .mn-site-footer::before,
body.mn-weather-storm .mn-site-footer::before { background-image: repeating-linear-gradient(115deg, transparent 0, transparent 8px, rgba(255,255,255,.14) 9px, transparent 10px); }
@keyframes mn-rain-fall {
	from { background-position: 0 0; }
	to { background-position: -20px 40px; }
}

/* -- Storm: dark gradient + rain + occasional lightning flash ---------- */
body.mn-weather-storm .mn-site-header { background: linear-gradient(135deg, #2b2f3a 0%, #454b5c 100%); }
body.mn-weather-storm .mn-site-header::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mn-white);
	opacity: 0;
	animation: mn-lightning-flash 7s ease-in-out infinite;
	pointer-events: none;
}
@keyframes mn-lightning-flash {
	0%, 92%, 100% { opacity: 0; }
	93% { opacity: .5; }
	94% { opacity: 0; }
	95% { opacity: .28; }
	96% { opacity: 0; }
}

/* -- Snow (rare here, handled anyway): cool gradient + falling flakes -- */
body.mn-weather-snow .mn-site-header { background: linear-gradient(135deg, #eef3f8 0%, #d8e3ee 100%); }
body.mn-weather-snow .mn-site-header::before,
body.mn-weather-snow .mn-site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, var(--mn-white) 1px, transparent 1.5px);
	background-size: 28px 28px;
	animation: mn-snow-fall 3s linear infinite;
	pointer-events: none;
}
body.mn-weather-snow .mn-site-footer::before { background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.5px); }
@keyframes mn-snow-fall {
	from { background-position: 0 0; }
	to { background-position: 14px 28px; }
}

/* -- Night (any condition not already dark): navy sky + moon + stars --- */
body.mn-weather-night.mn-weather-clear .mn-site-header,
body.mn-weather-night.mn-weather-cloudy .mn-site-header,
body.mn-weather-night.mn-weather-fog .mn-site-header,
body.mn-weather-night.mn-weather-snow .mn-site-header {
	background: linear-gradient(135deg, #0a1128 0%, #1c3a63 100%);
}
/* Moon/stars only for clear/cloudy/fog/snow nights — deliberately NOT
   for rain/storm, which already claim ::before/::after for rain lines
   and lightning (a storm sky realistically hides the moon anyway). This
   must stay scoped the same way as the night background-gradient rule
   above, or it silently overrides the rain/storm effects whenever both
   are true at once (a stormy night, easy to miss without checking a
   real combined state — computed-style inspection caught it here). */
body.mn-weather-night.mn-weather-clear .mn-site-header::before,
body.mn-weather-night.mn-weather-cloudy .mn-site-header::before,
body.mn-weather-night.mn-weather-fog .mn-site-header::before,
body.mn-weather-night.mn-weather-snow .mn-site-header::before,
body.mn-weather-night.mn-weather-clear .mn-site-footer::before,
body.mn-weather-night.mn-weather-cloudy .mn-site-footer::before,
body.mn-weather-night.mn-weather-fog .mn-site-footer::before,
body.mn-weather-night.mn-weather-snow .mn-site-footer::before {
	content: "";
	position: absolute;
	top: -18px; right: 54px;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: radial-gradient(circle, #fdfdf0 0%, #e8e4c9 70%, rgba(232,228,201,0) 80%);
	box-shadow: 0 0 28px 8px rgba(253,253,240,.4);
	animation: mn-moon-glow 5s ease-in-out infinite;
	pointer-events: none;
}
body.mn-weather-night.mn-weather-clear .mn-site-footer::before,
body.mn-weather-night.mn-weather-cloudy .mn-site-footer::before,
body.mn-weather-night.mn-weather-fog .mn-site-footer::before,
body.mn-weather-night.mn-weather-snow .mn-site-footer::before { top: 14px; width: 40px; height: 40px; box-shadow: 0 0 20px 6px rgba(253,253,240,.3); }
@keyframes mn-moon-glow {
	0%, 100% { opacity: .9; }
	50% { opacity: 1; box-shadow: 0 0 38px 12px rgba(253,253,240,.55); }
}
body.mn-weather-night.mn-weather-clear .mn-site-header::after,
body.mn-weather-night.mn-weather-cloudy .mn-site-header::after,
body.mn-weather-night.mn-weather-fog .mn-site-header::after,
body.mn-weather-night.mn-weather-snow .mn-site-header::after,
body.mn-weather-night.mn-weather-clear .mn-site-footer::after,
body.mn-weather-night.mn-weather-cloudy .mn-site-footer::after,
body.mn-weather-night.mn-weather-fog .mn-site-footer::after,
body.mn-weather-night.mn-weather-snow .mn-site-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 20px 20px, var(--mn-white), transparent),
		radial-gradient(1px 1px at 70px 14px, var(--mn-white), transparent),
		radial-gradient(1.5px 1.5px at 120px 30px, var(--mn-white), transparent),
		radial-gradient(1px 1px at 170px 10px, var(--mn-white), transparent),
		radial-gradient(1px 1px at 230px 24px, var(--mn-white), transparent),
		radial-gradient(1.5px 1.5px at 290px 12px, var(--mn-white), transparent),
		radial-gradient(1px 1px at 340px 22px, var(--mn-white), transparent);
	background-repeat: repeat-x;
	background-size: 380px 40px;
	opacity: .7;
	animation: mn-twinkle 3s ease-in-out infinite;
	pointer-events: none;
}
@keyframes mn-twinkle {
	0%, 100% { opacity: .45; }
	50% { opacity: .9; }
}

/* -- Header text/UI recolor for the dark-background states ------------- */
body.mn-weather-rain .mn-site-header,
body.mn-weather-storm .mn-site-header,
body.mn-weather-night .mn-site-header {
	border-bottom-color: rgba(255,255,255,.15);
}
body.mn-weather-rain .mn-nav-menu a,
body.mn-weather-storm .mn-nav-menu a,
body.mn-weather-night .mn-nav-menu a,
body.mn-weather-rain .mn-site-title,
body.mn-weather-storm .mn-site-title,
body.mn-weather-night .mn-site-title,
body.mn-weather-rain .mn-weather-widget,
body.mn-weather-storm .mn-weather-widget,
body.mn-weather-night .mn-weather-widget {
	color: #f4f4f2;
}
body.mn-weather-rain .mn-nav-menu a:hover,
body.mn-weather-storm .mn-nav-menu a:hover,
body.mn-weather-night .mn-nav-menu a:hover {
	color: #ffd35c;
}
body.mn-weather-rain .mn-weather-widget__sep,
body.mn-weather-storm .mn-weather-widget__sep,
body.mn-weather-night .mn-weather-widget__sep {
	color: rgba(255,255,255,.5);
}
body.mn-weather-rain .mn-search-toggle,
body.mn-weather-rain .mn-menu-toggle,
body.mn-weather-storm .mn-search-toggle,
body.mn-weather-storm .mn-menu-toggle,
body.mn-weather-night .mn-search-toggle,
body.mn-weather-night .mn-menu-toggle {
	border-color: rgba(255,255,255,.3);
	color: #f4f4f2;
}
/* Small white backdrop so the (raster, fixed-color) logo stays legible
   no matter how dark the animated background behind it gets. */
body.mn-weather-rain .mn-site-branding,
body.mn-weather-storm .mn-site-branding,
body.mn-weather-night .mn-site-branding {
	background: rgba(255,255,255,.88);
	padding: 4px 10px;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.mn-site-header::before, .mn-site-header::after,
	.mn-site-footer::before, .mn-site-footer::after {
		animation: none !important;
	}
}

/* Every weather state's decorative header graphic (sun/cloud/rain/etc.,
   all the body.mn-weather-* .mn-site-header::before/::after rules above)
   is positioned with fixed pixel offsets from the header's edges — sized
   for the generous empty space on a wide desktop header. On a narrow
   mobile header that same space is filled with real UI (logo, account
   icon, search, menu), so those fixed offsets land the decoration
   directly on top of tappable buttons instead of empty space (user
   screenshot: the sun graphic overlapping the account/logo area).
   Purely decorative — hiding it below the point where the header
   actually gets tight is a safe, permanent fix rather than chasing each
   individual overlap. */
@media (max-width: 767px) {
	.mn-site-header::before,
	.mn-site-header::after {
		display: none !important;
	}
}

/* -- Contact Us page (page-contact-us.php) -------------------------------- */
.mn-contact-hero { max-width: 720px; margin: 0.5rem 0 2rem; }
.mn-contact-hero h1 { font-size: 2rem; margin: 0 0 0.5rem; color: var(--mn-navy); }
.mn-contact-hero p { color: var(--mn-gray-700); font-size: 1.0625rem; line-height: 1.6; }

.mn-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mn-gap);
	margin-bottom: 2.5rem;
}
@media (min-width: 900px) {
	.mn-contact-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

.mn-contact-card {
	background: var(--mn-white);
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	padding: 1.75rem;
	margin-bottom: var(--mn-gap);
}
.mn-contact-card h2 { font-size: 1.375rem; margin: 0 0 1rem; color: var(--mn-navy); }
.mn-contact-card h3 { font-size: 1.0625rem; margin: 0 0 1rem; color: var(--mn-navy); }
.mn-contact-side .mn-contact-card:last-child { margin-bottom: 0; }

.mn-contact-alert { padding: 0.85em 1em; border-radius: var(--mn-radius); font-size: 0.9375rem; margin-bottom: 1.25rem; }
.mn-contact-alert--ok { background: #e6f4ea; color: #1e6b34; border: 1px solid #b9dfc4; }
.mn-contact-alert--error { background: #fbe9e9; color: var(--mn-red); border: 1px solid #f0c3c3; }

.mn-contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mn-contact-field { margin-bottom: 1.1rem; }
.mn-contact-field label { display: block; font-weight: 600; font-size: 0.875rem; color: var(--mn-ink); margin-bottom: 0.35em; }
.mn-contact-field input,
.mn-contact-field select,
.mn-contact-field textarea {
	width: 100%;
	padding: 0.65em 0.85em;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--mn-ink);
	background: var(--mn-white);
}
.mn-contact-field input:focus,
.mn-contact-field select:focus,
.mn-contact-field textarea:focus { outline: none; border-color: var(--mn-navy); box-shadow: 0 0 0 3px rgba(16,35,63,0.1); }
.mn-contact-field textarea { resize: vertical; }

.mn-contact-submit {
	display: inline-flex;
	align-items: center;
	background: var(--mn-navy);
	color: var(--mn-white);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.75em 1.75em;
	border: none;
	border-radius: 999px;
	cursor: pointer;
}
.mn-contact-submit:hover { background: var(--mn-navy-light); }

.mn-contact-info-row { display: flex; flex-direction: column; gap: 0.15em; padding: 0.6em 0; border-bottom: 1px solid var(--mn-gray-100); font-size: 0.9375rem; }
.mn-contact-info-row:last-of-type { border-bottom: none; }
.mn-contact-info-k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mn-gray-400); font-weight: 700; }
.mn-contact-info-v { color: var(--mn-ink); }
a.mn-contact-info-v:hover { color: var(--mn-navy); }

.mn-contact-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin-top: 1.1rem;
	background: #25d366;
	color: var(--mn-white);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.7em 1em;
	border-radius: 999px;
}
.mn-contact-whatsapp:hover { background: #1fb959; color: var(--mn-white); text-decoration: none; }

.mn-contact-tags { display: flex; flex-wrap: wrap; gap: 0.5em; }
.mn-contact-tag { background: var(--mn-gray-100); color: var(--mn-gray-700); font-size: 0.8125rem; font-weight: 600; padding: 0.35em 0.85em; border-radius: 999px; }

.mn-contact-social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mn-contact-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mn-gray-100);
	color: var(--mn-navy);
}
.mn-contact-social a:hover { background: var(--mn-navy); color: var(--mn-white); }

.mn-contact-map { margin-bottom: 2.5rem; }
.mn-contact-map h2 { font-size: 1.375rem; margin: 0 0 1rem; color: var(--mn-navy); }
.mn-contact-map-frame { border-radius: var(--mn-radius); overflow: hidden; border: 1px solid var(--mn-gray-200); }
.mn-contact-map-frame iframe { width: 100%; height: 340px; border: 0; display: block; }

.mn-contact-faq { margin-bottom: 2.5rem; }
.mn-contact-faq h2 { font-size: 1.375rem; margin: 0 0 1rem; color: var(--mn-navy); }
.mn-contact-faq details {
	background: var(--mn-white);
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	padding: 0.9em 1.1em;
	margin-bottom: 0.6rem;
}
.mn-contact-faq summary { font-weight: 600; cursor: pointer; color: var(--mn-ink); }
.mn-contact-faq details p { margin: 0.75em 0 0.1em; color: var(--mn-gray-700); font-size: 0.9375rem; line-height: 1.6; }

/* -- Sitewide "News Tip" floating WhatsApp button (inc/news-tip-button.php) */
.mn-news-tip-wrap {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 140;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
}
.mn-news-tip-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: #25d366;
	color: var(--mn-white);
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.75em 1.1em;
	border-radius: 999px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
}
.mn-news-tip-btn:hover { background: #1fb959; color: var(--mn-white); text-decoration: none; }
.mn-news-tip-btn__icon { border-radius: 50%; object-fit: cover; }
/* Small speech-bubble tooltip above the button, shown only when a
   Customizer tooltip text is set (Appearance > Customize > WhatsApp
   News-Tip Button) - plain CSS, no JS, no dismiss interaction. */
.mn-news-tip-tooltip {
	position: relative;
	background: var(--mn-white);
	color: var(--mn-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	padding: 0.55em 0.9em;
	border-radius: 8px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
	max-width: 200px;
	text-align: right;
}
.mn-news-tip-tooltip::after {
	content: "";
	position: absolute;
	bottom: -6px;
	right: 20px;
	border-width: 6px 6px 0 6px;
	border-style: solid;
	border-color: var(--mn-white) transparent transparent transparent;
}
@media (max-width: 480px) {
	.mn-news-tip-btn { padding: 0.75em; }
	.mn-news-tip-btn__label { display: none; }
	.mn-news-tip-tooltip { max-width: 150px; font-size: 0.75rem; }
}
/* Mobile QA fix (2026-09-02): .mn-news-tip-wrap is position:fixed to the
   viewport corner, so on desktop's much wider layout it floats over empty
   sidebar space - never touching real content. On a single-column mobile
   layout there is no such empty margin, and the tooltip bubble (up to
   200px wide, several lines of text) was confirmed overlapping and
   visually cutting off card headlines that scrolled underneath it. Below
   900px the tooltip is dropped entirely - the round WhatsApp button alone
   (already icon-only under 480px per the rule above) stays as a small,
   standard corner FAB rather than a text block sitting on top of content. */
@media (max-width: 899px) {
	.mn-news-tip-wrap { right: 0.75rem; bottom: 0.75rem; }
	.mn-news-tip-tooltip { display: none; }
}

/* -- Video embed (inc/video-embed.php) ------------------------------------ */
.mn-video-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--mn-radius);
	margin: 1.5rem 0;
	background: var(--mn-gray-100);
}
.mn-video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.mn-video-embed__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
}
.mn-video-embed__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.85;
}
.mn-video-embed__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
}
.mn-video-embed__play:hover .mn-video-embed__icon path:first-child { fill-opacity: 1; }

/* -- Inline social embeds (inc/social-embeds.php) - X/Twitter blockquote
   + Facebook Page Plugin iframe, both editor-pasted mid-article. Same
   margin/radius language as .mn-video-embed above (this project's own
   established "how an embedded card sits in the article body" pattern)
   rather than a third, new visual treatment. Centered via flex + a
   narrower-than-column child, not the video embed's own padding-bottom
   aspect-ratio-box technique - that trick needs one FIXED ratio (16:9,
   true for every video), but a rendered tweet's own height varies per
   tweet (more text/images = taller), so there's no single percentage to
   pre-set here the way the video embed can. */
.mn-social-embed {
	margin: 1.5rem auto;
	max-width: 100%;
	display: flex;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--mn-radius);
}
.mn-social-embed--facebook iframe { max-width: 100%; border-radius: var(--mn-radius); }
/* Corrected 2026-09-17 - confirmed live this was targeting the wrong
   element. X's widgets.js doesn't style the ORIGINAL <blockquote> at
   all - it replaces it with a <div class="twitter-tweet-rendered">
   wrapping a real <iframe>, and sets that iframe's width/height as fixed
   INLINE styles (550x~850px, X's own oEmbed always returns width=550
   regardless of what maxwidth WordPress requests - confirmed via a
   direct request to publish.twitter.com/oembed with maxwidth=900,
   still got back 550). A hardcoded inline width never shrinks on a
   narrow viewport on its own, which is the actual "oversized"/mobile-
   overflow bug - confirmed live at a simulated 350px-wide container:
   the raw iframe stayed 550px wide (real horizontal overflow) until
   max-width:100% was added directly to it. Targeting the iframe
   (`.mn-social-embed--x iframe`, not the long-gone blockquote) is what
   actually reaches the element on screen either way - before widgets.js
   runs (rare, iframe already present in the raw oEmbed HTML) or after.
   Confirmed live this doesn't distort or clip anything: max-width:100%
   only constrains the OUTER iframe box - X's own script re-renders its
   INTERNAL content responsively to fit whatever width the iframe
   actually ends up at (also seen live, not assumed), so a narrower
   iframe still shows a complete, correctly laid-out card, not a
   cropped/squished one. */
.mn-social-embed--x iframe { max-width: 100%; }

/* ---------------------------------------------------------------
   My MathuraNow (account page) + Daily Digest preference card
   (2.83.0). Reuses the existing tokens; mobile-first.
   --------------------------------------------------------------- */
.mn-account-page { max-width: 640px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.mn-account-page--narrow { max-width: 560px; }
.mn-account-page__title { margin: 0 0 1rem; font-size: 1.5rem; color: var(--mn-navy); }
.mn-account-hero {
	display: flex; align-items: center; gap: 1rem;
	padding: 1.25rem; margin: 0 0 1rem;
	background: linear-gradient(135deg, var(--mn-navy) 0%, var(--mn-navy-light) 100%);
	border-radius: 16px; color: var(--mn-white);
}
.mn-account-hero__avatar img { display: block; width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.85); object-fit: cover; }
.mn-account-hero__who { min-width: 0; }
.mn-account-hero__eyebrow { margin: 0 0 0.15rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffb3bd; }
.mn-account-hero__name { margin: 0; font-size: 1.35rem; line-height: 1.25; color: var(--mn-white); overflow-wrap: anywhere; }
.mn-account-hero__email { margin: 0.2rem 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); overflow-wrap: anywhere; }

.mn-digest-card {
	background: var(--mn-white); border: 1px solid var(--mn-gray-200);
	border-top: 4px solid var(--mn-red); border-radius: 16px;
	padding: 1.25rem; box-shadow: 0 6px 24px rgba(13, 27, 42, 0.06);
}
.mn-digest-card__head { display: flex; gap: 0.85rem; align-items: flex-start; margin: 0 0 1rem; }
.mn-digest-card__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--mn-radius-lg); background: var(--mn-negative-bg); color: var(--mn-red); }
.mn-digest-card__title { margin: 0 0 0.2rem; font-size: 1.15rem; color: var(--mn-navy); }
.mn-digest-card__sub { margin: 0; font-size: 0.9375rem; color: var(--mn-gray-700); line-height: 1.5; }
.mn-digest-card__saved { margin: 0 0 1rem; padding: 0.6rem 0.85rem; border-radius: 10px; background: var(--mn-positive-bg); color: var(--mn-positive); font-weight: 700; font-size: 0.9rem; }
.mn-digest-card__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border: 0; border-top: 1px solid var(--mn-gray-200); margin: 0; min-width: 0; }
.mn-digest-card__row--stack { flex-direction: column; align-items: stretch; gap: 0.6rem; }
.mn-digest-card__label { font-weight: 700; color: var(--mn-ink); padding: 0; }
.mn-digest-card__note { margin: 0.25rem 0 1rem; font-size: 0.8125rem; color: var(--mn-gray-700); }
.mn-digest-card__save {
	width: 100%; min-height: 48px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--mn-navy); color: var(--mn-white); font-weight: 800; font-size: 1rem;
}
.mn-digest-card__save:hover { background: var(--mn-navy-light); }
.mn-digest-card__save:focus-visible, .mn-switch input:focus-visible + .mn-switch__track, .mn-seg__opt input:focus-visible + span { outline: 3px solid var(--mn-amber); outline-offset: 2px; }

/* ON/OFF switch (native checkbox underneath, so it works without JS) */
.mn-switch { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; min-height: 44px; }
.mn-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mn-switch__track { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--mn-gray-400); transition: background 0.2s; flex: none; }
.mn-switch__thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--mn-white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.mn-switch input:checked + .mn-switch__track { background: var(--mn-positive); }
.mn-switch input:checked + .mn-switch__track .mn-switch__thumb { transform: translateX(22px); }
.mn-switch__text { font-weight: 800; font-size: 0.8125rem; min-width: 2.2rem; }
.mn-switch__on { display: none; color: var(--mn-positive); }
.mn-switch input:checked ~ .mn-switch__text .mn-switch__on { display: inline; }
.mn-switch input:checked ~ .mn-switch__text .mn-switch__off { display: none; }
.mn-switch__off { color: var(--mn-gray-700); }

/* Language segmented control */
.mn-seg { display: flex; gap: 0.5rem; }
.mn-seg__opt { position: relative; flex: 1; cursor: pointer; }
.mn-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mn-seg__opt span { display: block; text-align: center; padding: 0.75rem 0.5rem; min-height: 48px; border: 2px solid var(--mn-gray-200); border-radius: var(--mn-radius-lg); font-weight: 700; color: var(--mn-ink); background: var(--mn-gray-100); }
.mn-seg__opt input:checked + span { border-color: var(--mn-navy); background: var(--mn-navy); color: var(--mn-white); }

.mn-account-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; }
.mn-account-links__item { flex: 1 1 140px; text-align: center; padding: 0.75rem 1rem; border: 1px solid var(--mn-gray-200); border-radius: var(--mn-radius-lg); font-weight: 700; background: var(--mn-white); }
.mn-account-links__item:hover { background: var(--mn-gray-100); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .mn-switch__track, .mn-switch__thumb { transition: none; } }

/* -- Single article: mobile first screen (2026-09-22) -----------------------
   Phones only (<600px); tablet/desktop rules above are untouched. Same
   content and DOM - a tighter headline block, and the Listen button + share
   bar move BELOW the hero image (article is a flex column here purely to use
   `order`; the header stays first, then the hero, then Listen/share, then
   everything else in its normal sequence). Small targets get an invisible
   hit-area via ::after (no visual change); the two fixed corner controls
   reach 44px. */
@media (max-width: 599px) {
	body.single-post .mn-single { display: flex; flex-direction: column; }
	body.single-post .mn-single > * { order: 5; min-width: 0; }
	body.single-post .mn-single > .mn-entry-header { order: 0; }
	body.single-post .mn-single > .mn-single__media { order: 1; }
	body.single-post .mn-single > .mn-audio-btn { order: 2; align-self: flex-start; }
	body.single-post .mn-single > .mn-share-bar { order: 3; }

	body.single-post .mn-breadcrumbs, body.single-post .rank-math-breadcrumb { margin-bottom: 0.5rem; }
	body.single-post .mn-entry-header { margin-bottom: 0; }
	body.single-post .mn-entry-title {
		max-width: none;
		font-size: 1.625rem;
		line-height: 1.2;
		margin: 0.2em 0 0.3em;
	}
	html[lang^="hi"] body.single-post .mn-entry-title { font-size: 1.5rem; line-height: 1.3; max-width: none; }
	body.single-post .mn-entry-standfirst {
		font-size: 0.9375rem;
		line-height: 1.45;
		margin-bottom: 0.6rem;
	}
	html[lang^="hi"] body.single-post .mn-entry-standfirst { line-height: 1.55; }
	body.single-post .mn-entry-header .mn-entry-meta { padding-top: 0.45rem; }
	body.single-post .mn-single__media { margin: 0.6rem 0; }

	/* Listen + share now sit under the hero. */
	body.single-post .mn-audio-btn { min-height: 44px; margin: 0.25rem 0 0; }
	body.single-post .mn-single > .mn-share-bar { margin: 0.5rem 0 1rem; }
	body.single-post .mn-single > .mn-share-bar .mn-share-bar__link { width: 44px; height: 44px; }

	/* Invisible hit-area growth for inline text targets. */
	body.single-post .mn-eyebrow,
	body.single-post .mn-entry-meta__byline a,
	body.single-post .mn-breadcrumbs a,
	body.single-post .rank-math-breadcrumb a { position: relative; }
	body.single-post .mn-eyebrow::after,
	body.single-post .mn-entry-meta__byline a::after,
	body.single-post .mn-breadcrumbs a::after,
	body.single-post .rank-math-breadcrumb a::after {
		content: "";
		position: absolute;
		inset: -14px -4px;
	}
	body.single-post .mn-eyebrow::after { inset: -10px -4px; }

	/* Fixed corner controls: news-tip to 44px (the language pill is already >=44px), and room at the very end of the
	   page so they never sit on the last content. */
	body.single-post .mn-news-tip-btn { min-width: 44px; min-height: 44px; justify-content: center; }
	body.single-post .mn-main { padding-bottom: 4.5rem; }
}

/* -- Daily Digest, compact article placement (2026-09-22) ---------------------
   Same markup/classes as the footer form (mathuranow_digest_signup_form),
   just as a rounded card in the article flow; colors are the footer's own. */
.mn-digest-signup--inline {
	background: var(--mn-navy-light);
	border-radius: 14px;
	padding: 1.25rem;
	margin: 1.5rem 0;
}
.mn-digest-signup--inline .mn-digest-signup__title { font-size: 1.0625rem; }
.mn-digest-signup--inline .mn-digest-signup__sub { margin-bottom: 0.9rem; font-size: 0.875rem; }
@media (max-width: 599px) {
	.mn-follow-bar__btn { min-height: 44px; }
	.mn-follow-bar__icon { width: 44px; height: 44px; }
	.mn-digest-signup--inline { padding: 1rem; }
}

/* Reserved ad space (2.85.0, CLS): mathuranow_ad_slot() adds --reserved only
   when a real unit is hooked into the slot; an empty slot stays display:none. */
.mn-ad-slot--reserved { min-height: 280px; }
@media (max-width: 720px) { .mn-ad-slot--reserved { min-height: 250px; } }

/* -- Event banner (inc/event-banner.php, 2.92.0) ---------------------------
   Original design from the theme's own tokens - no logo or artwork from the
   event's organisers. The card is server-rendered static text, so its box is
   final in the first paint; min-height is a floor that keeps even a very short
   translation from collapsing it (no layout shift). The optional image
   variant carries width/height + aspect-ratio for the same reason. */
.mn-event-banner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	box-sizing: border-box;
	min-height: 120px;
	margin: 1rem 0 1.25rem;
	padding: 1.1rem 1.4rem 1.1rem 1.6rem;
	border-radius: var(--mn-radius-lg);
	background: linear-gradient(120deg, var(--mn-navy) 0%, var(--mn-navy-light) 100%);
	color: var(--mn-white);
	overflow: hidden;
	contain: layout;
}
.mn-event-banner::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: linear-gradient(180deg, var(--mn-red), var(--mn-amber));
}
.mn-event-banner::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -70px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 159, 62, 0.22) 0%, rgba(224, 159, 62, 0) 70%);
	pointer-events: none;
}
.mn-event-banner__body { position: relative; flex: 1 1 320px; min-width: 0; }
.mn-event-banner__eyebrow {
	margin: 0 0 0.2rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mn-amber);
}
.mn-event-banner__title {
	margin: 0 0 0.25rem;
	font-family: var(--mn-font-head);
	font-size: clamp(1.2rem, 2.4vw, 1.6rem);
	font-weight: 800;
	line-height: 1.22;
}
.mn-event-banner__meta { margin: 0 0 0.2rem; font-size: 0.92rem; line-height: 1.4; color: rgba(255, 255, 255, 0.94); }
.mn-event-banner__credit { margin: 0; font-size: 0.78rem; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.mn-event-banner__actions { position: relative; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mn-event-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.55rem 1.15rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
.mn-event-banner__btn--primary { background: var(--mn-red); border-color: var(--mn-red); color: var(--mn-white); }
.mn-event-banner__btn--ghost { border-color: rgba(255, 255, 255, 0.75); color: var(--mn-white); }
.mn-event-banner__btn:hover, .mn-event-banner__btn:focus-visible { text-decoration: none; filter: brightness(1.1); outline: 2px solid var(--mn-white); outline-offset: 2px; }
.mn-event-banner__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mn-event-banner--image { display: block; padding: 0; background: var(--mn-gray-100); color: var(--mn-ink); min-height: 0; }
.mn-event-banner--image::before, .mn-event-banner--image::after { display: none; }
.mn-event-banner__image { display: block; line-height: 0; }
.mn-event-banner__image img { display: block; width: 100%; height: auto; }
.mn-event-banner__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0.9rem; }
.mn-event-banner--image .mn-event-banner__credit { color: var(--mn-gray-700); }
@media (max-width: 720px) {
	.mn-event-banner { min-height: 150px; padding: 1rem 1rem 1rem 1.3rem; }
	.mn-event-banner__actions { width: 100%; }
	.mn-event-banner__btn { flex: 1 1 calc(50% - 0.3rem); padding-left: 0.6rem; padding-right: 0.6rem; text-align: center; }
}

/* -- Header EN | हिन्दी toggle (2.101.0, approved on /design-preview/) -------
   Mobile-first: a compact two-segment pill inside the header bar next to
   search/menu; each segment is a 44px touch target. The active language is the
   navy pill. Never wraps: below 480px the bar stays on one line and the logo
   (not the actions) is what gives way. */
.mn-langtoggle {
	display: inline-flex;
	flex: 0 0 auto;
	white-space: nowrap;
	background: #eef1f4;
	border-radius: 999px;
}
.mn-langtoggle__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.5rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	color: #4b5563;
	text-decoration: none;
}
.mn-langtoggle__opt:hover { color: #0f1b2d; text-decoration: none; }
.mn-langtoggle__opt.is-active,
.mn-langtoggle__opt.is-active:hover { background: #0f1b2d; color: #fff; }
.mn-langtoggle__opt:focus-visible { outline: 2px solid var(--mn-red); outline-offset: 2px; }
/* The logo can be docked dead-centre by a Customizer setting (position:absolute); on a phone that would
   sit on top of the wider actions group, so while the toggle is present the logo sits in the flow at
   the left and shrinks to fit instead (tablet+ has room for both). */
@media (max-width: 899px) {
	body.mn-has-langtoggle .mn-site-header__bar { flex-wrap: nowrap; justify-content: space-between; gap: 0.5rem; }
	body.mn-has-langtoggle .mn-site-branding { position: static; transform: none; flex: 0 1 auto; min-width: 0; padding: 2px 6px; }
	body.mn-has-langtoggle .mn-site-branding img { max-width: 100%; height: auto; }
}
@media (max-width: 479px) {
	body.mn-has-langtoggle .mn-site-header__bar { padding-left: 12px; padding-right: 12px; }
	body.mn-has-langtoggle .mn-site-header__actions { gap: 0.25rem; }
}
@media (min-width: 768px) {
	.mn-langtoggle__opt { min-width: 48px; padding: 0 0.75rem; font-size: 0.875rem; }
}