/* Basic Reset & Font Setup for Readability across devices */
body, h1, h2, h3, p, ul, ol, table, div {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: “Vazirmatn”, “IRANSansX”, “Roboto”, “Helvetica Neue”, Arial, sans-serif; /* Prioritize common Persian fonts */
color: #333; /* Dark gray for main text */
line-height: 1.7; /* Good line spacing for readability */
font-size: 1rem; /* Base font size for paragraphs, adjusts responsively */
}

/* Article Container for Responsiveness and Centering */
.article-container {
max-width: 850px; /* Max width for large screens */
margin: 0 auto; /* Center the content */
padding: 25px;
background-color: #ffffff; /* Clean white background */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* More prominent shadow for a modern look */
border-radius: 12px; /* Slightly more rounded corners */
overflow-x: hidden; /* Prevent horizontal scroll on small screens for elements that might slightly overflow */
}

/* Responsive Font Sizes and Styling for Headings */
h1 {
font-size: clamp(2rem, 5.5vw, 3.2rem); /* Dynamic font size for H1 */
font-weight: 900; /* Extra extra bold */
color: #0A2F50; /* Very deep blue for primary heading */
margin-bottom: 30px;
text-align: center;
padding-bottom: 20px;
border-bottom: 4px solid #1A73E8; /* Stronger underline for H1 */
line-height: 1.3;
}

h2 {
font-size: clamp(1.6rem, 4.5vw, 2.5rem); /* Dynamic font size for H2 */
font-weight: 700; /* Bold */
color: #1A73E8; /* Google-like blue for H2 */
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 12px;
border-bottom: 2px solid #E0E0E0;
}

h3 {
font-size: clamp(1.2rem, 3.5vw, 1.8rem); /* Dynamic font size for H3 */
font-weight: 600; /* Semi-bold */
color: #2F80ED; /* Lighter blue for H3 */
margin-top: 35px;
margin-bottom: 18px;
}

p {
margin-bottom: 1.2rem;
text-align: justify;
direction: rtl; /* Right-to-left for Persian text */
line-height: 1.8;
}

ul, ol {
margin-bottom: 1.5rem;
padding-right: 25px; /* Indent for lists */
direction: rtl;
text-align: right;
list-style-position: outside; /* Bullet/number outside text block */
}

ul li, ol li {
margin-bottom: 0.8rem;
}

a {
color: #1A73E8; /* Consistent blue for links */
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: #0A2F50;
text-decoration: underline;
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 0.98rem;
text-align: right; /* RTL alignment */
direction: rtl;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow for tables */
border-radius: 8px; /* Rounded corners for table */
overflow: hidden; /* Ensures rounded corners are visible */
}

table th, table td {
border: 1px solid #EFEFEF; /* Lighter border for a cleaner look */
padding: 14px 18px;
vertical-align: top; /* Align content to top for better readability */
}

table thead th {
background-color: #1A73E8; /* Header background blue */
color: white;
font-weight: bold;
text-align: center; /* Center header text */
}

table tbody tr:nth-child(even) {
background-color: #F8F9FA; /* Light gray for even rows */
}

table tbody tr:hover {
background-color: #E6F2FF; /* Light blue on hover */
}

/* Infographic Simulation */
.infographic-container {
display: flex;
flex-direction: column; /* Stack vertically for all screen sizes */
gap: 20px; /* Space between steps */
margin: 45px 0;
padding: 25px;
background-color: #E6F2FF; /* Very light blue background */
border-radius: 15px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
text-align: center;
direction: rtl;
}

.infographic-title {
font-size: clamp(1.3rem, 3.5vw, 1.9rem);
font-weight: 700;
color: #0A2F50;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px dashed #1A73E8; /* Dashed line for visual appeal */
}

.infographic-step {
background-color: #ffffff;
border: 2px solid #2F80ED;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 20px;
text-align: right;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infographic-step:hover {
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.infographic-step-icon {
font-size: clamp(2.2rem, 5vw, 3rem); /* Responsive icon size */
color: #1A73E8;
flex-shrink: 0; /* Prevent icon from shrinking */
background-color: #E6F2FF;
border-radius: 50%;
padding: 10px;
line-height: 1; /* Ensure icon is centered vertically */
display: flex;
align-items: center;
justify-content: center;
width: 50px; /* Fixed width/height for circular icons */
height: 50px;
}

.infographic-step-text {
font-size: clamp(1rem, 2.5vw, 1.15rem);
color: #333;
flex-grow: 1;
font-weight: 500;
}

.infographic-arrow {
font-size: clamp(2.5rem, 6vw, 3.5rem);
color: #1A73E8;
margin: 0 auto; /* Center arrow */
font-weight: bolder;
line-height: 1;
opacity: 0.8;
}

/* Table of Contents */
.toc {
background-color: #F0F5F9; /* Light, calming gray-blue */
border: 1px solid #D0D7DE;
padding: 20px;
border-radius: 10px;
margin-bottom: 40px;
direction: rtl;
text-align: right;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.toc-title {
font-weight: bold;
font-size: clamp(1.1rem, 3vw, 1.4rem);
color: #0A2F50;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 1px solid #D0D7DE;
}

.toc ul {
list-style-type: none;
padding: 0;
margin: 0;
line-height: 1.6;
}

.toc ul li {
margin-bottom: 8px;
}

.toc ul li a {
color: #1A73E8;
text-decoration: none;
font-size: clamp(0.9rem, 2.5vw, 1rem);
padding: 3px 0;
display: block;
}

.toc ul li a:hover {
color: #0A2F50;
text-decoration: underline;
}

.toc ul ul { /* Sub-level for H3 */
padding-right: 25px; /* Deeper indent for sub-items */
margin-top: 5px;
border-right: 2px solid #E0E0E0; /* Visual line for hierarchy */
padding-bottom: 5px;
}
.toc ul ul li {
margin-bottom: 5px;
}

/* FAQ Section Styling */
.faq-item {
margin-bottom: 25px;
padding: 20px;
border: 1px solid #E0E0E0;
border-radius: 8px;
background-color: #FDFEFE;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
direction: rtl;
text-align: right;
}
.faq-question {
font-weight: 700;
color: #0A2F50;
margin-bottom: 12px;
font-size: clamp(1.1rem, 3vw, 1.5rem);
display: block; /* Make H3 act as block for FAQ question */
}
.faq-answer {
color: #555;
text-align: justify;
line-height: 1.8;
font-size: clamp(0.95rem, 2.5vw, 1.05rem);
}