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

/* وارد کردن فونت فارسی Vazirmatn */
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap’);

:root {
/* پالت رنگی */
–primary-heading-color: #2c3e50; /* سرمه‌ای تیره برای تیترهای اصلی */
–secondary-heading-color: #3498db; /* آبی روشن برای H1 و المان‌های تاکیدی */
–body-text-color: #333; /* خاکستری تیره برای متن اصلی */
–light-background-color: #f8f8f8; /* خاکستری خیلی روشن برای پس‌زمینه برخی بخش‌ها */
–accent-background-color: #e8f5fd; /* آبی بسیار روشن برای بلوک‌های اطلاعاتی */
–border-color: #eee; /* خاکستری روشن برای خطوط جداکننده */
–shadow-color: rgba(0, 0, 0, 0.07); /* رنگ سایه ملایم */

/* فونت و اندازه‌ها */
–font-family-persian: ‘Vazirmatn’, sans-serif;
–base-font-size: 1rem; /* 16px */
–line-height-body: 1.8;
–line-height-headings: 1.4;
}

/* تنظیمات پایه برای کل بدنه مقاله */
body {
font-family: var(–font-family-persian);
line-height: var(–line-height-body);
color: var(–body-text-color);
background-color: #fff;
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl; /* جهت نوشتار راست به چپ برای فارسی */
text-align: right; /* تراز متن به راست */
}

/* کانتینر اصلی مقاله برای کنترل عرض و افزودن افکت‌های کلی */
.article-container {
max-width: 900px; /* حداکثر عرض در دسکتاپ */
margin: 20px auto; /* فاصله از بالا و پایین،居میزان در وسط */
padding: 25px 30px; /* فاصله داخلی از لبه‌ها */
background-color: #fff;
border-radius: 12px; /* گوشه‌های گرد */
box-shadow: 0 6px 20px var(–shadow-color); /* سایه نرم و زیبا */
}

/* استایل‌های تیترها (H1, H2, H3) */
h1, h2, h3 {
color: var(–primary-heading-color);
margin-bottom: 20px;
line-height: var(–line-height-headings);
font-weight: 700; /* وزن فونت بولد */
}

/* تیتر اصلی مقاله (H1) */
h1 {
font-size: 2.8rem; /* اندازه بزرگ در دسکتاپ */
text-align: center;
margin-top: 0;
padding-bottom: 18px;
border-bottom: 3px solid var(–secondary-heading-color); /* خط زیرین با رنگ تاکیدی */
color: var(–secondary-heading-color); /* رنگ تاکیدی برای H1 */
margin-bottom: 35px;
}

/* تیترهای بخش‌های اصلی (H2) */
h2 {
font-size: 2.2rem;
margin-top: 45px;
padding-bottom: 12px;
border-bottom: 1px dashed var(–border-color); /* خط زیرین نقطه‌چین */
position: relative;
}
h2::after { /* یک دایره کوچک تزئینی بعد از H2 */
content: ”;
width: 10px;
height: 10px;
background-color: var(–secondary-heading-color);
border-radius: 50%;
position: absolute;
bottom: -5px;
right: 0;
}

/* تیترهای زیربخش‌ها (H3) */
h3 {
font-size: 1.6rem;
margin-top: 35px;
color: var(–primary-heading-color);
font-weight: 600; /* وزن فونت کمی کمتر از H1/H2 */
position: relative;
padding-right: 35px; /* فضا برای آیکون قبل از متن */
}
h3::before { /* آیکون تزئینی قبل از H3 */
content: ‘◆’; /* یا از یونیکد دیگری مانند ‘▪’ یا ‘●’ استفاده شود */
color: var(–secondary-heading-color);
position: absolute;
right: 0;
font-size: 1.3em;
line-height: 1;
top: 2px;
}

/* استایل‌های پاراگراف‌ها */
p {
margin-bottom: 1.5rem;
font-size: 1.15rem;
line-height: var(–line-height-body);
text-align: justify; /* تراز دو طرفه برای خوانایی بهتر */
}

/* استایل‌های لیست‌ها (Unordered List – ul) */
ul {
margin-bottom: 1.8rem;
padding-right: 25px; /* فاصله برای بولت پوینت‌ها */
list-style: none; /* حذف بولت پیش‌فرض */
}
ul li {
margin-bottom: 0.9rem;
font-size: 1.1rem;
position: relative;
padding-right: 25px; /* فضا برای بولت کاستوم */
}
ul li::before { /* بولت کاستوم برای لیست‌ها */
content: ‘•’;
color: var(–secondary-heading-color);
font-size: 1.4em;
position: absolute;
right: 0;
top: 0;
line-height: 1;
}
ul li strong {
color: var(–primary-heading-color);
}

