/* ============================================================
   Test Academy — blog article body component system
   Scoped under .ta-post so nothing leaks into site chrome.

   Hybrid blend: the ta-* component STRUCTURE + the cream/navy/blue
   table & callout accents from the reference design, rendered with
   the REAL site fonts (Lora display serif, Inter body, Space Grotesk
   ui) and the site blue palette + fluid --text-* tokens.

   The skill emits the body WITHOUT the wrapper; the front end adds
   one <div class="ta-post"> around {{ post.body|safe }}.
   ============================================================ */

.ta-post {
  /* Site-native palette (blends the reference accents with brand blue) */
  --ta-blue:     #1d4ed8;   /* blue-700  — links, accents, badges          */
  --ta-blue-700: #1d4ed8;
  --ta-navy:     #172554;   /* blue-950  — table header, headings           */
  --ta-ink:      #1e293b;   /* slate-800 — body text (near-black, readable)  */
  --ta-ink-soft: #64748b;   /* slate-500 — captions/labels                  */
  --ta-cream:    #faf7f1;   /* warm zebra fill                              */
  --ta-cream-2:  #f5f1e8;
  --ta-white:    #ffffff;
  --ta-hairline: #e2e8f0;   /* slate-200 — borders                          */
  --ta-rowlabel: #eaf4fb;   /* blue-tinted leading column                   */
  --ta-green:    #16a34a;   /* tip accent                                   */
  --ta-amber:    #d97706;   /* warning accent                               */

  --ta-serif: 'Lora', Georgia, serif;
  --ta-sans:  'Inter', system-ui, sans-serif;
  --ta-ui:    'Space Grotesk', 'Inter', sans-serif;

  color: var(--ta-ink);
  font-family: var(--ta-sans);
  font-size: var(--text-base);
  line-height: 1.75;
}

/* ============================================================
   Base prose (bare elements — ported from the old .article-body)
   ============================================================ */
.ta-post h1,
.ta-post h2,
.ta-post h3 {
  font-family: var(--ta-serif);
  font-style: italic;
  color: var(--ta-navy);
  line-height: 1.2;
}
/* Clear, non-overlapping size ladder: h1 > h2 > h3 > h4 > body.
   Top margins scale with rank so bigger headings get more breathing room
   above them — reinforcing the hierarchy through spacing as well as size. */
.ta-post h1 { font-size: var(--text-2xl); margin: 1.6em 0 0.5em 0; }
.ta-post h2 { font-size: var(--text-xl);  margin: 1.8em 0 0.6em 0; }
.ta-post h3 { font-size: var(--text-lg);  margin: 1.6em 0 0.5em 0; }
.ta-post h4 {
  font-family: var(--ta-serif);
  color: var(--ta-navy);
  font-size: var(--text-base);
  font-weight: 600;
  margin: 1.4em 0 0.4em 0;
}
/* First heading of the article shouldn't push a big gap above itself. */
.ta-post > :first-child { margin-top: 0; }

.ta-post p {
  color: var(--ta-ink);
  font-size: var(--text-base);
  line-height: 1.75;
  margin: 1.1em 0;
}

.ta-post ul,
.ta-post ol {
  color: var(--ta-ink);
  font-size: var(--text-base);
  line-height: 1.75;
  margin: 1.1em 0;
  padding-left: 1.5em;
}
.ta-post li { margin: 0.4em 0; }
.ta-post ul { list-style-type: disc; }
.ta-post ol { list-style-type: decimal; }

