/* Base Styles: تنظیمات عمومی برای تمامی دستگاه‌ها */
body {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت‌های فارسی و جایگزین */
direction: rtl; /* جهت‌دهی راست به چپ برای زبان فارسی */
line-height: 1.8; /* ارتفاع خط برای خوانایی بهتر */
color: #333333; /* رنگ متن اصلی */
background-color: #f9f9f9; /* رنگ پس‌زمینه کلی صفحه */
margin: 0;
padding: 0;
}

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

/* Headings: تنظیمات هدینگ‌ها (H1, H2, H3) */
h1, h2, h3 {
color: #0056b3; /* رنگ آبی تیره برای هدینگ‌های اصلی */
margin-top: 1.8em; /* فاصله از محتوای بالایی */
margin-bottom: 0.8em; /* فاصله از محتوای پایینی */
text-align: right; /* تراز راست برای هدینگ‌ها */
}

h1 {
font-size: 2.6em; /* سایز بزرگ برای عنوان اصلی (تقریباً 42px) */
font-weight: 700; /* ضخامت بیشتر فونت */
text-align: center; /* عنوان اصلی در مرکز */
border-bottom: 3px solid #0056b3; /* خط زیرین آبی تیره */
padding-bottom: 18px; /* فاصله خط از متن */
margin-bottom: 35px; /* فاصله از محتوای بعدی */
line-height: 1.3;
}

h2 {
font-size: 1.9em; /* سایز متوسط برای سرفصل‌های اصلی (تقریباً 30px) */
font-weight: 600; /* ضخامت متوسط فونت */
border-bottom: 2px solid #e0e0e0; /* خط زیرین خاکستری روشن */
padding-bottom: 12px;
margin-top: 3em; /* فضای بیشتر قبل از H2 برای جداسازی بهتر */
}

h3 {
font-size: 1.4em; /* سایز کوچکتر برای زیربخش‌ها (تقریباً 22px) */
font-weight: 600;
color: #007bff; /* رنگ آبی روشن‌تر برای زیرعنوان‌ها */
margin-top: 2.2em;
}

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

/* Lists: تنظیمات لیست‌ها (بولیت پوینت) */
ul {
list-style-type: square; /* نوع بولیت مربع */
margin-right: 30px; /* حاشیه از راست برای فرورفتگی لیست */
padding-right: 0;
margin-bottom: 1.5em;
}

ul li {
margin-bottom: 0.9em; /* فاصله بین آیتم‌های لیست */
line-height: 1.8;
}

/* Table Styles: تنظیمات جدول */
table {
width: 100%; /* عرض کامل جدول */
border-collapse: collapse; /* حذف فاصله بین خانه‌های جدول */
margin: 2.5em 0; /* حاشیه بالا و پایین جدول */
font-size: 1.05em;
text-align: right; /* تراز راست محتوای جدول */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* سایه ملایم برای جدول */
border-radius: 8px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* برای اعمال border-radius به محتوای داخلی */
}

table th, table td {
border: 1px solid #e0e0e0; /* حاشیه خانه‌های جدول */
padding: 14px 18px; /* فضای داخلی خانه‌ها */
}

table thead {
background-color: #007bff; /* پس‌زمینه آبی روشن برای سرتیتر جدول */
color: white; /* رنگ متن سفید برای سرتیتر */
}

table th {
font-weight: 600; /* ضخامت فونت سرتیتر */
text-align: center; /* سرتیتر در مرکز */
}

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

table tbody tr:hover {
background-color: #eef7ff; /* تغییر رنگ ردیف هنگام هاور */
}

