/*
*——————————————————————————————————————–
* شروع استایل‌های سفارشی برای نمایش بهینه در ویرایشگر بلوک و ریسپانسیو بودن
* این استایل‌ها به گونه‌ای طراحی شده‌اند که پس از کپی در ویرایشگر بلوک (مانند گوتنبرگ وردپرس) به درستی اعمال شوند.
* همچنین، طراحی واکنش‌گرا (Responsive) برای نمایش صحیح در موبایل، تبلت، لپ‌تاپ و حتی تلویزیون در نظر گرفته شده است.
*——————————————————————————————————————–
*/

/* Base Styles: تنظیمات عمومی برای فونت، رنگ متن، پس‌زمینه و جهت‌دهی (برای زبان فارسی) */
.container {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* فونت‌های خوانا و رایج */
line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
color: #333; /* رنگ متن اصلی */
background-color: #fcfcfc; /* پس‌زمینه کلی مقاله */
margin: 20px auto; /* فاصله از لبه‌ها و قرارگیری در مرکز */
padding: 20px 25px; /* پدینگ داخلی */
max-width: 850px; /* حداکثر عرض مقاله برای خوانایی مطلوب */
border-radius: 10px; /* گوشه‌های گرد برای زیبایی */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); /* سایه ظریف برای عمق بخشیدن */
direction: rtl; /* جهت متن از راست به چپ */
text-align: right; /* تراز متن به راست */
}

/* Headings: استایل‌های اختصاصی برای تیترها (H1, H2, H3) */
h1 {
font-size: 2.6rem; /* اندازه بزرگ برای تیتر اصلی */
font-weight: 800; /* بسیار پررنگ */
color: #0d47a1; /* آبی تیره و عمیق */
margin-bottom: 1.8rem;
text-align: center; /* تیتر اصلی در مرکز */
border-bottom: 4px solid #0d47a1; /* خط زیرین آبی تیره */
padding-bottom: 18px;
line-height: 1.3;
}
h2 {
font-size: 2rem; /* اندازه مناسب برای تیترهای بخش اصلی */
font-weight: 700; /* پررنگ */
color: #1a237e; /* آبی نفتی */
margin-top: 3rem; /* فاصله بالا */
margin-bottom: 1.5rem; /* فاصله پایین */
border-right: 6px solid #42a5f5; /* نوار آبی روشن در سمت راست */
padding-right: 18px; /* پدینگ برای فاصله از نوار */
line-height: 1.4;
}
h3 {
font-size: 1.5rem; /* اندازه برای تیترهای فرعی */
font-weight: 600; /* نیمه‌پررنگ */
color: #283593; /* آبی تیره کمی روشن‌تر */
margin-top: 2.5rem;
margin-bottom: 1rem;
padding-right: 12px;
border-right: 4px solid #90caf9; /* نوار آبی روشن‌تر در سمت راست */
line-height: 1.5;
}

/* Paragraphs and Text: تنظیمات برای پاراگراف‌ها، لینک‌ها و لیست‌ها */
p {
margin-bottom: 1.2rem;
font-size: 1.08rem;
color: #444;
}
a {
color: #1976d2; /* رنگ آبی برای لینک‌ها */
text-decoration: none; /* بدون خط زیر لینک */
transition: color 0.3s ease; /* انیمیشن تغییر رنگ */
}
a:hover {
text-decoration: underline; /* خط زیرین هنگام هاور */
color: #0d47a1;
}
strong {
font-weight: 700; /* پررنگ‌تر برای متن‌های مهم */
color: #212121;
}
ul, ol {
margin-bottom: 1.5rem;
padding-right: 30px; /* پدینگ برای لیست‌ها */
list-style-position: outside; /* موقعیت بولت/عدد لیست */
font-size: 1.05rem;
color: #555;
}
ul li, ol li {
margin-bottom: 0.8rem;
line-height: 1.7;
}
ul { list-style-type: ‘• ‘; } /* بولت‌های سفارشی برای ul */
ol { list-style-type: decimal; } /* شماره‌گذاری برای ol */

/* Table of Contents (فهرست مطالب): استایل‌دهی ویژه برای فهرست مطالب در ابتدای مقاله */
.toc {
background-color: #e3f2fd; /* پس‌زمینه آبی بسیار روشن */
border: 1px solid #bbdefb; /* بوردر آبی روشن */
border-radius: 8px;
padding: 25px;
margin-bottom: 3rem;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); /* سایه ظریف‌تر */
}
.toc h3 {
color: #1a237e;
margin-top: 0;
margin-bottom: 1.2rem;
border-right: none;
padding-right: 0;
text-align: center;
font-size: 1.6rem;
font-weight: 700;
}
.toc ul {
list-style: none; /* حذف بولت پیش‌فرض */
padding: 0;
margin: 0;
}
.toc ul li {
margin-bottom: 0.9rem;
font-size: 1.15rem;
border-bottom: 1px dashed #cfd8dc; /* خط چین جداکننده */
padding-bottom: 0.7rem;
padding-right: 0;
}
.toc ul li:last-child {
border-bottom: none; /* حذف خط چین برای آخرین آیتم */
padding-bottom: 0;
}
.toc ul li a {
color: #283593;
font-weight: 500;
display: block; /* برای پوشش کامل ناحیه کلیک */
padding: 8px 10px;
border-radius: 5px;
transition: all 0.3s ease;
}
.toc ul li a:hover {
color: #0d47a1;
text-decoration: none;
background-color: #e0f2f7; /* پس‌زمینه هنگام هاور */
transform: translateX(-5px); /* جابجایی افقی جزئی */
}

