/* تنظیمات پایه برای رندر شدن در ویرایشگر بلوک و کلاسیک */
body {
font-family: ‘Tahoma’, ‘Vazirmatn’, sans-serif; /* فونت‌های جایگزین برای پشتیبانی گسترده */
line-height: 1.7;
color: #333;
background-color: #f8f9fa;
direction: rtl; /* برای زبان فارسی */
text-align: right; /* برای زبان فارسی */
margin: 0;
padding: 0;
}

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

/* تنظیمات رسپانسیو */
@media (max-width: 1024px) { /* لپ‌تاپ و تبلت بزرگ */
.container {
max-width: 90%;
padding: 25px;
margin: 20px auto;
}
}

@media (max-width: 768px) { /* تبلت و موبایل بزرگ */
.container {
max-width: 95%;
padding: 20px;
margin: 15px auto;
}
}

@media (max-width: 480px) { /* موبایل */
.container {
max-width: 100%;
padding: 15px;
margin: 10px 0;
border-radius: 0;
box-shadow: none;
}
}

/* استایل هدینگ‌ها */
h1 {
font-size: 2.6em; /* سایز بزرگتر برای عنوان اصلی */
color: #013d2a; /* رنگ سبز تیره و جذاب */
font-weight: 800; /* بسیار ضخیم */
text-align: center;
margin-bottom: 35px;
line-height: 1.3;
position: relative;
padding-bottom: 15px;
}
h1::after {
content: ”;
display: block;
width: 80px;
height: 5px;
background-color: #6dae37; /* رنگ سبز روشن */
margin: 15px auto 0;
border-radius: 3px;
}

h2 {
font-size: 2.0em; /* سایز برای بخش‌های اصلی */
color: #02573b; /* سبز متوسط */
font-weight: 700; /* ضخیم */
margin-top: 45px;
margin-bottom: 25px;
padding-right: 15px;
border-right: 6px solid #6dae37; /* نوار کناری سبز روشن */
line-height: 1.4;
}

h3 {
font-size: 1.5em; /* سایز برای زیربخش‌ها */
color: #276f4e; /* سبز کمی روشن‌تر */
font-weight: 600; /* نیمه ضخیم */
margin-top: 35px;
margin-bottom: 18px;
padding-right: 10px;
border-right: 4px solid #b7e390; /* نوار کناری سبز بسیار روشن */
}

p {
font-size: 1.05em;
line-height: 1.8;
margin-bottom: 1.2em;
text-align: justify; /* تراز از دو طرف برای زیبایی */
}

ul {
list-style-type: none; /* حذف نشانگر پیش‌فرض */
padding-right: 0; /* حذف padding پیش‌فرض */
margin-right: 0;
}
ul li {
position: relative;
padding-right: 30px;
margin-bottom: 10px;
font-size: 1.0em;
line-height: 1.7;
}
ul li::before {
content: ‘🧬’; /* استفاده از ایموجی به عنوان نشانگر */
position: absolute;
right: 0;
color: #6dae37;
font-size: 1.2em;
top: 2px;
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 1.0em;
text-align: right;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
border-radius: 10px;
overflow: hidden; /* برای گرد کردن گوشه‌ها */
/* رسپانسیو برای جدول */
display: block;
overflow-x: auto;
white-space: nowrap; /* جلوگیری از شکستن متن در ستون‌ها */
}

table thead tr {
background-color: #02573b; /* رنگ سبز تیره برای هدر */
color: #ffffff;
}

table th, table td {
padding: 15px 20px;
border: 1px solid #e0e0e0;
vertical-align: top;
white-space: normal; /* برای اینکه متن در داخل سلول‌ها بشکند */
max-width: 350px; /* حداکثر عرض برای سلول‌ها */
box-sizing: border-box;
}

table tbody tr:nth-of-type(even) {
background-color: #f9fdf9; /* رنگ پس‌زمینه روشن‌تر برای سطرهای زوج */
}

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

