/* ===================== ریست پایه و تایپوگرافی ===================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

/**
 * چرا این لازمه: هر جای سایت (هر پلاگین/ویجت المنتوری) که یه عنصر حتی چند
 * پیکسل عریض‌تر از موبایل داشته باشه (مثلاً به‌خاطر یه باگ CSS جزئی جایی)،
 * بدون overflow-x:hidden رو خودِ body، کل «viewport منطقی» صفحه (نه فقط
 * همون عنصر) عریض‌تر می‌شه — و چون هدر ثابت (`position:fixed`) عرضش رو از
 * همون viewport می‌گیره، کل هدر هم با بقیه‌ی صفحه به چپ/راست اسکرول
 * می‌شد، حتی وقتی خودِ هدر مشکلی نداشت. این یه محافظ عمومی و همیشگیه، نه
 * وابسته به پیدا/رفع‌کردن اون یه عنصر خاص.
 */
body {
	margin: 0;
	font-family: var(--tp-font-family, 'Vazirmatn'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
	background: var(--tp-bg);
	color: var(--tp-text);
	transition: background-color .2s ease, color .2s ease;
	direction: rtl;
	overflow-x: hidden;
	max-width: 100vw;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* رنگ‌های پیش‌فرض؛ مقادیر واقعی رو functions.php (بر اساس تنظیمات شخصی‌ساز)
   با یه <style> تو wp_head بازنویسی می‌کنه — این‌ها فقط fallback‌ان اگه به
   هر دلیلی اون استایل لود نشد. */
:root,
html[data-theme="dark"] {
	--tp-accent: #2AA8A0;
	--tp-accent-2: #6ee7de;
	--tp-bg: #171325;
	--tp-card-bg: #1d1930;
	--tp-card-bg-2: #241f3d;
	--tp-text: #F5F0E8;
	--tp-text-muted: #a79fc2;
	--tp-border: #322b4d;
	--tp-shadow: 0 10px 30px rgba(0,0,0,.35);
}

html[data-theme="light"] {
	--tp-bg: #F1EEFA;
	--tp-card-bg: #ffffff;
	--tp-card-bg-2: #E8E3F5;
	--tp-text: #201B33;
	--tp-text-muted: #6f6690;
	--tp-border: #DFD8F0;
	--tp-shadow: 0 8px 24px rgba(40,20,80,.08);
}

/* ===================== اسکلت صفحه ===================== */

.tp-site { min-height: 100vh; display: flex; flex-direction: column; }
/**
 * چرا این padding-bottom لازمه: پلاگین سوم‌شخصِ «mobile_footer_menu»
 * (نوار پایینِ موبایل با آیکن‌های تلگرام/پادکست‌ها/خانه/دانلود اپ — نگاه
 * کن به class="toolbar-bottom") یه نوار position:fixed رو پایین صفحه
 * می‌ذاره، ولی خودش هیچ فضایی برای محتوای واقعیِ زیرش کنار نمی‌ذاره —
 * وقتی کاربر تا ته صفحه اسکرول می‌کنه، آخرین بخش محتوا زیر همین نوار گم
 * می‌شه (رو قالب قدیمی این مشکل نبود، چون اون تم فضای پایین صفحه رو خودش
 * جبران می‌کرد). --tp-footer-bar-offset رو یه اسکریپت کوچیک تو
 * wp_footer اندازه‌ی واقعیِ اون نوار رو ست می‌کنه (نگاه کن به
 * tp_theme_print_footer_bar_offset_script تو functions.php)، پس اگه اون
 * پلاگین غیرفعال/حذف بشه یا رو دسکتاپ (که نوار نمایش داده نمی‌شه) این
 * مقدار خودکار صفر می‌مونه.
 */
.tp-site-content { flex: 1; padding-bottom: var(--tp-footer-bar-offset, 0px); }

/**
 * خطِ زیرِ متنِ هر آیکنِ نوار mobile_footer_menu (کاربر گزارش داد که قبل از
 * این تم مشکلی نداشت): خودِ پلاگین یه CSS داره که این آندرلاینِ پیش‌فرضِ
 * لینک رو حذف می‌کنه، ولی رو این سایت WP Rocket («Remove Unused CSS») گاهی
 * دقیقاً همین بخش از CSS پلاگین رو از فایل کش‌شده حذف می‌کنه (تأیید شده با
 * بررسی زنده‌ی خودِ فایل کش‌شده) — این یه رفتار شناخته‌شده و قبلاً هم رو
 * همین سایت دیده‌شده‌ی WP Rocket‌ه (نگاه کن به کشف مشابه تو
 * tp-feed-generator/PROGRESS.md، لینک دانلود اپیزود). به‌جای وابسته‌بودن به
 * درست‌ماندن تنظیمات کش (که ممکنه هر بار کش دوباره ساخته بشه دوباره خراب
 * بشه)، همین یه قانونِ کوچیک رو مستقیم تو تمِ خودمون هم می‌ذاریم تا
 * مستقل از رفتار WP Rocket همیشه درست بمونه.
 */
#toolbar-bottom .tab-link,
#toolbar-bottom .tab-link p { text-decoration: none !important; }

.tp-fallback-header,
.tp-fallback-footer {
	background: var(--tp-card-bg);
	border-bottom: 1px solid var(--tp-border);
	padding: 16px 24px;
}
.tp-fallback-footer { border-bottom: none; border-top: 1px solid var(--tp-border); margin-top: 40px; }
.tp-fallback-header a.tp-site-title { font-weight: 800; font-size: 18px; text-decoration: none; color: var(--tp-text); }

/**
 * قبلاً حداکثر ۹۰۰px بود — برای متن ساده مناسب بود، ولی روی صفحات
 * اختصاصی پادکست (که محتواشون فقط یه شورت‌کدِ پلاگینه، نه متن طولانی)
 * خیلی باریک به‌نظر می‌رسید و فاصله‌ی بالای صفحه هم زیاد بود. الان
 * هم‌عرض با بقیه‌ی سایت (۱۳۲۰px) شده؛ برای متن‌های ساده هم مشکلی نیست
 * چون `max-width` فقط سقفه، نه عرض اجباری.
 */
.tp-fallback-content { max-width: 1320px; margin: 24px auto 40px; padding: 0 24px; }
.tp-fallback-content h1 { font-size: 26px; font-weight: 800; margin: 0 0 20px; color: var(--tp-text); }

/**
 * محافظ رنگ متن: بعضی پست‌های قدیمی/کپی‌شده رنگ متن رو صریح تو خودِ
 * HTML (نه از طریق تمِ سایت) ست کرده بودن (مثلاً از Word/Google Docs
 * پیست شده) — تو تمِ تاریک همون رنگ‌های قدیمی (اغلب مشکی) باعث
 * ناخوانا شدن متن می‌شد. این قانون‌ها رنگ متن رو به رنگ درستِ تمِ فعلی
 * برمی‌گردونن، مگر جایی که واقعاً رنگ اختصاصی (مثل لینک‌ها) لازمه.
 */
.tp-fallback-content p,
.tp-fallback-content li,
.tp-fallback-content span,
.tp-fallback-content strong,
.tp-fallback-content em,
.tp-fallback-content h2,
.tp-fallback-content h3,
.tp-fallback-content h4 { color: var(--tp-text) !important; }

/* ===================== صفحه‌ی ۴۰۴ (به شکل بلوک کد JSON) ===================== */
.tp-404-wrap { max-width: 720px; margin: 48px auto 60px; padding: 0 24px; }
.tp-404-code {
	background: #1e1e2e;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--tp-shadow);
	margin-bottom: 28px;
}
.tp-404-titlebar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: #14141f;
}
.tp-404-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.tp-404-filename {
	margin-right: auto;
	font-family: 'Vazirmatn', sans-serif;
	font-size: 12.5px;
	color: rgba(245,240,232,0.5);
}
.tp-404-pre {
	margin: 0;
	padding: 22px 20px;
	overflow-x: auto;
	direction: ltr;
	text-align: left;
}
.tp-404-pre code {
	font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 13.5px;
	line-height: 1.9;
	white-space: pre;
}
.tp-404-key { color: #7dd3fc; }
.tp-404-str { color: #a3e635; }
.tp-404-num { color: #fb923c; }
.tp-404-punct { color: rgba(245,240,232,0.55); }
.tp-404-search { max-width: 100%; }
.tp-404-home { text-align: center; margin-top: 20px; }
.tp-404-home a {
	color: var(--tp-text-muted);
	text-decoration: none;
	font-size: 14px;
	transition: color .15s ease;
}
.tp-404-home a:hover { color: var(--tp-accent); }

/* ===================== دکمه‌ی تغییر تم سراسری ===================== */
/* هر المانی با همین کلاس، رو هر صفحه‌ای، خودکار به دکمه‌ی تغییر تم تبدیل
   می‌شه (نگاه کن به assets/js/theme-toggle.js) — چه از طریق شورت‌کد
   [tp_theme_toggle] گذاشته شده باشه، چه دستی تو یه ویجت HTML المنتور. */
.tp-theme-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--tp-border);
	background: var(--tp-card-bg);
	color: var(--tp-text);
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease, background .15s ease;
	padding: 0;
}
.tp-theme-toggle-btn:hover { border-color: var(--tp-accent); transform: translateY(-2px); }
.tp-theme-toggle-btn svg { width: 18px; height: 18px; display: block; }
.tp-theme-toggle-btn .tp-icon-sun,
.tp-theme-toggle-btn .tp-icon-moon { display: none; }
html[data-theme="dark"] .tp-theme-toggle-btn .tp-icon-sun { display: flex; }
html[data-theme="light"] .tp-theme-toggle-btn .tp-icon-moon { display: flex; }