/*
 * blog-content.css: article body inside .blog-article.
 * Loaded on blog-post pages only, after blog-shell.css, via extra_css in the page YAML.
 * Scope: prose typography, lead paragraph, H2/H3/H4, callouts, tables, dl/dt/dd,
 *        ol/ul, blockquotes, TOC, section rhythm, verification stamp.
 *
 * Design source: /docs/blog-design-guidelines/02-content-layout.md
 * Tokens: --content-max and --content-rhythm are added. Everything else reuses
 *         main.css tokens and Agent 1's --shell-max.
 */

:root {
  --content-max: 68ch;
  --content-rhythm: 1.6rem;
}

/* ---------- 4.1 Body container + prose rhythm ------------------------- */

.blog-article {
  padding: 48px 0 24px;
  background: #ffffff;
}
.blog-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.72;
  color: rgba(15, 23, 42, 0.88);
  font-variation-settings: "opsz" 14;
  counter-reset: h2counter;
}
.blog-content > * + * {
  margin-top: var(--content-rhythm);
}
.blog-content p {
  margin: 0;
}
.blog-content strong {
  font-weight: 600;
  color: var(--color-ink);
}
.blog-content em {
  font-style: italic;
  color: rgba(15, 23, 42, 0.78);
}
/* Defensive hide of legacy in-body article-meta header (draft-v3 shape).
   Agent 1's .post-head owns the byline and title now. */
.blog-content > header.article-meta {
  display: none;
}

/* ---------- 4.2 Lead paragraph ---------------------------------------- */

.blog-content > p:first-of-type {
  font-size: 1.28rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.82);
  font-variation-settings: "opsz" 24;
  letter-spacing: -0.005em;
  margin-bottom: 2rem;
}
.blog-content > p:first-of-type::first-line {
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.01em;
}

/* ---------- 4.3 H2, H3, H4 -------------------------------------------- */

/* Article-section H2s are direct children of .blog-content. Scoping to `> h2`
   keeps inline blocks like a mid-article <section class="cta"> from adopting
   the section chrome (border-top, counter number, spacing) or incrementing
   the section counter. */
.blog-content > h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 48;
  margin: 3.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: 100px;
}
.blog-content > h2::before {
  content: counter(h2counter, decimal-leading-zero);
  counter-increment: h2counter;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-cobalt);
  margin-bottom: 0.4rem;
}
.blog-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 32;
  margin: 2.5rem 0 0.75rem;
  scroll-margin-top: 100px;
}
.blog-content h4 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cobalt) !important;
  margin: 2rem 0 0.5rem;
}

/* ---------- 4.4 Callouts + asides ------------------------------------- */

.blog-content .callout,
.blog-content .disambiguation {
  margin: 2.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-cream);
  border-left: 3px solid var(--color-cobalt);
  border-radius: 0 2px 2px 0;
}
.blog-content .callout > * + *,
.blog-content .disambiguation > * + * {
  margin-top: 0.75rem;
}
.blog-content .callout-label,
.blog-content .disambiguation > p:first-child > strong:first-child {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  margin: 0 0 0.5rem;
}
/* Eyebrow modifiers. Ochre is intentionally local to callouts. */
.blog-content .callout--warn {
  border-left-color: #b45309;
}
.blog-content .callout--warn .callout-label {
  color: #b45309;
}
.blog-content .callout--history {
  border-left-color: rgba(15, 23, 42, 0.55);
  background: #ffffff;
  border: 1px solid var(--color-rule);
  border-left-width: 3px;
}
.blog-content .callout--history .callout-label {
  color: rgba(15, 23, 42, 0.6);
}

/* ---------- 4.5 Tables ------------------------------------------------ */

.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  background: #ffffff;
}
.blog-content table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-cobalt);
  margin-bottom: 0;
}
.blog-content thead th {
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.75rem 0.9rem;
}
.blog-content tbody td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink);
  vertical-align: top;
}
.blog-content tbody tr:last-child td {
  border-bottom: none;
}
.blog-content tbody tr:nth-child(even) {
  background: var(--color-cream);
}

