/* Base Styles */
:root {
–primary-color: #2C3E50; /* Dark Blue – برای تیترهای اصلی و متن مهم */
–secondary-color: #3498DB; /* Brighter Blue – برای خطوط جداکننده، آیکون‌ها و لینک‌ها */
–accent-color: #E74C3C; /* Red for emphasis/alerts (کمتر استفاده می‌شود) */
–text-color: #333333; /* رنگ اصلی متن */
–light-text-color: #666666; /* رنگ متن‌های فرعی‌تر */
–background-color: #FDFDFD; /* رنگ پس‌زمینه کلی صفحه */
–light-background: #ECF0F1; /* رنگ پس‌زمینه بلوک‌های اطلاعاتی و جدول */
–border-color: #CCCCCC; /* رنگ خطوط جداکننده */
–heading-font: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت تیترها */
–body-font: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت متن اصلی */
}

/* تنظیمات عمومی برای کل صفحه */
body {
font-family: var(–body-font);
line-height: 1.7;
color: var(–text-color);
background-color: var(–background-color);
margin: 0;
padding: 0;
direction: rtl; /* جهت نوشتار از راست به چپ برای فارسی */
text-align: right; /* تراز متن به راست */
}

/* کانتینر اصلی مقاله برای محدود کردن عرض و زیبایی */
.article-container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #FFFFFF;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* سایه ملایم برای جلوه سه‌بعدی */
}

/* استایل‌های تیترها (H1, H2, H3) */
h1, h2, h3, h4, h5, h6 {
font-family: var(–heading-font);
color: var(–primary-color);
margin-top: 2.5em; /* فاصله از بالای عنصر قبلی */
margin-bottom: 1em; /* فاصله از پایین عنصر بعدی */
line-height: 1.3;
font-weight: 700; /* پیش‌فرض ضخیم */
}

h1 {
font-size: 2.5em; /* اندازه فونت بزرگ برای تیتر اصلی */
text-align: center;
color: var(–primary-color);
padding-bottom: 15px;
border-bottom: 3px solid var(–secondary-color); /* خط زیرین آبی روشن */
margin-bottom: 2em;
letter-spacing: -0.5px; /* فاصله حروف کمی کمتر */
font-weight: 800; /* فوق‌العاده ضخیم */
}

h2 {
font-size: 2em; /* اندازه فونت برای تیترهای بخش */
color: var(–primary-color);
border-right: 5px solid var(–secondary-color); /* خط آبی روشن در سمت راست */
padding-right: 15px;
margin-right: -20px; /* تنظیم حاشیه برای هم‌ترازی متن با کانتینر */
margin-bottom: 1.5em;
background-color: var(–light-background); /* پس‌زمینه خاکستری روشن */
padding-top: 8px;
padding-bottom: 8px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px; /* گوشه‌های گرد در سمت چپ */
font-weight: 700;
position: relative;
z-index: 1;
}

h3 {
font-size: 1.5em; /* اندازه فونت برای زیرتیترها */
color: var(–secondary-color);
border-bottom: 2px dashed var(–light-background); /* خط چین زیرین */
padding-bottom: 5px;
margin-top: 2em;
font-weight: 600;
}

/* استایل پاراگراف‌ها */
p {
margin-bottom: 1.5em;
text-align: justify; /* تراز دو طرفه */
line-height: 1.9; /* فاصله خطوط بیشتر برای خوانایی */
}

/* استایل لیست‌ها */
ul, ol {
margin-bottom: 1.5em;
padding-right: 25px; /* تورفتگی برای آیتم‌های لیست */
}

ul li {
margin-bottom: 0.8em;
position: relative;
padding-right: 20px;
}

ul li::before {
content: ‘▪’; /* استفاده از کاراکتر خاص به عنوان بولت */
color: var(–secondary-color);
font-weight: bold;
position: absolute;
right: 0;
top: 0;
}

ol li {
margin-bottom: 0.8em;
}

