/*
این کدهای CSS به منظور نمایش هرچه بهتر محتوا در ویرایشگرهای بلوک و کلاسیک و همچنین تضمین رسپانسیو بودن آن برای دستگاه‌های مختلف (موبایل، تبلت، لپ‌تاپ و تلویزیون) اضافه شده‌اند.
توجه داشته باشید که برخی از ویرایشگرها ممکن است تمام استایل‌های اینلاین یا تگ را به صورت کامل پشتیبانی نکنند، اما این ساختار کلی برای بهترین نمایش طراحی شده است.
*/

/* Global styles for better readability and responsiveness */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* A common Persian-friendly font */
line-height: 1.7; /* Enhanced readability */
color: #333; /* Dark grey for main text */
margin: 0;
padding: 0;
background-color: #f7f9fc; /* Soft, light background */
direction: rtl; /* Right-to-left for Persian */
text-align: right;
-webkit-font-smoothing: antialiased; /* Better font rendering */
-moz-osx-font-smoothing: grayscale;
}

/* Article container for width control and centering */
.article-container {
max-width: 960px; /* Wider for better desktop view */
margin: 25px auto;
padding: 35px;
background-color: #ffffff;
border-radius: 15px; /* Softer rounded corners */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Enhanced shadow for depth */
box-sizing: border-box; /* Include padding in width */
}

/* Heading styles */
h1 {
font-size: 2.8em; /* Larger for H1 */
color: #0a4f9b; /* Deep, professional blue */
text-align: center;
margin-bottom: 45px;
line-height: 1.3;
font-weight: 800; /* Extra bold */
position: relative;
padding-bottom: 15px;
}
h1::after { /* Decorative underline for H1 */
content: ”;
display: block;
width: 80px;
height: 4px;
background-color: #28a745; /* Accent green */
margin: 15px auto 0 auto;
border-radius: 2px;
}

h2 {
font-size: 2.2em; /* Larger for H2 */
color: #0b68b8; /* Slightly lighter blue */
margin-top: 50px;
margin-bottom: 28px;
padding-bottom: 12px;
border-bottom: 2px solid #e1efff; /* Subtle underline */
font-weight: 700; /* Bold */
}

h3 {
font-size: 1.8em;
color: #1a83cc; /* Brighter blue */
margin-top: 40px;
margin-bottom: 22px;
font-weight: 600; /* Semi-bold */
}

h4 {
font-size: 1.4em;
color: #555;
margin-top: 30px;
margin-bottom: 18px;
font-weight: 500;
}

p {
margin-bottom: 1.2em;
text-align: justify;
line-height: 1.8; /* Increased line height for paragraphs */
font-size: 1.05em;
}

ul {
list-style-type: none; /* Remove default bullet */
padding-right: 0;
margin-right: 0;
margin-top: 20px;
margin-bottom: 20px;
}

ul li {
position: relative;
padding-right: 35px; /* Space for custom bullet */
margin-bottom: 15px;
text-align: justify;
line-height: 1.6;
font-size: 1.05em;
}

ul li::before {
content: ‘✓’; /* Custom bullet icon – Unicode checkmark */
color: #28a745; /* Green checkmark */
position: absolute;
right: 0;
font-weight: bold;
font-size: 1.2em;
top: 0;
}

strong {
color: #0a4f9b; /* Emphasize with deep blue */
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin: 35px 0;
background-color: #ffffff;
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners apply to content */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
table-layout: fixed; /* For better column width control */
}

table th, table td {
border: 1px solid #e9ecef; /* Lighter border */
padding: 18px 22px;
text-align: right;
word-wrap: break-word; /* Ensure text wraps within cells */
}

table th {
background-color: #edf5ff; /* Very light blue header */
color: #0a4f9b;
font-weight: 700;
font-size: 1.15em;
text-align: center; /* Center header text */
}

table tr:nth-child(even) {
background-color: #fcfdff; /* Subtle alternating row color */
}
table tr:hover {
background-color: #f5faff; /* Light hover effect */
}
table td {
font-size: 1.0em;
}

