window.addEventListener(‘DOMContentLoaded’, (event) => {
// Function to apply styles
function applyHeadingStyles(selector, fontSize, fontWeight, color, borderBottom = ‘none’, paddingBottom = ‘0px’, textAlign = ‘right’) {
document.querySelectorAll(selector).forEach(heading => {
heading.style.fontSize = fontSize;
heading.style.fontWeight = fontWeight;
heading.style.color = color;
heading.style.borderBottom = borderBottom;
heading.style.paddingBottom = paddingBottom;
heading.style.marginTop = ’40px’;
heading.style.marginBottom = ’20px’;
heading.style.padding = ‘0 10px’;
heading.style.lineHeight = ‘1.3’;
heading.style.textAlign = textAlign;
});
}
// Apply styles for h1, h2, h3, h4 within the specific div
applyHeadingStyles(‘div h1’, ‘2.8em’, ‘800’, ‘#004d40’, ‘none’, ‘0’, ‘center’);
applyHeadingStyles(‘div h2’, ‘2.2em’, ‘700’, ‘#00695c’, ‘3px solid #b2dfdb’, ’10px’);
applyHeadingStyles(‘div h3’, ‘1.8em’, ‘600’, ‘#00796b’, ‘none’, ‘0’);
applyHeadingStyles(‘div h4’, ‘1.4em’, ‘600’, ‘#26a69a’, ‘none’, ‘0’);
// Additional styling for the main container
const mainContainer = document.querySelector(‘div[style*=”font-family”]’);
if (mainContainer) {
mainContainer.style.fontFamily = “‘Vazirmatn’, sans-serif”;
mainContainer.style.lineHeight = ‘1.8’;
mainContainer.style.color = ‘#333’;
mainContainer.style.direction = ‘rtl’;
mainContainer.style.textAlign = ‘right’;
mainContainer.style.backgroundColor = ‘#f9f9f9′;
mainContainer.style.padding = ’20px’;
mainContainer.style.borderRadius = ’15px’;
mainContainer.style.boxShadow = ‘0 4px 20px rgba(0,0,0,0.08)’;
mainContainer.style.maxWidth = ‘100%’;
mainContainer.style.overflowX = ‘auto’; // Ensures responsiveness for tables etc.
}
// Styling for paragraphs
document.querySelectorAll(‘div p’).forEach(p => {
p.style.fontSize = ‘1.1em’;
p.style.marginBottom = ’25px’;
p.style.padding = ‘0 15px’;
});
// Styling for lists
document.querySelectorAll(‘div ul’).forEach(ul => {
// Use specific unicode characters for list style type
if (ul.previousElementSibling && ul.previousElementSibling.textContent.includes(‘۱. مدیریت تغییر اقلیم’)) {
ul.style.listStyleType = “‘🌡️ ‘”;
} else if (ul.previousElementSibling && ul.previousElementSibling.textContent.includes(‘۲. اقتصاد چرخشی’)) {
ul.style.listStyleType = “‘🔄 ‘”;
} else if (ul.previousElementSibling && ul.previousElementSibling.textContent.includes(‘۳. دیجیتالی شدن’)) {
ul.style.listStyleType = “‘📱 ‘”;
} else if (ul.previousElementSibling && ul.previousElementSibling.textContent.includes(‘۴. حفاظت از تنوع زیستی’)) {
ul.style.listStyleType = “‘🦋 ‘”;
} else if (ul.previousElementSibling && ul.previousElementSibling.textContent.includes(‘۵. عدالت محیط زیستی’)) {
ul.style.listStyleType = “‘⚖️ ‘”;
} else if (ul.previousElementSibling && ul.previousElementSibling.textContent.includes(‘۶. شهرسازی پایدار’)) {
ul.style.listStyleType = “‘🏙️ ‘”;
} else if (ul.previousElementSibling && ul.previousElementSibling.textContent.includes(‘۷. مدیریت منابع آب’)) {
ul.style.listStyleType = “‘💧 ‘”;
} else if (ul.previousElementSibling && ul.previousElementSibling.textContent.includes(‘۸. نوآوری در مدیریت پسماند’)) {
ul.style.listStyleType = “‘🗑️ ‘”;
} else if (ul.previousElementSibling && ul.previousElementSibling.textContent.includes(‘نکات کلیدی برای انتخاب’)) {
ul.style.listStyleType = “‘💡 ‘”;
} else {
ul.style.listStyleType = “‘🌱 ‘”; // Default for general lists
}
ul.style.paddingRight = ’30px’;
ul.style.marginBottom = ’25px’;
});
document.querySelectorAll(‘div ul li’).forEach(li => {
li.style.fontSize = ‘1.1em’;
li.style.marginBottom = ’10px’;
});
// Styling for the “infographic” alternative div
const infographicDiv = document.querySelector(‘div[style*=”background-color: #e0f2f1″]’);
if (infographicDiv) {
infographicDiv.style.backgroundColor = ‘#e0f2f1’;
infographicDiv.style.borderLeft = ‘8px solid #009688′;
infographicDiv.style.padding = ’25px’;
infographicDiv.style.borderRadius = ’10px’;
infographicDiv.style.marginBottom = ’30px’;
infographicDiv.style.boxShadow = ‘0 2px 10px rgba(0,0,0,0.05)’;
}
// Styling for infographic inner items – ensuring responsiveness
document.querySelectorAll(‘div[style*=”background-color: #e0f2f1″] > div[style*=”display: flex”] > div’).forEach(item => {
item.style.backgroundColor = ‘#ffffff’;
item.style.padding = ’20px’;
item.style.borderRadius = ‘8px’;
item.style.boxShadow = ‘0 2px 5px rgba(0,0,0,0.03)’;
item.style.flex = ‘1 1 45%’; // Responsive layout
item.style.minWidth = ‘280px’;
item.style.marginBottom = ’15px’; // Add some space between items for small screens
});
// Adjust flex container for infographic for better wrapping
const infographicFlexContainer = document.querySelector(‘div[style*=”background-color: #e0f2f1″] > div[style*=”display: flex”]’);
if (infographicFlexContainer) {
infographicFlexContainer.style.flexWrap = ‘wrap’;
infographicFlexContainer.style.justifyContent = ‘space-around’;
infographicFlexContainer.style.gap = ’20px’;
}
// Styling for the table container
const tableContainer = document.querySelector(‘div[style*=”background-color: #ffffff; border: 1px solid #ddd”]’);
if (tableContainer) {
tableContainer.style.backgroundColor = ‘#ffffff’;
tableContainer.style.border = ‘1px solid #ddd’;
tableContainer.style.borderRadius = ’10px’;
tableContainer.style.overflow = ‘hidden’;
tableContainer.style.marginBottom = ’30px’;
tableContainer.style.boxShadow = ‘0 2px 10px rgba(0,0,0,0.05)’;
tableContainer.style.maxWidth = ‘100%’;
tableContainer.style.margin = ’30px auto’;
}
// Styling for the table itself
document.querySelectorAll(‘div table’).forEach(table => {
table.style.width = ‘100%’;
table.style.borderCollapse = ‘collapse’;
table.style.textAlign = ‘right’;
});
document.querySelectorAll(‘div table th, div table td’).forEach(cell => {
cell.style.border = ‘1px solid #eee’;
cell.style.padding = ’15px’;
cell.style.fontSize = ‘1em’;
});
document.querySelectorAll(‘div table th’).forEach(th => {
th.style.backgroundColor = ‘#00796b’;
th.style.color = ‘#ffffff’;
th.style.fontWeight = ‘bold’;
});
document.querySelectorAll(‘div table tr:nth-child(even)’).forEach(row => {
row.style.backgroundColor = ‘#f4fcfb’;
});
// Final call to action or emphasis box
const finalBox = document.querySelector(‘div[style*=”background-color: #fce4ec; border-right: 8px solid #e91e63″]’);
if (finalBox) {
finalBox.style.backgroundColor = ‘#fce4ec’;
finalBox.style.borderRight = ‘8px solid #e91e63′;
finalBox.style.padding = ’25px’;
finalBox.style.borderRadius = ’10px’;
finalBox.style.marginBottom = ’30px’;
finalBox.style.boxShadow = ‘0 2px 10px rgba(0,0,0,0.05)’;
finalBox.style.textAlign = ‘center’;
}
// Ensure anchor tags inside lists have specific styling
document.querySelectorAll(‘ul a’).forEach(link => {
link.style.color = ‘#00796b’;
link.style.textDecoration = ‘none’;
link.addEventListener(‘mouseenter’, () => link.style.textDecoration = ‘underline’);
link.addEventListener(‘mouseleave’, () => link.style.textDecoration = ‘none’);
});
// Responsive adjustments
function adjustForResponsiveness() {
const width = window.innerWidth;
// Adjust h1 for smaller screens
if (width {
h1.style.fontSize = ‘2.2em’;
});
document.querySelectorAll(‘div h2’).forEach(h2 => {
h2.style.fontSize = ‘1.8em’;
});
document.querySelectorAll(‘div h3’).forEach(h3 => {
h3.style.fontSize = ‘1.5em’;
});
document.querySelectorAll(‘div h4’).forEach(h4 => {
h4.style.fontSize = ‘1.2em’;
});
document.querySelectorAll(‘div p, div li, div table td, div table th’).forEach(el => {
el.style.fontSize = ‘1em’;
el.style.padding = ’10px’;
});
// Infographic items to stack on small screens
document.querySelectorAll(‘div[style*=”background-color: #e0f2f1″] > div[style*=”display: flex”] > div’).forEach(item => {
item.style.flex = ‘1 1 100%’;
item.style.minWidth = ‘unset’;
});
} else {
// Reset to larger screen sizes
document.querySelectorAll(‘div h1’).forEach(h1 => {
h1.style.fontSize = ‘2.8em’;
});
document.querySelectorAll(‘div h2’).forEach(h2 => {
h2.style.fontSize = ‘2.2em’;
});
document.querySelectorAll(‘div h3’).forEach(h3 => {
h3.style.fontSize = ‘1.8em’;
});
document.querySelectorAll(‘div h4’).forEach(h4 => {
h4.style.fontSize = ‘1.4em’;
});
document.querySelectorAll(‘div p, div li, div table td, div table th’).forEach(el => {
el.style.fontSize = ‘1.1em’;
el.style.padding = ’15px’;
});
document.querySelectorAll(‘div[style*=”background-color: #e0f2f1″] > div[style*=”display: flex”] > div’).forEach(item => {
item.style.flex = ‘1 1 45%’;
item.style.minWidth = ‘280px’;
});
}
}
// Initial adjustment and on window resize
adjustForResponsiveness();
window.addEventListener(‘resize’, adjustForResponsiveness);
});


