/* ==========================================================================
   Influent Academy - single article
   Loaded only on a single post. Every selector below is scoped to .ia-article
   or to the container that holds it, so nothing here can reach the six
   Elementor-built pages.

   Tokens, type scale, .wrap and .eyebrow all come from influent.css. This file
   adds the reading layout and nothing else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Astra container
   -------------------------------------------------------------------------- */
/* Astra wraps every template in a narrow .ast-container and gives #primary a
   4em margin. The article supplies its own .wrap and its own vertical rhythm,
   so both are stood down - but only for this template. :has() keys the rule to
   the presence of our own wrapper rather than to a body class, so an Elementor
   single template added later is not caught by it. */
.site-content:has(> .ast-container > .ia-article-primary) > .ast-container {
  max-width: none;
  width: 100%;
  padding: 0;
}

/* Astra gives #primary 4em of vertical margin (padding below 993px) at
   (1,1,0), so the class alone loses to it and the article opened with 64px of
   dead space under the header. The hero owns its own top padding. */
body #primary.ia-article-primary {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Article shell
   -------------------------------------------------------------------------- */
/* Astra still puts its own padding and border on the post article element. The
   hero, the rails and .wrap own every gutter in this template, so the article
   box itself is reset. Scoped through #primary so it outranks Astra without
   reaching for !important. */
#primary.ia-article-primary .ia-article {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--paper);
}

/* Set on the wrapper rather than on <article>, because the comments block is a
   sibling of the article and still has to read --ia-rail and --ia-col-gap. */
.ia-article-primary {
  /* The Elementor header template is sticky at the top of the viewport, so
     every sticky rail and every heading anchor has to clear it. One token, set
     from the same --header-h the rest of the site uses. */
  --ia-sticky-top: calc(var(--header-h, 72px) + 24px);
  --ia-anchor-top: calc(var(--header-h, 72px) + 28px);

  /* One source of truth for the reading grid, so the comments block can line
     up with the article column without a magic number. */
  --ia-rail: 64px;
  --ia-col-gap: 48px;
}

/* --------------------------------------------------------------------------
   3. Article hero
   -------------------------------------------------------------------------- */
.ia-article__hero {
  padding-block: clamp(44px, 5vw, 76px) clamp(32px, 4vw, 52px);
}

.ia-article__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}

.ia-article__hero--no-media .ia-article__hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ia-article__hero--no-media .ia-article__hero-copy {
  max-width: 46rem;
}

/* The category reuses the site's section-label component, which is where the
   one piece of orange in the hero comes from. */
.ia-article__category,
.ia-article__category:link,
.ia-article__category:visited {
  width: fit-content;
  text-decoration: none;
  color: var(--text-faint);
}

.ia-article__category:hover,
.ia-article__category:focus-visible {
  color: var(--accent-text);
}

.ia-article__title {
  margin-bottom: 0;
}

.ia-article__standfirst {
  margin: var(--s3) 0 0;
}

/* The featured image is substantial but secondary: a fixed landscape frame so
   any uploaded crop lands the same way and the hero never reflows on load. */
/* Astra paints a square 30px glow on every figure and every loose image inside
   a single post:

       .ast-article-single figure { box-shadow: 0 0 30px 0 rgba(0,0,0,.15) }

   The figure carried no radius of its own, so that halo was drawn around a
   square box while the image inside it was rounded to 24px. What showed at each
   corner was the hard square edge of the halo cutting across the curve, which
   is what made all four corners look broken. Stand it down, then let the
   wrapper own its own elevation below. */
.ia-article figure,
.ia-article img {
  box-shadow: none;
}

