/* ============================================================================
   The RoundUp Brief — blog surface
   ----------------------------------------------------------------------------
   Layered ON TOP of _kb.css (load that first): the blog branches off the Help
   Center, so it shares its top bar, footer, neutrals, type scale and its
   Friendship Bracelet pieces (the cream hero card, pinned sheets, beads). What
   this file adds is editorial: a centred reading column, category colours,
   stat callouts, a source list, and post cards.

   Pages here are generated by _blog_gen.py — edit bodies in _blog_src/, then
   re-run it. Nothing in dist/ should be hand-edited.
   ========================================================================= */

/* Category accents. Ink colours are the AA-contrast text shade of each brand
   accent; the wash is the tinted background behind a pill or callout. */
.cat-today    { --cat: var(--yellow);   --cat-ink: #7A5200; --cat-wash: #FFF6E0; }
.cat-roundup  { --cat: var(--lavender); --cat-ink: #5B4A7A; --cat-wash: #F4F0FA; }
.cat-oregon   { --cat: #5FBDBD;         --cat-ink: #1D6464; --cat-wash: #E9F7F7; }

/* The blog keeps two top links on phones (Help Center + Contact) where the Help
   Center keeps one, so drop the section label before the bar overflows. */
@media (max-width: 480px) {
  .kb-top .brand .kb-label { display: none; }
}

.cat-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cat-ink); background: var(--cat-wash);
  border: 1px solid var(--cat); padding: 3px 11px 3px 8px; border-radius: 999px;
}
.cat-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: none; }

/* ---------- Index hero: the cream hero card, inside the page's width ---------- */
.blog-hero .inner.bk-hero {
  max-width: none; margin: 32px max(32px, calc((100% - var(--maxw)) / 2 + 32px)) 0; padding: 0;
}
@media (max-width: 860px) { .blog-hero .inner.bk-hero { margin: 20px 16px 0; } }
.blog-hero .eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bk-hero-sub); margin: 0 0 6px;
}
.blog-hero h1 {
  font-size: 44px; line-height: 1.08; letter-spacing: -.025em; font-weight: 600;
  margin: 0 0 8px; max-width: 720px;
}
@media (max-width: 860px) { .blog-hero h1 { font-size: 32px; } }
.blog-hero .lede { font-size: 17.5px; color: var(--bk-hero-sub); margin: 0; max-width: 640px; }

/* Category filter. Buttons, not links: filtering is in-page and every post is
   still in the markup, so a reader with JS off simply sees them all. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.filters button {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--kb-muted); background: var(--kb-card); border: 1.5px solid var(--kb-line);
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.filters button:hover { border-color: var(--ink); color: var(--kb-text); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters button:focus-visible { outline: 3px solid var(--paper-primary); outline-offset: 2px; }

/* ---------- Index body ---------- */
.blog-main { max-width: var(--maxw); margin: 0 auto; padding: 36px 32px 40px; }
@media (max-width: 860px) { .blog-main { padding: 28px 16px 24px; } }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1040px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .post-grid { grid-template-columns: minmax(0, 1fr); } }

/* Post cards: sheets pinned to the wall. */
.post-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border: 1px solid var(--kb-line); border-radius: 16px;
  background: var(--kb-card); color: inherit; position: relative;
  box-shadow: 3px 3px 0 var(--bk-pin);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.post-card:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: var(--cat); box-shadow: 5px 5px 0 var(--bk-pin);
}
.post-card h2 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; margin: 4px 0 0; color: var(--kb-text); }
.post-card .ex { font-size: 14.5px; color: var(--kb-muted); margin: 0; flex: 1; }
.post-card .when { font-size: 13px; color: var(--kb-faint); margin: 4px 0 0; }

/* The newest post leads, full width, with room for its lede. */
.post-card.lead { grid-column: 1 / -1; padding: 34px 36px; }
.post-card.lead h2 { font-size: 30px; line-height: 1.18; letter-spacing: -.02em; max-width: 820px; }
.post-card.lead .ex { font-size: 16.5px; max-width: 760px; }
@media (max-width: 640px) {
  .post-card.lead { padding: 26px 24px; }
  .post-card.lead h2 { font-size: 23px; }
}
.post-card[hidden] { display: none; }

/* ---------- Post page ---------- */
.post-wrap { max-width: 760px; margin: 0 auto; padding: 44px 32px 40px; }
@media (max-width: 860px) { .post-wrap { padding: 30px 20px 24px; } }

