/*
 * دکتر سرطان — توکن‌های طراحی و تنظیمات پایه‌ی تایپوگرافی فارسی.
 *
 * فلسفه‌ی رنگ: بنفش رنگ اصلی برند است، نه لهجه.
 *
 * بنفش انتخاب دلبخواه نیست: روبان بنفش/یاسی نشان جهانی سرطان است، پس
 * خواننده پیش از خواندن یک کلمه می‌داند کجاست. اما مسئله «بنفش بودن»
 * نیست، «کدام بنفش» است — یاسیِ روشن بازیگوش و کم‌جان می‌شود و بنفشِ
 * تیره‌ی اشباع سوگوار. این ویولتِ میانه‌ی کمی مایل به سرخ، هم گرم است
 * هم متین.
 *
 * دستاورد جانبیِ مهم: در دکتر قلب رنگ برند قرمز بود و مجبور بودیم
 * قرمزِ هشدار بالینی را با اشباع و گرمای متفاوت از آن جدا کنیم — مرزی
 * که همیشه لرزان بود. با برند بنفش، قرمز آزاد می‌شود و فقط یک معنا
 * دارد: خطر. کادر «فوری به اورژانس» دیگر با رنگ سایت رقابت نمی‌کند.
 */

:root {
	/*
	 * بنفش رنگ اصلی است نه لهجه.
	 *
	 * کنتراست روی سفید اندازه‌گیری شده، حدس نیست: ۸٫۴۳ به یک، یعنی
	 * برای متن لینک هم AAA رد می‌کند. (قرمز برند دکتر قلب حدود ۵٫۵ بود
	 * و فقط AA می‌شد.)
	 */
	--drs-violet: #6d28a4;
	--drs-violet-deep: #4c1a75;
	--drs-violet-bright: #8b46c9;
	--drs-violet-tint: #f8f3fc;
	--drs-violet-wash: #efe3f9;

	/* لنگر تیره — زغالیِ آلویی که کنار بنفش نمی‌جنگد، نه سرمه‌ای سرد. */
	--drs-deep: #241429;
	--drs-navy: var(--drs-deep);
	--drs-navy-soft: #4e3358;

	/* سطوح: سفیدِ ته‌رنگ‌دار به‌جای سفیدِ خالص که بی‌روح دیده می‌شد. */
	--drs-bg: #ffffff;
	--drs-page: #fdfbfe;
	--drs-bg-subtle: #f9f5fb;
	--drs-bg-sunken: #f2eaf6;
	--drs-border: #e8dcee;
	--drs-border-strong: #d3c0dc;

	/* متن */
	--drs-text: #241a2b;
	--drs-text-muted: #6b5f77;
	--drs-link: var(--drs-violet);

	/* رنگ‌های معنایی برای کادرهای پزشکی */
	--drs-warn-bg: #fff6e6;
	--drs-warn-border: #d99320;

	/*
	 * قرمزِ خطر مستقل از برند است و باید بماند.
	 *
	 * در دکتر قلب این توکن `var(--drg-red-bright)` بود، یعنی مشتق از
	 * رنگ برند. اینجا عدد مستقل دارد: کادر «نشانه‌هایی که نباید صبر
	 * کرد» و «عوارضی که باید فوری گزارش شود» تنها جاهایی هستند که قرمز
	 * روی این سایت دیده می‌شود، و همین کمیابی است که کارشان را می‌کند.
	 * هیچ‌وقت این را از --drs-violet مشتق نکن.
	 */
	--drs-danger-bg: #fdecec;
	--drs-danger-border: #c62828;
	--drs-danger-text: #a41818;

	/*
	 * کادر «اطلاع» عمداً آبی نیست.
	 *
	 * آبی همسایه‌ی بنفش است و کنارش گل‌آلود می‌زند — همان اشتباهی که در
	 * دکتر قلب با آبی کنار قرمز پیش می‌آمد، اینجا بدتر. خاکستریِ کمی
	 * بنفش‌گرفته نقش «این را بخوان ولی هشدار نیست» را بازی می‌کند بدون
	 * اینکه با هویت سایت بجنگد.
	 */
	--drs-info-bg: #f4f1f7;
	--drs-info-border: #a695b0;

	/*
	 * نوار عنوان صفحه.
	 *
	 * هندسه‌ی گرادیان از مایو کلینیک گرفته و برای راست‌به‌چپ آینه شده:
	 * مرکز تیرگی از ۹۵٪ سمت راست به ۴٪ رفت تا زیر عنوان بنشیند نه دور از
	 * آن. رنگ‌ها بنفش خودمان است، نه آبی آن‌ها.
	 *
	 * دو سرِ گرادیان توکن جداگانه دارند و از --drs-violet مشتق نمی‌شوند، چون
	 * در حالت تاریک بنفشِ برند روشن می‌شود و نوار باید تیره بماند.
	 */
	--drs-band-a: #2e0b4a;
	--drs-band-b: #6d28a4;
	--drs-band-fade: rgb(255 255 255 / 82%);
	--drs-band-rule: rgb(255 255 255 / 28%);

	/* عرض ستون تبلیغ — «مستطیل میانی» استاندارد. */
	--drs-rail: 300px;

	/* تایپوگرافی */
	--drs-font: 'Narengi', 'Vazirmatn', Tahoma, sans-serif;
	--drs-text-size: 1.1875rem;   /* ۱۹px — مایو ۲۰px می‌نشیند؛ فارسی در همین حد راحت است. */
	--drs-leading-body: 1.85;     /* ۲ برای متن بلند فارسی گشاد بود، ۱٫۴ مایو تنگ. */
	--drs-leading-heading: 1.6;
	--drs-measure: 68ch;        /* طول سطر خوانا برای متن طولانی. */

	--drs-radius: 12px;
	--drs-radius-lg: 20px;

	/* سایه‌ها ته‌رنگ بنفش دارند تا با پالت یکی شوند، نه خاکستری خنثی. */
	--drs-shadow: 0 1px 2px rgb(36 20 41 / 5%), 0 4px 14px rgb(76 26 117 / 7%);
	--drs-shadow-lift: 0 2px 4px rgb(36 20 41 / 6%), 0 12px 28px rgb(76 26 117 / 13%);
}

