/* تنظیمات عمومی برای بدنه و اطمینان از نمایش صحیح در ویرایشگر بلوک */
body {
font-family: ‘Arial’, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 0;
background-color: #ffffff;
direction: rtl; /* تنظیم جهت نوشتار به راست به چپ */
text-align: right; /* تراز متن به راست */
}

/* کانتینر اصلی مقاله برای کنترل حداکثر عرض و مرکزی کردن */
.article-container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
border-radius: 10px; /* گوشه‌های گردتر برای زیبایی */
box-sizing: border-box; /* اطمینان از محاسبه صحیح padding در عرض */
overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* استایل هدینگ‌ها */
h1, h2, h3 {
font-family: ‘Arial’, sans-serif;
color: #0056b3; /* آبی حرفه‌ای برای هدینگ‌ها */
margin-top: 1.8em; /* فاصله از بالای المان قبلی */
margin-bottom: 0.8em; /* فاصله از پایین المان بعدی */
line-height: 1.2;
text-align: right;
}

h1 {
font-size: clamp(2.2em, 5vw, 3.2em); /* اندازه فونت واکنش‌گرا برای H1 */
font-weight: bold;
text-align: center; /* H1 در مرکز قرار گیرد */
color: #003366; /* آبی تیره‌تر برای H1 */
border-bottom: 4px solid #0056b3; /* خط زیر H1 */
padding-bottom: 18px;
margin-bottom: 30px;
}

h2 {
font-size: clamp(1.7em, 4vw, 2.4em);
font-weight: bold;
color: #0056b3;
border-bottom: 2px solid #e9ecef;
padding-bottom: 10px;
margin-bottom: 20px;
}

h3 {
font-size: clamp(1.3em, 3vw, 1.8em);
font-weight: bold;
color: #0069d9; /* آبی کمی روشن‌تر برای H3 */
margin-right: 15px; /* کمی تورفتگی برای H3 */
}

/* پاراگراف‌ها و لیست‌ها */
p {
margin-bottom: 1.2em;
text-align: justify; /* تراز متن به صورت justify */
line-height: 1.7; /* افزایش فاصله خطوط برای خوانایی بهتر */
font-size: 1.05em; /* کمی بزرگتر کردن فونت پاراگراف */
}

ul, ol {
margin-bottom: 1.2em;
padding-right: 25px; /* تورفتگی برای لیست‌ها */
list-style-type: disc; /* نوع گلوله برای لیست‌ها */
}

ol {
list-style-type: decimal; /* نوع شماره برای لیست‌های مرتب */
}

li {
margin-bottom: 0.6em;
line-height: 1.6;
text-align: right;
}

/* استایل جدول */
.styled-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 30px 0;
font-size: 0.95em;
min-width: 300px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* سایه زیبا برای جدول */
border-radius: 10px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
direction: rtl; /* جهت جدول راست به چپ */
text-align: right; /* تراز متن در جدول راست */
}

.styled-table thead tr {
background-color: #0056b3; /* رنگ آبی برای هدر جدول */
color: #ffffff;
text-align: right;
}

.styled-table th,
.styled-table td {
padding: 14px 18px; /* پدینگ بیشتر برای سلول‌ها */
border: 1px solid #dddddd;
}

.styled-table tbody tr {
border-bottom: 1px solid #eeeeee;
}

.styled-table tbody tr:nth-of-type(even) {
background-color: #f8f8f8; /* رنگ پس‌زمینه متناوب برای ردیف‌ها */
}

.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #0056b3;
}

.styled-table tbody tr:hover {
background-color: #e6f7ff; /* افکت هاور روشن برای ردیف‌ها */
}

/* استایل اینفوگرافیک */
.infographic-container {
background-color: #f8f9fa; /* پس‌زمینه خاکستری روشن */
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 25px;
margin: 35px 0;
text-align: center;
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
flex-direction: column; /* پیش‌فرض: عمودی برای صفحه‌های کوچک */
align-items: center;
}

.infographic-title {
font-size: clamp(1.5em, 4vw, 2em);
font-weight: bold;
color: #28a745; /* رنگ سبز جذاب برای عنوان اینفوگرافیک */
margin-bottom: 25px;
text-align: center;
width: 100%;
}

.infographic-steps-wrapper {
display: flex;
flex-direction: column; /* پیش‌فرض: عمودی */
align-items: center;
width: 100%;
}

.infographic-step {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px; /* فاصله بین مراحل عمودی */
position: relative;
padding: 10px;
box-sizing: border-box;
}

.infographic-step span {
font-size: clamp(1.1em, 2.8vw, 1.3em);
font-weight: bold;
color: #0056b3;
background-color: #e0f2f7;
padding: 10px 20px;
border-radius: 25px;
border: 1px solid #0056b3;
white-space: nowrap; /* جلوگیری از شکستن متن مرحله */
display: inline-block;
min-width: 180px; /* حداقل عرض برای هر مرحله */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* سایه برای برجسته‌سازی */
transition: transform 0.3s ease; /* افکت گذار برای تعامل */
}

.infographic-step span:hover {
transform: translateY(-5px); /* افکت کمی بالا رفتن در هاور */
}

.infographic-step p {
font-size: 0.95em;
color: #555;
margin-top: 10px;
max-width: 250px; /* محدود کردن عرض توضیحات */
text-align: center;
}

.infographic-step:not(:last-child)::after {
content: “⬇”; /* پیکان رو به پایین برای حالت عمودی */
font-size: 2.2em;
color: #28a745;
margin-top: 12px;
line-height: 0.8;
}

/* واکنش‌گرایی اینفوگرافیک برای صفحه‌های عریض‌تر */
@media (min-width: 768px) {
.infographic-steps-wrapper {
flex-direction: row; /* چیدمان افقی */
justify-content: center;
flex-wrap: wrap; /* امکان شکستن به خط بعدی در صورت نیاز */
margin-bottom: -30px; /* تنظیم فاصله */
}
.infographic-step {
flex: 0 0 auto;
margin: 0 50px 30px 0; /* فاصله افقی بین مراحل */
padding: 0;
width: auto; /* عرض خودکار بر اساس محتوا */
}
.infographic-step:not(:last-child)::after {
content: “➔”; /* پیکان افقی */
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%) translateX(25px); /* تنظیم موقعیت دقیق پیکان */
margin-top: 0;
font-size: 2.5em; /* اندازه بزرگتر پیکان */
}
.infographic-step:last-child::after {
content: none; /* مرحله آخر پیکان ندارد */
}
}

/* استایل فهرست مطالب (Table of Contents) */
.table-of-contents {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 20px 25px;
margin: 25px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-of-contents h2 {
color: #0056b3;
border-bottom: 1px solid #dcdcdc;
padding-bottom: 12px;
margin-top: 0;
font-size: clamp(1.5em, 3.5vw, 2em);
}

.table-of-contents ul {
list-style: none; /* حذف گلوله پیش‌فرض */
padding: 0;
margin-top: 15px;
}

.table-of-contents li a {
text-decoration: none;
color: #0069d9;
font-weight: normal;
margin-bottom: 10px;
display: block; /* هر لینک در یک خط جداگانه */
font-size: 1.1em;
padding: 5px 0;
transition: color 0.3s ease, padding-right 0.3s ease; /* افکت گذار برای تعامل */
}

.table-of-contents li a:hover {
text-decoration: underline;
color: #004085; /* رنگ تیره‌تر در هاور */
padding-right: 5px; /* کمی تورفتگی در هاور */
}

/* استایل برای مقصد لینک‌های داخلی (Anchor) */
.anchor-target {
padding-top: 70px; /* فاصله برای جلوگیری از پنهان شدن محتوا زیر هدرهای چسبنده */
margin-top: -70px; /* جبران فاصله بالا */
display: block;
}

/* تنظیم جهت راست به چپ برای کل محتوا */
.article-container[dir=”rtl”] {
text-align: right;
}
.article-container[dir=”rtl”] p,
.article-container[dir=”rtl”] ul,
.article-container[dir=”rtl”] ol,
.article-container[dir=”rtl”] li {
text-align: right;
}
.article-container[dir=”rtl”] .styled-table th,
.article-container[dir=”rtl”] .styled-table td {
text-align: right;
}
.article-container[dir=”rtl”] ul {
padding-right: 25px;
padding-left: 0;
}
.article-container[dir=”rtl”] ol {
padding-right: 25px;
padding-left: 0;
}