/* این بخش CSS برای نمایش بهتر در محیط‌های وب است.
بعد از کپی کردن در ویرایشگر بلوک یا کلاسیک، ممکن است برخی از این استایل‌ها توسط تم یا تنظیمات سایت شما بازنویسی شوند.
هدف، ارائه یک ساختار HTML معناگرا است که در هر محیطی به درستی رندر شود. */
@import url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-VariableFont_wght.ttf’);

body {
font-family: ‘Vazirmatn’, sans-serif;
line-height: 1.8;
color: #333;
background-color: #f0f2f5; /* Light grey background for the whole page */
margin: 0;
padding: 0;
}

.article-container {
max-width: 900px;
margin: auto;
padding: 20px;
background-color: #ffffff; /* White background for the article content */
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
border: 1px solid #e0e0e0;
}

/* General Heading Styles */
h1, h2, h3, h4, h5, h6 {
font-family: ‘Vazirmatn’, sans-serif;
font-weight: bold;
color: #1a237e; /* Deep indigo for main headings */
}

h1 {
font-size: 2.8em; /* Larger for H1 */
color: #1a237e;
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 4px solid #c5cae9; /* Light blue divider */
line-height: 1.3;
}

h2 {
font-size: 2.2em;
color: #303f9f; /* Indigo for H2 */
margin-top: 50px;
margin-bottom: 25px;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 12px;
}

h3 {
font-size: 1.6em;
color: #455a64; /* Blue-grey for H3 */
margin-top: 35px;
margin-bottom: 18px;
padding-bottom: 8px;
border-bottom: 1px dashed #e0e0e0;
}

h4 {
font-size: 1.3em;
color: #388e3c; /* Green for infographic title */
text-align: center;
margin-bottom: 15px;
}

p {
font-size: 1.1em;
line-height: 1.9;
margin-bottom: 1.2em;
text-align: justify;
color: #424242; /* Darker text for readability */
}

ul, ol {
margin-left: 25px;
margin-bottom: 1.5em;
color: #424242;
}

li {
margin-bottom: 0.8em;
line-height: 1.7;
}

strong {
font-weight: bold;
color: #212121;
}

/* Infographic Simulation Block */
.infographic-block {
background-color: #e8f5e9; /* Light green background */
border-left: 5px solid #4caf50; /* Green left border */
padding: 25px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.infographic-block > p {
font-size: 1em;
color: #555;
}

.infographic-item {
background-color: #f1f8e9; /* Even lighter green for items */
padding: 18px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
margin-bottom: 15px;
}

.infographic-item strong {
color: #388e3c; /* Darker green for item titles */
font-size: 1.1em;
display: block;
margin-bottom: 8px;
}

.infographic-item ul {
margin-top: 5px;
margin-left: 15px;
list-style-type: square;
color: #555;
}

.infographic-item li {
margin-bottom: 5px;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 1em;
border: 1px solid #cfd8dc;
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to corners */
}

caption {
caption-side: top;
font-size: 1.3em;
font-weight: bold;
margin-bottom: 15px;
color: #1a237e;
text-align: center;
}

th, td {
padding: 12px 15px;
border: 1px solid #e0e0e0;
text-align: right; /* RTL for Persian */
vertical-align: top;
}

thead tr {
background-color: #e3f2fd; /* Light blue header */
color: #1a237e;
}

th {
font-weight: bold;
color: #1a237e;
}

tbody tr:nth-child(even) {
background-color: #f5f5f5; /* Zebra striping */
}

tbody tr:hover {
background-color: #e0f2f7; /* Hover effect */
}

td strong {
color: #424242;
}

/* Responsive adjustments */
@media (max-width: 768px) {
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }
p, ul, ol, table { font-size: 1em; }
.article-container { padding: 15px; margin: 10px; }
.infographic-block { padding: 15px; }
.infographic-item { flex: 1 1 100%; } /* Stack items on small screens */
table, thead, tbody, th, td, tr {
display: block; /* Make table responsive by stacking cells */
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; margin-bottom: 10px; }
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
text-align: right;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label); /* Use data-label for pseudo-headings */
font-weight: bold;
}
/* Specific data labels for table cells */
td:nth-of-type(1):before { content: “ابزار:”; }
td:nth-of-type(2):before { content: “کاربردها و ویژگی‌های کلیدی:”; }
}

// این اسکریپت تنها برای افزودن ‘data-label’ به سلول‌های جدول در محیط‌های وب است
// و در ویرایشگرهای بلوک ممکن است نیازی به آن نباشد یا پشتیبانی نشود.
// اما برای حالت ریسپانسیو در مرورگر مفید است.
document.addEventListener(‘DOMContentLoaded’, function() {
if (window.innerWidth <= 768) {
var headers = [];
var table = document.querySelector('table');
if (table) {
table.querySelectorAll('thead th').forEach(function(th) {
headers.push(th.textContent.trim());
});

table.querySelectorAll('tbody tr').forEach(function(row) {
row.querySelectorAll('td').forEach(function(td, index) {
td.setAttribute('data-label', headers[index]);
});
});
}
}
});