/* استایل‌های لینک‌ها */
a {
color: var(–secondary-heading-color);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
text-decoration: underline;
color: var(–primary-heading-color);
}

/* استایل‌های جدول آموزشی */
.styled-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌های جدول */
margin: 35px 0;
font-size: 1.05rem;
text-align: right;
box-shadow: 0 4px 15px var(–shadow-color); /* سایه برای جدول */
border-radius: 10px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
}

.styled-table th, .styled-table td {
padding: 14px 20px;
border: 1px solid var(–border-color); /* خطوط جداکننده */
}

.styled-table thead tr {
background-color: var(–secondary-heading-color);
color: #ffffff;
text-align: center; /* تراز وسط برای سرستون‌ها */
font-weight: 600;
font-size: 1.15rem;
}

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

.styled-table tbody tr:hover { /* افکت هاور روی ردیف‌ها */
background-color: #f0f8ff; /* آبی روشن روی هاور */
}
.styled-table td strong {
color: var(–primary-heading-color);
}

/* استایل‌ بلوک “اینفوگرافیک” جایگزین بصری */
.visual-info-block {
background-color: var(–accent-background-color); /* پس‌زمینه آبی بسیار روشن */
border-right: 6px solid var(–secondary-heading-color); /* نوار آبی تاکیدی در سمت راست */
padding: 30px;
margin: 40px 0;
border-radius: 0 12px 12px 0; /* گوشه‌های گرد فقط در سمت راست (RTL) */
box-shadow: 0 5px 15px var(–shadow-color);
text-align: right;
}

.visual-info-block h3 {
color: var(–secondary-heading-color);
margin-top: 0;
margin-bottom: 25px;
font-size: 2rem;
text-align: center; /* تیتر وسط چین در این بلوک */
padding-right: 0; /* حذف پدینگ پیش‌فرض H3 */
}
.visual-info-block h3::before { /* حذف آیکون پیش‌فرض H3 در این بلوک */
content: ”;
}

.visual-info-block ul {
list-style: none; /* حذف بولت‌های پیش‌فرض */
padding: 0;
margin: 0;
}

.visual-info-block ul li {
margin-bottom: 18px;
display: flex; /* استفاده از فلکس‌باکس برای تراز آیکون و متن */
align-items: flex-start; /* تراز آیتم‌ها از بالا */
font-size: 1.15rem;
line-height: 1.7;
padding-right: 0; /* حذف پدینگ پیش‌فرض لیست */
}
.visual-info-block ul li::before { /* حذف بولت پیش‌فرض لیست در این بلوک */
content: ”;
}

.visual-info-block ul li .icon {
color: var(–secondary-heading-color);
font-size: 2.2rem; /* اندازه بزرگتر برای آیکون */
margin-left: 18px; /* فاصله بین آیکون و متن در RTL */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
line-height: 1; /* اطمینان از تراز عمودی صحیح */
}
.visual-info-block ul li .text {
flex-grow: 1; /* متن فضای باقی‌مانده را پر کند */
font-weight: 500; /* کمی بولد برای خوانایی بهتر */
}

/* استایل‌های بخش پرسش‌های متداول (FAQ) */
.faq-section {
background-color: var(–light-background-color);
padding: 30px;
margin: 40px 0;
border-radius: 12px;
box-shadow: 0 3px 10px var(–shadow-color);
}
.faq-item {
margin-bottom: 25px;
border-bottom: 1px solid var(–border-color);
padding-bottom: 20px;
}
.faq-item:last-child {
border-bottom: none; /* حذف خط جداکننده برای آخرین آیتم */
margin-bottom: 0;
padding-bottom: 0;
}
.faq-question {
font-weight: 600;
color: var(–primary-heading-color);
font-size: 1.2rem;
margin-bottom: 12px;
position: relative;
padding-right: 35px; /* فضا برای آیکون */
cursor: pointer; /* نشانگر موس برای کلیک */
}
.faq-question::before { /* آیکون سوال قبل از پرسش */
content: ‘❓’;
position: absolute;
right: 0;
font-size: 1.3em;
top: 0px;
}
.faq-answer {
font-size: 1.1rem;
line-height: 1.7;
padding-right: 35px; /* تراز با آیکون پرسش */
text-align: justify;
}

/* —————————————————————————————————- */
/* — رسپانسیو سازی برای دستگاه‌های مختلف — */
/* —————————————————————————————————- */