.ta-post a {
  color: var(--ta-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.ta-post a:hover { color: #1e3a8a; }
.ta-post a.no-underline { text-decoration: none; }

.ta-post strong { color: var(--ta-navy); font-weight: 700; }

.ta-post img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5em auto;
  display: block;
}

.ta-post blockquote {
  border-left: 4px solid #bfdbfe;
  padding-left: 1.2em;
  margin: 1.5em 0;
  font-style: italic;
  color: var(--ta-ink-soft);
}

/* Bare tables (legacy / non-component) get a sensible base; .ta-table
   overrides below with the full branded treatment. */
.ta-post table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-family: var(--ta-sans);
  font-size: var(--text-sm);
}
.ta-post th,
.ta-post td {
  padding: 0.6em 1em;
  border: 1px solid var(--ta-hairline);
  text-align: left;
  vertical-align: top;
}
.ta-post th { background: #f8fafc; font-weight: 600; color: #334155; }

/* ============================================================
   ta-table  (data_table + comparison_table)
   ============================================================ */
.ta-post .ta-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-family: var(--ta-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  border: 1px solid var(--ta-hairline);
  border-radius: 12px;
  overflow: hidden;            /* clip rounded corners */
}
.ta-post .ta-table__caption {
  caption-side: top;
  text-align: left;
  font-family: var(--ta-serif);
  font-style: italic;
  color: var(--ta-navy);
  font-size: var(--text-lg);
  font-weight: 600;
  padding: 0 0 0.6rem 0;
}
/* When that title is emitted as a <figcaption> it lands BELOW the table and
   caption-side has no effect — it then reads like a section heading. Render it
   as a small, muted, centred caption so the heading hierarchy stays intact. */
.ta-post figcaption.ta-table__caption {
  caption-side: unset;
  font-family: var(--ta-sans);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--ta-ink-soft);
  text-align: center;
  padding: 0.7rem 0 0 0;
}
.ta-post .ta-table thead th {
  background: var(--ta-navy);
  color: var(--ta-white);
  font-weight: 700;
  text-align: left;
  border-bottom: 0;
}
.ta-post .ta-table th,
.ta-post .ta-table td {
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--ta-hairline);
  vertical-align: top;
}
/* Leading row-label column (the <th scope="row">) */
.ta-post .ta-table tbody th[scope="row"] {
  background: var(--ta-rowlabel);
  color: var(--ta-navy);
  font-weight: 700;
  text-align: left;
}
/* Alternating cream / white body rows (td only, so the row-label keeps tint) */
.ta-post .ta-table tbody tr:nth-child(even) td { background: var(--ta-cream); }
.ta-post .ta-table tbody tr:last-child th,
.ta-post .ta-table tbody tr:last-child td { border-bottom: 0; }

/* Tables: JS wraps every table in .ta-table-scroll so wide tables swipe
   horizontally instead of expanding the page. The wrapper scrolls; the table
   keeps its layout (min-width on small screens forces the swipe). */
.ta-post .ta-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;               /* unambiguously a horizontal scroller (helps iOS) */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* keep the swipe in the table, not page back-nav */
  max-width: 100%;
  margin: 1.6rem 0;
}
.ta-post .ta-table-scroll > table { margin: 0; }
@media (max-width: 700px) {
  .ta-post .ta-table-scroll > table { min-width: 540px; }
}

/* ============================================================
   ta-keyfacts  (key_facts)
   ============================================================ */
.ta-post .ta-keyfacts {
  margin: 1.6rem 0;
  padding: 20px 24px;
  background: var(--ta-cream);
  border: 1px solid var(--ta-hairline);
  border-left: 6px solid var(--ta-blue);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}
.ta-post .ta-keyfacts__title {
  font-family: var(--ta-serif);
  color: var(--ta-navy);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.6rem 0;
}
.ta-post .ta-keyfacts__list { margin: 0; padding: 0 0 0 1.2rem; list-style: disc; }
.ta-post .ta-keyfacts__item {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ta-ink);
  margin: 0 0 0.45rem 0;
}
.ta-post .ta-keyfacts__item:last-child { margin-bottom: 0; }

/* ============================================================
   ta-callout  (tip / note / warning)
   ============================================================ */
.ta-post .ta-callout {
  margin: 1.6rem 0;
  padding: 16px 20px;
  background: #eef6fc;
  border: 1px solid var(--ta-hairline);
  border-left: 6px solid var(--ta-blue);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}
