// تابع برای نمایش/مخفی کردن فهرست مطالب
function toggleTOC() {
const tocList = document.querySelector(‘.toc-list’);
const toggleBtn = document.querySelector(‘.toc-toggle i’);

if (tocList.style.display === ‘none’ || tocList.style.display === ”) {
tocList.style.display = ‘block’;
toggleBtn.className = ‘fas fa-chevron-up’;
} else {
tocList.style.display = ‘none’;
toggleBtn.className = ‘fas fa-chevron-down’;
}
}

// تابع برای باز/بسته کردن سوالات متداول
function toggleFAQ(faqNumber) {
const faqAnswer = document.getElementById(‘faq’ + faqNumber);
const faqToggle = document.querySelector(`#faq${faqNumber}`).parentElement.querySelector(‘.faq-toggle i’);

if (faqAnswer.style.display === ‘block’) {
faqAnswer.style.display = ‘none’;
faqToggle.className = ‘fas fa-chevron-down’;
} else {
// بستن سایر FAQ ها
document.querySelectorAll(‘.faq-answer’).forEach(answer => {
answer.style.display = ‘none’;
});
document.querySelectorAll(‘.faq-toggle i’).forEach(toggle => {
toggle.className = ‘fas fa-chevron-down’;
});

// باز کردن FAQ انتخاب شده
faqAnswer.style.display = ‘block’;
faqToggle.className = ‘fas fa-chevron-up’;
}
}

// تابع برای اسکرول نرم به بخش‌های داخلی
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function(e) {
e.preventDefault();

const targetId = this.getAttribute(‘href’);
if (targetId === ‘#’) return;

const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop – 80,
behavior: ‘smooth’
});
}
});
});

// افزایش شمارنده بازدید (شبیه‌سازی)
window.addEventListener(‘load’, function() {
const viewCounter = document.getElementById(‘view-counter’);
let views = parseInt(localStorage.getItem(‘articleViews’) || ‘0’);
views++;
localStorage.setItem(‘articleViews’, views.toString());
viewCounter.textContent = views.toLocaleString();
});

// هایلایت بخش فعلی در فهرست مطالب هنگام اسکرول
window.addEventListener(‘scroll’, function() {
const sections = document.querySelectorAll(‘.chapter’);
const navLinks = document.querySelectorAll(‘.toc-list a’);

let current = ”;

sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= (sectionTop – 150)) {
current = section.getAttribute(‘id’);
}
});

navLinks.forEach(link => {
link.classList.remove(‘active’);
if (link.getAttribute(‘href’) === ‘#’ + current) {
link.classList.add(‘active’);
}
});
});

/* استایل‌های اصلی */
.gut-brain-article {
font-family: ‘Vazirmatn’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.8;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 30px rgba(0,0,0,0.05);
border-radius: 10px;
overflow: hidden;
}

/* هدر مقاله */
.article-header {
margin-bottom: 40px;
}

.featured-image-section {
position: relative;
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.main-featured-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s;
}

.featured-image-section:hover .main-featured-image {
transform: scale(1.02);
}

.image-overlay {
position: absolute;
bottom: 0;
right: 0;
left: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
padding: 20px;
color: white;
}

.image-caption {
margin: 0;
font-size: 1.1em;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.meta-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}

.badge {
padding: 6px 15px;
border-radius: 20px;
font-size: 0.85em;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}

