/* ============================================================
   Blog article + category styling. Site navy/gold theme.
   Layout mirrors the /blog-post design: centered header, category
   pill, byline, "Quick answer" dropdown, wide hero, full-width body.
   ============================================================ */

/* ---- Shared site chrome (Header/Footer read these; blog pages only load this file) ---- */
.mppx { --nav2:#16236E; }
.nl { color:rgba(255,255,255,.82); font:600 14px/1 var(--font-body); display:inline-flex; align-items:center; gap:5px; }
.flink { color:rgba(255,255,255,.6); font:14px/2 var(--font-body); transition:color .15s ease; }
@media (hover: hover) and (min-width: 900px) { .nl:hover, .flink:hover { color:#fff; } }

/* ---- theme tokens (site navy/gold; site --font-display is League Spartan) ---- */
.post {
  --bp-purple:#0b1457; --bp-blue:#2563eb; --bp-cyan:#38bdf8; --bp-gold:#f0c31f;
  --bp-offwhite:#fcfaf7; --bp-cream:#f6f8fd; --bp-palepurple:#eef1fb; --bp-paleblue:#eff4fe;
  --bp-ink:#0c1538; --bp-border:#e4e9f2; --bp-muted:#667085;
  --bp-head:var(--font-display, "League Spartan", system-ui, sans-serif);
  background:#fff;
}

/* ===================== centered header ===================== */
.post-head { background:linear-gradient(180deg,#F5F8FD,#FFFFFF); border-bottom:1px solid var(--line); }
.post-head-inner { max-width:820px; margin:0 auto; padding:40px 56px 34px; text-align:center; }
.post-crumbs { font:600 13px/1 var(--font-body); color:var(--tx); margin:0 0 20px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; align-items:center; }
.post-crumbs a { color:var(--blue); text-decoration:none; }
.post-crumbs span { color:#B7C0D6; }
.post-pill { display:inline-block; background:rgba(37,99,235,.1); color:var(--blue); font:800 11px/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; padding:7px 13px; border-radius:999px; margin-bottom:18px; }
.post-h1 { font-family:var(--bp-head); font-weight:800; font-size:clamp(30px,4.4vw,46px); line-height:1.06; letter-spacing:-.02em; color:var(--ink); margin:0 0 22px; }
.post-byline { display:flex; align-items:center; justify-content:center; gap:12px; }
.post-avatar { width:46px; height:46px; border-radius:50%; object-fit:cover; display:block; flex:0 0 auto; background:#fff; }
.post-byline-txt { text-align:left; }
.pb-name { font:700 14px/1.2 var(--font-body); color:var(--ink); }
.pb-meta { font:13px/1.4 var(--font-body); color:#9AA4B8; }

/* ===================== quick answer dropdown ===================== */
.post-qa-wrap { max-width:820px; margin:26px auto 0; padding:0 56px; }
.post-qa { border:1px solid var(--line); border-radius:12px; background:var(--bp-offwhite); overflow:hidden; }
.post-qa > summary { cursor:pointer; list-style:none; padding:13px 18px; font:700 13px/1.2 var(--font-body); color:var(--nav); display:flex; align-items:center; gap:8px; letter-spacing:.02em; }
.post-qa > summary::-webkit-details-marker { display:none; }
.post-qa-chev { margin-left:auto; transition:transform .2s ease; font-size:18px; color:var(--tx); }
.post-qa[open] .post-qa-chev { transform:rotate(90deg); }
.post-qa > p { margin:0; padding:2px 18px 16px; font:16px/1.65 var(--font-body); color:var(--tx); }

/* ===================== hero ===================== */
.post-hero-wrap { max-width:900px; margin:32px auto 0; padding:0 40px; }
.post-hero-img { width:100%; height:auto; border-radius:18px; display:block; box-shadow:0 16px 38px rgba(12,21,56,.14); }

/* ===================== body (full site width) ===================== */
.post-article { max-width:900px; margin:0 auto; padding:44px 40px 20px; }
.post-body { font:18px/1.8 var(--font-body); color:#1F2430; }
.post-body > p:first-of-type { font-size:1.14em; color:var(--ink); font-weight:500; }
.post-body p { margin:0 0 1.2em; }
.post-body a { color:var(--bp-blue); text-decoration:none; border-bottom:1px solid rgba(37,99,235,.3); }
.post-body a:hover { border-bottom-color:var(--bp-blue); }
.post-body strong { color:var(--bp-ink); }

.post-body h2 { font-family:var(--bp-head); font-weight:800; font-size:28px; line-height:1.2; color:var(--bp-ink); margin:2.2em 0 .7em; scroll-margin-top:96px; }
.post-body h2::after { content:""; display:block; width:44px; height:4px; border-radius:3px; background:var(--bp-gold); margin-top:.5em; }
.post-body h3 { font-family:var(--bp-head); font-weight:700; font-size:21px; color:var(--bp-ink); margin:1.8em 0 .5em; }

/* numbered lists -> navy chips */
.post-body ol { counter-reset:s; list-style:none; padding:0; margin:1.4em 0; }
.post-body ol > li { counter-increment:s; position:relative; padding:3px 0 3px 50px; margin:0 0 .8em; min-height:34px; }
.post-body ol > li::before { content:counter(s); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:9px; background:var(--bp-purple); color:#fff; font:800 16px/34px var(--bp-head); text-align:center; }

/* bullet lists -> gold diamond */
.post-body ul { list-style:none; padding:0; margin:1.4em 0; }
.post-body ul > li { position:relative; padding:0 0 0 28px; margin:0 0 .6em; }
.post-body ul > li::before { content:""; position:absolute; left:5px; top:.66em; width:9px; height:9px; background:var(--bp-gold); transform:rotate(45deg); border-radius:2px; }

/* bold-lead bullets -> feature rows */
.post-body ul > li:has(> strong:first-child) { padding:15px 18px; margin:0 0 .8em; background:var(--bp-cream); border-left:3px solid var(--bp-cyan); border-radius:10px; }
.post-body ul > li:has(> strong:first-child)::before { display:none; }
.post-body ul > li:has(> strong:first-child) > strong:first-child { color:var(--bp-purple); }

/* blockquote -> callout box */
.post-body blockquote { margin:1.7em 0; padding:18px 22px; background:var(--bp-palepurple); border-left:5px solid var(--bp-purple); border-radius:10px; color:#25304a; }
.post-body blockquote p { margin:0 0 .5em; }
.post-body blockquote p:last-child { margin:0; }
.post-body blockquote strong:first-child { font-family:var(--bp-head); text-transform:uppercase; letter-spacing:.03em; font-size:.92em; color:var(--bp-purple); }

/* tables — wrapped in .table-scroll by the rehype plugin so they scroll
   horizontally instead of being clipped by the post's overflow-x:hidden root. */
.post-body .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.7em 0; }
.post-body table { width:100%; border-collapse:separate; border-spacing:0; margin:0; font-size:15px; border:1px solid var(--bp-border); border-radius:12px; overflow:hidden; }
@media (max-width:640px){ .post-body table { font-size:14px; } .post-body .table-scroll table { min-width:520px; } }
.post-body thead th { background:var(--bp-purple); color:#fff; font-family:var(--bp-head); font-weight:700; text-align:left; padding:12px 14px; }
.post-body tbody td { padding:11px 14px; border-top:1px solid var(--bp-border); vertical-align:top; }
.post-body tbody tr:nth-child(even) { background:var(--bp-cream); }

/* images (PNG diagrams/mockups) */
.post-body figure { margin:1.9em 0; }
.post-body p > img, .post-body figure img { display:block; max-width:600px; width:100%; height:auto; margin:1.9em auto; border-radius:16px; box-shadow:0 10px 28px rgba(12,21,56,.10); }
.post-body figcaption { font:13px/1.5 var(--font-body); color:var(--bp-muted); margin-top:8px; text-align:center; }

/* TOC (injected before first h2) */
.post-body .toc { border:1px solid var(--bp-border); border-left:4px solid var(--bp-gold); border-radius:10px; background:var(--bp-offwhite); padding:18px 22px; margin:1.6em 0 2.4em; }
.post-body .toc__title { font-family:var(--bp-head); text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--bp-purple); margin:0 0 .5em; font-size:.95rem; }
.post-body .toc__list { margin:0; padding-left:1.15rem; }
.post-body .toc__item { margin:.3em 0; line-height:1.35; }
.post-body .toc a { color:var(--bp-blue); text-decoration:none; border:none; }
.post-body .toc a:hover { text-decoration:underline; }

/* ===================== tags + author ===================== */
.post-tags-row { margin-top:38px; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.post-tags { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pt-label { font:700 12px/1 var(--font-body); color:var(--tx); }
.post-tag { background:#F1F4FA; color:var(--tx); font:600 12px/1 var(--font-body); padding:7px 11px; border-radius:999px; }
.post-back { color:var(--blue); font:700 14px/1 var(--font-body); text-decoration:none; }

.post-author { display:flex; gap:18px; align-items:center; margin-top:26px; background:var(--bp-palepurple); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.post-author-av { width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; flex:0 0 auto; background:#fff; }
.pa-name { font-family:var(--bp-head); font-weight:800; font-size:18px; color:var(--ink); margin-bottom:4px; }
.pa-bio { font:15px/1.6 var(--font-body); color:var(--tx); margin:0; }
.pa-bio a { color:var(--blue); font-weight:600; text-decoration:none; }

/* ===================== keep reading ===================== */
.post-related { background:#F5F8FD; border-top:1px solid var(--line); padding:56px 0 72px; margin-top:38px; }
.pr-title { font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--ink); margin:0 0 26px; text-align:center; }

/* ===================== category archive ===================== */
.cat-h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(32px,5vw,46px); color:var(--ink); margin:14px 0 10px; letter-spacing:-.01em; }
.cat-blurb { font:18px/1.6 var(--font-body); color:var(--tx); max-width:60ch; margin:0; }
.cat-empty { font:16px/1.6 var(--font-body); color:var(--tx); }
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.cat-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 6px 18px rgba(12,21,56,.05); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.cat-card-img { width:100%; height:auto; display:block; }
.freebie-cover { aspect-ratio:1 / 1; object-fit:cover; }
.cat-card-body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; }
.cat-pill { align-self:flex-start; background:rgba(37,99,235,.1); color:var(--blue); font:800 10px/1 var(--font-body); letter-spacing:.05em; text-transform:uppercase; padding:6px 10px; border-radius:999px; }
.cat-card-title { font-family:var(--font-display); font-weight:800; font-size:19px; line-height:1.18; color:var(--ink); margin:0; }
.cat-card-desc { font:14px/1.55 var(--font-body); color:var(--tx); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cat-card-date { font:12px/1 var(--font-body); color:#9aa4b8; margin-top:2px; }
@media (hover: hover) and (min-width: 900px) { .cat-card:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(12,21,56,.12); } }

/* blog index category chips */
.blog-cats { display:flex; gap:10px; flex-wrap:wrap; margin:0; }
.blog-cat-chip { font:700 13px/1 var(--font-body); color:var(--nav); background:#EEF1FB; border:1px solid var(--line); padding:10px 16px; border-radius:999px; text-decoration:none; transition:background .15s ease, color .15s ease; }
@media (hover: hover) and (min-width: 900px) { .blog-cat-chip:hover { background:var(--nav); color:#fff; } }

/* ===================== responsive ===================== */
@media (max-width: 980px) {
  .post-head-inner, .post-qa-wrap, .post-hero-wrap, .post-article { padding-inline:24px; }
}
@media (max-width: 900px) { .cat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px) {
  .post-body { font-size:16px; }
  .post-h1 { font-size:30px; }
  .post-body h2 { font-size:23px; }
  .post-author { flex-direction:column; text-align:center; }
  .cat-grid { grid-template-columns:1fr; }
  /* category chips: 2 centered columns instead of a left-aligned stack */
  .blog-cats-sec { padding-left:20px !important; padding-right:20px !important; }
  .blog-cats { display:grid; grid-template-columns:1fr 1fr; gap:9px; justify-items:stretch; }
  .blog-cat-chip { text-align:center; box-sizing:border-box; padding:11px 8px; font-size:12.5px; }
}