/* تنظیمات عمومی برای تضمین رسپانسیو بودن و تایپوگرافی */
@font-face {
font-family: ‘B Nazanin’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/misc/fonts/B_Nazanin/BNazanin.woff2’) format(‘woff2’); /* اگر هاستینگ این فونت را پشتیبانی کند */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘B Nazanin’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/misc/fonts/B_Nazanin/BNazaninBd.woff2’) format(‘woff2’); /* اگر هاستینگ این فونت را پشتیبانی کند */
font-weight: bold;
font-style: normal;
}

body {
font-family: ‘B Nazanin’, ‘Arial’, sans-serif; /* فونت فارسی، با فال‌بک به Arial */
line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
color: #333333; /* رنگ متن */
max-width: 100%; /* اطمینان از عدم سرریز محتوا */
margin: 0 auto;
padding: 0;
box-sizing: border-box; /* padding و border در عرض و ارتفاع کلی عنصر حساب شوند */
direction: rtl; /* جهت متن راست به چپ */
text-align: justify; /* تراز کردن متن برای ظاهری مرتب */
}

/* کانتینر اصلی مقاله */
.article-container {
max-width: 900px; /* عرض بهینه برای خوانایی در دسکتاپ */
margin: 20px auto; /* مرکز قرار دادن با حاشیه بالا/پایین */
padding: 25px;
background-color: #ffffff; /* پس‌زمینه سفید */
border-radius: 12px; /* گوشه‌های گرد */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* سایه عمیق‌تر برای جلوه بیشتر */
box-sizing: border-box;
overflow: hidden; /* جلوگیری از سرریز محتواهای داخلی */
}

/* استایل هدینگ‌ها */
h1 {
font-size: 2.8em; /* بزرگ‌تر برای H1 */
color: #1A5276; /* آبی تیره (رنگ اصلی) */
font-weight: bold;
text-align: center;
margin-bottom: 35px;
padding-bottom: 20px;
border-bottom: 3px solid #A9CCE3; /* خط زیرین با رنگ آبی روشن */
position: relative;
}
h1::after { /* یک دکوراسیون کوچک برای H1 */
content: “🎓”;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 0.6em;
color: #F39C12;
}

h2 {
font-size: 2.1em; /* کمی کوچک‌تر از H1 */
color: #1A5276;
font-weight: bold;
margin-top: 45px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px dashed #A9CCE3; /* خط زیرین نقطه‌چین برای H2 */
}

h3 {
font-size: 1.6em;
color: #F39C12; /* رنگ نارنجی (رنگ تاکید) برای H3 */
font-weight: bold;
margin-top: 35px;
margin-bottom: 18px;
padding-right: 10px;
border-right: 4px solid #F39C12; /* خط عمودی در سمت راست برای تاکید */
}

/* پاراگراف‌ها */
p {
margin-bottom: 1.7em;
text-align: justify;
}

/* لیست‌ها */
ul, ol {
margin-bottom: 1.7em;
padding-right: 30px; /* تنظیم padding برای متن فارسی */
list-style-position: inside; /* برای لیست‌های فارسی */
}

li {
margin-bottom: 0.9em;
padding-right: 5px; /* فاصله از علامت لیست */
}
ul li::marker {
color: #F39C12; /* رنگ علامت بولت */
}
ol li::marker {
color: #1A5276; /* رنگ شماره لیست */
font-weight: bold;
}

