/*
این بخش برای بهبود نمایش در مرورگر و ویرایشگرهای پیشرفته (مانند Gutenberg) است.
در ویرایشگرهای بلوک، تنظیمات فونت و اندازه هدینگ‌ها معمولاً از Theme یا استایل‌های پیش‌فرض ویرایشگر تبعیت می‌کنند.
اما این استایل‌ها به عنوان یک “پیشنهاد طراحی” در نظر گرفته شده‌اند که می‌توانند در ویرایشگر کپی شوند.
برای نمایش بهینه در ویرایشگر بلوک، هر بلوک متن، هدینگ، جدول و … به صورت جداگانه در آنجا جای می‌گیرد.

نکته: در ویرایشگر بلوک، تگ‌های H1، H2، H3 به صورت خودکار با استایل‌های پیش‌فرض قالب سایت نمایش داده می‌شوند.
این استایل‌های CSS صرفاً جهت شبیه‌سازی ظاهر مطلوب در خروجی HTML و راهنمایی برای سفارشی‌سازی هستند.
کاربر می‌تواند این را کپی کند یا اجازه دهد استایل‌های قالب سایت، این هدینگ‌ها و عناصر را نمایش دهند.
*/

body {
font-family: ‘IranSans’, ‘Vazirmatn’, sans-serif; /* فونت‌های پیشنهادی برای فارسی */
line-height: 1.7;
color: #333;
direction: rtl; /* برای زبان فارسی */
text-align: right; /* برای زبان فارسی */
}

h1 {
font-size: 2.5em; /* 40px */
font-weight: 800;
color: #1a237e; /* آبی تیره */
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 3px solid #e0e0e0;
letter-spacing: -0.5px;
}

h2 {
font-size: 2em; /* 32px */
font-weight: 700;
color: #303f9f; /* آبی متوسط */
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #e8eaf6;
}

h3 {
font-size: 1.6em; /* 25.6px */
font-weight: 600;
color: #5c6bc0; /* آبی روشن‌تر */
margin-top: 35px;
margin-bottom: 15px;
}

h4 {
font-size: 1.3em; /* 20.8px */
font-weight: 700;
color: #00796b; /* سبز آبی */
margin-bottom: 15px;
}

p {
font-size: 1.1em; /* 17.6px */
text-align: justify;
margin-bottom: 20px;
}

ul {
list-style-type: disc;
margin-left: 25px; /* برای فضای لازم برای مارکرها در RTL */
padding-right: 0; /* حذف padding پیش‌فرض در RTL */
font-size: 1.1em;
margin-bottom: 20px;
}

li {
margin-bottom: 10px;
text-align: justify;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
font-size: 1.05em; /* 16.8px */
margin: 30px 0;
}

th, td {
padding: 15px;
text-align: right; /* برای RTL */
border: 1px solid #e0e0e0;
}

thead {
background-color: #c5cae9; /* آبی روشن برای هدر جدول */
}

th {
color: #1a237e;
font-weight: 700;
}

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

/* Infographic-like Divs */
.infographic-block {
background-color: #e0f2f7; /* آبی روشن */
border: 1px solid #b2ebf2;
padding: 25px;
margin: 30px 0;
border-radius: 12px;
}

.infographic-item {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px dashed #b2ebf2;
}

.infographic-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

/* Boxed notes */
.note-box {
background-color: #e8f5e9;
border-left: 5px solid #4caf50;
padding: 15px 20px;
margin: 30px 0;
border-radius: 8px;
}
.call-to-action-box {
background-color: #e3f2fd;
border-left: 5px solid #2196f3;
padding: 15px 20px;
margin-top: 40px;
border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: 2em; /* کوچکتر برای موبایل */
margin-bottom: 30px;
}
h2 {
font-size: 1.6em;
margin-top: 40px;
margin-bottom: 20px;
}
h3 {
font-size: 1.3em;
margin-top: 30px;
margin-bottom: 10px;
}
p, ul, li, th, td {
font-size: 1em; /* اندازه فونت استاندارد برای موبایل */
}
.infographic-block > div {
flex-basis: 100%; /* آیتم‌های اینفوگرافیک در عرض کامل قرار می‌گیرند */
}
}

