/* ---------------------------------------------------------------------------
 * چیدمان تازه — با الهام از ساختار و تیپوگرافی مایو کلینیک
 *
 * این فایل آخر از همه صف می‌شود، پس در برابری ویژه‌گی روی قواعد Blocksy و
 * بخش‌های قدیمی main.css می‌نشیند. عمداً جدا نگه داشته شده تا مرزِ «آنچه
 * طراحی تازه عوض کرد» روشن بماند.
 *
 * سه چیز از مایو گرفته شد و بقیه نه:
 *   ۱. نوار عمیق برای عنوان صفحه
 *   ۲. نسبت اندازه‌ی سرتیتر به متن (۳۰px روی ۱۹px) و ریتم ۴۸/۳۲/۱۶
 *   ۳. بدنه‌ی تقریباً بی‌کادر
 * رنگ آبی برندشان و ستونِ پرِ تبلیغاتشان کپی نشد؛ رنگ قرمز خودمان ماند و
 * ستون کنار جایگاه تبلیغ خودمان است.
 * ------------------------------------------------------------------------ */

/*
 * نوار تمام‌عرض.
 *
 * نسخه‌ی اول این کار را با calc(50% - 50vw) انجام می‌داد و خراب بود: نیای
 * این عنصرها (article و main.site-main) از قبل تمام‌عرض است، پس ۵۰٪ و
 * ۵۰vw تقریباً برابر می‌شدند و حاشیه‌ی منفی فقط چند پیکسل می‌شد — نوار
 * تمام‌عرض نمی‌شد و مرکزچین‌شدنِ خود Blocksy هم می‌شکست و نوار کج می‌نشست.
 *
 * راه درست: قید عرض برداشته شود تا عنصر طبیعتاً تمام‌عرضِ نیا شود، و
 * فاصله‌ی داخلی برابر ناودان ظرف باشد تا متن با بقیه‌ی صفحه هم‌تراز بماند.
 *
 * ناودان از متغیرهای خود Blocksy مشتق می‌شود (ظرف = ۹۰vw با سقف ۱۲۹۰px)،
 * نه از عدد ثابت، تا اگر عرض ظرف در سفارشی‌ساز عوض شد این هم دنبالش برود.
 * درصد در padding نسبت به نیا حساب می‌شود، که همان چیزی است که می‌خواهیم.
 */
:root {
	--drs-gutter: calc(
		(100% - min(
			var(--theme-container-edge-spacing, 90vw),
			var(--theme-normal-container-max-width, 1290px)
		)) / 2
	);
}

/* ---------- نوار عنوان صفحه‌های مقاله ---------- */

/*
 * Blocksy خودش عنوان و توضیح و متا را در .hero-section می‌گذارد، پس نوار
 * فقط با CSS ساخته می‌شود و دست به قالب نمی‌خورد.
 */
body.drs-article .hero-section {
	max-width: none;
	width: auto;
	margin-inline: 0;
	padding-inline: var(--drs-gutter);
	padding-block: 2rem 2.5rem;
	margin-block-end: 0;
	background-color: var(--drs-band-a);
	background-image: radial-gradient(79.75% 134.25% at 4.29% 100%, var(--drs-band-a) 0%, var(--drs-band-b) 100%);
	color: #fff;
}

body.drs-article .hero-section .entry-header {
	max-width: var(--drs-measure);
	margin-inline: 0;
}

body.drs-article .hero-section .page-title {
	font-size: clamp(1.9rem, 4.6vw, 2.6rem);
	line-height: 1.35;
	font-weight: 700;
	color: #fff;
	margin-block: 0;
	text-wrap: balance;
}

body.drs-article .hero-section .page-description {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--drs-band-fade);
	margin-block: .9rem 0;
	max-width: 56ch;
}

/* متای Blocksy: نویسنده، تاریخ، دسته. روی نوار سفید می‌شود. */
body.drs-article .hero-section [class*='ct-meta'],
body.drs-article .hero-section [class*='meta-'] {
	color: var(--drs-band-fade);
}

body.drs-article .hero-section a {
	color: #fff;
	text-decoration-color: var(--drs-band-rule);
}

body.drs-article .hero-section a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ---------- مسیر صفحه ----------
 * قالب والد مسیر را بعد از نوار چاپ می‌کند و از هوک‌های موجود نمی‌شود
 * بالای عنوان بردش. پس نواری باریک زیر بند رنگی می‌شود، نه داخلش.
 */
