/*
این کدهای CSS به صورت داخلی در مقاله قرار داده شده‌اند تا پس از کپی در ویرایشگر بلوک یا کلاسیک، ظاهر مورد نظر حفظ شود.
این کدها برای ریسپانسیو بودن (واکنش‌گرا) مقاله در دستگاه‌های مختلف (موبایل، تبلت، لپ‌تاپ و تلویزیون) نیز طراحی شده‌اند.
*/

/* تنظیمات پایه برای فونت، رنگ و فاصله خطوط */
body {
font-family: ‘Tahoma’, sans-serif;
margin: 0;
padding: 0;
background-color: #F8F8F8; /* پس‌زمینه کلی مقاله */
color: #333333; /* رنگ متن اصلی */
line-height: 1.7; /* فاصله خطوط برای خوانایی بهتر */
direction: rtl; /* راست به چپ برای زبان فارسی */
text-align: right; /* تراز متن به راست */
}

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

/* استایل هدینگ H1 – عنوان اصلی */
h1 {
font-family: ‘Tahoma’, sans-serif;
font-size: 2.8em; /* سایز بزرگ برای عنوان اصلی */
color: #004080; /* آبی تیره و حرفه‌ای */
text-align: center; /* وسط چین */
margin-bottom: 35px; /* فاصله از پاراگراف بعدی */
padding-bottom: 20px; /* فاصله داخلی پایین */
border-bottom: 3px solid #E0E0E0; /* خط زیر عنوان */
font-weight: bold; /* ضخیم */
line-height: 1.3;
}

/* استایل هدینگ H2 – عناوین اصلی بخش‌ها */
h2 {
font-family: ‘Tahoma’, sans-serif;
font-size: 2.1em; /* سایز مناسب برای H2 */
color: #0056B3; /* آبی متوسط */
margin-top: 50px; /* فاصله از بالا */
margin-bottom: 25px; /* فاصله از پایین */
padding-right: 15px; /* فضای داخلی راست برای border */
border-right: 6px solid #28A745; /* خط سبز جذاب در سمت راست */
font-weight: bold; /* ضخیم */
text-align: right;
}

/* استایل هدینگ H3 – عناوین فرعی */
h3 {
font-family: ‘Tahoma’, sans-serif;
font-size: 1.6em; /* سایز مناسب برای H3 */
color: #0056B3; /* آبی متوسط */
margin-top: 35px; /* فاصله از بالا */
margin-bottom: 20px; /* فاصله از پایین */
border-bottom: 1px dashed #B0C4DE; /* خط زیر عنوان با طرح دش */
padding-bottom: 8px; /* فضای داخلی پایین */
font-weight: bold; /* ضخیم */
text-align: right;
}

/* استایل پاراگراف‌ها */
p {
font-family: ‘Tahoma’, sans-serif;
font-size: 1.05em; /* سایز کمی بزرگتر برای خوانایی بهتر */
margin-bottom: 18px; /* فاصله از پاراگراف بعدی */
text-align: justify; /* تراز از دو طرف */
color: #333333;
}

/* استایل لیست‌ها (نامرتب و مرتب) */
ul, ol {
font-family: ‘Tahoma’, sans-serif;
font-size: 1.05em;
margin-right: 30px; /* فاصله از راست برای لیست‌ها */
margin-bottom: 20px;
color: #333333;
padding-right: 0;
}
li {
margin-bottom: 10px; /* فاصله بین آیتم‌های لیست */
padding-right: 5px;
}
li strong {
color: #004080; /* رنگ آبی تیره برای متن‌های مهم در لیست */
}

/* استایل لینک‌ها */
a {
color: #007BFF; /* آبی استاندارد برای لینک */
text-decoration: none; /* بدون خط زیر */
transition: color 0.3s ease; /* انیمیشن برای تغییر رنگ */
}
a:hover {
text-decoration: underline; /* خط زیر هنگام هاور */
color: #0056B3; /* تغییر رنگ هنگام هاور */
}

/* استایل جدول */
table {
width: 100%; /* عرض کامل */
border-collapse: collapse; /* حذف فاصله بین خانه‌ها */
margin: 35px 0; /* فاصله از بالا و پایین */
font-size: 0.98em;
font-family: ‘Tahoma’, sans-serif;
box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* سایه برای جدول */
border-radius: 8px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* برای اعمال border-radius به محتوا */
}
caption {
caption-side: top;
text-align: right;
margin-bottom: 15px;
font-weight: bold;
color: #0056B3;
font-size: 1.2em;
padding-right: 5px;
}
th, td {
border: 1px solid #E0E0E0; /* خطوط جدول */
padding: 14px 18px; /* فضای داخلی خانه‌ها */
text-align: right; /* تراز به راست */
}
th {
background-color: #E6F7FF; /* پس‌زمینه آبی روشن برای هدر جدول */
color: #004080; /* رنگ متن هدر */
font-weight: bold;
font-size: 1.1em;
}
tr:nth-child(even) {
background-color: #F9F9F9; /* رنگ پس‌زمینه متفاوت برای ردیف‌های زوج */
}
tr:hover {
background-color: #F0F8FF; /* تغییر رنگ ردیف هنگام هاور */
}

/* بخش اینفوگرافیک زیبا (جایگزین اینفوگرافیک تصویری) */
.infographic-box {
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
flex-wrap: wrap; /* اجازه به آیتم‌ها برای رفتن به خط بعدی در صفحات کوچک */
justify-content: center; /* وسط چین کردن آیتم‌ها */
gap: 25px; /* فاصله بین آیتم‌ها */
margin: 45px 0; /* فاصله از بالا و پایین */
padding: 30px; /* فضای داخلی باکس کلی */
background-color: #F0FAF5; /* پس‌زمینه سبز روشن ملایم */
border-radius: 15px; /* گوشه‌های گرد */
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* سایه */
}
.info-item {
background-color: #FFFFFF; /* پس‌زمینه سفید برای هر آیتم */
border: 2px solid #28A745; /* حاشیه سبز */
border-radius: 10px; /* گوشه‌های گرد */
padding: 25px; /* فضای داخلی */
flex: 1 1 calc(50% – 50px); /* دو آیتم در هر ردیف با احتساب gap */
min-width: 300px; /* حداقل عرض آیتم قبل از شکستن خط */
box-sizing: border-box; /* padding و border جزو عرض حساب شوند */
text-align: center; /* متن وسط چین */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* انیمیشن برای هاور */
display: flex; /* فلکس برای محتوای داخلی آیتم */
flex-direction: column; /* چیدمان ستونی */
justify-content: flex-start; /* شروع از بالا */
align-items: center; /* وسط چین افقی محتوا */
}
.info-item:hover {
transform: translateY(-8px); /* حرکت کمی به بالا هنگام هاور */
box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* سایه بیشتر هنگام هاور */
}
.info-item strong {
display: block; /* برای اینکه عنوان به تنهایی یک بلوک باشد */
color: #004080; /* آبی تیره */
font-size: 1.4em; /* سایز بزرگتر برای عنوان آیتم */
margin-bottom: 15px; /* فاصله از متن */
font-weight: bold;
}
.info-item p {
margin: 0;
font-size: 1em;
color: #555555;
text-align: center; /* متن وسط چین */
line-height: 1.6;
}

/* ریسپانسیو بودن برای دستگاه‌های مختلف (موبایل، تبلت، لپ‌تاپ، تلویزیون) */
@media (max-width: 1200px) { /* برای لپ‌تاپ‌های کوچک‌تر */
.container { max-width: 800px; padding: 20px 25px; }
h1 { font-size: 2.4em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.4em; }
}

@media (max-width: 768px) { /* برای تبلت‌ها و موبایل‌های افقی */
.container {
margin: 15px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}
h1 { font-size: 2em; margin-bottom: 25px; padding-bottom: 15px; }
h2 { font-size: 1.7em; margin-top: 40px; margin-bottom: 20px; padding-right: 10px; border-right-width: 4px; }
h3 { font-size: 1.3em; margin-top: 30px; margin-bottom: 15px; }
p, ul, ol, table { font-size: 1em; }
th, td { padding: 10px 15px; }

.infographic-box {
flex-direction: column; /* آیتم‌ها زیر هم قرار می‌گیرند */
gap: 20px;
padding: 20px;
margin: 35px 0;
}
.info-item {
flex: 1 1 100%; /* عرض کامل */
min-width: unset;
padding: 20px;
}
.info-item strong { font-size: 1.3em; margin-bottom: 12px; }
}

@media (max-width: 480px) { /* برای موبایل‌ها */
.container {
margin: 10px;
padding: 15px;
border-radius: 8px;
}
h1 { font-size: 1.8em; margin-bottom: 20px; padding-bottom: 10px; border-bottom-width: 2px; }
h2 { font-size: 1.5em; margin-top: 30px; margin-bottom: 18px; padding-right: 8px; border-right-width: 3px; }
h3 { font-size: 1.2em; margin-top: 25px; margin-bottom: 12px; }
p, ul, ol, li, table { font-size: 0.95em; }
th, td { padding: 8px 12px; }
ul, ol { margin-right: 20px; }

.infographic-box {
padding: 15px;
margin: 30px 0;
}
.info-item {
padding: 18px;
}
.info-item strong { font-size: 1.2em; margin-bottom: 10px; }
.info-item p { font-size: 0.9em; }
}