/* Basic reset and typography for better block editor compatibility and consistency */
body, h1, h2, h3, p, ul, ol, li, table, th, td, div {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Vazirmatn’, ‘Arial’, ‘Helvetica’, sans-serif; /* Added a common Persian-friendly font */
line-height: 1.6;
color: #333; /* Primary text color */
}

/* Ensure Vazirmatn font is loaded if available, or fall back */
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/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/fonts/webfonts/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/fonts/webfonts/Vazirmatn-SemiBold.woff2’) format(‘woff2’);
font-weight: 600;
font-style: normal;
font-display: swap;
}

/* Container for the entire article to simulate max-width on larger screens and responsiveness */
.article-container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Styling for the main title (H1) */
.h1-custom {
font-size: 2.5em; /* Responsive font size */
font-weight: bold;
color: #004d40; /* Dark teal for headings */
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 3px solid #00796b; /* Accent border */
position: relative;
}
.h1-custom::after {
content: ”;
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 6px;
background-color: #e0f7fa; /* Light accent */
border-radius: 3px;
}

/* Styling for H2 headings */
.h2-custom {
font-size: 1.8em; /* Responsive font size */
font-weight: 700;
color: #004d40; /* Dark teal */
margin-top: 40px;
margin-bottom: 20px;
padding: 12px 20px;
background-color: #e0f2f7; /* Light blue-grey background */
border-right: 8px solid #00796b; /* Accent border */
border-radius: 6px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
}

/* Styling for H3 headings */
.h3-custom {
font-size: 1.4em; /* Responsive font size */
font-weight: 600;
color: #00695c; /* Slightly lighter teal */
margin-top: 30px;
margin-bottom: 15px;
padding: 10px 15px;
border-bottom: 2px dashed #b2dfdb; /* Subtle dashed border */
}

/* General paragraph styling */
p {
margin-bottom: 1.2em;
line-height: 1.8;
text-align: justify;
color: #444;
}

/* List styling */
ul, ol {
margin-bottom: 1.2em;
margin-right: 25px; /* Indent lists for RTL */
padding-left: 0;
}
ul li, ol li {
margin-bottom: 0.6em;
color: #444;
}

/* Table of Contents specific styling */
.toc-container {
background-color: #f9fdfd;
border: 1px solid #e0f7fa;
border-radius: 10px;
padding: 25px;
margin-bottom: 35px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}
.toc-title {
font-size: 1.6em;
font-weight: bold;
color: #004d40;
margin-bottom: 20px;
text-align: center;
border-bottom: 2px solid #b2dfdb;
padding-bottom: 12px;
}
.toc-list ul {
list-style: none; /* Remove default bullet */
margin-right: 0; /* Reset default margin */
}
.toc-list li {
margin-bottom: 10px;
padding-right: 28px; /* Space for custom bullet */
position: relative;
font-size: 1.08em;
}
.toc-list li::before {
content: ‘•’; /* Custom bullet point */
color: #00796b;
font-weight: bold;
display: inline-block;
width: 1em;
margin-right: -1.8em; /* Adjust to align for RTL */
position: absolute;
right: 0;
}
.toc-list a {
color: #00796b;
text-decoration: none;
transition: color 0.3s ease;
}
.toc-list a:hover {
color: #004d40;
text-decoration: underline;
}

/* Table styling */
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 0.95em;
min-width: 400px; /* Minimum width before horizontal scroll */
box-shadow: 0 0 25px rgba(0, 0, 0, 0.12);
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners apply to content */
}
.styled-table thead tr {
background-color: #00796b; /* Header background */
color: #ffffff;
text-align: right; /* RTL alignment */
}
.styled-table th,
.styled-table td {
padding: 14px 18px;
border: 1px solid #dddddd;
}
.styled-table tbody tr {
border-bottom: 1px solid #eeeeee;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f8f8f8; /* Zebra stripping */
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #00796b;
}
.styled-table tbody tr:hover {
background-color: #e0f2f7; /* Hover effect */
}

/* Infographic styling – text based */
.infographic-box {
background-color: #e0f7fa; /* Light accent background */
border-right: 10px solid #00796b; /* Strong accent border for RTL */
padding: 25px 30px;
margin: 35px 0;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
position: relative;
}
.infographic-box::before {
content: ‘💡’; /* Icon for insight */
position: absolute;
top: 20px;
left: 20px; /* For RTL */
font-size: 2.2em;
color: #004d40;
}
.infographic-box h4 {
font-size: 1.4em;
color: #004d40;
margin-bottom: 12px;
font-weight: bold;
}
.infographic-box ul {
list-style: none;
margin-right: 0;
padding-left: 0;
}
.infographic-box ul li {
margin-bottom: 10px;
padding-right: 30px; /* Space for checkmark icon */
position: relative;
}
.infographic-box ul li::before {
content: ‘✅’; /* Checkmark icon */
position: absolute;
right: 0; /* For RTL */
color: #2e7d32; /* Green for checkmark */
font-weight: bold;
}