@media (max-width: 640px) {
  .blog-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    white-space: nowrap;
  }
  .blog-content table caption {
    white-space: normal;
  }
  .blog-content tbody td {
    white-space: normal;
    min-width: 12ch;
  }
}

/* ---------- 4.6 Definition lists ------------------------------------- */

.blog-content dl {
  margin: 2.5rem 0;
  padding: 0;
}
.blog-content dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-ink);
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
  margin-bottom: 0.4rem;
}
.blog-content dt:first-child {
  border-top: none;
  padding-top: 0;
}
.blog-content dd {
  margin: 0 0 1.25rem;
  padding-left: 0;
  font-family: var(--font-display);
  color: rgba(15, 23, 42, 0.85);
}
.blog-content dd:last-child {
  margin-bottom: 0;
}
.blog-content dd + dt {
  margin-top: 0.75rem;
}

/* FAQ variant: larger term, no prefix. The hairline top-border and the
   Source Serif weight step are enough to signal a question. A Q. prefix
   reads as English-locale and does not translate cleanly into Hungarian
   (K. would be a K.-és/K.-ról ambiguity). Peer-validated by igitems FAQ. */
.blog-content .faq {
  margin: 3rem 0;
}
.blog-content .faq > dl > dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  padding-top: 1.5rem;
}

/* Glossary variant of dl. Adds scroll-margin for per-term deep-links, no
   visual delta from the base dl recipe. Authors write <dt id="ekr">EKR</dt>
   so the term becomes a direct-linkable anchor. */
.blog-content dl.glossary dt {
  scroll-margin-top: 100px;
}

/* ---------- 4.7 Ordered and unordered lists -------------------------- */

.blog-content ol,
.blog-content ul {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}
.blog-content li {
  margin: 0.5rem 0;
  padding-left: 0.25rem;
}
.blog-content li::marker {
  color: var(--color-cobalt);
  font-weight: 600;
}
.blog-content ol > li::marker {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0.02em;
}
.blog-content ul > li::marker {
  content: "\00b7\00a0";
}
.blog-content li ul,
.blog-content li ol {
  margin: 0.5rem 0;
}
.blog-content li ul > li::marker {
  content: "\2013\00a0";
  color: rgba(15, 23, 42, 0.4);
}
.blog-content li li ul > li::marker {
  content: "\00b7\00a0";
  color: rgba(15, 23, 42, 0.4);
}

/* ---------- 4.8 Inline citation links -------------------------------- */

.blog-content a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-cobalt);
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s ease, color 0.15s ease;
}
.blog-content a:hover,
.blog-content a:focus-visible {
  color: var(--color-cobalt);
  text-decoration-thickness: 2px;
}
.blog-content a:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 4.9 Blockquotes ------------------------------------------ */

.blog-content blockquote {
  margin: 2.5rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 3px solid var(--color-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(15, 23, 42, 0.85);
}
.blog-content blockquote p {
  margin: 0 0 0.5rem;
}
.blog-content blockquote cite {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  margin-top: 0.5rem;
}

/* ---------- 4.10 Table of contents ---------------------------------- */

.post-toc {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--color-cream);
  border-top: 3px solid var(--color-cobalt);
  border-radius: 0 0 2px 2px;
}
/* .post-toc is a <details> element. On mobile it ships CLOSED so it does
   not eat the first screen. The reader taps the summary chevron to open.
   On desktop (>=1080px) js/blog-toc.js sets the `open` attribute via a
   matchMedia listener, so the <ol> renders whether or not the reader ever
   tapped the summary on a narrower viewport. The CSS override below is a
   belt-and-braces fallback for the pre-paint frame before the deferred
   script runs. Cross-browser tests showed that CSS alone could not defeat
   the UA's content-visibility hiding on Chromium and Firefox. */
.post-toc-label {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  cursor: pointer;
  list-style: none;
  display: block;
}
/* Firefox uses a native ::marker on <summary>. Chrome/Safari use the WebKit
   pseudo. Zero both out on mobile so we can render our own chevron affordance.
   The base rule above already sets list-style:none for the modern engines. */