/* Table Styles: استایل‌دهی برای جدول آموزشی */
table {
width: 100%;
border-collapse: collapse; /* ادغام بوردرها */
margin: 2.5rem 0;
font-size: 1rem;
background-color: #f8f8f8; /* پس‌زمینه جدول */
border-radius: 10px;
overflow: hidden; /* برای اعمال گوشه‌های گرد */
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
th, td {
padding: 18px 22px;
border: 1px solid #e0e0e0; /* بوردر سلول‌ها */
text-align: right;
}
th {
background-color: #bbdefb; /* هدر آبی روشن */
color: #1a237e; /* متن آبی نفتی */
font-weight: 700;
font-size: 1.15rem;
}
tr:nth-child(even) {
background-color: #fefefe; /* رنگ متناوب برای ردیف‌های زوج */
}
tr:hover {
background-color: #e8f5e9; /* پس‌زمینه سبز روشن هنگام هاور */
cursor: pointer;
}

/* Infographic Alternative (شبه اینفوگرافیک): طراحی بصری برای نمایش انواع ویرایش */
.infographic-block {
display: flex;
flex-direction: column; /* چینش عمودی آیتم‌ها */
gap: 30px; /* فاصله بین آیتم‌ها */
margin: 3.5rem 0;
padding: 25px;
background-color: #fdfefe;
border: 2px solid #a7d9e2; /* بوردر آبی فیروزه‌ای */
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.infographic-item {
background-color: #e0f7fa; /* پس‌زمینه آبی فیروزه‌ای روشن */
padding: 25px 30px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.09);
position: relative;
text-align: right;
border-right: 8px solid #00acc1; /* نوار فیروزه‌ای پررنگ در سمت راست */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infographic-item:hover {
transform: translateY(-5px); /* حرکت به بالا هنگام هاور */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.infographic-item::before {
content: attr(data-icon); /* استفاده از ویژگی data-icon برای محتوای بصری */
position: absolute;
left: -18px; /* موقعیت آیکون */
top: 50%;
transform: translateY(-50%) rotateY(180deg); /* چرخش برای RTL */
background-color: #00acc1;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%; /* دایره‌ای کردن آیکون */
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.3rem;
box-shadow: 0 3px 8px rgba(0,0,0,0.3);
z-index: 1; /* اطمینان از نمایش روی بقیه عناصر */
}
.infographic-item h4 {
color: #00796b; /* رنگ سبزآبی برای تیتر آیکون */
font-size: 1.4rem;
margin-top: 0;
margin-bottom: 0.9rem;
font-weight: 700;
padding-right: 20px; /* فاصله برای آیکون */
}
.infographic-item p {
font-size: 1.05rem;
color: #333;
margin-bottom: 0;
}

/* FAQ Section (سوالات متداول): بخش آکاردئونی برای سوالات و پاسخ‌ها */
.faq-section {
margin-top: 3.5rem;
border-top: 2px solid #e0e0e0;
padding-top: 2.5rem;
}
.faq-item {
background-color: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 10px;
margin-bottom: 1.8rem;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
overflow: hidden; /* برای مخفی کردن محتوا در حالت collapsed */
}
.faq-question {
padding: 20px 30px;
font-size: 1.2rem;
font-weight: 600;
color: #1a237e;
cursor: pointer; /* نشانگر ماوس به حالت دست */
position: relative;
background-color: #eef7fc; /* پس‌زمینه سوال */
transition: background-color 0.3s ease;
}
.faq-question:hover {
background-color: #e0f2f7; /* پس‌زمینه هنگام هاور */
}
.faq-question::after {
content: ‘➕’; /* آیکون پلاس برای سوالات بسته */
position: absolute;
left: 25px;
top: 50%;
transform: translateY(-50%);
font-size: 1.4rem;
color: #42a5f5;
transition: transform 0.3s ease;
}
.faq-answer {
padding: 0 30px 25px;
font-size: 1.08rem;
color: #555;
max-height: 0; /* مخفی کردن پاسخ با انیمیشن */
overflow: hidden;
transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}
.faq-item.active .faq-answer {
max-height: 200px; /* ارتفاع برای نمایش پاسخ (می‌تواند بیشتر باشد) */
padding-top: 15px; /* پدینگ برای نمایش بهتر */
}
.faq-item.active .faq-question {
background-color: #e0f2f7; /* پس‌زمینه متفاوت برای سوال فعال */
}
.faq-item.active .faq-question::after {
content: ‘➖’; /* آیکون ماینس برای سوالات باز */
transform: translateY(-50%) rotate(0deg); /* اطمینان از عدم چرخش */
}

/* Media Queries for Responsiveness: تنظیمات برای اندازه‌های مختلف صفحه */

/* تبلت و لپ‌تاپ‌های کوچک (عرض کمتر از 992px) */
@media (max-width: 992px) {
.container {
max-width: 760px;
padding: 20px;
margin: 15px auto;
}
h1 { font-size: 2.3rem; margin-bottom: 1.5rem; padding-bottom: 15px; }
h2 { font-size: 1.8rem; margin-top: 2.8rem; margin-bottom: 1.2rem; padding-right: 15px; }
h3 { font-size: 1.35rem; margin-top: 2.2rem; margin-bottom: 0.9rem; padding-right: 10px; }
p { font-size: 1.05rem; }
.toc { padding: 20px; margin-bottom: 2.5rem; }
.toc h3 { font-size: 1.45rem; }
.toc ul li { font-size: 1.1rem; }
th, td { padding: 15px 18px; font-size: 0.95rem; }
.infographic-block { gap: 25px; margin: 3rem 0; padding: 20px; }
.infographic-item { padding: 20px 25px; border-right: 6px solid #00acc1; }
.infographic-item::before { left: -15px; width: 35px; height: 35px; font-size: 1.2rem; }
.infographic-item h4 { font-size: 1.25rem; padding-right: 15px; }
.faq-question { font-size: 1.1rem; padding: 18px 25px; }
.faq-question::after { left: 20px; font-size: 1.3rem; }
.faq-answer { font-size: 1rem; padding: 0 25px 20px; }
}

/* موبایل و تبلت‌های کوچک (عرض کمتر از 768px) */
@media (max-width: 768px) {
.container {
max-width: 95%; /* عرض بیشتر برای استفاده از فضای موبایل */
padding: 15px;
margin: 15px auto;
border-radius: 8px;
}
h1 { font-size: 2rem; margin-bottom: 1.2rem; padding-bottom: 12px; border-bottom: 3px solid #0d47a1; }
h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: 1rem; border-right: 4px solid #42a5f5; padding-right: 12px; }
h3 { font-size: 1.2rem; margin-top: 2rem; margin-bottom: 0.8rem; border-right: 3px solid #90caf9; padding-right: 10px; }
p, ul li, ol li { font-size: 1rem; line-height: 1.7; }
.toc { padding: 15px; margin-bottom: 2rem; }
.toc h3 { font-size: 1.3rem; }
.toc ul li { font-size: 1.05rem; margin-bottom: 0.7rem; padding-bottom: 0.5rem; }
th, td { padding: 12px 15px; font-size: 0.9rem; }
.infographic-block { gap: 20px; margin: 2.5rem 0; padding: 15px; border-radius: 12px; }
.infographic-item { padding: 18px 22px; border-right: 5px solid #00acc1; border-radius: 8px; }
.infographic-item::before { left: -12px; width: 30px; height: 30px; font-size: 1.1rem; }
.infographic-item h4 { font-size: 1.15rem; padding-right: 12px; }
.infographic-item p { font-size: 0.95rem; }
.faq-section { margin-top: 2.5rem; padding-top: 2rem; }
.faq-item { margin-bottom: 1.5rem; border-radius: 8px; }
.faq-question { font-size: 1.05rem; padding: 15px 22px; }
.faq-question::after { left: 18px; font-size: 1.2rem; }
.faq-answer { font-size: 0.95rem; padding: 0 22px 18px; }
}

/* موبایل‌های کوچک (عرض کمتر از 480px) */
@media (max-width: 480px) {
.container {
padding: 10px;
margin: 10px auto;
border-radius: 5px;
}
h1 { font-size: 1.7rem; margin-bottom: 1rem; padding-bottom: 10px; }
h2 { font-size: 1.3rem; margin-top: 2rem; margin-bottom: 0.8rem; border-right: 3px solid #42a5f5; padding-right: 10px; }
h3 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.7rem; border-right: 2px solid #90caf9; padding-right: 8px; }
p, ul li, ol li, .toc ul li, .infographic-item p, .faq-question, .faq-answer { font-size: 0.9rem; line-height: 1.6; }
.toc { padding: 10px; margin-bottom: 1.5rem; }
.toc h3 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.toc ul li { font-size: 0.95rem; margin-bottom: 0.6rem; padding-bottom: 0.4rem; }
th, td { padding: 10px 12px; font-size: 0.85rem; }
.infographic-block { gap: 15px; margin: 2rem 0; padding: 10px; border-radius: 10px; }
.infographic-item { padding: 15px 18px; border-right: 4px solid #00acc1; border-radius: 6px; }
.infographic-item::before { left: -10px; width: 28px; height: 28px; font-size: 1rem; }
.infographic-item h4 { font-size: 1.05rem; padding-right: 10px; }
.faq-section { margin-top: 2rem; padding-top: 1.5rem; }
.faq-item { margin-bottom: 1.2rem; border-radius: 6px; }
.faq-question { font-size: 1rem; padding: 12px 18px; }
.faq-question::after { left: 15px; font-size: 1.1rem; }
.faq-answer { font-size: 0.9rem; padding: 0 18px 15px; }
}
/*
*——————————————————————————————————————–
* پایان استایل‌های سفارشی
*——————————————————————————————————————–
*/

// این کد جاوا اسکریپت برای فعال‌سازی قابلیت آکاردئون (باز و بسته شدن) بخش سوالات متداول است.
// اگر ویرایشگر بلوک شما از تگ script پشتیبانی کند، این بخش به درستی کار خواهد کرد.
// در غیر این صورت، سوالات و پاسخ‌ها قابل مشاهده خواهند بود اما قابلیت باز و بسته شدن را نخواهند داشت.
document.addEventListener(‘DOMContentLoaded’, function() {
const faqQuestions = document.querySelectorAll(‘.faq-question’);
faqQuestions.forEach(question => {
question.addEventListener(‘click’, function() {
const faqItem = this.parentNode;
faqItem.classList.toggle(‘active’);
});
});
});