.badge-primary { background: #3498db; color: white; }
.badge-secondary { background: #2ecc71; color: white; }
.badge-success { background: #9b59b6; color: white; }
.badge-warning { background: #f39c12; color: white; }

.publish-info {
display: flex;
flex-wrap: wrap;
gap: 20px;
color: #7f8c8d;
font-size: 0.9em;
border-top: 1px solid #eee;
padding-top: 15px;
}

.publish-info i {
margin-left: 5px;
}

/* باکس معرفی */
.hook-box {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-right: 5px solid #2196f3;
padding: 25px;
border-radius: 10px;
margin: 30px 0;
display: flex;
align-items: center;
gap: 20px;
animation: fadeInUp 0.8s ease-out;
}

.hook-icon {
font-size: 2.5em;
color: #2196f3;
flex-shrink: 0;
}

.hook-content h3 {
margin-top: 0;
color: #1565c0;
}

.hook-content p {
margin-bottom: 0;
font-size: 1.05em;
}

/* فهرست مطالب */
.table-of-contents {
background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
padding: 25px;
border-radius: 10px;
margin: 35px 0;
border: 1px solid #dee2e6;
position: sticky;
top: 20px;
z-index: 100;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.toc-header h2 {
margin-top: 0;
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}

.toc-header p {
color: #7f8c8d;
font-size: 0.95em;
margin-top: 5px;
}

.toc-list {
list-style: none;
padding-right: 0;
margin: 20px 0;
}

.toc-list > li {
margin-bottom: 15px;
}

.toc-list > li > a {
font-weight: 700;
color: #2c3e50;
display: block;
padding: 8px 0;
border-bottom: 1px dashed #ddd;
}

.toc-list ul {
list-style: none;
padding-right: 20px;
margin-top: 10px;
}

.toc-list ul li {
margin: 5px 0;
position: relative;
}

.toc-list ul li:before {
content: “›”;
color: #3498db;
position: absolute;
right: -15px;
top: 0;
}

.toc-list ul li a {
color: #555;
font-size: 0.95em;
}

.toc-list a:hover {
color: #3498db;
text-decoration: none;
}

.toc-list a.active {
color: #e74c3c;
font-weight: bold;
}

.toc-toggle {
background: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
display: block;
margin: 20px auto 0;
font-family: inherit;
transition: background 0.3s;
}

.toc-toggle:hover {
background: #2980b9;
}

/* محتوای اصلی */
.main-content h1 {
color: #2c3e50;
font-size: 32px;
line-height: 1.3;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 3px solid #3498db;
text-align: center;
}

.intro-paragraph {
font-size: 1.1em;
background: #f8f9fa;
padding: 25px;
border-radius: 10px;
margin: 30px 0;
border-right: 4px solid #2ecc71;
}

.intro-paragraph p {
margin-bottom: 15px;
}

.intro-paragraph p:last-child {
margin-bottom: 0;
}

/* فصل‌ها */
.chapter-header {
background: linear-gradient(135deg, #2c3e50, #4a6572);
color: white;
padding: 25px;
border-radius: 10px;
margin: 50px 0 30px;
position: relative;
overflow: hidden;
}

.chapter-header:before {
content: “”;
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
transform: translate(30%, -30%);
}

.chapter-header h2 {
margin: 0;
font-size: 24px;
position: relative;
z-index: 1;
}

.chapter-number {
background: #3498db;
padding: 5px 15px;
border-radius: 5px;
margin-left: 15px;
font-size: 0.8em;
vertical-align: middle;
}

.chapter-subtitle {
margin: 10px 0 0;
opacity: 0.9;
font-size: 0.95em;
position: relative;
z-index: 1;
}

/* باکس‌های محتوا */
.content-box {
background: white;
padding: 25px;
border-radius: 10px;
margin: 30px 0;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
border: 1px solid #eee;
transition: transform 0.3s, box-shadow 0.3s;
}

.content-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.content-box h3 {
color: #2c3e50;
margin-top: 0;
padding-bottom: 15px;
border-bottom: 2px solid #eee;
display: flex;
align-items: center;
gap: 10px;
}

.content-box h3 i {
color: #3498db;
}

/* لیست ویژگی‌ها */
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 25px 0;
}

.feature-item {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
display: flex;
gap: 15px;
align-items: flex-start;
transition: background 0.3s;
}

.feature-item:hover {
background: #e9ecef;
}

.feature-icon {
font-size: 1.8em;
color: #3498db;
flex-shrink: 0;
}

.feature-text h4 {
margin-top: 0;
margin-bottom: 10px;
color: #2c3e50;
}

.feature-text p {
margin: 0;
font-size: 0.95em;
color: #555;
}

/* باکس‌های ویژه */
.important-note {
background: #fff3cd;
border: 1px solid #ffeaa7;
border-right: 4px solid #fdcb6e;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}

.important-note h4 {
color: #e17055;
margin-top: 0;
display: flex;
align-items: center;
gap: 10px;
}

.warning-box {
background: #ffebee;
border: 1px solid #ffcdd2;
border-right: 4px solid #ef5350;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}

.warning-box h4 {
color: #c62828;
margin-top: 0;
display: flex;
align-items: center;
gap: 10px;
}

.tip-box {
background: #e8f5e9;
border: 1px solid #c8e6c9;
border-right: 4px solid #4caf50;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}

.tip-box h4 {
color: #2e7d32;
margin-top: 0;
display: flex;
align-items: center;
gap: 10px;
}

.note-box {
background: #e3f2fd;
border: 1px solid #bbdefb;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
}

.research-box {
background: #f3e5f5;
border: 1px solid #e1bee7;
border-right: 4px solid #9c27b0;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}

.research-box h4 {
color: #7b1fa2;
margin-top: 0;
display: flex;
align-items: center;
gap: 10px;
}

/* گریدها و آمار */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin: 25px 0;
}

.stat-item {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.stat-number {
font-size: 2em;
font-weight: 700;
margin-bottom: 10px;
}

.stat-label {
font-size: 0.9em;
opacity: 0.9;
}

.checklist {
list-style: none;
padding-right: 0;
}

.checklist li {
padding: 10px 0;
border-bottom: 1px dashed #eee;
display: flex;
align-items: flex-start;
gap: 15px;
}

.checklist li:last-child {
border-bottom: none;
}

.checklist li i {
color: #2ecc71;
margin-top: 3px;
flex-shrink: 0;
}

/* جدول‌ها */
.responsive-table {
overflow-x: auto;
margin: 25px 0;
}

.pathways-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
border-radius: 8px;
overflow: hidden;
}

.pathways-table th {
background: #3498db;
color: white;
padding: 15px;
text-align: right;
font-weight: 600;
}

.pathways-table td {
padding: 12px 15px;
border-bottom: 1px solid #eee;
}

.pathways-table tr:nth-child(even) {
background: #f8f9fa;
}

.pathways-table tr:hover {
background: #e3f2fd;
}

/* FAQ */
.faq-accordion {
margin: 40px 0;
}

.faq-item {
border: 1px solid #dee2e6;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
}

.faq-item.featured-faq {
border: 2px solid #3498db;
box-shadow: 0 0 20px rgba(52, 152, 219, 0.2);
animation: pulseBorder 2s infinite;
}

@keyframes pulseBorder {
0% { box-shadow: 0 0 20px rgba(52, 152, 219, 0.2); }
50% { box-shadow: 0 0 30px rgba(52, 152, 219, 0.4); }
100% { box-shadow: 0 0 20px rgba(52, 152, 219, 0.2); }
}

.faq-question {
width: 100%;
background: #f8f9fa;
border: none;
padding: 20px;
text-align: right;
font-family: inherit;
font-size: 1.05em;
font-weight: 600;
color: #2c3e50;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s;
}

.faq-question:hover {
background: #e9ecef;
}

.faq-icon {
color: #3498db;
font-size: 1.2em;
}

.faq-text {
flex-grow: 1;
margin: 0 15px;
}

.faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-out;
}

.faq-answer.active {
padding: 20px;
max-height: 2000px;
}

/* نتیجه‌گیری */
.conclusion {
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
padding: 40px;
border-radius: 15px;
margin: 50px 0;
position: relative;
overflow: hidden;
}

.conclusion:before {
content: “”;
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1%, transparent 1%);
background-size: 30px 30px;
opacity: 0.3;
}

.conclusion-header h2 {
color: white;
margin-top: 0;
text-align: center;
position: relative;
z-index: 1;
}

.key-takeaways {
background: rgba(255,255,255,0.1);
padding: 25px;
border-radius: 10px;
margin: 30px 0;
backdrop-filter: blur(10px);
position: relative;
z-index: 1;
}

.takeaway-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}

.takeaway {
background: rgba(255,255,255,0.15);
padding: 20px;
border-radius: 8px;
text-align: center;
transition: transform 0.3s;
}

.takeaway:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.2);
}

.takeaway i {
font-size: 2em;
margin-bottom: 15px;
color: #3498db;
}

.call-to-action {
margin: 40px 0;
position: relative;
z-index: 1;
}

.cta-box {
background: rgba(255,255,255,0.15);
padding: 30px;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}

.action-options {
margin: 20px 0;
}

.action-option {
background: rgba(255,255,255,0.1);
padding: 15px;
margin: 10px 0;
border-radius: 8px;
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
transition: background 0.3s;
}

.action-option:hover {
background: rgba(255,255,255,0.2);
}

.action-option input[type=”radio”] {
accent-color: #3498db;
}

.commitment {
margin-top: 30px;
}

.commitment textarea {
width: 100%;
padding: 15px;
border: 1px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.1);
color: white;
border-radius: 8px;
margin: 15px 0;
font-family: inherit;
resize: vertical;
}

.commitment textarea::placeholder {
color: rgba(255,255,255,0.7);
}

.commit-button {
background: #3498db;
color: white;
border: none;
padding: 15px 30px;
border-radius: 8px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
display: block;
margin: 0 auto;
}

.commit-button:hover {
background: #2980b9;
}

.inspirational-quote {
font-style: italic;
font-size: 1.2em;
text-align: center;
padding: 30px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
margin: 40px 0 0;
position: relative;
}

.inspirational-quote i:first-child {
position: absolute;
top: 10px;
right: 20px;
font-size: 2em;
opacity: 0.3;
}

.inspirational-quote i:last-child {
position: absolute;
bottom: 10px;
left: 20px;
font-size: 2em;
opacity: 0.3;
}

/* منابع */
.references {
background: #f8f9fa;
padding: 25px;
border-radius: 10px;
margin-top: 40px;
border-top: 3px solid #3498db;
}

.references h3 {
margin-top: 0;
color: #2c3e50;
display: flex;
align-items: center;
gap: 10px;
}

.references ul {
padding-right: 20px;
margin: 15px 0;
}

.references li {
margin-bottom: 10px;
padding-right: 15px;
position: relative;
}

.references li:before {
content: “•”;
color: #3498db;
font-weight: bold;
position: absolute;
right: 0;
}

.disclaimer {
font-style: italic;
color: #7f8c8d;
font-size: 0.9em;
border-top: 1px solid #dee2e6;
padding-top: 15px;
margin-top: 20px;
}

/* سایدبار */
.article-sidebar {
margin-top: 50px;
padding: 25px;
background: #f8f9fa;
border-radius: 10px;
border-right: 4px solid #3498db;
}

.sidebar-section {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #dee2e6;
}

.sidebar-section:last-child {
border-bottom: none;
margin-bottom: 0;
}

.sidebar-section h4 {
color: #2c3e50;
margin-top: 0;
display: flex;
align-items: center;
gap: 10px;
}

.download-btn {
background: #2ecc71;
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
width: 100%;
margin-top: 10px;
transition: background 0.3s;
}

.download-btn:hover {
background: #27ae60;
}

.video-placeholder {
background: #2c3e50;
height: 150px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
cursor: pointer;
transition: background 0.3s;
}

.video-placeholder:hover {
background: #34495e;
}

.video-placeholder i {
font-size: 3em;
color: white;
}

.course-link {
display: inline-block;
background: #3498db;
color: white;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
margin-top: 10px;
transition: background 0.3s;
}

.course-link:hover {
background: #2980b9;
text-decoration: none;
color: white;
}

.social-share {
display: flex;
gap: 10px;
margin-top: 15px;
}

.social-btn {
flex: 1;
padding: 12px;
border: none;
border-radius: 8px;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: transform 0.3s;
}

.social-btn:hover {
transform: translateY(-3px);
}

.social-btn.whatsapp { background: #25D366; }
.social-btn.telegram { background: #0088cc; }
.social-btn.linkedin { background: #0077B5; }
.social-btn.twitter { background: #1DA1F2; }

/* انیمیشن‌ها */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* رسپانسیو */
@media (max-width: 992px) {
.gut-brain-article {
padding: 15px;
}

.feature-list {
grid-template-columns: 1fr;
}

.stats-grid {
grid-template-columns: repeat(2, 1fr);
}

.takeaway-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.main-content h1 {
font-size: 26px;
}

.chapter-header h2 {
font-size: 20px;
}

.content-box {
padding: 20px;
}

.hook-box {
flex-direction: column;
text-align: center;
}

.publish-info {
flex-direction: column;
gap: 10px;
}

.stats-grid {
grid-template-columns: 1fr;
}

.takeaway-grid {
grid-template-columns: 1fr;
}

.table-of-contents {
position: static;
}
}

@media (max-width: 480px) {
.gut-brain-article {
padding: 10px;
}

.main-content h1 {
font-size: 22px;
}

.content-box h3 {
font-size: 1.1em;
}

.badge {
font-size: 0.75em;
padding: 4px 10px;
}

.faq-question {
font-size: 0.95em;
padding: 15px;
}
}

/* تنظیمات کلی برای زیبایی */
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}

a {
color: #3498db;
text-decoration: none;
transition: color 0.3s;
}

a:hover {
color: #2980b9;
text-decoration: underline;
}

strong {
color: #2c3e50;
}

/* هایلایت برای عناصر مهم */
.highlight {
background: #fff3cd;
padding: 2px 5px;
border-radius: 3px;
}

/* اسکرول بار سفارشی */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: #3498db;
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #2980b9;
}