/* Infographic Alternative: سبک‌دهی برای اینفوگرافیک متنی */
.infographic-box {
background-color: #e6f7ff; /* پس‌زمینه آبی بسیار روشن */
border: 2px dashed #007bff; /* حاشیه خط‌چین آبی */
padding: 30px;
margin: 3.5em 0;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

.infographic-box h3 {
color: #0056b3;
font-size: 1.8em;
margin-bottom: 1.5em;
border-bottom: none;
padding-bottom: 0;
text-align: center;
}

.step {
margin-bottom: 1.8em;
position: relative;
}

.step-title {
font-weight: 700;
color: #ffffff; /* متن سفید برای عنوان گام */
background-color: #28a745; /* پس‌زمینه سبز برای عنوان گام */
padding: 10px 20px;
border-radius: 8px;
display: inline-block; /* برای اینکه به اندازه محتوا عرض بگیرد */
margin-bottom: 12px;
border: 1px solid #28a745;
font-size: 1.25em;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.step-description {
font-size: 1.05em;
color: #555;
line-height: 1.8;
}

.arrow {
font-size: 2em; /* سایز بزرگتر برای فلش */
color: #007bff;
margin: 15px 0;
display: block;
text-align: center;
}
.arrow:last-of-type {
display: none; /* مخفی کردن فلش بعد از آخرین گام */
}

/* Responsive Design: تنظیمات برای نمایش در دستگاه‌های مختلف */

/* برای تبلت و لپ‌تاپ‌های کوچک (عرض کمتر از 768px) */
@media (max-width: 768px) {
.container {
margin: 20px;
padding: 20px;
}

h1 {
font-size: 2.2em; /* کوچکتر شدن عنوان اصلی */
padding-bottom: 15px;
margin-bottom: 25px;
}

h2 {
font-size: 1.6em; /* کوچکتر شدن سرفصل‌ها */
padding-bottom: 10px;
margin-top: 2.5em;
}

h3 {
font-size: 1.2em;
margin-top: 1.8em;
}

p {
font-size: 1em;
line-height: 1.9;
}

ul {
margin-right: 20px;
}

table {
display: block; /* تبدیل جدول به بلاک برای اسکرول افقی */
overflow-x: auto; /* فعال کردن اسکرول افقی */
white-space: nowrap; /* جلوگیری از شکستن متن در خانه‌های جدول */
}
/* این قسمت از CSS ممکن است در برخی ویرایشگرهای بلوک به درستی اعمال نشود، اما برای نمایش وب استاندارد است. */
table thead, table tbody, table tr {
display: block;
}
table th, table td {
width: auto !important; /* اجازه دادن به سلول‌ها تا عرض طبیعی خود را بگیرند */
display: inline-block;
text-align: right;
box-sizing: border-box; /* برای محاسبه درست عرض و ارتفاع شامل padding و border */
}
table tr {
border-bottom: 1px solid #ddd;
}
table td:first-child {
border-right: none;
}
.infographic-box {
padding: 20px;
}
.step-title {
font-size: 1.15em;
padding: 8px 15px;
}
.arrow {
font-size: 1.8em;
}
}

/* برای موبایل‌های کوچک (عرض کمتر از 480px) */
@media (max-width: 480px) {
.container {
margin: 15px;
padding: 15px;
}
h1 {
font-size: 1.8em;
padding-bottom: 10px;
margin-bottom: 20px;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.1em;
}
p {
font-size: 0.95em;
line-height: 1.8;
}
ul {
margin-right: 15px;
}
.infographic-box {
padding: 15px;
}
.step-title {
font-size: 1.1em;
padding: 6px 12px;
}
.arrow {
font-size: 1.5em;
}
}

/* کلاس‌های اضافی برای اطمینان از اعمال استایل در ویرایشگرهای بلوک (مانند گوتنبرگ) */
/* این کلاس‌ها در کنار استایل‌های اصلی به عنوان فال‌بک عمل می‌کنند. */
.wp-block-heading.h1-custom { font-size: 2.6em; font-weight: 700; color: #0056b3; text-align: center; border-bottom: 3px solid #0056b3; padding-bottom: 18px; margin-bottom: 35px; line-height: 1.3; }
.wp-block-heading.h2-custom { font-size: 1.9em; font-weight: 600; color: #0056b3; border-bottom: 2px solid #e0e0e0; padding-bottom: 12px; margin-top: 3em; }
.wp-block-heading.h3-custom { font-size: 1.4em; font-weight: 600; color: #007bff; margin-top: 2.2em; }
.wp-block-paragraph.p-custom { margin-bottom: 1.2em; font-size: 1.05em; line-height: 2; text-align: justify; }
.wp-block-list.ul-custom { list-style-type: square; margin-right: 30px; padding-right: 0; margin-bottom: 1.5em; }
.wp-block-table.table-custom { width: 100%; border-collapse: collapse; margin: 2.5em 0; font-size: 1.05em; text-align: right; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); border-radius: 8px; overflow: hidden; }
.wp-block-table.table-custom th, .wp-block-table.table-custom td { border: 1px solid #e0e0e0; padding: 14px 18px; }
.wp-block-table.table-custom thead { background-color: #007bff; color: white; }
.wp-block-table.table-custom th { font-weight: 600; text-align: center; }
.wp-block-table.table-custom tbody tr:nth-child(even) { background-color: #f8f8f8; }
.wp-block-table.table-custom tbody tr:hover { background-color: #eef7ff; }
.wp-block-group.infographic-box-custom { background-color: #e6f7ff; border: 2px dashed #007bff; padding: 30px; margin: 3.5em 0; border-radius: 10px; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); }
.wp-block-heading.step-title-custom { font-weight: 700; color: #ffffff; background-color: #28a745; padding: 10px 20px; border-radius: 8px; display: inline-block; margin-bottom: 12px; border: 1px solid #28a745; font-size: 1.25em; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }