/*
 * YFD Article System — shared component styles (v1).
 *
 * Namespaced to `.yfd-as-*` only. Not loaded by any template yet (no
 * enqueue call was added — this task does not touch functions.php/
 * single.php). Not specific to any one article/post; scoped to the
 * canonical component set (v1.1 §9), reusing the site's existing design
 * tokens (parts/service-head.php) via var() with fallbacks so this sheet
 * degrades sanely if loaded somewhere those tokens aren't defined.
 *
 * PILOT-001 visual-integration hotfix (17 July 2026): the root <article>
 * no longer carries the `.yfd-as-article` class (renderArticle.js), and
 * the TOC is now the established `.yfd-toc` markup (styled entirely by
 * css/yfd-long-form-toc.v5.css) — so `.yfd-as-article` and `.yfd-as-toc`
 * below are dead selectors for now. Left in place rather than removed:
 * CTA / author-card / remuneration / generic content-block wrapper
 * classes are UNCHANGED this slice (still `.yfd-as-*`) and still need
 * every other rule here. Slice 2 will finish migrating those and this
 * file can be trimmed then.
 */

.yfd-as-article {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink, #1b1813);
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.8;
}

.yfd-as-article h2,
.yfd-as-article h3 {
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  color: var(--ink, #1b1813);
  font-style: normal; /* Chinese is never italic, even in a Latin display font */
}

.yfd-as-article h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 600;
  margin: 2.2em 0 0.7em;
}

.yfd-as-article h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.6em 0 0.5em;
}

.yfd-as-article p,
.yfd-as-article ul,
.yfd-as-article ol {
  margin: 0 0 1em;
}

