/*
 * Article body typography — the WordPress half of PostArticle.astro's `body`.
 *
 * HAND-WRITTEN. Not generated, despite living beside inc/scoped-*.css. Do not
 * expect gen-wp-theme.mjs to rewrite it.
 *
 * Why it exists
 * -------------
 * The article body is one WYSIWYG field, not a repeater of typed blocks. Its
 * DEFAULT is the markup Astro built — every element carrying the exact Tailwind
 * classes the component used to emit:
 *
 *   <h2 class="text-xl lg:text-2xl text-ink pt-6 tracking-tight font-medium reveal" …>
 *
 * The moment the client types a sub-heading in the editor, WordPress inserts a
 * bare `<h2>` with no classes at all. Same for a pull quote, a list, a link. So
 * an article that renders perfectly on day one degrades element by element as
 * it is edited — headings falling back to browser defaults in the wrong
 * typeface, quotes losing the orange rule — and the failure is invisible until
 * someone looks at a page nobody has opened since it was written.
 *
 * This file restates every one of those Tailwind declarations as an ELEMENT
 * rule under `.he-article-body`. Classed markup and bare markup then render
 * identically, so it does not matter which one is in the field.
 *
 * Keeping it honest
 * -----------------
 * Every value below is the resolved Tailwind value from the class list in
 * `blockHtml()` in src/components/journal/PostArticle.astro. If a class there
 * changes, change it here too — nothing checks this, because Tailwind's output
 * is only in the compiled bundle and there is no build step that can see both.
 * The class names are quoted in the comments so a grep for `pt-6` finds both
 * sides.
 *
 * Specificity: `.he-article-body h2` is (0,1,1) and beats a Tailwind utility's
 * (0,1,0), including inside the `lg:` media query. That is intentional and
 * harmless — the two carry the same value, so whichever wins looks the same.
 * It also means the client cannot break the page by pasting styled markup from
 * Word: the element rules win.
 *
 * `.reveal` is deliberately NOT styled here. It is the GSAP hook, it starts at
 * opacity 0, and applying it to bare elements would leave anything the client
 * types invisible on a page where ScrollTrigger failed to initialise.
 *
 * It also insures the SHIPPED markup, not only what the editor types
 * ------------------------------------------------------------------
 * The body renders through wp_kses_post(), and PostArticle.astro's headings and
 * pull quotes carry an inline `style="font-family: var(--font-body);"`. kses
 * hands every style attribute to safecss_filter_attr(), which allows
 * `font-family` and — since WP 5.8 — `var(--…)` values, so the declaration
 * survives today. It is one allow-list away from not surviving, and the symptom
 * would be article headings quietly switching to the display face with nothing
 * in any log. Because `font-family` is restated below as an element rule, that
 * failure is already absorbed: the inline style is a duplicate, not the source.
 * Do not "tidy up" the duplication by dropping it from here.
 */

/* Wrapper spacing is NOT restated here, and must not be.
 *
 * "space-y-6" on the wrapper compiles to
 *   :where(.space-y-6 > :not(:last-child)) { margin-block-end: 1.5rem }
 * — a selector on the CHILDREN, matched by position rather than by class, so it
 * already reaches every unclassed <p> and <h2> the editor produces. Adding a
 * `> * + * { margin-top: 1.5rem }` rule here would not replace it, it would
 * stack on top of it, and every gap in every article body would silently double
 * to 3rem. */

/* "text-xl lg:text-2xl text-ink pt-6 tracking-tight font-medium" + font-body.
   h3/h4 exist only because the editor offers them; they step down from h2
   rather than being left to the browser's Times New Roman. */
.he-article-body h2,
.he-article-body h3,
.he-article-body h4 {
  font-family: var(--font-body);
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  padding-top: 1.5rem;
}

.he-article-body h2 {
  font-size: 1.25rem; /* text-xl */
}

.he-article-body h3 {
  font-size: 1.125rem; /* text-lg */
}

.he-article-body h4 {
  font-size: 1rem; /* text-base */
}

/* "my-6" on the figure. The top margin duplicates the wrapper's space-y-6 for
   the first-child case, where there is no preceding sibling to space against. */
.he-article-body figure {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* "border-l-[3px] border-brand-orange pl-6 lg:pl-8 text-ink text-xl lg:text-2xl
   italic leading-relaxed" + font-body.
   Also matches a blockquote the editor produces on its own, which arrives with
   neither the rule nor the indent. */
.he-article-body blockquote {
  font-family: var(--font-body);
  border-left: 3px solid var(--color-brand-orange);
  padding-left: 1.5rem;
  color: var(--color-ink);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.625;
  margin: 0;
}

/* "text-eyebrow text-ink-mute mt-4 pl-6 lg:pl-8" — the .text-eyebrow utility
   spelled out, since a figcaption typed by hand carries no class. */
.he-article-body figcaption {
  font-family: var(--font-eyebrow);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--color-ink-mute);
  margin-top: 1rem;
  padding-left: 1.5rem;
}

/*
 * Below here there is no Astro counterpart to match — the shipped articles
 * contain only paragraphs, sub-headings and pull quotes. These are the elements
 * the editor's toolbar can produce that the design never anticipated, styled so
 * that using them looks deliberate rather than like a bug. Without them a
 * bulleted list renders with no bullets at all, because the Astro reset removes
 * list-style globally.
 */

.he-article-body ul,
.he-article-body ol {
  padding-left: 1.5rem;
}

.he-article-body ul {
  list-style: disc;
}

.he-article-body ol {
  list-style: decimal;
}

.he-article-body li + li {
  margin-top: 0.5rem;
}

.he-article-body li::marker {
  color: var(--color-brand-orange);
}

.he-article-body a {
  color: var(--color-brand-orange);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.3s ease;
}

.he-article-body a:hover {
  color: var(--color-ink);
}

.he-article-body strong,
.he-article-body b {
  font-weight: 600;
  color: var(--color-ink);
}

/* An image dropped in from the media library arrives with width/height
   attributes from the original file and will otherwise overflow the column. */
.he-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.he-article-body hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

/* The `lg:` half of every pair above. 64rem, not 1024px, to match Tailwind —
   and rem in a media query is always the INITIAL root font-size, so the global
   scale dial in global.css does not move this breakpoint. */
@media (min-width: 64rem) {
  .he-article-body h2 {
    font-size: 1.5rem; /* lg:text-2xl */
  }

  .he-article-body h3 {
    font-size: 1.25rem;
  }

  .he-article-body h4 {
    font-size: 1.125rem;
  }

  .he-article-body blockquote {
    font-size: 1.5rem; /* lg:text-2xl */
    padding-left: 2rem; /* lg:pl-8 */
  }

  .he-article-body figcaption {
    padding-left: 2rem; /* lg:pl-8 */
  }
}