body.drs-article .drs-crumbs {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--drs-gutter);
	padding-block: .7rem;
	margin-block: 0 0;
	background: var(--drs-bg-subtle);
	border-block-end: 1px solid var(--drs-border);
	font-size: .95rem;
}

/* ---------- دو ستون ---------- */

.drs-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--drs-rail);
	column-gap: 3.5rem;
	align-items: start;
	margin-block-start: 2rem;
}

.drs-cols__main { min-width: 0; }

.drs-rail {
	display: grid;
	gap: 2.5rem;
	align-content: start;
}

@media (max-width: 60rem) {
	.drs-cols {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 3rem;
	}

	/* ستون زیر متن می‌رود نه اینکه فشرده شود: تبلیغ ۳۰۰px در ستون باریک بد می‌نشیند. */
	.drs-rail {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	}
}

/* ---------- جایگاه تبلیغ ---------- */

/*
 * برچسب «تبلیغات» همیشه چاپ می‌شود، حتی وقتی تبلیغ خودیِ سایت است.
 * روی سایت پزشکی، تبلیغی که شکل محتوا داشته باشد اعتماد خواننده را
 * می‌شکند و در راهنمای گوگل هم تخلف است.
 */
.drs-ad {
	max-width: var(--drs-rail);
}

.drs-ad__label {
	margin: 0 0 .5rem;
	padding-block-end: .5rem;
	border-block-end: 1px solid var(--drs-border);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.6;
	text-align: center;
	color: var(--drs-text-muted);
}

.drs-ad__widget + .drs-ad__widget {
	margin-block-start: 1.25rem;
}

.drs-ad__widget-title {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
}

/* تبلیغ خودی. اندازه‌اش روی ۲۵۰px قفل است تا روزِ جایگزینی با تبلیغ واقعی، چیدمان تکان نخورد. */
.drs-house {
	display: block;
	min-height: 250px;
	padding: 1.4rem 1.25rem;
	background: var(--drs-violet-tint);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
	color: var(--drs-text);
}

.drs-house:hover {
	border-color: var(--drs-violet);
	text-decoration: none;
}

.drs-house__eyebrow,
.drs-house__title,
.drs-house__text,
.drs-house__cta {
	display: block;
}

.drs-house__eyebrow {
	margin-block-end: .6rem;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--drs-violet);
}

.drs-house__title {
	margin-block-end: .5rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	text-wrap: balance;
}

.drs-house__text {
	margin-block-end: 1.1rem;
	font-size: .95rem;
	line-height: 1.75;
	color: var(--drs-text-muted);
}

.drs-house__cta {
	width: fit-content;
	padding: .45rem 1.1rem;
	background: var(--drs-violet);
	border-radius: var(--drs-radius);
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
}

/* ---------- جعبه‌ی اعتبار ---------- */

.drs-trust {
	padding: 1.1rem 1.2rem;
	background: var(--drs-info-bg);
	border-inline-start: 4px solid var(--drs-info-border);
	border-radius: var(--drs-radius);
}

.drs-trust h2 {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.6;
}

.drs-trust p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.75;
	color: var(--drs-text-muted);
}

/* ---------- فهرست «در این صفحه» ----------
 * افقی و فشرده بالای متن، نه ستون کنار. مقالات این سایت تا چهارده بخش
 * دارند و بی فهرست، رسیدن به «چه زمانی باید فوراً اقدام کرد» یعنی
 * اسکرول کردن کل صفحه.
 */

.drs-toc {
	margin-block: 0 2rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--drs-border);
}

.drs-toc__title {
	margin: 0 0 .8rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--drs-text-muted);
}

.drs-toc__list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.7;
}

.drs-toc__list a {
	display: inline-flex;
	align-items: baseline;
	gap: .3rem;
}

.drs-toc__list a::after {
	content: '↓';
	font-size: .8em;
	opacity: .6;
}

/* پرش نرم به بخش‌ها، و فاصله‌ی امن از سربرگ چسبان Blocksy. */
html {
	scroll-behavior: smooth;
}

