/* Basic reset for better consistency */
html, body, div, h1, h2, h3, p, ul, li, table, thead, tbody, tr, th, td {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* General body font and color, assuming this CSS will be inside the HTML document */
body {
font-family: ‘Arial’, sans-serif;
color: #333333;
line-height: 1.7;
background-color: #f8f9fa; /* Light background for the overall page */
}

/* Ensure responsiveness for images and tables (if any were direct image tags) */
img {
max-width: 100%;
height: auto;
display: block; /* Removes extra space below image */
margin: 15px auto;
border-radius: 8px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.main-container {
padding: 15px !important;
margin: 10px auto !important;
border-radius: 8px !important;
}
h1 {
font-size: 28px !important;
margin-bottom: 20px !important;
padding-bottom: 10px !important;
}
h2 {
font-size: 24px !important;
margin-top: 30px !important;
margin-bottom: 15px !important;
padding-bottom: 8px !important;
}
h3 {
font-size: 20px !important;
margin-top: 25px !important;
margin-bottom: 10px !important;
}
p, li, td {
font-size: 15px !important;
line-height: 1.6 !important;
}
.infographic-section > div {
padding: 15px !important;
}
.infographic-section > div > div {
min-width: unset !important; /* Allow elements to shrink */
width: 90%; /* Take up more width on smaller screens */
}
}

@media (max-width: 480px) {
h1 {
font-size: 24px !important;
}
h2 {
font-size: 20px !important;
}
h3 {
font-size: 18px !important;
}
p, li, td {
font-size: 14px !important;
}
table th, table td {
padding: 8px !important;
}
ul.list-style-none li {
flex-direction: column;
align-items: flex-start;
}
ul.list-style-none li span {
margin-bottom: 5px;
margin-right: 0 !important;
}
}

/* Ensure tables are responsive */
table {
width: 100%;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
}
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 #dee2e6;
margin-bottom: 10px;
border-radius: 8px;
}
table td {
border: none;
position: relative;
padding-left: 50% !important; /* Adjust based on label width */
text-align: right !important; /* Ensure text alignment */
min-height: 40px; /* Minimum height for better touch */
display: flex; /* Use flexbox for label-content alignment */
align-items: center;
}
table td::before {
content: attr(data-label);
position: absolute;
left: 0;
width: 45%; /* Adjust label width */
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
text-align: left;
color: #1a2a4b;
background-color: #f0f8ff;
border-right: 1px solid #dee2e6;
height: 100%;
display: flex;
align-items: center;
padding-left: 10px;
}
/* Specific labels for table on small screens */
table tbody tr:nth-of-type(1) td:nth-of-type(1)::before { content: “بخش اصلی”; }
table tbody tr:nth-of-type(1) td:nth-of-type(2)::before { content: “توضیحات کلیدی”; }
table tbody tr:nth-of-type(2) td:nth-of-type(1)::before { content: “بخش اصلی”; }
table tbody tr:nth-of-type(2) td:nth-of-type(2)::before { content: “توضیحات کلیدی”; }
table tbody tr:nth-of-type(3) td:nth-of-type(1)::before { content: “بخش اصلی”; }
table tbody tr:nth-of-type(3) td:nth-of-type(2)::before { content: “توضیحات کلیدی”; }
table tbody tr:nth-of-type(4) td:nth-of-type(1)::before { content: “بخش اصلی”; }
table tbody tr:nth-of-type(4) td:nth-of-type(2)::before { content: “توضیحات کلیدی”; }
table tbody tr:nth-of-type(5) td:nth-of-type(1)::before { content: “بخش اصلی”; }
table tbody tr:nth-of-type(5) td:nth-of-type(2)::before { content: “توضیحات کلیدی”; }
/* Revert table specific styles for larger screens */
@media (min-width: 769px) {
table {
display: table;
overflow-x: unset;
}
table thead tr {
position: static;
display: table-row;
}
table th {
display: table-cell;
}
table tr {
display: table-row;
border: 1px solid #dee2e6; /* Restore cell borders */
}
table td {
display: table-cell;
padding-left: 10px !important; /* Reset padding for larger screens */
text-align: right !important; /* Restore default text alignment */
min-height: unset;
border: 1px solid #dee2e6; /* Restore cell borders */
}
table td::before {
content: none;
}
}

// This script dynamically adds data-label attributes for responsive tables.
// It’s placed here to be run after the HTML content is parsed.
// If the block editor strips scripts, the CSS fallback (fixed content) still works.
document.addEventListener(‘DOMContentLoaded’, function() {
var tables = document.querySelectorAll(‘table’);
tables.forEach(function(table) {
var headers = [];
table.querySelectorAll(‘thead th’).forEach(function(th) {
headers.push(th.textContent);
});

table.querySelectorAll(‘tbody tr’).forEach(function(row) {
row.querySelectorAll(‘td’).forEach(function(td, index) {
if (headers[index]) {
td.setAttribute(‘data-label’, headers[index] + ‘: ‘);
}
});
});
});
});