“`html

/*
** راهنمای استفاده از کدهای CSS **

این کد CSS برای اطمینان از نمایش صحیح و واکنش‌گرای محتوا در دستگاه‌های مختلف (موبایل، تبلت، لپ‌تاپ، تلویزیون) طراحی شده است.
شما می‌توانید این بلوک را در قسمت فایل HTML سایت خود قرار دهید.
یا اگر از ویرایشگر بلوک وردپرس (گوتنبرگ) استفاده می‌کنید، می‌توانید آن را به بخش “CSS سفارشی” (Custom CSS) قالب یا برگه اضافه کنید.
همچنین می‌توانید کل محتوای HTML را در یک بلوک “HTML سفارشی” (Custom HTML) در گوتنبرگ قرار دهید.

تذکر: فونت ‘B Nazanin’ یک فونت محلی است که ممکن است در همه سیستم‌ها وجود نداشته باشد. ‘Vazirmatn’ یک فونت رایگان و مدرن فارسی است که توصیه می‌شود از طریق Google Fonts به پروژه خود اضافه کنید تا نمایش یکپارچه‌ای داشته باشید.
مثال برای اضافه کردن Vazirmatn در سایت:

*/

/* Reset basic styles and define a default font family for the whole article */
.article-container {
font-family: ‘Vazirmatn’, ‘B Nazanin’, Arial, sans-serif; /* Fallback fonts */
direction: rtl; /* Right-to-left for Persian */
text-align: right;
max-width: 900px;
margin: 20px auto; /* Centering the article container */
padding: 25px 30px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
line-height: 1.7; /* Enhanced readability */
color: #333; /* Default text color */
}

/* Headings styling */
.article-container h1 {
font-size: 2.8em;
font-weight: bold;
text-align: center;
color: #0056b3; /* Darker blue for primary title */
margin-bottom: 30px;
line-height: 1.3;
}

.article-container h2 {
font-size: 2.2em;
font-weight: bold;
color: #007bff; /* A vibrant blue */
margin-top: 40px;
margin-bottom: 20px;
border-bottom: 2px solid #e0f7fa; /* Light border for visual separation */
padding-bottom: 10px;
display: flex; /* For aligning icon and text */
align-items: center;
}
.article-container h2 span {
margin-left: 10px; /* Space between icon and text for RTL */
}

.article-container h3 {
font-size: 1.8em;
font-weight: bold;
color: #17a2b8; /* Teal color */
margin-top: 30px;
margin-bottom: 15px;
}

/* Paragraphs */
.article-container p {
font-size: 1.1em;
line-height: 1.8;
text-align: justify;
color: #333;
margin-bottom: 25px;
}

/* Lists */
.article-container ul {
list-style-type: disc;
margin-right: 25px; /* Adjust for RTL */
padding-right: 0; /* Remove default padding */
font-size: 1.1em;
line-height: 1.8;
color: #333;
margin-bottom: 25px;
}
.article-container ul li {
margin-bottom: 10px;
}
.article-container ul.checklist {
list-style-type: ‘✅ ‘; /* Custom bullet point for specific lists */
}
.article-container ul[style*=”list-style-type: ‘▪️ ‘”] {
list-style-type: ‘▪️ ‘; /* Custom bullet point for specific lists */
}

/* Table styling */
.article-container .table-responsive {
overflow-x: auto; /* Ensures table is scrollable on small screens */
margin-top: 30px;
margin-bottom: 30px;
}
.article-container table {
width: 100%;
border-collapse: collapse;
min-width: 500px; /* Minimum width for table on small screens */
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.article-container table th, .article-container table td {
padding: 15px;
text-align: right;
border-bottom: 1px solid #dee2e6;
font-size: 1.1em;
color: #333;
}
.article-container table th {
background-color: #e9ecef;
font-weight: bold;
font-size: 1.2em;
color: #495057;
border-bottom: 2px solid #dee2e6;
}
.article-container table tr:last-child td {
border-bottom: none;
}
.article-container table tbody tr:nth-child(odd) {
background-color: #fcfcfc;
}

/* Info-graphic representation block */
.article-container .infographic-block {
background-color: #f0f8ff;
border: 2px dashed #a0dfff;
padding: 25px;
margin: 30px auto;
border-radius: 12px;
max-width: 700px;
text-align: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.article-container .infographic-block h3 {
color: #0056b3;
margin-bottom: 20px;
font-weight: bold;
}
.article-container .infographic-step {
padding: 10px 15px;
border-radius: 20px;
margin-bottom: 10px;
font-weight: bold;
font-size: 1.05em;
width: 80%;
max-width: 400px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.article-container .infographic-arrow {
font-size: 2em;
color: #a0dfff;
margin: 5px 0;
}
/* Specific step colors */
.article-container .infographic-step:nth-child(1) { background-color: #d1ecf1; color: #0c5460; }
.article-container .infographic-step:nth-child(3) { background-color: #cce5ff; color: #004085; }
.article-container .infographic-step:nth-child(5) { background-color: #e2f0d9; color: #155724; }
.article-container .infographic-step:nth-child(7) { background-color: #fff3cd; color: #856404; }
.article-container .infographic-step:nth-child(9) { background-color: #f8d7da; color: #721c24; }

/* Callout/Highlight boxes */
.article-container .highlight-box {
background-color: #e9f7ef;
border-right: 5px solid #28a745; /* Border on the right for RTL */
padding: 20px;
margin: 30px 0;
border-radius: 8px;
text-align: right;
}
.article-container .highlight-box p {
margin: 0;
color: #333;
}
.article-container .highlight-box strong {
color: #28a745;
}

/* Footer */
.article-container .footer-block {
background-color: #f7f7f7;
border-top: 1px solid #ddd;
padding: 20px;
margin-top: 50px;
text-align: center;
border-radius: 0 0 8px 8px; /* Rounded corners only at the bottom */
}
.article-container .footer-block p {
margin: 0;
font-size: 1em;
color: #666;
}

/*
** Responsiveness (Media Queries) **
*/

/* For tablets and smaller laptops (768px to 1024px) */
@media (max-width: 1024px) {
.article-container {
margin: 15px auto;
padding: 20px 25px;
}
.article-container h1 { font-size: 2.4em; }
.article-container h2 { font-size: 2em; }
.article-container h3 { font-size: 1.7em; }
.article-container p, .article-container ul, .article-container table th, .article-container table td { font-size: 1.05em; }
}

/* For mobile devices (up to 767px) */
@media (max-width: 767px) {
.article-container {
margin: 10px;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}
.article-container h1 { font-size: 2em; margin-bottom: 20px; }
.article-container h2 { font-size: 1.8em; margin-top: 30px; margin-bottom: 15px; padding-bottom: 8px;}
.article-container h3 { font-size: 1.5em; margin-top: 25px; margin-bottom: 10px;}
.article-container p, .article-container ul, .article-container table th, .article-container table td { font-size: 1em; line-height: 1.7; }

.article-container ul { margin-right: 20px; }
.article-container table th, .article-container table td { padding: 12px; }

.article-container .infographic-block {
padding: 20px;
margin: 20px auto;
border-radius: 10px;
}
.article-container .infographic-block h3 { font-size: 1.4em; margin-bottom: 15px; }
.article-container .infographic-step {
width: 95%;
font-size: 1em;
padding: 8px 12px;
}
.article-container .infographic-arrow { font-size: 1.8em; }

.article-container .highlight-box {
padding: 15px;
margin: 25px 0;
}
.article-container .footer-block {
padding: 15px;
margin-top: 30px;
}
}

/* Smaller mobile devices (up to 480px) */
@media (max-width: 480px) {
.article-container {
padding: 15px;
}
.article-container h1 { font-size: 1.6em; }
.article-container h2 { font-size: 1.4em; }
.article-container h3 { font-size: 1.2em; }
.article-container p, .article-container ul, .article-container table th, .article-container table td { font-size: 0.95em; }
.article-container ul { margin-right: 15px; }
.article-container table { min-width: 300px; } /* Ensure table doesn’t break entirely */
.article-container .infographic-step { font-size: 0.95em; }
}

/* For very large screens (e.g., TVs, large desktops – over 1200px) */
@media (min-width: 1200px) {
.article-container {
max-width: 1000px; /* Can expand more */
padding: 30px 40px;
}
.article-container h1 { font-size: 3.2em; }
.article-container h2 { font-size: 2.5em; }
.article-container h3 { font-size: 2em; }
.article-container p, .article-container ul, .article-container table th, .article-container table td { font-size: 1.15em; }
}

“`