.yfd-as-article a {
  color: var(--forest, #1f463a);
  text-decoration-color: var(--line, #ddd2bd);
}

/* Table of contents */
.yfd-as-toc {
  border: 1px solid var(--line, #ddd2bd);
  border-radius: 8px;
  padding: 1em 1.4em;
  margin: 0 0 2em;
  background: var(--paper-card, #fbf8f1);
}

.yfd-as-toc ol {
  margin: 0;
  padding-left: 1.2em;
}

/* Post CTA — dead selector, CTA moved to .yfd-post-cta (Slice 2). Left in
   place rather than removed (matches this file's existing convention of
   not deleting other slices' now-dead .yfd-as-* selectors). Remuneration
   disclosure has its own dedicated, scoped rule below (Slice 5) — it no
   longer shares this generic rule. */
.yfd-as-cta {
  border-top: 1px solid var(--line, #ddd2bd);
  padding-top: 1.4em;
  margin-top: 2em;
  font-size: 0.95rem;
  color: var(--ink-soft, #5b5346);
}

/* CTA buttons reuse the production button colours from
   inc/yfd-components/yfd-post-cta.php (forest primary / outlined
   secondary) rather than inventing a new palette. */
.yfd-as-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0.6em;
}

.yfd-as-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 3px;
  text-decoration: none;
}

.yfd-as-cta-button:first-child {
  background: var(--forest, #1f463a);
  color: var(--paper, #f6f1e6);
}

.yfd-as-cta-button:not(:first-child) {
  background: transparent;
  color: var(--ink, #1b1813);
  border: 1px solid var(--line, #ddd2bd);
}

/* FAQ intentionally has no rules here: the renderer emits the same
   `.faq` / `.faq-list` / `.ans` / `.pm` markup the existing [yfd_q]
   shortcode produces (functions.php ~L390-395), styled by the `.faq`
   rules already defined in parts/service-head.php and loaded on every
   page (including single.php). Duplicating those rules here would risk
   the two definitions drifting apart. */

/* Author card */
.yfd-as-author-card {
  border: 1px solid var(--line, #ddd2bd);
  border-radius: 10px;
  background: var(--paper-card, #fbf8f1);
  padding: 1.6em;
  margin-top: 2em;
}

.yfd-as-author-credentials {
  list-style: none;
  padding: 0;
  margin: 0.8em 0;
  font-size: 0.85rem;
  color: var(--ink-mute, #6a604d);
}

.yfd-as-author-licence-note {
  font-size: 0.8rem;
  color: var(--ink-mute, #6a604d);
}

/* Sources section de-emphasis — canonical Article System posts only
   (.is-yfd-canonical, set in single.php on the ancestor .post-shell).
   Keeps every source available for trust/compliance/SEO/GEO/AEO, just
   smaller and more compact than the main educational content, so it
   doesn't compete for attention. H2 is deliberately untouched here — it
   keeps the same size/styling as every other article H2. Sizes are fixed
   px, not rem/em — Astra's responsive root font-size drops below 16px on
   mobile, which would silently pull a rem-based 14px under the floor this
   section must never cross. Nothing below 14px anywhere in this section. */
.is-yfd-canonical .yfd-as-sources {
  padding: 40px 0;
}

.is-yfd-canonical .yfd-as-sources > p {
  font-size: 15px; /* verification date / intro line */
  line-height: 1.55;
}

.is-yfd-canonical .yfd-as-sources h3 {
  font-size: 14px;
}

.is-yfd-canonical .yfd-as-sources li {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 0.45rem;
}

.is-yfd-canonical .yfd-as-sources a {
  overflow-wrap: break-word;
}

@media (min-width: 640px) {
  .is-yfd-canonical .yfd-as-sources {
    padding: 56px 0;
  }
}

/* Remuneration disclosure — canonical Article System posts only, compact
   part of the verification notes rather than a callout. Transparent
   disclosure tone: no card, shadow, icon or colour block — a plain top
   divider only. Fixed px (not rem/em), same reason as the sources section:
   Astra's root font-size shrinks on mobile, which would otherwise pull a
   rem-based 14px under the floor. h3/margin need !important — the approved
   Slice 1 rule `.post-body h3 { color/margin-top !important }` is for
   article section headings, not this disclosure's own sub-heading.

   Margin is top-only (Slice 7, founder-approved closing order, 17 July
   2026 — supersedes Slice 5's margin-bottom:48px, which separated
   remuneration from a CTA that followed it back then). Remuneration now
   sits between the author card and sources: margin-top supplies the one
   controlled gap after the author card (aside.post-author has no bottom
   margin of its own, so nothing collapses/doubles with it); margin-bottom
   stays 0 so nothing combines with the sources section's own approved
   top padding (40px/56px) — that alone provides the remuneration→sources
   gap. */
.is-yfd-canonical .yfd-as-remuneration {
  padding: 24px 0 0;
  margin: 36px 0 0;
  border-top: 1px solid #ddd2bd;
  background: transparent;
}

@media (min-width: 640px) {
  .is-yfd-canonical .yfd-as-remuneration {
    margin-top: 48px;
  }
}

.is-yfd-canonical .yfd-as-remuneration h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink, #1b1813) !important;
  margin: 0 0 8px !important;
}

.is-yfd-canonical .yfd-as-remuneration p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft, #5b5346);
  margin: 0;
}

/* Ordinary content-block vertical rhythm (Slice 6, 17 July 2026). Every
   .yfd-as-block is an HTML <section>, inheriting the sitewide bare
   `section { padding: clamp(64px, 11vw, 132px) 0; }` rule (parts/
   service-head.php) meant for full-bleed landing-page sections, not
   article prose — adjacent blocks were combining bottom+top padding into
   very large gaps. Reset to zero here (scoped selector specificity beats
   the global bare-tag rule, no !important needed) and replace with one
   controlled gap applied via the adjacent-sibling combinator, so it lands
   exactly once between two ordinary blocks — never before the first block
   (nothing precedes it to match) and never after the last one before a
   specially-styled closing component (:not(.yfd-as-sources) excludes
   sources from being either side of the pair, since sources keeps its
   own separately approved 56px/40px padding from the rule above; the
   other closing components — remuneration, CTA, author heading/card —
   aren't .yfd-as-block at all, so they're already unaffected). FAQ is an
   ordinary block for this purpose (only the outer <section> padding/margin
   is touched — its internal accordion CSS lives in parts/service-head.php,
   untouched). Internal paragraph/list/table/callout/heading spacing inside
   each block is untouched — only the section wrapper's own padding/margin. */
.is-yfd-canonical .post-body article > .yfd-as-block:not(.yfd-as-sources) {
  padding: 0;
  margin: 0;
}

.is-yfd-canonical .post-body article > .yfd-as-block:not(.yfd-as-sources) + .yfd-as-block:not(.yfd-as-sources) {
  margin-top: 36px;
}

@media (min-width: 640px) {
  .is-yfd-canonical .post-body article > .yfd-as-block:not(.yfd-as-sources) + .yfd-as-block:not(.yfd-as-sources) {
    margin-top: 48px;
  }
}

/* Table mobile containment (PRS-003 migration preview, 17 July 2026).
   markdown.js wraps every rendered table in .yfd-as-table-wrap; only the
   wrapper scrolls — cell content, wording and column count are untouched,
   and the table is never squeezed narrower than min-width. Canonical-only
   ( .is-yfd-canonical ) so PILOT-001 (no tables yet) and legacy long-form
   posts (664/4549, still on the old shortcode/wpautop path, not this
   renderer) are unaffected. */
.is-yfd-canonical .yfd-as-block .yfd-as-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1em 0;
}

.is-yfd-canonical .yfd-as-block table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
}

.is-yfd-canonical .yfd-as-block th,
.is-yfd-canonical .yfd-as-block td {
  border: 1px solid var(--line, #ddd2bd);
  padding: 8px 12px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: top;
}

.is-yfd-canonical .yfd-as-block th {
  background: var(--paper-card, #fbf8f1);
  font-weight: 600;
}

/* Zebra striping (Founder visual-QA correction, 17 July 2026) — shared
   Article System default, not a PRS-003-specific rule. Reuses the site's
   existing alternate-section token (--paper-deep, .section-alt in
   parts/service-head.php) rather than inventing a new colour. Body rows
   only — header keeps its own --paper-card background so it stays
   visually distinct. No hover effect, no inline styles, no !important. */
.is-yfd-canonical .yfd-as-block .yfd-as-table-wrap tbody tr:nth-child(even) {
  background: var(--paper-deep, #ece4d3);
}

/* Reader-decision-question emphasis (PRS-002 design-system correction, 18
   July 2026) — shared Article System default, not PRS-002-specific.
   Reuses the site's existing --red-ink token (parts/service-head.php),
   the same one already driving .en002-qtext / .en002-driver-lead in the
   live assessment widgets — no new colour introduced. Applies only to
   genuine reader-facing decision/reflective questions (see markdown.js's
   ??...?? inline syntax), never to headings or informational prose, so
   it is scoped to inline text only, not any block or heading selector. */
.is-yfd-canonical .yfd-as-block .yfd-question {
  color: var(--red-ink, #a8322a);
}