/* —————————————————————————————————————-
قالب بندی اصلی برای نمایش بهینه در ویرایشگر بلوک و کلاسیک و رسپانسیو بودن
این استایل‌ها به گونه‌ای طراحی شده‌اند که بعد از کپی در ویرایشگر، به درستی نمایش داده شوند
و تجربه کاربری مناسبی در موبایل، تبلت، لپتاپ و تلویزیون فراهم کنند.
—————————————————————————————————————- */

/* Basic Reset & RTL Configuration */
body, h1, h2, h3, p, ul, ol, table, th, td, div {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Segoe UI’, Arial, sans-serif; /* فونت فارسی Vazirmatn یا جایگزین مناسب */
line-height: 1.7;
color: #333; /* رنگ متن پیش‌فرض برای خوانایی */
direction: rtl; /* جهت متن از راست به چپ */
text-align: right; /* تراز متن به راست */
}

/* Main Container for overall article styling */
.article-container {
max-width: 850px; /* حداکثر عرض برای نمایش در صفحات بزرگ */
margin: 25px auto; /* مرکز قرار گرفتن در صفحه با فاصله از بالا و پایین */
padding: 25px 30px; /* فضای داخلی */
background-color: #ffffff; /* پس‌زمینه سفید */
border-radius: 15px; /* گوشه‌های گرد */
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* سایه جذاب برای برجستگی */
border: 1px solid #e0e0e0; /* حاشیه ظریف */
overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* Heading Styles */
h1 {
font-size: 2.8em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 800; /* بسیار ضخیم */
color: #0d47a1; /* آبی تیره و عمیق */
text-align: center;
margin-bottom: 35px;
padding-bottom: 20px;
border-bottom: 4px solid #e0e0e0; /* خط جداکننده زیر عنوان */
display: block; /* اطمینان از رفتار بلوکی برای تشخیص صحیح در ویرایشگر */
}

h2 {
font-size: 2.1em; /* سایز H2 */
font-weight: 700; /* ضخیم */
color: #1565c0; /* آبی متوسط */
margin-top: 50px;
margin-bottom: 25px;
padding: 12px 20px;
background-color: #e3f2fd; /* پس‌زمینه آبی بسیار روشن */
border-left: 6px solid #2196f3; /* نوار عمودی آبی روشن در سمت راست */
border-radius: 10px; /* گوشه‌های گرد */
display: block;
}

h3 {
font-size: 1.6em; /* سایز H3 */
font-weight: 600; /* نیمه‌ضخیم */
color: #1976d2; /* آبی کمی روشن‌تر */
margin-top: 35px;
margin-bottom: 18px;
border-bottom: 1px dashed #bbdefb; /* خط چین ظریف زیر عنوان */
padding-bottom: 8px;
display: block;
}

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

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

ul li {
font-size: 1.05em;
margin-bottom: 12px;
padding-right: 30px; /* فضای لازم برای آیکون سفارشی */
position: relative;
}

ul li::before {
content: ‘✅’; /* آیکون تیک سبز */
position: absolute;
right: 0;
color: #4CAF50; /* سبز */
font-size: 1.2em;
line-height: 1.7; /* تنظیم برای تراز عمودی بهتر */
}

ol {
padding-right: 25px; /* فضای داخلی برای لیست عددی */
margin-bottom: 25px;
}

ol li {
font-size: 1.05em;
margin-bottom: 12px;
line-height: 1.8;
}

/* Table Styling */
table {
width: 100%;
border-collapse: separate; /* برای امکان اعمال border-radius */
border-spacing: 0; /* حذف فاصله بین سلول‌ها */
margin: 30px 0;
font-size: 1em;
text-align: right;
direction: rtl;
border-radius: 12px; /* گوشه‌های گرد برای کل جدول */
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06); /* سایه ظریف */
}

th, td {
padding: 15px 20px;
border: 1px solid #e0e0e0; /* حاشیه سلول‌ها */
vertical-align: top; /* تراز محتوا به بالا */
}

th {
background-color: #2196f3; /* پس‌زمینه آبی برای سربرگ جدول */
color: white;
font-weight: 700;
text-align: center;
font-size: 1.1em;
}

td {
background-color: #fcfcfc; /* پس‌زمینه سفید برای سلول‌ها */
}

tr:nth-child(even) td {
background-color: #f8f8f8; /* طرح راه‌راه برای ردیف‌های زوج */
}

