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

/* تنظیمات پایه برای خوانایی و راست‌چین بودن */
body {
font-family: ‘Tahoma’, ‘Segoe UI’, ‘B Nazanin’, Arial, sans-serif; /* فونت‌های متعارف برای نمایش مناسب */
line-height: 1.8; /* فاصله خطوط بیشتر برای خوانایی بهتر */
color: #333; /* رنگ متن اصلی */
margin: 0;
padding: 0;
background-color: #fcfcfc; /* پس‌زمینه کلی روشن */
direction: rtl; /* جهت نوشتار راست به چپ */
text-align: right; /* تراز متن به راست */
}

/* کانتینر اصلی مقاله برای کنترل عرض و مرکزیت */
.article-container {
max-width: 900px; /* حداکثر عرض برای دسکتاپ و تلویزیون */
margin: 25px auto; /* مرکز قرار گرفتن در صفحه با فاصله مناسب */
padding: 30px;
background-color: #ffffff; /* پس‌زمینه سفید برای محتوای اصلی */
border-radius: 12px; /* گوشه‌های گرد برای زیبایی */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* سایه ملایم برای جلوه سه‌بعدی */
overflow-x: hidden; /* جلوگیری از اسکرول افقی در دستگاه‌های کوچک */
}

/* رسپانسیو کردن پدینگ و مارجین برای دستگاه‌های کوچکتر */
@media (max-width: 768px) {
.article-container {
margin: 15px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
}
@media (max-width: 480px) {
.article-container {
margin: 10px;
padding: 15px;
border-radius: 6px;
}
}

/* استایل Heading 1 */
h1 {
font-family: ‘B Titr’, ‘Arial Black’, sans-serif; /* فونت برجسته برای عنوان اصلی */
font-size: 2.8em; /* سایز بزرگ برای H1 */
font-weight: 900; /* بسیار ضخیم */
color: #1a5240; /* سبز عمیق */
text-align: center;
margin-bottom: 35px;
padding-bottom: 20px;
border-bottom: 4px solid #d4af37; /* خط زیر طلایی مات */
line-height: 1.3;
letter-spacing: -0.5px;
}

/* استایل Heading 2 */
h2 {
font-family: ‘B Nazanin’, ‘Georgia’, serif; /* فونت رسمی و خوانا */
font-size: 2.1em; /* سایز مناسب برای H2 */
font-weight: 700; /* ضخیم */
color: #2c3e50; /* آبی تیره */
margin-top: 50px;
margin-bottom: 25px;
padding-right: 15px; /* پدینگ برای راست‌چین */
border-right: 6px solid #4a7c59; /* خط کناری سبز آبی */
line-height: 1.4;
background-color: #f5fafd; /* پس‌زمینه ملایم برای H2 */
border-radius: 5px 0 0 5px; /* گوشه گرد سمت راست */
padding-top: 10px;
padding-bottom: 10px;
}

/* استایل Heading 3 */
h3 {
font-family: ‘B Yekan’, ‘Verdana’, sans-serif; /* فونت مدرن و خوانا */
font-size: 1.6em; /* سایز مناسب برای H3 */
font-weight: 600; /* نیمه ضخیم */
color: #4a7c59; /* سبز آبی */
margin-top: 35px;
margin-bottom: 18px;
padding-bottom: 8px;
border-bottom: 1px dashed #d4af37; /* خط زیرین نقطه‌چین طلایی */
padding-right: 5px;
}

/* استایل پاراگراف‌ها */
p {
margin-bottom: 1.5em; /* فاصله بیشتر بین پاراگراف‌ها */
text-align: justify; /* تراز دو طرفه برای زیبایی متن */
line-height: 1.9; /* افزایش فاصله خطوط برای خوانایی بهتر در متون طولانی */
font-size: 1.05em; /* کمی بزرگتر برای خوانایی */
}

/* استایل لیست‌ها (نامرتب و مرتب) */
ul, ol {
margin-bottom: 1.5em;
padding-right: 25px; /* پدینگ برای راست‌چین */
}

li {
margin-bottom: 0.8em;
line-height: 1.7;
}

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

th, td {
padding: 15px 20px;
border: 1px solid #e0e0e0; /* خطوط جدول روشن */
}

th {
background-color: #eaf6ee; /* پس‌زمینه سرتیتر جدول */
font-weight: 700;
color: #1a5240; /* سبز عمیق برای سرتیتر */
font-size: 1.1em;
}

tr:nth-child(even) { /* ردیف‌های زوج با پس‌زمینه متفاوت */
background-color: #f8fcf9;
}

tr:hover {
background-color: #e6f7ff; /* تغییر رنگ در هاور برای تعامل‌پذیری */
}

/* استایل جایگزین اینفوگرافیک (جعبه بصری جذاب) */
.infographic-box {
background-color: #e8f5e9; /* پس‌زمینه سبز روشن */
border-right: 10px solid #4a7c59; /* حاشیه ضخیم سبز آبی در سمت راست */
padding: 30px;
margin: 45px 0;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
direction: rtl;
text-align: right;
}

.infographic-box h4 {
color: #1a5240; /* سبز عمیق برای عنوان داخلی */
font-size: 1.8em;
margin-top: 0;
margin-bottom: 25px;
text-align: center;
border-bottom: 2px dashed #4a7c59; /* خط زیرین نقطه‌چین */
padding-bottom: 15px;
font-weight: 800;
letter-spacing: 0.5px;
}

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

.infographic-box li {
position: relative;
padding-right: 40px; /* فضای بیشتر برای آیکون سفارشی */
margin-bottom: 20px;
line-height: 1.8;
font-size: 1.1em;
color: #3e5060;
}

.infographic-box li:before {
content: “💡”; /* آیکون سفارشی برای لیست */
position: absolute;
right: 0;
top: 0;
font-size: 1.5em;
color: #d4af37; /* رنگ طلایی برای آیکون */
line-height: 1.5; /* تنظیم موقعیت عمودی آیکون */
}

/* هایلایت کردن کلمات کلیدی یا مهم */
.highlight {
background-color: #fffacd; /* زرد لیمویی روشن */
padding: 3px 8px;
border-radius: 5px;
font-weight: 700;
color: #a08020; /* قهوه‌ای مایل به طلایی */
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}