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

* فونت: برای اطمینان از نمایش صحیح فونت فارسی، لازم است فونت “Vazirmatn” (یا هر فونت دلخواه دیگر) به صورت عمومی در سایت فراخوانی و بارگذاری شده باشد.
* رنگ‌بندی: از طیف رنگی آبی (برای هدینگ‌ها و لینک‌ها)، سبز (برای فهرست مطالب و نکات مثبت)، نارنجی (برای FAQ و هشدارها) و خاکستری (برای متن اصلی) استفاده شده است تا ترکیبی آرامش‌بخش و خوانا ایجاد کند.
* رسپانسیو بودن: از ویژگی flexbox و media queries برای اطمینان از چینش مناسب عناصر در اندازه‌های مختلف صفحه استفاده شده است.
*/

/* Reset و تنظیمات پایه */
body {
margin: 0;
padding: 0;
font-family: ‘Vazirmatn’, sans-serif; /* اطمینان از بارگذاری این فونت در سایت */
direction: rtl; /* برای زبان فارسی */
text-align: right;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* استایل‌های اصلی کانتینر مقاله */
.article-container { /* جایگزین div اصلی مقاله در HTML که استایل اینلاین دارد */
font-family: ‘Vazirmatn’, sans-serif;
line-height: 1.8;
color: #333;
max-width: 900px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
background-color: #f9f9f9;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* استایل Heading 1 */
h1 {
font-size: 2.8em; /* اندازه برای دسکتاپ */
font-weight: 800;
color: #1a2a4e; /* رنگ تیره و قوی */
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 3px solid #007bff; /* خط آبی زیر عنوان */
}

/* استایل Heading 2 */
h2 {
font-size: 2.2em; /* اندازه برای دسکتاپ */
font-weight: 700;
color: #1a2a4e;
margin-top: 40px;
margin-bottom: 20px;
border-bottom: 2px solid #ddd; /* خط خاکستری روشن زیر عنوان */
padding-bottom: 10px;
}

/* استایل Heading 3 */
h3 {
font-size: 1.8em; /* اندازه برای دسکتاپ */
font-weight: 700;
color: #007bff; /* رنگ آبی */
margin-top: 30px;
margin-bottom: 15px;
}

/* استایل پاراگراف‌ها */
p {
font-size: 1.1em;
text-align: justify;
margin-bottom: 25px;
}

/* استایل لیست‌ها */
ul {
list-style-type: disc;
padding-right: 25px; /* برای راست‌چین */
padding-left: 0; /* برای راست‌چین */
margin-top: 10px;
margin-bottom: 25px;
font-size: 1.1em;
}
ul li {
margin-bottom: 8px;
}

/* استایل لینک‌ها */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 1.05em;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
table th, table td {
padding: 15px;
text-align: right;
border: 1px solid #eee;
}
table th {
background-color: #007bff;
color: white;
}
table tr:nth-child(even) {
background-color: #f8f8f8; /* رنگ پس‌زمینه برای ردیف‌های زوج جدول */
}
strong.positive { color: #28a745; }
strong.negative { color: #dc3545; }
strong.warning { color: #ffc107; }

/* استایل برای بخش‌های ویژه (فهرست مطالب، FAQ، تماس) */
.toc-section { /* بخش فهرست مطالب */
background-color: #e8f5e9;
border-right: 5px solid #4CAF50; /* خط سبز برای تاکید */
padding: 15px 20px;
margin: 30px 0;
border-radius: 8px;
}
.faq-item { /* آیتم‌های پرسش‌های متداول */
background-color: #fff3e0;
border-right: 5px solid #ff9800; /* خط نارنجی برای تاکید */
padding: 15px 20px;
margin: 25px 0;
border-radius: 8px;
}
.contact-info-box { /* باکس تماس */
background-color: #e0f2f7;
border: 2px solid #00bcd4; /* مرز فیروزه‌ای */
border-radius: 12px;
padding: 30px;
margin-bottom: 40px;
text-align: center;
box-shadow: 0 6px 20px rgba(0, 188, 212, 0.15);
}
.contact-info-box a {
background-color: #007bff;
color: white;
padding: 15px 30px;
border-radius: 8px;
text-decoration: none;
font-size: 1.8em;
font-weight: 800;
display: inline-block;
transition: background-color 0.3s ease;
}
.contact-info-box a:hover {
background-color: #0056b3;
}

/* استایل اینفوگرافیک متنی */
.infographic-container {
background-color: #f0f8ff;
border: 2px solid #b0e0e6;
border-radius: 10px;
padding: 25px;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.infographic-step {
flex: 1 1 45%; /* برای دو ستون در صفحه بزرگتر */
min-width: 280px; /* حداقل عرض برای هر گام */
background-color: white;
border: 1px solid #cceeff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.infographic-steps-wrapper { /* div با display flex */
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
}

/* Media Queries برای رسپانسیو بودن */
@media (max-width: 768px) { /* تبلت و موبایل */
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
p, ul, table, .faq-item, .infographic-step {
font-size: 1em;
}
.infographic-step {
flex: 1 1 100%; /* یک ستون در موبایل */
}
.contact-info-box a {
font-size: 1.5em;
padding: 12px 25px;
}
}

@media (max-width: 480px) { /* موبایل کوچک */
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
.article-container {
padding: 15px;
}
.contact-info-box a {
font-size: 1.3em;
padding: 10px 20px;
}
}

/* استایل برای فونت و آیکون‌ها در متن (مثلا علامت چک) */
.checklist-icon {
color: #28a745;
font-weight: bold;
}