/*
 * حالت تاریک با همان ته‌رنگ بنفش.
 *
 * پس‌زمینه‌ی خاکستری خنثی کنار بنفش کدر می‌شود؛ زغالیِ کمی مایل به بنفش
 * پالت را یکدست نگه می‌دارد. بنفش هم روشن‌تر می‌شود چون روی زمینه‌ی تیره
 * ویولتِ عمیق تقریباً سیاه دیده می‌شود.
 *
 * قرمزِ خطر اما در حالت تاریک هم قرمز می‌ماند و از بنفش مشتق نمی‌شود —
 * همان قاعده‌ی بخش روشن.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--drs-bg: #14101a;
		--drs-page: #100c15;
		--drs-bg-subtle: #1b1522;
		--drs-bg-sunken: #241b2d;
		--drs-border: #362a42;
		--drs-border-strong: #4a3a58;

		--drs-text: #ece6f2;
		--drs-text-muted: #a294ae;
		--drs-deep: #f0eaf4;

		--drs-violet: #c39bea;
		--drs-violet-bright: #d4b3f5;
		--drs-violet-deep: #a273d4;
		--drs-violet-tint: #221830;
		--drs-violet-wash: #2e2040;
		--drs-link: var(--drs-violet);

		--drs-warn-bg: #2c2413;
		--drs-warn-border: #d99320;
		--drs-danger-bg: #331819;
		--drs-danger-border: #ef5350;
		--drs-danger-text: #ff9a97;
		--drs-info-bg: #1f1a26;
		--drs-info-border: #5f5169;

		/* نوار در حالت تاریک باید تیره بماند تا متن سفیدش خوانا باشد. */
		--drs-band-a: #1c0530;
		--drs-band-b: #46156e;
	}
}

/* ---------- پایه ---------- */

/*
 * فونت را از راه متغیر خودِ Blocksy می‌دهیم، نه با بازنویسی انتخابگرها.
 *
 * ┌─ چرا، و چطور پیدا شد ────────────────────────────────────────────┐
 * │ شکایت این بود: «صفحات داخلی فونت سیستم‌اند». اندازه‌گیری با       │
 * │ tools/measure-fonts.sh نشان داد دقیقاً چهار عنصر فونت سیستم      │
 * │ گرفته‌اند و هر چهار سرتیترند: h2 مقاله، عنوان صفحه، برچسب فیلد    │
 * │ (که خودش h2 است) و پاصفحه.                                       │
 * │                                                                  │
 * │ علتش در main.min.css خودِ Blocksy است:                            │
 * │   body,h1,h2,h3,h4,h5,h6,label,figcaption,… {                     │
 * │       font-family: var(--theme-font-family) }                     │
 * │                                                                  │
 * │ قاعده‌ی body ما بعدتر می‌آمد و body را می‌برد، ولی h1..h6 فقط      │
 * │ همان قاعده را داشتند — و --theme-font-family پشته‌ی سیستم بود.    │
 * │                                                                  │
 * │ پس بازنویسی سیاهه‌ی انتخابگرها کار اشتباهی بود: هر عنصری که       │
 * │ Blocksy فردا به آن سیاهه اضافه کند، دوباره از قلم می‌افتاد.       │
 * │ عوض کردن خودِ متغیر، همه‌ی آن سیاهه را یک‌جا می‌گیرد.              │
 * │                                                                  │
 * │ ترتیب بارگذاری سنجیده شد، نه فرض: global.css و main.min.css       │
 * │ قالب والد پیش از main.css ما صف می‌شوند، پس این :root برنده است.  │
 * └──────────────────────────────────────────────────────────────────┘
 *
 * §۳٫۳ پلی‌بوک: بعد از سوار کردن قالب، فونتِ واقعاً رندرشده را اندازه
 * بگیر. شکایت «فونت اشتباه است» را با حدس زدن انتخابگر جواب نده.
 */
