/*
** راهنمای استایل کلی برای نمایش بهتر در ویرایشگر بلوک و ریسپانسیو بودن **
این استایل‌ها به گونه‌ای طراحی شده‌اند که:
1. برای موبایل، تبلت، لپ‌تاپ و تلویزیون ریسپانسیو باشند (با استفاده از max-width و @media queries).
2. دارای طراحی منحصر به فرد و رنگ‌بندی زیبا باشند.
3. پس از کپی در ویرایشگر بلوک یا کلاسیک، به درستی نمایش داده شوند.

توجه: برخی از فونت‌ها (مانند Vazirmatn) باید بر روی سیستم کاربر نصب باشند یا از طریق CDN بارگذاری شوند تا نمایش داده شوند. در غیر این صورت، فونت‌های جایگزین (Arial, sans-serif) استفاده خواهند شد.
*/
body {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif; /* فونت پیشنهادی فارسی با جایگزین‌های عمومی */
line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
color: #333333; /* رنگ متن اصلی */
direction: rtl; /* جهت متن راست به چپ برای فارسی */
text-align: right; /* تراز متن به راست */
margin: 0;
padding: 0;
background-color: #F8F9FA; /* رنگ پس‌زمینه کلی صفحه */
}
.container {
max-width: 900px; /* حداکثر عرض محتوا برای نمایش بهینه در دسکتاپ و تلویزیون */
margin: 20px auto; /* مرکز قرار گرفتن محتوا در صفحه و فاصله از بالا و پایین */
padding: 20px;
background-color: #ffffff; /* پس‌زمینه سفید برای کانتینر اصلی */
border-radius: 12px; /* گوشه‌های گرد */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* سایه ظریف برای عمق‌بخشی */
overflow: hidden; /* برای اطمینان از نمایش صحیح border-radius */
}
h1 {
font-size: 36px !important;
font-weight: bold !important;
color: #0A2E4E !important; /* رنگ سرمه‌ای تیره برای عنوان اصلی */
text-align: center !important;
margin-bottom: 30px !important;
padding-bottom: 15px !important;
border-bottom: 3px solid #FFC107 !important; /* خط زیر عنوان با رنگ طلایی */
}
h2 {
font-size: 28px !important;
font-weight: bold !important;
color: #0A2E4E !important;
margin-top: 45px !important;
margin-bottom: 25px !important;
padding-bottom: 12px !important;
border-bottom: 1px dashed #D0DCE7 !important; /* خط زیر عنوان H2 */
}
h3 {
font-size: 22px !important;
font-weight: bold !important;
color: #2C5F8D !important; /* رنگ آبی متوسط برای عنوان H3 */
margin-top: 35px !important;
margin-bottom: 20px !important;
}
.section-intro {
font-size: 17px;
margin-bottom: 35px;
text-align: justify;
padding: 20px;
background-color: #F7FBFF;
border-radius: 10px;
border: 1px solid #E0E7ED;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* سایه داخلی */
}
.toc-box {
margin-top: 40px;
border-left: 6px solid #0A2E4E;
background-color: #E8F0F7;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.toc-box h2 {
font-size: 26px !important;
color: #0A2E4E !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
border-bottom: none !important;
}
.toc-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.toc-box li {
margin-bottom: 12px;
padding-right: 30px;
position: relative;
}
.toc-box li:before {
content: ‘📚’; /* آیکون کتاب */
position: absolute;
right: 0;
font-size: 18px;
color: #FFC107;
}
.toc-box a {
text-decoration: none;
color: #333333;
font-weight: 500;
transition: color 0.3s ease;
}
.toc-box a:hover {
color: #0A2E4E;
}

