/*
* طراحی منحصر به فرد و واکنش‌گرا برای مقاله
* این استایل‌ها با دقت انتخاب شده‌اند تا در ویرایشگر بلوک و کلاسیک به درستی نمایش داده شوند.
* رنگ‌بندی:
* – #2C3E50 (آبی نفتی تیره): برای تیتر اصلی و عناوین مهم
* – #3498DB (آبی آسمانی): برای تیترهای سطح 2 و خطوط برجسته
* – #2ECC71 (سبز زمردی): برای تیترهای سطح 3 و نقاط تاکید
* – #ECF0F1 (خاکستری روشن): برای پس‌زمینه‌ها و خطوط جداکننده
* – #333333 (خاکستری تیره): برای متن اصلی جهت خوانایی بالا
*/

/* Reset و باکس‌مدل برای سازگاری بهتر */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* استایل‌های پایه برای بدنه و فونت‌ها */
body {
font-family: ‘Arial’, ‘Helvetica Neue’, Helvetica, sans-serif; /* فونت‌های امن و خوانا */
line-height: 1.7;
color: #333333;
background-color: #f0f2f5; /* پس‌زمینه کلی ملایم */
}

/* کانتینر اصلی مقاله برای مرکزیت و نمایش زیبا */
.article-container {
max-width: 900px;
margin: 20px auto; /* مرکزیت در صفحه */
padding: 20px min(5%, 40px); /* پدینگ واکنش‌گرا */
background-color: #ffffff;
border-radius: 12px; /* گوشه‌های گرد برای ظاهر مدرن */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* سایه ملایم برای عمق */
overflow: hidden; /* جلوگیری از سرریز محتوا */
}

/* استایل‌ هدینگ‌ها – واکنش‌گرا و برجسته */
h1 {
font-size: clamp(28px, 5vw, 42px); /* سایز فونت واکنش‌گرا */
color: #2C3E50;
text-align: center;
margin-bottom: 40px;
font-weight: 800; /* بسیار ضخیم */
padding-bottom: 15px;
border-bottom: 4px solid #3498DB; /* خط آبی در زیر */
line-height: 1.3;
}
h2 {
font-size: clamp(22px, 4vw, 30px);
color: #3498DB;
margin-top: 40px;
margin-bottom: 20px;
font-weight: 700; /* ضخیم */
padding-bottom: 10px;
border-bottom: 2px solid #ECF0F1; /* خط جداکننده ملایم */
line-height: 1.4;
}
h3 {
font-size: clamp(18px, 3.5vw, 24px);
color: #2ECC71;
margin-top: 30px;
margin-bottom: 15px;
font-weight: 600; /* نیمه‌ضخیم */
line-height: 1.5;
}

/* پاراگراف‌ها برای خوانایی */
p {
margin-bottom: 18px;
line-height: 1.9; /* فاصله خطوط بیشتر برای خوانایی بهتر */
text-align: justify; /* تراز از هر دو طرف */
}

/* لیست‌ها */
ul, ol {
margin-bottom: 20px;
padding-left: 30px; /* پدینگ برای نشانگر لیست */
}
ul li, ol li {
margin-bottom: 10px;
line-height: 1.8;
}
ul li::marker {
color: #3498DB; /* رنگ آبی برای بولت پوینت‌ها */
font-size: 1.1em;
}
ol li {
font-weight: 500;
color: #333333;
}
ol li h3 { /* استایل هدینگ‌های درون لیست مرتب */
display: inline; /* برای اینکه در کنار شماره لیست قرار بگیرند */
margin: 0;
padding: 0;
font-size: 1.1em; /* کمی کوچکتر از h3 معمولی */
}