/* استایل جدول آموزشی */
.styled-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 2em 0;
font-size: 1em;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
border-radius: 8px;
overflow: hidden; /* تضمین اعمال border-radius به محتوا */
}

.styled-table thead tr {
background-color: var(–primary-color);
color: #ffffff;
text-align: right;
}

.styled-table th,
.styled-table td {
padding: 14px 20px;
border: 1px solid var(–light-background);
text-align: right;
}

.styled-table tbody tr {
border-bottom: 1px solid var(–light-background);
}

.styled-table tbody tr:nth-of-type(even) {
background-color: var(–light-background); /* ردیف‌های زوج با رنگ متفاوت */
}

.styled-table tbody tr:last-of-type {
border-bottom: 2px solid var(–secondary-color); /* خط ضخیم‌تر در انتهای جدول */
}

.styled-table tbody tr:hover {
background-color: #E0F7FA; /* تغییر رنگ در هاور */
color: var(–primary-color);
}

/* شبیه‌سازی اینفوگرافیک */
.infographic-block {
background-color: #E8F6F8; /* پس‌زمینه آبی-سبز روشن */
border-right: 8px solid var(–secondary-color); /* خط تاکید در سمت راست */
padding: 25px 30px;
margin: 3em 0;
border-radius: 0 10px 10px 0; /* گوشه‌های گرد در سمت چپ */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
gap: 20px; /* فاصله بین آیتم‌ها */
}

.infographic-item {
display: flex;
align-items: flex-start;
gap: 15px;
}

.infographic-item .icon {
font-size: 2.2em;
color: var(–primary-color);
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}

.infographic-item .text strong {
color: var(–primary-color);
font-size: 1.1em;
display: block;
margin-bottom: 5px;
}

.infographic-item .text {
color: var(–light-text-color);
font-size: 0.95em;
line-height: 1.6;
}

/* فهرست مطالب (Table of Contents) */
.table-of-contents {
background-color: var(–light-background);
border: 1px solid var(–border-color);
padding: 15px 25px;
margin: 2.5em 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
position: relative;
}

.table-of-contents h3 {
margin-top: 0;
color: var(–primary-color);
border-bottom: 2px solid var(–secondary-color);
padding-bottom: 10px;
font-size: 1.3em;
font-weight: 700;
text-align: center;
}

.table-of-contents ul {
list-style: none;
padding-right: 0;
margin-top: 15px;
}

.table-of-contents ul li {
margin-bottom: 10px;
padding-right: 0;
}

.table-of-contents ul li::before {
content: ”; /* حذف بولت پیش‌فرض */
}

.table-of-contents ul li a {
text-decoration: none;
color: var(–light-text-color);
display: block;
padding: 8px 10px;
border-radius: 5px;
transition: all 0.3s ease; /* انیمیشن نرم برای هاور */
position: relative;
}

.table-of-contents ul li a:hover {
background-color: var(–secondary-color);
color: #ffffff;
padding-right: 20px; /* جلوه بصری هنگام هاور */
}

.table-of-contents ul li a::before {
content: ‘◀’; /* فلش برای آیتم‌های فهرست */
position: absolute;
left: 10px;
color: var(–secondary-color);
transition: all 0.3s ease;
opacity: 0; /* پنهان در حالت عادی */
}

.table-of-contents ul li a:hover::before {
left: 5px;
opacity: 1; /* نمایش هنگام هاور */
color: #ffffff;
}

/* طراحی ریسپانسیو (برای موبایل، تبلت، لپ‌تاپ و تلویزیون) */

