/*
 * سینگل مقاله (single.php، شاخهٔ عمومی) — یک ستون وسط‌چین به سبک l-learn، اکتبر ۲۰۲۶.
 * فقط روی مقاله‌های معمولی و (از اکتبر ۲۰۲۶) سینگل خبر بارگذاری می‌شود (inc/single-post-helpers.php،
 * nz_single_uses_article_layout()); قانون‌های خبر در انتهای فایل زیر .zm-single--news هستند.
 *
 * هر قانون با :is(#nz-blog-content,body) و کلاس ریشهٔ دوبار تکرارشده شروع می‌شود تا
 * ویژگی شناسه داشته باشد و از قانون‌های قالب ببرد. !important فقط جایی آمده که قالب
 * خودش !important دارد:
 *   - h1..h3: اندازه/ارتفاع خط داخل <section> و همهٔ تیترها زیر 640px، و وزن همهٔ تیترها
 *     (inc/theme-settings.php، wp_head 999).
 *   - nav و nav a (Menu Styles) و button (Button Styles با وزن 4,0,1): font-size/font-weight؛
 *     دکمه‌ها با :not(#zm-x#zm-x#zm-x#zm-x) از آن می‌برند.
 * از <aside> و <footer> عمداً استفاده نشده: «aside a / footer a {color … !important}» قالب
 * رنگ لینک‌ها را خنثی می‌کرد.
 *
 * Variant C «گرافیت» (owner's choice, October 2026): neutral graphite surfaces (page #121316,
 * card/surface #1c1d21, border #2c2e33, separator #3a3c42), body text #d6d7da (12.91:1),
 * secondary #b2b5bb (9.04:1), headings #e6e7e9 (15.01:1); the teal accents are unchanged.
 * Type scale (memory/persian-typography.md), Vazirmatn with real weights (400/500/600/700):
 *   meta/caption 14/1.7 · UI (buttons, chips, list titles) 16/1.75 weight 500 · body 19/1.85 ·
 *   lead (author name, end-section titles) 20/1.7 weight 500 · H1 36/1.35 700 → 30/1.35 under 768px.
 * Reading measure: the text column is 760px on desktop, the same as the LBank single (l-learn.com,
 * owner, 6 Oct 2026; was 627px ≈ 33em at 19px under variant C);
 * phones keep their full width (343px at 375).
 * Every end-of-article section title sits on the lead rung, whatever its element: «مطالب مرتبط»
 * (.zm-sec-t), the ad box title (.zm-endad__title) and «نظرات» (comments-blog.php, text-xl).
 * Everything inside a button or a link row is on the UI rung; a secondary word in it («مشاهده»)
 * is set apart by colour and weight 400, never by a smaller size.
 * line-height:1 survives only on the avatar/logo initials, where it centres one glyph in a box.
 *
 * --zm-header-h را اسکریپت فهرست مطالب (inc/article-toc.php) روی <html> می‌گذارد؛ اینجا
 * عمداً تعریف نشده تا مقدار اندازه‌گیری‌شده را نپوشاند.
 */

/* ---------- root + tokens ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single {
	--zm-bg: #121316;
	--zm-panel: #1c1d21;
	--zm-card: rgba(28, 29, 33, 0.8);
	--zm-hover: #2c2e33;
	--zm-line: #2c2e33;
	--zm-line-strong: #3a3c42;
	--zm-h1: #e6e7e9;
	--zm-head: #e6e7e9;
	--zm-text: #d6d7da;
	--zm-text-2: #c4c6ca;
	--zm-muted: #b2b5bb;
	--zm-faint: #8c9097;

	/* GROWTH-TEAL palette (October 2026); names follow the palette judge's :root block.
	   States do not stack and are written :hover → :focus-visible → :active. */
	--zm-btn-outline-fg: #e6e7e9;
	--zm-btn-outline-border: #80838a;
	--zm-btn-outline-layer-hover: rgb(230 231 233 / 0.08);
	--zm-btn-outline-layer-focus: rgb(230 231 233 / 0.1);
	--zm-btn-outline-layer-pressed: rgb(230 231 233 / 0.1);
	--zm-btn-pill-fg: #d6d7da;
	--zm-btn-pill-border: #80838a;
	--zm-btn-pill-layer-hover: rgb(214 215 218 / 0.08);
	--zm-btn-pill-layer-focus: rgb(214 215 218 / 0.1);
	--zm-btn-pill-layer-pressed: rgb(214 215 218 / 0.1);
	--zm-link: #5eead4;
	--zm-link-hover: #5eead4;
	--zm-focus: #99f6e4;
	--zm-focus-gap: #121316;
	/* category pill: teal tint over the page (#121316 → #152628 / #173636); text 12.43:1 at rest, 10.30:1 on hover */
	--zm-pill-text: #99f6e4;
	--zm-pill-bg: rgba(45, 212, 198, 0.1);
	--zm-pill-bg-hover: rgba(45, 212, 198, 0.18);
	--zm-pill-line: rgba(45, 212, 198, 0.6); /* 4.29:1 on the page, 3.62:1 on its own fill (0.4 was 2.55:1) */

	display: block;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 56px;
	background: var(--zm-bg);
	color: var(--zm-text);
	direction: rtl;
	letter-spacing: 0;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* two-colour ring (WCAG C40): light ring + dark gap band; visible on the teal CTA and the LBank yellow */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__col a:focus-visible,
:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__col button:focus-visible {
	outline: 2px solid var(--zm-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--zm-focus-gap);
}

/* The global banner's <a> sits in a rounded overflow:hidden box (nz_render_global_banner),
   which clips any ring drawn on the link itself, the browser default included, so a focused
   banner showed nothing. The box carries the same two-colour ring instead. */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__banner-in div:has(> a:focus-visible) {
	outline: 2px solid var(--zm-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--zm-focus-gap);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-i {
	width: 20px;
	height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-i--fill {
	width: 16px;
	height: 16px;
	fill: currentColor;
	stroke: none;
}

/* ---------- global banner (unchanged function, keeps its full width) ---------- */

/* Banner = exactly the article column's width (owner, Oct 2026): same max-width and
   gutters as .zm-single__col, so its edges line up with the body text (760px on desktop). */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__banner {
	max-width: 808px;
	margin-inline: auto;
	padding: 16px 24px 0;
}

@media (max-width: 767px) {
	:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__banner {
		padding-inline: 16px;
	}
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__banner-in {
	position: relative;
}

/* Phones: a label above the banner (a 1440×89 banner is only ~21px tall there, an
   overlay would cover it). From 768px up: a corner badge on the banner itself. */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-adtag {
	display: inline-block;
	margin-bottom: 6px;
	padding: 0 8px;
	border-radius: 6px;
	background: rgba(18, 19, 22, 0.72);
	border: 1px solid rgba(196, 198, 202, 0.35);
	color: #d6d7da;
	font-size: 14px;
	line-height: 1.7;
	pointer-events: none;
}

@media (min-width: 768px) {
	:is(#nz-blog-content, body) .zm-single.zm-single .zm-adtag {
		position: absolute;
		top: 8px;
		inset-inline-start: 8px;
		z-index: 1;
		margin: 0;
	}
}

/* ---------- the column ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__col {
	--zm-gutter: 24px;
	display: block;
	/* 760px of text + 2 × 24px gutters = the LBank single's 760px block (owner, 6 Oct 2026;
	   variant C had 627px, before that 712px). Keep .zm-single__banner at the same max-width. */
	max-width: 808px;
	min-width: 0;
	margin-inline: auto;
	padding: 16px var(--zm-gutter) 0;
	/* The theme sets «article {contain: layout style paint}». Paint/layout containment
	   would clip anything that leaves the column and turn it into the containing block
	   of fixed-position descendants (TOC sheet fallback, lightbox) — not wanted here. */
	contain: none;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__banner + .zm-single__col {
	padding-top: 0;
}

@media (max-width: 767px) {
	:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__col {
		--zm-gutter: 16px;
	}
}

/* ---------- breadcrumb ---------- */

/* a <nav>: the theme's Menu Styles set size and weight (600) on nav and nav a with !important */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-crumb {
	margin: 0 0 18px;
	font-size: 14px !important;
	line-height: 1.7;
	font-weight: 400 !important;
	color: var(--zm-muted);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-crumb__in {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	white-space: nowrap;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-crumb a {
	flex: none;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--zm-text-2);
	text-decoration: none;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-crumb a:hover {
	color: var(--zm-link-hover);
	text-decoration: underline;
	text-underline-offset: 5px;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-crumb .separator {
	flex: none;
	color: var(--zm-faint);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-crumb .last {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--zm-muted);
}

/* Phones: «خانه / عنوان» — the category is the pill right below. */
@media (max-width: 767px) {
	:is(#nz-blog-content, body) .zm-single.zm-single .zm-crumb__in > a:not(:first-child),
	:is(#nz-blog-content, body) .zm-single.zm-single .zm-crumb__in > a:not(:first-child) + .separator {
		display: none;
	}
}

/* ---------- head: pill, H1, byline ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__head {
	display: grid;
	gap: 14px;
	justify-items: start;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-pill {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--zm-pill-line);
	background: var(--zm-pill-bg);
	color: var(--zm-pill-text);
	font-size: 14px;
	line-height: 1.7;
	text-decoration: none;
	transition: background-color 0.15s;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-pill:hover {
	background: var(--zm-pill-bg-hover);
	color: var(--zm-pill-text);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__title {
	margin: 0;
	font-size: 36px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: var(--zm-h1);
	text-wrap: balance;
}

/* Byline: one flat row at every width, [photo] name | date · minutes · comments.
   It wraps only when it really cannot fit (a 320px phone), and then no line may
   start or end with a separator. So the separators take no room in the row: each
   part after the first draws its «|» or «·» absolutely positioned in the column
   gap before it (--zm-by-gap: 18px, 12px on phones). A part that opens a wrapped
   line has that separator outside the row's start edge, where the clip cuts it
   off. overflow-clip-margin lets a 2px+2px focus ring through; the separators
   sit at half the gap past the edge (the 3px «·» starts 4.5px+ out at 12px), so
   they stay clipped. Browsers without overflow:clip use the hidden fallback and
   its 4px block padding. No negative inline margins, so nothing sticks out of
   the container. At 360px the row holds photo + name + «به‌روزرسانی: ۱۳ خرداد
   ۱۴۰۵» + «۱۸ دقیقه» (≈325px); a longer month or a comment count wraps. */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-by {
	--zm-by-gap: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px var(--zm-by-gap);
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	overflow: clip;
	overflow-clip-margin: 4px;
	padding-block: 4px;
	margin-block: -4px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--zm-muted);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-by > * {
	position: relative;
	min-width: 0;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-by__meta {
	white-space: nowrap;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-by > * + *::before {
	content: "·";
	content: "·" / "";
	position: absolute;
	top: 0;
	inset-inline-start: calc(-1 * var(--zm-by-gap));
	width: var(--zm-by-gap);
	color: var(--zm-faint);
	text-align: center;
}

/* name | date: a 1×16 rule centred in the gap instead of the dot */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-by > .zm-by__who + *::before {
	content: "";
	top: 50%;
	inset-inline-start: calc(var(--zm-by-gap) / -2 - 0.5px);
	width: 1px;
	height: 16px;
	margin-top: -8px;
	background: var(--zm-line-strong);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-by__who {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	color: var(--zm-link);
	font-weight: 500;
	text-decoration: none;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-by__who:hover {
	color: var(--zm-link-hover);
	text-decoration: underline;
	text-underline-offset: 5px;
}

:is(#nz-blog-content, body) .zm-single.zm-single a.zm-by__meta {
	color: var(--zm-muted);
	text-decoration: none;
}

:is(#nz-blog-content, body) .zm-single.zm-single a.zm-by__meta:hover {
	color: var(--zm-text-2);
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ---------- author photo: the <img> itself, printed only when the author has a real one ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single .zm-av {
	display: block;
	flex: none;
	max-width: none;
	margin: 0;
	border-radius: 999px;
	box-shadow: 0 0 0 2px #2c2e33;
	object-fit: cover;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-av--28 {
	width: 28px;
	height: 28px;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-av--56 {
	width: 56px;
	height: 56px;
}

/* ---------- cover ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__cover {
	margin: 22px 0 0;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__cover img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 16px;
}

/* ---------- body ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__body {
	display: block;
	margin-top: 24px;
}

/* Body text lines up with the H1. The theme gives .prose 16/24px inline padding
   because .prose can become an overflow-x container (tables) and overflow clips
   Persian glyph tails at the padding box; a matching negative margin keeps that
   breathing room while the text stays flush with the column. Size and leading are
   the body rung (19/1.85 in Vazirmatn, the theme setting that p/div take with
   !important), unitless so lists, tables and quotes that inherit it keep the ratio
   at their own size (leading-8 = 2rem inherited as a fixed 32px). */
:is(#nz-blog-content, body) .zm-single.zm-single #nz-blog-content > .prose {
	max-width: none;
	margin-inline: -8px;
	padding-inline: 8px;
	font-size: 1.1875rem;
	line-height: 1.85;
	color: #d6d7da;
}

/* Links in running article text are underlined at rest (palette rule 2). Their colour is the
   theme option nz_content_link_color (teal #5eead4 by default since variant C,
   #nz-content-link-colors), which is only ~1.03:1 against the body text #d6d7da, so the
   underline is what marks them (WCAG 1.4.1): 1px at 50% teal (3.90:1 on the page), offset
   0.3em to clear Persian descenders (0.36em), skip-ink on; hover makes it solid. Classed links
   (buttons, brand cards, Elementor widgets) keep their own styling. */
:is(#nz-blog-content, body) .zm-single.zm-single #nz-blog-content > .prose :is(p, li, td, th, dd, blockquote, figcaption) a:not([class]) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(94, 234, 212, 0.5);
	text-underline-offset: 0.3em;
	text-decoration-skip-ink: auto;
}

:is(#nz-blog-content, body) .zm-single.zm-single #nz-blog-content > .prose :is(p, li, td, th, dd, blockquote, figcaption) a:not([class]):hover {
	text-decoration-color: currentColor;
}

/* a <nav>, like the breadcrumb: the theme's Menu Styles force size and weight on it and its links */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--zm-line);
	font-size: 14px !important;
	line-height: 1.7;
	font-weight: 400 !important;
	color: var(--zm-muted);
}

/* Page links sit among the muted text and the current page number (#b2b5bb): the teal is
   only 1.39:1 against them, so they are always underlined (55% teal = 4.49:1 on the page);
   hover only makes the underline solid. The current page is a <span aria-current="page">. */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-pages a {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--zm-link);
	text-decoration: underline;
	text-decoration-color: rgba(94, 234, 212, 0.55);
	text-underline-offset: 5px;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-pages a:hover {
	color: var(--zm-link-hover);
	text-decoration-color: currentColor;
}

/* ---------- end blocks ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single .zm-end {
	display: grid;
	gap: 28px;
	margin-top: 40px;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-end > * {
	min-width: 0;
	margin-block: 0;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-end__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--zm-line);
	font-size: 14px;
	line-height: 1.7;
	color: var(--zm-muted);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-end__dates > * + *::before {
	content: "·";
	margin-inline: 8px;
	color: var(--zm-faint);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-end__disc {
	margin: -14px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--zm-muted);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-tags a {
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid var(--zm-line-strong);
	color: var(--zm-text-2);
	font-size: 14px;
	line-height: 1.7;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-tags a:hover {
	background: var(--zm-hover);
	color: var(--zm-head);
}

/* End-section titles («مطالب مرتبط»), sized as small section labels on the lead rung (20/1.7)
   at every width, not the article's h2 rung, so they never compete with the text's own headings.
   Since October 2026 they are <p class="zm-hx …"> (owner request: the outline is the H1 plus the
   article's own headings) and their <section> is named through aria-labelledby. The !important
   stays: it is what kept them at this size while they were <h2> (the theme forces 30px on h2 in
   <section>, 24px on phones), and the values below are the whole of their look either way. */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-sec-t {
	margin: 0 0 12px;
	font-size: 20px !important;
	line-height: 1.7 !important;
	font-weight: 500 !important;
	color: var(--zm-head);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-related__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--zm-line);
	border-radius: 12px;
	background: var(--zm-card);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-related__item:hover {
	border-color: var(--zm-line-strong);
	background: var(--zm-hover);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-related__t {
	color: var(--zm-head);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-related__m {
	color: var(--zm-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* sidebar ad widget, moved under the related posts (nz_single_end_ads) */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad {
	display: grid;
	/* minmax(0,…): an auto track grew to a long ad name's nowrap width (483px on a 375px phone),
	   so the row's ellipsis never engaged and the page scrolled sideways */
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--zm-line);
	border-radius: 16px;
	background: var(--zm-card);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* an end-section title like «مطالب مرتبط» (.zm-sec-t): lead rung 20/1.7, weight 500 */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__title {
	margin: 0;
	color: var(--zm-head);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__label {
	justify-self: start;
	padding: 0 8px;
	border: 1px solid var(--zm-line-strong);
	border-radius: 6px;
	color: var(--zm-text-2);
	font-size: 14px;
	line-height: 1.7;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 8px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--zm-text-2);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* External ads render the row as a <button> (nz_ads_click_wrapper), which the theme's Button
   Styles rule (4,0,1) sizes 14px/600 with !important. Kept in its own rule: the :not() weight
   on the row rule above would also outrank its :hover background. */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__row:not(#zm-x#zm-x#zm-x#zm-x) {
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__row:hover {
	background: var(--zm-hover);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__row:focus-visible {
	outline: 2px solid var(--zm-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--zm-focus-gap);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__logo {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #fff;
	object-fit: contain;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__logo--none {
	background: var(--zm-hover);
	color: var(--zm-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* part of the row's button/link text, so the row's UI rung (16/1.75); colour and weight 400
   keep it secondary to the name */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-endad__go {
	flex: none;
	margin-inline-start: auto;
	color: var(--zm-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-end > .nz-single-bottom-ad {
	margin-block: 0;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-endbox {
	padding: 16px;
	border: 1px solid var(--zm-line);
	border-radius: 16px;
	background: var(--zm-card);
}

/* share row */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-share__label {
	margin-inline-end: 4px;
	color: var(--zm-muted);
	font-size: 14px;
	line-height: 1.7;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--zm-btn-pill-border);
	background: none;
	color: var(--zm-btn-pill-fg);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

/* the copy button is a <button>: the theme's Button Styles rule (4,0,1) sizes it 14px/600 with
   !important, so it rendered smaller and bolder than the two <a> next to it */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-share__btn:not(#zm-x#zm-x#zm-x#zm-x) {
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-share__btn:hover {
	background-color: var(--zm-btn-pill-layer-hover);
	color: var(--zm-btn-pill-fg);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-share__btn:focus-visible {
	background-color: var(--zm-btn-pill-layer-focus);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-share__btn:active {
	background-color: var(--zm-btn-pill-layer-pressed);
}

/* author box: one text column; a second (photo) column only when the author has a photo */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-author {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 6px 16px;
	padding: 24px;
	border: 1px solid var(--zm-line);
	border-radius: 16px;
	background: var(--zm-card);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author--photo {
	grid-template-columns: auto minmax(0, 1fr);
}

/* photo spans eyebrow + name (+ role) */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-author--photo > .zm-av {
	grid-row: span 2;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author--photo.zm-author--role > .zm-av {
	grid-row: span 3;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author--photo > :is(.zm-author__eyebrow, .zm-author__name, .zm-author__role) {
	grid-column: 2;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__eyebrow {
	margin: 0;
	color: var(--zm-muted);
	font-size: 14px;
	line-height: 1.7;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__name {
	margin: 0;
	font-size: 20px !important;
	line-height: 1.7 !important;
	font-weight: 500 !important;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__name a {
	color: var(--zm-head);
	text-decoration: none;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__name a:hover {
	color: var(--zm-link-hover);
	text-decoration: underline;
	text-underline-offset: 5px;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__role {
	margin: 0;
	color: var(--zm-text-2);
	font-size: 14px;
	line-height: 1.7;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__bio {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	color: var(--zm-text-2);
	font-size: 18px;
	line-height: 1.8;
	unicode-bidi: plaintext;
}

/* Links inside the bio sentence: the teal is 1.00:1 against the bio text (#c4c6ca),
   so they are always underlined; hover only makes the underline solid. */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__more {
	color: var(--zm-link);
	text-decoration: underline;
	text-decoration-color: rgba(94, 234, 212, 0.55);
	text-underline-offset: 5px;
	white-space: nowrap;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__more:hover {
	color: var(--zm-link-hover);
	text-decoration-color: currentColor;
}

/* a URL in the bio, shown as its host («zoomarz.com») */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__url {
	color: var(--zm-link);
	text-decoration: underline;
	text-decoration-color: rgba(94, 234, 212, 0.55);
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__url:hover {
	color: var(--zm-link-hover);
	text-decoration-color: currentColor;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__soc {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__soc a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--zm-btn-outline-border);
	color: var(--zm-text-2);
	transition: background-color 0.15s, color 0.15s;
}

/* outlined icon buttons: label colour stays, a translucent state layer composites over the card */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__soc a:hover {
	background-color: var(--zm-btn-outline-layer-hover);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__soc a:focus-visible {
	background-color: var(--zm-btn-outline-layer-focus);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-author__soc a:active {
	background-color: var(--zm-btn-outline-layer-pressed);
}

/* comments card (inner markup: comments-blog.php) */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments {
	padding: 24px 16px;
	border: 1px solid var(--zm-line);
	border-radius: 16px;
	background: var(--zm-card);
}

@media (min-width: 768px) {
	:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments {
		padding: 24px;
	}
}

/* Comment form (comments-blog.php; Tailwind classes from main.css). There the fields' edge is
   slate-700 (1.80:1 on the card) with a rose focus border and a 30% rose ring (1.43:1), and the
   submit is main.css's rose .btn-primary: white on #f43f5e is 3.67:1, with a 1.43:1 rose ring on
   :focus. On this page the fields take the outlined border (4.84:1) and the two-colour ring, and
   the submit becomes an outlined button: solid teal stays reserved for the CTA. main.css sets
   the .btn-primary colours with !important, so the submit rule needs it too. */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	border-color: var(--zm-btn-outline-border);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus {
	border-color: var(--zm-btn-outline-border);
	outline: 2px solid var(--zm-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--zm-focus-gap);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments input[type="submit"] {
	border: 1px solid var(--zm-btn-outline-border) !important;
	background: transparent !important;
	color: var(--zm-btn-outline-fg) !important;
	box-shadow: none;
	transform: none;
	/* UI rung; the theme's Button Styles give input[type=submit] 14px/600 with !important */
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.75;
}

/* Comment card weights: UI labels and the small titles stay at 500 (the type scale keeps UI labels
   at 400/500; with real Vazirmatn weights the template's font-bold/font-semibold would now render
   a true 600/700 at 14–20px). Sizes come from the template's utility classes: «نظرات» 20/1.7
   (text-xl), the form title #reply-title 20/1.7 (text-xl) and the field labels 16/1.75
   (text-base) — comments-blog.php, variant C, October 2026. */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments :is(h2, h3, h4, label, b, strong, .font-bold, .font-semibold) {
	font-weight: 500 !important;
}

/* «لغو پاسخ» sits in WordPress's <small> inside the 20px form title: pinned to the 14px meta rung */
:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments #reply-title small {
	font-size: 14px;
	line-height: 1.7;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments input[type="submit"]:hover {
	background: var(--zm-btn-outline-layer-hover) !important;
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments input[type="submit"]:focus-visible {
	background: var(--zm-btn-outline-layer-focus) !important;
	outline: 2px solid var(--zm-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--zm-focus-gap);
}

:is(#nz-blog-content, body) .zm-single.zm-single .zm-comments input[type="submit"]:active {
	background: var(--zm-btn-outline-layer-pressed) !important;
}

/* ---------- phones ---------- */

@media (max-width: 767px) {
	:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__title {
		font-size: 30px !important;
		line-height: 1.35 !important;
	}

	/* the byline stays one row: a tighter gap, and only the word «مطالعه» goes */
	:is(#nz-blog-content, body) .zm-single.zm-single .zm-by {
		--zm-by-gap: 12px;
	}

	:is(#nz-blog-content, body) .zm-single.zm-single .zm-by__opt {
		display: none;
	}

	:is(#nz-blog-content, body) .zm-single.zm-single .zm-single__cover img {
		border-radius: 12px;
	}

	/* two short lines instead of a wrapped line that starts with a dangling «·» */
	:is(#nz-blog-content, body) .zm-single.zm-single .zm-end__dates {
		flex-direction: column;
	}

	:is(#nz-blog-content, body) .zm-single.zm-single .zm-end__dates > * + *::before {
		content: none;
	}

	:is(#nz-blog-content, body) .zm-single.zm-single .zm-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	:is(#nz-blog-content, body) .zm-single.zm-single .zm-author {
		padding: 16px;
	}

	:is(#nz-blog-content, body) .zm-single.zm-single .zm-author > .zm-av--56 {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(#nz-blog-content, body) .zm-single.zm-single :is(.zm-pill, .zm-tags a, .zm-related__item, .zm-endad__row, .zm-share__btn, .zm-author__soc a) {
		transition: none;
	}
}

/* =====================================================================
 * News single (template-parts/single-news.php) — .zm-single--news, October 2026.
 * Same column, type scale and graphite palette as the article above; every rule here
 * is scoped to the modifier (three classes, so it also wins over the base rules).
 * The news character: a «خبر» kicker, a dateline with time in the byline, a dek, the
 * directory CTAs, one news timeline and the recommended broker / exchange boxes.
 * News accent, used only for the kicker, the dek rule and the timeline dots (rose):
 *   kicker text #fda4af on its 12% rose tint 8.80:1 (9.82:1 on the page);
 *   kicker border / dek rule 60% #fb7185 = 3.19:1 on the page; dot ring #fb7185 6.90:1.
 * Buttons use the GROWTH-TEAL tokens of zm-card.css: #042f2e on #2dd4c6 7.82:1
 * (hover #2ac7ba 6.87:1, focus/pressed #29c4b7 6.67:1); outlined: #e6e7e9 on its
 * 8–10% layer ≥ 11.91:1, border #80838a 4.89:1 on the page / 4.53:1 on a card.
 * Rows on a card: name #e6e7e9 13.91:1, type/«مشاهده» #b2b5bb 8.37:1 (6.61:1 on hover).
 * ===================================================================== */

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news {
	--zm-news: #fda4af;
	--zm-news-dot: #fb7185;
	--zm-news-bg: rgba(244, 63, 94, 0.12);
	--zm-news-line: rgba(251, 113, 133, 0.6);
	--zm-btn-primary-bg: #2dd4c6;
	--zm-btn-primary-fg: #042f2e;
	--zm-btn-primary-bg-hover: #2ac7ba;
	--zm-btn-primary-bg-focus: #29c4b7;
	--zm-btn-primary-bg-pressed: #29c4b7;
}

/* ---------- head: «خبر» + category pill, dek, dateline ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* a label, not a link: squarer than the pill so the two never read as one control */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-news-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--zm-news-line);
	border-radius: 6px;
	background: var(--zm-news-bg);
	color: var(--zm-news);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-news-tag::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--zm-news-dot);
}

/* Dek (hand-written excerpt only): the lead rung, set off by a rose rule at the line start. */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-single__dek {
	margin: 0;
	padding-inline-start: 14px;
	border-inline-start: 3px solid var(--zm-news-line);
	color: var(--zm-text);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.8;
}

/* The publish date + time is the part of the dateline that matters most. */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-by__when {
	color: var(--zm-text-2);
}

/* ---------- end: CTAs ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn {
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 0;
	margin: 0;
	padding: 8px 20px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn--primary {
	border: 1px solid var(--zm-btn-primary-bg);
	background: var(--zm-btn-primary-bg);
	color: var(--zm-btn-primary-fg);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn--primary:hover {
	border-color: var(--zm-btn-primary-bg-hover);
	background: var(--zm-btn-primary-bg-hover);
	color: var(--zm-btn-primary-fg);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn--primary:focus-visible {
	border-color: var(--zm-btn-primary-bg-focus);
	background: var(--zm-btn-primary-bg-focus);
	color: var(--zm-btn-primary-fg);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn--primary:active {
	border-color: var(--zm-btn-primary-bg-pressed);
	background: var(--zm-btn-primary-bg-pressed);
	color: var(--zm-btn-primary-fg);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn--outline {
	border: 1px solid var(--zm-btn-outline-border);
	background: transparent;
	color: var(--zm-btn-outline-fg);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn--outline:hover {
	background: var(--zm-btn-outline-layer-hover);
	color: var(--zm-btn-outline-fg);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn--outline:focus-visible {
	background: var(--zm-btn-outline-layer-focus);
	color: var(--zm-btn-outline-fg);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn--outline:active {
	background: var(--zm-btn-outline-layer-pressed);
	color: var(--zm-btn-outline-fg);
}

/* ---------- end: news timeline («آخرین اخبار» / «اخبار مرتبط») ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-newslist__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin-bottom: 8px;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-newslist__head .zm-sec-t {
	margin: 0;
}

/* sits next to the muted meta, so always underlined (55% teal = 4.49:1 on the page) */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news :is(.zm-newslist__all, .zm-reco__all) {
	color: var(--zm-link);
	font-size: 16px;
	line-height: 1.75;
	text-decoration: underline;
	text-decoration-color: rgba(94, 234, 212, 0.55);
	text-underline-offset: 5px;
	white-space: nowrap;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news :is(.zm-newslist__all, .zm-reco__all):hover {
	color: var(--zm-link-hover);
	text-decoration-color: currentColor;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A rail at the line start with one ringed dot per item, centred on the item's first
   (time) line: link padding 10px + half of 14px × 1.7 ≈ 22px. */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__item {
	position: relative;
	margin: 0;
	padding: 0;
	padding-inline-start: 24px;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 5px;
	width: 2px;
	background: var(--zm-line-strong);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__item:first-child::before {
	top: 22px;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__item:last-child::before {
	bottom: auto;
	height: 22px;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__item:only-child::before {
	content: none;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__item::after {
	content: "";
	position: absolute;
	top: 16px;
	inset-inline-start: 0;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 2px solid var(--zm-news-dot);
	border-radius: 999px;
	background: var(--zm-bg);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color 0.15s;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__link:hover {
	background: var(--zm-hover);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__t {
	color: var(--zm-head);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
}

/* the time line is drawn above the title; the title stays first for screen readers */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__m {
	order: -1;
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	color: var(--zm-muted);
	font-size: 14px;
	line-height: 1.7;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-tl__ago::before {
	content: "·";
	content: "·" / "";
	margin-inline-end: 8px;
	color: var(--zm-faint);
}

/* ---------- end: recommended brokers / exchanges ---------- */

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__box {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px;
	padding: 16px;
	border: 1px solid var(--zm-line);
	border-radius: 16px;
	background: var(--zm-card);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin-bottom: 4px;
}

/* an end-section title like «مطالب مرتبط»: lead rung 20/1.7, weight 500 */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__t {
	margin: 0;
	color: var(--zm-head);
	font-size: 20px !important;
	line-height: 1.7 !important;
	font-weight: 500 !important;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 8px;
	border-radius: 10px;
	color: var(--zm-text-2);
	text-decoration: none;
	transition: background-color 0.15s;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__row:hover {
	background: var(--zm-hover);
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__logo {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	max-width: none;
	margin: 0;
	border-radius: 10px;
	object-fit: contain;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__logo--none {
	background: var(--zm-hover);
	color: var(--zm-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__txt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

/* wraps instead of an ellipsis: a cut-off «… | Exnovin» lost the brand's Latin name on phones */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__name {
	color: var(--zm-head);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__type {
	color: var(--zm-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* part of the row's link text: the row's UI rung, secondary by colour and weight 400 */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco__go {
	flex: none;
	color: var(--zm-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
}

/* ---------- body: headings inside table cells ---------- */

/* A heading in a data-table cell (a header cell, or a row of two or more cells) is a cell value
   («دارد», a brand name — e.g. post 275031), not a section: the cell's own size instead of the
   30px/24px heading rung, so the table keeps to the column. inc/article-toc.php leaves these out
   of the TOC as well. One-cell rows (older posts box a section heading in a 1×1 table) keep it. */
:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .prose :is(th, td:not(:only-child)) :is(h2, h3, h4, h5, h6) {
	margin: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* ---------- news: phones ---------- */

@media (max-width: 767px) {
	:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-single__dek {
		font-size: 18px;
	}

	/* the two CTAs share the row, each at least half of it */
	:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-btn {
		flex: 1 1 140px;
	}

	:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news .zm-reco {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(#nz-blog-content, body) .zm-single.zm-single.zm-single--news :is(.zm-btn, .zm-tl__link, .zm-reco__row) {
		transition: none;
	}
}