/* استایل بخش اینفوگرافیک (جایگزین بصری) */
.infographic-flow {
display: flex;
flex-direction: column; /* برای چیدمان عمودی در موبایل */
gap: 20px;
margin: 40px 0;
padding: 25px;
background: linear-gradient(135deg, #e6f7e6, #d0e8d0); /* گرادیان سبز روشن */
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.infographic-flow h2 {
text-align: center;
color: #013d2a;
margin-top: 0;
margin-bottom: 30px;
border-right: none;
padding-right: 0;
}

.flow-step {
background-color: #ffffff;
border: 2px solid #6dae37;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
flex: 1; /* برای اشغال فضای مساوی در دسکتاپ */
}
.flow-step:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.flow-step .icon {
font-size: 2.5em;
margin-bottom: 10px;
color: #6dae37;
display: block;
}
.flow-step h4 {
font-size: 1.3em;
color: #02573b;
margin-bottom: 10px;
font-weight: 700;
}
.flow-step p {
font-size: 0.95em;
color: #555;
line-height: 1.6;
text-align: center;
margin-bottom: 0;
}

/* خطوط اتصال در دسکتاپ */
.flow-step:not(:last-child)::after {
content: ‘⬇️’;
position: absolute;
bottom: -30px; /* فاصله از پایین باکس */
left: 50%;
transform: translateX(-50%);
font-size: 1.8em;
color: #6dae37;
z-index: 10;
display: block; /* همیشه نمایش داده شود */
}

@media (min-width: 769px) { /* برای دسکتاپ، اینفوگرافیک به صورت افقی */
.infographic-flow {
flex-direction: row;
flex-wrap: wrap; /* برای اینکه در صورت لزوم به سطر بعدی برود */
justify-content: center;
align-items: stretch; /* ارتفاع یکسان برای تمام قدم‌ها */
}
.infographic-flow h2 {
width: 100%; /* عنوان تمام عرض را بگیرد */
}
.flow-step {
margin: 0 10px;
max-width: 30%; /* حداکثر سه ستون در دسکتاپ */
min-width: 250px; /* حداقل عرض برای هر قدم */
position: relative;
flex: 1; /* برای اشغال فضای مساوی */
}
.flow-step:not(:last-child)::after {
content: ‘➡️’; /* جهت پیکان افقی */
bottom: auto;
right: -25px; /* فاصله از سمت راست باکس */
left: auto;
top: 50%;
transform: translateY(-50%);
}
/* آخرین مرحله نیاز به پیکان ندارد */
.flow-step:last-child::after {
display: none;
}

/* اگر تعداد مراحل فرد باشد، آخرین مرحله وسط قرار گیرد */
.infographic-flow.steps-odd .flow-step:last-child {
margin-left: auto;
margin-right: auto;
}
}

/* فهرست مطالب */
.table-of-contents {
background-color: #f0fdf0;
border-left: 5px solid #6dae37;
padding: 20px 25px;
margin: 30px 0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.table-of-contents h3 {
color: #02573b;
margin-top: 0;
margin-bottom: 15px;
font-size: 1.4em;
border-right: none;
padding-right: 0;
text-align: right;
}
.table-of-contents ul {
list-style: none;
padding-right: 0;
}
.table-of-contents ul li {
margin-bottom: 8px;
position: relative;
padding-right: 25px;
}
.table-of-contents ul li::before {
content: ‘▪’;
position: absolute;
right: 0;
color: #6dae37;
font-size: 1.2em;
top: 0;
}
.table-of-contents ul li a {
color: #333;
text-decoration: none;
font-size: 1.05em;
transition: color 0.3s ease;
}
.table-of-contents ul li a:hover {
color: #6dae37;
text-decoration: underline;
}
.highlight-box {
background-color: #e6f7e6;
border-right: 5px solid #6dae37;
padding: 20px;
margin: 30px 0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.highlight-box p {
margin: 0;
color: #276f4e;
font-weight: 500;
}
.highlight-box strong {
color: #02573b;
}

/* برای تضمین نمایش صحیح در ویرایشگر بلوک */
.wp-block-group.container {
/* این کلاس می‌تواند توسط وردپرس اضافه شود */
margin: 0 auto;
}