/* تنظیمات عمومی بدنه و کانتینر مقاله */
body {
font-family: ‘Vazirmatn’, ‘Iranian Sans’, ‘Tahoma’, ‘Arial’, sans-serif;
line-height: 1.8;
color: #34495E; /* رنگ متن اصلی: خاکستری مایل به آبی تیره */
background-color: #F8F9FA; /* رنگ پس‌زمینه کلی: خاکستری روشن */
margin: 0;
padding: 0;
direction: rtl; /* جهت‌دهی راست به چپ */
text-align: right; /* تراز بندی متن به راست */
}

.article-container {
max-width: 960px; /* حداکثر عرض کانتینر برای نمایش در دسکتاپ */
margin: 2.5rem auto; /* فاصله از بالا و پایین و قرارگیری در مرکز */
padding: 1.8rem 2.2rem; /* پدینگ داخلی کانتینر */
background-color: #FFFFFF; /* پس‌زمینه مقاله: سفید */
border-radius: 12px; /* گردی گوشه‌ها */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09); /* سایه ظریف */
overflow: hidden; /* جلوگیری از سرریز محتوا */
}

/* استایل‌های هدینگ‌ها */
h1 {
font-size: clamp(2.4em, 5vw, 3.5em); /* سایز فونت واکنش‌گرا برای H1 */
font-weight: 800; /* ضخامت فونت */
color: #2C3E50; /* رنگ هدینگ اصلی: آبی تیره */
text-align: center;
margin-bottom: 1.8em;
padding-bottom: 0.8em;
border-bottom: 4px solid #1ABC9C; /* خط زیرین با رنگ فیروزه‌ای */
line-height: 1.3;
}

h2 {
font-size: clamp(1.8em, 4vw, 2.6em); /* سایز فونت واکنش‌گرا برای H2 */
font-weight: 700;
color: #2C3E50;
margin-top: 3em;
margin-bottom: 1.2em;
padding: 0.7em 0.8em;
border-right: 6px solid #1ABC9C; /* خط کناری با رنگ فیروزه‌ای */
background-color: #ECF0F1; /* پس‌زمینه هدینگ: خاکستری روشن */
border-radius: 8px 0 0 8px; /* گردی گوشه‌ها فقط در سمت راست */
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
}

h3 {
font-size: clamp(1.4em, 3vw, 2em); /* سایز فونت واکنش‌گرا برای H3 */
font-weight: 600;
color: #34495E;
margin-top: 2.5em;
margin-bottom: 1em;
padding-bottom: 0.5em;
border-bottom: 2px dashed #BDC3C7; /* خط زیرین نقطه‌چین */
}

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

ul, ol {
margin-bottom: 1.5em;
padding-right: 25px; /* پدینگ برای لیست‌های راست به چپ */
line-height: 1.9;
}
li {
margin-bottom: 0.7em;
}

/* استایل‌های جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 2.5em 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
border-radius: 10px;
overflow: hidden;
}

th, td {
border: 1px solid #BDC3C7; /* خطوط جدول */
padding: 14px 18px;
text-align: right;
}

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

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

/* بلوک‌های اطلاعاتی (Infographic-like) */
.infographic-block {
display: flex;
flex-wrap: wrap; /* در صفحات کوچک به صورت عمودی قرار می‌گیرند */
justify-content: center;
gap: 25px;
margin: 3.5em 0;
}