/* One wrapper owns the geometry: radius, clipping, ground and elevation. */
.ia-article figure.ia-article__figure {
  display: grid;
  margin: 0;
  padding: clamp(12px, 1.6vw, 20px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
}

/* Every featured illustration on this site is transparent, and two of the four
   are portrait. cover was cutting a third off the top and bottom of diagrams
   that only read whole, so the frame stays fixed and the artwork is contained
   inside it. The wrapper's ground is what shows through the transparency. */
.ia-article .ia-article__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ia-article__figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   4. Reading layout
   -------------------------------------------------------------------------- */
/* Three columns on a wide desktop: share, article, contents. The rails are
   grid items that stretch the full height of the row, and the sticky element is
   the div inside each of them. That is what keeps a rail inside the article and
   lets it stop naturally at the end of it, with no JavaScript and no fixed
   positioning that could ride over the footer. */
.ia-article__layout {
  display: grid;
  grid-template-columns: var(--ia-rail) minmax(0, 1fr) 268px;
  grid-template-areas: "share body toc";
  column-gap: var(--ia-col-gap);
  padding-block: clamp(40px, 4vw, 64px) clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
}

.ia-article__layout--no-toc {
  grid-template-columns: var(--ia-rail) minmax(0, 1fr);
  grid-template-areas: "share body";
}

.ia-article__rail--share {
  grid-area: share;
}

.ia-article__rail--toc {
  grid-area: toc;
}

.ia-article__body {
  grid-area: body;
  /* A reading measure, not a column width. In the three-column layout the
     column is already narrower than this; with no contents panel it is not. */
  max-width: 46rem;
}

.ia-article__rail-inner {
  position: sticky;
  top: var(--ia-sticky-top);
}

/* --------------------------------------------------------------------------
   5. Share rail
   -------------------------------------------------------------------------- */
.ia-rail-title {
  margin: 0 0 12px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ia-share {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ia-share > li {
  margin: 0;
}

/* Astra styles bare <button> and bare <a>, so every state is pinned here at a
   specificity that clears it rather than left to inherit. */
.ia-article .ia-share__link,
.ia-article .ia-share__link:link,
.ia-article .ia-share__link:visited {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.ia-article .ia-share__link:hover,
.ia-article .ia-share__link:focus-visible,
.ia-article .ia-share__link:active {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-wash);
}

.ia-share__icon {
  width: 19px;
  height: 19px;
  grid-area: 1 / 1;
}

.ia-share__icon--check {
  display: none;
}

.ia-article .ia-share__link--copy[data-copied="true"] {
  color: var(--ok);
  border-color: var(--ok);
  background: var(--ok-wash);
}

.ia-share__link--copy[data-copied="true"] .ia-share__icon--copy {
  display: none;
}

.ia-share__link--copy[data-copied="true"] .ia-share__icon--check {
  display: block;
}

/* --------------------------------------------------------------------------
   6. On this page
   -------------------------------------------------------------------------- */
.ia-toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}

.ia-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ia-toc__summary::-webkit-details-marker {
  display: none;
}

/* The chevron only appears where the panel is genuinely a disclosure. On a wide
   desktop it is an always-open contents list and a chevron would misdescribe
   it. */
.ia-toc__summary::after {
  content: "";
  display: none;
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--ico-arrow-down) center / contain no-repeat;
  mask: var(--ico-arrow-down) center / contain no-repeat;
  transition: transform 0.18s ease;
}

.ia-toc__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.ia-toc__item {
  margin: 0;
}

.ia-article .ia-toc__link,
.ia-article .ia-toc__link:link,
.ia-article .ia-toc__link:visited {
  display: block;
  margin-left: -1px;
  padding: 7px 0 7px 14px;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.ia-article .ia-toc__link:hover {
  color: var(--text);
  border-left-color: var(--line-strong);
}

/* Astra ships `a:focus { outline: thin dotted }`. On a block-level link that
   painted a dotted rule above and below a contents item the moment it was
   clicked, with a mouse as much as with a keyboard. Stand it down, then give
   keyboard users a real ring through :focus-visible, which a mouse click does
   not trigger. */
.ia-article .ia-toc__link:focus {
  outline: none;
}

.ia-article .ia-toc__link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
  color: var(--text);
}

/* The section the reader is currently in. The text uses --accent-text, which is
   the same orange at the one value that clears 4.5:1 at this size; the bright
   brand orange stays on the marker, where it is a graphic rather than text. */
.ia-article .ia-toc__link.is-active,
.ia-article .ia-toc__link[aria-current="location"] {
  color: var(--accent-text);
  font-weight: 600;
  border-left-color: var(--accent);
}

/* --------------------------------------------------------------------------
   7. Article body
   -------------------------------------------------------------------------- */
/* Classic editor output, left semantic. Slightly larger than the site body
   size and looser in the leading, which is the one adjustment long-form
   reading genuinely needs. */
.ia-article__body {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--text);
}

