/* ══════════════════════════════════════════════════════════════
   article.css — Shared styles for all articles and blog posts
   Used by: /guides/*, /hoa/blog/*
   ══════════════════════════════════════════════════════════════ */

/* ── PE logo in site-nav ── */
.pe-logo-text { font-size: 1.3rem; font-weight: 700; letter-spacing: 1px; text-decoration: none; }
.site-nav.nav-transparent .pe-logo-text .pe-prop { color: #2c6ecb; }
.site-nav.nav-transparent .pe-logo-text .pe-exempt { color: rgba(255,255,255,0.9); }
.site-nav.scrolled .pe-logo-text .pe-prop { color: #2c6ecb; }
.site-nav.scrolled .pe-logo-text .pe-exempt { color: #333; }

/* ── Hero ── */
.article-hero { padding: calc(var(--nav-height) + var(--space-10)) var(--space-6) var(--space-12); background: var(--color-bg-dark); color: var(--color-text-inverse); }
.article-hero-inner { max-width: 800px; margin: 0 auto; }
.article-breadcrumb { font-size: var(--text-xs); color: rgba(255,255,255,0.4); margin-bottom: var(--space-6); }
.article-breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
.article-breadcrumb a:hover { color: #fff; }
.article-meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.article-category { display: inline-block; font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); background: rgba(59,130,246,0.15); padding: 0.25rem 0.75rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.5px; }
.article-date { font-size: var(--text-xs); color: rgba(255,255,255,0.4); }
.article-hero h1 { font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; margin-bottom: var(--space-6); }
.article-hero .article-subtitle { font-size: var(--text-lg); color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 640px; }
.article-hero-image { max-width: 800px; margin: var(--space-10) auto 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.article-hero-image img { width: 100%; display: block; }
.article-hero-image-placeholder { aspect-ratio: 16/9; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: var(--text-sm); }

/* ── Article body ── */
.article-body { max-width: 720px; margin: 0 auto; padding: var(--space-12) var(--space-6); }
article { border: none; }
.article-body { border: none; }
.article-body h2 { font-size: var(--text-2xl); font-weight: 700; margin-top: var(--space-12); margin-bottom: var(--space-4); color: var(--color-text); }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: var(--text-xl); font-weight: 700; margin-top: var(--space-8); margin-bottom: var(--space-3); color: var(--color-text); }
.article-body h4 { font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-6); margin-bottom: var(--space-3); color: var(--color-text); }
.article-body h5 { font-size: var(--text-base); font-weight: 700; margin-top: var(--space-4); margin-bottom: var(--space-2); color: var(--color-text); }
.article-body p { font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.article-body a { color: var(--color-primary); text-decoration: underline; text-decoration-color: rgba(30,58,95,0.3); text-underline-offset: 2px; }
.article-body a:hover { text-decoration-color: var(--color-primary); }
.article-body > ul { margin: 0 0 var(--space-5); padding-left: var(--space-6); list-style: disc; }
.article-body > ul > li { font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.article-body ul, .article-body ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.article-body li { font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.article-body blockquote { border-left: 3px solid var(--color-accent); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; background: var(--color-bg-alt); border-radius: 0; }
.article-body blockquote p { font-style: italic; color: var(--color-text); margin-bottom: 0; }

/* ── Table of contents ── */
.article-toc { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-8); }
.article-toc-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-3); }
.article-toc ul { list-style: none; padding: 0; margin: 0; }
.article-toc li { margin-bottom: var(--space-1); }
.article-toc a { font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s; }
.article-toc a:hover { color: var(--color-primary); }

/* ── Stat row ── */
.article-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-8) 0; }
.article-stat { text-align: center; padding: var(--space-6); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.article-stat-num { font-size: var(--text-3xl); font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: var(--space-2); }
.article-stat-label { font-size: var(--text-xs); color: var(--color-text-secondary); }

/* ── CTA block ── */
.article-cta { background: var(--color-bg-dark); border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-10) var(--space-8); text-align: center; margin: var(--space-12) 0; color: #fff; box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25); }
.article-cta h3 { color: #fff !important; margin-top: 0 !important; font-size: var(--text-xl) !important; line-height: 1.4 !important; }
.article-cta p { color: rgba(255,255,255,0.55) !important; max-width: 480px; margin: 0 auto var(--space-6) !important; font-size: var(--text-sm) !important; line-height: 1.7 !important; }
.article-cta .btn { display: inline-block; text-decoration: none !important; padding: 0.75rem 2rem; border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-base); transition: all 0.2s; }
.article-cta .btn-primary { background: var(--color-accent); color: #fff !important; }
.article-cta .btn-primary:hover { background: #2563eb; }
.article-cta .btn-secondary { background: rgba(255,255,255,0.1); color: #fff !important; border: 1px solid rgba(255,255,255,0.2); }
.article-cta .btn-secondary:hover { background: rgba(255,255,255,0.18); }
.article-cta-buttons { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.article-cta-sub { font-size: var(--text-xs); color: rgba(255,255,255,0.4); margin-top: var(--space-3); display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.article-cta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; animation: ctadotpulse 2s ease-in-out infinite; }
.article-cta .cta-bullets { color: rgba(255,255,255,0.7) !important; max-width: 560px; margin: var(--space-4) auto var(--space-6) !important; padding-left: 0 !important; font-size: 1rem; }
.article-cta .cta-bullets li { color: rgba(255,255,255,0.7) !important; font-size: 1rem !important; line-height: 1.55 !important; margin-bottom: 0 !important; }
@keyframes ctadotpulse { 0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,0.4); opacity: 1; } 50% { box-shadow: 0 0 12px rgba(34,197,94,0.8); opacity: 0.6; } }

/* ── Image ── */
.article-image { margin: var(--space-8) 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: 0 1px 3px rgba(0,0,0,0.08); background: var(--color-bg-alt); }
.article-image img { width: 100%; height: auto; display: block; object-fit: contain; }
.article-image.zoomable { cursor: pointer; transition: box-shadow 0.2s; }
.article-image.zoomable:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.article-image-placeholder { aspect-ratio: 16/9; background: var(--color-bg-alt); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text-tertiary); gap: 0.5rem; font-size: var(--text-sm); }
.article-image-caption { font-size: var(--text-xs); color: var(--color-text-tertiary); text-align: center; padding: var(--space-3); font-style: italic; }
.img-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 9999; cursor: pointer; align-items: center; justify-content: center; padding: 2rem; }
.img-modal.active { display: flex; }
.img-modal img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; }