/* استایل جدول */
table {
width: 100%;
border-collapse: separate; /* برای گوشه‌های گرد */
border-spacing: 0;
margin: 35px 0;
font-size: 0.98em;
border-radius: 8px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* برای اعمال border-radius به محتوا */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

th, td {
border: 1px solid #e0e0e0; /* خطوط جدول روشن‌تر */
padding: 14px 18px;
text-align: right; /* تراز به راست برای فارسی */
}

th {
background-color: #1A5276;
color: white;
font-weight: bold;
text-align: center; /* متن هدر وسط‌چین */
border-color: #1A5276; /* رنگ خطوط هدر */
}

tr:nth-child(even) { /* ردیف‌های زوج */
background-color: #f8fbfd; /* پس‌زمینه کمی روشن‌تر */
}
tr:hover { /* هاور روی ردیف‌ها */
background-color: #eaf5fc;
}

/* بخش شبیه اینفوگرافیک */
.infographic-box {
background-color: #EBF5FB; /* پس‌زمینه آبی بسیار روشن */
border-right: 8px solid #F39C12; /* نوار عمودی پررنگ در سمت راست */
padding: 30px;
margin: 50px 0;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
flex-direction: column; /* چیدن آیتم‌ها به صورت عمودی */
gap: 25px; /* فاصله بین آیتم‌های اینفوگرافیک */
}

.infographic-box h2 {
font-size: 1.8em;
color: #1A5276;
text-align: center;
margin-bottom: 20px;
border-bottom: none;
padding-bottom: 0;
background-color: #DAEEF7; /* پس‌زمینه برای عنوان اینفوگرافیک */
padding: 10px 0;
border-radius: 5px;
}

.infographic-item {
display: flex;
align-items: flex-start; /* تراز کردن آیتم‌ها از بالا */
gap: 20px;
background-color: #ffffff; /* پس‌زمینه سفید برای هر آیتم */
padding: 18px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease-in-out;
}
.infographic-item:hover {
transform: translateY(-5px); /* افکت هاور برای جذابیت */
}

.infographic-icon {
font-size: 2.2em; /* اندازه بزرگ‌تر برای آیکون */
color: #F39C12; /* رنگ تاکید برای آیکون */
min-width: 50px; /* حداقل عرض برای آیکون */
text-align: center;
line-height: 1; /* اطمینان از قرارگیری صحیح آیکون */
}

.infographic-text {
flex-grow: 1; /* اجازه رشد به متن برای اشغال فضای موجود */
font-weight: 500;
color: #444444;
}

.infographic-title {
font-size: 1.3em;
font-weight: bold;
color: #1A5276;
margin-bottom: 8px;
}

/* تنظیمات رسپانسیو */
@media (max-width: 768px) { /* برای تبلت و لپ‌تاپ‌های کوچک */
.article-container {
margin: 15px auto;
padding: 18px;
}
h1 {
font-size: 2.2em;
margin-bottom: 25px;
}
h2 {
font-size: 1.8em;
margin-top: 35px;
margin-bottom: 20px;
}
h3 {
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 12px;
}
th, td {
padding: 12px 15px;
font-size: 0.9em;
}
.infographic-box {
padding: 20px;
margin: 40px 0;
border-right-width: 5px;
}
.infographic-item {
flex-direction: column; /* چیدن آیکون و متن به صورت عمودی در صفحات کوچک‌تر */
text-align: center;
padding: 15px;
}
.infographic-icon {
margin-bottom: 10px;
font-size: 2em;
}
.infographic-title {
font-size: 1.1em;
}
}

@media (max-width: 480px) { /* برای موبایل */
.article-container {
margin: 10px;
padding: 10px;
box-shadow: none; /* حذف سایه در صفحه‌های بسیار کوچک برای ظاهری تمیزتر */
border-radius: 0; /* حذف گوشه‌های گرد در موبایل */
}
h1 {
font-size: 1.9em;
margin-bottom: 20px;
padding-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 30px;
}
h3 {
font-size: 1.2em;
margin-top: 20px;
}
p, li {
font-size: 0.9em;
}
table, th, td {
display: block; /* برای رسپانسیو کردن جدول با پشته کردن سلول‌ها */
width: 100%;
box-sizing: border-box;
}
th {
text-align: center;
background-color: #1A5276;
color: white;
padding: 10px;
border-bottom: none;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50%; /* فضا برای نمایش برچسب ستون */
text-align: right;
}
td::before { /* افزودن برچسب ستون به عنوان شبه‌عنصر */
content: attr(data-label);
position: absolute;
right: 10px;
width: 45%;
padding-left: 10px;
font-weight: bold;
text-align: left;
color: #1A5276;
}
tr:last-child td {
border-bottom: none; /* حذف خط پایین آخرین ردیف */
}
.infographic-box {
padding: 15px;
margin: 30px 0;
}
.infographic-box h2 {
font-size: 1.4em;
}
}

/* برای تلویزیون (صفحه‌های بزرگ) – می‌توان بهینه‌سازی بیشتری انجام داد */
@media (min-width: 1200px) {
.article-container {
max-width: 1000px; /* افزایش عرض برای نمایش بهتر در صفحات بزرگ */
padding: 40px;
}
h1 {
font-size: 3.2em;
margin-bottom: 40px;
}
h2 {
font-size: 2.4em;
margin-top: 55px;
margin-bottom: 30px;
}
h3 {
font-size: 1.8em;
margin-top: 40px;
margin-bottom: 20px;
}
p {
font-size: 1.1em;
}
.infographic-box {
padding: 40px;
}
.infographic-title {
font-size: 1.4em;
}
.infographic-icon {
font-size: 2.5em;
}
}