/*
 * TASK-2157 (AP5). THIS FILE NO LONGER OWNS THE WHOLE BODY.
 *
 * The article page design (components/articles/articlePageCss.ts) now sets the
 * body measure, paragraph and heading type, list spacing and the .section /
 * .steps / .faq / .cta / .short-answer components. Those declarations have
 * been removed here so exactly one sheet owns each property instead of two
 * fighting on source order.
 *
 * What stays is everything the design is SILENT on, which is most of what a
 * real article actually contains. The mockup was one hand-written sample: it
 * has no table, no image, no figure, no blockquote, no h3 or h4, no <hr>, and
 * no key-takeaways panel. Live articles have all of them. Deleting these rules
 * because "the design replaces this file" would leave every CMS table, image
 * and pull-quote unstyled.
 *
 * =========================================================================
   article-body.css — typography for CMS-authored article bodies.
   Task-2157 (T8).

   This file is a CONTRACT, not just a stylesheet. The ops admin
   (ops.easyasset.com.au, the separate agentify-admin repo) loads this exact
   file into its editor and preview pane so "previews closely to the live
   site" is literally true rather than approximately true. Any change here
   changes what editors see. Keep it plain, unminified and dependency-free.

   Scope it by wrapping the article HTML in an element with .blog-content.

   Loaded on the live site from BlogDetailContent.tsx, AFTER
   /css/ea-style.min.css — which still carries the original
   `.blog-content ... { all: revert }` rules. Order is what lets these win at
   equal specificity, so this link must stay after that one.

   NOTE: /css/* is served `Cache-Control: public, max-age=14400` behind
   Cloudflare with no version query on any href. Editing this file needs a
   CDN purge or warm clients keep the old copy for up to 4 hours.
   ========================================================================= */

.blog-content {
  all: unset;
  display: block;
  width: 100%;
}

/* -------------------------------------------------------------------------
   The tag set.

   The rule this replaces reverted only h1/h2/h3/ul/ul li/p. Everything else
   the CMS can emit — h4-h6, ol, table, img, blockquote, figure, a, strong,
   em, code, hr — fell through to Tailwind preflight plus the Bootstrap 5
   bundled inside styles.css, which flattens headings and strips list
   markers. It was invisible only because the sampled articles happened not
   to use those tags. T15 adds table and image buttons to the ops editor, so
   they are about to start appearing.
   ------------------------------------------------------------------------- */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6,
.blog-content p,
.blog-content ul,
.blog-content ol,
.blog-content li,
.blog-content blockquote,
.blog-content table,
.blog-content thead,
.blog-content tbody,
.blog-content tr,
.blog-content th,
.blog-content td,
.blog-content figure,
.blog-content figcaption,
.blog-content img,
.blog-content a,
.blog-content strong,
.blog-content em,
.blog-content code,
.blog-content pre,
.blog-content hr {
  all: revert;
}

/* -------------------------------------------------------------------------
   Reading measure and rhythm.

   Was 15px/1.4 on a 960px column — roughly 150 characters per line, about
   double a comfortable measure. CNN and BBC sit at 16-19px over 640-740px.
   The cap is applied to the text blocks rather than to .blog-content itself
   because the mid-article quote form is injected as a CHILD of
   .blog-content at runtime, and capping the container would narrow the form
   with it. Tables and images stay full width deliberately.
   ------------------------------------------------------------------------- */
