/* ============================================================
   Blog Post (single) — port of Blog Post Template.dc.html.
   The design applied inline styles to every prose element; here the
   body comes from `the_content` (freeform), so those styles live as
   `.article-prose` descendant rules instead. Design px → rem for the
   fluid root (see assets/css/scale.css). The global header/footer are
   the theme's own (get_header/get_footer) — the design's Header/Footer
   are intentionally NOT ported.
   ============================================================ */

html { scroll-behavior: smooth; }

/* Default link reset (base.css only sets underline thickness/offset). */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* Responsive: stack the 2-col hero and the 3-col body; drop the side rails. */
@media (max-width: 860px) {
  .article-hero { grid-template-columns: 1fr !important; }
  .article-grid { grid-template-columns: 1fr !important; }
  .side-toc, .side-cta { display: none !important; }
}

/* Feature / inline photo placeholder (post has no image). */
.blog-photo-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(-45deg, rgba(15,23,42,0.022) 0 0.625rem, transparent 0.625rem 1.25rem),
    var(--n-50);
  color: var(--n-400);
}
.blog-photo-ph .material-symbols-rounded {
  font-size: 2.875rem; line-height: 1;
  font-variation-settings: 'wght' 300, 'opsz' 40;
}

/* TOC links + active-section indicator (scrollspy toggles .is-active in JS).
   Kept as a CSS class, NOT inline styles: WordPress core injects
   `:where([style*="border-color"]) { border-style: solid }` etc., which any inline
   `border-*`/transition string trips — forcing all four sides solid (stray boxes)
   and interfering with the left-border colour. A class sidesteps all of that. */
.blog-toc-link {
  padding: 0.5rem 0 0.5rem 1rem;
  margin-left: -0.0625rem;
  border: 0 solid transparent;
  border-left-width: 0.125rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--n-400);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.blog-toc-link:hover { color: var(--navy); }
.blog-toc-link.is-active {
  border-left-color: var(--cyan);
  font-weight: 600;
  color: var(--blue-action); /* fallback where background-clip:text is unsupported */
  background: linear-gradient(90deg, var(--blue-action) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Newsletter input — resting + the design's gradient-border focus state. */
.blog-news-input { transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out); }
.blog-news-input:focus {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(90deg, var(--blue-action) 0%, var(--cyan) 100%) border-box;
}

/* ----- Prose (the_content) — mirrors the design's per-element styles ----- */
.article-prose { max-width: var(--measure); }
.article-prose > *:first-child { margin-top: 0; }

.article-prose p { margin: 0 0 1.25rem; color: var(--ink); }

.article-prose h2 {
  font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-display);
  color: var(--navy);
  margin: 2.5rem 0 1rem;
  scroll-margin-top: 6rem; /* clear the sticky site header on anchor jumps */
}
.article-prose h3 {
  font: var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-display);
  color: var(--navy);
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 6rem;
}
.article-prose h2:first-child, .article-prose h3:first-child { margin-top: 0; }

.article-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
.article-prose a:hover { color: var(--link-hover); }

.article-prose ul, .article-prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; color: var(--ink); }
.article-prose li { margin: 0 0 0.5rem; }

.article-prose blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 0.1875rem solid var(--cyan);
  font: var(--fw-regular) var(--fs-h4)/1.4 var(--font-display);
  font-style: italic;
  color: var(--navy);
}

.article-prose figure { margin: 0 0 2rem; }
.article-prose img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.article-prose figcaption,
.article-prose .wp-caption-text {
  font-size: var(--fs-caption);
  color: var(--n-400);
  margin-top: 0.75rem;
  text-align: center;
}