/*
** راهنمای استایل‌دهی و رسپانسیو برای ویرایشگر بلوک **

این بخش شامل کدهای CSS است که برای دستیابی به طراحی منحصر به فرد، رنگ‌بندی زیبا
و قابلیت نمایش رسپانسیو بر روی انواع دستگاه‌ها (موبایل، تبلت، لپ‌تاپ، تلویزیون)
در نظر گرفته شده است. لطفاً این کدها را در بخش CSS سفارشی (Custom CSS)
ویرایشگر سایت خود یا در فایل style.css قالب خود قرار دهید.
محتوای مقاله در داخل تگ

قرار می‌گیرد.
*/

/* Base Styles: تنظیمات عمومی فونت، ارتفاع خط و رنگ متن برای کل بدنه */
body {
font-family: ‘B Nazanin’, ‘Iranian Sans’, Arial, sans-serif; /* فونت پیشنهادی: B Nazanin یا فونت‌های فارسی دیگر */
line-height: 1.8; /* ارتفاع خط برای خوانایی بهتر */
color: #333; /* رنگ متن اصلی */
background-color: #f9f9f9; /* رنگ پس‌زمینه کلی صفحه */
margin: 0;
padding: 0;
}

/* Article Container: کانتینر اصلی مقاله برای حفظ رسپانسیو بودن و مرکزیت */
.article-container {
max-width: 1200px; /* حداکثر عرض مقاله در دسکتاپ‌های بزرگ */
margin: 0 auto; /* مرکز قرار گرفتن مقاله */
padding: 20px; /* فاصله داخلی از کناره‌ها */
}

/* Headings Styling: استایل‌دهی به تگ‌های هدینگ (H1, H2, H3) */
h1 {
font-size: 2.8em; /* سایز بزرگ برای عنوان اصلی در دسکتاپ/تلویزیون */
font-weight: 800; /* ضخامت فونت بسیار زیاد */
color: #1a4a72; /* رنگ آبی تیره (آکادمیک) */
text-align: center; /* تراز وسط */
margin-bottom: 40px; /* فاصله از پایین */
padding: 20px; /* پدینگ داخلی */
background-color: #e0f2f7; /* پس‌زمینه آبی روشن برای عنوان */
border-radius: 10px; /* گوشه‌های گرد */
box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* سایه ظریف */
}

h2 {
font-size: 2.2em; /* سایز برای تیترهای اصلی بخش‌ها */
font-weight: 700; /* ضخامت فونت زیاد */
color: #2b6cb0; /* رنگ آبی متوسط */
border-bottom: 3px solid #f0ad4e; /* خط زیرین با رنگ طلایی (accent) */
padding-bottom: 10px; /* فاصله بین متن و خط زیرین */
margin-top: 50px; /* فاصله از بالای بخش قبلی */
margin-bottom: 25px; /* فاصله از پایین */
}

h3 {
font-size: 1.7em; /* سایز برای تیترهای فرعی */
font-weight: 600; /* ضخامت فونت متوسط */
color: #3b82f6; /* رنگ آبی روشن‌تر */
margin-top: 35px; /* فاصله از بالای بخش قبلی */
margin-bottom: 15px; /* فاصله از پایین */
}

/* Paragraphs: استایل‌دهی به پاراگراف‌ها */
p {
margin-bottom: 1.5em; /* فاصله بین پاراگراف‌ها */
text-align: justify; /* تراز از دو طرف برای خوانایی بهتر */
}

/* Lists: استایل‌دهی به لیست‌های مرتب و نامرتب */
ul, ol {
margin-bottom: 1.5em;
padding-right: 20px; /* پدینگ برای لیست‌ها در حالت RTL */
}
li {
margin-bottom: 0.8em;
color: #444; /* رنگ متن آیتم‌های لیست */
}

/* Table: استایل‌دهی به جدول آموزشی */
table.standard-table {
width: 100%; /* عرض کامل */
border-collapse: collapse; /* حذف فاصله بین خانه‌های جدول */
margin: 30px 0; /* فاصله از بالا و پایین */
background-color: #fff; /* پس‌زمینه سفید */
box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* سایه ظریف */
border-radius: 8px; /* گوشه‌های گرد */
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
}
table.standard-table th, table.standard-table td {
border: 1px solid #ddd; /* خطوط جدول */
padding: 15px; /* پدینگ داخلی خانه‌ها */
text-align: right; /* تراز متن به راست برای RTL */
}
table.standard-table th {
background-color: #eaf6fd; /* پس‌زمینه آبی روشن برای هدر جدول */
color: #1a4a72; /* رنگ متن هدر */
font-weight: bold; /* ضخامت فونت هدر */
font-size: 1.1em;
}
table.standard-table tr:nth-child(even) {
background-color: #f8fcfd; /* پس‌زمینه کمی متفاوت برای ردیف‌های زوج */
}

