/*
** راهنمای استایل‌دهی برای نمایش بهینه در ویرایشگر بلوک و ریسپانسیو بودن **
این بخش شامل کدهای CSS است که ظاهر مقاله را برای انواع دستگاه‌ها (موبایل، تبلت، لپ‌تاپ، تلویزیون) بهینه می‌کند.
در صورت کپی در ویرایشگر بلوک، اطمینان حاصل کنید که قابلیت افزودن کد CSS سفارشی را دارد،
در غیر این صورت، تنها استایل‌های inline (مانند ‘style=”font-size:…”‘) اعمال خواهند شد.
توصیه می‌شود این کدها را در بخش “سفارشی‌سازی” یا “CSS اضافی” وب‌سایت خود قرار دهید.
*/
body {
font-family: ‘IRANSans’, ‘Tahoma’, sans-serif; /* فونت پیشنهادی برای خوانایی بهتر فارسی */
line-height: 1.7; /* فاصله خطوط برای خوانایی بیشتر */
color: #333333; /* رنگ خاکستری تیره برای متن اصلی */
direction: rtl; /* جهت‌دهی راست به چپ برای زبان فارسی */
text-align: right; /* تراز بندی متن به راست */
margin: 0;
padding: 0;
background-color: #f8f8f8; /* پس‌زمینه بسیار روشن برای کل صفحه */
}

/* استایل عمومی هدینگ‌ها */
h1, h2, h3, h4, h5, h6 {
color: #1A237E; /* آبی تیره (ایندیگو) برای عنوان‌ها */
font-weight: bold;
margin-top: 1.8em;
margin-bottom: 0.8em;
padding-right: 15px; /* کمی فاصله از سمت راست */
}

/* H1 – عنوان اصلی مقاله */
h1 {
font-size: 2.2em; /* سایز بزرگ برای عنوان اصلی */
text-align: center;
padding: 25px 15px;
background-color: #E3F2FD; /* پس‌زمینه آبی روشن برای عنوان */
border-bottom: 5px solid #42A5F5; /* خط زیرین آبی متوسط برای جلوه بیشتر */
margin: 0; /* حذف margin پیش‌فرض برای H1 */
color: #1A237E; /* رنگ عنوان */
}

/* H2 – عناوین بخش‌های اصلی */
h2 {
font-size: 1.8em;
border-bottom: 2px solid #BBDEFB; /* خط زیرین آبی کمرنگ برای H2 */
padding-bottom: 8px;
margin-top: 2em;
padding-right: 25px;
}

/* H3 – زیرعنوان‌ها */
h3 {
font-size: 1.4em;
color: #3F51B5; /* آبی متوسط برای H3 */
margin-top: 1.5em;
padding-right: 25px;
}

/* پاراگراف‌ها */
p {
margin-bottom: 1.2em;
padding: 0 25px; /* فاصله از طرفین برای خوانایی */
line-height: 1.8;
}

/* لیست‌ها (بولت پوینت) */
ul {
margin-bottom: 1.5em;
padding-right: 45px; /* فاصله از راست برای بولت‌ها */
padding-left: 20px; /* فاصله از چپ */
list-style: disc; /* نوع بولت دایره‌ای */
}
li {
margin-bottom: 0.7em;
line-height: 1.6;
}

/* استایل‌دهی برای جدول */
table {
width: 95%; /* پهنای جدول درصدی برای ریسپانسیو بودن */
max-width: 750px; /* حداکثر پهنا برای نمایش در صفحات بزرگ */
margin: 30px auto; /* فاصله از بالا و پایین و قرارگیری در مرکز */
border-collapse: collapse; /* حذف خطوط دوتایی بین سلول‌ها */
box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* سایه جذاب برای جدول */
border-radius: 10px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* اطمینان از نمایش گوشه‌های گرد */
background-color: #FFFFFF; /* پس‌زمینه سفید برای جدول */
}

th, td {
border: 1px solid #CFD8DC; /* حاشیه خاکستری روشن برای سلول‌ها */
padding: 15px 20px; /* فضای داخلی سلول‌ها */
text-align: right; /* تراز بندی متن به راست */
}

th {
background-color: #F8F8F8; /* پس‌زمینه روشن برای هدر جدول */
font-weight: bold;
color: #1A237E; /* رنگ متن هدر */
text-align: center; /* تراز بندی وسط برای هدرها */
}

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

