/*
** طراحی اختصاصی برای مقاله “ویرایش پایان نامه پرستاری” **
این استایل‌ها برای نمایش بهینه و زیبا در مرورگرها و ویرایشگرهای بلوک طراحی شده‌اند.
از پالت رنگی الهام گرفته از طبیعت و آرامش‌بخش (سبزهای ملایم، خاکستری گرم) استفاده شده است.
هدف: خوانایی بالا، ظاهری حرفه‌ای و جذابیت بصری.
*/

/* — Base Styles — */
/* تنظیمات عمومی فونت، ارتفاع خط و رنگ متن برای خوانایی بالا */
body {
font-family: ‘Vazirmatn’, ‘Iranian Sans’, ‘Tahoma’, Arial, sans-serif; /* فونت‌های فارسی و جایگزین */
line-height: 1.8; /* ارتفاع خط بیشتر برای راحتی مطالعه */
color: #333333; /* رنگ متن تیره خاکستری برای کنتراست مناسب */
background-color: #fcfcfc; /* پس‌زمینه بسیار روشن و آرام */
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased; /* بهبود نمایش فونت در مرورگرهای وب‌کیت */
-moz-osx-font-smoothing: grayscale; /* بهبود نمایش فونت در فایرفاکس */
direction: rtl; /* پشتیبانی از راست‌چین */
text-align: right; /* تراز متن به راست */
}

/* — Article Container — */
/* کانتینر اصلی مقاله برای محدود کردن عرض و زیبایی بصری */
.article-container {
max-width: 960px; /* حداکثر عرض برای خوانایی روی نمایشگرهای بزرگ */
margin: 40px auto; /* فاصله از بالا و پایین و وسط‌چین کردن کانتینر */
padding: 35px 40px; /* فضای داخلی برای محتوا */
background-color: #ffffff; /* پس‌زمینه سفید برای محتوا */
border-radius: 15px; /* گوشه‌های گرد برای ظاهر مدرن */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.09); /* سایه ظریف برای عمق بخشیدن */
box-sizing: border-box; /* اطمینان از اینکه padding به عرض اضافه نشود */
border: 1px solid #e0e0e0; /* حاشیه ظریف */
}

/* — Headings — */
/* سبک‌دهی به عناوین برای سلسله مراتب بصری و جذابیت */
h1 {
font-size: 2.8em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 800; /* بسیار پررنگ */
color: #2a7f5d; /* سبز تیره و حرفه‌ای */
text-align: center;
margin-bottom: 45px;
line-height: 1.3;
padding-bottom: 15px;
border-bottom: 3px solid #e0e7e0; /* خط زیر عنوان */
}

h2 {
font-size: 2.2em;
font-weight: 700;
color: #348f6a; /* سبز کمی روشن‌تر */
margin-top: 55px;
margin-bottom: 30px;
border-bottom: 2px solid #e0e7e0;
padding-bottom: 12px;
}

h3 {
font-size: 1.7em;
font-weight: 600;
color: #43a17a; /* سبز روشن‌تر */
margin-top: 45px;
margin-bottom: 25px;
position: relative;
padding-right: 20px; /* برای قرار دادن نشانه */
}
h3::before { /* یک المان بصری کوچک کنار عناوین H3 */
content: ‘▪’;
color: #2a7f5d;
position: absolute;
right: 0;
top: -2px;
font-size: 1.2em;
}

/* — Paragraphs — */
p {
margin-bottom: 1.5em; /* فاصله بیشتر بین پاراگراف‌ها */
text-align: justify; /* تراز دو طرفه برای ظاهر منظم */
}

/* — Lists (Unordered) — */
ul {
list-style: none; /* حذف نشانگر پیش‌فرض */
margin-right: 25px;
margin-bottom: 1.8em;
padding: 0;
}

ul li {
margin-bottom: 1em;
position: relative;
padding-right: 25px; /* برای قرار دادن نشانگر سفارشی */
text-align: justify;
}
ul li::before { /* نشانگر سفارشی برای لیست‌ها */
content: ‘✔’; /* علامت تیک */
color: #5cb85c; /* سبز روشن */
position: absolute;
right: 0;
font-weight: bold;
}

/* — Table — */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 40px 0; /* فاصله از بالا و پایین */
font-size: 0.98em;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06); /* سایه برای جدول */
border-radius: 10px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
direction: rtl; /* راست‌چین برای محتوای جدول */
}

table th,
table td {
padding: 18px 20px; /* فضای داخلی سلول‌ها */
border: 1px solid #e8f0e8; /* حاشیه ظریف بین سلول‌ها */
text-align: right;
}

table th {
background-color: #e0e7e0; /* پس‌زمینه سبز روشن برای هدر جدول */
color: #2a7f5d;
font-weight: 700;
text-align: center; /* عناوین ستون‌ها وسط‌چین */
white-space: nowrap; /* جلوگیری از شکستن عنوان ستون */
}

table tr:nth-child(even) { /* رنگ‌بندی یک در میان سطرها */
background-color: #f7fdf7;
}