.infographic-item {
background-color: #ECF0F1; /* پس‌زمینه آیتم: خاکستری روشن */
border: 1px solid #BDC3C7;
border-radius: 12px;
padding: 25px;
flex: 1 1 calc(33% – 50px); /* 3 آیتم در هر ردیف با فاصله */
min-width: 290px; /* حداقل عرض قبل از شکستن خط */
text-align: center;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.infographic-item:hover {
transform: translateY(-8px); /* حرکت به سمت بالا در هاور */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.infographic-item .icon {
font-size: 3.5em;
color: #1ABC9C; /* رنگ فیروزه‌ای برای آیکون */
margin-bottom: 0.6em;
display: block; /* برای اینکه margin-bottom درست کار کند */
}

.infographic-item h4 {
color: #2C3E50;
font-size: 1.3em;
margin-bottom: 0.6em;
font-weight: 700;
}

.infographic-item p {
font-size: 0.98em;
color: #555;
text-align: center;
line-height: 1.7;
}

/* فلوچارت گام به گام (Infographic Alternative) */
.flow-container {
display: flex;
flex-direction: column;
gap: 30px;
margin: 3.5em 0;
position: relative;
padding-right: 30px; /* فضای لازم برای خط عمودی */
}

.flow-container::before {
content: ”;
position: absolute;
right: 20px; /* موقعیت خط عمودی */
top: 0;
bottom: 0;
width: 4px;
background-color: #BDC3C7; /* رنگ خط */
z-index: 0;
border-radius: 2px;
}

.flow-step {
display: flex;
align-items: flex-start;
gap: 20px;
position: relative;
}

.flow-step .step-number {
background-color: #1ABC9C; /* پس‌زمینه شماره گام: فیروزه‌ای */
color: white;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-shrink: 0;
z-index: 1;
font-size: 1.3em;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.flow-step .step-content {
background-color: #F8F9FA; /* پس‌زمینه محتوای گام */
padding: 18px 22px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
flex-grow: 1;
transition: background-color 0.3s ease;
border: 1px solid #E0E4E7;
}

.flow-step .step-content:hover {
background-color: #EBF0F3; /* تغییر رنگ در هاور */
}

.flow-step h4 {
margin-top: 0;
margin-bottom: 0.8em;
color: #2C3E50;
font-size: 1.25em;
font-weight: 600;
}

.flow-step p {
margin-bottom: 0;
font-size: 0.98em;
line-height: 1.7;
}

/* بخش سوالات متداول (FAQ) */
.faq-item {
margin-bottom: 1.8em;
padding: 1.2em 1.5em;
background-color: #F0F2F4; /* پس‌زمینه سوالات متداول */
border-right: 5px solid #1ABC9C; /* خط کناری فیروزه‌ای */
border-radius: 8px 0 0 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.faq-item strong {
color: #2C3E50;
font-size: 1.15em;
display: block;
margin-bottom: 0.6em;
font-weight: 600;
}
.faq-item p {
margin-bottom: 0;
line-height: 1.7;
}

/* واکنش‌گرایی برای صفحات کوچکتر */
@media (max-width: 1024px) {
.article-container {
max-width: 90%;
margin: 2rem auto;
padding: 1.5rem;
}
}

@media (max-width: 768px) {
.article-container {
margin: 1.5rem auto;
padding: 1rem;
border-radius: 8px;
box-shadow: none; /* سایه سبک‌تر در موبایل */
}
h1 {
font-size: clamp(2em, 7vw, 2.8em);
margin-bottom: 1.2em;
}
h2 {
font-size: clamp(1.6em, 5.5vw, 2.2em);
margin-top: 2.5em;
}
h3 {
font-size: clamp(1.3em, 4.5vw, 1.8em);
}
.infographic-item {
flex: 1 1 100%; /* در موبایل به صورت عمودی قرار می‌گیرند */
max-width: 100%;
padding: 20px;
}
.flow-container::before {
right: 18px;
}
.flow-step .step-number {
width: 40px;
height: 40px;
font-size: 1.1em;
}
.flow-step .step-content {
padding: 15px 18px;
}
}

@media (max-width: 480px) {
.article-container {
padding: 0.8rem;
}
h1 {
font-size: clamp(1.8em, 8vw, 2.5em);
margin-bottom: 1em;
}
h2 {
font-size: clamp(1.4em, 6.5vw, 2em);
margin-top: 2em;
}
h3 {
font-size: clamp(1.2em, 5.5vw, 1.6em);
}
ul, ol {
padding-right: 20px;
}
.flow-container::before {
right: 15px;
}
.flow-step .step-number {
width: 35px;
height: 35px;
font-size: 1em;
}
}