.bullet-list-primary li {
margin-bottom: 12px;
padding-right: 30px;
position: relative;
font-size: 16px;
text-align: justify;
}
.bullet-list-primary li:before {
content: ‘✔️’; /* تیک سبز برای لیست‌های اصلی */
color: #4CAF50;
position: absolute;
right: 0;
font-weight: bold;
font-size: 18px;
}
.bullet-list-secondary li {
margin-bottom: 10px;
padding-right: 25px;
position: relative;
font-size: 16px;
text-align: justify;
}
.bullet-list-secondary li:before {
content: ‘✅’; /* تیک سبز تیره */
color: #0A2E4E;
position: absolute;
right: 0;
font-weight: bold;
font-size: 18px;
}
.bullet-list-warning li {
margin-bottom: 10px;
padding-right: 25px;
position: relative;
font-size: 16px;
text-align: justify;
}
.bullet-list-warning li:before {
content: ‘⚠️’; /* علامت هشدار */
color: #FF7043; /* رنگ نارنجی هشدار */
position: absolute;
right: 0;
font-weight: bold;
font-size: 18px;
}

.info-box-yellow {
background-color: #FFFDE7; /* زرد روشن برای باکس‌های اطلاعاتی/نکات */
border-right: 6px solid #FFC107; /* حاشیه راست طلایی */
padding: 20px 25px;
margin-top: 25px;
margin-bottom: 25px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.info-box-green {
background-color: #F0FCF0; /* سبز روشن برای راه‌حل‌ها/موفقیت */
border-right: 6px solid #4CAF50; /* حاشیه راست سبز */
padding: 20px 25px;
margin-top: 25px;
margin-bottom: 25px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.info-box-green h3 {
color: #0A2E4E !important;
margin-top: 0 !important;
margin-bottom: 15px !important;
}
.info-box-green li:before {
content: ‘✅’; /* تیک سبز برای لیست‌های داخل باکس سبز */
color: #4CAF50;
position: absolute;
right: 0;
font-weight: bold;
font-size: 18px;
}

table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 0.98em;
min-width: 300px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); /* سایه قوی‌تر برای جدول */
border-radius: 10px;
overflow: hidden; /* برای نمایش صحیح border-radius */
}
table thead tr {
background-color: #0A2E4E; /* سربرگ جدول با رنگ سرمه‌ای */
color: #ffffff;
text-align: right;
}
table th, table td {
padding: 15px 20px;
border: 1px solid #e0e0e0; /* حاشیه روشن‌تر برای سلول‌ها */
}
table tbody tr {
border-bottom: 1px solid #eeeeee;
}
table tbody tr:nth-of-type(even) {
background-color: #f7f7f7; /* ردیف‌های زوج با پس‌زمینه کمی تیره‌تر */
}
table tbody tr:last-of-type {
border-bottom: 3px solid #0A2E4E; /* خط پایانی جدول با رنگ سرمه‌ای */
}

.infographic-box {
margin: 40px auto;
padding: 30px;
background-color: #E8F0F7;
border: 1px solid #D0DCE7;
border-radius: 15px;
max-width: 750px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
text-align: center;
}
.infographic-box h3 {
font-size: 26px !important;
color: #0A2E4E !important;
margin-bottom: 30px !important;
text-align: center !important;
}
.infographic-item {
flex: 1 1 220px; /* فلکس آیتم‌ها با عرض پایه */
background-color: #ffffff;
border: 2px solid #FFC107;
border-radius: 10px;
padding: 20px;
box-shadow: 0 6px 15px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infographic-item:hover {
transform: translateY(-8px); /* افکت شناور شدن هنگام هاور */
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
.infographic-item p:first-of-type {
font-weight: bold;
color: #0A2E4E;
font-size: 19px;
margin-bottom: 12px;
}
.infographic-item p:last-of-type {
font-size: 15px;
color: #555;
margin: 0;
}
.infographic-arrow {
font-size: 24px;
color: #0A2E4E;
margin: 15px 0;
}

.faq-box {
background-color: #F7FBFF;
border-left: 6px solid #0A2E4E;
padding: 20px 25px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.faq-box h3 {
font-size: 20px !important;
color: #0A2E4E !important;
margin-top: 0 !important;
margin-bottom: 15px !important;
}
.faq-box p {
font-size: 16px;
margin: 0;
text-align: justify;
}

.footer-section {
font-size: 17px;
margin-top: 40px;
padding: 25px;
background-color: #E8F0F7;
border-top: 3px solid #0A2E4E;
border-radius: 0 0 12px 12px;
text-align: justify;
color: #333333;
}

/* ** Responsive Adjustments ** */
@media (max-width: 768px) {
.container {
margin: 15px; /* فاصله کمتر در موبایل */
padding: 15px;
}
h1 { font-size: 28px !important; margin-bottom: 20px !important; }
h2 { font-size: 24px !important; margin-top: 35px !important; margin-bottom: 20px !important; }
h3 { font-size: 20px !important; margin-top: 25px !important; margin-bottom: 15px !important; }

.section-intro, .footer-section {
padding: 15px;
font-size: 15px;
}
.toc-box {
padding: 20px;
}
.toc-box h2 {
font-size: 22px !important;
}
.bullet-list-primary li, .bullet-list-secondary li, .bullet-list-warning li {
font-size: 15px;
padding-right: 20px;
}
.bullet-list-primary li:before, .bullet-list-secondary li:before, .bullet-list-warning li:before {
font-size: 16px;
}
.info-box-yellow, .info-box-green {
padding: 15px 20px;
}
.info-box-green h3 {
font-size: 18px !important;
}
.info-box-green li {
font-size: 15px;
padding-right: 20px;
}

/* Responsive Table */
table {
border-radius: 8px;
box-shadow: none; /* حذف سایه در موبایل برای سادگی */
}
table thead { display: none; } /* مخفی کردن سربرگ جدول در موبایل */
table, table tbody, table tr, table td {
display: block; /* تبدیل عناصر جدول به بلاک برای نمایش عمودی */
width: 100%;
}
table tr {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* سایه برای هر ردیف */
}
table td {
text-align: right;
border: none; /* حذف حاشیه‌های داخلی */
border-bottom: 1px solid #eee;
position: relative;
padding-right: 45%; /* فضای کافی برای label */
font-size: 15px;
}
table td:before {
content: attr(data-label); /* نمایش label از data-label */
position: absolute;
right: 0;
width: 40%;
padding-right: 10px;
font-weight: bold;
text-align: left; /* تراز label به چپ */
color: #0A2E4E;
}
table tbody tr:last-of-type {
border-bottom: 1px solid #ddd;
}

/* Responsive Infographic */
.infographic-box {
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.infographic-box h3 {
font-size: 22px !important;
margin-bottom: 20px !important;
}
.infographic-item {
flex: 1 1 100%; /* آیتم‌ها تمام عرض را بگیرند */
margin-bottom: 15px; /* فاصله بین آیتم‌ها */
padding: 15px;
}
.infographic-item p:first-of-type {
font-size: 17px;
}
.infographic-item p:last-of-type {
font-size: 13px;
}
.infographic-arrow {
transform: rotate(90deg); /* چرخش فلش‌ها در موبایل */
margin: 10px auto;
display: block;
}
.infographic-box > div:nth-child(odd) > .infographic-arrow {
display: none; /* حذف فلش‌های اضافی بین ردیف‌ها */
}
.infographic-box > div:nth-child(even) > .infographic-arrow:last-of-type {
display: block; /* نگه داشتن فلش برای ادامه روند */
}
.infographic-box div:has(.infographic-arrow) {
display: block; /* اطمینان از نمایش فلش‌ها به صورت بلاک */
text-align: center;
}

.faq-box {
padding: 15px 20px;
}
.faq-box h3 {
font-size: 18px !important;
}
.faq-box p {
font-size: 15px;
}
}

@media (max-width: 480px) {
h1 { font-size: 24px !important; }
h2 { font-size: 20px !important; }
h3 { font-size: 18px !important; }
.infographic-arrow { font-size: 20px; }
}