/* Global styles for better responsiveness and overall look */
body {
margin: 0;
padding: 0;
background-color: #f2f4f8; /* Light background for the page */
font-family: ‘Vazirmatn’, Tahoma, sans-serif; /* Fallback fonts */
color: #333;
direction: rtl; /* Ensure right-to-left for Persian */
text-align: right;
}

/* Vazirmatn font import – best practice is to load it, but for copy-paste, assume it’s available or use fallback */
@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-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;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.h1 { font-size: 2em !important; }
.h2 { font-size: 1.6em !important; }
.h3 { font-size: 1.3em !important; }
div[style*=”max-width: 900px”] {
margin: 15px auto;
padding: 15px;
border-radius: 8px;
}
p, ul, li { font-size: 1em !important; }
table th, table td {
padding: 10px !important;
font-size: 0.9em !important;
}
.infographic-item {
flex: 1 1 100% !important; /* Stack infographic items on small screens */
padding: 20px !important;
}
div[style*=”display: flex; flex-wrap: wrap; gap: 20px;”] > div {
flex: 1 1 100% !important; /* Stack advantage/challenge boxes */
}
}

@media (max-width: 480px) {
.h1 { font-size: 1.8em !important; }
.h2 { font-size: 1.4em !important; }
.h3 { font-size: 1.2em !important; }
div[style*=”max-width: 900px”] {
margin: 10px auto;
padding: 10px;
}
.infographic-item div[style*=”font-size: 2.5em”] {
font-size: 2em !important;
}
}

/* Specific element styles (to override inline where necessary for responsiveness or consistency) */
.h1 { /* Targeting the h1 with inline style */
font-family: ‘Vazirmatn’, Tahoma, sans-serif;
}
.h2 { /* Targeting h2s with inline style */
font-family: ‘Vazirmatn’, Tahoma, sans-serif;
}
.h3 { /* Targeting h3s with inline style */
font-family: ‘Vazirmatn’, Tahoma, sans-serif;
}
p, ul, li, table, caption {
font-family: ‘Vazirmatn’, Tahoma, sans-serif;
}

/* For table responsiveness on smaller screens */
table {
display: block;
width: 100%;
}
table thead, table tbody, table th, table td, table tr {
display: block;
}
table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
table tr {
border: 1px solid #E0E0E0;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
}
table td {
border: none !important;
border-bottom: 1px solid #eee !important;
position: relative;
padding-right: 50% !important;
text-align: right !important;
word-wrap: break-word; /* Ensure long text wraps */
min-height: 40px; /* Minimum height for better tap target */
display: flex; /* Use flex to align label and content */
align-items: center;
}
table td:last-child {
border-bottom: none !important;
}
table td::before {
content: attr(data-label);
position: absolute;
right: 0px;
width: 45%;
padding-left: 10px;
font-weight: bold;
white-space: nowrap;
text-align: left;
color: #1F4E79;
font-size: 0.9em;
}
/* Hide the ::before for larger screens where full table is visible */
@media (min-width: 769px) {
table td::before {
content: none !important;
}
table thead tr {
position: static;
display: table-row;
}
table tr {
display: table-row;
border: none;
margin-bottom: 0;
}
table td {
display: table-cell;
padding-right: 15px !important;
text-align: right !important;
border: 1px solid #E0E0E0 !important;
}
table th {
display: table-cell;
}
}

// This script dynamically adds data-label attributes for responsive tables
// It’s a common practice for making tables responsive without complex CSS media queries for labels
document.addEventListener(‘DOMContentLoaded’, function() {
var tables = document.querySelectorAll(‘table’);
tables.forEach(function(table) {
var headers = Array.from(table.querySelectorAll(‘thead th’)).map(function(th) {
return th.textContent.trim();
});
table.querySelectorAll(‘tbody tr’).forEach(function(row) {
row.querySelectorAll(‘td’).forEach(function(cell, index) {
if (headers[index]) {
cell.setAttribute(‘data-label’, headers[index] + ‘:’);
}
});
});
});

// Add class for better targeting of elements if needed later
document.querySelector(‘h1’).classList.add(‘h1’);
document.querySelectorAll(‘h2’).forEach(h => h.classList.add(‘h2’));
document.querySelectorAll(‘h3’).forEach(h => h.classList.add(‘h3’));
document.querySelectorAll(‘.infographic-container > div’).forEach(div => div.classList.add(‘infographic-item’));
});