/*
** استایل‌های کلی برای بهبود خوانایی و ریسپانسیو بودن **
این استایل‌ها به گونه‌ای طراحی شده‌اند که در ویرایشگر بلوک به خوبی عمل کنند و نمایش زیبا و یکپارچه‌ای داشته باشند.
*/
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* فونت رایج و خوانا */
line-height: 1.7; /* فاصله خطوط مناسب برای خوانایی */
color: #333333; /* رنگ متن اصلی (خاکستری تیره) */
background-color: #f9f9f9; /* رنگ پس‌زمینه کلی (خاکستری روشن) */
margin: 0;
padding: 0;
direction: rtl; /* برای زبان فارسی */
text-align: right; /* تراز متن به راست */
}

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

/*
** استایل‌های ریسپانسیو برای موبایل، تبلت و لپ‌تاپ **
*/
@media (max-width: 768px) {
.container {
padding: 15px; /* فضای داخلی کمتر در موبایل */
margin: 0 10px; /* حاشیه کمتر در کناره‌ها */
border-radius: 8px;
}
h1 { font-size: 2.2em !important; margin-bottom: 20px !important; }
h2 { font-size: 1.8em !important; margin-top: 30px !important; }
h3 { font-size: 1.4em !important; margin-top: 25px !important; }

/* ریسپانسیو کردن جدول */
table {
display: block;
width: 100%;
overflow-x: auto; /* اسکرول افقی برای جدول در صفحات کوچک */
-webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
white-space: nowrap; /* جلوگیری از شکستن کلمات در سلول‌ها */
}
table thead, table tbody, table th, table td, table tr {
display: block; /* سلول‌های جدول را روی هم قرار می‌دهد */
}
table tr {
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
white-space: normal; /* اجازه شکستن کلمات در ردیف */
}
table td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50% !important; /* فضا برای لیبل pseudo-element */
text-align: right;
white-space: normal;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
position: absolute;
right: 6px; /* موقعیت لیبل در راست */
width: 45%;
padding-left: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
content: attr(data-label); /* استفاده از data-label برای نمایش عنوان ستون */
color: #0056B3;
}

/* ریسپانسیو کردن اینفوگرافیک */
.infographic-grid {
display: flex; /* تغییر به فلکس باکس */
flex-direction: column; /* چینش ستونی */
gap: 15px;
}
.infographic-item {
padding: 15px;
}
}

/*
** استایل‌بندی هدینگ‌ها **
*/
h1 {
font-size: 3em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 800; /* بسیار ضخیم */
color: #0056B3; /* آبی عمیق و حرفه‌ای */
margin-top: 0;
margin-bottom: 30px;
text-align: center;
line-height: 1.3;
padding-bottom: 10px;
border-bottom: 3px solid #0056B3;
}
h2 {
font-size: 2.2em;
font-weight: 700; /* ضخیم */
color: #0056B3; /* آبی عمیق */
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #e0e0e0; /* خط زیرین ملایم */
}
h3 {
font-size: 1.7em;
font-weight: 600; /* نیمه‌ضخیم */
color: #007bff; /* آبی روشن‌تر */
margin-top: 35px;
margin-bottom: 18px;
}

/*
** استایل‌بندی پاراگراف‌ها، لیست‌ها و لینک‌ها **
*/
p {
margin-bottom: 1.2em;
text-align: justify; /* تراز دوطرفه */
line-height: 1.8;
}
ul {
list-style-type: disc; /* نقطه برای لیست‌ها */
padding-right: 30px; /* فاصله از راست برای لیست‌ها */
margin-bottom: 1.5em;
}
ol {
padding-right: 30px;
margin-bottom: 1.5em;
}
li {
margin-bottom: 0.8em;
text-align: justify;
line-height: 1.6;
}
a {
color: #007bff; /* رنگ آبی برای لینک‌ها */
text-decoration: none; /* بدون خط زیر لینک */
font-weight: 500;
}
a:hover {
text-decoration: underline; /* خط زیرین هنگام هاور */
color: #0056B3;
}

/*
** استایل‌بندی دکمه Call to Action (CTA) **
*/
.cta-button {
display: block; /* به صورت بلوک برای اشغال عرض کامل */
width: fit-content; /* عرض متناسب با محتوا */
margin: 35px auto; /* مرکز قرار گرفتن با حاشیه بالا و پایین */
padding: 16px 32px;
background-color: #28A745; /* سبز پررنگ و جذاب */
color: white;
text-align: center;
font-size: 1.3em;
font-weight: bold;
border-radius: 10px;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.2s ease; /* انیمیشن نرم */
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4); /* سایه برای برجسته‌سازی */
}
.cta-button:hover {
background-color: #218838; /* تغییر رنگ در هاور */
transform: translateY(-3px); /* حرکت به بالا در هاور */
text-decoration: none;
}

