/*
این استایل‌ها به گونه‌ای طراحی شده‌اند که در ویرایشگرهای بلوک (مانند گوتنبرگ) و کلاسیک،
ظاهری زیبا، ریسپانسیو و منحصر به فرد داشته باشند.
رنگ‌بندی با هدف خوانایی بالا و جذابیت بصری انتخاب شده است.
*/
body, html {
margin: 0;
padding: 0;
font-family: ‘Vazirmatn’, ‘Iranian Sans’, ‘Tahoma’, ‘Segoe UI’, sans-serif; /* اضافه کردن فونت‌های فارسی */
line-height: 1.7;
color: #333333; /* رنگ متن اصلی: خاکستری تیره */
background-color: #fefefe; /* پس‌زمینه سفید مایل به کرم */
direction: rtl; /* جهت متن راست به چپ */
text-align: right; /* هم‌ترازی متن راست */
scroll-behavior: smooth;
}

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

/* استایل H1 – عنوان اصلی */
h1 {
font-size: 2.8em; /* اندازه فونت بزرگ */
font-weight: 800; /* بسیار ضخیم */
color: #004D99; /* آبی تیره و قوی */
text-align: center;
margin-top: 0;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 4px solid #007BFF; /* خط آبی روشن زیر عنوان */
letter-spacing: -0.5px;
line-height: 1.2;
}

/* استایل H2 – عناوین بخش‌ها */
h2 {
font-size: 2.2em; /* اندازه فونت بزرگ‌تر */
font-weight: 700; /* ضخیم */
color: #006BBF; /* آبی متوسط */
margin-top: 45px;
margin-bottom: 25px;
padding-right: 18px; /* پدینگ برای جدا کردن از نوار کناری */
border-right: 7px solid #00CFFF; /* نوار آبی روشن در سمت راست */
line-height: 1.3;
scroll-margin-top: 90px; /* برای اسکرول روان به لینک‌ها */
box-shadow: -3px 0px 8px rgba(0, 123, 255, 0.1); /* سایه ظریف در کنار نوار */
border-radius: 4px;
padding-top: 5px;
padding-bottom: 5px;
}

/* استایل H3 – زیرعنوان‌ها */
h3 {
font-size: 1.8em; /* اندازه فونت متوسط */
font-weight: 600; /* نیمه‌ضخیم */
color: #007BFF; /* آبی روشن */
margin-top: 35px;
margin-bottom: 20px;
padding-right: 12px;
border-right: 4px solid #5BC0DE; /* نوار آبی فیروزه‌ای در سمت راست */
line-height: 1.4;
scroll-margin-top: 80px;
}

p {
margin-bottom: 1.2em;
font-size: 1.08em;
line-height: 1.9;
text-align: justify; /* هم‌ترازی دو طرفه */
color: #3f3f3f;
}

ul, ol {
margin-bottom: 1.5em;
padding-right: 28px; /* پدینگ برای لیست‌ها در RTL */
font-size: 1.05em;
line-height: 1.8;
color: #444;
}

li {
margin-bottom: 0.8em;
}

a {
color: #007BFF; /* رنگ لینک: آبی روشن */
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
color: #0056b3; /* رنگ لینک در حالت هاور: آبی تیره‌تر */
text-decoration: underline;
}

/* استایل فهرست مطالب (Table of Contents) */
.toc {
background-color: #e0f7fa; /* پس‌زمینه آبی بسیار روشن */
border-right: 6px solid #00BCD4; /* نوار فیروزه‌ای در سمت راست */
padding: 30px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
}

.toc h3 {
color: #007BFF;
font-size: 2em;
margin-top: 0;
margin-bottom: 25px;
text-align: center;
border-bottom: 2px dashed #80deea; /* خط چین زیر عنوان فهرست */
padding-bottom: 15px;
border-right: none; /* حذف نوار کناری H3 اصلی */
padding-right: 0;
}

.toc ul {
list-style: none;
padding: 0;
margin: 0;
}

.toc li {
margin-bottom: 12px;
font-size: 1.15em;
}

.toc li a {
display: block;
padding: 10px 15px;
background-color: #f0faff; /* پس‌زمینه لینک‌ها */
border-radius: 7px;
transition: background-color 0.3s ease, color 0.3s ease;
color: #004D99; /* رنگ متن لینک‌ها */
text-align: right;
}

.toc li a:hover {
background-color: #b3e5fc; /* پس‌زمینه در هاور: آبی روشن‌تر */
color: #002e5c; /* متن در هاور: آبی بسیار تیره */
text-decoration: none;
transform: translateX(-5px); /* افکت حرکت کوچک به چپ */
}

/* استایل جدول آموزشی */
table {
width: 100%;
border-collapse: collapse;
margin: 40px 0;
background-color: #ffffff;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border-radius: 12px;
overflow: hidden; /* برای نمایش صحیح گوشه‌های گرد */
border: 1px solid #e0e0e0;
}

th, td {
border: 1px solid #e0e0e0; /* خطوط جدول */
padding: 18px;
text-align: right;
font-size: 1.05em;
color: #333;
}

th {
background-color: #007BFF; /* پس‌زمینه سرتیتر: آبی روشن */
color: #ffffff;
font-weight: bold;
text-align: center;
padding: 20px 18px;
font-size: 1.15em;
}

