/* Base Styles for Responsiveness and Aesthetics */
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap’); /* استفاده از فونت Vazirmatn برای خوانایی بهتر متن فارسی */

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

.container {
max-width: 900px; /* حداکثر عرض محتوا برای خوانایی بهتر در صفحه نمایش‌های بزرگ */
margin: 0 auto; /* قرار دادن محتوا در مرکز */
padding: 1.5rem; /* فاصله داخلی از لبه‌های کانتینر */
background-color: #FFFFFF; /* رنگ پس‌زمینه کانتینر: سفید */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* سایه نرم برای جلوه زیباتر */
border-radius: 8px; /* گوشه‌های گرد برای کانتینر */
margin-top: 2rem;
margin-bottom: 2rem;
}

/* Headings Styling */
h1 {
font-family: ‘Vazirmatn’, sans-serif;
font-size: 2.8rem; /* اندازه فونت H1 */
font-weight: 700; /* ضخامت فونت H1 */
color: #1A2E47; /* رنگ: آبی نفتی تیره */
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid #F0B86C; /* خط زیرین با رنگ طلایی ملایم */
line-height: 1.4;
}

h2 {
font-family: ‘Vazirmatn’, sans-serif;
font-size: 2.1rem; /* اندازه فونت H2 */
font-weight: 600; /* ضخامت فونت H2 */
color: #1A2E47;
margin-top: 2.5rem;
margin-bottom: 1.2rem;
padding-right: 10px;
border-right: 5px solid #3A5B80; /* خط حاشیه راست با رنگ آبی متوسط */
}

h3 {
font-family: ‘Vazirmatn’, sans-serif;
font-size: 1.7rem; /* اندازه فونت H3 */
font-weight: 500; /* ضخامت فونت H3 */
color: #3A5B80;
margin-top: 2rem;
margin-bottom: 1rem;
padding-right: 5px;
border-right: 3px solid #E0E0E0; /* خط حاشیه راست با رنگ خاکستری روشن */
}

p {
margin-bottom: 1rem;
font-size: 1.1rem; /* اندازه فونت برای پاراگراف‌ها */
}

strong {
color: #3A5B80; /* رنگ برای متن‌های بولد */
font-weight: 600;
}

/* List Styles (Unordered and Ordered) */
ul, ol {
margin-right: 1.5rem;
margin-bottom: 1rem;
padding: 0;
list-style-type: disc; /* نوع گلوله برای لیست‌های نامرتب */
}
ol {
list-style-type: decimal; /* نوع شماره برای لیست‌های مرتب */
}
ul li, ol li {
margin-bottom: 0.7rem;
font-size: 1.1rem;
padding-right: 0.5rem;
}
ul li::marker {
color: #F0B86C; /* رنگ گلوله‌ها: طلایی */
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌های جدول */
margin: 2rem 0;
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
border-radius: 6px;
overflow: hidden; /* تضمین اعمال گوشه‌های گرد به محتوا */
}

table th, table td {
padding: 1rem 1.2rem;
border: 1px solid #E0E0E0; /* خطوط جداکننده جدول */
text-align: right;
font-size: 1.05rem;
}

table th {
background-color: #3A5B80; /* رنگ پس‌زمینه سربرگ جدول: آبی متوسط */
color: #FFFFFF; /* رنگ متن سربرگ: سفید */
font-weight: 700;
font-size: 1.15rem;
text-align: center;
}

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

/* Infographic (Text-based visual element) */
.infographic-block {
background-color: #E6F0F8; /* پس‌زمینه آبی روشن برای بخش اینفوگرافیک */
border-right: 8px solid #F0B86C; /* حاشیه طلایی در سمت راست */
padding: 2rem;
margin: 2.5rem 0;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* سایه برجسته */
}

.infographic-title {
font-size: 1.8rem;
font-weight: 700;
color: #1A2E47;
margin-bottom: 1.5rem;
text-align: center;
position: relative; /* برای قرار دادن آیکون به صورت مطلق */
}
.infographic-title::after {
content: ‘💡’; /* آیکون لامپ */
position: absolute;
left: 50%; /* در مرکز افقی */
transform: translateX(-50%) translateY(-120%); /* تنظیم موقعیت دقیق */
font-size: 2.5rem;
opacity: 0.7; /* شفافیت کم */
}

.infographic-item {
display: flex; /* برای چیدمان آیکون و متن در کنار هم */
align-items: flex-start;
margin-bottom: 1.2rem;
}

.infographic-icon {
font-size: 2.2rem;
margin-left: 1rem;
color: #F0B86C; /* رنگ آیکون‌ها: طلایی */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}
.infographic-icon.step { color: #3A5B80; } /* رنگ آبی برای آیکون‌های مرحله‌ای */

.infographic-text {
font-size: 1.15rem;
color: #444444;
}
.infographic-text strong {
color: #1A2E47;
font-weight: 700;
display: block; /* قرار دادن متن بولد در یک خط جداگانه */
margin-bottom: 0.3rem;
}

/* Callout/Highlight Box */
.highlight-box {
background-color: #FFFBE6; /* پس‌زمینه زرد روشن */
border-right: 5px solid #F0B86C; /* حاشیه طلایی */
padding: 1.5rem;
margin: 2rem 0;
border-radius: 8px;
font-size: 1.1rem;
line-height: 1.7;
color: #555555;
}
.highlight-box strong {
color: #966C0C; /* رنگ قهوه‌ای-طلایی تیره برای تاکید */
}

/* Responsive Adjustments for various screen sizes */
@media (max-width: 768px) { /* تبلت و لپ‌تاپ‌های کوچک */
.container {
padding: 1rem;
margin: 1rem auto;
}
h1 {
font-size: 2.2rem;
padding-bottom: 0.8rem;
margin-bottom: 1.5rem;
}
h2 {
font-size: 1.8rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
h3 {
font-size: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 0.8rem;
}
p, ul li, ol li, table th, table td, .infographic-text {
font-size: 1rem;
}
.infographic-block {
padding: 1.5rem;
margin: 2rem 0;
}
.infographic-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.infographic-title::after {
font-size: 2rem;
transform: translateX(-50%) translateY(-100%);
}
.infographic-icon {
font-size: 1.8rem;
margin-left: 0.8rem;
}
}

@media (max-width: 480px) { /* موبایل */
h1 {
font-size: 1.8rem;
padding-bottom: 0.6rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.6rem;
margin-top: 1.5rem;
margin-bottom: 0.8rem;
}
h3 {
font-size: 1.3rem;
margin-top: 1.2rem;
margin-bottom: 0.6rem;
}
p, ul li, ol li, table th, table td, .infographic-text {
font-size: 0.95rem;
line-height: 1.6;
}
table th, table td {
padding: 0.8rem;
}
.infographic-block {
padding: 1rem;
}
.infographic-title {
font-size: 1.3rem;
}
.infographic-title::after {
font-size: 1.8rem;
}
.infographic-icon {
font-size: 1.6rem;
margin-left: 0.6rem;
}
}