/* استایل‌دهی برای بخش “اینفوگرافیک جایگزین” (مراحل کلیدی) */
.infographic-box {
background-color: #E3F2FD; /* پس‌زمینه آبی روشن */
border: 1px solid #90CAF9; /* حاشیه آبی ملایم */
border-radius: 12px; /* گوشه‌های گرد */
padding: 25px;
margin: 30px auto;
max-width: 850px;
width: 90%;
box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* سایه ظریف */
text-align: right;
}

.infographic-box h3 {
text-align: center;
color: #1A237E;
margin-top: 0;
margin-bottom: 20px;
font-size: 1.8em;
border-bottom: none; /* حذف خط زیرین پیش‌فرض H3 */
padding-right: 0;
}

.infographic-step {
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
align-items: flex-start; /* هم‌ترازی آیتم‌ها از بالا */
margin-bottom: 18px;
flex-direction: row-reverse; /* برای نمایش شماره در سمت راست در RTL */
}

.infographic-step-number {
background-color: #42A5F5; /* رنگ آبی متوسط برای دایره شماره */
color: white;
font-weight: bold;
border-radius: 50%; /* دایره‌ای کردن */
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0; /* جلوگیری از کوچک شدن دایره */
margin-right: 15px; /* فاصله از متن */
font-size: 1.2em;
}

.infographic-step-text {
flex-grow: 1; /* اجازه رشد به متن برای پر کردن فضای باقی‌مانده */
color: #333333;
line-height: 1.7;
}

.highlight-box {
background-color: #FFFFFF;
border-left: 5px solid #4CAF50; /* نوار سبز رنگ در سمت چپ */
border-radius: 8px;
padding: 20px 25px;
margin: 25px auto;
max-width: 800px;
width: 90%;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
text-align: right;
}
.highlight-box ul {
list-style: none;
padding-right: 0;
}
.highlight-box li {
position: relative;
padding-right: 30px;
margin-bottom: 1em;
}
.highlight-box li span.icon {
position: absolute;
right: 0;
top: 5px;
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 1em;
}
.highlight-box li span.icon.green { background-color: #4CAF50; color: white; }
.highlight-box li span.icon.yellow { background-color: #FFC107; color: #333; }
.highlight-box li span.icon.blue { background-color: #2196F3; color: white; }
.highlight-box li span.icon.purple { background-color: #9C27B0; color: white; }
.highlight-box li span.icon.red { background-color: #F44336; color: white; }
.highlight-box li strong {
color: #1A237E; /* رنگ برجسته برای متن اصلی در لیست */
}

/*
** ریسپانسیو بودن برای دستگاه‌های مختلف **
این قسمت استایل‌ها را بر اساس پهنای صفحه نمایش تنظیم می‌کند.
*/

/* برای تبلت‌ها و دستگاه‌های با پهنای متوسط (بین 481px تا 768px) */
@media screen and (max-width: 768px) {
h1 {
font-size: 1.8em;
padding: 18px 10px;
}
h2 {
font-size: 1.5em;
padding-right: 20px;
}
h3 {
font-size: 1.2em;
padding-right: 20px;
}
p {
padding: 0 20px;
}
ul, ol {
padding-right: 40px;
padding-left: 15px;
}
table {
font-size: 0.9em;
padding: 0 10px;
width: 100%; /* جدول در موبایل تمام عرض را اشغال کند */
}
th, td {
padding: 10px 12px;
}
.infographic-box {
padding: 20px;
width: 95%;
}
.infographic-box h3 {
font-size: 1.5em;
}
.infographic-step-number {
width: 30px;
height: 30px;
font-size: 1.1em;
margin-right: 12px;
}
.highlight-box {
padding: 15px 20px;
width: 95%;
}
}

/* برای موبایل‌های کوچک و دستگاه‌های با پهنای کم (تا 480px) */
@media screen and (max-width: 480px) {
h1 {
font-size: 1.5em;
padding: 15px 5px;
border-bottom-width: 3px;
}
h2 {
font-size: 1.3em;
padding-right: 15px;
margin-top: 1.5em;
}
h3 {
font-size: 1.1em;
padding-right: 15px;
margin-top: 1em;
}
p {
padding: 0 15px;
}
ul, ol {
padding-right: 30px;
padding-left: 10px;
}
table {
font-size: 0.85em;
margin: 15px auto;
}
th, td {
padding: 8px 10px;
}
.infographic-box {
padding: 15px;
}
.infographic-box h3 {
font-size: 1.3em;
}
.infographic-step-number {
width: 28px;
height: 28px;
font-size: 1em;
margin-right: 10px;
}
.highlight-box {
padding: 10px 15px;
}
.highlight-box li span.icon {
width: 22px;
height: 22px;
font-size: 0.8em;
top: 3px;
}
.highlight-box li {
padding-right: 25px;
}
}