/* ============================================================
   BLOG SPECIFIC STYLES — /blog.css
   ============================================================ */

.blog-hero {
  background: #062b58;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.blog-hero-inner { max-width: 800px; margin: 0 auto; }
.blog-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: rgba(255,255,255,0.65); margin-bottom: 1rem; flex-wrap: wrap;
}
.blog-breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
.blog-breadcrumb a:hover { color: #fff; }
.blog-hero-title {
  font-family: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800;
  color: #fff; line-height: 1.15; margin: 0 0 1rem;
}
.blog-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.7); flex-wrap: wrap; }
.blog-meta-item { display: flex; align-items: center; gap: 6px; }
.blog-category-tag { background: rgba(255,255,255,0.15); color: #fff; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }

.blog-main { background: var(--color-bg, #f8f9fb); padding: clamp(2rem, 5vw, 4rem) 0; }
[data-theme="dark"] .blog-main { background: var(--color-bg, #0d1117); }
.blog-layout { max-width: 800px; margin: 0 auto; }

.blog-content { font-size: 1rem; line-height: 1.8; color: var(--color-text, #0d1b2a); }
[data-theme="dark"] .blog-content { color: var(--color-text, #e6edf3); }
.blog-content h2 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--color-primary, #062b58); margin: 2.5rem 0 1rem; }
[data-theme="dark"] .blog-content h2 { color: #5b9bd5; }
.blog-content p { margin-bottom: 1.4rem; }
.blog-content ul, .blog-content ol { margin: 1rem 0 1.5rem 1.5rem; }
.blog-content li { margin-bottom: 0.5rem; }
/* Links use the brand NAVY (not the legacy teal #062b58) so the blog body
   matches the homepage's navy link colour. Token-driven, dark-mode safe. */
.blog-content a { color: var(--color-primary, #062b58); text-decoration: underline; text-underline-offset: 2px; }
.blog-content a:hover { color: var(--color-primary-hover, #0a3d7a); }
[data-theme="dark"] .blog-content a { color: var(--color-primary, #5b9bd5); }
[data-theme="dark"] .blog-content a:hover { color: var(--color-accent, #ffbe01); }
.blog-content strong { font-weight: 700; }
/* Blockquote spine = brand AMBER (was teal) to match the homepage/theme
   accent and the .lpi__post-body blockquote treatment. */
.blog-content blockquote { border-left: 4px solid var(--color-accent, #ffbe01); margin: 2rem 0; padding: 0.5rem 1.5rem; background: var(--color-accent-light, #fff8e1); font-style: italic; }
[data-theme="dark"] .blog-content blockquote { background: rgba(255,190,1,0.08); border-left-color: var(--color-accent, #ffbe01); }

/* Navy-only gradient (was navy→teal) so the CTA reads on-brand even before the
   theme override. radius → --radius-xl token for card consistency. */
.blog-cta { margin-top: 3rem; padding: 2.5rem; background: linear-gradient(135deg, #062b58 0%, #0a3d7a 100%); border-radius: var(--radius-xl, 1rem); color: #fff; text-align: center; }
.blog-cta h2 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 0.75rem; }
.blog-cta p { color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; }
.blog-cta-phone { display: inline-flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255,255,255,0.12); padding: 12px 24px; border-radius: 10px; transition: background 0.15s; }
.blog-cta-phone:hover { background: rgba(255,255,255,0.22); color: #fff; }
.blog-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: var(--color-primary, #062b58); text-decoration: none; margin-bottom: 2rem; }
.blog-back-link:hover { color: var(--color-primary-hover, #0a3d7a); }
[data-theme="dark"] .blog-back-link { color: var(--color-primary, #5b9bd5); }
[data-theme="dark"] .blog-back-link:hover { color: var(--color-accent, #ffbe01); }