.ia-article__body > *:first-child {
  margin-top: 0;
}

.ia-article__body > *:last-child {
  margin-bottom: 0;
}

.ia-article__body p {
  margin: 0 0 1.35em;
}

.ia-article__body h2 {
  margin: var(--s7) 0 var(--s2);
  scroll-margin-top: var(--ia-anchor-top);
}

.ia-article__body h3 {
  margin: var(--s5) 0 var(--s1);
  scroll-margin-top: var(--ia-anchor-top);
}

.ia-article__body h4 {
  margin: var(--s4) 0 var(--s1);
  scroll-margin-top: var(--ia-anchor-top);
}

.ia-article__body h2:first-child,
.ia-article__body h3:first-child {
  margin-top: 0;
}

.ia-article__body ul,
.ia-article__body ol {
  margin: 0 0 1.35em;
  padding-left: 1.35em;
}

.ia-article__body li {
  margin-bottom: 10px;
}

.ia-article__body li:last-child {
  margin-bottom: 0;
}

.ia-article__body li > ul,
.ia-article__body li > ol {
  margin-top: 10px;
}

.ia-article__body a,
.ia-article__body a:link,
.ia-article__body a:visited {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.ia-article__body a:hover,
.ia-article__body a:focus-visible,
.ia-article__body a:active {
  color: var(--accent-deep);
  text-decoration-thickness: 2px;
}

/* A heading that is itself a link keeps the heading's colour and weight, with
   the orange carried by the underline. Rendering it as full body-link orange
   reads as a mistake at 33px. */
.ia-article__body h2 a,
.ia-article__body h2 a:link,
.ia-article__body h2 a:visited,
.ia-article__body h3 a,
.ia-article__body h3 a:link,
.ia-article__body h3 a:visited,
.ia-article__body h4 a,
.ia-article__body h4 a:link,
.ia-article__body h4 a:visited {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.ia-article__body h2 a:hover,
.ia-article__body h3 a:hover,
.ia-article__body h4 a:hover,
.ia-article__body h2 a:focus-visible,
.ia-article__body h3 a:focus-visible,
.ia-article__body h4 a:focus-visible {
  color: var(--accent-text);
}

.ia-article__body img {
  border-radius: var(--radius-sm);
}

.ia-article__body figure,
.ia-article__body .wp-block-image,
.ia-article__body .wp-caption {
  margin: var(--s5) 0;
  max-width: 100%;
}

.ia-article__body figcaption,
.ia-article__body .wp-caption-text {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: left;
}

.ia-article__body blockquote {
  margin: var(--s5) 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  /* Astra italicises blockquotes. Montserrat ships no italic, so the browser
     synthesises a slant that does not belong to the type system. */
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--text);
}

.ia-article__body blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--text-muted);
}

.ia-article__body hr {
  margin: var(--s6) 0;
}

/* A wide table scrolls inside itself rather than pushing the page sideways.
   width:max-content rather than 100% so the block hugs the table and Astra's
   table borders do not draw a rule out into empty column space. */
.ia-article__body table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: var(--s5) 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.ia-article__body th,
.ia-article__body td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.ia-article__body th {
  background: var(--fill);
  font-weight: 600;
}

.ia-article__body code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--fill);
  font-size: 0.9em;
}

.ia-article__body pre {
  margin: var(--s5) 0;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--text-on-ink);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}

