/* HomeX7 blog styles — extends the tokens already defined in /styles.css
   (linked before this file on every blog page) so articles match the
   main site's palette and type without depending on Tailwind's purged
   utility set. Keep this file small and additive. */

.blog-body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.blog-header {
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background) / 0.92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.blog-header-inner {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.blog-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: hsl(var(--foreground));
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.blog-logo img { width: 30px; height: 30px; border-radius: 6px; display: block; }

.blog-nav { display: flex; align-items: center; gap: 1.5rem; }

.blog-nav a {
  color: hsl(var(--foreground) / 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.blog-nav a:hover { color: hsl(16 55% 42%); }

.blog-nav .cta-pill {
  background-color: hsl(16 55% 42%);
  color: hsl(var(--primary-foreground));
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 600;
}

.blog-nav .cta-pill:hover { background-color: hsl(16 55% 36%); color: hsl(var(--primary-foreground)); }

.blog-wrap {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.blog-wrap.wide { max-width: 60rem; }

.blog-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(16 55% 42%);
  margin-bottom: 0.75rem;
}

.blog-h1 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.blog-meta {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.blog-article p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 1.35rem;
  color: hsl(var(--foreground) / 0.92);
}

.blog-article h2 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size: 1.5rem;
  margin: 2.25rem 0 1rem;
  font-weight: 600;
}

.blog-article h3 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size: 1.2rem;
  margin: 1.75rem 0 0.75rem;
  font-weight: 600;
}

.blog-article strong { color: hsl(var(--foreground)); }

.blog-lede {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-left: 4px solid hsl(16 55% 42%);
  border-radius: 0.25rem;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
  font-size: 1.1rem;
  line-height: 1.65;
}

.blog-faq {
  margin-top: 2.5rem;
  border-top: 1px solid hsl(var(--border));
  padding-top: 2rem;
}

.blog-faq-item { margin-bottom: 1.5rem; }

.blog-faq-item h3 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}

.blog-faq-item p { margin: 0; color: hsl(var(--foreground) / 0.9); }

.blog-cta {
  margin-top: 2.75rem;
  background: hsl(96 24% 20%);
  color: hsl(38 46% 96%);
  border-radius: 0.25rem;
  padding: 2rem;
}

.blog-cta h2 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  color: hsl(38 46% 96%);
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
}

.blog-cta p { margin: 0 0 1.25rem; color: hsl(38 46% 96% / 0.85); line-height: 1.6; }

.blog-cta a.button {
  display: inline-block;
  background: hsl(16 55% 42%);
  color: hsl(36 46% 97%);
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
}

.blog-cta a.button:hover { background: hsl(16 55% 36%); }

.blog-source-note {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

.blog-footer {
  border-top: 1px solid hsl(var(--border));
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}

.blog-footer a { color: hsl(16 55% 42%); text-decoration: none; }

/* Blog index / listing page */
.blog-index-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.blog-card {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  border-radius: 0.25rem;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  display: block;
}

.blog-card:hover { border-color: hsl(16 55% 42%); }

.blog-card h2 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size: 1.25rem;
  margin: 0.3rem 0 0.5rem;
  color: hsl(var(--foreground));
}

.blog-card p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.9rem; line-height: 1.55; }

.blog-card .pillar {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: hsl(16 55% 42%);
}

/* Key takeaways, comparison tables, lists, related reading (added Sep 2026) */
.blog-takeaways {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  border-radius: 0.25rem;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
}
.blog-article .blog-takeaways h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
.blog-takeaways ul, .blog-list, .blog-related ul { margin: 0 0 1.35rem; padding-left: 1.25rem; }
.blog-takeaways ul { margin: 0; }
.blog-takeaways li, .blog-list li, .blog-related li { line-height: 1.65; margin-bottom: 0.5rem; }
.blog-list li { font-size: 1.05rem; }
.blog-table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.blog-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.blog-table caption { text-align: left; font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.blog-table th, .blog-table td { border-bottom: 1px solid hsl(var(--border)); padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.blog-table thead th { background: hsl(var(--card)); font-weight: 600; }
.blog-table tbody th { font-weight: 500; }
.blog-related { margin-top: 2.5rem; border-top: 1px solid hsl(var(--border)); padding-top: 1.5rem; }
.blog-article .blog-related h2 { font-size: 1.2rem; margin-top: 0; }
.blog-related a { color: hsl(16 55% 42%); }

/* Mobile header: stop the nav overflowing the viewport on phones */
@media (max-width: 720px) {
  .blog-header-inner { flex-wrap: wrap; padding: 0.75rem 1rem; }
  .blog-nav { flex-wrap: wrap; gap: 0.5rem 1rem; width: 100%; }
  .blog-nav .cta-pill { margin-left: auto; }
  .blog-wrap { padding: 2rem 1rem 4rem; }
}

/* Restore bullets stripped by the site-wide CSS reset */
.blog-takeaways ul, .blog-list, .blog-related ul { list-style: disc; }
.blog-takeaways li::marker, .blog-list li::marker { color: hsl(16 55% 42%); }