/* ————————————————————————– */
/* شروع استایل‌دهی جامع برای نمایش در ویرایشگر بلوک و ریسپانسیو */
/* ————————————————————————– */
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap’); /* فونت مناسب فارسی */

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

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

/* استایل‌دهی تگ‌های هدینگ (H1, H2, H3) برای شناسایی خودکار */
h1 {
font-size: 3em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 700; /* ضخامت زیاد */
color: #004085; /* آبی تیره */
margin-bottom: 30px;
text-align: center;
padding-bottom: 15px;
border-bottom: 3px solid #0056b3; /* خط زیرین برای جداکننده */
line-height: 1.3;
}

h2 {
font-size: 2.3em; /* سایز برای عناوین اصلی بخش‌ها */
font-weight: 700;
color: #0056b3; /* آبی متوسط */
margin-top: 50px;
margin-bottom: 25px;
padding-right: 20px;
border-right: 6px solid #007bff; /* خط آبی در سمت راست */
line-height: 1.4;
}

h3 {
font-size: 1.7em; /* سایز برای عناوین زیربخش‌ها */
font-weight: 700;
color: #28a745; /* سبز */
margin-top: 35px;
margin-bottom: 20px;
padding-right: 15px;
border-right: 4px solid #20c997; /* خط سبز در سمت راست */
line-height: 1.5;
}

/* استایل پاراگراف‌ها */
p {
margin-bottom: 18px;
text-align: justify; /* تراز دو طرفه */
font-size: 1.05em;
line-height: 1.9;
}

/* استایل لیست‌ها (بولت پوینت و عددی) */
ul, ol {
margin-bottom: 18px;
padding-right: 25px; /* تنظیم برای لیست‌های RTL */
text-align: right;
font-size: 1.05em;
line-height: 1.8;
}
li {
margin-bottom: 10px;
position: relative;
padding-right: 10px; /* برای فضای بین بولت و متن */
}
ul li::before { /* استایل بولت اختصاصی */
content: ‘•’;
color: #007bff;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
position: absolute;
right: 0;
}
ol li::before {
font-weight: bold;
color: #28a745;
position: absolute;
right: 0;
}

/* ————————————————————————– */
/* فهرست مطالب */
/* ————————————————————————– */
.toc {
background-color: #e6f7ff; /* پس‌زمینه آبی روشن */
border: 1px solid #cceeff;
padding: 25px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}
.toc h3 {
color: #004085; /* رنگ عنوان فهرست */
margin-top: 0;
border-right: none; /* حذف خط کناری برای عنوان فهرست */
padding-right: 0;
text-align: center;
font-size: 1.9em;
margin-bottom: 25px;
}
.toc ul {
list-style: none; /* حذف بولت پیش‌فرض */
padding: 0;
text-align: right;
}
.toc li {
margin-bottom: 12px;
padding-right: 0;
}
.toc li a {
text-decoration: none;
color: #007bff;
font-weight: normal;
font-size: 1.15em;
transition: color 0.3s ease, padding-right 0.3s ease; /* انیمیشن نرم */
display: block;
padding: 7px 0;
border-right: 3px solid transparent; /* خط نامرئی برای هاور */
}
.toc li a:hover {
color: #004085;
padding-right: 10px; /* حرکت به راست هنگام هاور */
border-right-color: #007bff; /* خط آبی هنگام هاور */
}
.toc li ul { /* لیست‌های تو در تو در فهرست */
padding-right: 20px;
margin-top: 8px;
}
.toc li ul li a {
font-size: 1.05em;
color: #3385ff;
}
.toc li ul li a:hover {
color: #004085;
border-right-color: #3385ff;
}

/* ————————————————————————– */
/* جدول آموزشی */
/* ————————————————————————– */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌ها */
margin: 35px 0;
font-size: 1.05em;
text-align: right;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* سایه عمیق‌تر */
border-radius: 10px;
overflow: hidden; /* برای اعمال border-radius روی محتوا */
}
th, td {
padding: 15px 20px;
border: 1px solid #e0e0e0; /* رنگ خطوط جدول */
}
th {
background-color: #d4edda; /* پس‌زمینه سبز روشن برای هدر */
color: #155724; /* رنگ متن سبز تیره */
font-weight: 700;
text-align: center;
}
tr:nth-child(even) { /* پس‌زمینه متفاوت برای ردیف‌های زوج */
background-color: #f8fcf9;
}
tr:hover {
background-color: #e9f0e9; /* تغییر رنگ هنگام هاور */
}

