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

/* فونت‌های کلی و خوانایی */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif;
line-height: 1.8;
color: #333333;
background-color: #f7f9fc; /* رنگ پس‌زمینه ملایم */
margin: 0;
padding: 0;
}

/* کانتینر اصلی محتوا برای نمایش رسپانسیو و متمرکز */
.container {
max-width: 1000px; /* حداکثر عرض برای دسکتاپ */
margin: 0 auto; /* مرکز قرار گرفتن در صفحه */
padding: 1.5em; /* پدینگ داخلی برای فاصله از لبه‌ها */
background-color: #ffffff; /* پس‌زمینه سفید برای محتوا */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* سایه ملایم برای جلوه بصری */
border-radius: 10px; /* گوشه‌های گرد */
margin-top: 2em;
margin-bottom: 2em;
}

/* استایل کلی هدینگ‌ها */
h1, h2, h3 {
color: #005f73; /* رنگ آبی نفتی برای هدینگ‌ها */
font-weight: bold;
margin-top: 1.5em;
margin-bottom: 0.8em;
}

/* استایل اختصاصی H1 */
h1 {
font-size: 2.8em; /* سایز فونت بزرگ برای H1 */
text-align: center;
border-bottom: 3px solid #f9a825; /* خط زیرین طلایی/نارنجی */
padding-bottom: 0.5em;
margin-top: 0;
color: #004080; /* رنگ آبی تیره‌تر برای H1 */
}

/* استایل اختصاصی H2 */
h2 {
font-size: 2.2em;
color: #005f73;
border-bottom: 2px solid #e0f2f7; /* خط زیرین آبی روشن */
padding-bottom: 0.4em;
}

/* استایل اختصاصی H3 */
h3 {
font-size: 1.7em;
color: #0077b6; /* رنگ آبی متوسط */
margin-top: 1.2em;
}

/* استایل پاراگراف‌ها */
p {
margin-bottom: 1em;
font-size: 1.1em;
text-align: justify; /* تراز از دو طرف برای خوانایی بهتر */
}

/* استایل لیست‌ها */
ul {
list-style-type: disc;
margin-left: 1.5em;
margin-bottom: 1em;
}

li {
margin-bottom: 0.5em;
font-size: 1.1em;
}

/* استایل لینک‌ها */
a {
color: #fca311; /* رنگ طلایی/نارنجی برای لینک‌ها */
text-decoration: none;
transition: color 0.3s ease; /* انیمیشن نرم برای تغییر رنگ */
}

a:hover {
color: #005f73; /* تغییر رنگ لینک هنگام هاور */
text-decoration: underline;
}

/* استایل جدول */
.styled-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 1.5em 0;
font-size: 1.1em;
text-align: left;
}

.styled-table thead tr {
background-color: #005f73; /* پس‌زمینه آبی نفتی برای سربرگ */
color: #ffffff;
text-align: left;
}

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

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

.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3; /* رنگ متناوب برای ردیف‌ها */
}

.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #005f73; /* خط پایین آبی نفتی */
}

/* رسپانسیو کردن جدول برای صفحه‌های کوچک */
@media screen and (max-width: 600px) {
.styled-table thead {
display: none; /* مخفی کردن سربرگ */
}
.styled-table, .styled-table tbody, .styled-table tr, .styled-table td {
display: block;
width: 100%;
}
.styled-table tr {
margin-bottom: 15px;
}
.styled-table td {
text-align: right;
padding-left: 50%;
position: relative;
}
.styled-table td::before {
content: attr(data-label); /* نمایش عنوان ستون */
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: bold;
text-align: left;
color: #005f73;
}
}

/* استایل جعبه اطلاعات (جایگزین اینفوگرافیک) */
.info-box {
background-color: #e0f2f7; /* پس‌زمینه آبی روشن */
border-left: 5px solid #f9a825; /* حاشیه سمت چپ طلایی */
padding: 1.5em;
margin: 2em 0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* سایه ملایم */
}

.info-box h3 {
color: #004080;
margin-top: 0;
margin-bottom: 0.8em;
}

.info-box ul {
list-style: none; /* حذف نشانگر لیست پیش‌فرض */
padding: 0;
margin: 0;
}

.info-box ul li {
margin-bottom: 0.8em;
padding-left: 1.8em;
position: relative;
font-size: 1.1em;
}

.info-box ul li::before {
content: ‘✨’; /* استفاده از ایموجی به عنوان نشانگر لیست */
position: absolute;
left: 0;
color: #f9a825;
font-size: 1.2em;
}

/* استایل بخش پرسش‌های متداول (FAQ) */
.faq-section {
margin-top: 2em;
border-top: 1px solid #eee;
padding-top: 1em;
}

.faq-item {
margin-bottom: 1.5em;
border: 1px solid #cfe8ef; /* حاشیه آبی کمرنگ */
border-radius: 8px;
padding: 1em 1.2em;
background-color: #fcfdfe;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
}

.faq-question {
font-weight: bold;
color: #0077b6;
margin-bottom: 0.5em;
font-size: 1.15em;
}

.faq-answer {
color: #444;
font-size: 1.05em;
}

/* Media queries برای رسپانسیو کلی – تبلت و موبایل */
@media (max-width: 768px) {
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
p, ul, li, .styled-table, .info-box { font-size: 1em; }
.container {
padding: 1em;
margin-top: 1em;
margin-bottom: 1em;
border-radius: 5px;
}
}

@media (max-width: 480px) {
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
p, ul, li, .styled-table, .info-box { font-size: 0.95em; }
.container { padding: 0.8em; }
}