/* Another infographic style – process flow */
.process-flow {
display: flex;
flex-wrap: wrap; /* Allow wrapping on small screens */
justify-content: center;
gap: 25px;
margin: 45px 0;
}
.process-step {
flex: 1 1 280px; /* Flex item grows, shrinks, has base width */
background-color: #f0f7f8;
border: 1px solid #b2dfdb;
border-radius: 12px;
padding: 25px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
position: relative;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.process-step:hover {
transform: translateY(-7px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.process-step .icon {
font-size: 2.8em;
color: #00796b;
margin-bottom: 12px;
}
.process-step h5 {
font-size: 1.2em;
color: #004d40;
margin-bottom: 10px;
font-weight: bold;
}
.process-step p {
font-size: 0.95em;
color: #555;
line-height: 1.6;
margin-bottom: 0; /* Override default paragraph margin */
}
/* Arrow for process flow for RTL */
.process-flow .process-step:not(:last-child)::after {
content: ‘◀️’; /* Right arrow for RTL */
position: absolute;
top: 50%;
left: -35px; /* Position to the left of the box for RTL */
transform: translateY(-50%);
font-size: 1.8em;
color: #00796b;
z-index: 10;
/* Hide on small screens where steps stack */
@media (max-width: 768px) {
display: none;
}
}

/* Specific styling for the ‘Lesson Learned’ infographic */
.infographic-lesson {
background-color: #fce4ec; /* Light pink background */
border-right: 10px solid #c2185b; /* Strong pink border for RTL */
}
.infographic-lesson::before {
content: ‘🎯’; /* Target icon */
color: #880e4f; /* Darker pink for icon */
}
.infographic-lesson h4 {
color: #880e4f; /* Darker pink for heading */
}
.infographic-lesson ul li::before {
content: ‘✔️’; /* Checkmark icon */
color: #4caf50; /* Green for checkmark */
}

/* Responsive adjustments */
@media (max-width: 768px) {
.article-container {
margin: 10px;
padding: 15px;
border-radius: 8px;
}
.h1-custom {
font-size: 2em;
margin-bottom: 20px;
padding-bottom: 10px;
}
.h1-custom::after {
width: 70px;
height: 4px;
}
.h2-custom {
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 15px;
padding: 10px 15px;
border-right: 6px solid #00796b;
}
.h3-custom {
font-size: 1.2em;
margin-top: 25px;
margin-bottom: 12px;
padding: 8px 12px;
}
.toc-container {
padding: 18px;
margin-bottom: 25px;
border-radius: 8px;
}
.toc-title {
font-size: 1.4em;
margin-bottom: 15px;
padding-bottom: 8px;
}
.toc-list li {
font-size: 1em;
margin-bottom: 8px;
padding-right: 22px;
}
.toc-list li::before {
margin-right: -1.5em;
}
.infographic-box {
padding: 20px 25px;
margin: 25px 0;
border-right: 8px solid #00796b;
border-radius: 8px;
}
.infographic-box::before {
font-size: 2em;
top: 15px;
left: 15px;
}
.styled-table {
min-width: unset; /* Allow table to shrink */
display: block;
overflow-x: auto; /* Enable horizontal scrolling for tables on small screens */
-webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
border-radius: 8px;
}
.styled-table th, .styled-table td {
padding: 10px 12px;
}
.process-flow {
flex-direction: column; /* Stack steps vertically on small screens */
align-items: center;
gap: 15px;
}
.process-step {
width: 95%; /* Take up more width */
flex: unset; /* Remove flex specific sizing */
margin-bottom: 0; /* Gap handles spacing */
min-height: 140px;
padding: 20px;
border-radius: 10px;
}
.process-flow .process-step:not(:last-child)::after {
/* Vertical arrow for mobile if needed, or simply stack */
/* For simplicity, we remove horizontal arrows on mobile */
display: none;
}
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
.h1-custom {
font-size: 2.2em;
}
.h2-custom {
font-size: 1.6em;
}
.h3-custom {
font-size: 1.3em;
}
.article-container {
padding: 25px;
}
.process-step {
flex: 1 1 300px; /* Adjust for larger tablets */
}
}

“`