/* ============================================================
   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:      #475569;   /* slate-600 — body text                        */
  --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;
  margin: 1.8em 0 0.6em 0;
}
.ta-post h2 { font-size: var(--text-xl); }
.ta-post h3 { font-size: var(--text-lg); }
.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.5em 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 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;
}
.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; }

/* Mobile: wide tables scroll instead of breaking the column */
@media (max-width: 640px) {
  .ta-post .ta-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ============================================================
   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-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-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-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: 12px;
  margin: 0 0 14px 0;
}
.ta-post .ta-steps__num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  line-height: 28px;
  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 { 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;
}