/*
این کدهای CSS به منظور ایجاد طراحی زیبا، رنگ‌بندی جذاب و واکنش‌گرایی (Responsive) برای نمایش مقاله در ابعاد مختلف صفحه (موبایل، تبلت، لپ‌تاپ، تلویزیون) طراحی شده‌اند.
پس از کپی کردن این کدها به همراه محتوای HTML در یک ویرایشگر بلوک یا کلاسیک، در صورتی که ویرایشگر از HTML و CSS پشتیبانی کند، مقاله با ظاهر و ساختار مناسب نمایش داده خواهد شد.
هدینگ‌ها (H1, H2, H3) نیز با فونت و ضخامت مشخص شده‌اند تا به صورت خودکار توسط ویرایشگر شناسایی شوند.
*/
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7;
margin: 0;
padding: 0;
background-color: #f0f4f8; /* Light blue-grey background */
color: #333;
direction: rtl; /* For Persian text */
text-align: justify;
}

.container {
max-width: 900px;
margin: 20px auto;
padding: 30px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e7ed;
}

/* Headings styles */
h1 {
font-size: 2.8em;
font-weight: 800;
color: #0d47a1; /* Darker Blue */
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 5px solid #1976d2; /* Medium Blue for underline */
position: relative;
letter-spacing: -0.5px;
line-height: 1.3;
}
h1::after {
content: ‘🌟’; /* Star icon for accent */
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 0.6em;
color: #ffc107; /* Amber accent */
}

h2 {
font-size: 2.2em;
font-weight: 700;
color: #1565c0; /* Medium Blue */
margin-top: 50px;
margin-bottom: 25px;
padding-right: 18px;
border-right: 6px solid #2196f3; /* Brighter Blue for right border */
line-height: 1.4;
background-color: #e3f2fd; /* Very light blue background */
padding-top: 12px;
padding-bottom: 12px;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
transition: all 0.3s ease;
}
h2:hover {
background-color: #bbdefb;
border-right-color: #1976d2;
}

h3 {
font-size: 1.7em;
font-weight: 600;
color: #1e88e5; /* Slightly lighter blue */
margin-top: 35px;
margin-bottom: 20px;
padding-right: 12px;
border-right: 4px solid #64b5f6; /* Even lighter blue */
background-color: #f0f8ff; /* Almost white light blue */
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
transition: all 0.2s ease;
}
h3:hover {
background-color: #e3f2fd;
border-right-color: #42a5f5;
}

p {
margin-bottom: 1.2em;
line-height: 1.9;
font-size: 1.05em;
text-align: justify;
color: #444;
}

ul {
list-style-type: none;
padding: 0;
margin-right: 25px;
}

ul li {
position: relative;
padding-right: 35px;
margin-bottom: 15px;
font-size: 1.08em;
line-height: 1.8;
color: #555;
}

ul li::before {
content: ‘✅’; /* Checkmark icon */
color: #2196f3; /* Blue color for bullet */
position: absolute;
right: 0;
font-size: 1.3em;
top: 0;
}

strong {
color: #0d47a1; /* Darker blue for strong text */
font-weight: 700;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin: 40px 0;
font-size: 1.05em;
text-align: right;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners apply to content */
}

th, td {
padding: 18px 25px;
border: 1px solid #e0e7ed; /* Light grey-blue border */
}

th {
background-color: #1976d2; /* Medium blue header background */
color: #ffffff;
font-weight: 600;
font-size: 1.15em;
text-align: center; /* Center header text for clarity */
}

td {
background-color: #ffffff;
color: #444;
}

tr:nth-child(even) td {
background-color: #f9fdfd; /* Slightly different background for even rows */
}
tr:hover td {
background-color: #e3f2fd; /* Hover effect for rows */
}

/* Infographic simulation */
.infographic-box {
background-color: #e1f5fe; /* Lightest blue background */
border: 3px dashed #90caf9; /* Dashed blue border */
border-radius: 18px;
padding: 30px;
margin: 50px auto;
max-width: 85%;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 150, 255, 0.15);
position: relative;
overflow: hidden;
}

