/* تنظیمات عمومی و پایه برای رسپانسیو بودن و نمایش صحیح در ویرایشگر بلوک */
body { font-family: ‘B Nazanin’, ‘Arial’, sans-serif; line-height: 1.8; color: #333; margin: 0; padding: 0; background-color: #fcfdfd; direction: rtl; text-align: right; }
/* استایل دهی هدینگ ها برای شناسایی خودکار و نمایش زیبا */
h1 { font-family: ‘B Titr’, ‘Arial Black’, sans-serif; font-size: 2.8em; font-weight: 800; color: #1a5338; text-align: center; padding-bottom: 20px; border-bottom: 3px solid #e0f2f1; margin-bottom: 40px; line-height: 1.3; }
h2 { font-family: ‘B Titr’, ‘Arial Black’, sans-serif; font-size: 2.2em; font-weight: 700; color: #2e7d32; border-bottom: 1px solid #e8f5e9; padding-bottom: 12px; margin-top: 50px; margin-bottom: 25px; line-height: 1.4; }
h3 { font-family: ‘B Titr’, ‘Arial Black’, sans-serif; font-size: 1.6em; font-weight: 600; color: #388e3c; margin-top: 30px; margin-bottom: 15px; line-height: 1.5; }
p { font-size: 1.1em; line-height: 1.9; margin-bottom: 1.5em; color: #424242; }
ul { list-style-type: disc; margin-right: 25px; margin-bottom: 1.5em; padding: 0; }
li { margin-bottom: 1em; line-height: 1.7; color: #424242; }
strong { color: #2a6a4a; }

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

/* جدول آموزشی استاندارد */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2.5em;
border: 1px solid #c8e6c9;
border-radius: 8px;
overflow: hidden; /* برای نمایش صحیح border-radius */
}
th, td {
border: 1px solid #e0f2f1;
padding: 14px 18px;
text-align: right;
font-size: 1.05em;
line-height: 1.6;
}
th {
background-color: #eaf5ee;
color: #2a6a4a;
font-weight: bold;
font-family: ‘B Titr’, sans-serif;
}
td {
background-color: #f7fcf9;
color: #555;
}

/* بلوک راهنما/هایلایت */
.highlight-box {
background-color: #f0f7f3;
border-right: 6px solid #4CAF50; /* یک خط سبز رنگ جذاب در سمت راست */
padding: 20px 25px;
margin: 30px 0;
border-radius: 8px;
color: #3a3a3a;
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.highlight-box ul { list-style-type: none; margin-right: 0; padding-right: 0; }
.highlight-box li { margin-bottom: 0.8em; }
.highlight-box strong { color: #2a6a4a; font-size: 1.05em; }

/* اینفوگرافیک زیبا (جایگزین متنی) */
.info-graphic-block {
background-color: #e8f5e9;
border: 2px solid #a5d6a7;
padding: 30px;
margin: 40px 0;
border-radius: 15px;
text-align: center;
display: flex; /* استفاده از فلکس باکس برای چیدمان بهتر */
flex-wrap: wrap; /* برای واکنش‌گرا شدن و رفتن آیتم‌ها به خط بعدی */
justify-content: space-around; /* توزیع فضا بین آیتم‌ها */
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.info-graphic-block h3 {
color: #2e7d32;
margin-top: 0;
margin-bottom: 30px;
font-size: 2em;
font-weight: 700;
width: 100%; /* عنوان تمام عرض را بگیرد */
}
.info-graphic-block .item {
flex: 1 1 45%; /* اجازه رشد و کوچک شدن، حداقل عرض 45% */
margin: 15px;
padding: 20px;
background-color: #f7fcf9;
border: 1px solid #d4e9d7;
border-radius: 10px;
text-align: right;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
min-width: 300px; /* حداقل عرض برای هر آیتم */
box-sizing: border-box;
}
.info-graphic-block .item strong {
display: block;
margin-bottom: 10px;
color: #388e3c;
font-size: 1.3em;
line-height: 1.4;
border-bottom: 1px dashed #e0e0e0;
padding-bottom: 8px;
}
.info-graphic-block .item p {
margin: 8px 0;
color: #4c4c4c;
font-size: 0.98em;
line-height: 1.7;
}

/* فهرست مطالب */
.toc-block {
background-color: #f7fcf9;
border: 1px solid #d4e9d7;
padding: 20px 30px;
margin-bottom: 35px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.toc-block h2 {
color: #2a6a4a;
margin-top: 0.5em;
margin-bottom: 1em;
font-size: 1.9em;
border-bottom: none; /* برای این هدینگ، خط زیرین را حذف می‌کنیم */
padding-bottom: 0;
text-align: right;
}
.toc-block ul {
list-style: none;
padding: 0;
margin: 0;
}
.toc-block li {
margin-bottom: 10px;
margin-right: 0; /* حذف margin-right اضافی از ul */
padding-right: 10px;
border-right: 3px solid #a5d6a7; /* خط سبز کوچک در کنار هر آیتم */
}
.toc-block a {
text-decoration: none;
color: #00796b;
font-weight: 500;
transition: color 0.3s ease, text-decoration 0.3s ease;
display: block; /* برای اینکه کل ناحیه قابل کلیک باشد */
padding: 2px 5px;
}
.toc-block a:hover {
color: #004d40;
text-decoration: underline;
background-color: #e0f2f1;
border-radius: 3px;
}

/* رسپانسیو بودن برای دستگاه‌های مختلف */
@media (max-width: 768px) {
.article-container { padding: 20px; margin: 15px auto; }
h1 { font-size: 2em; padding-bottom: 15px; margin-bottom: 25px; }
h2 { font-size: 1.8em; margin-top: 40px; margin-bottom: 20px; }
h3 { font-size: 1.4em; margin-top: 25px; margin-bottom: 12px; }
p, th, td, li { font-size: 1em; line-height: 1.7; }
th, td { padding: 10px 12px; }
.info-graphic-block { flex-direction: column; padding: 20px; } /* آیتم‌ها زیر هم قرار بگیرند */
.info-graphic-block .item { flex: 1 1 100%; margin: 10px 0; min-width: auto; }
.toc-block { padding: 15px 20px; }
.toc-block h2 { font-size: 1.6em; }
}

@media (max-width: 480px) {
h1 { font-size: 1.7em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
p, th, td, li { font-size: 0.95em; line-height: 1.6; }
.article-container { padding: 15px; margin: 10px auto; }
}