/*
* طراحی اختصاصی برای مقاله: “ویرایش پایان نامه چگونه انجام می‌شود در مدیریت مالی”
* این استایل‌ها برای نمایش بهینه در ویرایشگرهای بلوک و کلاسیک طراحی شده‌اند.
* رسپانسیو برای موبایل، تبلت، لپ‌تاپ و تلویزیون.
*/

/* استایل‌های پایه برای کانتینر اصلی مقاله */
.article-container {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* فونت انتخابی برای خوانایی بالا */
line-height: 1.8; /* فاصله خطوط برای سهولت خواندن */
color: #333333; /* رنگ متن اصلی */
max-width: 800px; /* حداکثر عرض محتوا برای خوانایی در نمایشگرهای بزرگ */
margin: 40px auto; /* مرکز قرار گرفتن در دسکتاپ و تبلت، با فاصله از بالا و پایین */
padding: 25px 30px; /* پدینگ داخلی برای فاصله از لبه‌ها */
background-color: #ffffff; /* پس‌زمینه سفید برای محتوا */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* سایه زیبا برای برجسته‌سازی کانتینر */
border-radius: 12px; /* گوشه‌های گرد برای ظاهری مدرن */
box-sizing: border-box; /* اطمینان از اینکه پدینگ و بردر در عرض و ارتفاع کلی عنصر محاسبه می‌شوند */
direction: rtl; /* جهت متن از راست به چپ برای زبان فارسی */
text-align: right; /* هم‌ترازی متن به راست */
}

/* تنظیمات رسپانسیو برای صفحه نمایش‌های کوچکتر (تبلت) */
@media (max-width: 768px) {
.article-container {
margin: 20px auto;
padding: 20px;
max-width: 95%; /* افزایش عرض در تبلت‌ها */
}
h1 { font-size: 2.2em !important; }
h2 { font-size: 1.6em !important; }
h3 { font-size: 1.3em !important; }
p, li, th, td { font-size: 0.95em !important; }
}

/* تنظیمات رسپانسیو برای صفحه نمایش‌های بسیار کوچک (موبایل) */
@media (max-width: 480px) {
.article-container {
padding: 15px;
margin: 15px auto;
}
h1 { font-size: 1.8em !important; line-height: 1.3 !important; }
h2 { font-size: 1.4em !important; line-height: 1.4 !important; }
h3 { font-size: 1.1em !important; line-height: 1.5 !important; }
p, li, th, td { font-size: 0.9em !important; line-height: 1.7 !important; }
}

/* استایل‌دهی به هدینگ‌ها */
h1, h2, h3 {
color: #1a535c; /* رنگ آبی-سبز تیره برای هدینگ‌ها */
margin-top: 1.8em; /* فاصله بالا از عنصر قبلی */
margin-bottom: 0.9em; /* فاصله پایین از عنصر بعدی */
padding-bottom: 0.4em; /* پدینگ پایین برای خط زیرین */
border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* خط جداکننده زیر هدینگ‌ها */
text-align: right; /* هم‌ترازی به راست */
}

h1 {
font-size: 2.5em; /* اندازه فونت بزرگ برای H1 */
font-weight: bold; /* ضخامت فونت بولد */
text-align: center; /* مرکز قرار گرفتن عنوان اصلی */
border-bottom: 3px solid #1a535c; /* خط ضخیم‌تر زیر H1 */
padding-bottom: 0.7em;
margin-top: 0; /* حذف فاصله بالا برای عنوان اصلی */
margin-bottom: 1.2em;
line-height: 1.2;
}

h2 {
font-size: 1.9em; /* اندازه فونت برای H2 */
font-weight: bold;
color: #1a535c;
line-height: 1.3;
}

h3 {
font-size: 1.5em; /* اندازه فونت برای H3 */
font-weight: bold;
color: #4a7c59; /* رنگ سبز-آبی ملایم‌تر برای H3 */
line-height: 1.4;
}

/* استایل‌های عمومی برای پاراگراف‌ها و لیست‌ها */
p {
margin-bottom: 1.2em;
text-align: justify; /* چینش متن به صورت justify */
line-height: 1.9;
}

ul {
list-style-type: none; /* حذف نشانگر پیش‌فرض لیست */
margin: 1.5em 0;
padding-right: 0; /* حذف پدینگ پیش‌فرض */
}

li {
margin-bottom: 0.8em;
padding-right: 25px; /* پدینگ برای نشانگر سفارشی */
position: relative;
text-align: justify;
}

li::before {
content: ‘•’; /* نشانگر دایره‌ای سفارشی */
color: #4a7c59; /* رنگ نشانگر */
font-weight: bold;
font-size: 1.2em;
position: absolute;
right: 0;
top: 0;
}

/* استایل‌دهی به جدول */
table {
width: 100%;
border-collapse: collapse; /* ادغام borderهای سلول‌ها */
margin: 2em 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* سایه برای جدول */
border-radius: 8px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* پنهان کردن هر چیزی که از مرزها بیرون می‌زند */
}