:root {
	--theme-font-family: var(--drs-font);
}

body {
	font-family: var(--drs-font);
	line-height: var(--drs-leading-body);

	/*
	 * فارسی kerning و ligature لاتین را لازم ندارد و در بعضی مرورگرها
	 * باعث چسبیدن حروف می‌شود. عمداً خاموش.
	 */
	font-kerning: none;
	letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
	line-height: var(--drs-leading-heading);
	font-weight: 700;
}

/* متن اصلی مقاله: سطر کوتاه‌تر = خواندن راحت‌تر */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--drs-measure);
}

/*
 * اعداد داخل متن فارسی با فونت لاتین رندر می‌شوند تا در دوز دارو
 * («۲۵ میلی‌گرم» در برابر «25 mg») ابهام ایجاد نشود.
 */
.drs-num {
	font-family: 'Narengi Latin', var(--drs-font);
	direction: ltr;
	unicode-bidi: isolate;
}

/* ---------- کادرهای پزشکی ---------- */

/*
 * قلاب‌های Blocksy بیرون از .entry-content شلیک می‌شوند، پس این بلوک‌ها
 * محدودیت عرض متن مقاله را به ارث نمی‌برند.
 *
 * دو محدودیت با هم لازم است: روی دسکتاپ طول سطر خوانا حاکم است، و روی
 * موبایل حاشیه‌ی کناری خود Blocksy — که با متغیر خودش گرفته می‌شود نه عدد
 * ثابت، تا اگر کاربر در سفارشی‌ساز عرض را عوض کرد این هم دنبالش برود.
 * بدون شرط دوم، کادرها روی موبایل به لبه‌ی صفحه می‌چسبیدند در حالی که متن
 * مقاله حاشیه داشت.
 */
.drs-callout,
.drs-facts {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin-inline: auto;
}

.drs-callout {
	border-inline-start: 4px solid var(--drs-border);
	background: var(--drs-bg-subtle);
	border-radius: var(--drs-radius);
	padding: 1rem 1.25rem;
	margin-block: 1.5rem;
}

.drs-callout--warning { background: var(--drs-warn-bg);   border-inline-start-color: var(--drs-warn-border); }
.drs-callout--danger  { background: var(--drs-danger-bg); border-inline-start-color: var(--drs-danger-border); }

/* ---------- کادر مراقبت قلبی ---------- */

/*
 * کهربایی، نه قرمز.
 *
 * وسوسه‌ی قرمز کردنش زیاد بود چون نکته‌ی مهمی است. ولی روی این سایت
 * قرمز فقط یک معنا دارد — «همین امشب به اورژانس» — و دو کادر قرمز روی
 * یک صفحه، هر دو را بی‌اثر می‌کند. سمیت قلبی فوریتِ همان شب نیست؛
 * چیزی است که ماه‌ها و سال‌ها باید پیگیری شود.
 *
 * تأکیدش را از جای دیگری می‌گیرد: لبه‌ی ضخیم‌تر، و جمله‌ی ارجاع که
 * کادر کوچکی درون کادر است.
 */
.drs-callout--cardio {
	background: var(--drs-warn-bg);
	border-inline-start-color: var(--drs-warn-border);
	border-inline-start-width: 5px;
}

.drs-callout--cardio ul {
	margin: .6rem 0 0;
	padding-inline-start: 1.1rem;
}

.drs-callout--cardio li {
	margin-block: .25rem;
}

/*
 * جمله‌ی ارجاع به کاردیوآنکولوژی.
 *
 * زمینه‌ی روشن‌تر درون کادر، تا در نگاه سریع هم از بقیه‌ی متن جدا شود.
 * این جمله‌ای است که باید خوانده شود حتی اگر بقیه‌ی کادر رد شود.
 */
.drs-cardio__referral {
	margin: .9rem 0 0;
	padding: .7rem .9rem;
	background: var(--drs-bg);
	border-radius: var(--drs-radius);
	font-size: .95rem;
	line-height: 1.9;
}

/*
 * پیوند «بیشتر بخوانید» درون همان کادر سفید.
 *
 * span است نه p، چون داخل یک پاراگراف می‌نشیند و p تو در تو در HTML
 * نامعتبر است — مرورگر خودش تگ را می‌بندد و چیدمان به هم می‌ریزد.
 * display:block کار جداشدن به سطر تازه را انجام می‌دهد.
 */
.drs-cardio__link {
	display: block;
	margin-block-start: .55rem;
	padding-block-start: .55rem;
	border-block-start: 1px solid var(--drs-border);
	font-size: .9rem;
}
.drs-callout--info    { background: var(--drs-info-bg);   border-inline-start-color: var(--drs-info-border); }