/* — Infographic Simulation — */
/* طراحی بصری برای نمایش مراحل به صورت اینفوگرافیک */
.infographic-container {
display: flex; /* استفاده از فلکس‌باکس برای چیدمان افقی */
flex-wrap: wrap; /* اجازه شکستن به خط بعد در صفحات کوچک */
justify-content: center; /* وسط‌چین کردن عناصر */
align-items: center;
margin: 50px 0;
background-color: #f4fdf4; /* پس‌زمینه سبز بسیار روشن برای کانتینر اینفوگرافیک */
padding: 30px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
border: 1px solid #eaf5ea;
}

.infographic-step {
background-color: #e8f5e8; /* پس‌زمینه سبز روشن برای هر مرحله */
color: #1f644e; /* رنگ متن تیره سبز */
padding: 22px 30px;
margin: 12px;
border-radius: 10px;
font-weight: 600;
text-align: center;
flex: 1; /* اجازه رشد به عناصر */
min-width: 200px; /* حداقل عرض قبل از شکستن */
max-width: 280px; /* حداکثر عرض برای جلوگیری از کشیدگی زیاد */
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* انیمیشن هنگام هاور */
border: 1px solid #dcebdc;
}

.infographic-step:hover {
transform: translateY(-7px); /* حرکت به سمت بالا هنگام هاور */
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.infographic-arrow {
font-size: 2.8em; /* سایز بزرگ برای فلش‌ها */
color: #5cb85c; /* سبز روشن‌تر برای فلش‌ها */
margin: 0 15px;
align-self: center; /* وسط‌چین کردن عمودی فلش */
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}

/* — Responsive Adjustments — */
/* تنظیمات برای نمایش در دستگاه‌های مختلف (موبایل، تبلت، لپ‌تاپ، تلویزیون) */

/* برای تبلت‌ها و نمایشگرهای کوچک‌تر از 992px */
@media (max-width: 992px) {
.article-container {
max-width: 90%; /* عرض بیشتر برای استفاده بهتر از فضا */
margin: 30px auto;
padding: 30px;
}
h1 { font-size: 2.4em; margin-bottom: 35px; }
h2 { font-size: 1.9em; margin-top: 45px; }
h3 { font-size: 1.5em; margin-top: 35px; }
.infographic-step {
min-width: 180px;
max-width: 250px;
}
.infographic-arrow { font-size: 2.4em; margin: 0 10px; }
}

/* برای موبایل‌ها و نمایشگرهای کوچک‌تر از 768px */
@media (max-width: 768px) {
.article-container {
margin: 20px auto;
padding: 25px;
border-radius: 10px;
}
h1 { font-size: 2em; margin-bottom: 30px; padding-bottom: 10px; }
h2 { font-size: 1.7em; margin-top: 35px; margin-bottom: 20px; padding-bottom: 8px; }
h3 { font-size: 1.4em; margin-top: 30px; margin-bottom: 18px; padding-right: 15px; }
h3::before { font-size: 1em; top: 0; }
ul { margin-right: 20px; }
ul li { padding-right: 20px; }
.infographic-container {
flex-direction: column; /* چیدمان عمودی برای اینفوگرافیک در موبایل */
padding: 20px;
}
.infographic-step {
width: 100%; /* عرض کامل برای مراحل */
max-width: 100%; /* برای جلوگیری از خطای max-width */
margin: 10px 0; /* فاصله عمودی بین مراحل */
}
.infographic-arrow {
transform: rotate(90deg); /* چرخش فلش به پایین */
margin: 10px 0; /* فاصله عمودی برای فلش‌ها */
font-size: 2.2em;
}
table, table th, table td {
display: block; /* نمایش جدول به صورت بلوک برای اسکرول افقی یا پشته شدن */
width: 100%;
box-sizing: border-box;
}
table thead { display: none; } /* حذف هدر جدول در موبایل برای سادگی */
table tr {
margin-bottom: 15px;
border: 1px solid #e8f0e8;
border-radius: 8px;
overflow: hidden;
}
table td {
text-align: right;
border-bottom: none;
position: relative;
padding-right: 120px; /* فضا برای برچسب مصنوعی */
}
table td:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
table td:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom: 1px solid #e8f0e8; }
table td::before {
content: attr(data-label); /* نمایش عنوان ستون به عنوان برچسب */
position: absolute;
right: 10px;
font-weight: bold;
color: #2a7f5d;
white-space: nowrap;
}
}

/* برای موبایل‌های خیلی کوچک و نمایشگرهای کمتر از 480px */
@media (max-width: 480px) {
.article-container {
padding: 20px;
margin: 10px auto;
}
h1 { font-size: 1.7em; margin-bottom: 25px; }
h2 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; }
h3 { font-size: 1.3em; margin-top: 25px; margin-bottom: 15px; }
.infographic-step { padding: 18px 20px; margin: 8px 0; }
.infographic-arrow { font-size: 2em; margin: 8px 0; }
ul { margin-right: 15px; }
ul li { padding-right: 15px; }
}

/* — Print Styles (Optional but good practice) — */
@media print {
body {
background-color: #fff;
color: #000;
}
.article-container {
box-shadow: none;
border: none;
margin: 0;
padding: 0;
max-width: 100%;
}
h1, h2, h3 {
color: #000 !important;
border-color: #ccc !important;
page-break-after: avoid;
}
.infographic-container, table {
box-shadow: none;
border: 1px solid #ccc;
}
.infographic-step {
background-color: #f0f0f0 !important;
color: #000 !important;
border-color: #ccc !important;
}
.infographic-arrow {
color: #000 !important;
}
}