body.drs-article :is(h2, h3)[id] {
	scroll-margin-block-start: 5rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---------- تیپوگرافی متن مقاله ----------
 * نسبت ۳۰px سرتیتر به ۱۹px متن، همان کاری را می‌کند که تضاد سریف/سنس در
 * مایو انجام می‌دهد. فونت وزیرمتن برای همه‌ی نقش‌ها ماند (انتخاب کاربر)،
 * پس سلسله‌مراتب باید از اندازه و فاصله بیاید.
 */

body.drs-article .entry-content {
	font-size: var(--drs-text-size);
}

body.drs-article .entry-content > h2 {
	font-size: 1.875rem;
	line-height: 1.5;
	font-weight: 700;
	margin-block: 3rem .5rem;
	text-wrap: balance;
}

body.drs-article .entry-content > h3 {
	font-size: 1.25rem;
	line-height: 1.7;
	font-weight: 700;
	margin-block: 2rem .25rem;
}

body.drs-article .entry-content > :is(p, ul, ol) {
	margin-block: 0 1.05rem;
}

body.drs-article .entry-content > h2 + p,
body.drs-article .entry-content > h3 + p {
	margin-block-start: 0;
}

/* ---------- صفحه‌ی اول: نوار قهرمان ---------- */

.drs-hero {
	padding-block: 2.75rem 3rem;
	background-color: var(--drs-band-a);
	background-image: radial-gradient(79.75% 134.25% at 4.29% 100%, var(--drs-band-a) 0%, var(--drs-band-b) 100%);
	color: #fff;
}

.drs-hero__title {
	max-width: 30ch;
	margin: 0;
	font-size: clamp(2rem, 5vw, 2.75rem);
	line-height: 1.35;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}

.drs-hero__lead {
	max-width: 58ch;
	margin: .9rem 0 0;
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--drs-band-fade);
}

.drs-hero__search {
	display: flex;
	gap: .6rem;
	max-width: 44rem;
	margin-block-start: 1.75rem;
}

.drs-hero__search input {
	flex: 1 1 auto;
	min-width: 0;
	padding: .8rem 1rem;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--drs-text);
	background: var(--drs-bg);
	border: 1px solid transparent;
	border-radius: var(--drs-radius);
}

.drs-hero__search input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.drs-hero__search button {
	padding: .8rem 1.6rem;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--drs-band-a);
	background: #fff;
	border: 0;
	border-radius: var(--drs-radius);
	cursor: pointer;
}

.drs-hero__search button:hover {
	background: var(--drs-band-fade);
}

.drs-hero__hint {
	margin: .8rem 0 0;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--drs-band-fade);
}

@media (max-width: 34rem) {
	.drs-hero__search {
		flex-direction: column;
	}

	.drs-hero__search button {
		width: 100%;
	}
}

/* ---------- صفحه‌ی اول: ردیف نشانه‌ها ----------
 * بیمار نام سرطانش را نمی‌داند، نشانه‌اش را می‌داند. صفحه‌ی اول اگر
 * فقط «سرطان‌ها» و «ابزارهای تشخیص» بگوید، کسی که توده‌ای لمس کرده
 * نمی‌داند کجا کلیک کند.
 */

.drs-symptoms {
	padding-block: 1.6rem;
	background: var(--drs-bg-subtle);
	border-block-end: 1px solid var(--drs-border);
}

.drs-symptoms__title {
	margin: 0 0 .8rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--drs-text-muted);
}

.drs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * قید ردیف نشانه‌ها.
 *
 * عمداً کادر هشدار نیست و رنگ خطر نمی‌گیرد: خودش نباید همان اضطرابی را
 * بسازد که کارش خنثی کردنش است. متن کم‌رنگ و کوچک‌تر، با طول سطر مهار
 * شده تا کنار ردیفِ پهنِ قرص‌ها گم نشود.
 */
.drs-symptoms__note {
	max-width: 62ch;
	margin: .9rem 0 0;
	font-size: .95rem;
	line-height: 1.75;
	color: var(--drs-text-muted);
}

.drs-chips a {
	display: inline-block;
	padding: .35rem 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--drs-text);
	background: var(--drs-bg);
	border: 1px solid var(--drs-border);
	border-radius: 999px;
}

.drs-chips a:hover {
	color: var(--drs-violet);
	border-color: var(--drs-violet);
	text-decoration: none;
}

/* ---------- صفحه‌ی اول: بلوک‌های محتوا ---------- */

.drs-home {
	padding-block: 3rem 0;
}

.drs-home .drs-cols {
	margin-block-start: 0;
}

.drs-block + .drs-block {
	margin-block-start: 3.5rem;
}

