/* ============================================
   Blog Article Shared Styles – York Surveyors
   ============================================ */
.article-container { max-width: 1200px; margin: 0 auto; padding: 60px 24px 80px; }
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 60px; align-items: start; }
.article-hero-img { width: 100%; height: 480px; object-fit: cover; border-radius: 16px; margin: 2rem 0; box-shadow: 0 16px 48px rgba(10,31,68,.2); }
/* Body text: #3d4a5c on white = 7.2:1 ✅ AAA */
.article-body { font-size: 1.05rem; line-height: 1.85; color: #3d4a5c; }
.article-body h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; color: #0a1f44; margin: 2.5rem 0 1rem; line-height: 1.3; }
.article-body h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; color: #0a1f44; margin: 2rem 0 .75rem; }
.article-body p { margin-bottom: 1.4rem; }
.article-body ul, .article-body ol { margin: .5rem 0 1.5rem 1.5rem; }
.article-body li { margin-bottom: .65rem; line-height: 1.75; }
.article-body strong { color: #1e2530; }
/* Body links: req #0066cc = 4.5:1 on white ✅ AA; underline for distinction */
.article-body a { color: #0066cc; font-weight: 600; text-decoration: underline; }
.article-body a:hover { color: #004499; }
.article-body a:visited { color: #551a8b; }
.article-body blockquote { border-left: 4px solid #c9a84c; padding: 1.2rem 1.75rem; background: #f7f0de; border-radius: 0 12px 12px 0; margin: 2rem 0; }
.article-body blockquote p { color: #0a1f44; font-style: italic; margin: 0; }
.article-body .callout { background: #0a1f44; border-radius: 12px; padding: 24px 28px; margin: 2rem 0; display: flex; gap: 16px; align-items: flex-start; }
.article-body .callout i { color: #c9a84c; font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
/* Callout body: #e2e8f0 on #0a1f44 = 13.8:1 ✅ AAA */
.article-body .callout p { color: #e2e8f0; margin: 0; font-size: .95rem; }
.article-body .callout strong { color: #fff; }
.article-header { padding-bottom: 2rem; border-bottom: 1px solid #eef0f3; margin-bottom: 2rem; }
.article-header .blog-cat { position: static; display: inline-block; margin-bottom: 1rem; }
.article-header h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.8rem); color: #0a1f44; line-height: 1.25; margin-bottom: 1rem; }
/* Article meta: #5a6880 on white = 4.8:1 ✅ AA */
.article-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: .88rem; color: #5a6880; }
.article-meta i { color: #c9a84c; margin-right: 5px; }
.article-share { display: flex; align-items: center; gap: 10px; margin-top: 1.5rem; }
/* Share label: #3d4a5c on white = 7.2:1 ✅ AAA */
.article-share span { font-size: .88rem; font-weight: 600; color: #3d4a5c; }
.share-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; transition: transform .2s; }
.share-btn:hover { transform: translateY(-2px); }
.share-twitter { background: #1da1f2; color: #fff; }
.share-linkedin { background: #0077b5; color: #fff; }
.share-facebook { background: #1877f2; color: #fff; }
.article-sidebar { position: sticky; top: 100px; }
.sidebar-widget { background: #f8f7f4; border-radius: 12px; padding: 24px; margin-bottom: 24px; border: 1px solid #eef0f3; }
.sidebar-widget h4 { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #0a1f44; margin-bottom: 1rem; }
.sidebar-widget ul li { margin-bottom: .75rem; }
/* Sidebar links: #3d4a5c on #f8f7f4 = 7.0:1 ✅ AAA */
.sidebar-widget ul li a { font-size: .9rem; color: #3d4a5c; display: flex; gap: 8px; align-items: flex-start; }
.sidebar-widget ul li a i { color: #c9a84c; font-size: .8rem; flex-shrink: 0; margin-top: 4px; }
.sidebar-widget ul li a:hover { color: #c9a84c; }
.sidebar-cta { background: #0a1f44; border-radius: 12px; padding: 28px 24px; text-align: center; }
.sidebar-cta h4 { color: #fff; font-size: 1.1rem; margin-bottom: .75rem; }
/* Sidebar CTA body: req #e2e8f0 on #0a1f44 = 13.8:1 ✅ AAA */
.sidebar-cta p { color: #e2e8f0; font-size: .88rem; margin-bottom: 1.25rem; }
.author-box { background: #0a1f44; border-radius: 16px; padding: 30px; margin-top: 3.5rem; display: flex; gap: 20px; align-items: flex-start; }
.author-avatar-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #c9a84c; flex-shrink: 0; }
.author-box-text h4 { color: #fff; margin-bottom: .3rem; font-size: 1rem; }
.author-box-text .role { color: #c9a84c; font-size: .82rem; font-weight: 600; letter-spacing: .05em; display: block; margin-bottom: .5rem; }
/* Author box body: req #e2e8f0 on #0a1f44 = 13.8:1 ✅ AAA */
.author-box-text p { color: #e2e8f0; font-size: .88rem; margin: 0; line-height: 1.7; }
.related-posts { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid #eef0f3; }
.related-posts h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; color: #0a1f44; margin-bottom: 1.5rem; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.read-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg,#c9a84c,#e8c96a); width: 0; z-index: 9999; transition: width .1s linear; }
/* Image caption: #5a6880 on white = 4.8:1 ✅ AA */
.img-caption { font-size: .82rem; color: #5a6880; text-align: center; margin-top: .5rem; margin-bottom: 2rem; font-style: italic; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .article-sidebar { position: static; } .article-hero-img { height: 300px; } .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .article-hero-img { height: 220px; } .related-grid { grid-template-columns: 1fr; } .author-box { flex-direction: column; } .article-container { padding: 40px 16px 60px; } }