.ta-post .ta-callout--tip     { background: #f0fdf4; border-left-color: var(--ta-green); }
.ta-post .ta-callout--note    { background: #eff6ff; border-left-color: var(--ta-blue); }
.ta-post .ta-callout--warning { background: #fffbeb; border-left-color: var(--ta-amber); }
.ta-post .ta-callout__title {
  font-family: var(--ta-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ta-navy);
  margin: 0 0 0.35rem 0;
}
.ta-post .ta-callout__body {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ta-ink);
}
.ta-post .ta-callout__body :last-child { margin-bottom: 0; }
.ta-post .ta-callout__body :first-child { margin-top: 0; }

/* ============================================================
   ta-stats / ta-stat  (stat_cards)
   ============================================================ */
.ta-post .ta-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.6rem 0;
}
.ta-post .ta-stat {
  flex: 1 1 150px;
  min-width: 150px;
  background: var(--ta-white);
  border: 1px solid var(--ta-hairline);
  border-top: 4px solid var(--ta-blue);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  padding: 18px 16px;
  text-align: center;
}
.ta-post .ta-stat__num {
  display: block;
  font-family: var(--ta-serif);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: 1.1;
  font-weight: 700;
  color: var(--ta-blue);
  margin-bottom: 0.25rem;
}
.ta-post .ta-stat__label {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ta-ink-soft);
}

/* ============================================================
   ta-steps  (steps)
   ============================================================ */
.ta-post .ta-steps { margin: 1.6rem 0; padding: 0; list-style: none; }
.ta-post .ta-steps__item {
  display: flex;
  gap: 14px;
  margin: 0 0 1.1em 0;
}
/* The generator sometimes wraps the number in its own <p>; neutralise that
   wrapper so it stays a tight flex cell rather than a full-width paragraph. */
.ta-post .ta-steps__item > p {
  margin: 0;
  flex: 0 0 auto;
}
/* inline-flex (not the default inline) so width/height/border-radius apply
   and the digit centres — works whether the span is a direct flex child or
   nested inside the wrapper <p> above. */
.ta-post .ta-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 0.15em;          /* optically align the circle with the first text line */
  text-align: center;
  background: var(--ta-blue);
  color: var(--ta-white);
  font-family: var(--ta-ui);
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
}
.ta-post .ta-steps__body > :first-child { margin-top: 0; }
.ta-post .ta-steps__body { flex: 1 1 auto; }
.ta-post .ta-steps__body p { margin: 0 0 0.2rem 0; line-height: 1.55; font-size: var(--text-sm); }
.ta-post .ta-steps__body p strong { color: var(--ta-navy); }

/* ============================================================
   ta-faq  (native <details>/<summary> accordions, no JS)
   ============================================================ */
.ta-post .ta-faq { margin: 1.6rem 0; }
.ta-post .ta-faq__item {
  margin: 0 0 12px 0;
  background: var(--ta-white);
  border: 1px solid var(--ta-hairline);
  border-radius: 14px;
  overflow: hidden;
}
.ta-post .ta-faq__q {
  font-family: var(--ta-serif);
  color: var(--ta-navy);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.4;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 44px;
}
.ta-post .ta-faq__q::-webkit-details-marker { display: none; }
.ta-post .ta-faq__q::after {            /* closed = "+" */
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ta-blue);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.ta-post .ta-faq__item[open] .ta-faq__q::after { content: "\2212"; } /* open = minus */
.ta-post .ta-faq__a {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ta-ink);
  padding: 0 18px 16px 18px;
}
.ta-post .ta-faq__a :last-child { margin-bottom: 0; }

/* ============================================================
   ta-figure  (svg_to_img diagrams arriving as <img> data-URI)
   ============================================================ */
.ta-post .ta-figure { margin: 1.25rem auto; text-align: center; }
.ta-post .ta-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 0 auto;
}
.ta-post .ta-figure figcaption {
  font-family: var(--ta-sans);
  font-size: var(--text-xs);
  color: var(--ta-ink-soft);
  margin-top: 0.5rem;
}

/* Embedded widget iframes */
.ta-post iframe { width: 100%; border: 0; border-radius: 12px; margin: 1.5rem 0; display: block; }