/* تبلت و لپ‌تاپ‌های کوچک (عرض کمتر از 992px) */
@media (max-width: 992px) {
.article-container {
margin: 15px;
padding: 20px 25px;
border-radius: 10px;
box-shadow: 0 5px 15px var(–shadow-color);
}
h1 {
font-size: 2.5rem;
padding-bottom: 15px;
margin-bottom: 30px;
}
h2 {
font-size: 2rem;
margin-top: 40px;
}
h3 {
font-size: 1.5rem;
margin-top: 30px;
padding-right: 30px;
}
p {
font-size: 1.1rem;
margin-bottom: 1.3rem;
}
ul li {
font-size: 1.05rem;
margin-bottom: 0.8rem;
}
.styled-table th, .styled-table td {
padding: 12px 18px;
font-size: 1rem;
}
.visual-info-block {
padding: 25px;
margin: 35px 0;
border-right-width: 5px;
}
.visual-info-block h3 {
font-size: 1.8rem;
}
.visual-info-block ul li {
font-size: 1.1rem;
margin-bottom: 15px;
}
.visual-info-block ul li .icon {
font-size: 2rem;
margin-left: 15px;
}
.faq-question {
font-size: 1.15rem;
padding-right: 30px;
}
.faq-answer {
font-size: 1.05rem;
padding-right: 30px;
}
}

/* موبایل (عرض کمتر از 768px) */
@media (max-width: 768px) {
.article-container {
margin: 10px 0; /* بدون فاصله از کناره‌ها برای استفاده حداکثری از عرض موبایل */
padding: 20px;
border-radius: 0; /* حذف گوشه‌های گرد در موبایل */
box-shadow: none; /* حذف سایه در موبایل */
}
h1 {
font-size: 2rem;
padding-bottom: 12px;
margin-bottom: 25px;
}
h2 {
font-size: 1.7rem;
margin-top: 35px;
}
h2::after {
bottom: -3px;
}
h3 {
font-size: 1.3rem;
margin-top: 28px;
padding-right: 25px;
}
h3::before {
font-size: 1.1em;
top: 0px;
}
p {
font-size: 1rem;
margin-bottom: 1rem;
}
ul {
padding-right: 20px;
}
ul li {
font-size: 0.95rem;
margin-bottom: 0.7rem;
padding-right: 20px;
}
ul li::before {
font-size: 1.2em;
}
.styled-table {
margin: 25px 0;
border-radius: 6px;
}
.styled-table th, .styled-table td {
padding: 10px 15px;
font-size: 0.9rem;
}
.styled-table thead tr {
font-size: 1rem;
}
.visual-info-block {
padding: 20px;
margin: 30px 0;
border-right-width: 4px;
border-radius: 0 8px 8px 0;
}
.visual-info-block h3 {
font-size: 1.6rem;
margin-bottom: 20px;
}
.visual-info-block ul li {
font-size: 1rem;
margin-bottom: 12px;
}
.visual-info-block ul li .icon {
font-size: 1.8rem;
margin-left: 12px;
}
.faq-section {
padding: 20px;
margin: 30px 0;
border-radius: 8px;
}
.faq-item {
margin-bottom: 20px;
padding-bottom: 15px;
}
.faq-question {
font-size: 1.05rem;
padding-right: 25px;
}
.faq-question::before {
font-size: 1.1em;
}
.faq-answer {
font-size: 1rem;
padding-right: 25px;
}
}

/* موبایل‌های بسیار کوچک (عرض کمتر از 480px) */
@media (max-width: 480px) {
h1 {
font-size: 1.8rem;
padding-bottom: 10px;
margin-bottom: 20px;
}
h2 {
font-size: 1.5rem;
margin-top: 30px;
}
h3 {
font-size: 1.2rem;
margin-top: 25px;
padding-right: 20px;
}
h3::before {
font-size: 1em;
top: 1px;
}
p, ul li, .faq-answer {
font-size: 0.9rem;
}
.styled-table th, .styled-table td {
padding: 8px 12px;
font-size: 0.85rem;
}
.styled-table thead tr {
font-size: 0.9rem;
}
.visual-info-block {
padding: 15px;
margin: 25px 0;
}
.visual-info-block h3 {
font-size: 1.4rem;
margin-bottom: 15px;
}
.visual-info-block ul li {
font-size: 0.95rem;
margin-bottom: 10px;
}
.visual-info-block ul li .icon {
font-size: 1.6rem;
margin-left: 10px;
}
.faq-question {
font-size: 1rem;
padding-right: 20px;
}
.faq-answer {
padding-right: 20px;
}
}

/* —————————————————————————————————- */
/* — پایان بلوک استایل‌های اختصاصی — */
/* —————————————————————————————————- */