/* ============================================
   components/PageContent.css - محتوای داینامیک
   ============================================ */

.page-content { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 1.5rem; --page-color: #4A90E2; --page-rgb: 74,144,226; }
.page-hero { padding: 0.75rem 0; text-align: right; }
.page-hero-title { font-size: 1.8rem; font-weight: 800; line-height: 1.5; margin: 0 0 0.85rem; color: var(--page-color); display: inline-block; padding-bottom: 0.75rem; position: relative; }
.page-hero-title::after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--page-color) 0%, transparent 100%); border-radius: 3px; }
.page-hero-subtitle { font-size: 1.05rem; font-weight: 600; color: var(--page-color); opacity: 0.85; margin: 0.75rem 0; }
.page-hero-body-wrapper { position: relative; }
.page-hero-body { font-size: 1rem; line-height: 2; color: #444; margin: 0; text-align: justify; }

/* دکمه موارد بیشتر */
.page-hero-toggle { margin-top: 0.75rem; display: none; }
.page-toggle-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem 0.4rem 0.6rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--page-color); background: transparent; border: 1.5px solid var(--page-color); border-radius: 30px; cursor: pointer; }
.page-toggle-btn .toggle-icon { display: inline-flex; width: 16px; height: 16px; transition: transform 0.3s; }
.page-toggle-btn.is-open .toggle-icon { transform: rotate(180deg); }

.page-list { background: #fafafa; border-right: 5px solid var(--page-color); border-radius: 16px; padding: 1.5rem; margin: 0.5rem 0; }
.page-list-title { font-size: 1.25rem; font-weight: 800; color: var(--page-color); border-bottom: 2px dashed rgba(0,0,0,0.1); padding-bottom: 0.75rem; margin: 0 0 1rem; }
.page-list-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.page-list-item { position: relative; padding-right: 1.75rem; font-size: 1rem; line-height: 1.9; color: #444; }
.page-list-item::before { content: ''; position: absolute; right: 0.4rem; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--page-color); }
.page-list-item-title { font-weight: 800; color: var(--page-color); margin-left: 0.35rem; }

.page-main { padding: 0.75rem 0; }
.page-main-title { font-size: 1.5rem; font-weight: 800; color: var(--page-color); margin: 0 0 0.75rem; border-right: 5px solid var(--page-color); padding-right: 1rem; }
.page-main-subtitle { font-size: 1rem; font-weight: 600; color: var(--page-color); margin: 0 0 0.75rem; }
.page-main-body { font-size: 1rem; line-height: 2; color: #444; text-align: justify; }

.faq-section { margin-top: 2rem; padding: 1rem 0; }
.faq-section h2 { font-size: 1.3rem; font-weight: 800; color: #333; margin: 0 0 1rem; border-bottom: 3px solid #4A90E2; display: inline-block; padding-bottom: 0.6rem; }
.faq-section details { background: #f9fafb; border-radius: 12px; margin-bottom: 0.6rem; padding: 0.8rem 1.1rem; border: 1px solid #eef0f3; transition: all 0.2s; }
.faq-section details[open] { background: #fff; border-color: #d0d7de; box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.faq-section summary { font-weight: 700; color: #2c3e50; cursor: pointer; list-style: none; }
.faq-section details p { margin: 0.75rem 0 0; font-size: 0.95rem; color: #555; border-top: 1px dashed #e0e0e0; padding-top: 0.75rem; }

@media (max-width: 767px) {
    .page-hero { padding-right: 1.25rem; padding-left: 0.5rem; }
    .page-hero-title { font-size: 1.35rem; }
    .page-hero-body { font-size: 0.95rem; }
    .page-hero-toggle { display: block; }
    .page-hero-body.short { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .page-list { padding: 1.1rem 1.2rem; margin: 0.5rem 0.75rem; }
    .page-list-title { font-size: 1.05rem; }
    .page-main { padding-right: 1.25rem; padding-left: 0.5rem; }
    .page-main-title { font-size: 1.15rem; }
}
@media (min-width: 1024px) {
    .page-hero-body.full { display: block !important; }
    .page-hero-body.short { display: none !important; }
    .page-hero-toggle { display: none !important; }
    .page-hero-title { font-size: 1.9rem; }
    .page-main-title { font-size: 1.55rem; }
}

html.theme-dark .page-hero-body, html.theme-dark .page-main-body, html.theme-dark .page-list-item { color: #b0bcc7; }
html.theme-dark .page-list { background: #1e2a36; }
html.theme-dark .faq-section details { background: #1a2530; border-color: rgba(255,255,255,0.06); }