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

/* کانتینر اصلی مقاله برای ایجاد حاشیه و مرکزیت */
.article-container {
max-width: 850px; /* حداکثر عرض برای نمایش مناسب در دسکتاپ */
margin: 20px auto; /* مرکز قرار گرفتن در صفحه */
padding: 30px;
background-color: #ffffff; /* پس‌زمینه سفید برای محتوا */
border-radius: 15px; /* گوشه‌های گرد */
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); /* سایه ملایم برای جلوه سه‌بعدی */
}

/* استایل هدینگ H1 */
h1 {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif;
font-size: 38px; /* سایز بزرگ برای عنوان اصلی */
font-weight: 800; /* بسیار پررنگ */
color: #0A2E50; /* آبی تیره برای قدرت و جدیت */
margin-bottom: 25px;
padding-bottom: 18px;
border-bottom: 4px solid #FF7A00; /* خط زیرین با رنگ نارنجی جذاب */
line-height: 1.3;
text-align: center; /* عنوان در وسط */
padding-top: 10px; /* فاصله از بالا */
}

/* استایل هدینگ H2 */
h2 {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif;
font-size: 30px; /* سایز متوسط */
font-weight: 700; /* پررنگ */
color: #0A2E50;
margin-top: 45px;
margin-bottom: 22px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* خط جداکننده ملایم */
line-height: 1.4;
}

/* استایل هدینگ H3 */
h3 {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif;
font-size: 24px; /* سایز کوچک‌تر */
font-weight: 600; /* نیمه‌پررنگ */
color: #28A745; /* سبز برای بخش‌های فرعی و نکات کلیدی */
margin-top: 35px;
margin-bottom: 18px;
line-height: 1.5;
}

/* استایل پاراگراف‌ها */
p {
margin-bottom: 20px;
line-height: 1.9;
font-size: 17.5px;
color: #3f3f3f; /* رنگ متن کمی تیره‌تر برای خوانایی */
}

/* استایل لیست‌ها */
ul {
list-style: none; /* حذف نشانگر پیش‌فرض */
padding-right: 25px; /* فاصله از راست برای قرار دادن نشانگر سفارشی */
margin-bottom: 25px;
}

ul li {
position: relative;
margin-bottom: 12px;
padding-right: 30px; /* فضای بیشتر برای نشانگر */
line-height: 1.7;
font-size: 17px;
color: #444;
}

ul li::before {
content: “💡”; /* نشانگر سفارشی با ایموجی */
position: absolute;
right: 0;
color: #FF7A00; /* رنگ نشانگر */
font-size: 20px;
top: 0;
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 35px 0;
font-size: 16.5px;
text-align: right;
direction: rtl;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); /* سایه جدول */
border-radius: 10px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* برای اعمال border-radius به محتوا */
}

th, td {
padding: 16px 22px;
border: 1px solid #e5e5e5; /* حاشیه سلول‌ها */
}

th {
background-color: #0A2E50; /* پس‌زمینه آبی تیره برای سربرگ */
color: #ffffff;
font-weight: 700;
text-align: center;
}

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

tr:hover { /* تغییر رنگ ردیف هنگام هاور */
background-color: #f0f0f0;
}

/* استایل اینفوگرافیک شبیه‌سازی شده */
.infographic-block {
background-color: #eaf6f7; /* پس‌زمینه روشن و آرام‌بخش برای اینفوگرافیک */
padding: 35px;
border-radius: 15px;
margin: 45px 0;
border: 1px solid #dbe9ea;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
flex-wrap: wrap; /* اجازه شکستن خط در صفحات کوچک */
justify-content: center; /* هم‌ترازی آیتم‌ها در مرکز */
gap: 25px; /* فاصله بین آیتم‌ها */
text-align: center;
}

.info-item {
flex: 1 1 calc(33% – 40px); /* سه ستون در صفحات بزرگ، واکنش‌گرا */
min-width: 280px; /* حداقل عرض برای هر آیتم */
background-color: #ffffff;
padding: 30px 25px;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
border-bottom: 5px solid #FF7A00; /* حاشیه پایین با رنگ تاکیدی */
transition: transform 0.2s ease-in-out; /* انیمیشن هاور */
}

