/* Global Styles for Readability and Responsiveness */
body {
font-family: ‘Tahoma’, ‘Arial’, ‘Helvetica Neue’, sans-serif;
margin: 0;
padding: 0;
background-color: #f7f9fb; /* Light background for the whole page */
color: #333;
line-height: 1.7;
direction: rtl; /* For Persian/Arabic content */
text-align: right; /* Default text alignment for RTL */
}

.article-container {
max-width: 900px;
margin: 40px auto;
padding: 30px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
box-sizing: border-box; /* Include padding in width calculation */
overflow-x: hidden; /* Prevent horizontal scroll on small screens */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.article-container {
margin: 20px auto;
padding: 20px;
border-radius: 8px;
}
h1 { font-size: 2em !important; }
h2 { font-size: 1.6em !important; }
h3 { font-size: 1.2em !important; }
p, li, table, .infographic-item { font-size: 0.95em !important; }
}

/* Headings */
h1 {
font-size: 2.8em;
font-weight: 800; /* Extra bold */
color: #2C3E50; /* Dark blue-gray */
text-align: center;
margin-bottom: 35px;
line-height: 1.2;
padding-bottom: 10px;
border-bottom: 3px solid #E0E0E0; /* Subtle separator */
}

h2 {
font-size: 2.1em;
font-weight: 700; /* Bold */
color: #34495E; /* Medium blue-gray */
margin-top: 50px;
margin-bottom: 25px;
border-bottom: 2px solid #BDC3C7; /* Light gray border */
padding-bottom: 12px;
position: relative;
padding-left: 20px; /* Space for the pseudo-element on the left (for RTL) */
}
h2::before {
content: ‘▪’; /* Stylish bullet */
color: #2980B9; /* Accent blue */
position: absolute;
left: 0; /* Position to the left for RTL */
font-size: 1.2em;
top: 5px;
}

h3 {
font-size: 1.6em;
font-weight: 600; /* Semi-bold */
color: #2980B9; /* Accent blue */
margin-top: 35px;
margin-bottom: 20px;
padding-left: 15px; /* Indent for visual hierarchy */
border-left: 4px solid #85C1E9; /* Accent border on the left for RTL */
}

/* Paragraphs & Lists */
p {
font-size: 1.1em;
line-height: 1.9;
color: #444;
margin-bottom: 18px;
text-align: justify;
}

ul {
list-style: none; /* Remove default bullet */
padding-right: 0; /* Remove default padding */
padding-left: 20px; /* Add padding for custom bullet */
margin-bottom: 20px;
}
ul li {
position: relative;
padding-left: 30px; /* Space for custom bullet */
margin-bottom: 10px;
font-size: 1.05em;
color: #555;
line-height: 1.7;
}
ul li::before {
content: ‘✔’; /* Custom checkmark bullet */
color: #2ECC71; /* Green checkmark */
font-weight: bold;
position: absolute;
left: 0; /* Position to the left for RTL */
top: 0; /* Adjust vertical alignment */
}

ol {
padding-right: 0; /* Remove default padding */
padding-left: 25px; /* Add padding for numbered list */
margin-bottom: 20px;
}
ol li {
margin-bottom: 10px;
font-size: 1.05em;
color: #555;
line-height: 1.7;
}

/* Table Styles */
table {
width: 100%;
border-collapse: separate; /* For rounded corners on cells */
border-spacing: 0;
margin-top: 25px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners apply */
direction: rtl; /* Ensure table content is RTL */
}
th, td {
border: 1px solid #EAEAEA;
padding: 15px 20px;
text-align: right;
vertical-align: top;
font-size: 1em;
color: #444;
}
th {
background-color: #F8F8F8; /* Lighter background for headers */
font-weight: 700;
color: #333;
position: sticky; /* Sticky headers for scrollable tables */
top: 0;
z-index: 1;
}
tr:nth-child(even) {
background-color: #FDFDFD; /* Zebra striping */
}
tr:hover {
background-color: #F2F9FF; /* Highlight row on hover */
}
/* Responsive table (optional, but good practice for small screens) */
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; margin-bottom: 10px; border-radius: 5px; }
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%; /* Adjust padding for data-label on the left for RTL */
text-align: right; /* Align content to right */
}
td:before {
position: absolute;
top: 6px;
left: 6px; /* Position data-label to the left for RTL */
width: 45%;
padding-right: 10px; /* Padding for text */
white-space: nowrap;
content: attr(data-label); /* Use data-label for column names */
font-weight: bold;
color: #777;
text-align: left; /* Align data-label text to left */
}
td:last-child { border-bottom: 0; }
}