/*
 * «در یک نگاه» بالای مقاله‌های توضیحی.
 *
 * رنگ برند و نه هشدار: این کادر خلاصه است، نه اخطار. قرمز و کهربایی
 * روی این سایت معنای بالینی دارند و خرج کردنشان برای یک خلاصه،
 * ارزششان را جای دیگر کم می‌کند.
 */
.drs-callout--takeaway {
	background: var(--drs-violet-wash);
	border-inline-start-color: var(--drs-violet);
}

.drs-callout--takeaway ul {
	margin: .5rem 0 0;
	padding-inline-start: 1.1rem;
}

.drs-callout--takeaway li {
	margin-block: .3rem;
}

.drs-callout__title {
	font-weight: 700;
	margin: 0 0 .35rem;
}

/* ---------- نوار اعتبار پزشکی ---------- */

/*
 * روی هر مقاله‌ی پزشکی بالای متن می‌نشیند. هم برای اعتماد کاربر است
 * هم سیگنال E-E-A-T برای گوگل: نویسنده، بازبین متخصص، تاریخ بازبینی.
 */
.drs-medical-review {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	align-items: center;
	padding: .85rem 1.1rem;
	background: var(--drs-bg-subtle);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
	font-size: .9rem;
	color: var(--drs-text-muted);
	margin-block-end: 1.75rem;
}

.drs-medical-review__reviewer {
	color: var(--drs-text);
	font-weight: 600;
}

/* ---------- انتساب منبع خبر ---------- */

/*
 * روی هر خبر ترجمه‌شده اجباری است: خلاصه‌ی ما جای منبع را نمی‌گیرد،
 * و لینک بیرونی هم شرط اخلاقی است هم حقوقی.
 */
.drs-source-note {
	border: 1px dashed var(--drs-border);
	border-radius: var(--drs-radius);
	padding: .9rem 1.1rem;
	font-size: .9rem;
	color: var(--drs-text-muted);
	margin-block-start: 2rem;
}

.drs-source-note a {
	color: var(--drs-link);
	word-break: break-word;
}

/* ---------- جدول‌ها (دوز دارو، مقایسه‌ی درمان) ---------- */

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

/* جدول‌های عریض در موبایل باید خودشان اسکرول شوند، نه کل صفحه. */
.entry-content .drs-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--drs-border);
	padding: .6rem .8rem;
	text-align: start;
	vertical-align: top;
}

.entry-content thead th {
	background: var(--drs-bg-sunken);
	font-weight: 700;
}

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

.drs-facts {
	margin-block: 2.5rem;
	padding: 1.5rem 1.75rem;
	background: var(--drs-bg-subtle);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
}

.drs-facts__item + .drs-facts__item {
	margin-block-start: 1.5rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--drs-border);
}

.drs-facts__label {
	margin: 0 0 .6rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--drs-navy);
	line-height: var(--drs-leading-heading);
}

.drs-facts__value {
	margin: 0;
	line-height: var(--drs-leading-body);
}

.drs-facts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drs-facts__list li {
	position: relative;
	padding-inline-start: 1.4rem;
	margin-block-end: .5rem;
	line-height: var(--drs-leading-body);
}

/* نشانه‌ی فهرست دستی — تا در RTL سمت راست بنشیند و رنگ برند بگیرد. */
.drs-facts__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: .35rem;
	inset-block-start: calc(var(--drs-leading-body) * .5em - .18rem);
	width: .36rem;
	height: .36rem;
	border-radius: 50%;
	background: var(--drs-violet);
}

.drs-facts__list li:last-child {
	margin-block-end: 0;
}

@media (max-width: 480px) {
	.drs-facts {
		padding: 1.25rem 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * تصویر شاخص و انتساب
 *
 * تصاویر از ویکی‌مدیا کامنز با مجوز CC می‌آیند. نمایش خط انتساب اختیاری
 * نیست — بخشی از شرط مجوز است. عمداً کوچک و کم‌رنگ ولی خوانا طراحی شده.
 * ------------------------------------------------------------------------ */

.drs-hero-image {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin: 0 auto 2rem;
}

.drs-hero-image__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 26rem;
	object-fit: contain;
	background: var(--drs-bg-subtle);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
}

.drs-hero-image__credit {
	margin-block-start: .6rem;
	font-size: .8rem;
	line-height: 1.9;
	color: var(--drs-text-muted);
	text-align: start;
}

.drs-hero-image__credit a {
	color: var(--drs-link);
}

/* شرح تصویر خود وردپرس داخل figcaption پاراگراف می‌سازد. */
.drs-hero-image__credit p {
	margin: 0;
}

/* ---------- منابع و مطالعه‌ی بیشتر ---------- */

.drs-refs {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin: 2rem auto 0;
	padding: 1.25rem 1.5rem;
	background: var(--drs-bg-subtle);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
}

.drs-refs__title {
	margin: 0 0 .75rem;
	font-size: 1rem;
	color: var(--drs-navy);
}

.drs-refs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drs-refs__list li {
	position: relative;
	padding-inline-start: 1.3rem;
	margin-block-end: .45rem;
	line-height: 1.9;
}

.drs-refs__list li::before {
	content: "↗";
	position: absolute;
	inset-inline-start: 0;
	color: var(--drs-text-muted);
	font-size: .85rem;
}

.drs-refs__list a {
	color: var(--drs-link);
	word-break: break-word;
}

.drs-refs__note {
	margin: .9rem 0 0;
	font-size: .82rem;
	color: var(--drs-text-muted);
}

/* لینک بیماری‌های مرتبط داخل جدول فیلدها */

.drs-facts__list--links li::before {
	background: var(--drs-navy-soft);
}

.drs-facts__list--links a {
	color: var(--drs-link);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.drs-facts__list--links a:hover {
	border-block-end-color: currentColor;
}

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

.drs-gallery {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin: 2.5rem auto 0;
}

.drs-gallery__title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--drs-navy);
}

