/* تنظیمات فونت و ریست اولیه برای سازگاری در ویرایشگرهای مختلف */
body, h1, h2, h3, p, div, table, th, td, ul, li {
font-family: ‘B Nazanin’, ‘Arial’, sans-serif; /* فونت پیشنهادی برای فارسی و جایگزین برای انگلیسی */
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1.6;
color: #333; /* رنگ متن پیش فرض */
text-align: right; /* تنظیم جهت متن به راست برای فارسی */
}

/* کانتینر اصلی مقاله برای حداکثر عرض و تراز میانی */
.article-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #FFFFFF;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
border-radius: 12px;
direction: rtl; /* جهت کلی محتوا از راست به چپ */
}

/* استایل هدینگ H1 */
h1 {
font-size: 38px;
font-weight: bold;
color: #0A477A; /* آبی تیره */
text-align: center;
padding: 25px 15px;
margin-bottom: 25px;
background-color: #E6F2F7; /* پس زمینه آبی روشن */
border-bottom: 5px solid #0A477A;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* استایل هدینگ H2 */
h2 {
font-size: 28px;
font-weight: bold;
color: #1A70B8; /* آبی متوسط */
margin-top: 40px;
margin-bottom: 20px;
padding: 15px 20px;
border-bottom: 3px solid #1A70B8;
background-color: #F8FCFE;
border-right: 8px solid #1A70B8; /* به جای border-left برای راست به چپ */
border-radius: 5px;
text-align: right;
}

/* استایل هدینگ H3 */
h3 {
font-size: 22px;
font-weight: bold;
color: #2F92D0; /* آبی روشن‌تر */
margin-top: 30px;
margin-bottom: 15px;
padding: 10px 15px;
border-bottom: 2px dashed #2F92D0;
border-right: 5px solid #2F92D0; /* به جای border-left برای راست به چپ */
border-radius: 3px;
text-align: right;
}

/* پاراگراف‌ها */
p {
margin-bottom: 1em;
padding: 0 10px;
font-size: 17px;
color: #444;
text-align: justify;
}

/* لیست‌ها */
ul {
margin: 1em 30px 1em 0; /* برای راست به چپ: مارجین چپ صفر و راست ۳۰px */
padding: 0 10px;
list-style-type: disc;
}

li {
margin-bottom: 0.5em;
font-size: 16px;
color: #555;
}

/* فهرست مطالب */
.toc {
background-color: #F0F8FB;
border: 1px solid #D0E0E7;
padding: 20px;
margin: 30px 10px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
direction: rtl;
}

.toc h2 {
color: #0A477A;
border-bottom: 2px solid #0A477A;
padding-bottom: 10px;
margin-top: 0;
font-size: 24px;
text-align: right;
border-right: none; /* برای فهرست مطالب، بدون خط عمودی */
background-color: transparent;
}

.toc ul {
list-style-type: none;
padding: 0;
margin: 15px 0 0 0;
}

.toc li {
margin-bottom: 10px;
}

.toc a {
color: #1A70B8;
text-decoration: none;
font-size: 18px;
display: block;
padding: 8px 12px;
background-color: #E6F2F7;
border-radius: 5px;
transition: background-color 0.3s ease;
text-align: right;
}

.toc a:hover {
background-color: #D0E0E7;
color: #0A477A;
}

/* استایل جدول */
table {
width: 95%;
margin: 30px auto;
border-collapse: collapse;
border: 1px solid #D0E0E7;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
border-radius: 8px;
overflow: hidden;
direction: rtl;
}

th, td {
padding: 15px 20px;
text-align: right;
border-bottom: 1px solid #E6F2F7;
font-size: 16px;
}

th {
background-color: #1A70B8;
color: white;
font-weight: bold;
font-size: 18px;
}

tr:nth-child(even) {
background-color: #F8FCFE;
}

tr:hover {
background-color: #E6F2F7;
}

/* اینفوگرافیک شبیه‌سازی شده */
.infographic-block {
background: linear-gradient(135deg, #e0f2f7 0%, #ffffff 100%);
border: 2px solid #a7d9f2;
border-radius: 15px;
padding: 30px;
margin: 40px 10px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
overflow: hidden;
direction: rtl;
}

.infographic-block::before {
content: “💡”; /* آیکون گوشه بالا چپ */
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
opacity: 0.2;
}
.infographic-block::after {
content: “⚖️”; /* آیکون گوشه پایین راست */
position: absolute;
bottom: 15px;
left: 15px;
font-size: 40px;
opacity: 0.2;
}

.infographic-block h3 {
color: #0A477A;
font-size: 28px;
margin-top: 0;
margin-bottom: 25px;
border-bottom: none;
border-right: none;
padding: 0;
text-align: center;
}

.infographic-steps {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
}

.infographic-step {
background-color: #ffffff;
border: 1px solid #cceeff;
border-radius: 10px;
padding: 20px;
flex: 1 1 calc(33% – 50px); /* 3 آیتم در هر ردیف در صفحات بزرگ */
min-width: 280px;
max-width: 350px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: right;
}

.infographic-step:hover {
transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.infographic-step .icon {
font-size: 45px;
color: #1A70B8;
margin-bottom: 15px;
display: block;
text-align: center;
}

.infographic-step h4 {
font-size: 20px;
color: #0A477A;
margin-bottom: 10px;
font-weight: bold;
text-align: center;
}

.infographic-step p {
font-size: 15px;
color: #555;
line-height: 1.5;
padding: 0;
}

/* بخش تماس با ما */
.contact-info-block {
background-color: #E6F2F7;
border: 2px solid #1A70B8;
border-radius: 12px;
padding: 30px;
margin: 50px 10px;
text-align: center;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
direction: rtl;
}

.contact-info-block h2 {
color: #0A477A;
margin-top: 0;
padding-bottom: 15px;
border-bottom: 3px solid #0A477A;
font-size: 30px;
text-align: center;
border-right: none;
background-color: transparent;
}

.contact-info-block p {
font-size: 18px;
margin-bottom: 15px;
color: #333;
padding: 0;
}

.contact-info-block a {
display: inline-block;
background-color: #0A477A;
color: white;
padding: 12px 25px;
margin: 10px 10px;
border-radius: 8px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-info-block a:hover {
background-color: #1A70B8;
transform: translateY(-3px);
}

.contact-info-block strong {
color: #0A477A;
}

/* رسپانسیو برای موبایل و تبلت و لپ‌تاپ و تلویزیون */
@media (max-width: 768px) {
h1 { font-size: 30px; padding: 20px 10px; }
h2 { font-size: 24px; padding: 12px 15px; }
h3 { font-size: 20px; padding: 8px 12px; }
.article-container { padding: 15px; }
p, li { font-size: 15px; }
.toc a { font-size: 16px; }
th, td { padding: 10px 15px; font-size: 14px; }
.infographic-step { flex: 1 1 100%; max-width: 100%; } /* آیتم‌های اینفوگرافیک روی هم قرار می‌گیرند */
.infographic-block h3 { font-size: 24px; }
.contact-info-block h2 { font-size: 26px; }
.contact-info-block a { font-size: 18px; padding: 10px 20px; display: block; width: fit-content; margin: 10px auto; }
.infographic-block::before, .infographic-block::after {
font-size: 30px;
}
}

@media (max-width: 480px) {
h1 { font-size: 26px; padding: 15px 8px; }
h2 { font-size: 20px; padding: 10px 12px; }
h3 { font-size: 18px; padding: 6px 10px; }
.article-container { padding: 10px; }
p, li { font-size: 14px; }
ul { margin-right: 20px; padding: 0 5px; } /* تنظیم برای راست به چپ */
.toc { padding: 15px; margin: 20px 5px; }
.toc h2 { font-size: 20px; }
.toc a { font-size: 15px; padding: 6px 10px; }
th, td { padding: 8px 10px; font-size: 13px; }
.infographic-step { padding: 15px; }
.infographic-step .icon { font-size: 35px; }
.infographic-step h4 { font-size: 18px; }
.infographic-block h3 { font-size: 20px; margin-bottom: 20px; }
.contact-info-block h2 { font-size: 22px; }
.contact-info-block p { font-size: 16px; }
.contact-info-block a { font-size: 16px; padding: 8px 18px; }
.infographic-block { padding: 20px; margin: 30px 5px; }
.infographic-block::before, .infographic-block::after {
font-size: 25px;
}
}