/* تنظیمات عمومی برای پاسخگویی و زیبایی بصری */
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap’); /* استفاده از فونت وزیرمتن برای فارسی‌نویسی استاندارد */

body {
font-family: ‘Vazirmatn’, sans-serif;
line-height: 1.8;
color: #333;
background-color: #f8f9fa; /* پس‌زمینه روشن برای راحتی چشم */
margin: 0;
padding: 0;
direction: rtl; /* تنظیم جهت نوشتار از راست به چپ */
text-align: justify; /* چینش متون به صورت Justify */
}

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

/* استایل‌های هدینگ‌ها (H1, H2, H3) */
h1, h2, h3 {
font-family: ‘Vazirmatn’, sans-serif;
color: #004d40; /* رنگ سبز تیره (Teal) برای هدینگ‌های اصلی */
text-align: right;
margin-top: 1.5em;
margin-bottom: 0.8em;
line-height: 1.3;
}

h1 {
font-size: 2.8em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 700; /* ضخامت بیشتر فونت */
border-bottom: 3px solid #004d40; /* خط زیرین با رنگ اصلی */
padding-bottom: 15px;
margin-bottom: 30px;
}

h2 {
font-size: 2.2em;
font-weight: 700;
color: #00796b; /* سبز روشن‌تر */
border-right: 5px solid #00796b; /* خط عمودی در سمت راست برای برجسته‌سازی */
padding-right: 15px;
margin-top: 2em;
margin-bottom: 1em;
}

h3 {
font-size: 1.8em;
font-weight: 700;
color: #00897b; /* سبز روشن‌تر از H2 */
padding-right: 10px;
border-right: 3px solid #00897b; /* خط عمودی با ضخامت کمتر */
margin-top: 1.8em;
margin-bottom: 0.8em;
}

p {
margin-bottom: 1em;
font-size: 1.1em;
text-align: justify;
}

ul, ol {
margin-bottom: 1em;
padding-right: 25px; /* فاصله از راست برای لیست‌ها */
list-style-position: inside; /* قرار دادن نشانگر لیست در داخل پدینگ */
}

li {
margin-bottom: 0.6em;
font-size: 1.05em;
}

a {
color: #00796b;
text-decoration: none;
transition: color 0.3s ease; /* انیمیشن نرم برای تغییر رنگ لینک */
}

a:hover {
color: #004d40;
text-decoration: underline;
}

/* استایل‌های فهرست مطالب (Table of Contents) */
.toc {
background-color: #e0f2f1; /* پس‌زمینه سبز بسیار روشن */
border-radius: 8px;
padding: 20px 25px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.toc h2 {
color: #004d40;
border-right: none;
padding-right: 0;
text-align: center; /* عنوان فهرست مطالب در وسط */
margin-top: 0;
margin-bottom: 15px;
font-size: 1.8em;
}

.toc ul {
list-style: none;
padding: 0;
}

.toc li {
margin-bottom: 10px;
font-size: 1.1em;
}

.toc li a {
display: block; /* لینک‌ها به صورت بلوک برای کلیک‌پذیری بهتر */
padding: 8px 12px;
background-color: #c8e6c9; /* پس‌زمینه سبز روشن برای آیتم‌های فهرست */
border-radius: 6px;
transition: background-color 0.3s ease;
color: #004d40;
text-align: right;
}

.toc li a:hover {
background-color: #a5d6a7; /* تیره شدن پس‌زمینه هنگام هاور */
text-decoration: none;
}

/* استایل‌های جدول استاندارد */
table {
width: 100%;
border-collapse: collapse; /* حذف خطوط اضافی بین سلول‌ها */
margin: 25px 0;
font-size: 1.05em;
text-align: right;
}

th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}

th {
background-color: #e0f7fa; /* آبی روشن برای هدر جدول */
color: #004d40;
font-weight: bold;
}

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

tr:hover {
background-color: #f1f8e9; /* تغییر رنگ ردیف هنگام هاور */
}

/* استایل‌های اینفوگرافیک – جریان فرآیند */
.infographic-flow {
display: flex;
flex-wrap: wrap; /* اجازه شکستن آیتم‌ها به خط بعدی در صفحات کوچک */
justify-content: center;
gap: 20px; /* فاصله بین آیتم‌ها */
margin: 40px 0;
position: relative;
}

