/* Enhanced blog aesthetics (shared across posts) */

@font-face {
  font-family: 'RalewayVar';
  src: url('../../../webGL/specialfonts/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QuicksandVar';
  src: url('../../../webGL/specialfonts/Quicksand-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --blog-text: #263238;
  --blog-muted: #6b7a8c;
  --blog-accent: #83d3c9;
  --blog-accent-2: #3b8b81;
  --blog-bg: #f8f9fa;
  --blog-card: #ffffff;
  --radius: 10px;
  --shadow-1: 0 5px 20px rgba(0,0,0,0.06);
  --shadow-2: 0 10px 32px rgba(0,0,0,0.10);
}

.blog-page, .blog-post-page {
  font-family: 'QuicksandVar', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--blog-text);
}

.blog-page h1, .blog-page h2, .blog-page h3, .blog-page h4, .blog-page h5, .blog-page h6,
.blog-post-page h1, .blog-post-page h2, .blog-post-page h3, .blog-post-page h4, .blog-post-page h5, .blog-post-page h6 {
  font-family: 'RalewayVar', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: 0.2px;
}

/* Reading progress bar */
#reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--blog-accent), var(--blog-accent-2)); z-index: 9999; }

/* Breadcrumbs */
.breadcrumb { font-size: .9em; color: var(--blog-muted); display: flex; align-items: center; gap: .5em; margin: -.5rem 0 1rem 0; }
.breadcrumb a { color: var(--blog-muted); text-decoration: none; }
.breadcrumb .sep { opacity: .5; }

/* Hero image */
.hero-image { margin: 1rem 0 1.5rem 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.hero-image img { width: 100%; height: auto; display: block; }

/* Lead paragraph */
.lead { font-size: 1.2em; line-height: 1.9; color: #36454f; }

/* Tag chips */
.post-tags { margin-top: .75rem; }
.post-tags .tag { display:inline-block; padding: .25em .75em; margin-right: .4em; margin-bottom: .4em; border-radius: 999px; background:#eefbf9; border:1px solid #cceae6; color:#2f6f67; font-size:.8em; }

/* Share bar */
.share-bar { display:flex; align-items:center; justify-content: space-between; gap: .75em; background: var(--blog-card); border:1px solid #e9edf2; border-radius: var(--radius); padding:.75em 1em; box-shadow: var(--shadow-1); margin: 1.25em 0; }
.share-bar .label { font-size:.9em; color: var(--blog-muted); }
.share-bar .actions { display:flex; gap: .5em; flex-wrap: wrap; }
.share-button { display:inline-flex; align-items:center; gap:.4em; border:1px solid #e0e6ec; padding:.4em .7em; border-radius:6px; text-decoration:none; color:#334e68; transition: background .2s ease, transform .2s ease; }
.share-button:hover { background:#f5f8fa; transform: translateY(-1px); }
.share-button.copied { background: #e8f7f5; border-color:#cceae6; }

/* Callouts */
.callout { border-left:4px solid var(--blog-accent); background:#f1fbf9; padding:1rem 1rem 1rem 1.25rem; border-radius:6px; box-shadow: 0 1px 0 rgba(0,0,0,0.02); }
.callout.family { border-left-color:#d67b28; background:#fff7ec; }
.callout.info { border-left-color:#83a1ff; background:#f5f7ff; }

/* Newsletter */
.newsletter { background: linear-gradient(135deg, #f8fffe, #f6f1ff 60%); border:1px solid #e8ecf3; border-radius: var(--radius); padding: 1.25rem; display:flex; gap:.75rem; align-items:center; flex-wrap: wrap; margin-top: 2rem; }
.newsletter h4 { margin: 0; }
.newsletter p { margin: 0; color: var(--blog-muted); }
.newsletter input[type="email"] { flex: 1 1 220px; border:1px solid #dfe5ec; border-radius:6px; padding:.7em .9em; }
.newsletter .button { flex: 0 0 auto; }

/* Related posts */
.related-posts { margin-top: 2.5rem; }
.related-posts h4 { margin-bottom: 1rem; }
.related-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.related-card { background: var(--blog-card); border:1px solid #ecf0f4; border-radius:8px; overflow:hidden; text-decoration:none; color: inherit; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease; }
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.related-card img { width: 100%; height: 140px; object-fit: cover; display:block; }
.related-card .rc-body { padding: .75rem .9rem; }
.related-card .rc-title { margin: .2rem 0; font-size: 1em; }
.related-card .rc-meta { font-size: .8em; color: var(--blog-muted); }

/* Sticky CTA */
a.sticky-cta { position: fixed; right: 16px; bottom: 16px; background: var(--blog-accent-2); color: #fff !important; border-radius: 999px; padding: .8em 1.1em; box-shadow: var(--shadow-2); display:inline-flex; align-items:center; gap:.5em; text-decoration:none; z-index:10000; }
a.sticky-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }