/* CSS برای نمایش بهتر در محیط وب و تضمین رسپانسیو بودن */
/* این کدها در یک ویرایشگر بلوک باید در بخش Custom CSS یا تنظیمات استایل قرار گیرند */
@import url(‘https://fonts.cdnfonts.com/css/vazirmatn’); /* اگر فونت Vazirmatn در هاست موجود نیست */
/* Default styles for body and typography */
body {
font-family: ‘Vazirmatn’, ‘Tahoma’, sans-serif;
direction: rtl;
text-align: right;
line-height: 1.8;
color: #333333;
background-color: #F8F8F8;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

div[style*=”font-family: ‘Vazirmatn’] {
padding: 20px;
border-radius: 12px;
max-width: 1200px; /* Max width for desktop screens */
margin: 0 auto; /* Center the content */
box-sizing: border-box; /* Include padding in element’s total width and height */
}

/* Headings */
h1 {
font-size: 3.2em;
font-weight: 800;
color: #0A3D62;
text-align: center;
margin-bottom: 40px;
padding: 15px 0;
border-bottom: 4px solid #F7B731;
letter-spacing: -0.02em;
}

h2 {
font-size: 2.2em;
font-weight: 700;
color: #1A5276;
margin-top: 40px;
margin-bottom: 20px;
border-bottom: 2px solid #E0E0E0;
padding-bottom: 10px;
}

h3 {
font-size: 1.7em;
font-weight: 600;
color: #2E86AB;
margin-top: 30px;
margin-bottom: 15px;
}

p {
font-size: 1.1em;
margin-bottom: 1.5em;
}

ul {
font-size: 1.1em;
list-style-type: ‘✅ ‘; /* Default for general lists */
padding-right: 25px; /* Adjust for RTL */
padding-left: 0; /* Reset default */
margin-bottom: 1.5em;
}
ul li {
margin-bottom: 0.8em;
}

/* Specific list icons */
ul[style*=”list-style-type: ‘⚡ ‘] { list-style-type: ‘⚡ ‘; }
ul[style*=”list-style-type: ‘📚 ‘] { list-style-type: ‘📚 ‘; }
ul[style*=”list-style-type: ‘⚙️ ‘] { list-style-type: ‘⚙️ ‘; }

/* Containers */
div[style*=”background-color: #FFFFFF”] {
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
}
div[style*=”background-color: #E6F0F5″] { /* For infographic and conclusion */
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
margin-top: 30px;
}

/* Table */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 1.05em;
background-color: #FDFDFD;
}
th, td {
padding: 12px 15px;
border: 1px solid #CCCCCC;
text-align: right;
}
thead th {
background-color: #E0EBF2;
color: #1A5276;
font-weight: 700;
}
tbody tr:nth-child(even) {
background-color: #F5F5F5;
}

/* Preformatted text (for infographic) */
pre {
background-color: #E6F0F5;
padding: 25px;
border-radius: 8px;
border: 1px solid #C0DDEE;
overflow-x: auto;
white-space: pre-wrap; /* Allows text to wrap */
font-family: ‘Consolas’, ‘Courier New’, monospace;
font-size: 1em;
color: #0A3D62;
line-height: 1.6;
}

/* Responsive Adjustments */
@media (max-width: 1024px) { /* Laptops, larger tablets */
div[style*=”font-family: ‘Vazirmatn’] {
padding: 15px;
}
h1 { font-size: 2.8em; margin-bottom: 30px; }
h2 { font-size: 2em; margin-top: 30px; }
h3 { font-size: 1.6em; margin-top: 25px; }
p, ul, table, pre { font-size: 1.05em; }
}

@media (max-width: 768px) { /* Tablets */
div[style*=”font-family: ‘Vazirmatn’] {
padding: 10px;
}
h1 { font-size: 2.4em; margin-bottom: 25px; border-bottom-width: 3px;}
h2 { font-size: 1.8em; margin-top: 25px; padding-bottom: 8px; }
h3 { font-size: 1.4em; margin-top: 20px; }
p, ul, table, pre { font-size: 1em; }
div[style*=”background-color: #FFFFFF”], div[style*=”background-color: #E6F0F5″] {
padding: 20px;
margin-bottom: 20px;
}
th, td { padding: 10px 12px; }
}

@media (max-width: 480px) { /* Mobile Phones */
div[style*=”font-family: ‘Vazirmatn’] {
padding: 5px;
}
h1 { font-size: 2em; margin-bottom: 20px; padding: 10px 0; border-bottom-width: 2px; }
h2 { font-size: 1.6em; margin-top: 20px; padding-bottom: 5px; }
h3 { font-size: 1.2em; margin-top: 15px; }
p, ul, table, pre { font-size: 0.95em; line-height: 1.7; }
div[style*=”background-color: #FFFFFF”], div[style*=”background-color: #E6F0F5″] {
padding: 15px;
margin-bottom: 15px;
}
th, td { padding: 8px 10px; display: block; width: 100%; box-sizing: border-box; } /* Stack table cells */
thead { display: none; } /* Hide table headers on small screens */
tbody tr { margin-bottom: 15px; border: 1px solid #CCCCCC; display: block; }
tbody tr td:first-child { border-top: none; } /* Adjust border for stacked cells */
tbody tr td:last-child { border-bottom: none; }
tbody td:before { /* Display column headers as labels for stacked cells */
content: attr(data-label);
font-weight: bold;
display: block;
margin-bottom: 5px;
color: #1A5276;
}
/* Add data-label to table cells manually if needed for this effect */
/* Example:

…

*/
pre { padding: 15px; font-size: 0.9em; }
}

/* Adjustments for TV screens (larger fonts, more spacing) */
@media (min-width: 1920px) {
div[style*=”font-family: ‘Vazirmatn’] {
max-width: 1500px;
padding: 40px;
}
h1 { font-size: 4em; margin-bottom: 50px; }
h2 { font-size: 2.8em; margin-top: 60px; }
h3 { font-size: 2em; margin-top: 40px; }
p, ul, table, pre { font-size: 1.3em; line-height: 2; }
div[style*=”background-color: #FFFFFF”], div[style*=”background-color: #E6F0F5″] {
padding: 40px;
margin-bottom: 40px;
}
}

<!– راهنمای عملی برای استفاده در ویرایشگر بلوک یا کلاسیک:
1. **کپی کردن محتوای HTML:** کل محتوای داخل تگ `div` اصلی (که با `font-family: 'Vazirmatn'` شروع می‌شود) را کپی کرده و در بخش HTML/Code Block ویرایشگر خود قرار دهید. این بخش شامل تمامی هدینگ‌ها، پاراگراف‌ها، جدول و "اینفوگرافیک" متنی است.
2. **کپی کردن CSS:** کد CSS که در تگ “ قرار دارد را کپی کرده و در بخش Custom CSS (یا CSS سفارشی) وب‌سایت خود قرار دهید. این کار ظاهر زیبا، رنگ‌بندی و رسپانسیو بودن مقاله را تضمین می‌کند. اگر ویرایشگر بلوک شما امکان افزودن CSS درون بلوک را می‌دهد، می‌توانید آن را به همان بلوک متنی مقاله اضافه کنید، اما بهترین روش افزودن آن به صورت سراسری در CSS وب‌سایت است.
3. **فونت:** اطمینان حاصل کنید که فونت ‘Vazirmatn’ در وب‌سایت شما لود شده باشد. خط `@import` در ابتدای CSS برای این منظور قرار داده شده است، اما برای عملکرد بهینه، بهتر است فونت را از طریق تنظیمات قالب یا CDN به صورت سراسری لود کنید.
4. **ویرایش جدول برای موبایل:** برای نمایش بهتر جدول در موبایل، در صورت نیاز می‌توانید به هر `

` یک `data-label` اضافه کنید که نام ستون مربوطه را نمایش دهد. مثال:
`

دسترسی به داده‌های واقعی: محدودیت…

`
این کار کمک می‌کند تا حتی با پنهان شدن هدینگ‌ها در موبایل، کاربر بداند هر ردیف به چه موضوعی اشاره دارد.
با رعایت این موارد، مقاله شما با طراحی زیبا، رسپانسیو و محتوای غنی در ویرایشگر بلوک و کلاسیک به درستی نمایش داده خواهد شد.
–>