/* —————————————————- */
/* Base Styles for Readability and Responsiveness (Responsive for all devices) */
/* —————————————————- */
body {
font-family: ‘Vazirmatn’, ‘BlinkMacSystemFont’, ‘Segoe UI’, ‘Roboto’, ‘Oxygen’, ‘Ubuntu’, ‘Cantarell’, ‘Fira Sans’, ‘Droid Sans’, ‘Helvetica Neue’, sans-serif;
line-height: 1.8;
color: #333;
background-color: #f9fafa; /* Very light gray background for the page */
margin: 0;
padding: 0;
direction: rtl; /* For Persian text, aligns content right */
text-align: justify; /* Justify text for a clean and professional look */
-webkit-font-smoothing: antialiased; /* Smoother font rendering */
-moz-osx-font-smoothing: grayscale; /* Smoother font rendering */
}

/* Main Container for the Article – Ensures content doesn’t stretch too wide on large screens */
.container {
max-width: 900px; /* Optimal reading width */
margin: 40px auto; /* Centering the container with vertical spacing */
padding: 30px;
background-color: #fff; /* White background for the article content */
border-radius: 12px; /* Slightly rounded corners for a modern feel */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Soft shadow for depth */
border: 1px solid #eee; /* Subtle border */
}

/* —————————————————- */
/* Heading Styles (H1, H2, H3) – Designed for Hierarchy and Visual Appeal */
/* —————————————————- */
h1 {
font-size: 2.8em; /* Large size for main title */
font-weight: 800; /* Extra bold for prominence */
color: #0056b3; /* Dark blue, professional and trustworthy */
margin-bottom: 25px;
text-align: center;
line-height: 1.3;
border-bottom: 3px solid #007bff; /* A vibrant blue underline for emphasis */
padding-bottom: 15px;
font-family: ‘Vazirmatn’, sans-serif; /* Ensure consistent font */
}

h2 {
font-size: 2.2em;
font-weight: 700;
color: #004085; /* Slightly darker blue than H1 */
margin-top: 40px;
margin-bottom: 20px;
padding-right: 15px; /* Indent for visual separation from left edge */
border-right: 5px solid #007bff; /* Stronger accent border on the right */
font-family: ‘Vazirmatn’, sans-serif;
}

h3 {
font-size: 1.7em;
font-weight: 600;
color: #0056b3; /* Same as H1 for sub-sections */
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
border-right: 3px solid #add8e6; /* Lighter blue accent border */
font-family: ‘Vazirmatn’, sans-serif;
}

/* —————————————————- */
/* Text and List Styles */
/* —————————————————- */
p {
margin-bottom: 1.2em;
line-height: 1.9; /* Increased line height for better readability */
font-size: 1.05em; /* Slightly larger base font size */
text-align: justify;
}

ul, ol {
margin-bottom: 1.5em;
padding-right: 25px; /* Indent lists for better structure */
font-size: 1.05em;
line-height: 1.8;
}

li {
margin-bottom: 0.8em;
}

strong {
color: #0056b3; /* Emphasized text in dark blue */
font-weight: 600;
}

/* —————————————————- */
/* Table Styles – Clean and Readable */
/* —————————————————- */
table {
width: 100%;
border-collapse: collapse; /* Removes double borders */
margin: 30px 0;
font-size: 1em;
box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Soft shadow for table */
border-radius: 8px; /* Rounded corners for the table */
overflow: hidden; /* Ensures rounded corners are applied to content */
}

th, td {
border: 1px solid #e0e0e0; /* Light gray borders */
padding: 15px;
text-align: right; /* Align right for RTL text */
}

th {
background-color: #e6f2ff; /* Light blue header background */
color: #004085;
font-weight: bold;
font-size: 1.1em;
}

tr:nth-child(even) {
background-color: #f8fcfd; /* Subtle alternating row background for readability */
}

/* —————————————————- */
/* Infographic Style (Simulated for Block Editor Compatibility) */
/* This section creates a visually distinct block using emojis and styling */
/* —————————————————- */
.infographic-block {
background-color: #e6f7ff; /* Very light blue background for the block */
border-left: 8px solid #007bff; /* Strong left border as an accent */
padding: 25px 30px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
display: flex; /* Flexbox for layout of items */
flex-direction: column; /* Stack items vertically */
gap: 15px; /* Space between infographic items */
}

.infographic-item {
display: flex;
align-items: flex-start; /* Align icon and text at the top */
gap: 15px;
}