.infographic-box::before {
content: ‘📊’; /* Bar chart icon */
font-size: 3.5em;
color: #42a5f5; /* Light blue color */
position: absolute;
top: 20px;
left: 20px;
opacity: 0.8;
transform: rotate(-10deg);
}

.infographic-title {
font-size: 2em;
font-weight: 700;
color: #1565c0; /* Medium Blue */
margin-bottom: 25px;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.infographic-title::after {
content: ”;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: #2196f3;
border-radius: 5px;
}

.infographic-item {
display: flex;
align-items: flex-start; /* Align items to the top */
margin-bottom: 20px;
text-align: right;
background-color: #f4faff; /* Very light blue for items */
padding: 15px 20px;
border-radius: 10px;
border-right: 5px solid #90caf9;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
}
.infographic-item:hover {
background-color: #e3f2fd;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
}

.infographic-item span.icon {
font-size: 2em;
color: #2196f3; /* Brighter blue */
margin-left: 18px;
flex-shrink: 0; /* Prevent icon from shrinking */
}

.infographic-item p {
margin: 0;
flex-grow: 1;
font-size: 1.1em;
color: #444;
text-align: justify;
}

/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: 2.2em;
margin-bottom: 30px;
padding-bottom: 10px;
}
h1::after {
font-size: 0.5em;
bottom: -15px;
}
h2 {
font-size: 1.8em;
margin-top: 40px;
margin-bottom: 20px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
h3 {
font-size: 1.4em;
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.container {
margin: 10px;
padding: 20px;
}
p {
font-size: 1em;
}
ul li {
padding-right: 25px;
font-size: 1em;
}
.infographic-box {
max-width: 95%;
padding: 20px;
margin: 40px auto;
}
.infographic-title {
font-size: 1.7em;
}
.infographic-item {
flex-direction: row-reverse; /* Icons on the right for smaller screens */
justify-content: flex-end;
padding: 12px 15px;
}
.infographic-item span.icon {
margin-left: 0;
margin-right: 10px;
font-size: 1.8em;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.8em;
margin-bottom: 25px;
}
h1::after {
display: none; /* Hide accent for very small screens */
}
h2 {
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 15px;
padding-right: 12px;
}
h3 {
font-size: 1.2em;
margin-top: 25px;
margin-bottom: 10px;
padding-right: 8px;
}
.container {
padding: 15px;
margin: 5px;
}
p, ul li, table, th, td {
font-size: 0.95em;
}
table {
margin: 30px 0;
}
th, td {
padding: 12px 15px;
}
.infographic-box {
padding: 15px;
margin: 30px auto;
}
.infographic-title {
font-size: 1.4em;
}
.infographic-item {
padding: 10px 12px;
}
.infographic-item span.icon {
font-size: 1.5em;
margin-right: 8px;
}
}

/* Additional elements for visual appeal */
.section-divider {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #2196f3, rgba(0, 0, 0, 0));
margin: 60px 0;
opacity: 0.6;
border-radius: 2px;
}

.highlight-box {
background-color: #e8f5e9; /* Light green for important notes */
border-right: 6px solid #4caf50; /* Green border */
padding: 25px;
margin: 35px 0;
border-radius: 12px;
font-size: 1.05em;
color: #388e3c; /* Darker green text */
line-height: 1.7;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}
.highlight-box strong {
color: #2e7d32; /* Even darker green */
}

/* Blockquote for emphasis or key takeaways */
blockquote {
border-right: 5px solid #ff9800; /* Orange border */
background-color: #fff3e0; /* Light orange background */
padding: 20px 25px;
margin: 40px 0;
font-style: italic;
color: #e65100; /* Dark orange text */
font-size: 1.1em;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
blockquote p {
margin: 0;
color: #e65100;
}