/* برای تبلت و صفحات متوسط (عرض حداکثر 1024px) */
@media (max-width: 1024px) {
.article-container {
margin: 15px auto;
padding: 18px;
}
h1 {
font-size: 2.3em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
.styled-table {
min-width: unset; /* اجازه به جدول برای کوچک شدن */
}
}

/* برای موبایل و صفحات کوچک‌تر (عرض حداکثر 768px) */
@media (max-width: 768px) {
.article-container {
margin: 10px auto;
padding: 15px;
}

h1 {
font-size: 2em;
padding-bottom: 10px;
}

h2 {
font-size: 1.7em;
padding-right: 10px;
margin-right: -15px;
}

h3 {
font-size: 1.3em;
}

.styled-table {
font-size: 0.9em;
}

.styled-table th,
.styled-table td {
padding: 10px 15px;
}

.infographic-block {
padding: 20px;
border-radius: 8px; /* گوشه‌های گرد کامل‌تر */
border-right: none; /* حذف خط سمت راست */
border-top: 8px solid var(–secondary-color); /* انتقال تاکید به بالای بلوک */
}

.infographic-item {
flex-direction: column; /* چینش عمودی آیتم‌ها */
text-align: center;
}

.infographic-item .icon {
margin-bottom: 10px;
}
.infographic-item .text strong {
font-size: 1em;
}
}

/* برای صفحات موبایل بسیار کوچک (عرض حداکثر 480px) */
@media (max-width: 480px) {
.article-container {
padding: 10px;
}

h1 {
font-size: 1.8em;
padding-bottom: 8px;
}

h2 {
font-size: 1.5em;
padding-right: 8px;
margin-right: -10px;
background-color: transparent; /* پس‌زمینه شفاف */
border-right: none;
border-bottom: 2px solid var(–secondary-color); /* خط زیرین ساده */
padding-bottom: 5px;
border-radius: 0;
}

h3 {
font-size: 1.2em;
}

p {
line-height: 1.8;
margin-bottom: 1em;
}

ul, ol {
padding-right: 20px;
}

/* استایل خاص برای جدول در صفحات کوچک (نمایش ستونی) */
.styled-table {
border: 0;
box-shadow: none;
}
.styled-table thead {
display: none; /* مخفی کردن سرصفحه جدول */
}
.styled-table tbody tr {
margin-bottom: 15px;
display: block; /* هر ردیف به صورت بلوک جداگانه */
border: 1px solid var(–border-color);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
background-color: #fff;
}
.styled-table td {
border: none;
border-bottom: 1px dashed var(–light-background);
position: relative;
padding-right: 50%; /* فضای لازم برای برچسب */
text-align: left; /* تراز داده‌ها به چپ */
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.styled-table td:last-child {
border-bottom: 0; /* حذف خط پایین برای آخرین سلول */
}
.styled-table td::before {
content: attr(data-label); /* نمایش برچسب ستون از data-label */
position: absolute;
right: 10px;
width: 45%;
padding-left: 10px;
white-space: nowrap;
font-weight: bold;
color: var(–primary-color);
text-align: right;
}
.styled-table tbody tr:hover {
background-color: #ffffff; /* حفظ پس‌زمینه سفید در هاور برای جدول ستونی */
color: var(–text-color);
}

.table-of-contents ul li a {
padding: 6px 8px;
}
.table-of-contents ul li a:hover {
padding-right: 15px;
}
}

/* استایل‌های چاپی (Print Styles) */
@media print {
body {
background-color: #fff;
color: #000;
}
.article-container {
box-shadow: none;
border: none;
margin: 0;
padding: 0;
max-width: none;
}
h1, h2, h3 {
color: #000 !important;
border-color: #000 !important;
background-color: #fff !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-right: 0 !important;
}
.styled-table {
box-shadow: none;
border: 1px solid #ddd;
}
.styled-table thead tr {
background-color: #eee !important;
color: #000 !important;
}
.infographic-block {
border: 1px solid #ddd;
background-color: #f0f0f0 !important;
border-radius: 0;
box-shadow: none;
}
.table-of-contents {
border: 1px solid #ddd;
box-shadow: none;
background-color: #f0f0f0 !important;
}
.table-of-contents ul li a {
color: #000;
}
.table-of-contents ul li a:hover {
background-color: transparent;
color: #000;
padding-right: 10px;
}
.table-of-contents ul li a::before {
display: none;
}
}