/* Global Styles for Responsiveness and Aesthetics */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* Fallback fonts */
margin: 0;
padding: 0;
background-color: #F7F7F7; /* Light background for overall page */
color: #333;
line-height: 1.7;
}

.article-container {
max-width: 900px; /* Max width for readability on large screens */
margin: 20px auto; /* Center content, add vertical margin */
padding: 25px;
background-color: #FFFFFF; /* White background for the article content */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Soft shadow for depth */
border-radius: 12px; /* Rounded corners for modern look */
overflow-x: hidden; /* Prevent horizontal scroll for responsive elements */
}

/* Heading Styles */
h1 {
font-size: 2.6em; /* Larger for H1 */
font-weight: 800; /* Extra bold for prominence */
color: #1A4D2E; /* Deep Teal/Forest Green – Professional & Strategic */
text-align: center;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 3px solid #D2E0FB; /* Light blue underline */
line-height: 1.3;
}

h2 {
font-size: 2.1em; /* Substantial size for H2 */
font-weight: 700; /* Bold */
color: #4F8A8B; /* Teal Blue – Slightly softer than H1 */
margin-top: 45px;
margin-bottom: 20px;
border-bottom: 2px solid #D2E0FB; /* Lighter underline */
padding-bottom: 8px;
line-height: 1.4;
}

h3 {
font-size: 1.6em; /* Clear size for H3 */
font-weight: 600; /* Semi-bold */
color: #6D9EBE; /* Sky Blue – Distinct from H1/H2 */
margin-top: 30px;
margin-bottom: 15px;
line-height: 1.5;
}

/* Paragraph Styles */
p {
font-size: 1.15em; /* Readable font size */
line-height: 1.9; /* Generous line spacing for readability */
margin-bottom: 1.4em;
text-align: justify; /* Justify text for clean edges */
color: #3D3D3D;
}

/* List Styles */
ul, ol {
list-style-position: inside; /* Ensures bullets/numbers stay within text flow */
padding-left: 0; /* Remove default padding */
margin-bottom: 1.5em;
}

ul li, ol li {
font-size: 1.1em;
line-height: 1.8;
margin-bottom: 0.8em;
padding-left: 25px; /* Indent list items */
position: relative;
color: #444;
}

ul li::before {
content: ‘▪’; /* Custom bullet point */
color: #4F8A8B; /* Teal bullet color */
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
position: absolute;
left: 0;
}

ol li {
counter-increment: list-counter;
}

ol li::before {
content: counter(list-counter) “. “; /* Custom numbered list */
color: #1A4D2E;
font-weight: bold;
display: inline-block;
width: 1.5em;
margin-left: -1.5em;
position: absolute;
left: 0;
text-align: right;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse; /* Remove double borders */
margin-top: 30px;
margin-bottom: 40px;
font-size: 1.05em;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Soft shadow for table */
border-radius: 8px; /* Rounded corners for table */
overflow: hidden; /* Ensures rounded corners apply to content */
}

th, td {
border: 1px solid #E0E0E0; /* Light border color */
padding: 15px 18px; /* Ample padding */
text-align: right; /* Align text to the right for Persian */
}

th {
background-color: #F0F8FF; /* Light blue header background */
font-weight: 700;
color: #1A4D2E; /* Darker text for headers */
font-size: 1.1em;
}

tr:nth-child(even) {
background-color: #FDFDFD; /* Slightly different background for even rows */
}

tr:hover {
background-color: #F5F9FC; /* Subtle hover effect */
}

/* Infographic Alternative (Visual Block) */
.infographic-block {
background-color: #EBF5FB; /* Light blue background */
border-left: 6px solid #6D9EBE; /* Strong left border as a visual cue */
padding: 25px 30px;
margin: 35px 0;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
position: relative;
overflow: hidden;
}

.infographic-block h3 {
color: #1A4D2E;
margin-top: 0;
margin-bottom: 15px;
font-size: 1.7em;
border-bottom: none;
padding-bottom: 0;
}

.infographic-block ul {
list-style: none; /* Remove default list style */
padding-left: 0;
margin-top: 15px;
}

.infographic-block ul li {
font-size: 1.1em;
line-height: 2;
margin-bottom: 10px;
display: flex; /* Use flexbox for icon alignment */
align-items: flex-start;
color: #4F4F4F;
}

.infographic-block ul li .icon {
font-size: 1.5em;
color: #4F8A8B;
margin-left: 15px; /* Space between icon and text */
line-height: 1;
flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Table of Contents Simulation (Visual) */
.toc-simulation {
background-color: #F8FCF8; /* Very light green background */
border: 1px solid #D9F7DC; /* Light green border */
padding: 20px 25px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.toc-simulation h3 {
color: #1A4D2E;
margin-top: 0;
margin-bottom: 15px;
font-size: 1.6em;
text-align: right;
border-bottom: none;
padding-bottom: 0;
}

.toc-simulation ul {
list-style: none;
padding-left: 0;
}

.toc-simulation ul li {
font-size: 1.05em;
line-height: 1.8;
margin-bottom: 8px;
padding-left: 0;
position: relative;
}

.toc-simulation ul li::before {
content: ‘▪’; /* Custom bullet point */
color: #6D9EBE; /* Bullet color */
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
position: absolute;
right: 0; /* Align bullet to the right for RTL */
left: auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.article-container {
margin: 10px auto;
padding: 15px;
border-radius: 0; /* No rounded corners on small screens for full width */
box-shadow: none; /* No shadow on small screens */
}

h1 {
font-size: 2.1em;
margin-bottom: 20px;
}

h2 {
font-size: 1.7em;
margin-top: 35px;
margin-bottom: 15px;
}

h3 {
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 10px;
}

p, ul li, ol li, table, .infographic-block ul li {
font-size: 1em;
}

th, td {
padding: 10px 12px;
}

.infographic-block {
padding: 20px 25px;
margin: 25px 0;
}

.infographic-block ul li .icon {
margin-left: 10px;
font-size: 1.3em;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.8em;
margin-bottom: 15px;
}

h2 {
font-size: 1.5em;
margin-top: 30px;
}

h3 {
font-size: 1.2em;
margin-top: 20px;
}
p {
line-height: 1.8;
}
.infographic-block {
padding: 15px 20px;
}
}
/* RTL adjustments */
body {
direction: rtl;
text-align: right;
}
.infographic-block ul li .icon {
margin-right: 15px; /* Adjust margin for RTL */
margin-left: 0;
}
ul li::before {
right: 0;
left: auto;
}
ol li::before {
right: 0;
left: auto;
}
.toc-simulation ul li::before {
right: 0;
left: auto;
}