th, td {
border: 1px solid #d1e0e0; /* بردر نازک و روشن برای سلول‌ها */
padding: 14px 18px; /* پدینگ داخلی سلول‌ها */
text-align: right; /* هم‌ترازی متن به راست */
line-height: 1.6;
}

th {
background-color: #e0f2f7; /* پس‌زمینه آبی-سبز روشن برای هدر جدول */
font-weight: bold;
color: #1a535c; /* رنگ متن هدر */
font-size: 1.05em;
}

tr:nth-child(even) {
background-color: #f9fdfd; /* ردیف‌های زوج با رنگ کمی متفاوت برای خوانایی */
}

/* استایل برای جایگزین اینفوگرافیک: “جریان تحلیلی” */
.infographic-flow {
display: flex;
flex-wrap: wrap; /* اجازه شکستن به خط بعدی در صفحات کوچک */
justify-content: center; /* مرکز قرار گرفتن آیتم‌ها */
gap: 25px; /* فاصله بین آیتم‌ها */
margin: 2.5em 0;
text-align: center;
}

.flow-step {
background-color: #f0f8f8; /* پس‌زمینه روشن برای هر گام */
border: 2px solid #a8dadc; /* بردر با رنگ آبی-سبز ملایم */
border-radius: 10px;
padding: 20px 25px;
flex: 1 1 calc(25% – 25px); /* تلاش برای 4 آیتم در هر ردیف با توجه به فاصله */
max-width: calc(25% – 25px); /* حداکثر عرض برای کنترل چیدمان */
min-width: 200px; /* حداقل عرض قبل از شکستن به ردیف جدید */
box-shadow: 0 3px 12px rgba(0,0,0,0.08);
position: relative;
font-weight: bold;
color: #1a535c;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن هنگام هاور */
}

.flow-step:hover {
transform: translateY(-5px); /* حرکت کمی به بالا هنگام هاور */
box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* افزایش سایه هنگام هاور */
}

.flow-step span:first-child {
font-size: 1.15em;
display: block;
margin-bottom: 8px;
color: #1a535c;
}

.flow-step span:last-child {
font-size: 0.9em;
color: #555;
display: block;
}

/* فلش بین مراحل برای نمایش جریان */
.flow-step:not(:last-child)::after {
content: ‘➔’; /* محتوای فلش */
position: absolute;
top: 50%;
left: 100%;
transform: translate(10px, -50%); /* جایگذاری فلش در سمت راست */
font-size: 2.5em;
color: #88b3b3; /* رنگ فلش */
z-index: 1;
display: none; /* به طور پیش‌فرض پنهان، در دسکتاپ نمایش داده می‌شود */
}

/* نمایش فلش در دسکتاپ و تبلت‌های بزرگ */
@media (min-width: 769px) {
.flow-step:not(:last-child)::after {
display: block; /* نمایش فلش */
}
}

/* تنظیمات رسپانسیو برای جریان اینفوگرافیک در موبایل و تبلت کوچک */
@media (max-width: 768px) {
.flow-step {
flex: 1 1 100%; /* هر آیتم در یک ردیف جداگانه */
max-width: 100%;
}
.flow-step:not(:last-child)::after {
content: ‘↓’; /* تغییر فلش به سمت پایین */
top: 100%;
left: 50%;
transform: translate(-50%, 10px); /* جایگذاری فلش در پایین */
margin-top: 5px;
display: block; /* نمایش فلش در موبایل برای جریان عمودی */
}
}

/* استایل برای جایگزین اینفوگرافیک: “نکات طلایی” */
.info-graphic-box {
background-color: #f0fdfd; /* پس‌زمینه بسیار روشن و آرام‌بخش */
border-left: 6px solid #1a535c; /* خط تزیینی در سمت چپ */
padding: 20px 25px;
margin: 2.5em 0;
border-radius: 10px;
display: flex;
flex-direction: column; /* چیدمان عمودی آیتم‌ها */
gap: 15px; /* فاصله بین آیتم‌ها */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.info-graphic-item {
display: flex;
align-items: flex-start; /* هم‌ترازی آیتم‌ها در بالا */
gap: 12px;
color: #333333;
background-color: #ffffff;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
border: 1px solid #e0f2f7;
}

.info-graphic-item span:first-child {
font-weight: bold;
color: #005f6b; /* رنگ پررنگ‌تر برای عنوان نکته */
flex-shrink: 0; /* جلوگیری از کوچک شدن عنوان */
min-width: 100px; /* حداقل عرض برای عنوان نکته */
text-align: right;
}

.info-graphic-item span:last-child {
flex-grow: 1; /* اجازه رشد به فضای باقیمانده */
text-align: justify;
line-height: 1.7;
}

.info-graphic-item::before {
content: ‘★’; /* آیکون ستاره برای نکات طلایی */
color: #ffc107; /* رنگ طلایی برای ستاره */
font-weight: bold;
font-size: 1.5em;
line-height: 1;
flex-shrink: 0; /* جلوگیری از کوچک شدن ستاره */
margin-top: 2px; /* تنظیم موقعیت ستاره */
}