/* این بخش استایلینگ برای نمایش بهتر در محیط‌هایی که HTML/CSS پشتیبانی می‌کنند، مانند ویرایشگرهای بلوک، طراحی شده است. */
/* توجه: در یک کپی و پیست ساده به ویرایشگرهای متنی (مثل Notepad) این استایل‌ها از بین می‌روند. اما در ویرایشگرهای بلوک که از HTML پشتیبانی می‌کنند، باید تا حد زیادی حفظ شوند. */

/* عمومی */
body {
font-family: ‘Arial’, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 0;
background-color: #f8f9fa;
direction: rtl; /* برای زبان فارسی */
text-align: right; /* برای زبان فارسی */
}

/* کانتینر اصلی مقاله */
div[style*=”font-family: Arial”] { /* استایل کانتینر اصلی که در بالا تعریف شد */
max-width: 900px; /* عرض بهینه برای مطالعه روی لپ‌تاپ و تبلت */
margin: 20px auto; /* وسط‌چین در صفحات بزرگ‌تر */
padding: 20px 25px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
border: 1px solid #e0e0e0;
background-color: #ffffff;
border-radius: 12px;
box-sizing: border-box; /* برای جلوگیری از سرریز شدن padding */
}

/* واکنش‌گرایی برای موبایل */
@media (max-width: 768px) {
div[style*=”font-family: Arial”] {
margin: 10px;
padding: 15px;
border-radius: 8px;
}
h1 {
font-size: 2em !important; /* کمی کوچک‌تر برای موبایل */
}
h2 {
font-size: 1.8em !important;
}
h3 {
font-size: 1.3em !important;
}
p, li, td, th {
font-size: 1em !important;
}
table {
display: block;
width: 100%;
overflow-x: auto;
white-space: nowrap; /* جلوگیری از شکستگی متن در سلول‌های جدول */
}
table thead, table tbody, table th, table td, table tr {
display: block; /* برای نمایش جدول به صورت ستونی در موبایل */
}
table tr {
margin-bottom: 10px;
border: 1px solid #eee;
border-radius: 5px;
padding: 8px;
}
table td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50% !important; /* فضای کافی برای label */
text-align: right !important;
white-space: normal;
}
table td:before {
content: attr(data-label); /* نمایش عنوان ستون به عنوان label */
position: absolute;
left: 10px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
text-align: left;
color: #555;
}
table th {
display: none; /* مخفی کردن سرصفحه اصلی جدول در موبایل */
}
/* تنظیمات اینفوگرافیک برای موبایل */
div[style*=”display: flex; flex-wrap: wrap”] {
flex-direction: column; /* چیدمان ستونی برای اینفوگرافیک در موبایل */
gap: 15px;
}
div[style*=”flex: 1 1 280px”] {
width: 100%; /* عرض کامل برای هر آیتم اینفوگرافیک */
margin: 0;
}
}

/* استایل هدینگ‌ها */
h1 {
font-family: ‘Arial Black’, sans-serif;
font-size: 2.8em;
font-weight: 900;
color: #004085;
text-align: center;
margin-top: 0;
margin-bottom: 30px;
border-bottom: 3px solid #007bff;
padding-bottom: 15px;
line-height: 1.2;
}

h2 {
font-family: ‘Georgia’, serif;
font-size: 2.2em;
font-weight: bold;
color: #0056b3;
margin-top: 45px;
margin-bottom: 25px;
border-bottom: 2px solid #a7d9f7;
padding-bottom: 10px;
line-height: 1.3;
}

h3 {
font-family: ‘Arial’, sans-serif;
font-size: 1.7em;
font-weight: bold;
color: #0288d1;
margin-top: 35px;
margin-bottom: 18px;
line-height: 1.4;
}

/* پاراگراف‌ها */
p {
font-size: 1.15em;
margin-bottom: 1.5em;
line-height: 1.8;
text-align: justify;
color: #444;
}

/* لیست‌ها */
ul {
margin-left: 20px;
margin-bottom: 25px;
padding: 0;
list-style-position: inside;
}

ul li {
font-size: 1.1em;
margin-bottom: 10px;
line-height: 1.6;
color: #555;
}

ul li strong {
color: #0056b3;
}

/* جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 1em;
text-align: right;
border: 1px solid #dee2e6;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

table caption {
caption-side: top;
font-weight: bold;
font-size: 1.3em;
margin-bottom: 15px;
color: #007bff;
text-align: center;
padding: 10px 0;
background-color: #e9f5fd;
border-radius: 5px 5px 0 0;
}

table th, table td {
padding: 14px 18px;
border: 1px solid #dee2e6;
vertical-align: top;
text-align: right;
}

table th {
background-color: #007bff;
color: #ffffff;
font-weight: bold;
font-size: 1.1em;
text-align: center; /* سربرگ‌ها را وسط‌چین می‌کنیم */
}

table tr:nth-child(even) {
background-color: #f8f9fa;
}

table tr:hover {
background-color: #e9f5fd;
}

/* اینفوگرافیک جایگزین */
div[style*=”background-color: #f0f8ff”] {
border: 2px solid #a7d9f7;
background: linear-gradient(135deg, #e0f7fa 0%, #f0f8ff 100%);
border-radius: 15px;
padding: 30px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
text-align: center;
}

div[style*=”flex: 1 1 280px”] {
background-color: #ffffff;
border: 1px solid #cceeff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease-in-out;
flex-grow: 1; /* برای پر کردن فضای خالی در ردیف */
min-width: 250px; /* حداقل عرض برای هر بلوک */
max-width: 32%; /* برای نمایش 3 آیتم در یک ردیف */
box-sizing: border-box; /* اطمینان از محاسبات صحیح عرض */
}

div[style*=”flex: 1 1 280px”]:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

div[style*=”display: flex”] {
gap: 25px; /* فاصله بین بلوک‌ها */
justify-content: center;
align-items: stretch;
}

/* باکس راهنمای سریع محتوا */
div[style*=”border-left: 5px solid #007bff”] {
background-color: #eaf6fd;
border-left: 6px solid #007bff;
padding: 20px;
margin-top: 25px;
margin-bottom: 35px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
div[style*=”border-left: 5px solid #007bff”] h2 {
color: #007bff;
font-size: 1.8em;
border-bottom: none;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 15px;
}
div[style*=”border-left: 5px solid #007bff”] ul {
list-style-type: none;
padding-right: 0;
margin-left: 0;
}
div[style*=”border-left: 5px solid #007bff”] li {
font-size: 1.05em;
margin-bottom: 8px;
color: #444;
text-align: right;
}
div[style*=”border-left: 5px solid #007bff”] li span {
margin-left: 10px;
}

/* رده‌بندی ستون‌های جدول برای موبایل */
@media (max-width: 768px) {
table td:nth-of-type(1):before { content: “چالش:”; }
table td:nth-of-type(2):before { content: “راهکار:”; }
}

/* واکنش‌گرایی برای تلویزیون (صفحات بسیار بزرگ) */
@media (min-width: 1200px) {
div[style*=”font-family: Arial”] {
max-width: 1200px;
padding: 40px 50px;
}
h1 {
font-size: 3.5em !important;
}
h2 {
font-size: 2.5em !important;
}
h3 {
font-size: 2em !important;
}
p, li {
font-size: 1.2em !important;
}
table th, table td {
font-size: 1.1em !important;
}
div[style*=”flex: 1 1 280px”] {
max-width: 30%; /* فضای بیشتر برای سه ستون */
}
}