/*
این بلوک CSS برای بهبود نمایش در انواع دستگاه‌ها (موبایل، تبلت، لپ‌تاپ و تلویزیون) و ایجاد ظاهری زیبا و منحصر به فرد طراحی شده است.
برخی از این استایل‌ها ممکن است در ویرایشگرهای بلوک نیاز به کپی شدن در بخش CSS سفارشی سایت داشته باشند تا کاملاً اعمال شوند،
اما ساختار HTML و استایل‌های Inline به گونه‌ای تنظیم شده‌اند که حتی بدون CSS خارجی، محتوا خوانا و زیبا باشد.
*/
body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.container {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif; /* فونت مناسب فارسی و جایگزین برای سیستم‌هایی که ندارند */
line-height: 1.8;
color: #333333;
background-color: #FFFFFF; /* پس زمینه اصلی مقاله */
max-width: 900px;
margin: 0 auto;
padding: 20px 30px; /* افزایش padding برای فضای بیشتر */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* سایه جذاب‌تر */
border-radius: 15px; /* گوشه‌های گردتر */
direction: rtl;
text-align: right;
overflow-x: auto; /* برای جداول در صفحه نمایش‌های کوچک */
font-size: clamp(1rem, 2.5vw, 1.15rem); /* فونت ریسپانسیو */
}

h1, h2, h3 {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif;
text-align: right;
direction: rtl;
margin-bottom: 20px;
line-height: 1.4;
}

h1 {
font-size: clamp(2em, 5vw, 2.8em); /* ریسپانسیو برای H1 */
font-weight: 900; /* ضخامت بیشتر برای H1 */
color: #4A004A; /* رنگ اصلی بنفش تیره */
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 3px solid #E0F2F7; /* خط زیر H1 */
}

h2 {
font-size: clamp(1.6em, 4vw, 2.2em); /* ریسپانسیو برای H2 */
font-weight: bold;
color: #6A006A; /* رنگ بنفش متوسط */
margin-top: 50px;
margin-bottom: 25px;
padding-right: 10px;
border-right: 4px solid #4A004A; /* خط کناری H2 */
}

h3 {
font-size: clamp(1.3em, 3.5vw, 1.8em); /* ریسپانسیو برای H3 */
font-weight: bold;
color: #4A004A;
margin-top: 35px;
margin-bottom: 15px;
}

p {
margin-bottom: 1em;
line-height: 1.9;
}

ul, ol {
margin-right: 25px;
margin-bottom: 1em;
line-height: 2;
}

li strong {
color: #4A004A; /* رنگ بنفش برای کلمات کلیدی در لیست‌ها */
}

/* Style for general information boxes */
.info-box {
background-color: #E0F2F7; /* پس زمینه آبی روشن */
border-right: 5px solid #4A004A; /* خط کناری بنفش تیره */
padding: 20px 25px;
border-radius: 10px;
margin: 35px 0;
color: #333333;
font-size: 1.05em;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
display: flex;
align-items: center;
gap: 15px;
}
.info-box p {
margin: 0;
font-weight: bold;
color: #4A004A;
}
.info-box.success {
background-color: #F0FFF0; /* سبز بسیار روشن برای باکس‌های موفقیت */
border-right-color: #4CAF50; /* سبز برای خط کناری */
}
.info-box.success p {
color: #4CAF50; /* متن سبز */
}

/* Infographic block styling */
.infographic-block {
background-color: #F8F8F8; /* پس زمینه کمی تیره‌تر برای بلوک اینفوگرافیک */
border-radius: 15px;
padding: 30px;
margin: 45px 0;
display: flex;
flex-direction: column;
gap: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}
.infographic-block h3 {
text-align: center;
margin-bottom: 20px;
color: #6A006A;
font-size: clamp(1.4em, 3.5vw, 1.9em);
}
.infographic-item {
display: flex;
align-items: flex-start;
gap: 20px;
background-color: #FFFFFF;
padding: 20px;
border-radius: 12px;
box-shadow: 0 1px 6px rgba(0,0,0,0.04);
transition: transform 0.2s ease-in-out;
}
.infographic-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.infographic-icon {
font-size: clamp(1.8em, 4vw, 2.8em); /* سایز آیکون ریسپانسیو */
color: #6A006A;
flex-shrink: 0;
line-height: 1;
background-color: #E0F2F7;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid #C0E0E5;
}
.infographic-text strong {
color: #4A004A;
font-size: clamp(1em, 2.5vw, 1.25em);
display: block;
margin-bottom: 8px;
}
.infographic-text p {
margin: 0;
line-height: 1.7;
}

