/*
** راهنمای استفاده از کدهای HTML و CSS برای ویرایشگر بلوک (مانند گوتنبرگ در وردپرس) **

شما نمی‌توانید کدهای CSS را مستقیماً در ویرایشگر بلوک کپی کنید. این کدها برای تعریف استایل کلی و رسپانسیو بودن بخش‌های مختلف متن طراحی شده‌اند.
برای استفاده بهینه:
1. **بخش HTML (محتوای اصلی مقاله):** این بخش را مستقیماً در ویرایشگر بلوک خود کپی کنید. اکثر ویرایشگرهای بلوک، به خصوص در وردپرس، تگ‌های H1، H2، H3 و سایر عناصر HTML را به عنوان بلوک‌های مجزا شناسایی می‌کنند و امکان ویرایش و استایل‌دهی آن‌ها را فراهم می‌کنند.
2. **بخش CSS (همین بخش):**
* اگر از وردپرس استفاده می‌کنید، می‌توانید این کدها را در بخش “سفارشی‌سازی” (Customize) -> “CSS اضافی” (Additional CSS) سایت خود قرار دهید. این کار باعث می‌شود استایل‌ها به صورت سراسری اعمال شوند و ظاهر مقاله شما همانند طرح پیشنهادی باشد.
* اگر از ویرایشگر بلوک دیگری استفاده می‌کنید که امکان افزودن CSS سفارشی را دارد، آن را در محل مربوطه قرار دهید.
* اگر به CSS سفارشی دسترسی ندارید، مقاله همچنان به درستی نمایش داده می‌شود، اما با استایل‌های پیش‌فرض قالب سایت شما. در این حالت، می‌توانید با استفاده از تنظیمات بلوک‌های مختلف در ویرایشگر خود (مثلاً تغییر رنگ پس‌زمینه بلوک Quote، اندازه فونت هدینگ‌ها و غیره) به ظاهر دلخواه نزدیک شوید.

**نکات مهم برای رسپانسیو بودن و نمایش در ویرایشگر بلوک:**
* **هدینگ‌ها (H1, H2, H3):** با تگ‌های HTML واقعی تعریف شده‌اند و به صورت خودکار توسط ویرایشگر شناسایی می‌شوند. سایز و ضخامت فونت آن‌ها توسط CSS تعیین شده است.
* **پاراگراف‌ها:** کوتاه و خوانا هستند تا در هر اندازه‌ای از صفحه (موبایل، تبلت، لپ‌تاپ، تلویزیون) به راحتی قابل مطالعه باشند.
* **جدول:** با استفاده از `max-width: 100%` و `flex-wrap` در بخش اینفوگرافیک، برای نمایش صحیح در صفحات کوچک بهینه‌سازی شده است.
* **اینفوگرافیک متنی:** از فلکس‌باکس (Flexbox) استفاده شده است تا کارت‌ها در صفحات کوچک زیر هم قرار گیرند و در صفحات بزرگ‌تر کنار هم.
* **رنگ‌بندی:** از پالت رنگی هماهنگ استفاده شده که در CSS تعریف شده است.
* **فضاسازی:** استفاده از `margin` و `padding` کافی، خوانایی را در دستگاه‌های مختلف افزایش می‌دهد.
*/

@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap’);