/* ── Table ── */
.article-table { margin: var(--space-6) 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.article-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.article-table th { background: var(--color-bg-dark); color: #fff; text-align: left; padding: 12px 16px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.article-table td { padding: 10px 16px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); line-height: 1.5; }
.article-table tr:last-child td { border-bottom: none; }
.article-table tr:nth-child(even) { background: var(--color-bg-alt); }

/* ── Callouts ── */
.article-warning { background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #ef4444; border-radius: 0; padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; }
.article-warning-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); display: flex; align-items: center; gap: 6px; }
.article-warning p { font-size: var(--text-sm) !important; color: var(--color-text-secondary); margin-bottom: 0; line-height: 1.6 !important; }

.article-tip { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 0; padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; }
.article-tip-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); }
.article-tip p { font-size: var(--text-sm) !important; color: var(--color-text-secondary); margin-bottom: 0; line-height: 1.6 !important; }

.article-success { background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid var(--color-success); border-radius: 0; padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; }
.article-success-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); }
.article-success p { font-size: var(--text-sm) !important; color: var(--color-text-secondary); margin-bottom: 0; line-height: 1.6 !important; }

.article-amber { background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid var(--color-warning); border-radius: 0; padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; }
.article-amber-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); }
.article-amber p { font-size: var(--text-sm) !important; color: var(--color-text-secondary); margin-bottom: 0; line-height: 1.6 !important; }

/* Reset lists inside callouts/cards */
.article-card ul, .article-success ul, .article-warning ul, .article-tip ul, .article-amber ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); list-style: disc; }
.article-card li, .article-success li, .article-warning li, .article-tip li, .article-amber li { font-size: var(--text-sm) !important; line-height: 1.6 !important; color: var(--color-text-secondary); margin-bottom: var(--space-1); }

/* ── Checklist ── */
.article-checklist { list-style: none !important; padding-left: 0 !important; margin: var(--space-4) 0 var(--space-5) !important; }
.article-checklist li { font-size: var(--text-sm) !important; line-height: 1.85 !important; color: var(--color-text-secondary); margin-bottom: var(--space-2); padding-left: 1.6em !important; position: relative; }
.article-checklist li::before { content: "\2610"; position: absolute; left: 0; color: var(--color-text-tertiary); }

/* ── Grid layouts + cards ── */
.article-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-6) 0; }
.article-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-6) 0; }
.article-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-5); }
.article-card h5 { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); }
.article-card p, .article-card li { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }

/* ── Share buttons ── */
.share-row { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-6) 0; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; color: var(--color-text-secondary) !important; padding: 0.5rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; transition: all 0.2s; background: var(--color-surface); }
.share-btn:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.share-icon { width: 20px; height: 20px; border-radius: 0; display: flex; align-items: center; justify-content: center; background: none !important; }
.share-icon svg { width: 16px; height: 16px; }
.share-label { font-size: var(--text-xs); font-weight: 600; }

/* ── Sources (collapsible) ── */
.article-sources { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.article-sources-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary); padding: 0; font-family: inherit; }
.article-sources-toggle:hover { color: var(--color-text); }
.article-sources-toggle svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.article-sources.open .article-sources-toggle svg { transform: rotate(180deg); }
.article-sources ol { padding-left: var(--space-5); margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin 0.3s ease; }
.article-sources.open ol { max-height: 2000px; margin-top: var(--space-4); }
.article-sources li { font-size: var(--text-xs); color: var(--color-text-tertiary); line-height: 1.8; margin-bottom: var(--space-1); }
.article-sources li a { color: var(--color-text-secondary); text-decoration: none; }
.article-sources li a:hover { color: var(--color-primary); text-decoration: underline; }

/* ── Author box ── */
.article-author { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-top: var(--space-12); margin-bottom: 0; }
.article-author-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.article-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.article-author-name { font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.article-author-bio { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ── Related articles ── */
.related-articles { max-width: 720px; margin: 0 auto; padding: 0 var(--space-6) var(--space-12); }
.related-articles h2 { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-6); }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.related-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
.related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); }
.related-card-cat { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-2); }
.related-card h3 { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); line-height: 1.4; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .article-hero h1 { font-size: var(--text-2xl); }
    .article-stat-row { grid-template-columns: 1fr; }
    .article-grid-2 { grid-template-columns: 1fr; }
    .article-grid-3 { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    .article-cta { padding: var(--space-8) var(--space-6); }
    .article-table { overflow-x: auto; }
}