.flow-step {
background-color: #e0f2f7; /* آبی بسیار روشن */
border: 1px solid #b2ebf2;
border-radius: 10px;
padding: 25px;
flex: 1; /* اجازه رشد آیتم‌ها */
min-width: 250px; /* حداقل عرض قبل از شکستن */
max-width: 30%; /* حداکثر عرض در صفحات بزرگتر */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
text-align: center;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flow-step:hover {
transform: translateY(-5px); /* حرکت به بالا هنگام هاور */
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.flow-step h4 {
color: #006064; /* سبز تیره */
font-size: 1.4em;
margin-top: 0;
margin-bottom: 15px;
border-bottom: 2px solid #00acc1; /* خط زیرین برای عنوان مرحله */
padding-bottom: 10px;
}

.flow-step p {
font-size: 1em;
color: #444;
text-align: center;
}

.flow-step:not(:last-child)::after {
content: ‘←’; /* فلش یونیکد برای نشان دادن جریان (از راست به چپ) */
position: absolute;
left: -30px; /* موقعیت فلش در سمت چپ جعبه */
top: 50%;
transform: translateY(-50%);
font-size: 3em;
color: #00acc1;
display: block;
font-weight: 100;
line-height: 1;
opacity: 0.7;
}

/* بخش پرسش‌های متداول (FAQ) */
.faq-item {
margin-bottom: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}

.faq-question {
background-color: #f0f4c3; /* سبز-زرد روشن */
padding: 15px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
color: #333;
font-size: 1.1em;
transition: background-color 0.3s ease;
}

.faq-question:hover {
background-color: #e6ee9c;
}

.faq-answer {
background-color: #ffffff;
padding: 15px 20px;
border-top: 1px solid #eee;
display: none; /* پاسخ‌ها به طور پیش‌فرض پنهان هستند */
font-size: 1.05em;
color: #555;
}

.faq-item.active .faq-answer {
display: block; /* نمایش پاسخ هنگام فعال شدن آیتم */
}

.faq-item.active .faq-question span::before {
content: ‘−’; /* تغییر علامت به منفی هنگام فعال شدن */
}

.faq-question span::before {
content: ‘+’; /* علامت مثبت به طور پیش‌فرض */
font-size: 1.2em;
margin-left: 10px;
transition: transform 0.3s ease;
}

/* جعبه اطلاعاتی */
.info-box {
background-color: #e3f2fd; /* آبی بسیار روشن */
border-right: 5px solid #2196f3; /* خط آبی در سمت راست */
padding: 20px;
margin: 25px 0;
border-radius: 8px;
font-size: 1.05em;
color: #3f51b5; /* متن آبی تیره */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
display: flex;
align-items: flex-start;
gap: 15px;
}
.info-box strong {
color: #1a237e;
}
.info-box .icon {
font-size: 2.5em;
color: #2196f3;
line-height: 1;
margin-top: 5px;
}

/* جعبه فراخوان اقدام / نتیجه‌گیری */
.cta-box {
background-color: #dcedc8; /* سبز روشن */
border-right: 5px solid #8bc34a; /* خط سبز در سمت راست */
padding: 25px;
margin: 40px 0;
border-radius: 10px;
text-align: center;
font-size: 1.2em;
color: #33691e; /* متن سبز تیره */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.cta-box strong {
color: #1b5e20;
}

/* تنظیمات پاسخگویی (Responsive) */
@media (max-width: 768px) {
.container {
margin: 10px auto;
padding: 15px;
}
h1 { font-size: 2.2em; padding-bottom: 10px; }
h2 { font-size: 1.8em; padding-right: 10px; }
h3 { font-size: 1.5em; padding-right: 8px; }
p, li, .toc li, table, th, td, .faq-question, .faq-answer, .info-box, .cta-box {
font-size: 1em;
}
.flow-step {
max-width: 95%; /* تک ستون در موبایل */
margin-bottom: 40px; /* فاصله بیشتر بین مراحل */
}
.flow-step:not(:last-child)::after {
left: 50%;
bottom: -35px; /* موقعیت فلش در پایین جعبه */
transform: translateX(-50%) rotate(90deg); /* چرخش فلش به سمت پایین */
font-size: 2.5em;
top: unset; /* حذف تاپ */
}
.flow-step:last-child {
margin-bottom: 0;
}
}

@media (max-width: 480px) {
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
.toc h2 { font-size: 1.5em; }
.flow-step {
padding: 15px;
}
.info-box, .cta-box {
padding: 15px;
flex-direction: column; /* چینش عمودی در موبایل */
align-items: center;
text-align: center;
}
.info-box .icon {
margin-bottom: 10px;
}
.faq-question {
padding: 12px 15px;
font-size: 1em;
}
.faq-answer {
padding: 12px 15px;
}
}

/* استایل برای آیکون‌ها (استفاده از کاراکترهای یونیکد برای نمایش بصری) */
.icon-idea::before { content: “💡”; margin-left: 8px; }
.icon-search::before { content: “🔍”; margin-left: 8px; }
.icon-gear::before { content: “⚙️”; margin-left: 8px; }
.icon-chart::before { content: “📊”; margin-left: 8px; }
.icon-check::before { content: “✅”; margin-left: 8px; }
.icon-question::before { content: “❓”; margin-left: 8px; }
.icon-info::before { content: “ℹ️”; margin-left: 8px; }
.icon-shield::before { content: “🛡️”; margin-left: 8px; }
.icon-bulb::before { content: “💡”; margin-left: 8px; }

// جاوااسکریپت برای قابلیت باز و بسته شدن سوالات متداول (FAQ)
document.addEventListener(‘DOMContentLoaded’, function() {
const faqQuestions = document.querySelectorAll(‘.faq-question’);

faqQuestions.forEach(question => {
question.addEventListener(‘click’, () => {
const parentItem = question.closest(‘.faq-item’);
parentItem.classList.toggle(‘active’);
});
});
});

// اسکرول نرم برای لینک‌های فهرست مطالب (اختیاری، اما تجربه کاربری را بهبود می‌بخشد)
document.querySelectorAll(‘.toc a’).forEach(anchor => {
anchor.addEventListener(‘click’, function (e) {
e.preventDefault();
document.querySelector(this.getAttribute(‘href’)).scrollIntoView({
behavior: ‘smooth’
});
});
});