.drs-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1.1rem;
}

.drs-gallery__item {
	margin: 0;
	background: var(--drs-bg-subtle);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
	overflow: hidden;
}

.drs-gallery__item img {
	display: block;
	width: 100%;
	height: 11rem;
	object-fit: contain;
	background: var(--drs-bg);
}

.drs-gallery__item figcaption {
	padding: .6rem .75rem;
	font-size: .78rem;
	line-height: 1.8;
	color: var(--drs-text-muted);
}

.drs-gallery__item figcaption p {
	margin: 0;
}

.drs-gallery__item a {
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
 * لایه‌ی هویت بصری
 *
 * نسخه‌ی اول کارکردی بود ولی بی‌رنگ: قرمز فقط در برچسب‌های کوچک دیده
 * می‌شد و بقیه سفیدِ تخت بود. اینجا قرمز نقش اصلی را می‌گیرد، سطوح
 * ته‌رنگ گرم پیدا می‌کنند و عمق اضافه می‌شود.
 * ═══════════════════════════════════════════════════════════════════ */

body {
	background: var(--drs-page);
	color: var(--drs-text);
}

/* ---------- نشان برند در سربرگ ---------- */

/*
 * نشانِ کنار عنوان برداشته شد.
 *
 * اینجا یک ::before با تصویر درون‌خطی بود که قلبِ قرمزِ دکتر قلب را
 * می‌کشید — بازمانده‌ی پورت، که در جاروی رنگ‌های پالت قدیم هم گیر
 * نیفتاده بود چون رنگش داخل یک data-URI کدگذاری‌شده پنهان بود.
 *
 * فقط عوضش نکردم، حذفش کردم: لوگوی سایت به‌شکل تصویر آپلود شده و
 * وردپرس خودش آن را می‌چیند. نشانِ دومِ CSS، حتی با روبان درست،
 * تکرار همان لوگو می‌شد.
 */

/*
 * لوگو کنار عنوان بنشیند، نه بالای آن.
 *
 * بلاکسی جای لوگو را با ویژگی data-logo روی .site-branding اعلام
 * می‌کند و برای مقدار top آن را ستونی می‌چیند. انتخابگر را عمداً به
 * همان مقدار مقید کرده‌ایم: اگر روزی از سفارشی‌سازی روی «کنار» گذاشته
 * شود، خودِ بلاکسی کار را می‌کند و این قاعده بی‌صدا از مدار خارج
 * می‌شود — به‌جای آنکه با تنظیم تازه بجنگد.
 *
 * در صفحه‌ی راست‌به‌چپ، row یعنی روبان سمت راستِ عنوان.
 */
.site-branding[data-logo="top"] {
	flex-direction: row;
	align-items: center;
	gap: .5rem;
}

/*
 * اندازه‌ی این عنوان اینجا نیست — در redesign.css است، که پس از این
 * پرونده بارگذاری می‌شود و با ویژگی برابر، برنده می‌شود. اگر font-size
 * را اینجا بنویسید بی‌اثر می‌ماند.
 */
.site-title {
	display: inline-flex !important;
	align-items: center;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--drs-deep);
}

/* ---------- سربرگ ---------- */

header .ct-container,
.ct-header [data-row] {
	background: var(--drs-bg);
}

.ct-header [data-row="middle"] {
	border-block-end: 1px solid var(--drs-border);
}

/* ---------- عناصر داخلی صفحه ---------- */

.drs-facts__label,
.drs-refs__title,
.drs-gallery__title {
	color: var(--drs-deep);
}

.entry-content a,
.drs-refs__list a {
	color: var(--drs-violet);
}

.drs-hero-image__img {
	border-radius: var(--drs-radius-lg);
	box-shadow: var(--drs-shadow);
}

