/* ============================================================
   MapleMind Blog — blog.css (self-contained, no JS dependency)
   ============================================================ */

:root {
  --bg:         #0F1B2D;
  --card:       #112035;
  --border:     #2A3D57;
  --border-dim: rgba(42,61,87,0.5);
  --blue:       #1A5CFF;
  --green:      #1DB954;
  --amber:      #F59E0B;
  --purple:     #7C3AED;
  --text:       #FFFFFF;
  --text-2:     #C2CEDC;
  --text-3:     #7E93A8;
  --radius:     16px;
  --radius-sm:  10px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; overflow-x: clip; overscroll-behavior-x: none; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; width: 100%; max-width: 100%; overflow-x: clip;
  background: var(--bg); color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.7; font-size: 17px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,27,45,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-dim);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.site-header .logo { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; }
.site-header .logo:hover { text-decoration: none; }
.site-header nav { display: flex; align-items: center; gap: 22px; }
.site-header nav a { color: var(--text-2); font-size: 15px; font-family: 'Inter', sans-serif; }
.site-header nav a:hover { color: var(--text); text-decoration: none; }
.site-header nav a[aria-current="page"] { color: var(--text); }
.site-header .cta {
  background: linear-gradient(90deg, var(--blue), var(--purple));
  color: #fff; padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600;
}
.site-header .cta:hover { text-decoration: none; opacity: 0.92; }
@media (max-width: 680px) {
  .site-header nav a:not(.cta) { display: none; }
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumbs { font-size: 13px; color: var(--text-3); padding: 22px 0 0; font-family: 'Inter', sans-serif; }
.breadcrumbs a { color: var(--text-3); }
.breadcrumbs a:hover { color: var(--text-2); }
.breadcrumbs span { margin: 0 7px; opacity: 0.6; }

/* ── Article ─────────────────────────────────────────────── */
.article { max-width: 760px; margin: 0 auto; padding: 8px 0 64px; }
.article h1 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(28px, 5vw, 42px); line-height: 1.2; margin: 18px 0 10px; color: var(--text);
}
.article .meta { color: var(--text-3); font-size: 14px; font-family: 'Inter', sans-serif; margin-bottom: 24px; }
.article h2 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: clamp(22px, 3.5vw, 28px); line-height: 1.3; margin: 40px 0 12px; color: var(--text);
  scroll-margin-top: 80px;
}
.article h3 { font-family: 'Sora', sans-serif; font-size: 20px; margin: 28px 0 10px; color: var(--text); }
.article p, .article li { color: var(--text-2); }
.article ul, .article ol { padding-left: 22px; }
.article li { margin: 7px 0; }
.article strong { color: var(--text); }
.article a { font-weight: 500; }

/* TL;DR box */
.tldr {
  background: var(--card); border: 1px solid var(--border-dim);
  border-left: 4px solid var(--blue); border-radius: var(--radius-sm);
  padding: 18px 20px; margin: 22px 0 8px; font-size: 16px; color: var(--text-2);
}
.tldr strong { color: var(--text); }

/* Tables */
.article .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-dim); border-radius: var(--radius-sm); margin: 22px 0; }
.article table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; background: var(--card); }
.article th, .article td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-dim); color: var(--text-2); vertical-align: top; }
.article thead th { color: var(--text); font-family: 'Sora', sans-serif; }
.article tbody tr:last-child th, .article tbody tr:last-child td { border-bottom: none; }
.col-highlight { background: rgba(26,92,255,0.10); color: var(--text); }
.c-yes { color: var(--green); font-weight: 700; }
.c-no  { color: var(--text-3); font-weight: 700; }

/* Callout */
.callout { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); border-radius: var(--radius-sm); padding: 16px 18px; margin: 22px 0; font-size: 15.5px; }

/* FAQ */
.article .faq h3 { font-size: 18px; margin: 22px 0 6px; }
.article .faq p { margin-top: 0; }

/* Sources */
.sources { font-size: 14.5px; }
.sources li { color: var(--text-3); }

/* Byline */
.byline { display: flex; align-items: center; gap: 12px; margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--border-dim); font-size: 14px; color: var(--text-3); }
.byline img { width: 40px; height: 40px; border-radius: 8px; }
.byline strong { color: var(--text); display: block; font-size: 15px; }

/* CTA */
.article-cta {
  margin: 36px 0 0; padding: 26px; text-align: center;
  background: var(--card); border: 1px solid var(--border-dim); border-radius: var(--radius);
}
.article-cta h3 { font-family: 'Sora', sans-serif; font-size: 22px; margin: 0 0 8px; color: var(--text); }
.article-cta p { margin: 0 0 18px; color: var(--text-2); }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-buttons a {
  background: linear-gradient(90deg, var(--blue), var(--purple)); color: #fff;
  padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 600;
}
.cta-buttons a.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.cta-buttons a:hover { text-decoration: none; opacity: 0.92; }

/* ── Blog hub ────────────────────────────────────────────── */
.hub-hero { text-align: center; padding: 40px 0 8px; max-width: 720px; margin: 0 auto; }
.hub-hero h1 { font-family: 'Sora', sans-serif; font-size: clamp(30px, 6vw, 46px); margin: 12px 0 10px; }
.hub-hero p { color: var(--text-2); font-size: 18px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 40px 0 72px; }
.post-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border: 1px solid var(--border-dim); border-radius: var(--radius);
  padding: 24px; transition: transform 0.25s ease, border-color 0.25s ease;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--blue); text-decoration: none; }
.post-card .tag { align-self: flex-start; font-size: 11px; font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); background: rgba(26,92,255,0.10); border-radius: 6px; padding: 4px 9px; }
.post-card h2 { font-family: 'Sora', sans-serif; font-size: 19px; line-height: 1.35; color: var(--text); margin: 0; }
.post-card p { color: var(--text-2); font-size: 14.5px; flex: 1; margin: 0; }
.post-card .read { color: var(--blue); font-weight: 600; font-size: 14px; }
@media (max-width: 768px) { .post-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border-dim); padding: 28px 0; }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-footer p { color: var(--text-3); font-size: 13px; margin: 0; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer nav a { color: var(--text-3); font-size: 13px; }
.site-footer nav a:hover { color: var(--text-2); }