.drs-block__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .3rem 1rem;
	margin-block-end: .5rem;
	padding-block-end: .6rem;
	border-block-end: 2px solid var(--drs-violet);
}

.drs-block__title {
	margin: 0;
	font-size: 1.875rem;
	line-height: 1.5;
	font-weight: 700;
	text-wrap: balance;
}

.drs-block__more {
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
}

.drs-block__lede {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--drs-text-muted);
}

/*
 * مقالات به‌شکل فهرست، نه کارت. صفحه‌ی مقاله تقریباً بی‌کادر است و اگر
 * صفحه‌ی اول پر از کارت گرد باشد، دو زبان طراحی می‌شود.
 */
.drs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drs-list li {
	border-block-end: 1px solid var(--drs-border);
}

.drs-list__row {
	display: block;
	padding-block: 1rem;
	color: var(--drs-text);
}

.drs-list__row:hover {
	text-decoration: none;
}

.drs-list__row:hover .drs-list__name {
	color: var(--drs-violet);
}

.drs-list__name {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
}

.drs-list__desc {
	display: block;
	margin-block-start: .15rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--drs-text-muted);
}

/* ---------- صفحه‌ی اول: مرور بر اساس بخش ----------
 * یک شبکه با درزِ یک‌پیکسلی، نه چند کارتِ جدا. بخش‌های خالی اصلاً چاپ
 * نمی‌شوند — کارِ drsaratan_home_sections().
 */

.drs-sections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	margin-block-start: .75rem;
	background: var(--drs-border);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
	overflow: hidden;
}

.drs-sections__item {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: 1.1rem 1.15rem;
	background: var(--drs-bg);
	color: var(--drs-text);
}

.drs-sections__item:hover {
	background: var(--drs-violet-tint);
	text-decoration: none;
}

.drs-sections__name {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.5;
}

.drs-sections__n {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--drs-text-muted);
}

/* ---------- صفحه‌ی اول: سلب مسئولیت ---------- */

.drs-disclaimer {
	padding-block: 2.25rem;
	margin-block-start: 4rem;
	background: var(--drs-bg-sunken);
	border-block-start: 1px solid var(--drs-border);
}

.drs-disclaimer__in {
	max-width: var(--drs-measure);
}

.drs-disclaimer h2 {
	margin: 0 0 .3rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.6;
}

.drs-disclaimer p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.8;
}

/* ---------------------------------------------------------------------------
 * پوسته — دکمه‌ها، بلوک‌های تصویری، پاصفحه، تب بازخورد
 *
 * اندازه‌ها از خود مایو کلینیک اندازه‌گیری شد، نه تخمین:
 *   دکمه و قرص → گردی ۲۴px کامل، بلندی ۵۲px
 *   فیلد جستجو → گردی کامل، خط مویی ۰٫۸px، بلندی ۴۸px
 *   قرص فعال   → زمینه سفید با متن تیره؛ غیرفعال → سفیدِ ۱۰٪ با متن سفید
 * ------------------------------------------------------------------------ */

/* ---------- دکمه‌ها ----------
 * چهار نقش، هر کدام یک معنی. قرصِ کامل است نه گوشه‌گردِ ۱۲px — تفاوتی
 * که در نسخه‌ی اول جا افتاده بود.
 */

.drs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 52px;
	padding-inline: 1.75rem;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.drs-btn:hover { text-decoration: none; }