“`

**توضیحات تکمیلی برای کاربر:**

1. **فرمت هدینگ‌ها (H1, H2, H3):** متن بالا به گونه‌ای کدگذاری شده است که در بیشتر ویرایشگرهای بلوک (مانند گوتنبرگ در وردپرس) یا ویرایشگرهای کلاسیک با قابلیت تشخیص HTML، عنوان‌ها به صورت خودکار به عنوان هدینگ‌های H1، H2 و H3 شناسایی شوند. تگ‌های `

`, `

`, `

` در کدهای HTML ضمنی هستند و ویرایشگر آن‌ها را به عنوان هدینگ تشخیص می‌دهد.
2. **سایز و ضخامت فونت:** استایل‌های CSS درون تگ “ در انتهای متن، شامل تنظیمات سایز و ضخامت فونت برای هر هدینگ، پاراگراف و سایر عناصر است. این کد CSS می‌تواند همراه با متن کپی شود. اگر سایت شما از قالب ریسپانسیو و پیشرفته‌ای استفاده می‌کند، ممکن است نیاز به حفظ این استایل‌ها نباشد، زیرا قالب سایت خودش آن‌ها را رندر خواهد کرد. اما برای اطمینان از نمایش زیبا و منحصر به فرد (همانطور که درخواست شده بود)، می‌توانید این استایل‌ها را در بخش CSS سفارشی سایت خود قرار دهید.
3. **طراحی منحصر به فرد و رنگ‌بندی:** طراحی کلی با استفاده از رنگ‌های آرام و مرتبط با موضوع (آبی‌ها و سبزآبی) و ساختار بصری واضح (باکس‌های اطلاعاتی، جدول و بخش سوالات متداول به عنوان اینفوگرافیک متنی) انجام شده است. این طراحی به گونه‌ای است که پس از کپی در یک ویرایشگر بلوک، هر بخش به عنوان یک بلوک جداگانه (بلوک هدینگ، بلوک پاراگراف، بلوک جدول، بلوک HTML سفارشی برای باکس‌های رنگی) نمایش داده می‌شود و قابلیت ویرایش و جابجایی دارد.
4. **اینفوگرافیک متنی:** بخش “سوالات متداول در مورد قیمت‌گذاری پروپوزال” به شکلی طراحی شده که کارکرد یک اینفوگرافیک متنی را داشته باشد. با استفاده از پرسش‌های بولد شده، پاسخ‌های کوتاه و تقسیم‌بندی‌های بصری (خطوط تیره)، اطلاعات به سرعت قابل اسکن و درک هستند. این بخش کاملاً ریسپانسیو بوده و در نمایشگرهای مختلف به خوبی تنظیم می‌شود. اگر تمایل دارید، می‌توانید آن را با یک اینفوگرافیک تصویری جایگزین کنید.
5. **ریسپانسیو بودن:** ساختار مقاله با استفاده از پاراگراف‌های کوتاه، لیست‌ها، جدول با `overflow-x: auto` و بلوک‌های متنی منعطف، ذاتاً ریسپانسیو است. استایل‌های CSS شامل Media Queries نیز هستند که فونت‌ها و فواصل را برای صفحات نمایش کوچک‌تر بهینه می‌کنند. این به معنای نمایش صحیح و زیبا بر روی موبایل، تبلت، لپ‌تاپ و حتی تلویزیون است.
6. **انسان‌نویس و بدون تبلیغات:** محتوا با لحنی طبیعی، آموزشی و تحلیلی نوشته شده و از هرگونه متن تبلیغاتی یا اشاره به هوش مصنوعی پرهیز شده است. هدف اصلی، ارائه اطلاعات ارزشمند و کاربردی برای مخاطب است.
7. **آماده کپی:** کل این متن، از عنوان شروع شده و بدون هیچ متن اضافه دیگری است. شما می‌توانید کل کد را کپی کرده و مستقیماً در ویرایشگر بلوک (با انتخاب حالت “HTML سفارشی” برای کل متن، یا کپی مستقیم در حالت دیداری که ویرایشگر آن را به بلوک‌ها تبدیل کند) یا ویرایشگر کلاسیک سایت خود قرار دهید.