/* فهرست مطالب – TOC */
.table-of-contents {
background-color: #F8F8F8;
border: 1px solid #ECF0F1;
border-radius: 10px;
padding: 25px;
margin-bottom: 35px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.table-of-contents h3 {
color: #2C3E50;
margin-top: 0;
border-bottom: 1px dashed #D5DBDE; /* خط زیرین نقطه‌چین */
padding-bottom: 12px;
margin-bottom: 15px;
font-weight: 700;
text-align: center;
}
.table-of-contents ul {
list-style-type: none; /* حذف بولت پیش‌فرض */
padding-left: 0;
display: flex; /* برای چیدمان دو ستونی */
flex-wrap: wrap; /* برای واکنش‌گرایی */
gap: 10px 20px; /* فاصله بین آیتم‌ها */
}
.table-of-contents ul li {
margin-bottom: 5px;
flex: 1 1 calc(50% – 10px); /* دو ستون در حالت پیش‌فرض */
min-width: 250px; /* حداقل عرض برای هر آیتم */
}
.table-of-contents ul li a {
color: #34495E;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
padding: 5px 0;
display: block; /* برای کلیک‌پذیری بهتر */
}
.table-of-contents ul li a:hover {
color: #3498DB;
text-decoration: underline;
}
/* واکنش‌گرایی فهرست مطالب */
@media (max-width: 768px) {
.table-of-contents ul li {
flex: 1 1 100%; /* یک ستون در موبایل و تبلت */
min-width: unset;
}
}

/* استایل جدول آموزشی */
.styled-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 35px 0;
font-size: 1.05em;
border-radius: 10px;
overflow: hidden; /* برای اعمال گوشه‌های گرد به border */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* سایه جذاب */
}
.styled-table thead tr {
background-color: #3498DB;
color: #ffffff;
text-align: right;
font-weight: bold;
}
.styled-table th,
.styled-table td {
padding: 15px 18px;
border: 1px solid #dddddd; /* خطوط جدول */
vertical-align: top; /* محتوا از بالا شروع شود */
}
.styled-table tbody tr {
border-bottom: 1px solid #eeeeee;
}
.styled-table tbody tr:nth-of-type(even) { /* ردیف‌های زوج با رنگ متفاوت */
background-color: #f9f9f9;
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #3498DB; /* خط ضخیم‌تر در انتهای جدول */
}
.styled-table tbody tr:hover {
background-color: #ECF0F1; /* تغییر رنگ هنگام هاور */
cursor: pointer;
}

/* اینفوگرافیک جایگزین – طراحی زیبا و واکنش‌گرا */
.infographic-section {
background-color: #ECF0F1;
border-radius: 15px;
padding: 30px;
margin-top: 45px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}
.infographic-section h2 {
color: #2C3E50;
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
font-size: clamp(24px, 4.5vw, 32px);
}
.infographic-section p {
color: #555555;
font-size: 1.1em;
margin-top: 15px;
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.infographic-grid {
display: flex;
flex-wrap: wrap; /* برای واکنش‌گرایی و شکستن به خط بعد */
justify-content: center;
gap: 25px; /* فاصله بین آیتم‌ها */
margin-top: 30px;
}
.infographic-item {
background-color: #ffffff;
border: 2px solid #2ECC71; /* حاشیه سبز */
border-radius: 12px;
padding: 25px;
flex: 1 1 calc(33.333% – 50px); /* 3 آیتم در هر سطر در صفحه نمایش بزرگتر */
min-width: 280px; /* حداقل عرض برای هر آیتم */
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن هاور */
}
.infographic-item:hover {
transform: translateY(-8px); /* کمی به بالا حرکت کند */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* سایه برجسته‌تر */
}
.infographic-item .icon {
font-size: 3em; /* سایز بزرگ برای آیکون */
color: #3498DB;
margin-bottom: 15px;
display: block; /* برای اینکه در خط جدید قرار گیرد */
}
.infographic-item h3 {
color: #2C3E50;
font-size: 1.4em;
margin-top: 0;
margin-bottom: 12px;
border-bottom: none;
font-weight: 700;
}
.infographic-item p {
font-size: 1em;
line-height: 1.7;
color: #555555;
text-align: center;
margin-bottom: 0;
}

/* واکنش‌گرایی اینفوگرافیک */
@media (max-width: 768px) {
.infographic-item {
flex: 1 1 calc(50% – 30px); /* 2 آیتم در هر سطر در تبلت */
}
}
@media (max-width: 480px) {
.infographic-item {
flex: 1 1 100%; /* 1 آیتم در هر سطر در موبایل */
}
}

/* تنظیمات واکنش‌گرای عمومی */
@media (max-width: 600px) {
.article-container {
padding: 15px;
}
h1 {
font-size: 26px;
margin-bottom: 30px;
}
h2 {
font-size: 22px;
margin-top: 35px;
}
h3 {
font-size: 19px;
margin-top: 25px;
}
p {
font-size: 0.95em;
}
.styled-table th, .styled-table td {
padding: 10px 12px;
font-size: 0.9em;
}
}

/* اطمینان از نمایش صحیح راست به چپ */
[dir=”rtl”] {
text-align: right;
}
[dir=”rtl”] ul, [dir=”rtl”] ol {
padding-right: 30px;
padding-left: 0;
}
[dir=”rtl”] ul li::marker {
margin-left: 5px; /* فاصله از متن */
}
[dir=”rtl”] .styled-table thead tr {
text-align: right;
}