/*
** استایل‌بندی بلوک‌های اطلاعاتی و هایلایت **
*/
.info-box {
background-color: #e0f7fa; /* آبی روشن برای باکس اطلاعات */
border-right: 6px solid #00acc1; /* نوار کناری آبی فیروزه‌ای */
padding: 20px 25px;
margin: 30px 0;
border-radius: 8px;
font-style: italic;
color: #006064;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.highlight-box {
background-color: #fffde7; /* زرد روشن برای هایلایت */
border: 1px solid #ffeb3b; /* نوار زرد */
padding: 18px 25px;
margin: 30px 0;
border-radius: 8px;
font-weight: 500;
color: #fbc02d;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.section-divider {
border-top: 1px dashed #e0e0e0; /* خط جداکننده نقطه‌چین */
margin: 60px 0;
}

/*
** استایل‌بندی اینفوگرافیک (شبیه‌سازی) **
*/
.infographic-block {
background-color: #e8f5e9; /* پس‌زمینه سبز روشن */
border: 2px solid #4caf50; /* نوار سبز */
border-radius: 15px;
padding: 30px;
margin: 40px 0;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.infographic-block h3 {
color: #2e7d32; /* سبز تیره برای عنوان اینفوگرافیک */
font-size: 2em;
font-weight: 700;
margin-top: 0;
margin-bottom: 25px;
}
.infographic-block p {
font-size: 1.1em;
color: #555;
margin-bottom: 30px;
}
.infographic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* ستون‌های انعطاف‌پذیر */
gap: 25px; /* فاصله بین آیتم‌ها */
}
.infographic-item {
background-color: #ffffff;
border: 1px solid #d4edda;
border-radius: 12px;
padding: 20px;
text-align: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.07);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.infographic-item:hover {
transform: translateY(-7px); /* حرکت به بالا هنگام هاور */
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.infographic-icon {
font-size: 3em; /* سایز بزرگ برای آیکون‌ها */
color: #4caf50; /* سبز برای آیکون‌ها */
margin-bottom: 15px;
display: block; /* برای اینکه margin-bottom درست عمل کند */
}
.infographic-item h4 {
font-size: 1.3em;
color: #388e3c;
margin: 0 0 10px 0;
font-weight: 600;
}
.infographic-item p {
font-size: 1em;
color: #666;
text-align: center;
margin-bottom: 0;
line-height: 1.6;
}

/*
** استایل‌بندی بخش سوالات متداول (FAQ) **
*/
.faq-container {
margin-top: 50px;
border-top: 2px solid #e0e0e0;
padding-top: 25px;
}
.faq-item {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 10px;
margin-bottom: 18px;
overflow: hidden;
box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
.faq-question {
padding: 18px 25px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5; /* پس‌زمینه کمی تیره‌تر */
font-weight: bold;
color: #0056B3;
font-size: 1.15em;
transition: background-color 0.3s ease;
}
.faq-question:hover {
background-color: #ececec;
}
.faq-answer {
padding: 15px 25px;
background-color: #fcfcfc;
border-top: 1px solid #e5e5e5;
display: none; /* به صورت پیش‌فرض مخفی */
text-align: justify;
line-height: 1.7;
color: #444;
}
.faq-toggle-icon {
font-size: 1.3em;
transition: transform 0.3s ease;
color: #007bff;
}
.faq-item.active .faq-toggle-icon {
transform: rotate(180deg); /* چرخش آیکون در حالت فعال */
}

/*
** استایل‌بندی جدول برای دسکتاپ **
*/
@media (min-width: 769px) {
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.07);
border-radius: 10px;
overflow: hidden; /* برای اعمال border-radius به جدول */
}
table thead {
background-color: #0056B3; /* آبی عمیق برای سربرگ جدول */
color: white;
}
table th, table td {
border: 1px solid #e0e0e0;
padding: 15px 20px;
text-align: right;
}
table th {
font-weight: bold;
font-size: 1.1em;
}
table tbody tr:nth-child(even) {
background-color: #f7f7f7; /* رنگ متناوب برای ردیف‌ها */
}
table tbody tr:hover {
background-color: #eef8ff; /* تغییر رنگ در هاور */
}
}

document.addEventListener(‘DOMContentLoaded’, function() {
const faqQuestions = document.querySelectorAll(‘.faq-question’);

faqQuestions.forEach(question => {
question.addEventListener(‘click’, () => {
const faqItem = question.closest(‘.faq-item’);
const answer = faqItem.querySelector(‘.faq-answer’);
const icon = question.querySelector(‘.faq-toggle-icon’); // icon is inside question

// Toggle active class on the parent item
faqItem.classList.toggle(‘active’);

// Toggle visibility of the answer with a smooth transition if possible
if (answer.style.display === ‘block’) {
answer.style.display = ‘none’;
icon.textContent = ‘▼’; // Down arrow
} else {
answer.style.display = ‘block’;
icon.textContent = ‘▲’; // Up arrow
}
});
});
});