.post-toc-label::-webkit-details-marker {
  display: none;
}
/* Custom chevron on mobile only. Rotates when the details are open, providing
   a visible toggle affordance without loading an SVG. */
.post-toc-label::after {
  content: "\25be";
  float: right;
  transition: transform 0.15s ease;
  color: rgba(15, 23, 42, 0.4);
}
.post-toc[open] .post-toc-label::after {
  transform: rotate(180deg);
}
/* Fallback: if <details> is unsupported (very old browsers), the ol is still
   visible because <ol> inside <details> renders normally in older UAs that
   don't understand the tag. The `open` attribute we emit is inert there. */
.post-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.post-toc li {
  counter-increment: toc;
  padding: 0.35rem 0;
  border-top: 1px solid var(--color-rule);
}
.post-toc li:first-child {
  border-top: none;
}
.post-toc a {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.35;
}
.post-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.4);
  letter-spacing: 0.1em;
}
.post-toc a:hover,
.post-toc a:focus-visible {
  color: var(--color-cobalt);
}
.post-toc a:hover::before {
  color: var(--color-cobalt);
}
.post-toc a:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Scroll-spy active state. Set by js/blog-toc.js when the section's H2 sits
   in the top ~30% of the viewport. Deliberately subtle — cobalt color shift
   plus a weight step, matches the editorial voice. */
.post-toc a.is-active {
  color: var(--color-cobalt);
  font-weight: 600;
}
.post-toc a.is-active::before {
  color: var(--color-cobalt);
}
/* Nested H3 items: one indent level. */
.post-toc ol ol {
  margin: 0.25rem 0 0 1.5rem;
  padding: 0;
  counter-reset: toc-sub;
}
.post-toc ol ol li {
  counter-increment: toc-sub;
  border-top: none;
  padding: 0.2rem 0;
}
.post-toc ol ol a {
  grid-template-columns: 1fr;
  font-size: 0.92rem;
  color: rgba(15, 23, 42, 0.75);
}
.post-toc ol ol a::before {
  content: none;
}