/* ————————————————————————– */
/* اینفوگرافیک زیبا */
/* ————————————————————————– */
.infographic-box {
background-color: #f0f8ff; /* پس‌زمینه آبی بسیار روشن */
border-right: 10px solid #007bff; /* نوار آبی رنگ در سمت راست */
padding: 30px;
margin: 50px 0;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* سایه عمیق */
display: flex; /* برای چیدمان افقی آیتم‌ها در دسکتاپ */
flex-wrap: wrap; /* برای شکستن به خط جدید در موبایل */
justify-content: space-around; /* توزیع یکنواخت آیتم‌ها */
gap: 30px; /* فاصله بین آیتم‌ها */
}
.infographic-box h3 {
width: 100%; /* عنوان اینفوگرافیک عرض کامل را بگیرد */
color: #004085;
text-align: center;
margin-top: 0;
margin-bottom: 30px;
border-right: none;
font-size: 2em;
}
.infographic-item {
flex: 1 1 45%; /* دو آیتم در یک سطر در دسکتاپ، هر آیتم 45% عرض */
background-color: #ffffff; /* پس‌زمینه سفید برای هر آیتم */
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
text-align: center;
min-width: 280px; /* حداقل عرض برای هر آیتم */
}
.infographic-icon {
font-size: 3.5em; /* سایز بزرگ برای آیکون */
color: #007bff; /* رنگ آبی برای آیکون */
margin-bottom: 15px;
display: block; /* برای اینکه آیکون در یک خط جدا باشد */
}
.infographic-item h4 {
font-size: 1.6em;
color: #0056b3;
margin-top: 0;
margin-bottom: 10px;
font-weight: 700;
line-height: 1.3;
}
.infographic-item p {
font-size: 1em;
color: #555;
margin: 0;
text-align: justify;
line-height: 1.7;
}

/* ————————————————————————– */
/* ریسپانسیو (واکنش‌گرا) */
/* ————————————————————————– */
@media (max-width: 992px) { /* برای تبلت و لپ‌تاپ‌های کوچک */
.container {
max-width: 720px;
padding: 20px 25px;
margin: 15px auto;
}
h1 { font-size: 2.5em; margin-bottom: 25px; }
h2 { font-size: 2em; margin-top: 40px; margin-bottom: 20px; padding-right: 18px; }
h3 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; padding-right: 12px; }
p, ul, ol, th, td { font-size: 1em; }
.infographic-item {
flex: 1 1 100%; /* هر آیتم در یک سطر کامل */
}
.infographic-box {
gap: 20px;
padding: 25px;
}
}

@media (max-width: 768px) { /* برای موبایل‌های بزرگ و تبلت‌های کوچک */
.container {
margin: 10px;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}
h1 { font-size: 2em; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #0056b3; }
h2 { font-size: 1.7em; margin-top: 35px; margin-bottom: 18px; padding-right: 15px; border-right: 4px solid #007bff; }
h3 { font-size: 1.3em; margin-top: 25px; margin-bottom: 12px; padding-right: 10px; border-right: 3px solid #20c997; }
p, ul, ol, th, td { font-size: 0.95em; line-height: 1.7; }
.toc h3 { font-size: 1.7em; margin-bottom: 20px; }
.toc li a { font-size: 1.05em; }
table { margin: 25px 0; }
th, td { padding: 12px 15px; }
.infographic-box {
padding: 20px;
border-right: 8px solid #007bff;
margin: 40px 0;
border-radius: 12px;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
}
.infographic-box h3 { font-size: 1.8em; margin-bottom: 25px; }
.infographic-item {
padding: 20px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.infographic-icon { font-size: 3em; margin-bottom: 10px; }
.infographic-item h4 { font-size: 1.4em; }
.infographic-item p { font-size: 0.95em; }
}

@media (max-width: 480px) { /* برای موبایل‌های کوچک */
.container {
margin: 5px;
padding: 15px;
}
h1 { font-size: 1.7em; margin-bottom: 15px; padding-bottom: 8px; }
h2 { font-size: 1.4em; margin-top: 30px; margin-bottom: 15px; padding-right: 12px; border-right: 3px solid #007bff; }
h3 { font-size: 1.1em; margin-top: 20px; margin-bottom: 10px; padding-right: 8px; border-right: 2px solid #20c997; }
p, ul, ol, th, td { font-size: 0.9em; line-height: 1.6; }
ul li::before { margin-left: -0.8em; }
ol li::before { margin-left: -0.8em; }
.toc h3 { font-size: 1.5em; margin-bottom: 15px; }
.toc li a { font-size: 1em; padding: 5px 0; }
table { margin: 20px 0; }
th, td { padding: 10px 12px; }
.infographic-box {
padding: 15px;
border-right: 6px solid #007bff;
margin: 30px 0;
border-radius: 10px;
}
.infographic-box h3 { font-size: 1.5em; margin-bottom: 20px; }
.infographic-item {
padding: 15px;
}
.infographic-icon { font-size: 2.5em; margin-bottom: 8px; }
.infographic-item h4 { font-size: 1.2em; }
.infographic-item p { font-size: 0.85em; }
}
/* ————————————————————————– */
/* پایان استایل‌دهی جامع برای نمایش در ویرایشگر بلوک و ریسپانسیو */
/* ————————————————————————– */