/* این بخش برای اطمینان از نمایش صحیح هدینگ‌ها در ویرایشگرهای بلوک یا کلاسیک است */
/* لطفا پس از کپی در محیط ویرایشگر وب‌سایت، این استایل‌ها را به فایل CSS سایت خود منتقل کنید */

/* استایل دهی عمومی برای پاسخگویی به دستگاه‌های مختلف */
body {
font-family: ‘Vazirmatn’, sans-serif; /* یا هر فونت فارسی خوانا */
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
background-color: #fdfdfd;
}

.font-size-2-5em {
font-size: 2.5em;
}
.font-size-2em {
font-size: 2em;
}
.font-size-1-8em {
font-size: 1.8em;
}
.font-size-1-5em {
font-size: 1.5em;
}
.font-size-1-3em {
font-size: 1.3em;
}
.font-size-1-1em {
font-size: 1.1em;
}

/* هدینگ‌ها */
h1 {
font-size: 2.5em; /* سایز بزرگتر برای عنوان اصلی */
font-weight: bold;
text-align: center;
color: #0056b3; /* رنگ آبی تیره برای برجسته‌سازی */
margin-bottom: 30px;
}

h2 {
font-size: 2em; /* سایز متوسط برای بخش‌های اصلی */
font-weight: bold;
color: #0056b3;
margin-top: 40px;
margin-bottom: 20px;
border-bottom: 2px solid #e0f2f7; /* خط زیرین برای زیبایی */
padding-bottom: 10px;
}

h3 {
font-size: 1.5em; /* سایز کوچکتر برای زیربخش‌ها */
font-weight: bold;
color: #0069d9;
margin-top: 30px;
margin-bottom: 15px;
}

p {
margin-bottom: 15px;
text-align: justify;
}

ul {
list-style-type: disc;
margin-left: 20px;
margin-bottom: 15px;
padding: 0;
}

ol {
list-style-type: decimal;
margin-left: 25px;
margin-bottom: 15px;
padding: 0;
}

li {
margin-bottom: 8px;
}

a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: #0056b3;
text-decoration: underline;
}

/* استایل دهی جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 0.95em;
direction: rtl; /* برای نمایش صحیح فارسی در جدول */
}

caption {
caption-side: top;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
color: #0056b3;
font-size: 1.1em;
}

th, td {
padding: 12px;
border: 1px solid #ddd;
text-align: right; /* برای راست‌چین کردن محتوای جدول */
}

thead {
background-color: #007bff;
color: white;
}

tbody tr:nth-child(odd) {
background-color: #f8f9fa;
}

tbody tr:nth-child(even) {
background-color: #e9ecef;
}

/* استایل برای بلوک جایگزین اینفوگرافیک */
.infographic-alt {
background-color: #e6f7ff;
padding: 25px;
border-radius: 10px;
border: 1px solid #b3e0ff;
margin-bottom: 30px;
}
.infographic-alt .title {
font-size: 1.4em;
font-weight: bold;
color: #0056b3;
text-align: center;
margin-bottom: 20px;
}
.infographic-alt ol li {
margin-bottom: 15px;
}
.infographic-alt ol li div {
font-weight: bold;
color: #007bff;
font-size: 1.1em;
}
.infographic-alt ol li p {
margin-left: 10px;
margin-top: 5px;
color: #555;
}

/* استایل برای بلوک‌های حوزه‌های کلیدی */
.key-area-block {
flex: 1 1 calc(50% – 20px);
min-width: 280px;
background-color: #f0f8ff; /* رنگ پس‌زمینه متفاوت */
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-left: 3px solid; /* رنگ این خط برای هر بلوک متفاوت است */
}

/* Media Queries برای ریسپانسیو بودن */
@media (max-width: 768px) {
h1 {
font-size: 2em;
margin-bottom: 20px;
}
h2 {
font-size: 1.6em;
margin-top: 30px;
margin-bottom: 15px;
}
h3 {
font-size: 1.3em;
margin-top: 20px;
margin-bottom: 10px;
}
.key-area-block {
flex: 1 1 100%; /* در موبایل هر بلوک تمام عرض را بگیرد */
}
.main-content-wrapper {
padding: 15px;
}
.infographic-alt {
padding: 15px;
}
.infographic-alt .title {
font-size: 1.2em;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
p, ul, ol, table {
font-size: 0.9em;
}
th, td {
padding: 8px;
}
}

/* برای تلوزیون و صفحات بزرگتر */
@media (min-width: 1200px) {
.main-content-wrapper {
max-width: 1000px; /* حداکثر عرض برای خوانایی بهتر در صفحات بزرگ */
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}
p, ul, ol, table {
font-size: 1.1em;
}
}

// این اسکریپت برای تبدیل Div های شبیه ساز هدینگ به تگ‌های هدینگ واقعی H1, H2, H3
// و همچنین افزودن شناسه (id) به هدینگ‌ها برای فهرست مطالب (Table of Contents) استفاده می‌شود.
// بعد از کپی در سایت و فعال‌سازی این اسکریپت، ساختار HTML بهینه خواهد شد.
document.addEventListener(‘DOMContentLoaded’, function() {
const mainContentDiv = document.querySelector(‘.main-content-wrapper’); // یا هر Selector که کل محتوا را شامل شود

if (mainContentDiv) {
// تبدیل div با استایل H1 به تگ H1 واقعی
const mainTitleDiv = mainContentDiv.querySelector(‘div[style*=”font-size: 2.5em;”]’);
if (mainTitleDiv) {
const h1 = document.createElement(‘h1’);
h1.innerHTML = mainTitleDiv.innerHTML;
h1.setAttribute(‘id’, ‘main-title’); // افزودن ID
h1.className = mainTitleDiv.className; // حفظ کلاس‌ها
mainTitleDiv.parentNode.replaceChild(h1, mainTitleDiv);
}

// تبدیل div با استایل H2 به تگ H2 واقعی و اضافه کردن ID
mainContentDiv.querySelectorAll(‘div[style*=”font-size: 2em;”]’).forEach((div, index) => {
const h2 = document.createElement(‘h2’);
h2.innerHTML = div.innerHTML;
h2.setAttribute(‘id’, div.id || ‘section-‘ + (index + 1)); // استفاده از ID موجود یا ساخت ID جدید
h2.className = div.className;
div.parentNode.replaceChild(h2, div);
});

// تبدیل div با استایل H3 به تگ H3 واقعی و اضافه کردن ID
mainContentDiv.querySelectorAll(‘div[style*=”font-size: 1.5em;”]’).forEach((div, index) => {
const h3 = document.createElement(‘h3’);
h3.innerHTML = div.innerHTML;
h3.setAttribute(‘id’, div.id || ‘subsection-‘ + (index + 1));
h3.className = div.className;
div.parentNode.replaceChild(h3, div);
});

// به‌روزرسانی لینک‌های فهرست مطالب برای ارجاع به IDهای صحیح
const tocLinks = document.querySelectorAll(‘.toc-list a’);
tocLinks.forEach(link => {
const href = link.getAttribute(‘href’);
if (href && href.startsWith(‘#’)) {
const targetId = href.substring(1);
const targetElement = document.getElementById(targetId);
if (!targetElement) {
console.warn(`Target element with ID “${targetId}” not found for TOC link.`);
}
}
});
}
});