body {
font-family: ‘Vazirmatn’, sans-serif;
line-height: 1.8;
color: #333;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}

.main-container { /* This div wraps the entire content */
max-width: 1000px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

h1 {
font-size: 2.5em; /* Larger for H1 */
font-weight: bold;
color: #2C3E50;
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 3px solid #3498DB;
}

h2 {
font-size: 2em; /* Smaller than H1 */
font-weight: bold;
color: #2980B9;
margin-top: 40px;
margin-bottom: 25px;
padding-left: 10px;
border-left: 5px solid #3498DB;
}

h3 {
font-size: 1.5em; /* Smaller than H2 */
font-weight: bold;
color: #2C3E50;
margin-top: 30px;
margin-bottom: 15px;
padding-left: 5px;
border-left: 3px solid #F39C12;
}

h4 {
font-size: 1.4em; /* Used in infographic as sub-heading */
color: #2C3E50;
margin: 15px 0 10px;
}

p {
font-size: 1.05em;
color: #444;
margin-bottom: 20px;
text-align: justify;
}

ul {
list-style-type: disc;
margin-left: 25px;
color: #555;
padding: 0;
}

li {
margin-bottom: 10px;
}

table {
width: 100%;
border-collapse: collapse;
margin: 25px auto;
max-width: 700px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

caption {
caption-side: top;
text-align: center;
font-weight: bold;
padding: 10px;
background-color: #E9F5F8;
color: #2C3E50;
border-bottom: 1px solid #ddd;
}

th, td {
padding: 15px;
border: 1px solid #ECF0F1;
text-align: right;
}

th {
background-color: #F8F9FA;
font-weight: bold;
color: #34495E;
}

tr:nth-child(odd) {
background-color: #FFFFFF;
}

tr:nth-child(even) {
background-color: #FDFEFE;
}

.highlight-box { /* For the “نکته کلیدی” block */
background-color: #ECF0F1;
border-left: 5px solid #E74C3C;
padding: 20px;
margin: 40px 0;
border-radius: 8px;
}

.infographic-container { /* Main div for the textual infographic */
margin: 50px 0;
padding: 30px;
background-image: linear-gradient(to right, #eaf6ff, #f0faff);
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
text-align: center;
}

.infographic-cards { /* Flex container for infographic items */
display: flex;
flex-wrap: wrap; /* Allows cards to wrap to next line on small screens */
justify-content: center;
gap: 25px;
}

.infographic-card { /* Individual card in infographic */
flex: 1 1 280px; /* Allows cards to be 280px wide, or grow/shrink */
background-color: #FFFFFF;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #ddd;
}

.infographic-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
h1 {
font-size: 2em;
margin-bottom: 30px;
}
h2 {
font-size: 1.6em;
margin-top: 30px;
margin-bottom: 20px;
}
h3 {
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 10px;
}
p, li, th, td {
font-size: 0.95em;
}
.main-container {
padding: 15px;
}
.infographic-cards {
flex-direction: column; /* Stack cards vertically on smaller screens */
align-items: center;
}
.infographic-card {
flex: 0 0 90%; /* Take almost full width on small screens */
max-width: 400px; /* Limit max width for cards even when stacked */
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.8em;
margin-bottom: 20px;
padding-bottom: 10px;
}
h2 {
font-size: 1.4em;
margin-top: 25px;
margin-bottom: 15px;
padding-left: 8px;
}
h3 {
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 10px;
padding-left: 4px;
}
p, li, th, td {
font-size: 0.9em;
}
.main-container {
padding: 10px;
}
table, th, td {
display: block; /* Stack table headers/data on very small screens */
width: 100%;
box-sizing: border-box;
}
th {
text-align: center;
background-color: #f0f0f0 !important;
}
td {
text-align: right;
padding-left: 10px;
}
tr {
margin-bottom: 15px;
border: 1px solid #eee;
display: block;
border-radius: 5px;
overflow: hidden;
}
tr:nth-child(odd), tr:nth-child(even) {
background-color: #fff;
}
td::before { /* Add a label for each cell for better readability */
content: attr(data-label);
font-weight: bold;
display: inline-block;
width: 45%;
text-align: left;
color: #333;
}
/* Add data-label to your HTML table for this to work for each td */
/* Example:

تازگی و نوآوری

*/
}

/* Specific styling for the initial paragraph below H1 */
.main-container > div:first-of-type p {
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

/* Ensure font for icons/emojis in infographic */
.infographic-card p:first-child {
font-family: sans-serif; /* Ensure emojis render correctly */
}

/* Apply data-label to table cells for mobile responsiveness (manual HTML edit needed for full effect) */
/* Example of how to structure your HTML for mobile table data labels:

تازگی و نوآوری موضوع باید دارای جنبه‌های جدید باشد و تکرار کارهای گذشته نباشد.

*/