/* تنظیمات پایه برای خوانایی و پاسخگویی */
@import url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/misc/vazirmatn-font-face.css’);

body {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت اصلی و جایگزین‌ها */
line-height: 1.7;
color: #333333;
margin: 0;
padding: 0;
background-color: #F8F8F8; /* پس‌زمینه روشن برای کل صفحه */
direction: rtl; /* جهت‌دهی راست به چپ برای زبان فارسی */
text-align: justify; /* تراز متن */
}

/* کانتینر اصلی مقاله */
.article-container {
max-width: 900px;
margin: 20px auto;
padding: 30px;
background-color: #FFFFFF;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* استایل هدینگ H1 */
h1 {
font-size: 2.8em;
font-weight: 800; /* بسیار پررنگ */
color: #1A4D2E; /* سبز جنگلی تیره */
text-align: center;
margin-bottom: 45px;
line-height: 1.3;
padding-bottom: 15px;
border-bottom: 4px solid #DCEEDA; /* خط زیرین زیبا */
}

/* استایل هدینگ H2 */
h2 {
font-size: 2.2em;
font-weight: 700; /* پررنگ */
color: #2D6C42; /* سبز متوسط */
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 12px;
border-bottom: 2px solid #E0E0E0; /* خط زیرین برای جدا کردن بخش‌ها */
text-align: right;
}

/* استایل هدینگ H3 */
h3 {
font-size: 1.7em;
font-weight: 600; /* نیمه‌پررنگ */
color: #4CAF50; /* سبز روشن‌تر */
margin-top: 35px;
margin-bottom: 18px;
text-align: right;
}

/* پاراگراف‌ها */
p {
margin-bottom: 20px;
line-height: 1.8;
font-size: 1.05em;
text-align: justify;
}

/* لیست‌ها */
ul {
margin-bottom: 20px;
padding-right: 28px; /* فاصله از راست برای نقطه‌ها */
list-style-type: square; /* نوع نقطه لیست */
color: #555555;
}

li {
margin-bottom: 12px;
line-height: 1.7;
font-size: 1em;
}

/* فهرست مطالب */
.table-of-contents {
background-color: #F0FFF0; /* پس‌زمینه سبز روشن */
border: 1px solid #D0EED0;
border-radius: 10px;
padding: 25px 30px;
margin: 40px 0;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.table-of-contents h3 {
color: #1A4D2E;
margin-top: 0;
margin-bottom: 20px;
border-bottom: 2px solid #D0EED0;
padding-bottom: 12px;
font-size: 1.9em;
text-align: center;
}
.table-of-contents ul {
list-style-type: none; /* حذف نقطه‌های پیش‌فرض */
padding-right: 0;
margin-bottom: 0;
}
.table-of-contents li {
margin-bottom: 10px;
}
.table-of-contents a {
color: #3D8B40; /* رنگ لینک */
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
display: block;
padding: 5px 0;
}
.table-of-contents a:hover {
color: #1A4D2E;
text-decoration: underline;
}

/* جدول آموزشی استاندارد */
.styled-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 40px 0;
font-size: 1em;
text-align: right;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden; /* برای نمایش گردی گوشه‌ها */
}

.styled-table thead tr {
background-color: #2D6C42; /* سبز تیره برای هدر */
color: #ffffff;
text-align: center;
}

.styled-table th,
.styled-table td {
padding: 15px 22px;
border: 1px solid #ddd;
}

.styled-table tbody tr {
border-bottom: 1px solid #eeeeee;
}

.styled-table tbody tr:nth-of-type(even) {
background-color: #f7f7f7; /* راه‌راه برای ردیف‌های زوج */
}

.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #2D6C42; /* خط پایانی پررنگ‌تر */
}
.styled-table th {
font-weight: 600;
font-size: 1.15em;
}
.styled-table td {
vertical-align: top; /* تراز محتوا به بالا */
}

/* بخش اینفوگرافیک/راهنمای بصری */
.visual-guide {
margin: 60px 0;
background-color: #E8F5E9; /* پس‌زمینه سبز روشن */
border-radius: 15px;
padding: 35px;
text-align: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.visual-guide h2 {
color: #1A4D2E;
border-bottom: none;
margin-top: 0;
margin-bottom: 35px;
font-size: 2.5em;
padding-bottom: 0;
}
.visual-steps {
display: flex;
flex-wrap: wrap; /* امکان شکست خط در صفحات کوچک */
justify-content: center;
gap: 30px; /* فاصله بین آیتم‌ها */
position: relative;
}
.step-item {
background-color: #FFFFFF;
border: 1px solid #DCEEDA;
border-radius: 12px;
padding: 28px;
flex: 1 1 calc(33.33% – 30px); /* سه آیتم در هر ردیف */
max-width: calc(33.33% – 30px); /* حداکثر عرض برای سه آیتم */
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: center;
position: relative; /* برای موقعیت‌دهی فلش */
}
.step-item:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.step-icon {
font-size: 4em; /* اندازه بزرگ آیکون */
color: #4CAF50;
margin-bottom: 18px;
display: block;
}
.step-title {
font-size: 1.5em;
font-weight: 700;
color: #2D6C42;
margin-bottom: 12px;
line-height: 1.3;
}
.step-description {
font-size: 1.05em;
color: #555555;
line-height: 1.7;
}

/* فلش‌های راهنما برای اینفوگرافیک در حالت دسکتاپ (جهت RTL) */
.visual-steps .step-item:not(:last-child)::after {
content: ‘◀’; /* فلش به سمت چپ */
position: absolute;
left: -30px; /* تنظیم موقعیت بین بلاک‌ها */
top: 50%;
transform: translateY(-50%);
font-size: 3em;
color: #66BB6A;
display: flex;
align-items: center;
justify-content: center;
z-index: 5; /* اطمینان از قرارگیری روی سایر عناصر */
pointer-events: none; /* عدم تداخل با کلیک */
}
/* پنهان کردن فلش برای آخرین آیتم */
.visual-steps .step-item:last-child::after {
content: none !important;
}

/* واکنش‌گرایی برای صفحات مختلف */

/* تبلت و لپ‌تاپ‌های کوچک */
@media (max-width: 1024px) {
h1 { font-size: 2.5em; margin-bottom: 35px; }
h2 { font-size: 2em; margin-top: 40px; }
h3 { font-size: 1.6em; margin-top: 30px; }
.article-container {
margin: 15px auto;
padding: 25px;
max-width: 95%;
}
.table-of-contents {
padding: 20px 25px;
margin: 30px 0;
}
.table-of-contents h3 {
font-size: 1.7em;
}
.styled-table th, .styled-table td {
padding: 12px 18px;
font-size: 0.95em;
}
.visual-guide h2 {
font-size: 2.2em;
}
.visual-steps .step-item {
flex: 1 1 calc(48% – 20px); /* دو آیتم در هر ردیف */
max-width: calc(48% – 20px);
}
.visual-steps .step-item:not(:last-child)::after {
left: -20px; /* تنظیم موقعیت فلش برای دو ستون */
}
}

/* موبایل (نمایش ستونی) */
@media (max-width: 767px) {
h1 { font-size: 2.2em; margin-bottom: 25px; }
h2 { font-size: 1.8em; margin-top: 30px; }
h3 { font-size: 1.5em; margin-top: 25px; }
p, li { font-size: 1em; }
.article-container {
margin: 10px;
padding: 18px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* سایه کمتر در موبایل */
}
.table-of-contents {
padding: 15px 20px;
margin: 25px 0;
}
.table-of-contents h3 {
font-size: 1.6em;
}
.styled-table {
font-size: 0.9em;
display: block; /* برای اسکرول افقی جدول در موبایل */
overflow-x: auto;
white-space: nowrap; /* جلوگیری از شکستن محتوای سلول */
}
.styled-table thead, .styled-table tbody, .styled-table th, .styled-table td, .styled-table tr {
display: block; /* نمایش بلوکی برای ردیف‌ها و سلول‌ها */
}
.styled-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.styled-table tr {
border: 1px solid #ddd;
margin-bottom: 10px;
}
.styled-table td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50%; /* فضای کافی برای label */
text-align: right;
white-space: normal;
}
.styled-table td:before {
position: absolute;
right: 6px;
width: 45%;
padding-left: 10px;
white-space: nowrap;
font-weight: bold;
content: attr(data-label); /* استفاده از data-label برای عنوان ستون */
color: #2D6C42;
}
/* این بخش نیاز به اضافه کردن data-label به هر td در HTML دارد. اگر ویرایشگر آن را پشتیبانی نکند، جدول به صورت ستونی ساده نمایش داده می‌شود. برای این منظور، جدول بالا را ساده‌تر نگه می‌دارم. */
.styled-table td { /* بازگرداندن به حالت معمول جدول در موبایل، با اسکرول افقی */
display: table-cell;
}
.styled-table thead tr { /* بازگرداندن به حالت معمول */
position: static;
display: table-row;
}

.visual-guide h2 {
font-size: 2em;
}
.visual-steps {
flex-direction: column; /* نمایش ستونی در موبایل */
align-items: center;
}
.step-item {
max-width: 95%; /* تقریبا تمام عرض */
flex: 1 1 95%;
margin-bottom: 25px; /* فاصله بین آیتم‌های ستونی */
}
/* فلش رو به پایین برای حالت موبایل */
.visual-steps .step-item:not(:last-child)::after {
content: ‘⬇’; /* فلش به سمت پایین */
position: static; /* حذف موقعیت‌دهی مطلق */
transform: none;
margin-top: 15px;
margin-bottom: 5px;
font-size: 3em;
color: #66BB6A;
display: block;
width: auto;
left: auto;
top: auto;
}
}

/* تلویزیون (صفحات بسیار بزرگ) */
@media (min-width: 1920px) {
.article-container {
max-width: 1200px;
padding: 40px;
}
h1 { font-size: 3.5em; }
h2 { font-size: 2.8em; }
h3 { font-size: 2em; }
p, li { font-size: 1.1em; }
.visual-guide h2 { font-size: 3em; }
.step-icon { font-size: 5em; }
.step-title { font-size: 1.8em; }
.step-description { font-size: 1.1em; }
}