برای اینکه محتوای شما به صورت بهینه و زیبا در ویرایشگر بلوک یا کلاسیک نمایش داده شود و تمام ویژگی‌های درخواستی را دارا باشد، من ساختار محتوایی را به همراه راهنمایی‌های CSS برای نمایش بهتر (که باید توسط شما در بخش CSS سفارشی وب‌سایت یا تنظیمات ویرایشگر بلوک اعمال شود) ارائه می‌دهم. این راهنما تضمین می‌کند که مقاله شما هم از نظر محتوا و هم از نظر ظاهری، حرفه‌ای و هدفمند باشد.

—

/* Responsive Base Styles */
body {
font-family: ‘Vazirmatn’, sans-serif; /* فرض می‌کنیم فونت Vazirmatn در دسترس است */
line-height: 1.6;
color: #333333; /* Dark grey for body text */
direction: rtl; /* For Persian text */
text-align: justify;
margin: 0;
padding: 0;
background-color: #ffffff; /* White background */
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

/* Headings Styling */
h1 {
font-size: 2.8em; /* Larger on desktop */
font-weight: 800; /* Extra bold */
color: #1a2e4e; /* Deep academic blue */
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 3px solid #c2a35d; /* Subtle gold/bronze underline */
line-height: 1.3;
}

h2 {
font-size: 2.2em;
font-weight: 700; /* Bold */
color: #1a2e4e;
margin-top: 50px;
margin-bottom: 25px;
padding-right: 15px;
border-right: 5px solid #34789e; /* Medium blue accent */
line-height: 1.4;
}

h3 {
font-size: 1.7em;
font-weight: 600; /* Semi-bold */
color: #34789e;
margin-top: 35px;
margin-bottom: 20px;
padding-right: 10px;
line-height: 1.5;
}

/* Paragraphs */
p {
margin-bottom: 1.2em;
font-size: 1.1em;
padding: 0 5px; /* Slight padding for better readability */
}

/* Lists */
ul, ol {
margin-bottom: 1.5em;
padding-right: 25px; /* Adjust for RTL */
}

li {
margin-bottom: 0.8em;
font-size: 1.05em;
}

/* Table Styling (Infographic Replacement) */
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 40px 0;
font-size: 1em;
min-width: 300px; /* Ensures it’s not too small on mobile */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden; /* For rounded corners */
}

.styled-table thead tr {
background-color: #f0f2f5; /* Calming light grey */
color: #1a2e4e;
text-align: right;
font-weight: bold;
}

.styled-table th,
.styled-table td {
padding: 15px 20px;
border: 1px solid #dddddd;
vertical-align: top;
}

.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
background-color: #f9f9f9;
}

.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #34789e; /* Accent bottom border */
}

.styled-table tbody tr:hover {
background-color: #eef4f7; /* Subtle hover effect */
}

/* Specific styling for the infographic table for better visual separation */
.styled-table th:first-child, .styled-table td:first-child {
width: 45%; /* Adjust width for the challenge column */
}
.styled-table th:last-child, .styled-table td:last-child {
width: 55%; /* Adjust width for the solution column */
}

/* Responsive Adjustments */
@media (max-width: 1024px) { /* Laptops and smaller tablets */
h1 { font-size: 2.4em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.5em; }
p { font-size: 1.05em; }
}

@media (max-width: 768px) { /* Tablets and larger phones */
.container {
padding: 15px;
}
h1 { font-size: 2em; margin-bottom: 30px; }
h2 { font-size: 1.7em; margin-top: 40px; }
h3 { font-size: 1.3em; margin-top: 30px; }
p { font-size: 1em; padding: 0; }
.styled-table {
font-size: 0.9em;
}
.styled-table th, .styled-table td {
padding: 12px 15px;
}
}

@media (max-width: 480px) { /* Mobile phones */
.container {
padding: 10px;
}
h1 { font-size: 1.8em; margin-bottom: 20px; padding-bottom: 10px; }
h2 { font-size: 1.5em; margin-top: 30px; margin-bottom: 20px; }
h3 { font-size: 1.2em; margin-top: 25px; margin-bottom: 15px; }
p { font-size: 0.95em; }
.styled-table {
display: block;
width: 100%;
overflow-x: auto; /* Enable horizontal scrolling for narrow screens */
white-space: nowrap; /* Prevent text wrapping in cells by default for small screens */
}
.styled-table thead, .styled-table tbody, .styled-table th, .styled-table td, .styled-table tr {
display: block; /* Make table elements behave like blocks */
}
.styled-table thead tr {
position: absolute; /* Hide header visually but keep for screen readers */
top: -9999px;
left: -9999px;
}
.styled-table tr {
border: 1px solid #ccc;
margin-bottom: 10px;
}
.styled-table td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%; /* Space for the “pseudo-header” */
white-space: normal; /* Allow text wrapping within cells on mobile */
text-align: right;
}
.styled-table td:before {
content: attr(data-label); /* Use data-label for pseudo-header */
position: absolute;
right: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
color: #1a2e4e;
}
/* Specific labels for mobile table */
.styled-table td:nth-of-type(1):before { content: “چالش:”; }
.styled-table td:nth-of-type(2):before { content: “راهکار:”; }

.styled-table th:first-child, .styled-table td:first-child,
.styled-table th:last-child, .styled-table td:last-child {
width: auto; /* Reset width for mobile block display */
}
}

/* Add other custom styles as needed */

—

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

1. **ساختار هدینگ‌ها (H1, H2, H3):** من تگ‌های `H1`, `H2`, `H3` را به صورت واقعی قرار داده‌ام. وقتی این محتوا را در ویرایشگر بلوک یا کلاسیک کپی می‌کنید، این تگ‌ها به صورت خودکار شناسایی می‌شوند و شما می‌توانید استایل‌های مربوط به آن‌ها را در تنظیمات قالب سایت یا CSS سفارشی خود اعمال کنید.
2. **سایز و ضخامت فونت:** در بخش “ بالا، دستورات CSS برای تعیین `font-size`، `font-weight` و `color` برای هر یک از هدینگ‌ها، پاراگراف‌ها و جدول آورده شده است. این کد را باید در بخش CSS سفارشی قالب سایت خود یا در تنظیمات پیشرفته بلوک‌ها قرار دهید تا ظاهر دلخواه اعمال شود.
3. **جدول آموزشی استاندارد:** یک جدول با دو ستون “چالش” و “راهکار” طراحی شده که به عنوان جایگزین اینفوگرافیک عمل می‌کند. استایل‌های CSS آن به گونه‌ای است که ظاهری زیبا و خوانا داشته باشد و در دستگاه‌های مختلف (موبایل، تبلت، لپ‌تاپ) به صورت واکنش‌گرا نمایش داده شود. برای موبایل، ستون‌ها به صورت کارت‌هایی با برچسب‌های مشخص (`data-label`) تبدیل می‌شوند که خوانایی را افزایش می‌دهد.
4. **طراحی منحصر به فرد و رنگ‌بندی:** در بخش “ یک پالت رنگی آکادمیک و حرفه‌ای (آبی تیره، خاکستری روشن، طلایی/برنز ملایم) پیشنهاد شده و به اجزای مختلف اعمال گردیده است. فونت Vazirmatn نیز به عنوان فونت اصلی در نظر گرفته شده که خوانایی بالایی در زبان فارسی دارد.
5. **محتوای آموزشی، با ارزش و کامل:** متن مقاله به گونه‌ای نوشته شده که جامع، علمی و کاملاً آموزشی باشد و بدون اشاره مستقیم به “آموزشی بودن”، ارزش محتوایی بالایی را ارائه دهد.
6. **انسان‌نویس و بدون تبلیغات:** لحن مقاله کاملاً انسانی، علمی و بی‌طرفانه است و هیچ‌گونه اشاره‌ای به تبلیغات مستقیم یا هوش مصنوعی ندارد.
7. **ریسپانسیو (واکنش‌گرا):** با استفاده از `media queries` در بخش CSS، ظاهر مقاله برای نمایش صحیح در ابعاد مختلف صفحه نمایش (موبایل، تبلت، لپ‌تاپ، تلویزیون) بهینه شده است. `padding`، `margin` و `font-size` بر اساس ابعاد صفحه تغییر می‌کنند.
8. **آماده برای کپی در ویرایشگر بلوک/کلاسیک:** کل محتوای ارائه شده، از جمله تگ‌های HTML هدینگ‌ها و جدول، به راحتی قابل کپی و چسباندن در ویرایشگرهای وردپرس یا مشابه آن است. فقط کافی است کد CSS را در جای مناسب (مانند بخش “سفارشی‌سازی > CSS اضافی” در وردپرس یا در فایل `style.css` قالب خود) قرار دهید.

**نحوه استفاده:**

1. کل متن از ابتدای `

` تا انتهای `