.blog-content {
  color: var(--text-color, #434343);
}

/* NO max-width cap, and no centring.
   A `ch` cap was tried and reverted. `ch` resolves against each element's OWN
   font-size, so an h2 at 26px got a far wider box than a p at 17px; once the
   blocks were centred with margin-inline:auto they started at different x and
   the body read as randomly indented. Headings sat flush left while
   paragraphs stepped ~150px inward.
   The blocks now fill the 960px column and all share one left edge, which is
   the alignment the article had originally. If the measure is ever tightened
   again, cap the CONTAINER in px — never the children in ch. */

.blog-content p {
  margin: 0 0 1.15em;
}

.blog-content h2 {
  margin: 2em 0 0.6em;
  font-weight: 700;
}

.blog-content h3 {
  margin: 1.6em 0 0.5em;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.blog-content h4 {
  margin: 1.4em 0 0.4em;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

/* The CMS wraps most headings in <strong>. Without this they render at an
   inherited-bold-on-bold weight that looks heavier than the h2/h3 scale. */
.blog-content h1 > strong,
.blog-content h2 > strong,
.blog-content h3 > strong,
.blog-content h4 > strong {
  font-weight: inherit;
}

.blog-content ul,
.blog-content ol {
  margin: 0 0 1.15em;
  padding-left: 1.5em;
}

.blog-content li {
  margin-bottom: 0.4em;
}

.blog-content li:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Links. Measured live, body links computed to #434343 / weight 700 / no
   underline — visually identical to bold text, so readers could not tell
   they were links at all.
   ------------------------------------------------------------------------- */
.blog-content a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(15, 110, 86, 0.45);
}

.blog-content a:hover {
  color: #0f6e56;
  text-decoration-color: #0f6e56;
}

/* -------------------------------------------------------------------------
   Media and tables.
   ------------------------------------------------------------------------- */
.blog-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em 0;
  border-radius: 8px;
}

.blog-content figure {
  margin: 1.5em 0;
}

.blog-content figcaption {
  margin-top: 0.5em;
  font-size: 13px;
  color: #8a8a8a;
}

/* Scrolling lives on the wrapper (see enhanceArticleHtml.ts), NOT on the
   table. Setting display:block + width:100% on the table itself made the
   block fill the column while the internal table box stayed content-width,
   so the border carried on past the last cell. */
.blog-table-wrap {
  overflow-x: auto;
  margin: 1.5em 0;
  max-width: 100%;
}

.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 15px;
}

.blog-content th,
.blog-content td {
  border: 1px solid #ececec;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.blog-content th {
  background: #f7f7f5;
  font-weight: 700;
}

.blog-content blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid #E3FDEE;
  color: #55554f;
}

.blog-content hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid #ececec;
}

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

.blog-content > *:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Key-takeaways panel (T17).

   Articles conventionally open with an H2 titled "Key takeaways:", which
   otherwise reads as ordinary body copy. The server tags that first heading
   with .blog-kt (see enhanceArticleHtml.ts); the list that follows is styled
   through the adjacent-sibling selector rather than by wrapping the two in a
   container, so the CMS HTML stays untouched.

   This is the element LLM answer engines are most likely to lift as the
   answer, so it earns visual separation.
   ------------------------------------------------------------------------- */
/* One panel element wrapping the heading and its content, so the block can
   never split apart no matter what the CMS put between them. */
.blog-kt-panel {
  background: #E3FDEE;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 0 0 1.8em;
}

.blog-content .blog-kt-panel h2.blog-kt {
  margin: 0 0 8px;
  padding: 0;
  background: none;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #0f6e56;
}

.blog-content .blog-kt-panel > ul,
.blog-content .blog-kt-panel > ol {
  margin: 0;
  padding-left: 22px;
}

.blog-content .blog-kt-panel > p {
  margin: 0 0 0.6em;
}

.blog-content .blog-kt-panel > *:last-child {
  margin-bottom: 0;
}

/* Empty paragraphs the CMS leaves between the heading and the list would
   otherwise open a gap inside the panel. */
.blog-content .blog-kt-panel > p:empty {
  display: none;
}

.blog-content .blog-kt-panel li {
  margin-bottom: 0.5em;
}

.blog-content .blog-kt-panel li:last-child {
  margin-bottom: 0;
}

/* Anchor targets should not hide under the fixed 80px nav when linked. */
.blog-content h2[id],
.blog-content h3[id] {
  scroll-margin-top: 96px;
}

/* -------------------------------------------------------------------------
   The article metadata line. `.blog-date` had NO rule anywhere, so the
   publish date rendered as an unstyled first line of body copy.
   ------------------------------------------------------------------------- */
.blog-date {
  font-size: 13px;
  color: #8a8a8a;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ececec;
}

.blog-date:empty {
  display: none;
}

@media (max-width: 767px) {
  .blog-content,
  .blog-content p {
    font-size: 16px;
  }

  .blog-content h2 {
    font-size: 22px;
  }

  .blog-content h3 {
    font-size: 18px;
  }
}