/* Infographic Alternative Styles (Card-based layout) */
.infographic-container {
display: flex;
flex-wrap: wrap; /* Allows items to wrap on smaller screens */
gap: 25px; /* Space between cards */
margin-top: 30px;
margin-bottom: 40px;
justify-content: center; /* Center cards */
}

.infographic-item {
background-color: #ECF0F1; /* Light gray-blue background */
border-radius: 10px;
padding: 25px;
flex: 1 1 calc(33% – 25px); /* Three items per row, with gap */
min-width: 280px; /* Minimum width before wrapping */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infographic-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.infographic-icon {
font-size: 3em;
color: #2980B9; /* Accent blue */
margin-bottom: 15px;
display: block;
}

.infographic-title {
font-size: 1.3em;
font-weight: 700;
color: #34495E;
margin-bottom: 10px;
}

.infographic-description {
font-size: 1em;
color: #555;
line-height: 1.6;
}

/* Responsive adjustments for infographic */
@media (max-width: 768px) {
.infographic-item {
flex: 1 1 calc(50% – 25px); /* Two items per row on tablets */
}
}
@media (max-width: 480px) {
.infographic-item {
flex: 1 1 100%; /* One item per row on mobile */
}
.infographic-container {
gap: 15px;
}
}

/* Table of Contents */
.table-of-contents {
background-color: #FBFDFE;
border: 1px solid #DCE6EB;
border-radius: 10px;
padding: 25px;
margin-bottom: 40px;
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}
.table-of-contents h3 {
color: #2C3E50;
margin-top: 0;
margin-bottom: 20px;
border-left: none; /* No border for TOC h3 */
padding-left: 0;
text-align: center;
font-size: 1.5em;
font-weight: 700;
}
.table-of-contents ul {
list-style: none;
padding: 0;
}
.table-of-contents ul li {
margin-bottom: 10px;
padding-left: 0; /* Remove custom bullet */
position: relative;
font-size: 1.05em;
}
.table-of-contents ul li::before {
content: ‘•’; /* Simple dot bullet */
color: #2980B9;
font-weight: bold;
position: absolute;
left: 0; /* Position to the left for RTL */
top: 0;
}
.table-of-contents ul li a {
color: #34495E;
text-decoration: none;
transition: color 0.2s ease;
display: block;
padding-left: 20px; /* Space for bullet */
}
.table-of-contents ul li a:hover {
color: #2980B9;
text-decoration: underline;
}

/* Question & Answer (FAQ) styling */
.faq-section {
margin-top: 40px;
background-color: #F8FCFF;
border-radius: 10px;
padding: 25px 30px;
border: 1px solid #E1EDF7;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}
.faq-question {
font-weight: 700;
color: #2980B9;
font-size: 1.15em;
margin-bottom: 10px;
display: flex;
align-items: center;
text-align: right; /* Ensure question text is right-aligned */
}
.faq-question::before {
content: ‘❓’;
margin-right: 10px; /* Space for icon on the right for RTL */
margin-left: 0;
font-size: 1.3em;
}
.faq-answer {
font-size: 1.05em;
color: #555;
margin-bottom: 20px;
padding-left: 30px; /* Align with question text on the left for RTL */
text-align: justify;
}

/* Ensure images are responsive */
img {
max-width: 100%;
height: auto;
display: block; /* Remove extra space below image */
margin: 20px auto; /* Center images */
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}