/* ===================================================================
   استایل‌های واکنش‌گرا (موبایل) — چون بیشتر دیزاین با استایل inline
   نوشته شده، این قوانین با !important آن‌ها را در سایزهای کوچک بازنویسی می‌کنند.
   =================================================================== */

/* ---------- سازگاری با نوار مدیریت وردپرس (Admin Bar) ----------
   چون هدر ما position:fixed است، برخلاف بقیه‌ی صفحه از margin-top خودکار
   نوار مدیریت پیروی نمی‌کند و باید دستی جابه‌جا شود، وگرنه نوار مدیریت
   رویش می‌افتد و نصفه به نظر می‌رسد. */
body.admin-bar .honar-site-header {
	top: 32px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .honar-site-header {
		top: 46px !important;
	}
}

/* ---------- هدر (چسبان/fixed در دسکتاپ) ---------- */
.honar-header-spacer { height: 74px; }

@media (max-width: 680px) {
	.honar-header-spacer { height: 66px; }
	.honar-site-header-inner {
		gap: 8px !important;
		padding: 10px 14px !important;
	}
	.honar-site-logo-text { display: none !important; }
	.honar-brand-mark { width: 34px !important; height: 34px !important; }
	.honar-brand-mark i { font-size: 17px !important; }

	/* دقیقاً مثل نسخهٔ اولیه: نوبار مرکزی هدر در موبایل کاملاً حذف و با
	   نوبار پایین (bottom nav) جایگزین می‌شود. */
	.honar-site-nav { display: none !important; }
	.honar-bottom-nav { display: flex !important; }

	.honar-header-login-text { display: none !important; }
	.honar-header-login {
		padding: 0 12px !important;
		gap: 0 !important;
	}

	/* فضای اضافه پایین صفحه تا محتوا زیر نوبار شناور پنهان نشود */
	.honar-main {
		padding-bottom: 120px !important;
	}
}

/* ---------- فوتر ---------- */
@media (max-width: 600px) {
	.honar-footer-grid {
		grid-template-columns: 1fr !important;
		text-align: center;
		gap: 26px !important;
	}
	.honar-footer-grid > div > div,
	.honar-footer-grid > div > ul {
		align-items: center !important;
		justify-content: center !important;
	}
	.honar-footer-grid p {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ---------- بنر اصلی صفحه خانه ---------- */
@media (max-width: 760px) {
	.honar-hero-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- صفحه جزئیات دوره ---------- */
@media (max-width: 760px) {
	.honar-course-grid {
		grid-template-columns: 1fr !important;
	}
	.honar-course-sidebar {
		position: static !important;
		top: auto !important;
		margin-top: 18px !important;
	}
}

/* ---------- گرید مقالات (صفحه بلاگ) ---------- */
@media (max-width: 560px) {
	.honar-blog-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- صفحه تک‌مقاله: سایدبارهای چسبان ---------- */
@media (max-width: 900px) {
	.honar-article-layout {
		grid-template-columns: 1fr !important;
	}
	.honar-article-main { order: 1; }
	.honar-article-sidebar-left { order: 2; }
	.honar-article-sidebar {
		position: static !important;
		top: auto !important;
	}
}

/* توجه: قبلاً اینجا overflow-x:hidden روی body تنظیم شده بود که باعث می‌شد
   هدر sticky در حین اسکرول به‌درستی نچسبد (این یک محدودیت شناخته‌شدهٔ CSS است:
   هر مقدار غیر از visible برای overflow روی body/html، رفتار position:sticky
   فرزندانش را می‌شکند). به همین دلیل حذف شد. */