/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 0.98em;
text-align: right;
direction: rtl;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
border-radius: 10px;
overflow: hidden; /* برای نمایش گرد گوشه‌های جدول */
}
table th, table td {
border: 1px solid #E0F2F7; /* خطوط جدول روشن */
padding: 15px 18px;
}
table thead tr {
background-color: #6A006A; /* سربرگ جدول بنفش */
color: #FFFFFF;
text-align: center;
font-weight: bold;
font-size: 1.05em;
}
table tbody tr:nth-of-type(even) {
background-color: #F8F8F8; /* رنگ متناوب برای ردیف‌ها */
}
table tbody tr:hover {
background-color: #F2F2F2; /* هاور جذاب روی ردیف‌ها */
}
table td strong {
color: #4A004A; /* رنگ بنفش برای متن مهم در سلول‌ها */
}

/* Section divider styling */
.section-divider {
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(106, 0, 106, 0), rgba(106, 0, 106, 0.75), rgba(106, 0, 106, 0));
margin: 60px 0;
width: 70%;
margin-left: auto;
margin-right: auto;
}

/* Responsive adjustments for smaller screens (Mobile & Tablet) */
@media (max-width: 768px) {
.container {
padding: 15px;
margin: 0 10px;
box-shadow: none; /* سایه کمتر در موبایل */
border-radius: 8px;
font-size: 1em; /* فونت پایه کوچکتر */
}

h1 {
font-size: 2em !important; /* اطمینان از اعمال سایز در موبایل */
margin-bottom: 30px;
}
h2 {
font-size: 1.5em !important;
margin-top: 40px;
}
h3 {
font-size: 1.25em !important;
}

.info-box {
padding: 15px 20px;
margin: 25px 0;
font-size: 0.95em;
flex-direction: column;
align-items: flex-start;
}
.info-box p {
text-align: right;
}

.infographic-block {
padding: 20px;
margin: 30px 0;
gap: 15px;
}
.infographic-item {
flex-direction: column;
align-items: flex-start;
padding: 15px;
}
.infographic-icon {
margin-bottom: 10px;
padding: 6px 10px;
font-size: 2em;
}
.infographic-text strong {
font-size: 1.1em;
text-align: right;
width: 100%;
}
.infographic-text p {
font-size: 0.95em;
}

/* Responsive table stacking */
table thead {
display: none; /* مخفی کردن هدر جدول در موبایل */
}
table, table tbody, table tr, table td {
display: block; /* نمایش بلوکی برای سلول‌ها */
width: 100%;
}
table tr {
margin-bottom: 15px;
border: 1px solid #E0F2F7;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
table td {
text-align: right;
border: none;
border-bottom: 1px solid #EEEEEE; /* خط زیر هر سلول */
position: relative;
padding-right: 50%; /* فضای بیشتر برای برچسب pseudo-element */
display: flex;
justify-content: space-between;
align-items: center;
}
table td:last-child {
border-bottom: none;
}
table td::before {
content: attr(data-label); /* نمایش برچسب از data-label */
position: absolute;
right: 15px;
font-weight: bold;
color: #6A006A;
width: 45%;
text-align: right;
white-space: nowrap; /* جلوگیری از شکستن خط برچسب */
overflow: hidden;
text-overflow: ellipsis;
}
}

/* Optional: Font import for Vazirmatn if supported by editor/browser */
@import url(‘https://fonts.cdnfonts.com/css/vazirmatn’); /* یا از فونت‌های محلی استفاده شود */