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

:root {
	/*
	 * قرمز حالا رنگ اصلی است نه لهجه.
	 *
	 * تفاوت میان قرمزِ هشدار بالینی و قرمزِ برند در اشباع و گرمای آن است:
	 * این کریمسون عمیق و کمی گرم، حس اطمینان می‌دهد نه اضطراب. برای
	 * هشدارهای واقعی از قرمز روشن‌تر و پس‌زمینه‌ی متفاوت استفاده می‌شود
	 * تا مرزشان با رنگ برند مخدوش نشود.
	 */
	--drg-red: #c4162f;
	--drg-red-deep: #8e0c21;
	--drg-red-bright: #e23b4e;
	--drg-red-tint: #fdf0f2;
	--drg-red-wash: #fae3e7;

	/* لنگر تیره — به‌جای سرمه‌ای سرد، زغالیِ گرم که کنار قرمز نمی‌جنگد. */
	--drg-deep: #2a1418;
	--drg-navy: var(--drg-deep);
	--drg-navy-soft: #5c2b33;

	/* سطوح: سفیدِ گرم به‌جای سفیدِ خالص که بی‌روح دیده می‌شد. */
	--drg-bg: #ffffff;
	--drg-page: #fdfaf9;
	--drg-bg-subtle: #faf5f4;
	--drg-bg-sunken: #f4eae9;
	--drg-border: #ecdfdd;
	--drg-border-strong: #dcc7c5;

	/* متن */
	--drg-text: #2a1d1f;
	--drg-text-muted: #7a6468;
	--drg-link: var(--drg-red);

	/* رنگ‌های معنایی برای کادرهای پزشکی */
	--drg-warn-bg: #fff6e6;
	--drg-warn-border: #e0a33a;
	--drg-danger-bg: #fdeaec;
	--drg-danger-border: var(--drg-red-bright);
	/*
	 * کادر «اطلاع» عمداً آبی نیست.
	 *
	 * آبی کنار پالت قرمز ناهماهنگ می‌زند و چشم را می‌شکند. خاکستریِ گرم
	 * همان نقش «این را بخوان ولی هشدار نیست» را بازی می‌کند بدون اینکه
	 * با هویت سایت بجنگد.
	 */
	--drg-info-bg: #f6f1ee;
	--drg-info-border: #b99c92;

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

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

	/* تایپوگرافی */
	--drg-font: 'Narengi', 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;

	/*
	 * دو متغیر قالب مادر هم باید همین فونت را بگیرند.
	 *
	 * چرا لازم است: Blocksy فونت را روی body نمی‌گذارد، از این دو
	 * متغیر می‌خواند و آن‌ها را روی سرتیترها، عنوان کارت، چکیده و
	 * متای مطلب می‌نشاند. پس گذاشتن فونت روی body کافی نیست و آن
	 * بخش‌ها با فونت *سیستم* رندر می‌شدند — نه فونت سایت. این را روی
	 * صفحه اندازه گرفتم: font-family محاسبه‌شده‌ی .entry-title برابر
	 * «-apple-system, BlinkMacSystemFont, Segoe UI…» بود.
	 *
	 * یعنی این عنوان‌ها پیش از این هم فونت سایت را نداشتند؛ مسئله با
	 * عوض کردن فونت تازه نشد، فقط دیده شد.
	 *
	 * بازنویسی این دو متغیر، همه‌ی آن عنصرها را یک‌جا درست می‌کند و
	 * نیازی به تعقیب تک‌تک گزینه‌گرهای قالب مادر نیست.
	 *
	 * !important برداشته نشود. قالب مادر همین دو متغیر را در یک
	 * <style> درون‌خطی و *پس از* شیوه‌نامه‌ی این قالب چاپ می‌کند —
	 * ترتیب بارگذاری را روی صفحه شمردم: main.css این قالب در جایگاه
	 * ۱۲ است و آن style درون‌خطی در جایگاه ۱۶. بی !important، تعریف
	 * دیرتر برنده می‌شود و فونت دوباره به فونت سیستم برمی‌گردد.
	 */
	--theme-font-family: var(--drg-font) !important;
	--theme-font-stack-default: var(--drg-font) !important;
	--drg-text-size: 1.1875rem;   /* ۱۹px — مایو ۲۰px می‌نشیند؛ فارسی در همین حد راحت است. */
	--drg-leading-body: 1.85;     /* ۲ برای متن بلند فارسی گشاد بود، ۱٫۴ مایو تنگ. */
	--drg-leading-heading: 1.6;
	--drg-measure: 68ch;        /* طول سطر خوانا برای متن طولانی. */

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

	/* سایه‌ها ته‌رنگ قرمز دارند تا با پالت یکی شوند، نه خاکستری خنثی. */
	--drg-shadow: 0 1px 2px rgb(42 20 24 / 5%), 0 4px 14px rgb(142 12 33 / 6%);
	--drg-shadow-lift: 0 2px 4px rgb(42 20 24 / 6%), 0 12px 28px rgb(142 12 33 / 12%);
}

