/* تنظیمات عمومی برای پشتیبانی از زبان فارسی (RTL) و ریسپانسیو بودن */
body {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif; /* اولویت با فونت فارسی، سپس Arial */
line-height: 1.7;
color: #34495E; /* رنگ متن اصلی */
background-color: #F8F9FA; /* رنگ پس‌زمینه کلی صفحه */
margin: 0;
padding: 0;
direction: rtl; /* جهت متن از راست به چپ */
text-align: justify; /* تراز کردن متن برای خوانایی بهتر */
}

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

/* استایل‌های هدینگ‌ها */
h1 {
font-size: clamp(2.2rem, 4vw, 3.2rem); /* اندازه فونت ریسپانسیو */
font-weight: 800; /* ضخامت فوق‌العاده */
color: #2C3E50; /* رنگ آبی تیره */
text-align: center;
margin-bottom: 40px;
border-bottom: 3px solid #1ABC9C; /* خط زیرین فیروزه‌ای */
padding-bottom: 15px;
line-height: 1.3;
}

h2 {
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
font-weight: 700;
color: #3498DB; /* رنگ آبی روشن */
margin-top: 45px;
margin-bottom: 25px;
padding-right: 15px; /* پدینگ از راست برای زیبایی */
border-right: 5px solid #F39C12; /* خط عمودی نارنجی در سمت راست */
}

h3 {
font-size: clamp(1.4rem, 2.8vw, 2rem);
font-weight: 600;
color: #1ABC9C; /* رنگ فیروزه‌ای */
margin-top: 35px;
margin-bottom: 20px;
padding-right: 10px;
border-right: 3px solid #2C3E50; /* خط عمودی آبی تیره در سمت راست */
}

p {
margin-bottom: 20px;
font-size: clamp(1rem, 1.8vw, 1.15rem); /* اندازه فونت ریسپانسیو */
line-height: 1.8; /* فاصله خطوط */
}

/* استایل لیست‌های نامرتب (bullet points) */
ul {
list-style-type: none; /* حذف نشانگر پیش‌فرض */
padding-right: 20px;
margin-bottom: 25px;
}

ul li {
position: relative;
margin-bottom: 12px;
font-size: clamp(1rem, 1.8vw, 1.1rem);
padding-right: 25px; /* فضای برای آیکون کاستوم */
}

ul li::before {
content: ‘✔️’; /* آیکون تیک به عنوان نشانگر */
position: absolute;
right: 0;
color: #3498DB; /* رنگ آبی برای تیک */
font-size: 1.1em;
top: 0;
}

/* استایل لیست‌های مرتب (numbered lists) */
ol {
list-style-type: decimal; /* نشانگر عددی */
padding-right: 25px;
margin-bottom: 25px;
}

ol li {
margin-bottom: 12px;
font-size: clamp(1rem, 1.8vw, 1.1rem);
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse; /* حذف خطوط اضافی بین سلول‌ها */
margin: 30px 0;
font-size: clamp(0.95rem, 1.7vw, 1.05rem);
background-color: #FDFEFE;
border-radius: 8px; /* گوشه‌های گرد */
overflow: hidden; /* برای نمایش صحیح گوشه‌های گرد */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); /* سایه ظریف */
direction: rtl; /* جهت جدول برای فارسی */
}

th, td {
padding: 15px;
text-align: right; /* تراز راست */
border-bottom: 1px solid #ECF0F1; /* خط جداکننده افقی */
}

th {
background-color: #3498DB; /* پس‌زمینه آبی برای سربرگ */
color: white;
font-weight: 600;
white-space: nowrap; /* جلوگیری از شکستن کلمات در سربرگ */
}

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

tr:hover {
background-color: #EBF5FB; /* تغییر رنگ با هاور */
}