@media (max-width: 30rem) {
	.drs-hero {
		padding-block: 3rem 2.5rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * بلوک‌های سئو: مسیر راهنما، امضای بازبینی، مطالب مرتبط
 * ═══════════════════════════════════════════════════════════════════════ */

.drs-crumbs {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin: 0 auto 1.25rem;
	font-size: .82rem;
	color: var(--drs-text-muted);
}

.drs-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drs-crumbs__item + .drs-crumbs__item::before {
	content: "‹";        /* در راست‌به‌چپ، جهت حرکت رو به چپ است */
	margin-inline-end: .55rem;
	color: var(--drs-border-strong);
}

.drs-crumbs__item a {
	color: var(--drs-text-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.drs-crumbs__item a:hover,
.drs-crumbs__item a:focus-visible {
	color: var(--drs-violet);
	border-bottom-color: var(--drs-violet-wash);
}

.drs-crumbs__item [aria-current] {
	color: var(--drs-text);
	font-weight: 600;
}

.drs-review {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin: 2rem auto 0;
	padding: .9rem 1.25rem;
	background: var(--drs-violet-tint);
	border-inline-start: 3px solid var(--drs-violet);
	border-radius: var(--drs-radius);
	font-size: .88rem;
}

.drs-review p {
	margin: 0;
}

.drs-review__on {
	margin-top: .2rem;
	color: var(--drs-text-muted);
	font-size: .82rem;
}

/* ---------- نام نویسنده ---------- */

/*
 * یک سطر کم‌صدا زیر عنوان. عمداً از رنگ متن معمولی روشن‌تر است و
 * برجسته‌تر از آن نمی‌شود: خبرِ صفحه، عنوان است نه امضا.
 */
.drs-byline {
	margin: 0 0 1.25rem;
	font-size: .9rem;
	color: var(--drs-muted);
}

.drs-byline__label {
	opacity: .8;
}

.drs-byline__name {
	font-weight: 600;
	color: var(--drs-text);
}

/* ---------- بیشتر بخوانید (پیوند میان‌بخشی) ---------- */

/*
 * ظاهرش عمداً با .drs-related یکی است تا دو بلوکِ پشت‌سرهم یک چیز به
 * نظر برسند؛ تفاوتشان در محتواست نه در شکل. فقط برچسب نوع اضافه دارد،
 * چون اینجا خواننده باید بداند پیوند او را به کدام بخش می‌برد.
 */
.drs-cross {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin: 2rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--drs-border);
}

.drs-cross__title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--drs-deep);
}

.drs-cross__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: .5rem .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drs-cross__item {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	flex-wrap: wrap;
	padding: .55rem .8rem;
	background: var(--drs-bg-subtle);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
	font-size: .9rem;
}

.drs-cross__item a {
	color: var(--drs-text);
	text-decoration: none;
}

.drs-cross__item:hover,
.drs-cross__item:focus-within {
	background: var(--drs-violet-tint);
	border-color: var(--drs-violet-bright);
}

.drs-cross__item:hover a,
.drs-cross__item:focus-within a {
	color: var(--drs-violet-deep);
}

.drs-cross__kind {
	font-size: .75rem;
	color: var(--drs-muted);
	white-space: nowrap;
}
.drs-related {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin: 2.5rem auto 0;
	padding-top: 1.75rem;
	border-top: 2px solid var(--drs-violet-wash);
}

.drs-related__title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--drs-deep);
}

.drs-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: .5rem .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drs-related__item a {
	display: block;
	padding: .55rem .8rem;
	background: var(--drs-bg-subtle);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
	color: var(--drs-text);
	font-size: .9rem;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease;
}

.drs-related__item a:hover,
.drs-related__item a:focus-visible {
	background: var(--drs-violet-tint);
	border-color: var(--drs-violet-bright);
	color: var(--drs-violet-deep);
}

.drs-related__all {
	margin: 1rem 0 0;
	font-size: .85rem;
}

.drs-foot-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-inline-start: .6rem;
}

.drs-foot-sep {
	margin-inline: .35rem;
	opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ستون‌های آرشیو برای پست‌تایپ‌هایی که Blocksy قاعده‌شان را نساخته
 *
 * Blocksy برای هر پست‌تایپ یک قاعده با data-prefix تولید می‌کند، اما فقط
 * برای آن‌هایی که هنگام ذخیره‌ی تنظیمات وجود داشتند. «ابزارهای تشخیص»
 * بعد از آن اضافه شد و بی‌قاعده ماند، پس تک‌ستونی نمایش داده می‌شد.
 *
 * اینجا همان قاعده را برایش (و برای پزشکان و اخبار که همین وضع را دارند)
 * می‌نویسیم تا با داروها و بیماری‌ها یکدست شود.
 * ═══════════════════════════════════════════════════════════════════════ */

[data-prefix="drs_test_archive"] .entries,
[data-prefix="drs_doctor_archive"] .entries,
[data-prefix="drs_news_archive"] .entries {
	--grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 999.98px) {
	[data-prefix="drs_test_archive"] .entries,
	[data-prefix="drs_doctor_archive"] .entries,
	[data-prefix="drs_news_archive"] .entries {
		--grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 689.98px) {
	[data-prefix="drs_test_archive"] .entries,
	[data-prefix="drs_doctor_archive"] .entries,
	[data-prefix="drs_news_archive"] .entries {
		--grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * جدول‌های داخل متن (آمار، نام‌های تجاری)
 *
 * جدول روی موبایل مشکل همیشگی دارد: یا می‌شکند یا کل صفحه را افقی
 * می‌کشد. راه‌حل، اسکرول افقی داخل خودِ جدول است تا بدنه‌ی صفحه هرگز
 * افقی حرکت نکند.
 * ═══════════════════════════════════════════════════════════════════════ */

.entry-content .wp-block-table {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin-inline: auto;
	margin-block: 2rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content .wp-block-table table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: .92rem;
	background: var(--drs-bg);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
	overflow: hidden;
}

.entry-content .wp-block-table thead th {
	padding: .7rem .85rem;
	background: var(--drs-violet);
	color: #fff;
	font-weight: 700;
	font-size: .88rem;
	text-align: start;
	border: 0;
}

.entry-content .wp-block-table tbody td {
	padding: .65rem .85rem;
	border-top: 1px solid var(--drs-border);
	text-align: start;
	vertical-align: middle;
}

/* ردیف‌های یک‌درمیان، تا چشم در جدول‌های بلند خط را گم نکند. */
.entry-content .wp-block-table tbody tr:nth-child(even) {
	background: var(--drs-bg-subtle);
}

/* ردیف «کل» معمولاً آخرین ردیف است و باید از بقیه جدا دیده شود. */
.entry-content .wp-block-table tbody tr:last-child {
	border-top: 2px solid var(--drs-border-strong);
	font-weight: 600;
}

.entry-content .wp-block-table figcaption {
	margin-top: .6rem;
	color: var(--drs-text-muted);
	font-size: .8rem;
	line-height: 1.85;
	text-align: start;
}

/* تصویر بسته‌بندی دارو داخل جدول. */
.entry-content .wp-block-table td img {
	display: block;
	max-width: 110px;
	height: auto;
	border-radius: 4px;
	border: 1px solid var(--drs-border);
}

/* ═══════════════════════════════════════════════════════════════════════
 * جدول نام‌های تجاری دارو
 * ═══════════════════════════════════════════════════════════════════════ */

.drs-brands {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin: 2.5rem auto 0;
}

.drs-brands__title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--drs-deep);
}

/* اسکرول افقی داخل قاب، تا بدنه‌ی صفحه روی موبایل افقی حرکت نکند. */
.drs-brands__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius);
}

.drs-brands__table {
	width: 100%;
	min-width: 24rem;
	border-collapse: collapse;
	font-size: .92rem;
	background: var(--drs-bg);
}

.drs-brands__table th {
	padding: .7rem .85rem;
	background: var(--drs-violet);
	color: #fff;
	font-size: .86rem;
	font-weight: 700;
	text-align: start;
}

.drs-brands__table td {
	padding: .6rem .85rem;
	border-top: 1px solid var(--drs-border);
	text-align: start;
	vertical-align: middle;
}

.drs-brands__table tbody tr:nth-child(even) {
	background: var(--drs-bg-subtle);
}

.drs-brands__name {
	font-weight: 600;
	color: var(--drs-violet-deep);
}

.drs-brands__pic {
	width: 130px;
}

.drs-brands__pic img {
	display: block;
	width: 100%;
	max-width: 110px;
	height: auto;
	border: 1px solid var(--drs-border);
	border-radius: 4px;
	background: #fff;
}

.drs-brands__nopic {
	color: var(--drs-border-strong);
}

.drs-brands__note,
.drs-brands__verify,
.drs-brands__credit {
	margin: .75rem 0 0;
	font-size: .84rem;
	line-height: 1.9;
	color: var(--drs-text-muted);
}

/*
 * راهنمای راستی‌آزمایی کد IRC.
 *
 * عمداً کادر دارد و نه فقط متن خاکستری: این تنها جای صفحه است که به
 * خواننده کاری می‌دهد تا خودش داده را بسنجد، و اگر مثل بقیه‌ی یادداشت‌ها
 * محو باشد خوانده نمی‌شود.
 */
.drs-brands__verify,
.drs-verify {
	padding: .7rem .9rem;
	border: 1px solid var(--drs-info-border);
	border-radius: var(--drs-radius);
	background: var(--drs-info-bg);
	color: var(--drs-text);
}

.drs-verify {
	margin: 1.25rem 0 0;
	font-size: .88rem;
	line-height: 1.9;
}

