/* ============================================================
   Statements Archive Child Page (page-statements-child.php)
   Long-form "methodology / about" child pages of the Statements
   Archive. Re-implements the concept page-title / prose / anchors /
   pill / step vocabulary on the shared --bw-s-* design tokens so it
   works without the (non-enqueued) wireframe/site-skin layers.
   Scoped under .bw-child-page to avoid leaking into the rest of the
   page, matching how other statement templates scope themselves.
   ============================================================ */

.bw-child-page {
  position: relative;
  margin-block-end: var(--bw-s-s10);
}

/* ---------- hero ---------- */

.bw-child-page__hero {
  margin-block-start: var(--bw-s-s6);
}

.bw-child-page__title {
  font-family: var(--bw-s-sans);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bw-s-ink);
  margin: 0 0 var(--bw-s-s2);
}

.bw-child-page__intro {
  max-inline-size: 744px; /* 8 columns — reading measure */
  font-size: 18px;
  line-height: 1.667;
  color: var(--bw-s-ink-2);
}

.bw-child-page__intro strong,
.bw-child-page__intro b {
  font-weight: 600;
  color: var(--bw-s-ink);
}

.bw-child-page__intro ul,
.bw-child-page__intro ol {
  margin-block: var(--bw-s-s3);
  padding-inline-start: 1.4em;
  list-style-position: outside;
  color: var(--bw-s-ink);
}

.bw-child-page__intro li {
  margin-block-end: var(--bw-s-s1);
  line-height: 1.667;
}

/* ---------- in-page anchor nav ---------- */

.bw-child-page__anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bw-s-s2);
  margin-block-start: var(--bw-s-s4);
  padding-block-end: var(--bw-s-s2);
}

.bw-child-page__pill {
  display: inline-flex;
  align-items: center;
  padding: var(--bw-s-s2) var(--bw-s-s3);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-pill);
  color: var(--bw-s-ink);
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  transition:
    border-color 0.12s ease,
    color 0.12s ease,
    background-color 0.12s ease;
}

.bw-child-page__pill:hover {
  border-color: var(--bw-s-accent);
  color: var(--bw-s-accent);
  background: var(--bw-s-paper-2);
}

/* ---------- sections ---------- */

.bw-child-page__prose {
  margin-block-start: var(--bw-s-s6);
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s8);
}

.bw-child-page__section {
  /* keep the anchored heading clear of the sticky header */
  scroll-margin-block-start: 140px;
}

.bw-child-page__h {
  font-family: var(--bw-s-sans);
  font-size: 26px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--bw-s-ink);
  margin: 0 0 var(--bw-s-s3);
  padding-inline-start: var(--bw-s-s2);
  border-inline-start: 3px solid var(--bw-s-accent);
}

.bw-child-page__content {
  max-inline-size: 68ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--bw-s-ink);
}

.bw-child-page__content > :first-child {
  margin-block-start: 0;
}

.bw-child-page__content > :last-child {
  margin-block-end: 0;
}

.bw-child-page__content p {
  margin-block: var(--bw-s-s3) 0;
}

.bw-child-page__content h3,
.bw-child-page__content h4 {
  font-family: var(--bw-s-sans);
  font-weight: 500;
  color: var(--bw-s-ink);
  margin-block: var(--bw-s-s4) var(--bw-s-s2);
}

/* WYSIWYG lists — explicit markers, spacing, and nesting so the editor
   produces real, scannable lists regardless of parent-theme resets. */
.bw-child-page__content ul,
.bw-child-page__content ol {
  margin-block: var(--bw-s-s3);
  padding-inline-start: 1.4em;
  list-style-position: outside;
}

.bw-child-page__content ul {
  list-style-type: disc;
}

.bw-child-page__content ol {
  list-style-type: decimal;
}

.bw-child-page__content li::marker {
  color: var(--bw-s-accent);
}

.bw-child-page__content li {
  margin-block-end: var(--bw-s-s1);
  line-height: 1.7;
  color: var(--bw-s-ink);
}

.bw-child-page__content li:last-child {
  margin-block-end: 0;
}

.bw-child-page__content ul ul,
.bw-child-page__content ul ol,
.bw-child-page__content ol ul,
.bw-child-page__content ol ol {
  margin-block-start: var(--bw-s-s2);
}

/* WYSIWYG emphasis — explicit weights so <strong>/<b> read as ink-bold,
   not washed out by parent-theme link/reset rules. */
.bw-child-page__content strong,
.bw-child-page__content b {
  font-weight: 600;
  color: var(--bw-s-ink);
}

.bw-child-page__content em,
.bw-child-page__content i {
  font-style: italic;
  color: var(--bw-s-ink);
}

/* Long quotes in WYSIWYG sections echo the archive's quote voice (serif). */
.bw-child-page__content blockquote {
  margin: var(--bw-s-s3) 0;
  padding-inline-start: var(--bw-s-s3);
  border-inline-start: 3px solid var(--bw-s-accent);
  font-family: var(--bw-s-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--bw-s-ink-2);
}

.bw-child-page__content a {
  color: var(--bw-s-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bw-child-page__content a:hover {
  color: var(--bw-s-accent-dark);
}

/* ---------- per-section taxonomy pills ----------
   Matches the applied-filters .pill look from statements-archive.css:
   white fill, 1px light line, pill radius, ink-2 text, accent on hover. */

.bw-child-page__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bw-s-s1);
  margin-block-end: var(--bw-s-s3);
}

.bw-child-page__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-pill);
  background: var(--bw-s-paper);
  color: var(--bw-s-ink-2);
  padding: 5px 14px;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.bw-child-page__tag:hover {
  border-color: var(--bw-s-accent);
  color: var(--bw-s-accent);
}

/* ---------- footer / back link ---------- */

.bw-child-page__foot {
  margin-block-start: var(--bw-s-s10);
  padding-block-start: var(--bw-s-s4);
}

.bw-child-page__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bw-s-s2);
  padding: var(--bw-s-s2) var(--bw-s-s5);
  background: var(--bw-s-accent);
  color: #fff;
  border-radius: var(--bw-s-radius-pill);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.bw-child-page__btn:hover {
  background: var(--bw-s-accent-dark);
  /* safeguard against parent-theme link hover rules turning the text blue */
  color: #fff !important;
}