.post-head { margin: 0 0 34px; padding-bottom: 26px; border-bottom: 1px solid var(--kb-line); }
.post-head h1 {
  font-size: 40px; line-height: 1.14; letter-spacing: -.024em; font-weight: 600; margin: 14px 0 14px;
  text-shadow: 2px 2px 0 var(--bk-hero-shadow); text-wrap: balance;
}
@media (max-width: 860px) { .post-head h1 { font-size: 29px; } }
.post-head .lede { font-size: 19px; line-height: 1.55; color: var(--kb-muted); margin: 0 0 16px; }
.post-head .byline { font-size: 13.5px; color: var(--kb-faint); margin: 0; }

.post { font-size: 17px; line-height: 1.72; overflow-wrap: break-word; }
.post h2 { font-size: 24px; font-weight: 600; letter-spacing: -.014em; margin: 46px 0 14px; scroll-margin-top: 90px; }
.post h3 { font-size: 18px; font-weight: 600; margin: 30px 0 10px; }
.post p { margin: 0 0 18px; }
.post ul, .post ol { margin: 0 0 18px; padding-left: 22px; }
.post li { margin-bottom: 9px; }
.post strong { font-weight: 600; }
.post .note { font-size: 15.5px; line-height: 1.65; }
.post table { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: 15px; }
.post th, .post td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--kb-line); vertical-align: top; }
.post th {
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kb-muted);
}
.post .tbl-scroll { margin: 0 0 8px; }
.post .tbl-cap { font-size: 13px; color: var(--kb-faint); margin: 0 0 26px; }

/* Stat row — the numbers a post hangs on, readable at a glance. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 8px 0 28px; }
.stat {
  border: 1px solid var(--kb-line); border-radius: var(--radius); background: var(--kb-card);
  padding: 18px 18px 16px; box-shadow: 3px 3px 0 var(--bk-pin);
}
.stat .n { display: block; font-size: 32px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.stat .l { display: block; font-size: 13.5px; line-height: 1.45; color: var(--kb-muted); margin-top: 8px; }
.stat .s { display: block; font-size: 11.5px; color: var(--kb-faint); margin-top: 8px; }

/* Takeaways box at the end of a post: what to actually do on Monday. */
.takeaways {
  border: 1px solid var(--cat); background: var(--cat-wash); border-radius: 16px;
  padding: 22px 26px; margin: 36px 0 0; box-shadow: 3px 3px 0 var(--bk-pin);
}
.takeaways h2 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cat-ink); margin: 0 0 12px; }
.takeaways ul { margin: 0; }
.takeaways li:last-child { margin-bottom: 0; }

/* Sources: every factual claim in a "Childcare today" post points here. */
.sources { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--kb-line); }
.sources h2 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kb-faint); margin: 0 0 12px; }
.sources ol { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--kb-muted); }
.sources li { margin-bottom: 7px; }
.sources a { word-break: break-word; }
.sources .reviewed { font-size: 12.5px; color: var(--kb-faint); margin: 14px 0 0; }

/* Cross-link into the Help Center from app posts. */
.help-links { margin: 36px 0 0; }
.help-links h2 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kb-faint); margin: 0 0 12px; }
.help-links .art-list { margin: 0; }

/* Subscribe box — same Lambda-backed form as the coming-soon page. */
.subscribe {
  border: 1px solid var(--kb-line); border-radius: 16px; background: var(--kb-card);
  padding: 26px 28px; margin: 48px 0 0; box-shadow: 3px 3px 0 var(--bk-pin);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center;
}
@media (max-width: 760px) { .subscribe { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.subscribe h2 { font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.subscribe p { margin: 0; color: var(--kb-muted); font-size: 14.5px; }
.subscribe form { display: flex; gap: 8px; flex-wrap: wrap; }
.subscribe input {
  flex: 1 1 200px; min-width: 0; height: 46px; padding: 0 16px;
  border: 1.5px solid #cdbba2; border-radius: 999px; background: var(--paper-sheet);
  font-family: inherit; font-size: 16px; color: var(--kb-text);
}
.subscribe input:focus { outline: none; border-color: var(--paper-primary); }
.subscribe input:focus-visible { outline: 3px solid color-mix(in srgb, var(--paper-primary) 35%, transparent); outline-offset: 1px; }
.subscribe button {
  height: 46px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bk-cta); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
}
.subscribe button:hover { background: var(--bk-cta-hover); }
.subscribe button:disabled { opacity: .6; cursor: default; }
.subscribe .micro { font-size: 12.5px; color: var(--kb-faint); margin: 8px 0 0; }
.subscribe .newsletter-note { margin: 8px 0 0 !important; }

/* More from the Brief */
.more { margin: 48px 0 0; }
.more .sec-h { margin-bottom: 14px; }
.more .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .more .post-grid { grid-template-columns: minmax(0, 1fr); } }