/* تنظیمات عمومی برای تضمین نمایش صحیح در ویرایشگرهای بلوک و کلاسیک و ریسپانسیو بودن */
/* این سبک‌ها با استفاده از `!important` در موارد خاص، ارجحیت پیدا می‌کنند تا استایل‌های پیش‌فرض ویرایشگرها را نادیده بگیرند. */
body {
font-family: ‘B Nazanin’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif !important;
line-height: 1.7 !important;
color: #333333 !important;
background-color: #f7f9fb !important; /* یک رنگ پس‌زمینه بسیار ملایم برای کل صفحه */
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important; /* برای مدیریت بهتر Padding و Border */
}
.article-container {
max-width: 900px !important; /* عرض بهینه برای خوانایی در نمایشگرهای مختلف */
margin: 25px auto !important; /* مرکز قرار گرفتن در صفحات عریض‌تر و حاشیه از بالا و پایین */
padding: 30px 25px !important;
background-color: #ffffff !important; /* پس‌زمینه سفید برای محتوای مقاله */
border-radius: 12px !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important; /* سایه ملایم برای جلوه سه‌بعدی */
overflow-x: hidden !important; /* جلوگیری از اسکرول افقی اضافی */
border: 1px solid #e0e0e0 !important; /* حاشیه نازک برای کانتینر اصلی */
}
h1, h2, h3 {
color: #003366 !important; /* آبی تیره برای عناوین */
margin-top: 1.8em !important;
margin-bottom: 0.8em !important;
padding-bottom: 0.4em !important;
border-bottom: 2px solid rgba(0, 51, 102, 0.1) !important; /* جداکننده خطی زیر عناوین */
font-family: ‘B Titr’, ‘B Nazanin’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif !important; /* فونت مخصوص عناوین */
}
h1 {
font-size: 2.5em !important; /* بزرگتر برای H1 */
font-weight: 700 !important; /* پررنگ‌تر */
text-align: center !important;
border-bottom: 3px solid #0056b3 !important; /* جداکننده برجسته‌تر برای H1 */
padding-bottom: 18px !important;
margin-top: 0 !important;
color: #0056b3 !important; /* آبی روشن‌تر و زنده‌تر برای عنوان اصلی */
letter-spacing: -0.5px !important; /* کمی فشرده‌تر شدن حروف */
}
h2 {
font-size: 1.9em !important;
font-weight: 600 !important;
color: #004488 !important;
border-bottom: 1px dashed rgba(0, 68, 136, 0.2) !important; /* جداکننده خط‌چین برای H2 */
}
h3 {
font-size: 1.5em !important;
font-weight: 600 !important;
color: #0056b3 !important;
border-bottom: none !important;
margin-top: 1.2em !important;
}
p {
margin-bottom: 1.3em !important;
text-align: justify !important;
line-height: 1.8 !important;
}
ul {
margin-bottom: 1.5em !important;
padding-right: 30px !important; /* برای زبان فارسی */
list-style-type: ‘• ‘ !important; /* استایل گلوله برای لیست‌ها */
}
li {
margin-bottom: 0.8em !important;
text-align: justify !important;
}
a {
color: #0056b3 !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
a:hover {
text-decoration: underline !important;
color: #007bff !important;
}

/* استایل‌های جدول */
table {
width: 100% !important;
border-collapse: collapse !important;
margin: 2.5em 0 !important;
background-color: #ffffff !important;
border: 1px solid #e0e0e0 !important;
border-radius: 10px !important;
overflow: hidden !important; /* اطمینان از اعمال border-radius به محتوا */
box-shadow: 0 4px 15px rgba(0,0,0,0.07) !important;
}
th, td {
padding: 14px 18px !important;
text-align: right !important;
border-bottom: 1px solid #eef2f5 !important; /* جداکننده نازک بین ردیف‌ها */
}
th {
background-color: #e6f7ff !important; /* آبی روشن برای سرتیتر جدول */
color: #003366 !important;
font-weight: 700 !important;
text-align: center !important;
border-bottom: 2px solid #a7d9ee !important;
font-size: 1.1em !important;
}
tr:nth-child(even) {
background-color: #fbfdff !important; /* پس‌زمینه متفاوت برای ردیف‌های زوج */
}
tr:hover {
background-color: #e0f2f7 !important; /* هایلایت ردیف در هنگام هاور */
}

/* بلوک اینفوگرافیک‌مانند */
.infographic-block {
background-image: linear-gradient(135deg, #e0f2f7 0%, #c1e4eb 100%) !important; /* گرادیانت ملایم */
padding: 30px !important;
margin: 3em 0 !important;
border-radius: 18px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
text-align: center !important;
color: #003366 !important;
position: relative !important;
overflow: hidden !important;
border: 1px solid #a7d9ee !important;
}
.infographic-block h3 {
color: #003366 !important;
font-size: 1.8em !important;
margin-top: 0 !important;
border-bottom: none !important;
padding-bottom: 0 !important;
text-shadow: 1px 1px 2px rgba(255,255,255,0.7) !important;
}
.infographic-item {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important; /* چیدمان راست‌چین برای فارسی */
margin: 1.5em 0 !important;
font-size: 1.15em !important;
font-weight: 500 !important;
line-height: 1.5 !important;
text-align: right !important;
direction: rtl !important; /* برای متن فارسی */
background-color: rgba(255, 255, 255, 0.7) !important;
padding: 12px 20px !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.infographic-item:hover {
transform: translateY(-3px) !important;
box-shadow: 0 6px 15px rgba(0,0,0,0.1) !important;
}
.infographic-icon {
font-size: 2.2em !important;
margin-right: 18px !important; /* فاصله از سمت راست برای فارسی */
color: #0056b3 !important;
flex-shrink: 0 !important; /* جلوگیری از کوچک شدن آیکون */
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)) !important;
}
.infographic-text {
flex-grow: 1 !important;
text-align: right !important;
}
.infographic-separator {
width: 70% !important;
height: 2px !important;
background-color: rgba(0, 51, 102, 0.25) !important;
margin: 2em auto !important;
border-radius: 1px !important;
}

/* تنظیمات ریسپانسیو برای موبایل و تبلت */
@media (max-width: 768px) {
.article-container {
margin: 15px !important;
padding: 20px !important;
border-radius: 10px !important;
}
h1 {
font-size: 2em !important;
padding-bottom: 12px !important;
}
h2 {
font-size: 1.6em !important;
}
h3 {
font-size: 1.3em !important;
}
th, td {
padding: 10px 12px !important;
font-size: 0.9em !important;
}
.infographic-block {
padding: 20px !important;
margin: 2em 0 !important;
border-radius: 12px !important;
}
.infographic-block h3 {
font-size: 1.5em !important;
}
.infographic-item {
flex-direction: row-reverse !important; /* آیکون‌ها همچنان سمت راست */
text-align: right !important;
font-size: 1em !important;
padding: 10px 15px !important;
}
.infographic-icon {
margin-right: 15px !important;
font-size: 2em !important;
}
}

@media (max-width: 480px) {
.article-container {
margin: 10px !important;
padding: 15px !important;
border-radius: 8px !important;
}
h1 {
font-size: 1.6em !important;
padding-bottom: 10px !important;
}
h2 {
font-size: 1.4em !important;
}
h3 {
font-size: 1.2em !important;
}
th, td {
padding: 8px 10px !important;
font-size: 0.85em !important;
}
.infographic-block {
padding: 15px !important;
margin: 1.5em 0 !important;
}
.infographic-block h3 {
font-size: 1.3em !important;
}
.infographic-item {
font-size: 0.9em !important;
padding: 8px 12px !important;
}
.infographic-icon {
font-size: 1.8em !important;
margin-right: 12px !important;
}
ul {
padding-right: 20px !important;
}
}