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

/* تنظیمات پایه برای کل بدنه – جهت اطمینان از رندرینگ صحیح در محیط‌های مختلف */
body {
font-family: ‘B Nazanin’, ‘Arial’, sans-serif; /* فونت‌های فارسی و جایگزین */
line-height: 1.7; /* ارتفاع خط برای خوانایی بهتر */
color: #333333; /* رنگ متن اصلی */
background-color: #F8F8F8; /* رنگ پس‌زمینه کلی صفحه */
margin: 0;
padding: 0;
box-sizing: border-box; /* مدل جعبه‌ای استاندارد */
font-size: 16px; /* اندازه فونت پایه */
direction: rtl; /* جهت نوشتار راست به چپ */
text-align: right; /* تراز متن راست */
}

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

/* تنظیمات واکنش‌گرا برای صفحه‌های کوچک (موبایل و تبلت) */
@media (max-width: 768px) {
.article-container {
margin: 10px; /* فاصله کمتر از کناره‌ها در موبایل */
padding: 15px;
border-radius: 0; /* حذف گوشه‌های گرد در موبایل برای نمایش بهتر */
}
body {
font-size: 15px; /* اندازه فونت کمی کوچکتر در موبایل */
}
}

/* استایل‌دهی هدینگ‌های کلی */
h1, h2, h3 {
color: #2C3E50; /* رنگ آبی تیره/خاکستری برای هدینگ‌ها */
margin-top: 1.5em; /* فاصله از بالای عنصر قبلی */
margin-bottom: 0.8em; /* فاصله از پایین عنصر بعدی */
padding-bottom: 0.3em;
border-bottom: 1px solid rgba(52, 152, 219, 0.2); /* خط زیرین آبی کمرنگ */
text-align: right;
font-weight: bold; /* بولد بودن تمام هدینگ‌ها */
}

/* استایل‌دهی خاص برای H1 */
h1 {
font-size: 2.2em; /* اندازه بزرگتر */
color: #34495E; /* آبی تیره‌تر */
border-bottom: 2px solid #3498DB; /* خط زیرین ضخیم‌تر و پررنگ‌تر */
padding-bottom: 0.5em;
margin-top: 0; /* بدون مارجین از بالا برای عنوان اصلی */
text-align: center; /* H1 در مرکز قرار می‌گیرد */
direction: rtl; /* جهت نوشتار */
}

/* استایل‌دهی خاص برای H2 */
h2 {
font-size: 1.8em;
color: #2C3E50;
}

/* استایل‌دهی خاص برای H3 */
h3 {
font-size: 1.4em;
color: #3498DB; /* آبی روشن‌تر برای H3 */
border-bottom: none; /* بدون خط زیرین برای H3 */
margin-top: 1.2em;
margin-bottom: 0.6em;
}

/* استایل‌دهی پاراگراف‌ها */
p {
margin-bottom: 1em;
text-align: justify; /* تراز دو طرفه برای خوانایی بهتر */
direction: rtl; /* جهت نوشتار راست به چپ */
}

/* استایل‌دهی لیست‌ها */
ul, ol {
list-style-position: inside; /* علامت لیست داخل متن */
margin-right: 20px; /* فاصله از راست */
margin-bottom: 1em;
text-align: right;
direction: rtl;
}

li {
margin-bottom: 0.5em;
}

/* استایل‌دهی جدول */
table {
width: 100%; /* عرض کامل */
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 2em 0; /* فاصله از بالا و پایین */
text-align: right;
direction: rtl;
font-size: 0.95em;
}

th, td {
border: 1px solid #D1D1D1; /* مرز سلول‌ها */
padding: 12px 15px; /* فاصله داخلی سلول‌ها */
}

th {
background-color: #ECF0F1; /* پس‌زمینه خاکستری روشن برای هدر جدول */
color: #2C3E50;
font-weight: bold;
text-align: center; /* متن هدر در مرکز */
}

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

/* استایل‌دهی جایگزین اینفوگرافیک (بلوک‌های اطلاعاتی زیبا) */
.infographic-box {
background-color: #EBF5FB; /* پس‌زمینه آبی بسیار روشن */
border-left: 5px solid #3498DB; /* نوار آبی رنگ در سمت چپ */
padding: 25px 25px 25px 15px; /* فاصله داخلی */
margin: 3em 0; /* فاصله از بالا و پایین */
border-radius: 5px; /* گوشه‌های گرد */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* سایه ملایم */
text-align: right;
direction: rtl;
display: flex; /* استفاده از فلکس‌باکس برای چیدمان واکنش‌گرا */
flex-wrap: wrap; /* اجازه شکستن آیتم‌ها به خط بعدی */
gap: 20px; /* فاصله بین آیتم‌ها */
justify-content: space-around; /* توزیع یکنواخت آیتم‌ها */
}

.infographic-item {
flex: 1 1 calc(50% – 20px); /* دو آیتم در هر ردیف، با در نظر گرفتن فاصله */
min-width: 280px; /* حداقل عرض قبل از اینکه آیتم‌ها زیر هم قرار بگیرند */
background-color: #FFFFFF;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease-in-out; /* انیمیشن نرم در هنگام هاور */
position: relative;
}

.infographic-item:hover {
transform: translateY(-5px); /* افکت بالا رفتن در هاور */
}

.infographic-item h4 {
color: #3498DB;
margin-top: 0;
margin-bottom: 10px;
font-size: 1.2em;
text-align: right;
}

.infographic-item p {
font-size: 0.95em;
line-height: 1.6;
margin-bottom: 0;
}

.icon-symbol {
font-size: 1.8em;
color: #3498DB;
margin-left: 10px; /* فاصله از متن */
vertical-align: middle;
float: left; /* آیکون در سمت چپ متن در RTL */
}

/* واکنش‌گرا کردن آیتم‌های اینفوگرافیک برای صفحه‌های کوچک */
@media (max-width: 600px) {
.infographic-item {
flex: 1 1 100%; /* آیتم‌ها زیر هم قرار می‌گیرند */
}
.icon-symbol {
float: none; /* حذف فلوت برای آیکون */
display: block; /* آیکون به صورت بلوکی */
margin-bottom: 10px;
text-align: center; /* آیکون در مرکز */
margin-left: 0;
}
.infographic-item h4 {
text-align: center; /* عنوان در مرکز */
}
.infographic-box {
padding: 15px;
gap: 15px;
}
}

/* استایل‌دهی برای بلوک نتیجه‌گیری یا نکات برجسته */
.highlight {
background-color: #FFFBE6; /* پس‌زمینه زرد روشن */
border-right: 4px solid #F39C12; /* نوار نارنجی در سمت راست */
padding: 15px;
margin: 2em 0;
border-radius: 5px;
direction: rtl;
text-align: right;
}