tr:nth-child(even) {
background-color: #f2faff; /* رنگ‌آمیزی یک در میان سطرها */
}

/* استایل جایگزین اینفوگرافیک (Visual Flow) */
.infographic-flow {
margin: 50px auto;
padding: 40px;
background-color: #e8f5e9; /* پس‌زمینه سبز بسیار روشن */
border: 2px solid #66BB6A; /* حاشیه سبز */
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
}

.infographic-flow h3 {
color: #2E7D32; /* سبز تیره */
font-size: 2.2em;
margin-top: 0;
margin-bottom: 30px;
border-bottom: 2px dashed #A5D6A7; /* خط چین سبز زیر عنوان */
padding-bottom: 18px;
border-right: none;
padding-right: 0;
}

.flow-steps-wrapper {
display: flex;
flex-direction: column; /* پیش‌فرض: ستونی برای موبایل */
align-items: center;
gap: 25px; /* فاصله بین مراحل */
}

.flow-step-item {
display: flex;
align-items: center;
width: 100%;
max-width: 650px; /* حداکثر عرض برای مراحل */
background-color: #ffffff;
border: 1px solid #C8E6C9;
border-radius: 10px;
padding: 20px 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flow-step-item:hover {
transform: translateY(-5px); /* افکت شناور شدن در هاور */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.flow-step-icon {
font-size: 3em;
color: #4CAF50; /* آیکون سبز */
background-color: #e0ffe0;
border-radius: 50%;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
margin-left: 25px; /* فاصله از متن */
}

.flow-step-text {
font-size: 1.2em;
color: #388E3C; /* متن سبز تیره */
text-align: right;
flex-grow: 1;
font-weight: 500;
}

.flow-arrow-down {
font-size: 3em;
color: #A5D6A7;
margin: 15px 0;
display: block; /* همیشه نمایش داده شود در حالت ستونی */
}

/* ریسپانسیو برای تبلت و لپ‌تاپ (عرض‌های متوسط) */
@media (min-width: 769px) {
.flow-steps-wrapper {
flex-direction: row; /* چیدمان افقی برای نمایشگرهای بزرگتر */
flex-wrap: wrap; /* اجازه شکست به خط بعدی */
justify-content: center;
gap: 30px 40px; /* فاصله بین عناصر */
}

.flow-step-item {
width: calc(50% – 20px); /* دو ستونه با فاصله */
max-width: unset; /* حذف محدودیت عرض قبلی */
}

.flow-arrow-down {
display: none; /* مخفی کردن فلش عمودی در چیدمان افقی */
}

.flow-step-item:nth-child(even) .flow-step-icon {
margin-right: 25px; /* برای مرحله‌های زوج، آیکون سمت راست */
margin-left: 0;
order: 2; /* تغییر ترتیب برای آیکون */
}
.flow-step-item:nth-child(even) .flow-step-text {
order: 1; /* تغییر ترتیب برای متن */
text-align: left;
}

}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
.article-container {
margin: 20px auto;
padding: 20px 25px;
border-radius: 10px;
box-shadow: none; /* حذف سایه برای موبایل */
}
h1 {
font-size: 2.2em;
margin-bottom: 25px;
padding-bottom: 15px;
}
h2 {
font-size: 1.8em;
margin-top: 35px;
margin-bottom: 20px;
padding-right: 12px;
border-right: 5px solid #00CFFF;
}
h3 {
font-size: 1.5em;
margin-top: 28px;
margin-bottom: 15px;
padding-right: 8px;
border-right: 3px solid #5BC0DE;
}
p, ul, ol, table, th, td, .toc li, .flow-step-text {
font-size: 0.98em;
}
.toc {
padding: 20px;
margin: 30px 0;
border-right: 4px solid #00BCD4;
}
.toc h3 {
font-size: 1.8em;
margin-bottom: 20px;
padding-bottom: 10px;
}
.toc li a {
padding: 8px 10px;
}
table, th, td {
padding: 12px;
}
th {
font-size: 1.05em;
padding: 15px 12px;
}
.infographic-flow {
padding: 25px;
margin: 35px auto;
border-radius: 10px;
}
.infographic-flow h3 {
font-size: 1.9em;
margin-bottom: 25px;
padding-bottom: 12px;
}
.flow-step-item {
flex-direction: column; /* همیشه ستونی در موبایل */
padding: 18px 20px;
align-items: center;
}
.flow-step-icon {
font-size: 2.5em;
width: 60px;
height: 60px;
margin-left: 0;
margin-bottom: 15px; /* فاصله از متن در حالت ستونی */
}
.flow-step-text {
text-align: center;
}
.flow-arrow-down {
font-size: 2.5em;
margin: 10px 0;
}
}

/* ریسپانسیو برای نمایشگرهای خیلی کوچک */
@media (max-width: 480px) {
.article-container {
padding: 15px 20px;
}
h1 {
font-size: 1.9em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.3em;
}
p, ul, ol, table, th, td, .toc li, .flow-step-text {
font-size: 0.95em;
}
.infographic-flow {
padding: 20px;
}
.infographic-flow h3 {
font-size: 1.7em;
}
.flow-step-icon {
font-size: 2.2em;
width: 55px;
height: 55px;
}
}

“`