/*
 * سه حالت تأیید پروفایل، با تشدید عمدی رنگ.
 *
 * قرمز اینجا **به کار نمی‌رود** و این تصمیم است نه فراموشی: روی این
 * سایت قرمز فقط یک معنا دارد — خطر بالینی («تب در نوتروپنی»، «فوری به
 * پزشک بگویید»). اگر «پروفایل تأییدنشده» هم قرمز شود، قرمز رقیق می‌شود
 * و آن‌وقت کادری که واقعاً باید بیمار را به اورژانس بفرستد، یکی از چند
 * کادر قرمز صفحه است.
 *
 * پس تشدید این‌طور است: بنفشِ برند برای «ما بررسی کردیم»، خاکستریِ پایه
 * برای «خودش گفته»، و کهربایی برای «تأیید نشده».
 */
.drs-verify--ok {
	border-color: var(--drs-violet);
	background: var(--drs-violet-tint);
}

.drs-verify--claimed {
	/* همان ظاهر پایه؛ صریح نوشته شده تا حذفِ سهوی‌اش دیده شود. */
	border-color: var(--drs-info-border);
	background: var(--drs-info-bg);
}

.drs-verify--none {
	border-color: var(--drs-warn-border);
	background: var(--drs-warn-bg);
}

.drs-verify__on {
	color: var(--drs-text-muted);
	white-space: nowrap;
}

/* ---------- آمار بقا ---------- */

/*
 * لبه‌ی بنفش نشان می‌دهد این بند با بقیه‌ی بندهای صفحه یکی نیست: عددی
 * است که بی‌بستر خوانده‌شدنش زیان دارد.
 */
.drs-survival {
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--drs-violet);
}

.drs-survival__caveat {
	margin: .75rem 0 0;
	padding: .7rem .9rem;
	font-size: .9rem;
	line-height: 1.85;
	color: var(--drs-text);
	background: var(--drs-info-bg);
	border-radius: var(--drs-radius);
}

.drs-survival__source {
	margin: .6rem 0 0;
	font-size: .82rem;
	color: var(--drs-text-muted);
}

.drs-brands__credit {
	padding-top: .6rem;
	border-top: 1px dashed var(--drs-border);
	font-size: .78rem;
}

/* ---------- فرم ارتباط با ما ---------- */

/*
 * تله‌ی ربات. با display:none پنهان می‌شود و نه با بیرون بردن از کادر:
 * فیلد بیرون‌از‌کادر را پرکن خودکار مرورگر می‌تواند پر کند و آن‌وقت پیام
 * کاربرِ واقعی به‌عنوان هرزنامه رد می‌شود. فیلد از پیش aria-hidden و
 * tabindex="-1" دارد، پس چیزی از دسترس‌پذیری کم نمی‌شود.
 */
.drs-contact__trap {
	display: none !important;
}

.drs-contact {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin-inline: auto;
	margin-block: 1.5rem;
	padding: 1.25rem 1.25rem 1rem;
	background: var(--drs-bg-subtle);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-lg);
}

.drs-contact__row {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin-block: 0 1rem;
}

.drs-contact__row label {
	font-weight: 600;
	font-size: .92rem;
}

.drs-contact__req {
	color: var(--drs-violet);
}

.drs-contact input[type="text"],
.drs-contact input[type="email"],
.drs-contact select,
.drs-contact textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: .6rem .75rem;
	font: inherit;
	font-size: .95rem;
	color: var(--drs-text);
	background: var(--drs-bg);
	border: 1px solid var(--drs-border-strong);
	border-radius: var(--drs-radius);
}

.drs-contact textarea {
	min-height: 9rem;
	line-height: var(--drs-leading-body);
	resize: vertical;
}

.drs-contact :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--drs-link);
	outline-offset: 1px;
	border-color: var(--drs-link);
}

.drs-contact__hint {
	margin: 0;
	font-size: .82rem;
	color: var(--drs-text-muted);
}

.drs-contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-block: 1.25rem 0;
}

.drs-btn {
	display: inline-block;
	padding: .7rem 1.6rem;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--drs-violet);
	border: 0;
	border-radius: var(--drs-radius);
	cursor: pointer;
}

.drs-btn:hover,
.drs-btn:focus-visible {
	background: var(--drs-violet-deep);
	color: #fff;
}

/* پاسخ پس از ارسال؛ هم‌خانواده‌ی .drs-callout است تا یکدست بماند. */
.drs-note {
	width: min(var(--drs-measure), var(--theme-container-edge-spacing, 100%));
	margin-inline: auto;
	margin-block: 1.5rem;
	padding: 1rem 1.25rem;
	border-inline-start: 4px solid var(--drs-border);
	background: var(--drs-bg-subtle);
	border-radius: var(--drs-radius);
}

.drs-note p:last-child {
	margin-bottom: 0;
}

.drs-note--info   { background: var(--drs-info-bg);   border-inline-start-color: var(--drs-info-border); }
.drs-note--danger { background: var(--drs-danger-bg); border-inline-start-color: var(--drs-danger-border); }