/* تنظیمات پایه برای خوانایی و ریسپانسیو بودن */
body {
font-family: ‘B Nazanin’, ‘Arial’, sans-serif; /* فونت فارسی و جایگزین */
line-height: 1.8;
color: #333333; /* رنگ متن اصلی */
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl; /* راست به چپ برای فارسی */
text-align: right;
background-color: #F0F2F5; /* رنگ پس‌زمینه عمومی صفحه */
}

/* کانتینر اصلی مقاله برای حداکثر عرض و وسط‌چین کردن */
.article-container {
max-width: 960px; /* افزایش عرض برای نمایش بهتر در صفحات بزرگ */
margin: 30px auto;
padding: 30px 25px;
background-color: #ffffff;
border-radius: 15px; /* گوشه‌های گرد برای کانتینر اصلی */
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* سایه زیبا */
overflow-x: hidden; /* جلوگیری از اسکرول افقی */
}

/* استایل هدینگ‌ها */
h1, h2, h3 {
font-family: ‘B Titr’, ‘Arial Black’, sans-serif; /* فونت تیتر برای هدینگ‌ها */
color: #2C3E50; /* آبی تیره مایل به خاکستری */
margin-top: 2.5em;
margin-bottom: 1em;
line-height: 1.4;
font-weight: bold;
}

h1 {
font-size: 2.6em; /* سایز بزرگتر برای H1 */
text-align: center;
color: #004D40; /* سبز تیره برای H1 */
border-bottom: 4px solid #80CBC4; /* خط زیرین سبز روشن */
padding-bottom: 20px;
margin-bottom: 40px;
margin-top: 1em;
}

h2 {
font-size: 2.1em; /* سایز H2 */
color: #3F51B5; /* آبی نیلی */
background-color: #EEF7FF; /* پس‌زمینه آبی روشن برای H2 */
padding: 15px 25px;
border-radius: 10px;
border-right: 6px solid #5C6BC0; /* نوار آبی پررنگ در سمت راست */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
margin-top: 4em; /* فضای بیشتر بالای H2 */
margin-bottom: 1.5em;
}

h3 {
font-size: 1.7em; /* سایز H3 */
color: #444444; /* خاکستری تیره */
border-right: 4px solid #78909C; /* نوار خاکستری آبی در سمت راست */
padding-right: 15px;
margin-top: 3em;
margin-bottom: 1em;
}

/* استایل پاراگراف‌ها */
p {
margin-bottom: 1.6em;
font-size: 1.15em;
text-align: justify; /* توجیه متن برای ظاهری مرتب */
}

/* استایل لیست‌ها (UL, OL) */
ul, ol {
margin-bottom: 1.8em;
padding-right: 30px; /* تورفتگی لیست‌ها */
}

li {
margin-bottom: 0.9em;
font-size: 1.1em;
padding-right: 5px;
}

