/* ————————————————————————– */
/* تنظیمات عمومی و رسپانسیو برای محتوای مقاله */
/* ————————————————————————– */
body {
font-family: ‘Vazirmatn’, sans-serif; /* فونت فارسی محبوب و خوانا */
direction: rtl; /* جهت راست به چپ */
text-align: right;
line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
color: #333; /* رنگ متن اصلی */
background-color: #F7F9FC; /* پس‌زمینه کلی صفحه */
margin: 0;
padding: 0;
overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* کانتینر اصلی مقاله برای مرکز قرار گرفتن و محدودیت عرض */
.main-article-container {
max-width: 950px; /* حداکثر عرض برای دسکتاپ و تبلت‌های بزرگ */
margin: 30px auto; /* مرکز قرار گرفتن در صفحه */
padding: 25px; /* پدینگ داخلی */
background-color: #FFFFFF; /* پس‌زمینه سفید برای محتوا */
border-radius: 12px; /* گوشه‌های گرد */
box-shadow: 0 5px 25px rgba(0,0,0,0.08); /* سایه ظریف برای عمق */
}

/* ————————————————————————– */
/* استایل هدینگ‌ها (H1, H2, H3) */
/* ————————————————————————– */
h1 {
font-size: 2.5em; /* سایز بزرگ برای H1 */
font-weight: 800; /* ضخیم‌تر */
color: #2C3E50; /* رنگ تیره و حرفه‌ای */
text-align: center;
margin-bottom: 25px;
line-height: 1.3;
}

h2 {
font-size: 1.8em; /* سایز متوسط برای H2 */
font-weight: 700; /* ضخیم */
color: #2980B9; /* آبی پررنگ برای تیترهای اصلی بخش‌ها */
border-bottom: 3px solid #3498DB; /* خط آبی زیرین */
padding-bottom: 8px;
margin-top: 45px;
margin-bottom: 20px;
}

h3 {
font-size: 1.35em; /* سایز کمی کوچک‌تر برای H3 */
font-weight: 600; /* نیمه‌ضخیم */
color: #34495E; /* خاکستری تیره */
margin-top: 30px;
margin-bottom: 15px;
}

/* ————————————————————————– */
/* استایل پاراگراف و لیست */
/* ————————————————————————– */
p {
margin-bottom: 1.2em; /* فاصله بین پاراگراف‌ها */
font-size: 1.1em;
line-height: 1.8;
}

ul, ol {
margin: 15px 0 15px 25px; /* فاصله و پدینگ برای لیست‌ها */
padding: 0;
list-style-position: inside; /* لیست‌ها از داخل شروع شوند */
}

li {
margin-bottom: 0.8em;
font-size: 1.05em;
line-height: 1.7;
}

/* ————————————————————————– */
/* استایل جدول آموزشی */
/* ————————————————————————– */
table {
width: 100%;
border-collapse: collapse; /* خطوط جدول به هم بچسبند */
margin: 30px 0;
font-size: 1em;
box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* سایه برای جدول */
border-radius: 8px;
overflow: hidden; /* برای نمایش صحیح گوشه‌های گرد */
}

th, td {
border: 1px solid #ECF0F1; /* خطوط جداکننده روشن */
padding: 15px 18px;
text-align: right;
}

th {
background-color: #EBF5FB; /* پس‌زمینه آبی روشن برای هدر جدول */
color: #2C3E50;
font-weight: 700;
font-size: 1.1em;
}

tr:nth-child(even) {
background-color: #FDFEFE; /* رنگ پس‌زمینه متناوب برای ردیف‌ها */
}

/* ————————————————————————– */
/* استایل اینفوگرافیک جایگزین */
/* ————————————————————————– */
.infographic-block {
background-color: #E8F6F8; /* پس‌زمینه آبی بسیار روشن */
border-right: 6px solid #4DB6AC; /* خط سبزآبی در سمت راست */
padding: 25px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.07); /* سایه کمی عمیق‌تر */
display: flex; /* برای چیدمان ستونی */
flex-direction: column;
gap: 15px; /* فاصله بین آیتم‌ها */
}

.infographic-item {
display: flex;
align-items: flex-start; /* آیتم‌ها در بالا تراز شوند */
font-size: 1.05em;
color: #333;
}

.infographic-icon {
font-size: 1.8em; /* سایز بزرگتر برای آیکون */
color: #4DB6AC; /* رنگ آیکون */
margin-left: 15px;
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}

.infographic-text strong {
color: #2C3E50;
font-weight: 700;
display: block; /* عنوان در خط جداگانه */
margin-bottom: 5px;
}

.infographic-item:hover .infographic-icon {
transform: scale(1.1); /* افکت هاور برای آیکون */
transition: transform 0.3s ease;
}

/* ————————————————————————– */
/* رسپانسیو برای دستگاه‌های مختلف */
/* ————————————————————————– */
@media (max-width: 992px) { /* تبلت‌ها و لپ‌تاپ‌های کوچک */
.main-article-container {
margin: 20px auto;
padding: 20px;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.2em; }
p { font-size: 1em; }
th, td { padding: 12px 15px; }
.infographic-block { padding: 20px; }
}

@media (max-width: 768px) { /* تبلت‌ها و موبایل‌های بزرگ */
.main-article-container {
margin: 15px auto;
padding: 15px;
border-radius: 8px;
}
h1 { font-size: 2em; margin-bottom: 20px; }
h2 { font-size: 1.5em; margin-top: 35px; }
h3 { font-size: 1.15em; margin-top: 25px; }
p, li, th, td { font-size: 0.95em; }
.infographic-block { padding: 18px; margin: 30px 0; }
.infographic-icon { font-size: 1.6em; margin-left: 10px; }
.infographic-text strong { font-size: 1.05em; }
}

@media (max-width: 576px) { /* موبایل‌ها */
.main-article-container {
margin: 10px auto;
padding: 10px;
border-radius: 5px;
box-shadow: none; /* در موبایل‌های کوچک سایه حذف شود */
}
h1 { font-size: 1.8em; margin-bottom: 15px; }
h2 { font-size: 1.3em; margin-top: 25px; padding-bottom: 5px; }
h3 { font-size: 1.05em; margin-top: 20px; }
p, li, th, td { font-size: 0.9em; line-height: 1.7; }
th, td { padding: 10px 12px; }
.infographic-block { padding: 15px; margin: 25px 0; }
.infographic-icon { font-size: 1.4em; margin-left: 8px; }
.infographic-item { flex-direction: row; align-items: flex-start; } /* آیکون و متن در یک خط */
}

/* برای تلویزیون و صفحه‌های بسیار بزرگ */
@media (min-width: 1200px) {
.main-article-container {
max-width: 1050px; /* افزایش عرض برای صفحه‌های بزرگ */
padding: 35px;
}
h1 { font-size: 2.8em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
p, li { font-size: 1.15em; }
th, td { padding: 18px 22px; }
.infographic-block { padding: 30px; }
.infographic-icon { font-size: 2em; }
}