/* Base Styles for the article container */
.thesis-article-container {
font-family: ‘Vazirmatn’, ‘B Titr’, ‘Arial’, sans-serif; /* اولویت با فونت‌های فارسی، سپس عمومی */
direction: rtl;
text-align: right;
line-height: 1.8;
color: #333333; /* رنگ متن: خاکستری تیره */
background-color: #FDFDF5; /* رنگ پس‌زمینه: کرم روشن */
padding: 20px;
margin: 0 auto;
max-width: 900px; /* حداکثر عرض برای خوانایی در نمایشگرهای بزرگ */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* سایه ملایم */
border-radius: 8px;
box-sizing: border-box; /* شامل padding در عرض و ارتفاع کلی عنصر */
}

/* Headings Styling */
.thesis-article-container h1 {
font-size: 2.8em; /* اندازه فونت ریسپانسیو */
font-weight: 800; /* بسیار پررنگ */
color: #5A4A3B; /* رنگ قهوه‌ای تیره برای H1 */
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 3px solid #B5A795; /* خط جداکننده زیرین با رنگ خاص */
text-align: center;
line-height: 1.3;
}

.thesis-article-container h2 {
font-size: 2.2em;
font-weight: 700;
color: #708D81; /* رنگ آبی فیروزه‌ای ملایم برای H2 */
margin-top: 40px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #D5E1DF; /* خط جداکننده روشن‌تر */
line-height: 1.4;
}

.thesis-article-container h3 {
font-size: 1.7em;
font-weight: 600;
color: #5A4A3B; /* رنگ قهوه‌ای تیره برای H3 */
margin-top: 30px;
margin-bottom: 15px;
line-height: 1.5;
}

/* Paragraphs */
.thesis-article-container p {
margin-bottom: 1em;
text-align: justify; /* چینش متن به صورت justify برای ظاهری مرتب */
}

/* Lists (Bullet points) */
.thesis-article-container ul {
list-style-type: disc;
margin-right: 25px; /* فاصله از راست برای bullet points */
margin-bottom: 1em;
padding-right: 0; /* حذف padding پیش‌فرض */
}
.thesis-article-container ul li {
margin-bottom: 0.5em;
}

/* Table Styling */
.thesis-article-container table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background-color: #FFFFFF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border-radius: 6px;
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
font-size: 0.95em;
}
.thesis-article-container th, .thesis-article-container td {
border: 1px solid #E0E0E0; /* خطوط جدول خاکستری روشن */
padding: 12px 18px;
text-align: right;
}
.thesis-article-container th {
background-color: #B5A795; /* رنگ خاص برای هدر جدول */
color: #FFFFFF;
font-weight: 700;
text-align: center;
}
.thesis-article-container tr:nth-child(even) {
background-color: #F8F8F8; /* رنگ متناوب برای ردیف‌ها */
}

/* Table Responsiveness */
@media screen and (max-width: 600px) {
.thesis-article-container table {
display: block;
overflow-x: auto; /* فعال کردن اسکرول افقی در نمایشگرهای کوچک */
-webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
width: 100%;
}
.thesis-article-container thead, .thesis-article-container tbody, .thesis-article-container th, .thesis-article-container td, .thesis-article-container tr {
display: block; /* نمایش عناصر جدول به صورت بلوک */
}
/* پنهان کردن هدرهای جدول (غیرقابل مشاهده اما برای دسترسی‌پذیری موجود) */
.thesis-article-container thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.thesis-article-container td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50% !important; /* فضا برای data-label */
text-align: left; /* تراز چپ برای متن داخل سلول */
}
.thesis-article-container td:before {
position: absolute;
top: 6px;
right: 6px;
width: 45%;
padding-left: 10px;
white-space: nowrap;
font-weight: bold;
content: attr(data-label); /* استفاده از data-label برای نمایش عنوان در موبایل */
text-align: right;
color: #708D81;
}
}

/* Infographic Alternative Styling */
.info-graphic-section {
background-color: #EBF2F1; /* پس‌زمینه فیروزه‌ای روشن */
padding: 25px;
margin: 35px 0;
border-radius: 10px;
border: 1px solid #D5E1DF;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
flex-wrap: wrap; /* اجازه به آیتم‌ها برای رفتن به خط بعدی */
gap: 20px; /* فاصله بین آیتم‌ها */
justify-content: space-around;
text-align: center;
}

.info-graphic-item {
flex: 1 1 calc(50% – 20px); /* دو آیتم در هر ردیف در نمایشگرهای بزرگتر */
min-width: 280px; /* حداقل عرض برای هر آیتم قبل از شکستن به خط جدید */
background-color: #FFFFFF;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end; /* تراز محتوا به راست */
justify-content: flex-start;
border-top: 4px solid #708D81; /* خط بالای آیتم با رنگ خاص */
}

.info-graphic-item .icon {
font-size: 2.5em;
color: #708D81; /* رنگ آیکون */
margin-bottom: 10px;
}

.info-graphic-item .title {
font-size: 1.2em;
font-weight: 700;
color: #5A4A3B;
margin-bottom: 8px;
}

.info-graphic-item .description {
font-size: 0.95em;
color: #444444;
line-height: 1.6;
text-align: justify;
}

/* Table of Contents Styling */
.thesis-article-container .table-of-contents {
background-color: #EBF2F1;
border-left: 4px solid #708D81;
padding: 20px;
margin: 30px 0;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.thesis-article-container .table-of-contents h3 {
color: #708D81;
margin-top: 0;
margin-bottom: 15px;
font-size: 1.5em;
border-bottom: 1px solid #D5E1DF;
padding-bottom: 10px;
}
.thesis-article-container .table-of-contents ul {
list-style-type: none;
margin-right: 0;
padding-right: 0;
}
.thesis-article-container .table-of-contents ul li {
margin-bottom: 8px;
}
.thesis-article-container .table-of-contents ul li a {
color: #5A4A3B;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.thesis-article-container .table-of-contents ul li a:hover {
color: #708D81;
text-decoration: underline;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.thesis-article-container h1 { font-size: 2.2em; }
.thesis-article-container h2 { font-size: 1.8em; }
.thesis-article-container h3 { font-size: 1.4em; }
.thesis-article-container { padding: 15px; }
.info-graphic-item {
flex: 1 1 100%; /* تک ستونی شدن در نمایشگرهای کوچک */
min-width: unset; /* حذف حداقل عرض */
}
.info-graphic-section {
flex-direction: column; /* چیدمان عمودی آیتم‌ها */
align-items: center; /* مرکزچین کردن آیتم‌ها */
}
.info-graphic-item {
width: 100%; /* اشغال تمام عرض در نمایشگرهای کوچک */
max-width: 400px; /* محدود کردن عرض برای آیتم‌های باریک */
}
}

@media (max-width: 480px) {
.thesis-article-container h1 { font-size: 1.8em; }
.thesis-article-container h2 { font-size: 1.5em; }
.thesis-article-container h3 { font-size: 1.2em; }
.thesis-article-container { padding: 10px; }
}