.ia-article__body pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.ia-article__body iframe,
.ia-article__body video {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.ia-article__pages {
  margin-top: var(--s5);
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8. Comments
   -------------------------------------------------------------------------- */
.ia-article__comments {
  max-width: 46rem;
  /* Line the discussion up with the reading column rather than with the share
     rail's outer edge. */
  margin-left: calc(var(--ia-rail) + var(--ia-col-gap));
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* The comment form is Astra's markup, and Astra styles it through #comments,
   so a class-only override loses to it however many classes it carries: an id
   beats any number of classes. These rules therefore key on #comments too, and
   stay scoped inside .ia-article__comments so no other form is touched. */
.ia-article__comments #comments .comments-title,
.ia-article__comments #comments .comment-reply-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}

.ia-article__comments #comments input[type="text"],
.ia-article__comments #comments input[type="email"],
.ia-article__comments #comments input[type="url"],
.ia-article__comments #comments textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--font-body);
  color: var(--text);
}

.ia-article__comments #comments input[type="text"]:focus,
.ia-article__comments #comments input[type="email"]:focus,
.ia-article__comments #comments input[type="url"]:focus,
.ia-article__comments #comments textarea:focus {
  border-color: var(--accent);
}

.ia-article-primary .ia-article__comments #comments input[type="submit"],
.ia-article-primary .ia-article__comments #comments .submit {
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-cta);
  color: var(--accent-cta-ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.ia-article-primary .ia-article__comments #comments input[type="submit"]:hover,
.ia-article-primary .ia-article__comments #comments input[type="submit"]:focus-visible,
.ia-article-primary .ia-article__comments #comments .submit:hover,
.ia-article-primary .ia-article__comments #comments .submit:focus-visible {
  background: var(--accent-cta-hover);
  color: var(--accent-cta-ink);
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
/* Below 1160px the article column would start costing more than the share rail
   is worth, so the rail lifts out into a horizontal row and the contents panel
   keeps the side position it uses best. */
@media (max-width: 1160px) {
  .ia-article__layout,
  .ia-article__layout--no-toc {
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-areas:
      "share share"
      "body  toc";
    column-gap: 40px;
  }

  .ia-article__layout--no-toc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "share"
      "body";
  }

  .ia-article__rail--share .ia-article__rail-inner {
    position: static;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--s5);
  }

  .ia-rail-title {
    margin: 0;
  }

  .ia-share {
    flex-direction: row;
  }

  .ia-toc__summary::after {
    display: block;
  }

  .ia-toc__disclosure[open] .ia-toc__summary::after {
    transform: rotate(180deg);
  }

  /* The share rail spans the full width here, so there is no rail column left
     for the comments to sit beside. */
  .ia-article__comments {
    margin-left: 0;
  }
}

/* A long contents list in a sticky panel cannot be taller than the viewport.
   This is the one place an internal scroll is correct; the share rail never
   gets one. */
@media (min-width: 901px) {
  .ia-toc__list {
    max-height: calc(100vh - var(--ia-sticky-top) - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* One column. The hero stacks title, meta, then image; the contents panel
   becomes a collapsible block at the head of the article. */
@media (max-width: 900px) {
  .ia-article__hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ia-article__figure {
    order: 2;
  }

  .ia-article__image {
    aspect-ratio: 16 / 10;
  }

  .ia-article__layout,
  .ia-article__layout--no-toc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "share"
      "toc"
      "body";
  }

  .ia-article__rail--toc .ia-article__rail-inner {
    position: static;
    margin-bottom: var(--s5);
  }

  /* Astra drops the root font size to 91.2% below 921px, which lands the
     article body at 15.5px and then 14.6px: too small to read at length. This
     puts it back to roughly 16px while staying in rem, so a reader who has
     raised their browser font size still gets it. */
  .ia-article__body {
    max-width: none;
    font-size: 1.1rem;
    line-height: 1.7;
  }
}

@media (max-width: 680px) {
    .ia-article__body h2 {
    margin-top: var(--s6);
  }

  .ia-article__body blockquote {
    font-size: 1.08rem;
    padding-left: 18px;
  }

  .ia-article__rail--share .ia-article__rail-inner {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ia-article .ia-share__link,
  .ia-article .ia-toc__link,
  .ia-toc__summary::after {
    transition: none;
  }
}