/* تنظیمات عمومی برای نمایش بهتر در ویرایشگرها و مرورگرها */
body {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Segoe UI’, sans-serif; /* فونت فارسی شیک */
line-height: 1.7; /* افزایش خوانایی متن */
color: #333333; /* رنگ متن اصلی */
background-color: #F8F8F8; /* پس‌زمینه کلی صفحه */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
direction: rtl; /* جهت متن راست به چپ */
text-align: right; /* تراز متن راست */
}

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

/* استایل هدینگ H1 */
h1 {
font-size: 2.4em; /* سایز بزرگ */
font-weight: 800; /* بسیار ضخیم */
color: #1F456E; /* آبی تیره و حرفه‌ای */
margin-top: 0;
margin-bottom: 30px;
text-align: center;
padding-bottom: 18px;
border-bottom: 3px solid #D4AF37; /* خط طلایی در زیر */
line-height: 1.3;
}

/* استایل هدینگ H2 */
h2 {
font-size: 1.9em; /* سایز متوسط رو به بالا */
font-weight: 700; /* ضخیم */
color: #3A4F6B; /* آبی-خاکستری متعادل */
margin-top: 45px;
margin-bottom: 25px;
padding-right: 18px; /* پدینگ از راست برای خط کناری */
border-right: 6px solid #8CA0B8; /* خط آبی-خاکستری روشن در سمت راست */
line-height: 1.4;
}

/* استایل هدینگ H3 */
h3 {
font-size: 1.5em; /* سایز متوسط */
font-weight: 600; /* نیمه‌ضخیم */
color: #4A5C70; /* آبی-خاکستری کمی تیره‌تر */
margin-top: 35px;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 1px dashed #E0E0E0; /* خط چین ظریف در زیر */
line-height: 1.5;
}

/* استایل پاراگراف‌ها */
p {
font-size: 1.08em; /* سایز کمی بزرگ‌تر برای خوانایی */
line-height: 1.8;
margin-bottom: 18px;
text-align: justify; /* تراز دو طرفه */
}

/* استایل لیست‌ها (نقطه‌ای و عددی) */
ul {
list-style-type: disc; /* دیسک برای لیست نقطه‌ای */
margin-right: 30px; /* مارجین از راست برای RTL */
margin-left: 0;
padding: 0;
margin-bottom: 20px;
}

ol {
list-style-type: decimal; /* عدد برای لیست عددی */
margin-right: 30px; /* مارجین از راست برای RTL */
margin-left: 0;
padding: 0;
margin-bottom: 20px;
}

li {
font-size: 1.05em;
line-height: 1.7;
margin-bottom: 10px;
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 30px 0;
font-size: 1.0em;
border: 1px solid #E0E0E0; /* بوردر کلی جدول */
border-radius: 8px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* برای نمایش صحیح بوردر رادیوس */
}

th, td {
padding: 14px 18px; /* پدینگ داخلی سلول‌ها */
border: 1px solid #E0E0E0;
text-align: right; /* تراز راست برای متن فارسی */
}

th {
background-color: #F0F4F8; /* رنگ پس‌زمینه هدر جدول */
font-weight: 700;
color: #3A4F6B;
font-size: 1.1em;
}

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

/* استایل برای جایگزین اینفوگرافیک */
.infographic-box {
background-color: #F8FCF8; /* رنگ پس‌زمینه سبز-آبی بسیار روشن */
border: 2px solid #C0E0C0; /* بوردر سبز روشن */
border-radius: 10px; /* گوشه‌های گرد */
padding: 30px;
margin: 40px 0;
box-shadow: 0 5px 15px rgba(0, 100, 0, 0.06); /* سایه سبز ملایم */
position: relative;
overflow: hidden;
}

.infographic-box::before {
content: “💡”; /* آیکون لامپ برای نمایش بصری */
font-size: 3.5em;
position: absolute;
left: 20px; /* قرارگیری در سمت چپ برای RTL */
top: 20px;
opacity: 0.1;
transform: rotate(-15deg); /* چرخش جزئی برای جذابیت */
}

.infographic-box h3 {
color: #2C5F2D; /* رنگ سبز تیره برای عنوان اینفوگرافیک */
border-bottom: none;
margin-top: 0;
margin-bottom: 25px;
text-align: center;
font-size: 1.7em;
font-weight: 700;
}

.infographic-box ul {
list-style: none; /* حذف نشانگر لیست پیش‌فرض */
margin-right: 0;
padding-right: 0;
display: flex;
flex-wrap: wrap; /* اجازه شکستن به خط بعدی */
justify-content: center; /* مرکز قرار دادن آیتم‌ها */
}

.infographic-box li {
position: relative;
padding: 18px 20px 18px 55px; /* پدینگ برای متن و آیکون (آیکون در چپ) */
margin: 12px;
background-color: #E6F3E6; /* رنگ سبز روشن‌تر برای آیتم‌های لیست */
border-radius: 8px;
width: calc(50% – 50px); /* دو ستون در صفحه بزرگتر (با در نظر گرفتن مارجین) */
min-width: 300px; /* حداقل عرض برای هر آیتم */
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
font-weight: 500;
text-align: right;
}

.infographic-box li::before {
content: “✅”; /* آیکون تیک برای هر مرحله */
position: absolute;
left: 20px; /* قرارگیری در سمت چپ برای RTL */
top: 50%;
transform: translateY(-50%);
font-size: 1.6em;
color: #4CAF50;
}

/* طراحی واکنش‌گرا (Responsive Design) */
@media (max-width: 768px) {
.article-container {
padding: 25px 20px;
margin: 15px 0;
border-radius: 0; /* حذف گوشه‌های گرد در موبایل برای استفاده از کل عرض */
}

h1 {
font-size: 2em;
margin-bottom: 25px;
padding-bottom: 12px;
}

h2 {
font-size: 1.6em;
margin-top: 35px;
margin-bottom: 20px;
padding-right: 12px;
border-right-width: 4px;
}

h3 {
font-size: 1.3em;
margin-top: 30px;
margin-bottom: 15px;
}

p, li, th, td {
font-size: 1em;
}

.infographic-box {
padding: 20px;
margin: 30px 0;
}

.infographic-box h3 {
font-size: 1.5em;
}

.infographic-box li {
width: 100%; /* یک ستون در موبایل */
padding: 15px 15px 15px 45px; /* تنظیم پدینگ برای موبایل */
margin: 8px 0; /* تنظیم مارجین برای موبایل */
}

.infographic-box li::before {
left: 15px;
font-size: 1.4em;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.7em;
padding-bottom: 10px;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
.infographic-box::before {
font-size: 3em;
left: 10px;
top: 10px;
}
.infographic-box h3 {
font-size: 1.3em;
}
}