/* Infographic Placeholder Styling: استایل‌دهی برای بلوک اینفوگرافیک */
.infographic-box {
background-color: #fefce8; /* پس‌زمینه کرم/طلایی روشن */
border-right: 8px solid #f0ad4e; /* حاشیه طلایی در سمت راست (برای RTL) */
padding: 25px 30px;
margin: 40px 0;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
direction: rtl; /* جهت‌دهی راست به چپ */
}
.infographic-box h3 {
color: #b35e00; /* رنگ تیره‌تر برای عنوان اینفوگرافیک */
font-size: 1.8em;
margin-top: 0;
margin-bottom: 20px;
border-bottom: none; /* حذف خط زیرین پیش‌فرض h3 */
text-align: right;
}
.infographic-box ul {
list-style-type: none; /* حذف نشانگر لیست پیش‌فرض */
padding: 0;
}
.infographic-box ul li {
/* استفاده از SVG به عنوان گلوله (bullet) برای لیست */
background: url(‘data:image/svg+xml;utf8,’) no-repeat right center;
background-size: 18px; /* اندازه گلوله */
padding-right: 30px; /* فاصله متن از گلوله */
margin-bottom: 15px;
font-size: 1.1em;
color: #444;
}

/* Emphasis Box: جعبه برجسته‌سازی برای نکات مهم */
.emphasis-box {
background-color: #e6f7ff; /* آبی بسیار روشن */
border: 1px solid #a8d7ff; /* حاشیه آبی کمرنگ */
padding: 20px;
margin: 30px 0;
border-radius: 8px;
text-align: center;
font-size: 1.1em;
color: #1a4a72; /* رنگ متن آبی تیره */
font-weight: 500;
}

/* Info Box Success: جعبه اطلاعاتی با تم سبز برای موفقیت */
.info-box-success {
background-color: #e6ffe6; /* سبز روشن */
border-right: 6px solid #4CAF50; /* حاشیه سبز تیره در سمت راست (برای RTL) */
padding: 15px 20px;
margin: 25px 0;
border-radius: 5px;
color: #216a23; /* متن سبز تیره */
font-size: 1em;
line-height: 1.6;
direction: rtl; /* جهت‌دهی راست به چپ */
}
.info-box-success strong {
color: #2e8b57;
}

/*
** Responsive Adjustments (تنظیمات رسپانسیو) **
این بخش تضمین می‌کند که مقاله بر روی دستگاه‌های مختلف به خوبی نمایش داده شود.
*/

/* Media Query برای لپ‌تاپ‌ها و تبلت‌های بزرگ (عرض حداکثر 1024px) */
@media (max-width: 1024px) {
h1 { font-size: 2.4em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.5em; }
.article-container { padding: 15px; }
.infographic-box h3 { font-size: 1.6em; }
}

/* Media Query برای تبلت‌ها و گوشی‌های بزرگ (عرض حداکثر 768px) */
@media (max-width: 768px) {
h1 { font-size: 2em; margin-bottom: 30px; padding: 18px; }
h2 { font-size: 1.7em; margin-top: 40px; }
h3 { font-size: 1.4em; margin-top: 30px; }
.article-container { padding: 10px; }
p { font-size: 0.95em; }
table.standard-table th, table.standard-table td { padding: 12px; font-size: 0.9em; }
.infographic-box { padding: 20px; margin: 30px 0; }
.infographic-box h3 { font-size: 1.4em; }
.infographic-box ul li { font-size: 1em; padding-right: 25px; background-size: 16px; }
.emphasis-box, .info-box-success { font-size: 1em; padding: 18px; }
}

/* Media Query برای گوشی‌های کوچک (عرض حداکثر 480px) */
@media (max-width: 480px) {
h1 { font-size: 1.7em; padding: 15px; margin-bottom: 25px; }
h2 { font-size: 1.5em; margin-top: 30px; padding-bottom: 8px; }
h3 { font-size: 1.3em; margin-top: 25px; }
.article-container { padding: 8px; }
p { font-size: 0.9em; }
table.standard-table th, table.standard-table td { padding: 10px; font-size: 0.85em; }
.infographic-box { padding: 15px; margin: 25px 0; }
.infographic-box h3 { font-size: 1.3em; }
.infographic-box ul li { font-size: 0.95em; padding-right: 20px; background-size: 14px; }
.emphasis-box, .info-box-success { font-size: 0.95em; padding: 15px; }
}