@media (min-width: 1080px) {
  /* Desktop TOC layout — symmetric grid so the article body stays centered.
     The content column's horizontal position is dictated by the outer 1fr
     tracks on each side. The TOC lives in a fixed-width track inside the
     LEFT gutter, and an equal-width phantom track on the RIGHT balances it
     so .blog-content never shifts. Result: the article body sits at the
     same page center whether or not a TOC is present, matching the H1
     above (which is centered in its own .post-head container).

     Track order: [ 1fr | TOC 220px | gap | content --content-max | gap | 220px | 1fr ]
     The right 220px + gap columns are empty by design (symmetry, not content).
     Track width tiers up at 1400px (260px) and 1800px (300px) — see the
     wider-viewport media queries below. */
  .blog-article.has-toc > .container {
    display: grid;
    grid-template-columns:
      minmax(1rem, 1fr)
      [toc-start] 220px [toc-end]
      minmax(1.5rem, 3rem)
      [content-start] minmax(0, var(--content-max)) [content-end]
      minmax(1.5rem, 3rem)
      220px
      minmax(1rem, 1fr);
    max-width: none;
    padding: 0;
  }
  .blog-article.has-toc > .container > .post-toc {
    grid-column: toc-start / toc-end;
    position: sticky;
    top: 100px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: transparent;
    border-top: none;
    padding: 0;
    margin: 0;
  }
  .blog-article.has-toc > .container > .blog-content {
    grid-column: content-start / content-end;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  /* Desktop: js/blog-toc.js flips the `open` attribute at load and on
     matchMedia change, which is the reliable cross-browser mechanism.
     These CSS rules stay as a fallback for the paint frame before the
     deferred script executes, and to neutralise the summary chevron and
     pointer interaction so the label reads as an inert section header. */
  .post-toc[class] > ol,
  .post-toc[class] > ul { display: block !important; }
  .post-toc[class] > summary { pointer-events: none; cursor: default; }
  .post-toc[class] > summary::after { content: none !important; }
  .blog-article.has-toc .post-toc-label {
    color: rgba(15, 23, 42, 0.55);
    margin-bottom: 1rem;
    cursor: default;
    pointer-events: none;
  }
  .blog-article.has-toc .post-toc li {
    border-top: none;
    padding: 0.4rem 0;
  }
}

/* ---------- 4.10a TOC track-width tiers (desktop only) -------------- */
/* At wider viewports the TOC needs more breathing room so long section
   titles do not wrap to three lines. Both the TOC track AND the phantom
   right-hand track bump together so .blog-content stays perfectly centered. */
@media (min-width: 1400px) {
  .blog-article.has-toc > .container {
    grid-template-columns:
      minmax(1rem, 1fr)
      [toc-start] 260px [toc-end]
      minmax(1.5rem, 3rem)
      [content-start] minmax(0, var(--content-max)) [content-end]
      minmax(1.5rem, 3rem)
      260px
      minmax(1rem, 1fr);
  }
}
@media (min-width: 1800px) {
  .blog-article.has-toc > .container {
    grid-template-columns:
      minmax(1rem, 1fr)
      [toc-start] 300px [toc-end]
      minmax(1.5rem, 3rem)
      [content-start] minmax(0, var(--content-max)) [content-end]
      minmax(1.5rem, 3rem)
      300px
      minmax(1rem, 1fr);
  }
}

/* ---------- 4.11 Section transitions (manual <hr> fallback) --------- */

.blog-content hr {
  border: none;
  height: 1px;
  background: var(--color-rule);
  margin: 3rem 0;
}

/* ---------- 4.12 Verification stamp --------------------------------- */

.post-verification {
  max-width: var(--content-max);
  margin: 3rem auto 0;
  padding: 1rem 0;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.6);
}
.post-verification p {
  margin: 0;
}
.post-verification-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  margin-right: 0.5rem;
}

/* ---------- 4.13 Mid-article CTA (service-cta reused) --------------- */

/* When a service-page CTA is inlined into the article body, break it out of
   the 68ch reading measure so the dark gradient band renders edge-to-edge
   like on service pages. rem margins keep the * + * rhythm intact around
   the CTA. */
.blog-content .cta {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}
/* Restore on-dark-gradient CTA styling that generic .blog-content prose rules
   would otherwise clobber. Earlier attempt used `color: inherit`, which fails
   because .blog-content itself sets a dark prose color — inheritance resolves
   back to that dark ink. Set the on-dark values explicitly at higher-than-prose
   specificity instead.

   Mid-article CTA heading uses <h3> (not <h2>) so the CTA does not enter the
   article-arc H2 outline. Font sizing is bumped up here to keep the visual
   presence of a service-page CTA h2 while preserving the correct heading tag. */
.blog-content .cta.service-cta .cta-content h3 {
  color: #fff;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.blog-content .cta.service-cta .cta-content p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto 1.5rem;
}
.blog-content .cta.service-cta .cta-buttons a {
  text-decoration: none;
}
.blog-content .cta.service-cta .cta-buttons .btn-primary {
  background: #fff;
  color: #2563eb;
}
.blog-content .cta.service-cta .cta-buttons .btn-outline {
  border-color: #fff;
  color: #fff;
}
.blog-content .cta.service-cta .cta-buttons .btn-primary:hover,
.blog-content .cta.service-cta .cta-buttons .btn-primary:focus-visible {
  color: #2563eb;
  text-decoration: none;
}
.blog-content .cta.service-cta .cta-buttons .btn-outline:hover,
.blog-content .cta.service-cta .cta-buttons .btn-outline:focus-visible {
  color: #fff;
  text-decoration: none;
}

/* Mid-article CTAs run tighter than service-page CTAs: less vertical padding
   keeps the section from dominating the reading rhythm around it while
   preserving the h2/p/buttons balance. */
.blog-content .cta.service-cta {
  padding: 56px 0;
}