ul li::before {
content: “•”; /* علامت بولت سفارشی */
color: #4CAF50; /* رنگ سبز برای بولت */
font-weight: bold;
display: inline-block;
width: 1em;
margin-right: -1em; /* تنظیم فاصله */
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 2.5em 0;
background-color: #FDFEFE; /* پس‌زمینه روشن برای جدول */
border: 1px solid #E0E0E0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

caption {
font-size: 1.4em;
font-weight: bold;
margin-bottom: 1.2em;
color: #333333;
font-family: ‘B Titr’, ‘Arial Black’, sans-serif;
text-align: center;
padding: 10px 0;
}

th, td {
padding: 18px 25px;
border: 1px solid #ECEFF1; /* مرزهای روشن */
text-align: right;
font-size: 1.1em;
}

th {
background-color: #BBDEFB; /* هدر آبی روشن */
color: #2C3E50;
font-weight: bold;
font-size: 1.25em;
}

tr:nth-child(even) {
background-color: #F8F9FA; /* خطوط گورخری برای ردیف‌ها */
}

tr:hover {
background-color: #E3F2FD; /* هایلایت در هنگام هاور */
}

/* استایل فهرست مطالب */
.table-of-contents {
background-color: #F0F8FF; /* پس‌زمینه آبی روشن */
border-left: 6px solid #90CAF9; /* نوار آبی در سمت چپ */
padding: 25px;
margin: 3em 0;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.table-of-contents h2 {
color: #1976D2; /* آبی تیره‌تر برای عنوان فهرست */
font-size: 1.8em;
margin-top: 0;
margin-bottom: 1.2em;
background-color: transparent; /* لغو پس‌زمینه H2 */
border: none;
box-shadow: none;
padding: 0;
text-align: right;
}

.table-of-contents ul {
list-style: none; /* حذف بولت‌های پیش‌فرض */
padding: 0;
margin: 0;
}

.table-of-contents li {
margin-bottom: 0.8em;
padding-right: 0;
}

.table-of-contents a {
color: #3F51B5; /* رنگ لینک نیلی */
text-decoration: none;
font-size: 1.15em;
transition: color 0.3s ease;
}

.table-of-contents a:hover {
color: #1A237E; /* آبی نیلی تیره‌تر در هاور */
text-decoration: underline;
}

/* استایل بخش شبیه اینفوگرافیک */
.infographic-box {
background-color: #E8F5E9; /* پس‌زمینه سبز روشن */
border: 2px solid #81C784; /* حاشیه سبز */
border-radius: 20px;
padding: 35px;
margin: 3.5em 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
text-align: center;
direction: rtl;
}

.infographic-box h3 {
color: #388E3C; /* سبز تیره برای عنوان اینفوگرافیک */
font-size: 2em;
margin-top: 0;
margin-bottom: 1.5em;
border: none;
padding-right: 0;
}

.infographic-item {
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
align-items: center;
justify-content: flex-end; /* تراز به راست برای RTL */
margin-bottom: 30px;
padding: 20px;
background-color: #FFFFFF;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
flex-wrap: wrap; /* اجازه شکستن آیتم‌ها در صفحات کوچک */
}

.infographic-item:hover {
transform: translateY(-7px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.infographic-icon {
font-size: 3em; /* سایز بزرگتر آیکون */
color: #4CAF50; /* آیکون سبز */
margin-left: 25px; /* فاصله بین آیکون و متن */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}

.infographic-text {
text-align: right;
flex-grow: 1; /* اجازه رشد متن برای گرفتن فضای موجود */
font-size: 1.2em;
color: #444444;
}

.infographic-text strong {
color: #388E3C;
font-size: 1.25em;
}

/* بخش پرسش‌های متداول (FAQ) */
.faq-item {
background-color: #F8F9FA;
border: 1px solid #D1E7DD;
border-radius: 10px;
padding: 22px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.3s ease;
}

.faq-item:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.faq-item h3 {
font-size: 1.4em;
font-weight: bold;
color: #285A3F;
margin-top: 0;
margin-bottom: 1em;
border: none;
padding-right: 0;
}

.faq-item p {
font-size: 1.1em;
margin-bottom: 0;
}

/* تنظیمات ریسپانسیو */
@media (max-width: 992px) {
.article-container {
max-width: 760px;
margin: 25px auto;
padding: 25px 20px;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; padding: 12px 20px; }
h3 { font-size: 1.4em; padding-right: 12px; }
p, li, th, td { font-size: 1.05em; }
.infographic-box { padding: 30px; }
.infographic-icon { font-size: 2.8em; margin-left: 20px; }
.infographic-text { font-size: 1.1em; }
}

@media (max-width: 768px) {
.article-container {
margin: 15px auto;
padding: 15px;
border-radius: 10px;
}
h1 {
font-size: 2em;
padding-bottom: 15px;
margin-bottom: 30px;
}
h2 {
font-size: 1.6em;
padding: 10px 15px;
border-right-width: 4px;
margin-top: 3em;
}
h3 {
font-size: 1.3em;
padding-right: 10px;
border-right-width: 3px;
margin-top: 2.5em;
}
p, li, th, td, caption { font-size: 1em; }
.table-of-contents { padding: 20px; margin: 2em 0; border-left-width: 4px; border-radius: 8px; }
.table-of-contents h2 { font-size: 1.5em; margin-bottom: 1em; }
.table-of-contents a { font-size: 1.05em; }
.infographic-box { padding: 25px; margin: 3em 0; border-radius: 15px; }
.infographic-box h3 { font-size: 1.8em; margin-bottom: 1.2em; }
.infographic-item { flex-direction: column; text-align: center; align-items: center; padding: 15px; margin-bottom: 20px; }
.infographic-icon { margin-left: 0; margin-bottom: 12px; font-size: 2.5em; }
.infographic-text { text-align: center; font-size: 1.05em; }
.faq-item { padding: 18px; margin-bottom: 15px; }
.faq-item h3 { font-size: 1.2em; margin-bottom: 0.8em; }

table {
border-radius: 8px;
margin: 2em 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
th, td {
padding: 15px 20px;
}
}

@media (max-width: 480px) {
.article-container {
padding: 10px;
margin: 10px auto;
border-radius: 8px;
}
h1 {
font-size: 1.8em;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom-width: 3px;
}
h2 {
font-size: 1.4em;
padding: 8px 12px;
border-right-width: 3px;
margin-top: 2.5em;
}
h3 {
font-size: 1.2em;
padding-right: 8px;
border-right-width: 2px;
margin-top: 2em;
}
p, li { font-size: 0.95em; }
ul, ol { padding-right: 20px; }
.table-of-contents { padding: 15px; margin: 1.5em 0; border-left-width: 3px; border-radius: 6px; }
.table-of-contents h2 { font-size: 1.3em; margin-bottom: 0.8em; }
.table-of-contents a { font-size: 1em; }
.infographic-box { padding: 20px; margin: 2.5em 0; border-radius: 12px; }
.infographic-box h3 { font-size: 1.6em; margin-bottom: 1em; }
.infographic-item { padding: 10px; margin-bottom: 15px; }
.infographic-icon { font-size: 2.2em; margin-bottom: 10px; }
.infographic-text { font-size: 1em; }
.faq-item { padding: 15px; margin-bottom: 12px; }
.faq-item h3 { font-size: 1.1em; margin-bottom: 0.7em; }
.faq-item p { font-size: 0.9em; }

/* ریسپانسیو کردن جدول برای موبایل */
table, thead, tbody, th, td, tr {
display: block; /* تبدیل عناصر جدول به بلاک برای نمایش پشته‌ای */
}
thead tr {
position: absolute; /* پنهان کردن هدر اصلی جدول */
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #E0E0E0;
border-radius: 5px;
margin-bottom: 1.5em;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
td {
border: none; /* حذف مرزهای بین سلول‌ها */
border-bottom: 1px solid #ECEFF1;
position: relative;
padding-left: 50%; /* فضای کافی برای عنوان ستون */
text-align: right;
}
td::before {
/* نمایش عنوان ستون به عنوان یک شبه‌عنصر */
content: attr(data-label);
position: absolute;
right: 0;
width: 45%;
padding-right: 10px;
font-weight: bold;
text-align: right;
color: #555555;
background-color: #F0F4F7;
padding: 15px 10px;
border-left: 1px solid #ECEFF1;
box-sizing: border-box;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
td:last-child {
border-bottom: none; /* حذف مرز پایینی آخرین سلول */
}
}