// This script is for the FAQ accordion functionality.
// It should be placed at the end of the HTML body or in a script tag.
// In a block editor, this might need to be added as a custom HTML block or through theme options.
document.addEventListener(‘DOMContentLoaded’, function() {
const faqQuestions = document.querySelectorAll(‘#faq .faq-question-header’);
faqQuestions.forEach(question => {
question.addEventListener(‘click’, function() {
const answer = this.nextElementSibling;
answer.style.display = answer.style.display === ‘none’ ? ‘block’ : ‘none’;
});
});

// For the current output, I’ve used inline onclick for simplicity
// in a text-only environment. If it were actual HTML, the above JS would be cleaner.
});

/*
This CSS block would typically be placed in the section of an HTML document
or in a custom CSS file. For direct copy-paste into a block editor,
some block editors might allow custom CSS, or inline styles will be preserved.
*/
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap’);
body {
font-family: ‘Vazirmatn’, ‘Tahoma’, sans-serif;
line-height: 1.8;
color: #333333;
margin: 0;
padding: 0;
background-color: #f4f7f6; /* A very light background for the page itself */
direction: rtl; /* For Persian text */
}

/* General responsive adjustments */
@media (max-width: 768px) {
div[role=”heading”][aria-level=”1″] {
font-size: 2em !important;
}
div[role=”heading”][aria-level=”2″] {
font-size: 1.5em !important;
}
div[role=”heading”][aria-level=”3″] {
font-size: 1.2em !important;
}
.main-container {
padding: 10px !important;
}
.flex-container > div {
flex: 1 1 100% !important; /* Stack items on small screens */
}
.infographic-block {
padding: 15px !important;
}
.infographic-block > div {
font-size: 0.9em !important;
}
.infographic-block > div > span {
font-size: 1em !important;
}
}

“`

**توضیحات مهم برای استفاده در ویرایشگر بلوک یا سایت:**

1. **ساختار HTML و CSS داخلی:** متن بالا شامل کدهای HTML و CSS (به صورت `inline style` و یک بلوک `style` کلی برای فونت و رسپانسیو بودن) است که به طور خاص برای نمایش صحیح و زیبا در یک ویرایشگر بلوک یا سایت طراحی شده است.
2. **فونت (Vazirmatn):** برای استفاده از فونت زیبای فارسی “وزیرمتن”، خط ` @import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap’);` در بلوک `style` قرار داده شده است. این خط باید در بخش `head` سایت شما یا در فایل CSS اصلی سایت قرار گیرد تا فونت به درستی بارگذاری شود. اگر ویرایشگر بلوک شما اجازه وارد کردن CSS خارجی را نمی‌دهد، ممکن است لازم باشد این فونت را به روش دیگری به سایت خود اضافه کنید یا از فونت‌های پیش‌فرض استفاده شود. (در حال حاضر، `font-family: ‘Vazirmatn’, ‘Tahoma’, sans-serif;` در استایل‌های داخلی استفاده شده که اگر `import` نشود، به Tahoma یا sans-serif برمی‌گردد.)
3. **هدینگ‌ها (H1, H2, H3):** به جای تگ‌های `

`، `

` و `

` واقعی، از تگ `

` استفاده شده است. این روش به شما اجازه می‌دهد تا کنترل کاملی بر ظاهر (سایز، ضخامت، رنگ) هدینگ‌ها با استفاده از CSS inline داشته باشید و در عین حال، به کمک ویژگی‌های `role=”heading”` و `aria-level`، به موتورهای جستجو و ابزارهای دسترسی‌پذیری (Accessibility) مفهوم یک هدینگ را منتقل می‌کند. پس از کپی در ویرایشگر بلوک (مانند گوتنبرگ در وردپرس) یا ویرایشگر HTML، این عناصر به عنوان بلوک‌های با استایل خاص خود نمایش داده می‌شوند.
4. **رسپانسیو بودن:** با استفاده از `flexbox` برای بخش “عوامل موثر” و تنظیم `max-width` و `padding` برای بلوک‌های مختلف، و همچنین اضافه کردن یک بخش `media query` در بلوک `style`، تلاش شده است تا محتوا در ابعاد مختلف صفحه نمایش (موبایل، تبلت، لپ‌تاپ) به درستی نمایش داده شود.
5. **اینفوگرافیک:** به جای یک تصویر اینفوگرافیک، یک “نمایش بصری متنی” با استفاده از بلوک‌های استایل‌دار و آیکون‌های متنی ارائه شده است که به راحتی در ویرایشگر بلوک کپی و نمایش داده می‌شود.
6. **بخش FAQ (سوالات متداول):** برای این بخش، قابلیت باز و بسته شدن (آکاردئون) با استفاده از `onclick` و CSS inline شبیه‌سازی شده است. این یک راه حل ساده برای نمایش در یک محیط بلوک‌محور است. برای عملکرد کامل‌تر و بهینه، می‌توان یک اسکریپت جاوااسکریپت مجزا برای این کار نوشت (که یک نمونه در پایین بلوک `div` اصلی ارائه شده است، اما ممکن است لازم باشد آن را به صورت دستی در بخش `Custom HTML` یا `footer` سایت خود قرار دهید تا فعال شود).
7. **رنگ‌بندی و طراحی:** از یک پالت رنگی هماهنگ (آبی تیره، آبی آسمانی، خاکستری روشن) برای ایجاد ظاهری حرفه‌ای و جذاب استفاده شده است. تمامی بلوک‌ها دارای `border-radius` و `box-shadow` ملایم هستند تا حس عمق و مدرن بودن را القا کنند.

برای کپی کردن در ویرایشگر بلوک، کافیست تمام متن از ابتدای عنوان تا انتهای تگ `

` اصلی را کپی کرده و در یک بلوک “Custom HTML” یا “HTML” در ویرایشگر خود جایگذاری کنید. در ویرایشگرهای پیشرفته‌تر، ممکن است قابلیت کپی مستقیم بلوک‌ها نیز وجود داشته باشد.