/*
این بلوک استایل حاوی تنظیمات کلی و واکنش‌گرا (ریسپانسیو) برای نمایش بهینه محتوا در دستگاه‌های مختلف است.
در ویرایشگرهای بلوک و کلاسیک، ممکن است برخی ویرایشگرها این بلوک را به بخش سند منتقل کنند یا آن را حفظ کنند.
برای اطمینان بیشتر، مهم‌ترین ویژگی‌های ظاهری (مانند اندازه و رنگ فونت) به‌صورت inline نیز روی عناصر اعمال شده‌اند.
*/
body {
font-family: ‘B Nazanin’, ‘Vazirmatn’, sans-serif; /* فونت‌های پیشنهادی فارسی. اطمینان از نصب این فونت‌ها بر عهده کاربر است */
color: #333333; /* رنگ پیش‌فرض متن */
line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
direction: rtl; /* جهت‌دهی راست به چپ برای زبان فارسی */
text-align: right; /* تراز پیش‌فرض متن */
margin: 0;
padding: 0;
background-color: #FDFEFE; /* رنگ پس‌زمینه کلی صفحه */
}

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

/* استایل‌دهی به تگ‌های P */
p {
font-size: 1.1em;
color: #333333;
text-align: justify;
margin-bottom: 1.2em;
line-height: 1.9;
}

/* استایل‌دهی به لیست‌های نامرتب (ul) */
ul {
margin-left: 25px;
margin-bottom: 1.5em;
padding-right: 0; /* برای تراز بهتر در RTL */
list-style-position: inside; /* برای نمایش بولت‌ها داخل محدوده لیست */
}

ul li {
margin-bottom: 0.8em;
line-height: 1.6;
}

/* استایل‌دهی به لینک‌ها */
a {
color: #3498DB; /* رنگ آبی جذاب برای لینک‌ها */
text-decoration: none; /* حذف خط زیر لینک */
transition: color 0.3s ease; /* انیمیشن تغییر رنگ */
}

a:hover {
color: #2980B9; /* رنگ آبی تیره‌تر هنگام هاور */
text-decoration: underline; /* نمایش خط زیر هنگام هاور */
}

/* استایل‌دهی برای بخش فهرست مطالب */
.toc-container {
margin-top: 30px;
margin-bottom: 40px;
padding: 25px;
background-color: #ECF0F1; /* رنگ پس‌زمینه روشن */
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.toc-container h2 {
color: #2C3E50;
text-align: center;
margin-top: 0;
margin-bottom: 20px;
font-size: 1.9em;
border-bottom: none;
padding-bottom: 0;
}

.toc-container ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap; /* اجازه شکستن به خط بعدی در موبایل */
justify-content: center;
font-size: 1.05em;
}

.toc-container li {
margin: 7px 18px;
padding: 5px 0;
}

.toc-container a {
font-weight: 600;
color: #34495E;
transition: color 0.3s ease;
}

.toc-container a:hover {
color: #3498DB;
text-decoration: underline;
}

/* استایل‌دهی برای اینفوگرافیک مراحل */
.infographic-flow {
display: flex;
flex-wrap: wrap; /* اجازه می‌دهد آیتم‌ها در صفحه‌های کوچک به خط بعدی بروند */
justify-content: center; /* مرکز قرار دادن آیتم‌ها */
gap: 20px; /* فاصله بین بلوک‌های اینفوگرافیک */
margin: 40px 0;
text-align: center;
align-items: center; /* تراز عمودی فلکس آیتم‌ها */
}