.infographic-icon {
font-size: 2.2em; /* Larger icon size */
color: #007bff; /* Icon color */
line-height: 1; /* Adjust line height for icons */
flex-shrink: 0; /* Prevent icon from shrinking on small screens */
}

.infographic-text {
font-size: 1.15em;
color: #222;
font-weight: 500;
line-height: 1.6;
}

.infographic-text strong {
color: #004085;
}

/* —————————————————- */
/* FAQ Section Styles – Clear and Accessible */
/* —————————————————- */
.faq-container {
margin-top: 50px;
background-color: #f0f8ff; /* Lightest blue background */
padding: 30px;
border-radius: 10px;
border: 1px solid #d0e8ff;
}

.faq-question {
font-size: 1.25em;
font-weight: 600;
color: #0056b3;
margin-bottom: 10px;
padding-right: 10px;
border-right: 4px solid #007bff; /* Accent border for questions */
}

.faq-answer {
font-size: 1.1em;
margin-bottom: 25px;
padding-right: 15px;
line-height: 1.8;
}

/* —————————————————- */
/* General Link Style */
/* —————————————————- */
a {
color: #007bff; /* Standard blue for links */
text-decoration: none; /* No underline by default */
transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition on hover */
}

a:hover {
color: #0056b3; /* Darker blue on hover */
text-decoration: underline; /* Underline on hover */
}

/* —————————————————- */
/* Responsive Adjustments (for Mobile, Tablet, Laptop, TV) */
/* —————————————————- */

/* For Tablets and smaller laptops (up to 768px wide) */
@media (max-width: 768px) {
.container {
margin: 20px auto; /* Less vertical margin */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Lighter shadow */
}

h1 {
font-size: 2.2em; /* Smaller H1 */
margin-bottom: 20px;
padding-bottom: 10px;
}

h2 {
font-size: 1.8em; /* Smaller H2 */
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
}

h3 {
font-size: 1.4em; /* Smaller H3 */
margin-top: 25px;
margin-bottom: 10px;
padding-right: 8px;
}

p, ul, ol, li, .infographic-text, .faq-answer {
font-size: 1em; /* Base font size for better fit */
}

th, td {
padding: 12px; /* Less padding in tables */
}

.infographic-block {
padding: 20px;
}

.infographic-icon {
font-size: 1.8em; /* Smaller icons */
}
}

/* For Mobile Phones (up to 480px wide) */
@media (max-width: 480px) {
.container {
margin: 15px auto;
padding: 15px;
border-radius: 6px;
}

h1 {
font-size: 1.8em; /* Even smaller H1 */
margin-bottom: 15px;
padding-bottom: 8px;
}

h2 {
font-size: 1.5em; /* Even smaller H2 */
margin-top: 25px;
border-right: 3px solid #007bff; /* Thinner border */
}

h3 {
font-size: 1.2em; /* Even smaller H3 */
margin-top: 20px;
border-right: 2px solid #add8e6;
}

p {
line-height: 1.7; /* Slightly reduced line height for mobile */
}

ul, ol {
padding-right: 20px; /* Slightly less indent */
}

th, td {
padding: 10px;
font-size: 0.9em; /* Smaller text in tables */
}

.infographic-block {
padding: 15px;
gap: 10px;
}

.infographic-item {
flex-direction: column; /* Stack icon and text vertically on very small screens */
align-items: center; /* Center items when stacked */
text-align: center;
}

.infographic-icon {
margin-bottom: 5px; /* Space between icon and text when stacked */
font-size: 1.5em;
}

.faq-question {
font-size: 1.1em;
padding-right: 8px;
border-right: 3px solid #007bff;
}

.faq-answer {
font-size: 1em;
padding-right: 10px;
}
}

/* For TV / Larger Displays (Example – can be adjusted based on specific needs) */
@media (min-width: 1200px) {
.container {
max-width: 1000px; /* Slightly wider container for very large screens */
padding: 40px;
margin: 60px auto;
}
h1 {
font-size: 3.5em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 2em;
}
p, ul, ol, li, .infographic-text, .faq-answer {
font-size: 1.15em;
}
.infographic-icon {
font-size: 2.5em;
}
}

/* Ensure Vazirmatn is loaded for best experience, if not available on system */
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/web/fonts/Vazirmatn-Regular.woff2’) format(‘woff2’);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/web/fonts/Vazirmatn-SemiBold.woff2’) format(‘woff2’);
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/web/fonts/Vazirmatn-Bold.woff2’) format(‘woff2’);
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/web/fonts/Vazirmatn-ExtraBold.woff2’) format(‘woff2’);
font-weight: 800;
font-style: normal;
font-display: swap;
}