/*
 * حالت تاریک با همان ته‌رنگ گرم.
 *
 * پس‌زمینه‌ی خاکستری خنثی کنار قرمز کدر می‌شود؛ زغالیِ کمی مایل به قرمز
 * پالت را یکدست نگه می‌دارد. قرمز هم روشن‌تر می‌شود چون روی زمینه‌ی تیره
 * کریمسون عمیق تقریباً سیاه دیده می‌شود.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--drg-bg: #161012;
		--drg-page: #120c0e;
		--drg-bg-subtle: #1d1518;
		--drg-bg-sunken: #251a1e;
		--drg-border: #3a2a2e;
		--drg-border-strong: #4e373c;

		--drg-text: #f0e6e6;
		--drg-text-muted: #a89296;
		--drg-deep: #f4ecec;

		--drg-red: #f26a7a;
		--drg-red-bright: #ff8494;
		--drg-red-deep: #e23b4e;
		--drg-red-tint: #2a161a;
		--drg-red-wash: #3a1c22;
		--drg-link: var(--drg-red);

		--drg-warn-bg: #2e2413;
		--drg-danger-bg: #38191d;
		--drg-info-bg: #241c19;
		--drg-info-border: #6b564e;

		/* نوار در حالت تاریک باید تیره بماند تا متن سفیدش خوانا باشد. */
		--drg-band-a: #2a0409;
		--drg-band-b: #7d0a1d;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.drg-gallery__item a {
	display: block;
}

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

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

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

/*
 * لوگو به‌صورت data-URI در CSS می‌آید نه فایل رسانه.
 *
 * دلیلش این است که وردپرس آپلود SVG را مسدود می‌کند و باز کردن آن راه
 * ریسک امنیتی دارد. این روش کنترل کامل می‌دهد، درخواست HTTP اضافه
 * نمی‌سازد و با رنگ‌های قالب هماهنگ می‌ماند.
 */
.site-title {
	display: inline-flex !important;
	align-items: center;
	gap: .55em;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--drg-deep);
}

.site-title::before {
	content: "";
	flex: none;
	width: 1.45em;
	height: 1.45em;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='.1' y1='0' x2='.9' y2='1'%3E%3Cstop offset='0' stop-color='%23E23B4E'/%3E%3Cstop offset='.55' stop-color='%23C4162F'/%3E%3Cstop offset='1' stop-color='%238E0C21'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23h)' d='M32 57.5C32 57.5 4.5 39.2 4.5 22.4 4.5 12.2 12.5 4.5 21.8 4.5c4.7 0 8.5 2.3 10.2 5.8 1.7-3.5 5.5-5.8 10.2-5.8 9.3 0 17.3 7.7 17.3 17.9C59.5 39.2 32 57.5 32 57.5Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' d='M10.5 26.5h8.7l3.6-7.6 5.9 16.6 4.6-10.4 2.6 1.4h17.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

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

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

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

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

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

.entry-content a,
.drg-refs__list a {
	color: var(--drg-red);
}

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

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

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

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

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

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

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

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

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

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

.drg-review p {
	margin: 0;
}

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

.drg-related {
	width: min(var(--drg-measure), var(--theme-container-edge-spacing, 100%));
	margin: 2.5rem auto 0;
	padding-top: 1.75rem;
	border-top: 2px solid var(--drg-red-wash);
}

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

.drg-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;
}

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

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

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

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

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

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

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

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

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

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

.entry-content .wp-block-table {
	width: min(var(--drg-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(--drg-bg);
	border: 1px solid var(--drg-border);
	border-radius: var(--drg-radius);
	overflow: hidden;
}

.entry-content .wp-block-table thead th {
	padding: .7rem .85rem;
	background: var(--drg-red);
	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(--drg-border);
	text-align: start;
	vertical-align: middle;
}

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

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

.entry-content .wp-block-table figcaption {
	margin-top: .6rem;
	color: var(--drg-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(--drg-border);
}

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

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

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

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

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

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

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

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

.drg-brands__name {
	font-weight: 600;
	color: var(--drg-red-deep);
}

.drg-brands__pic {
	width: 130px;
}

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

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

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

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

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

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

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

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

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

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

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

.drg-contact__req {
	color: var(--drg-red);
}

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

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

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

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

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

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

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

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

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

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