/* Infographic Replacement Styling */
.infographic-block {
background-color: #e0f2f7; /* آبی آسمانی روشن */
border-right: 7px solid #00bcd4; /* نوار فیروزه‌ای جذاب */
padding: 25px;
margin: 40px 0;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
text-align: right;
direction: rtl;
}

.infographic-block h3 {
color: #00838f; /* فیروزه‌ای تیره برای عنوان اینفوگرافیک */
margin-top: 0;
margin-bottom: 20px;
border-bottom: none;
padding-bottom: 0;
font-size: 1.8em;
}

.infographic-block ul {
list-style-type: none;
padding-right: 0;
}

.infographic-block ul li {
margin-bottom: 10px;
font-size: 1.05em;
position: relative;
padding-right: 35px;
color: #455a64; /* خاکستری مایل به آبی */
line-height: 1.6;
}

.infographic-block ul li::before {
content: ‘💡’; /* آیکون لامپ */
position: absolute;
right: 0;
font-size: 1.3em;
top: 0;
color: #ffc107; /* زرد */
}

/* Call-to-Action (CTA) Block Styling */
.cta-block {
background-color: #e8f5e9; /* سبز بسیار روشن */
border: 2px dashed #81c784; /* خط چین سبز */
padding: 30px;
margin-top: 50px;
border-radius: 15px;
text-align: center;
direction: rtl;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.cta-block p {
font-size: 1.2em;
color: #2e7d32; /* سبز تیره */
margin-bottom: 15px;
line-height: 1.6;
}

.cta-block strong {
color: #1b5e20; /* سبز بسیار تیره */
font-weight: 800;
}

/* Responsive Adjustments (Media Queries) */
@media (max-width: 992px) { /* Tablets and smaller laptops */
.article-container {
margin: 20px auto;
padding: 20px 25px;
border-radius: 12px;
}
h1 { font-size: 2.4em; margin-bottom: 30px; }
h2 { font-size: 1.9em; margin-top: 40px; margin-bottom: 20px; padding: 10px 18px; }
h3 { font-size: 1.4em; margin-top: 30px; margin-bottom: 15px; }
p, ul li, ol li { font-size: 1.02em; }
table { margin: 25px 0; }
th, td { padding: 12px 18px; }
.infographic-block { padding: 20px; margin: 30px 0; }
.infographic-block h3 { font-size: 1.6em; }
.infographic-block ul li { padding-right: 30px; }
.infographic-block ul li::before { font-size: 1.2em; }
.cta-block { padding: 25px; margin-top: 40px; }
.cta-block p { font-size: 1.1em; }
}

@media (max-width: 768px) { /* Larger smartphones and small tablets */
.article-container {
margin: 15px auto;
padding: 15px 20px;
border-radius: 10px;
}
h1 { font-size: 2em; margin-bottom: 25px; padding-bottom: 15px; }
h2 { font-size: 1.7em; margin-top: 35px; margin-bottom: 18px; padding: 8px 15px; }
h3 { font-size: 1.3em; margin-top: 28px; margin-bottom: 12px; }
p, ul li, ol li { font-size: 1em; }
ul li { padding-right: 25px; }
ul li::before { font-size: 1.1em; }
ol { padding-right: 20px; }
table { margin: 20px 0; font-size: 0.95em; }
th, td { padding: 10px 15px; }
.infographic-block { padding: 18px; margin: 25px 0; }
.infographic-block h3 { font-size: 1.4em; margin-bottom: 15px; }
.infographic-block ul li { padding-right: 28px; }
.infographic-block ul li::before { font-size: 1.1em; }
.cta-block { padding: 20px; margin-top: 35px; }
.cta-block p { font-size: 1.05em; }
}

@media (max-width: 480px) { /* Small smartphones */
.article-container {
margin: 10px auto;
padding: 10px 15px;
border-radius: 8px;
}
h1 { font-size: 1.8em; margin-bottom: 20px; padding-bottom: 12px; }
h2 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; padding: 6px 12px; }
h3 { font-size: 1.2em; margin-top: 25px; margin-bottom: 10px; }
p, ul li, ol li { font-size: 0.95em; }
ul li { padding-right: 22px; }
ul li::before { font-size: 1em; }
ol { padding-right: 15px; }
table { margin: 15px 0; font-size: 0.88em; }
th, td { padding: 8px 12px; }
.infographic-block { padding: 15px; margin: 20px 0; }
.infographic-block h3 { font-size: 1.2em; margin-bottom: 12px; }
.infographic-block ul li { padding-right: 25px; }
.infographic-block ul li::before { font-size: 1em; }
.cta-block { padding: 18px; margin-top: 30px; }
.cta-block p { font-size: 1em; }
}