/* ==========================================================================
   Budget My Reno — content pages (blog, article, privacy)
   The design canvas only covered the landing page, so these pages get the
   same vocabulary expressed here: the #F0F0FB card, the grid-lined page head,
   and prose typography on the same scale and palette as the landing sections.
   Loaded after landing.css, which supplies the shell, header and footer.
   ========================================================================== */

:root {
  --ink: #111827;
  --body: #4B5563;
  --muted: #6B7280;
  --accent: #4C4CBD;
  --line: #DDDDF5;
  --rule: #E5E7EB;
  --panel: #FFFFFF;
  --sans: -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Page head ────────────────────────────────────────────────────────────
   Mirrors the landing hero: grid lines, uppercase eyebrow, tight display h1.
   Replaces the old theme's dark navy breadcrumb banner.
   ------------------------------------------------------------------------ */
.page-head {
  padding: clamp(46px, 7vw, 84px) clamp(20px, 4.4vw, 56px) clamp(28px, 3.4vw, 44px);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eyebrow {
  font: 600 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-head h1 {
  margin: 0;
  max-width: 18em;
  font: 600 clamp(30px, 4.6vw, 54px)/1.06 var(--sans);
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.page-head .deck {
  margin: 0;
  max-width: 40em;
  font: 400 clamp(16px, 1.6vw, 18px)/1.6 var(--sans);
  color: var(--body);
  text-wrap: pretty;
}

/* Breadcrumb trail, replacing the theme's centred version on the dark band. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 500 13px/1 var(--sans);
  color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); opacity: 1; }
.crumbs [aria-current] { color: var(--ink); }
.crumbs .sep { color: #9CA3AF; }

/* ── Page body ──────────────────────────────────────────────────────────── */
.page-body {
  padding: clamp(34px, 4.6vw, 56px) clamp(20px, 4.4vw, 56px) clamp(52px, 7vw, 84px);
  border-top: 1px solid var(--line);
  background: var(--panel);
}

/* ── Prose ────────────────────────────────────────────────────────────────
   Measure capped for readability rather than running the full card width.
   ------------------------------------------------------------------------ */
.prose {
  max-width: 68ch;
  font: 400 clamp(15.5px, 1.15vw, 17px)/1.7 var(--sans);
  color: var(--body);
}

/* The long-form post carries wide components — a six-column comparison table,
   side-by-side pros/cons, badge rows — that a 68ch measure crushes. Give it the
   column width the article was authored against and let its own components
   govern from there. */
.prose.blog-article { max-width: 940px; }

.prose > *:first-child { margin-top: 0; }

.prose h2 {
  margin: 2.2em 0 .5em;
  font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--sans);
  letter-spacing: -.01em;
  color: var(--ink);
}

.prose h3 {
  margin: 1.8em 0 .4em;
  font: 600 clamp(17px, 1.8vw, 20px)/1.35 var(--sans);
  color: var(--ink);
}

.prose p { margin: 0 0 1.1em; }

.prose ul,
.prose ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.prose li { margin: 0 0 .45em; }
.prose li::marker { color: var(--accent); }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose strong { color: var(--ink); font-weight: 600; }

.prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--rule); }

.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent);
  color: var(--body);
}

/* Wide content must scroll inside itself, never widen the page. */
.prose table { width: 100%; border-collapse: collapse; font-size: .95em; }
.prose .scroll-x { overflow-x: auto; margin: 1.4em 0; }

/* ── Post list ──────────────────────────────────────────────────────────── */
/* Capped rather than 1fr so a single post reads as a deliberate card instead of
   one narrow tile stranded in an empty row; still flows to 2-3 across as posts
   are added. */
.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 520px));
  gap: 28px;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  background: #F9FAFB;
  border: 1px solid var(--line);
}

.post-card .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font: 500 12px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.post-card h2 {
  margin: 0;
  font: 600 clamp(19px, 1.9vw, 23px)/1.3 var(--sans);
  color: var(--ink);
}
.post-card h2 a:hover { color: var(--accent); opacity: 1; }

.post-card p { margin: 0; font: 400 15px/1.65 var(--sans); color: var(--body); }

.post-card .read-more {
  margin-top: auto;
  padding-top: 6px;
  font: 600 14px/1 var(--sans);
  color: var(--accent);
}

/* ── Article ──────────────────────────────────────────────────────────────
   The long-form post keeps its own component styles (app entries, badges,
   pros/cons, summary table) — those are defined in the page. This is only the
   frame around them.
   ------------------------------------------------------------------------ */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font: 500 13px/1 var(--sans);
  color: var(--muted);
}

.article-deck {
  margin: 0;
  font: italic 400 clamp(17px, 1.7vw, 20px)/1.55 var(--sans);
  color: var(--body);
}

/* App names are headings that happen to link out — the prose link treatment
   (accent colour + underline) would turn every entry title purple. Inline
   links in the running text keep it. */
.prose .app-name a {
  color: inherit;
  text-decoration: none;
}
.prose .app-name a:hover {
  color: var(--accent);
  text-decoration: underline;
  opacity: 1;
}

/* ── Help centre ──────────────────────────────────────────────────────────
   Native <details> rather than a JS accordion: no script, and the answers
   stay in the DOM for search and answer engines even while collapsed.
   ------------------------------------------------------------------------ */
.topic-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
.topic-toc-label {
  font: 600 11px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.topic-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topic-toc a {
  font: 500 14px/1.4 var(--sans);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.topic {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}
.topic:last-of-type { border-bottom: 1px solid var(--line); }

.topic > summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 44px 22px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.topic > summary::-webkit-details-marker { display: none; }

.topic > summary h2 {
  margin: 0;
  font: 600 clamp(18px, 1.9vw, 22px)/1.3 var(--sans);
  color: var(--ink);
}
.topic-blurb { font: 400 15px/1.5 var(--sans); color: var(--body); }

/* Chevron, rotated when open. */
.topic > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.topic[open] > summary::after { transform: rotate(-135deg); }
.topic > summary:hover h2 { color: var(--accent); }
.topic > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.topic-body {
  padding: 0 0 30px;
  max-width: 68ch;
  font: 400 clamp(15.5px, 1.15vw, 17px)/1.7 var(--sans);
  color: var(--body);
}
.topic-body p { margin: 0 0 1em; }

.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 26px;
}
.shot { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Same device frame as the landing gallery, at the same 2x density. */
.shot-phone {
  width: 232px;
  padding: 9px;
  background: var(--ink);
  border-radius: 38px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, .18);
}
.shot-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}
.shot figcaption {
  font: 500 13px/1.4 var(--sans);
  color: var(--muted);
  text-align: center;
  max-width: 232px;
}

.help-cta {
  margin-top: 48px;
  padding: clamp(28px, 3.4vw, 40px);
  background: #F0F0FB;
  border-left: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-cta h2 {
  margin: 0;
  font: 600 clamp(20px, 2.2vw, 26px)/1.25 var(--sans);
  color: var(--ink);
}
.help-cta p { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--body); }
.help-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

.btn-primary,
.btn-ghost {
  padding: 15px 26px;
  font: 600 15px/1 var(--sans);
}
.btn-primary { background: var(--accent); color: #FFFFFF; border-radius: 2px; }
.btn-ghost { border: 1px solid var(--ink); color: var(--ink); }

@media (max-width: 700px) {
  .page-body { padding-left: clamp(18px, 5vw, 24px); padding-right: clamp(18px, 5vw, 24px); }
  .post-list { grid-template-columns: 1fr; }
  .shots { justify-content: center; gap: 30px; }
}