.info-item:hover {
transform: translateY(-8px); /* حرکت به بالا هنگام هاور */
}

.info-item span.icon {
display: block;
font-size: 55px; /* سایز بزرگ برای آیکون */
margin-bottom: 18px;
color: #0A2E50; /* رنگ آیکون */
}

.info-item h4 {
font-size: 21px;
color: #0A2E50;
margin-bottom: 12px;
font-weight: 700;
line-height: 1.4;
}

.info-item p {
font-size: 15.5px;
line-height: 1.7;
color: #555;
margin-bottom: 0;
}

/* استایل بخش سوالات متداول (FAQ) */
.faq-item {
margin-bottom: 30px;
border-bottom: 1px dashed #e0e0e0; /* خط جداکننده نقطه‌چین */
padding-bottom: 25px;
}

.faq-item strong {
display: block;
font-size: 19.5px;
color: #0A2E50;
margin-bottom: 12px;
position: relative;
padding-right: 25px; /* فضای آیکون */
}
.faq-item strong::before {
content: “❓”; /* آیکون سوال */
position: absolute;
right: 0;
font-size: 20px;
color: #FF7A00;
top: 2px;
}

.faq-item p {
font-size: 16.5px;
color: #4a4a4a;
padding-right: 35px; /* تورفتگی پاسخ */
border-right: 4px solid #28A745; /* خط سبز کنار پاسخ */
padding-left: 0;
margin-top: 10px;
}

/* واکنش‌گرایی (Responsive Design) */
@media (max-width: 992px) { /* برای تبلت و لپ‌تاپ‌های کوچک */
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
p, ul li, table, .info-item p, .faq-item p { font-size: 16px; }
.article-container {
padding: 25px;
margin: 15px auto;
}
.infographic-block {
padding: 30px;
gap: 20px;
}
.info-item {
flex: 1 1 calc(50% – 30px); /* دو ستون برای تبلت */
min-width: unset;
padding: 25px;
}
}

@media (max-width: 768px) { /* برای موبایل‌های بزرگ */
h1 { font-size: 30px; padding-bottom: 12px; margin-bottom: 20px; }
h2 { font-size: 24px; margin-top: 35px; margin-bottom: 18px; }
h3 { font-size: 20px; margin-top: 28px; margin-bottom: 14px; }
p, ul li, table, .info-item p, .faq-item p { font-size: 15px; }
.article-container {
padding: 20px;
margin: 10px auto;
}
ul li::before { font-size: 18px; }
.infographic-block {
flex-direction: column; /* تک ستون برای موبایل */
gap: 18px;
padding: 25px;
}
.info-item {
flex: 1 1 100%;
padding: 22px;
}
.info-item span.icon { font-size: 50px; margin-bottom: 15px; }
.info-item h4 { font-size: 19px; }
.faq-item strong { font-size: 18px; }
.faq-item p { padding-right: 28px; }
}

@media (max-width: 480px) { /* برای موبایل‌های کوچک و تلویزیون‌های با مقیاس‌بندی بالا */
h1 { font-size: 26px; padding-bottom: 10px; }
h2 { font-size: 22px; margin-top: 30px; }
h3 { font-size: 18px; margin-top: 25px; }
p, ul li, table, .info-item p, .faq-item p { font-size: 14px; line-height: 1.7; }
.article-container { padding: 15px; margin: 5px auto; }
ul { padding-right: 20px; }
ul li { padding-right: 25px; margin-bottom: 8px; }
ul li::before { font-size: 16px; }
th, td { padding: 12px 15px; }
.infographic-block { padding: 20px; gap: 15px; }
.info-item { padding: 18px; }
.info-item span.icon { font-size: 45px; margin-bottom: 12px; }
.info-item h4 { font-size: 17px; }
.faq-item strong { font-size: 16.5px; padding-right: 22px; }
.faq-item strong::before { font-size: 18px; top: 0px; }
.faq-item p { padding-right: 25px; border-right-width: 3px; }
}