.drs-btn--primary { background: var(--drs-violet); color: #fff; }
.drs-btn--primary:hover { background: var(--drs-band-a); color: #fff; }

/* خط‌دار: زمینه شفاف با قاب یک‌پیکسلی. inset shadow به‌جای border تا
   اضافه شدن قاب، اندازه‌ی دکمه را تکان ندهد. */
.drs-btn--outline {
	background: transparent;
	color: var(--drs-violet);
	box-shadow: inset 0 0 0 1px var(--drs-violet);
}

.drs-btn--outline:hover { background: var(--drs-violet-tint); color: var(--drs-violet); }

.drs-btn--onband { background: #fff; color: var(--drs-band-a); }
.drs-btn--onband:hover { background: var(--drs-band-fade); color: var(--drs-band-a); }

/* دکمه‌ی جستجوی نوار قهرمان هم قرصی می‌شود. */
.drs-hero__search button {
	min-height: 52px;
	border-radius: 999px;
}

.drs-hero__search input {
	border-radius: 999px;
	padding-inline: 1.25rem;
}

/* فیلد جستجو: خط مویی، نه قاب ضخیم — همان ۰٫۸px مایو. */
.drs-search-field input {
	border-width: .8px;
	border-radius: 999px;
}

/* ---------- بلوک‌های تصویر + متن ----------
 * تصویر بزرگ یک طرف، تیتر و یک بند و دکمه‌ی خط‌دار طرف دیگر، و جهت
 * یکی‌درمیان عوض می‌شود.
 */

.drs-spotlight { padding-block: 4rem 0; }

.drs-feat {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 3.5rem;
	align-items: center;
}

.drs-feat + .drs-feat { margin-block-start: 4rem; }

.drs-feat:nth-of-type(even) .drs-feat__media { order: 2; }

.drs-feat__media {
	display: block;
	overflow: hidden;
	border-radius: var(--drs-radius);
	background: var(--drs-bg-subtle);
}

.drs-feat__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.drs-feat__kicker {
	margin: 0 0 .5rem;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.6;
	color: var(--drs-violet);
}

.drs-feat__title {
	margin: 0 0 .6rem;
	font-size: clamp(1.6rem, 3.2vw, 2.1rem);
	line-height: 1.4;
	font-weight: 700;
	text-wrap: balance;
}

.drs-feat__title a { color: var(--drs-text); }
.drs-feat__title a:hover { color: var(--drs-violet); text-decoration: none; }

.drs-feat__text {
	margin: 0 0 1.5rem;
	font-size: 1.1rem;
	line-height: 1.8;
	color: var(--drs-text-muted);
}

@media (max-width: 48rem) {
	.drs-feat { grid-template-columns: minmax(0, 1fr); }
	.drs-feat:nth-of-type(even) .drs-feat__media { order: 0; }
}

/* ---------- پاصفحه ----------
 * نوار کپی‌رایت خود Blocksy پنهان می‌شود چون پاصفحه‌ی کامل را خودمان
 * می‌سازیم. اگر هر دو بمانند، دو کپی‌رایت روی صفحه می‌نشیند.
 */

.ct-footer { display: none !important; }

.drs-foot {
	padding-block: 3rem 0;
	background: var(--drs-deep);
	color: #f0e4e4;
}

.drs-foot a { color: #f0e4e4; }
.drs-foot a:hover { color: #fff; }

.drs-foot__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2rem 2.5rem;
	padding-block-end: 2.5rem;
}

.drs-foot__col h2 {
	margin: 0 0 .9rem;
	padding-block-end: .6rem;
	border-block-end: 1px solid rgb(255 255 255 / 16%);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
}

.drs-foot__list {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drs-foot__list a { font-size: 1rem; line-height: 1.7; }

.drs-foot__n {
	margin-inline-start: .3rem;
	font-size: .9rem;
	color: #b9a2a5;
	font-variant-numeric: tabular-nums;
}

/*
 * خط اورژانس. پاصفحه جایی است که خواننده وقتی چیزی پیدا نکرده به آن
 * می‌رسد — پس مفیدترین چیزی که می‌تواند اینجا باشد همین شماره است.
 */
.drs-foot__sos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin: 0;
	padding: 1rem 1.15rem;
	background: rgb(255 255 255 / 7%);
	border-inline-start: 4px solid var(--drs-violet-bright);
	border-radius: var(--drs-radius);
	font-size: 1rem;
	line-height: 1.7;
}

.drs-foot__sos b {
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.drs-foot__social {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.drs-foot__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: rgb(255 255 255 / 8%);
	border-radius: 999px;
}

.drs-foot__social a:hover { background: rgb(255 255 255 / 18%); }

.drs-foot__legal {
	padding-block: 1.25rem 2rem;
	border-block-start: 1px solid rgb(255 255 255 / 16%);
}

.drs-foot__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
	margin: 0 0 .8rem;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}

.drs-foot__copy {
	margin: 0;
	font-size: .9rem;
	line-height: 1.8;
	color: #b9a2a5;
}

/* ---------- تب بازخورد ----------
 * مایو آن را به لبه‌ی راست می‌چسباند. در راست‌به‌چپ قرینه‌اش لبه‌ی چپ است
 * تا جلوی متن را نگیرد. روی موبایل برداشته می‌شود چون عرض کم است.
 */

.drs-feedback {
	position: fixed;
	inset-inline-start: 0;
	inset-block-end: 18vh;
	z-index: 40;
	padding: .9rem .5rem;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: var(--drs-violet);
	border-start-end-radius: var(--drs-radius);
	border-end-end-radius: var(--drs-radius);
	writing-mode: vertical-rl;
	box-shadow: 0 4px 14px rgb(42 20 24 / 25%);
}

.drs-feedback:hover {
	background: var(--drs-band-a);
	color: #fff;
	text-decoration: none;
}

@media (max-width: 48rem) {
	.drs-feedback { display: none; }
}

/* ---------- آگاه‌سازی آرشیو خالی ----------
 * این بلوک ناخواسته در پاک‌سازی main.css حذف شده بود و آرشیو خالی
 * (پزشکان، اخبار) بی‌استایل می‌شد. از نسخه‌ی پیشین بازگردانده شد، با
 * دکمه‌ی قرصی هم‌شکل بقیه‌ی دکمه‌های سایت.
 */

.drs-empty {
	max-width: 34rem;
	margin: 0 auto 4rem;
	padding: 2rem;
	text-align: center;
	background: var(--drs-bg-subtle);
	border: 1px dashed var(--drs-border);
	border-radius: var(--drs-radius);
	color: var(--drs-text-muted);
}

.drs-empty__title {
	margin: 0 0 .5rem;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--drs-deep);
}

.drs-empty p {
	margin: 0 0 .5rem;
	line-height: var(--drs-leading-body);
}

.drs-empty__actions {
	margin-block-start: 1.25rem;
}

.drs-empty__actions a {
	display: inline-block;
	min-height: 52px;
	padding: .8rem 1.75rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: var(--drs-violet);
	border-radius: 999px;
	text-decoration: none;
}

.drs-empty__actions a:hover {
	background: var(--drs-band-a);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * سربرگ — فونت و اندازه
 *
 * ریشه‌ی «منو خیلی ریز است» فونت بود نه اندازه. اندازه‌گیری روی سایت زنده:
 *
 *   .ct-menu-link  →  ۲۰px، وزن ۷۰۰، فونت ‎-apple-system/Segoe UI‎
 *   .site-title    →  ۲۵px، وزن ۸۰۰، همان فونت سیستم
 *   .drs-foot__list a → ۱۶px، وزن ۴۰۰، وزیرمتن
 *
 * یعنی منو از پاصفحه بزرگ‌تر بود ولی با فونت سیستم رندر می‌شد. فارسی در
 * Segoe UI باریک و جمع می‌نشیند، پس درشت‌تر بودنش هم نجاتش نمی‌داد. قالب
 * والد روی این دو عنصر فونت خودش را می‌گذارد و --drs-font هرگز به آن‌ها
 * نمی‌رسید.
 * ------------------------------------------------------------------------ */

/*
 * منو با همان فونت و اندازه‌ی منوی پاصفحه.
 *
 * وزن ۵۰۰ گرفته شده نه ۴۰۰ پاصفحه: منوی اصلی باید به‌عنوان ناوبری خوانده
 * شود، ولی ۷۰۰ قبلی با فونت درست بیش از حد سنگین می‌شد.
 */
.ct-menu-link,
.ct-header [class*='menu'] .ct-menu-link {
	font-family: var(--drs-font);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.7;
}

/*
 * نشان برند: فونت درست، و اندازه.
 *
 * مسیرش را یک‌بار برای همیشه اینجا می‌نویسم چون دو بار سرش وقت رفت:
 * اندازه‌ی عنوان سایت *اینجا* تعیین می‌شود، نه در main.css و نه در
 * «سفارشی‌سازی». این پرونده بعد از main.css بارگذاری می‌شود و ویژگی
 * انتخابگرها برابر است، پس هرچه اینجا بنویسید برنده است.
 *
 * ۱٫۸۷۵rem (۳۰px) بود؛ با نسبت ۱٫۱۲۵ دو پله بالا رفت و ۲٫۳۷۵rem (۳۸px)
 * شد.
 */
.site-title,
.site-title a {
	font-family: var(--drs-font);
	font-size: 2.375rem;
}

/*
 * روی نمایشگرهای خیلی باریک یک پله پایین می‌آید. حالا که روبان کنار
 * عنوان نشسته (و نه بالای آن)، عرضشان جمع می‌شود و با دکمه‌ی منو از
 * سربرگ بیرون می‌زد.
 */
@media (max-width: 400px) {
	.site-title,
	.site-title a {
		font-size: 2.125rem;
	}
}