/* استایل بلاک اینفوگرافیک (جایگزین تصویر) */
.infographic-block {
display: flex;
flex-direction: column; /* چینش عمودی آیتم‌ها */
gap: 25px; /* فاصله بین آیتم‌ها */
margin: 40px 0;
padding: 30px;
background-image: linear-gradient(to right top, #ECF0F1, #FDFEFE); /* گرادیانت پس‌زمینه */
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
border: 1px solid #DCE4E9;
}

.infographic-item {
display: flex;
align-items: flex-start; /* تراز بالا برای آیکون و متن */
gap: 18px;
background-color: #FFFFFF;
padding: 20px 25px;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
border-right: 4px solid #F39C12; /* خط عمودی نارنجی در سمت راست */
}

.infographic-icon {
font-size: clamp(1.8rem, 3.5vw, 2.5rem); /* اندازه آیکون ریسپانسیو */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
line-height: 1;
color: #3498DB; /* رنگ آبی برای آیکون */
}

.infographic-content h3 {
margin-top: 0;
margin-bottom: 8px;
font-size: clamp(1.2rem, 2.2vw, 1.5rem);
color: #2C3E50;
border-right: none; /* حذف خط عمودی در اینجا */
padding-right: 0;
}

.infographic-content p {
margin-bottom: 0;
font-size: clamp(0.95rem, 1.7vw, 1.05rem);
line-height: 1.7;
}

/* فهرست مطالب */
.toc {
background-color: #F0F8FF; /* پس‌زمینه آبی کم‌رنگ */
border: 1px solid #D0E0F0;
border-radius: 10px;
padding: 25px 30px;
margin-bottom: 40px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.toc h2 {
color: #2C3E50;
text-align: center;
margin-top: 0;
margin-bottom: 20px;
border-right: none;
padding-right: 0;
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
}

.toc ul {
list-style: none;
padding: 0;
margin: 0;
}

.toc ul li {
margin-bottom: 10px;
padding-right: 0;
}

.toc ul li::before {
content: ”; /* حذف نشانگر پیش‌فرض */
}

.toc ul li a {
text-decoration: none;
color: #3498DB;
font-weight: 500;
font-size: clamp(1rem, 1.8vw, 1.1rem);
display: block;
padding: 5px 0;
transition: color 0.3s ease, padding-right 0.3s ease; /* انیمیشن برای هاور */
}

.toc ul li a:hover {
color: #1ABC9C;
padding-right: 10px;
}

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

h1 {
font-size: clamp(1.8rem, 6vw, 2.8rem);
margin-bottom: 30px;
padding-bottom: 10px;
}

h2 {
font-size: clamp(1.6rem, 5vw, 2.2rem);
margin-top: 35px;
margin-bottom: 20px;
}

h3 {
font-size: clamp(1.3rem, 4vw, 1.8rem);
margin-top: 30px;
margin-bottom: 15px;
}

p, ul li, ol li, th, td {
font-size: clamp(0.9rem, 2vw, 1rem);
}

.infographic-block {
padding: 20px;
gap: 15px;
}

.infographic-item {
padding: 15px;
gap: 10px;
}

.infographic-icon {
font-size: clamp(1.5rem, 4vw, 2rem);
}

.infographic-content h3 {
font-size: clamp(1.1rem, 3vw, 1.4rem);
}

.toc {
padding: 20px;
margin-bottom: 30px;
}
.toc h2 {
font-size: clamp(1.4rem, 4vw, 2rem);
}
}

/* تنظیمات ریسپانسیو برای موبایل */
@media (max-width: 480px) {
.container {
padding: 15px;
margin: 15px auto;
}
h1 {
font-size: clamp(1.6rem, 7vw, 2.5rem);
margin-bottom: 25px;
}
h2 {
font-size: clamp(1.4rem, 6vw, 2rem);
}
h3 {
font-size: clamp(1.2rem, 5vw, 1.6rem);
}
p, ul li, ol li, th, td {
font-size: clamp(0.85rem, 2.2vw, 0.95rem);
}
table, .infographic-block, .toc {
margin: 20px 0;
padding: 15px;
}
.infographic-item {
flex-direction: column; /* چینش عمودی آیکون و متن در صفحات کوچک */
align-items: center; /* وسط چین کردن آیتم‌ها */
text-align: center;
border-right: none; /* حذف خط عمودی راست */
border-bottom: 4px solid #F39C12; /* اضافه کردن خط عمودی پایین */
}
.infographic-icon {
margin-bottom: 10px;
}
.infographic-content h3 {
font-size: clamp(1rem, 3.5vw, 1.3rem);
}
.infographic-content p {
font-size: clamp(0.85rem, 2.2vw, 0.95rem);
}
}

/* وارد کردن فونت Vazirmatn برای نمایش بهتر متن فارسی */
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2’) format(‘woff2’);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2’) format(‘woff2’);
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2’) format(‘woff2’);
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2’) format(‘woff2’);
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-ExtraBold.woff2’) format(‘woff2’);
font-weight: 800;
font-style: normal;
font-display: swap;
}