/* Infographic styling – Designed to be beautiful and responsive */
.infographic-section {
background-color: #eaf4ff; /* Soft light blue background */
padding: 40px 30px;
margin: 45px 0;
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
text-align: center;
}

.infographic-title {
font-size: 2em;
color: #0a4f9b;
margin-bottom: 35px;
font-weight: 700;
position: relative;
padding-bottom: 10px;
}
.infographic-title::after { /* Decorative line under infographic title */
content: ”;
display: block;
width: 60px;
height: 3px;
background-color: #1a83cc;
margin: 10px auto 0 auto;
border-radius: 1.5px;
}

.infographic-cards-container {
display: flex;
flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
justify-content: center; /* Centers cards when they don’t fill the row */
gap: 30px; /* Space between cards */
}

.infographic-card {
background-color: #ffffff;
border: 1px solid #cceeff; /* Light blue border */
border-radius: 12px;
padding: 30px;
width: 290px; /* Fixed width for larger screens */
min-height: 200px; /* Minimum height for visual consistency */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.infographic-card:hover {
transform: translateY(-10px); /* Lift effect on hover */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); /* Enhanced shadow on hover */
}

.infographic-icon {
font-size: 4em; /* Larger icon size */
color: #1a83cc; /* Accent blue for icons */
margin-bottom: 18px;
line-height: 1;
font-weight: 300; /* Lighter weight for icons if they are text */
}

.infographic-card-text {
font-size: 1.2em;
color: #4a4a4a;
font-weight: 600; /* Semi-bold text */
line-height: 1.5;
}

/* Responsive adjustments for various screen sizes */
@media (max-width: 1200px) {
.article-container {
max-width: 90%; /* Slightly more fluid on larger tablets/smaller laptops */
}
}

@media (max-width: 992px) { /* Tablets and smaller laptops */
.article-container {
padding: 30px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.6em;
}
.infographic-card {
width: 45%; /* Two cards per row */
}
}

@media (max-width: 768px) { /* Mobile and small tablets */
.article-container {
margin: 15px auto;
padding: 25px;
border-radius: 10px;
}
h1 {
font-size: 2.2em;
margin-bottom: 35px;
}
h2 {
font-size: 1.9em;
margin-top: 40px;
}
h3 {
font-size: 1.5em;
margin-top: 30px;
}
p, ul li, table td {
font-size: 1em;
}
table th, table td {
padding: 15px 18px;
}
.infographic-section {
padding: 30px 20px;
margin: 35px 0;
border-radius: 10px;
}
.infographic-title {
font-size: 1.8em;
margin-bottom: 25px;
}
.infographic-cards-container {
flex-direction: column; /* Stack cards vertically */
align-items: center; /* Center stacked cards */
}
.infographic-card {
width: 100%; /* Full width for cards */
max-width: 380px; /* Limit max width for readability */
padding: 25px;
min-height: 180px;
}
.infographic-icon {
font-size: 3.5em;
}
.infographic-card-text {
font-size: 1.1em;
}
}

@media (max-width: 480px) { /* Extra small mobile devices */
.article-container {
margin: 10px auto;
padding: 18px;
}
h1 {
font-size: 1.8em;
margin-bottom: 25px;
}
h1::after {
width: 60px;
height: 3px;
margin: 10px auto 0 auto;
}
h2 {
font-size: 1.6em;
margin-top: 30px;
padding-bottom: 8px;
}
h3 {
font-size: 1.3em;
margin-top: 25px;
}
p, ul li, table td {
font-size: 0.95em;
line-height: 1.7;
}
ul li::before {
font-size: 1.1em;
right: 0px; /* Adjust if checkmark gets cut off */
}
table th, table td {
padding: 12px 15px;
font-size: 0.9em;
}
.infographic-section {
padding: 25px 15px;
margin: 30px 0;
}
.infographic-title {
font-size: 1.6em;
margin-bottom: 20px;
}
.infographic-icon {
font-size: 3em;
margin-bottom: 12px;
}
.infographic-card-text {
font-size: 1em;
}
}