.infographic-step {
background-color: #EBF5FB; /* پس‌زمینه آبی روشن */
border: 1px solid #3498DB; /* حاشیه آبی */
border-radius: 10px; /* لبه‌های گرد */
padding: 25px;
width: calc(33% – 40px); /* تقریباً 3 آیتم در هر ردیف در نمایشگرهای بزرگ */
min-width: 260px; /* حداقل عرض برای جلوگیری از بسیار کوچک شدن */
box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* سایه زیبا */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease; /* انیمیشن هنگام هاور */
box-sizing: border-box; /* شامل پدینگ در عرض */
color: #2C3E50;
font-weight: 600;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.infographic-step:hover {
transform: translateY(-7px); /* حرکت به سمت بالا هنگام هاور */
box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* سایه قوی‌تر هنگام هاور */
}

.infographic-step span { /* آیکون داخل اینفوگرافیک */
display: block;
font-size: 2.2em; /* اندازه بزرگ آیکون */
margin-bottom: 12px;
color: #3498DB;
}

.infographic-arrow {
font-size: 2.5em; /* اندازه بزرگ فلش */
color: #3498DB;
display: flex;
align-items: center;
justify-content: center;
margin: 0 15px; /* فاصله افقی */
/* برای حالت ریسپانسیو این مقدار در media query تغییر می‌کند */
}

/* استایل‌دهی برای جدول واکنش‌گرا (Responsive Table) */
.responsive-table-container {
overflow-x: auto; /* فعال کردن اسکرول افقی در صورت لزوم */
-webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
margin-bottom: 2.5em;
border: 1px solid #E0E0E0; /* حاشیه کلی برای کانتینر جدول */
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.responsive-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌ها */
margin-top: 0;
font-size: 0.98em;
min-width: 400px; /* حداقل عرض جدول برای جلوگیری از بسیار فشرده شدن */
background-color: #FFFFFF;
}
.responsive-table th, .responsive-table td {
border: 1px solid #ECF0F1; /* حاشیه‌های داخلی جدول */
padding: 14px 18px; /* پدینگ داخل خانه‌ها */
text-align: right;
vertical-align: top; /* تراز عمودی محتوا */
}
.responsive-table th {
background-color: #ECF0F1; /* رنگ پس‌زمینه سربرگ */
color: #34495E;
font-weight: bold;
text-align: center; /* تراز مرکزی سربرگ‌ها */
font-size: 1.05em;
}
.responsive-table tr:nth-child(even) { /* استایل برای ردیف‌های زوج */
background-color: #F9F9F9;
}
.responsive-table tr:hover { /* استایل هنگام هاور روی ردیف‌ها */
background-color: #F0F0F0;
}

/*
Media Queries برای واکنش‌گرا کردن محتوا در اندازه‌های مختلف صفحه
(موبایل، تبلت، لپ‌تاپ و تلویزیون)
*/

/* استایل برای تبلت و لپ‌تاپ‌های کوچک (عرض تا 1024px) */
@media (max-width: 1024px) {
.article-container {
padding: 25px;
margin: 18px auto;
}
h1 { font-size: 2.2em !important; }
h2 { font-size: 1.9em !important; }
h3 { font-size: 1.4em !important; }
p { font-size: 1.05em !important; }

.infographic-step {
width: calc(48% – 30px); /* 2 آیتم در هر ردیف */
min-width: unset; /* حذف حداقل عرض برای انعطاف‌پذیری بیشتر */
}
.infographic-arrow {
font-size: 2.2em;
margin: 0 10px;
}
}

/* استایل برای موبایل و تبلت‌های کوچک (عرض تا 768px) */
@media (max-width: 768px) {
.article-container {
padding: 20px;
margin: 15px auto;
border-radius: 8px;
box-shadow: 0 3px 15px rgba(0,0,0,0.07);
}
h1 { font-size: 2em !important; margin-bottom: 25px !important; }
h2 { font-size: 1.7em !important; margin-top: 35px !important; margin-bottom: 18px !important; padding-bottom: 8px !important; }
h3 { font-size: 1.3em !important; margin-top: 25px !important; margin-bottom: 12px !important; }
p { font-size: 1em !important; line-height: 1.8 !important; }

.toc-container {
padding: 20px;
margin-bottom: 30px;
}
.toc-container h2 { font-size: 1.6em !important; margin-bottom: 15px !important; }
.toc-container li { margin: 5px 10px; font-size: 1em !important; }

.infographic-flow {
flex-direction: column; /* چیدن آیتم‌ها به صورت عمودی */
align-items: center; /* مرکز قرار دادن عمودی */
gap: 15px;
margin: 30px 0;
}
.infographic-step {
width: 90%; /* تقریبا تمام عرض صفحه */
padding: 20px;
font-size: 0.95em;
min-width: unset;
}
.infographic-step span {
font-size: 1.8em;
margin-bottom: 10px;
}
.infographic-arrow {
transform: rotate(90deg); /* چرخش فلش برای نمایش عمودی */
margin: 10px 0; /* فاصله عمودی */
font-size: 2em;
}

.responsive-table {
min-width: 100%; /* اطمینان از پر کردن عرض موجود */
}
.responsive-table th, .responsive-table td {
padding: 10px 12px;
font-size: 0.9em;
}
}

/* استایل برای موبایل‌های کوچک (عرض تا 480px) */
@media (max-width: 480px) {
.article-container {
padding: 15px;
margin: 10px auto;
}
h1 { font-size: 1.8em !important; margin-bottom: 20px !important; }
h2 { font-size: 1.5em !important; margin-top: 30px !important; margin-bottom: 15px !important; }
h3 { font-size: 1.2em !important; margin-top: 20px !important; margin-bottom: 10px !important; }
p { font-size: 0.95em !important; line-height: 1.7 !important; }
ul { margin-left: 20px !important; font-size: 0.95em !important; }
ul li { margin-bottom: 0.6em !important; }

.toc-container {
padding: 15px;
margin-bottom: 25px;
}
.toc-container h2 { font-size: 1.4em !important; margin-bottom: 10px !important; }
.toc-container li { margin: 4px 8px; font-size: 0.95em !important; }

.infographic-step {
width: 95%; /* تقریباً تمام عرض صفحه */
padding: 18px;
}
.infographic-step span { font-size: 1.6em; }
.infographic-arrow { font-size: 1.8em; }

.responsive-table th, .responsive-table td {
padding: 8px 10px;
font-size: 0.85em;
}
}