/* ==========================================================================
   AcmaCorp Blog / Article styles
   --------------------------------------------------------------------------
   Long-form reading layer for single posts, built on the design-system tokens.
   Load order: after responsive.css.

   Measured baseline before this file: 84 chars/line, 1.56 line-height, 15px
   paragraph spacing, h2 same colour as body with no top margin, no TOC, bare
   "By author". See /docs/blog-changes.md.
   ========================================================================== */

/* ---------------------------------------------------------------- HEAD ---- */

.insights-details .acma-post-eyebrow {
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-medium, 500);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  margin: 0 0 var(--ds-space-3, 12px);
}
.insights-details .acma-post-eyebrow a { color: var(--ds-primary, #B65002); text-decoration: none; }
.insights-details .acma-post-eyebrow a:hover { color: var(--ds-primary-hover, #974302); }

.insights-details .entry-title {
  color: var(--ds-ink, #001427);
  line-height: var(--ds-leading-tight, 1.15);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  margin: 0 0 var(--ds-space-4, 16px);
  text-wrap: balance;
}

.insights-details .acma-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  font-size: var(--ds-text-sm, 1rem);
  color: var(--ds-text-muted, #5F5A54);
}
.insights-details .acma-post-meta__author { font-weight: var(--ds-weight-medium, 500); color: var(--ds-text, #28282B); }
/* A border token was carrying text: the separator measured 1.62:1. */
.insights-details .acma-post-meta__sep { color: var(--ds-text-muted, #5F5A54); }

/* ------------------------------------------------------- READING MEASURE -- */
/* The theme sets .post-large-content width with a column calc() at (0,4,0)
   specificity. Cap the reading measure without fighting that — the body copy
   caps at the measure while the column stays wider for media.

   This used to hardcode 68ch, which resolved to 896px in Plus Jakarta Sans and
   so never bound against the 817px column: articles rendered at 96 characters
   a line, well past the 65–75 the system asks for. --ds-measure carries the
   calibrated value now; see design-system.css for why it reads 45ch. */
.insights-details .insights-details-body .post-large-content > p,
.insights-details .insights-details-body .post-large-content > ul,
.insights-details .insights-details-body .post-large-content > ol,
.insights-details .insights-details-body .post-large-content > h2,
.insights-details .insights-details-body .post-large-content > h3,
.insights-details .insights-details-body .post-large-content > h4,
.insights-details .insights-details-body .post-large-content > blockquote {
  max-width: var(--ds-measure, calc(45 * var(--ds-ch, 0.732em)));
}

/* ------------------------------------------------------------ BODY TYPE -- */

.insights-details .post-large-content {
  font-size: var(--ds-text-base, 1.125rem);
  line-height: var(--ds-leading-relaxed, 1.75);   /* was 1.56 */
  color: var(--ds-text, #28282B);
}
.insights-details .post-large-content p {
  margin: 0 0 var(--ds-space-5, 24px);             /* was 15px */
  line-height: var(--ds-leading-relaxed, 1.75);
}
.insights-details .post-large-content > *:first-child { margin-top: 0; }

/* Headings: ink colour, generous space above, tight leading, so sections read
   as sections. Previously 36px/60px, body colour, no top margin. */
.insights-details .post-large-content h2 {
  font-size: var(--ds-display-4);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  margin: var(--ds-space-8, 48px) 0 var(--ds-space-4, 16px);
  scroll-margin-top: 96px;                          /* for TOC jumps under a sticky header */
}
/* h3 was set to --ds-display-4, the same token as h2, so a sub-heading was
   pixel-for-pixel its own section heading at 1440: both 32px/41.6/700, no
   step at all. It went unnoticed while the case studies wrote their
   sub-sections as <h4> and skipped h3 entirely; normalising those to h3
   (inc/blog-enhancements.php) put the two side by side and the flatness
   showed. Display-5 is the next stop on the same ramp -- 24px at 1440, 20 at
   375 -- which keeps h3 clearly above the 18px body and clearly under h2. */
.insights-details .post-large-content h3 {
  font-size: var(--ds-display-5);
  line-height: var(--ds-leading-snug);
  color: var(--ds-ink, #001427);
  margin: var(--ds-space-7, 40px) 0 var(--ds-space-3, 12px);
  scroll-margin-top: 96px;
}
.insights-details .post-large-content h4 {
  /* Down one with h3, so the four levels keep four distinct sizes. */
  font-size: var(--ds-display-6);
  color: var(--ds-ink, #001427);
  margin: var(--ds-space-6, 32px) 0 var(--ds-space-3, 12px);
}

.insights-details .post-large-content a:not([class]) {
  color: var(--ds-secondary, #0450BD);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.insights-details .post-large-content a:not([class]):hover { color: var(--ds-secondary-hover, #033C90); }

.insights-details .post-large-content ul,
.insights-details .post-large-content ol {
  margin: 0 0 var(--ds-space-5, 24px);
  padding-left: var(--ds-space-5, 24px);
}
.insights-details .post-large-content li { margin-bottom: var(--ds-space-2, 8px); line-height: var(--ds-leading-relaxed, 1.75); }

/* This pair used to read:
 *
 *   .insights-details .post-large-content ul > li { list-style: disc; }
 *   .insights-details .post-large-content ol > li { list-style: decimal; }
 *
 * asking for plain browser markers in article bodies. One of the two did
 * nothing and the other drew a second marker.
 *
 * style.css gives both lists a marker of its own: `ul li::before` is the orange
 * dot, `ol > li::before` is the bold counter, and the list itself carries
 * `list-style: none` (style.css:6971 and 7049). The `ul` rule above lost to
 * `display: block` on the same element -- a block box is not a list item, so it
 * has no native marker to restyle, and the dot was what rendered all along. The
 * `ol` rule had nothing in its way: those items stay `display: list-item`, so
 * `decimal` restored the native "1." while the counter kept drawing its own
 * bold "1" beside it. 81 items across the published posts and case studies
 * rendered both.
 *
 * Both are gone rather than fixed. Articles now show the theme's own markers on
 * both list types, which is what `ul` was already doing and what the rest of
 * the site does. If plain markers are ever wanted here, the `::before` in
 * style.css has to be turned off in the same breath -- restyling the native
 * marker alone cannot remove a generated one.
 */

.insights-details .post-large-content blockquote {
  margin: var(--ds-space-6, 32px) 0;
  padding: var(--ds-space-2, 8px) 0 var(--ds-space-2, 8px) var(--ds-space-5, 24px);
  border-left: 3px solid var(--ds-primary, #B65002);
  font-size: var(--ds-text-lg, 1.25rem);
  line-height: var(--ds-leading-normal, 1.6);
  color: var(--ds-ink, #001427);
}
.insights-details .post-large-content blockquote p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------- INLINE IMAGES ----- */
/* Posts currently ship no inline images, but authors will add them via the
   editor. Normalise WordPress alignment classes and figures. */
.insights-details .post-large-content img {
  height: auto;
  border-radius: var(--ds-radius-md, 8px);
}
.insights-details .post-large-content figure {
  margin: var(--ds-space-6, 32px) 0;
  max-width: 100%;
}
.insights-details .post-large-content figure img { width: 100%; }
.insights-details .post-large-content figcaption {
  margin-top: var(--ds-space-2, 8px);
  font-size: var(--ds-text-xs, .875rem);
  color: var(--ds-text-muted, #5F5A54);
  text-align: center;
}
.insights-details .post-large-content .aligncenter { display: block; margin-inline: auto; }
.insights-details .post-large-content .alignright {
  float: right; margin: var(--ds-space-2, 8px) 0 var(--ds-space-4, 16px) var(--ds-space-5, 24px); max-width: 50%;
}
.insights-details .post-large-content .alignleft {
  float: left; margin: var(--ds-space-2, 8px) var(--ds-space-5, 24px) var(--ds-space-4, 16px) 0; max-width: 50%;
}
.insights-details .post-large-content .alignwide { max-width: none; }
@media (max-width: 767px) {
  .insights-details .post-large-content .alignleft,
  .insights-details .post-large-content .alignright { float: none; max-width: 100%; margin-inline: 0; }
}

/* ------------------------------------------------------------- FEATURED -- */
.insights-details .post-image-block img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--ds-radius-lg, 16px);
}

/* -------------------------------------------------- TABLE OF CONTENTS ---- */
.acma-toc {
  background: var(--ds-surface, #F1F4F9);
  border: 1px solid var(--ds-border, #DDE3EC);
  border-radius: var(--ds-radius-lg, 16px);
  padding: var(--ds-space-5, 24px) var(--ds-space-6, 32px);
  margin: 0 0 var(--ds-space-7, 40px);
}
/* The TOC is a <details> so it can start closed on phones, where it measured
   ~900px -- a full screen of links before the article's first sentence.
   ui-enhancements.js removes the `open` attribute below 768px; if that script
   never runs the panel simply stays open, which is the previous behaviour. */
.acma-toc__title {
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-bold, 700);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  color: var(--ds-text-muted, #5F5A54);
  margin: 0;
  padding: 0 0 var(--ds-space-3, 12px);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3, 12px);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.acma-toc__title::-webkit-details-marker { display: none; }
.acma-toc__count {
  font-weight: var(--ds-weight-regular, 400);
  letter-spacing: 0;
  text-transform: none;
  /* --ds-text-muted is already the muted step and clears 4.5:1 on the TOC's
     surface at 6.19:1. The opacity:.8 that used to sit here blended it to an
     effective #7c7975 and dropped the ratio to 3.92:1 -- a real failure on real
     copy ("8 sections"), for a difference in lightness barely visible next to
     the label it sits beside. The token does the muting on its own. */
  color: var(--ds-text-muted, #5F5A54);
}
/* Chevron drawn from a border so it tracks the summary's own colour. */
.acma-toc__title::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.acma-toc[open] > .acma-toc__title::after { transform: translateY(2px) rotate(-135deg); }
.acma-toc[open] > .acma-toc__title { padding-bottom: var(--ds-space-3, 12px); }
.acma-toc:not([open]) > .acma-toc__title { padding-bottom: 0; }
.acma-toc__title:focus-visible { outline: 2px solid var(--ds-primary, #B65002); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .acma-toc__title::after { transition: none; }
}
.acma-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
/* The theme adds li::before { content: counter(my-awesome-counter) } inside
   .post-large-content, which put a second number on each TOC row back when the
   TOC lived there. The list is its own counter either way. */
.acma-toc__item::before { content: none !important; }
.acma-toc__item { list-style: none; margin: 0; padding: 0; display: block; }
.acma-toc__item a {
  display: block;
  padding: var(--ds-space-2, 8px) 0;
  color: var(--ds-text, #28282B);
  text-decoration: none;
  line-height: var(--ds-leading-ui);
  border-bottom: 1px solid var(--ds-border, #DDE3EC);
}
.acma-toc__item:last-child a { border-bottom: 0; }
.acma-toc__item a:hover { color: var(--ds-primary, #B65002); }
.acma-toc__item--l2 a { counter-increment: toc; }
.acma-toc__item--l2 a::before {
  content: counter(toc) ". ";
  color: var(--ds-text-muted, #5F5A54);
  font-variant-numeric: tabular-nums;
}
.acma-toc__item--l3 a { padding-left: var(--ds-space-5, 24px); font-size: var(--ds-text-sm, 1rem); color: var(--ds-text-muted, #5F5A54); }

/* ----------------------------------------------------------- AUTHOR BOX -- */
.acma-author-box {
  display: flex;
  gap: var(--ds-space-5, 24px);
  align-items: flex-start;
  margin: var(--ds-space-8, 48px) 0 0;
  padding: var(--ds-space-6, 32px);
  background: var(--ds-surface, #F1F4F9);
  border-radius: var(--ds-radius-lg, 16px);
  /* Same measure as the prose it sits under, so its edge lines up. */
  max-width: var(--ds-measure, calc(45 * var(--ds-ch, 0.732em)));
}
.acma-author-box__avatar { flex: 0 0 auto; }
.acma-author-box__img {
  width: 72px; height: 72px;
  border-radius: var(--ds-radius-circle, 50%);
  object-fit: cover;
  display: block;
}
/* The author mark, drawn rather than fetched. It replaces the Gravatar request
   the author box used to make -- see acma_local_author_avatar() -- and occupies
   exactly the circle the rule above defines, so the row does not move. */
.acma-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: var(--ds-radius-circle, 50%);
  background: var(--ds-ink, #001427);
  color: var(--ds-white, #fff);
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: 1.75rem;
  font-weight: var(--ds-weight-bold, 700);
  line-height: 1;
  /* The name is printed beside this under a "Written by" label, so the mark is
     decoration and the element is aria-hidden in the markup. */
  user-select: none;
}
.acma-author-box__eyebrow {
  font-size: var(--ds-text-2xs, .75rem);
  font-weight: var(--ds-weight-medium, 500);
  letter-spacing: var(--ds-tracking-caps, .08em);
  text-transform: uppercase;
  color: var(--ds-text-muted, #5F5A54);
  margin: 0 0 var(--ds-space-1, 4px);
}
.acma-author-box__name {
  font-family: var(--ds-font-display, "Geist", sans-serif);
  font-size: var(--ds-text-lg, 1.25rem);
  font-weight: var(--ds-weight-bold, 700);
  color: var(--ds-ink, #001427);
  margin: 0 0 var(--ds-space-2, 8px);
}
.acma-author-box__bio {
  margin: 0 0 var(--ds-space-3, 12px);
  color: var(--ds-text, #28282B);
  line-height: var(--ds-leading-normal, 1.6);
}
.acma-author-box__link {
  font-size: var(--ds-text-sm, 1rem);
  font-weight: var(--ds-weight-medium, 500);
  color: var(--ds-primary, #B65002);
  text-decoration: none;
}
.acma-author-box__link:hover { color: var(--ds-primary-hover, #974302); }

/* ------------------------------------------------------------- TAGS ------ */
/* The label was `<h2 class="innerheading">Tags:</h2>` -- a colon-terminated
   label marked as a heading, rendering at 16px against the article's 32px h2s,
   so it sat in the outline as a section of the piece. It is a <p> naming the
   list beside it now, and this is the rule that dresses it. */
.insights-details .blogtags { margin-top: var(--ds-space-7, 40px); }
.insights-details .blogtags__label {
  font-size: var(--ds-text-sm, 1rem);
  font-weight: var(--ds-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-caps, .08em);
  color: var(--ds-text-muted, #5F5A54);
  margin: 0 0 var(--ds-space-3, 12px);
}
.insights-details .blogtags .tags_data { display: flex; flex-wrap: wrap; gap: var(--ds-space-2, 8px); }
.insights-details .blogtags .tags_data a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--ds-space-2, 8px) var(--ds-space-4, 16px);
  background: var(--ds-surface, #F1F4F9);
  border: 1px solid var(--ds-border, #DDE3EC);
  border-radius: var(--ds-radius-pill, 999px);
  font-size: var(--ds-text-xs, .875rem);
  color: var(--ds-text, #28282B);
  text-decoration: none;
}
.insights-details .blogtags .tags_data a:hover {
  border-color: var(--ds-primary, #B65002);
  color: var(--ds-primary, #B65002);
}

/* -------------------------------------------------------- RESPONSIVE ----- */
@media (max-width: 767px) {
  .insights-details .post-large-content h2 { font-size: var(--ds-text-2xl, 1.75rem); margin-top: var(--ds-space-7, 40px); }
  .acma-toc { padding: var(--ds-space-4, 16px) var(--ds-space-5, 24px); }
  .acma-author-box { flex-direction: column; gap: var(--ds-space-4, 16px); padding: var(--ds-space-5, 24px); }
}

/* ==========================================================================
   THE ARTICLE GRID
   --------------------------------------------------------------------------
   Measured at 1440 before this block: the body was a two-column flex row --
   share rail 169px, reading column 752px -- inside a 1140px wrapper, so the
   content ended at x=1096 and 344px of the grid stayed white and empty down
   the whole 5,455px of the article. The table of contents, meanwhile, was a
   433px box at the top of the reading column, between the headline and the
   article's first sentence.

   From 1200px up the row is a three-column grid and the TOC is the third
   column, sticky. Below that it stays a wrapping flex row and the TOC sits
   where it always did, above the body -- which is also its source order, so a
   reader who never gets the grid meets the contents first either way.
   ========================================================================== */

/* The 115px (50px under 1200) hung below the last column inside a section that
   already pays --ds-section-y at the bottom, so the gap to Related Insights
   measured 219px against the 104px every other section boundary gets. */
.insights-details .insights-details-content-wrapper .insights-details-body {
  margin-bottom: 0;
}

.acma-post-rail { min-width: 0; }

@media (max-width: 1199px) {
  /* Alone on its line in the wrapping row, the rail would otherwise shrink to
     the width of its longest heading. */
  .acma-post-rail { width: 100%; }
}

@media (min-width: 1200px) {
  .insights-details .insights-details-content-wrapper .insights-details-body {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 272px;
    gap: 0 var(--ds-space-7, 40px);
    align-items: start;
  }
  /* style.css sizes both columns with a 12-column calc() at (0,4,0). Matched
     here at the same weight, from the later sheet, so the grid tracks decide. */
  /* `top: 25px` parked the share column under the fixed header: of the four
     icons, the first two were behind it for the whole scroll. */
  .insights-details .insights-details-content-wrapper .insights-details-body > .social-share-col {
    width: auto;
    grid-column: 1;
    grid-row: 1;
    top: 104px;
  }
  .insights-details .insights-details-content-wrapper .insights-details-body > .post-large-content {
    width: auto;
    grid-column: 2;
    grid-row: 1;
  }
  .insights-details .insights-details-content-wrapper .insights-details-body > .acma-post-rail {
    grid-column: 3;
    grid-row: 1;
  }

  .acma-post-rail {
    position: sticky;
    top: 104px;                 /* clears the fixed header */
    align-self: start;
  }
  .acma-post-rail .acma-toc {
    margin: 0;
    padding: var(--ds-space-4, 16px) var(--ds-space-5, 24px);
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .acma-post-rail .acma-toc__item a { font-size: var(--ds-text-sm, 1rem); }
}

/* ==========================================================================
   THE HEAD
   ========================================================================== */

/* The headline stepped 65px -> 48px -> 32px across three hardcoded
   breakpoints, none of them on the type scale. It was moved onto
   --ds-display-1 with the note that this is "what every other h1 on the site
   uses" -- measured, it is not. design-system.css sets `:where(h1)` to
   --ds-display-2, `.ds-heading-hero` exists precisely so the homepage hero can
   opt into display-1, and the page banners on /about-us/, /contact-us/ and
   every product page render 48px. This rule was the only h1 on the site at 64.

   On a 390px phone that ramp reads 40px and the title wrapped to five and six
   lines -- 232px of headline before a word of the article, on the longest
   pages the site has. A post is a page, not a hero. The `font` shorthand in
   style.css also reset the line-height and letter-spacing .entry-title sets,
   which is why both are restated here. */
main .insights-details .insights-details-content-wrapper .insights-details-head .post-title h1 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-display-2);
  font-weight: var(--ds-weight-bold, 700);
  line-height: var(--ds-leading-tight, 1.15);
  letter-spacing: var(--ds-tracking-tight, -.02em);
  color: var(--ds-ink, #001427);
  margin-bottom: var(--ds-space-5, 24px);
}

/* The photograph joins the enclosure system: a shell carrying the ground and
   hairline, the picture on a concentric plate inside it. It was the last
   full-width image on the site still sitting unframed, and the 100px below it
   was the only gap of that size left in the article. */
.insights-details .insights-details-content-wrapper .insights-details-head .post-image-block {
  overflow: visible;
  margin-bottom: var(--ds-section-y-tight);
}
.insights-details .post-image-plate {
  padding: 6px;
  background: var(--acma-tray, rgba(0, 20, 39, .035));
  border: 1px solid var(--acma-hairline, rgba(0, 20, 39, .08));
  border-radius: var(--acma-radius-shell, 26px);
  box-shadow: var(--acma-lift);
}
.insights-details .post-image-plate img {
  display: block;
  width: 100%;
  border-radius: var(--acma-radius-core, 20px);
  /* The article head is the tallest hero on the site: 924px at 1440 against a
     900px viewport, so a reader arriving on an article saw the headline, the
     picture, and no article. 648px of that was the image, running at its own
     1.91 ratio with nothing bounding it -- the homepage hero has carried
     `min-height: clamp(30rem, 24rem + 18vw, 46rem)` and a 900px cap since it
     was built, and this one had no equivalent.

     The cap is expressed against the viewport so it only bites where the
     problem is. On a 390px phone the picture is 181px and this never applies;
     at 1440 it takes the head to ~745px and the first paragraph rises above
     the fold. object-fit: cover is already set, so the picture crops rather
     than distorts. */
  max-height: min(52vh, 560px);
  object-fit: cover;
}