/* Global styles for improved readability and responsiveness */
body {
font-family: ‘Vazirmatn’, ‘Tahoma’, sans-serif;
direction: rtl; /* For Persian text */
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

/* Base container for the article */
div[style*=”font-family: ‘Vazirmatn'”] {
box-sizing: border-box;
width: 100%;
max-width: 900px; /* Optimal width for readability on larger screens */
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Ensure responsiveness for headings and text */
h1, h2, h3, p, ul, table, div {
max-width: 100%;
word-wrap: break-word; /* Prevents long words from overflowing */
box-sizing: border-box;
}

/* Specific styles for headings for responsiveness */
h1 {
font-size: clamp(1.8em, 5vw, 2.2em) !important; /* Responsive font size */
}
h2 {
font-size: clamp(1.5em, 4vw, 1.8em) !important;
}
h3 {
font-size: clamp(1.2em, 3vw, 1.4em) !important;
}
p, li, td, th {
font-size: clamp(0.95em, 2.5vw, 1.05em) !important;
}

/* Table responsiveness */
table {
display: block; /* Make table scrollable on small screens */
width: 100%;
overflow-x: auto; /* Enable horizontal scrolling */
white-space: nowrap; /* Prevent cell content from wrapping too much */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
thead, tbody, th, td, tr {
display: block; /* Stack table elements on very small screens */
}
tr {
margin-bottom: 10px;
}
td {
border: none !important; /* Remove borders when stacked */
position: relative;
padding-left: 50% !important; /* Create space for pseudo-elements */
text-align: right !important; /* Ensure text alignment */
white-space: normal; /* Allow text to wrap within the “cell” */
}
td::before {
/* This is where the magic happens! */
content: attr(data-label); /* Use data-label for column names */
position: absolute;
right: 0px; /* Position to the right of the cell */
width: 45%;
padding-right: 15px; /* Add some padding */
font-weight: bold;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
}
/* Apply data-label to table cells for responsive display */
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
margin-bottom: 15px;
border-radius: 5px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
td {
border: none;
position: relative;
padding-right: 50%;
text-align: right;
border-bottom: 1px solid #eee;
}
td:last-child {
border-bottom: 0;
}
td::before {
content: attr(data-label);
position: absolute;
right: 10px;
width: 45%;
padding-right: 10px;
font-weight: bold;
color: #555;
text-align: right;
}
}
/* Specific labels for the table (need to add data-label attributes to

in HTML) */
/* This needs to be manually added to the HTML output.
For instance, change

نگارش کامل پروپوزال

to

نگارش کامل پروپوزال

and

انجام صفر تا صد پروپوزال…

to

انجام صفر تا صد پروپوزال…

*/
/* Since I cannot directly modify the HTML output structure with JS, this will be a manual step if copied */

/* Ensure text aligns correctly for RTL */
h1, h2, h3, p, ul, ol, li, div, table {
text-align: right;
}

a {
text-decoration: none;
color: #3498DB;
transition: color 0.3s ease;
}
a:hover {
color: #2980B9;
}

/* For print */
@media print {
body {
background-color: #fff;
color: #000;
}
div[style*=”font-family: ‘Vazirmatn'”] {
box-shadow: none;
margin: 0;
padding: 0;
border-radius: 0;
}
a {
text-decoration: underline;
color: #000 !important;
}
div[style*=”background-color: #E8F8F5″],
div[style*=”background-color: #F8F9F9″],
div[style*=”background-color: #ECF0F1″] {
border: 1px solid #ccc;
page-break-inside: avoid;
}
table {
page-break-inside: avoid;
width: 100% !important;
display: table !important; /* Ensure table displays correctly on print */
overflow-x: visible !important;
white-space: normal !important;
}
thead, tbody, tr, th, td {
display: table-row-group; /* Reset to normal table display */
}
td::before {
content: none !important; /* Hide pseudo-elements in print */
}
td {
padding-left: 15px !important; /* Reset padding */
border: 1px solid #BDC3C7 !important; /* Restore borders */
text-align: right !important;
white-space: normal !important;
}
th {
border: 1px solid #BDC3C7 !important;
}
h1, h2, h3 {
page-break-after: avoid;
page-break-before: avoid;
}
}

/* Adjustments for various devices */
@media (min-width: 1200px) {
div[style*=”font-family: ‘Vazirmatn'”] {
max-width: 1000px; /* Slightly wider for large screens */
}
}
@media (max-width: 768px) {
div[style*=”font-family: ‘Vazirmatn'”] {
padding: 15px;
margin: 10px auto;
}
h1 { font-size: 2em !important; }
h2 { font-size: 1.6em !important; }
h3 { font-size: 1.3em !important; }
p, li { font-size: 1em !important; }
}
@media (max-width: 480px) {
div[style*=”font-family: ‘Vazirmatn'”] {
padding: 10px;
margin: 5px auto;
}
h1 { font-size: 1.7em !important; }
h2 { font-size: 1.4em !important; }
h3 { font-size: 1.1em !important; }
p, li { font-size: 0.9em !important; }
.info-box ul li {
flex-direction: column;
align-items: flex-start;
}
.info-box ul li span:first-child {
margin-left: 0;
margin-bottom: 5px;
}
}

document.addEventListener(‘DOMContentLoaded’, function() {
const table = document.querySelector(‘table’);
if (table) {
const headers = Array.from(table.querySelectorAll(‘thead th’)).map(th => th.textContent);
table.querySelectorAll(‘tbody tr’).forEach(row => {
row.querySelectorAll(‘td’).forEach((td, index) => {
if (headers[index]) {
td.setAttribute(‘data-label’, headers[index]);
}
});
});
}
});