/*
 * Blogs for SEO starter styles (optional). Only touches bfs- classes and inherits your
 * fonts and colours. Set --bfs-accent (and friends) on any parent to match your brand.
 */
.bfs-article, .bfs-post-list, .bfs-pagination {
  --bfs-accent: currentColor;
  --bfs-muted: color-mix(in srgb, currentColor 65%, transparent);
  --bfs-tint: color-mix(in srgb, currentColor 6%, transparent);
  --bfs-rule: color-mix(in srgb, currentColor 15%, transparent);
  --bfs-width: 720px;
}
.bfs-article { max-width: var(--bfs-width); margin: 0 auto; line-height: 1.7; }
.bfs-article img { max-width: 100%; height: auto; border-radius: 8px; }
.bfs-title { margin-bottom: 0.25em; line-height: 1.15; }
.bfs-meta { color: var(--bfs-muted); font-size: 0.9em; }
.bfs-hero { margin: 1.5em 0; }
.bfs-short-answer { background: var(--bfs-tint); border-left: 4px solid var(--bfs-accent); padding: 0.75em 1.25em; border-radius: 6px; font-size: 1.05em; }
.bfs-takeaways, .bfs-toc { margin: 1.5em 0; }
.bfs-toc ol { padding-left: 1.25em; }
.bfs-toc .bfs-toc-level-3 { margin-left: 1em; list-style: circle; }
.bfs-body h2, .bfs-body h3 { line-height: 1.25; margin-top: 1.75em; scroll-margin-top: 80px; }
.bfs-body a, .bfs-sources a, .bfs-related a, .bfs-toc a { color: var(--bfs-accent); text-underline-offset: 3px; }
.bfs-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.bfs-body th, .bfs-body td { border: 1px solid var(--bfs-rule); padding: 0.5em 0.75em; text-align: left; }
.bfs-body blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--bfs-rule); color: var(--bfs-muted); }
.bfs-body pre { background: var(--bfs-tint); padding: 1em; border-radius: 6px; overflow-x: auto; }
.bfs-faqs details { border-bottom: 1px solid var(--bfs-rule); padding: 0.75em 0; }
.bfs-faqs summary { cursor: pointer; font-weight: 600; }
.bfs-sources { font-size: 0.9em; }
.bfs-related ul { list-style: none; padding: 0; display: grid; gap: 1em; }
.bfs-related p { margin: 0.25em 0 0; color: var(--bfs-muted); }
.bfs-post-list { display: grid; gap: 2em; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.bfs-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.bfs-card h2 { font-size: 1.25em; line-height: 1.3; margin: 0.5em 0 0.25em; }
.bfs-card h2 a { color: inherit; text-decoration: none; }
.bfs-pagination { display: flex; justify-content: space-between; margin-top: 2em; }
.bfs-pagination a { color: var(--bfs-accent); }