/* ============================================================
   記事本文の要素（知恵袋・ブログ・お知らせの詳細ページ共通）

   旧サイトから移した記事151件は <p> だけで出来ており、見出しも
   箇条書きも持たない。そのため本文エリアには p のスタイルしか
   用意していなかった。

   これから足す記事はブロックエディタで書くため h2 / h3 / ul / ol が
   入る。本文は the_content() が出力するのでクラスを足せない。
   要素セレクタで当てる。

   見出しの見え方は .article-heading（固定ページの節見出し）に
   合わせてある。別物に見えないようにするため。

   お知らせ（.news-detail__body）のリンクは news.css が既に持って
   いるので、ここでは触らない。同じ詳細度で二重に当たるのを避ける。
   ============================================================ */

/* ---- 見出し ---- */

/*
 * 本文エリアは flex + gap なので、節の切れ目は margin-top を足して
 * gap に上乗せする。先頭に来たときは余白を作らない。
 */
.article-body h2,
.news-detail__body h2 {
  position: relative;
  margin-top: var(--space-800);
  padding-left: var(--space-600);
  font: 700 26px/1.6 var(--font-display);
  letter-spacing: .06em;
  color: var(--color-primary-deep);
}
.article-body h2::before,
.news-detail__body h2::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1.2em;
  background: var(--color-primary); border-radius: var(--radius-full);
}

.article-body h3,
.news-detail__body h3 {
  margin-top: var(--space-400);
  font: 700 20px/1.7 var(--font-base);
  letter-spacing: .04em;
  color: var(--color-primary-deep);
}

.article-body h2:first-child,
.article-body h3:first-child,
.news-detail__body h2:first-child,
.news-detail__body h3:first-child { margin-top: 0; }

/* 見出しの直後は gap だけで足りるので、段落側の余白は足さない */
.article-body h2 + p,
.article-body h3 + p,
.news-detail__body h2 + p,
.news-detail__body h3 + p { margin-top: 0; }

/* ---- 箇条書き ---- */

.article-body ul,
.article-body ol,
.news-detail__body ul,
.news-detail__body ol {
  display: flex; flex-direction: column; gap: var(--space-300);
  padding-left: var(--space-200);
  margin: 0;
}

.article-body li,
.news-detail__body li {
  font: 500 16px/1.9 var(--font-base);
  color: var(--color-text);
}

/* 点は小さな丸にする。既定の disc より控えめで、本文の字面に馴染む */
.article-body ul,
.news-detail__body ul { list-style: none; }
.article-body ul > li,
.news-detail__body ul > li {
  position: relative;
  padding-left: var(--space-400);
}
.article-body ul > li::before,
.news-detail__body ul > li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: 6px; height: 6px;
  background: var(--color-primary); border-radius: var(--radius-full);
}

/* 番号は本文と同じ色だと弱いので、見出しの色に寄せる */
.article-body ol,
.news-detail__body ol {
  list-style: decimal;
  padding-left: var(--space-800);
}
.article-body ol > li::marker,
.news-detail__body ol > li::marker {
  color: var(--color-primary-deep);
  font-weight: 700;
}

/* ---- 文中の強調・リンク ---- */

.article-body strong,
.news-detail__body strong {
  font-weight: 700;
  color: var(--color-primary-deep);
}

/* news.css が .news-detail__body a を持っているため、こちらは知恵袋とブログだけ */
.article-body a {
  color: var(--color-primary); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--color-secondary);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.article-body a:hover {
  color: var(--color-primary-deep);
  text-decoration-color: var(--color-primary-deep);
}

/* ---- 引用 ---- */

.article-body blockquote,
.news-detail__body blockquote {
  margin: 0;
  padding: var(--space-400) var(--space-600);
  border-left: 3px solid var(--color-secondary);
  background: var(--color-bg-soft);
  border-radius: 0 var(--radius-200) var(--radius-200) 0;
}
.article-body blockquote p,
.news-detail__body blockquote p {
  font-size: 16px;
  color: var(--color-text-soft);
}

/* ---- 本文内の画像 ---- */

.article-body figure { margin-block: var(--space-400); }
.article-body img { border-radius: var(--radius-400); margin-inline: auto; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 760px) {
  .article-body h2,
  .news-detail__body h2 { font-size: 22px; margin-top: var(--space-600); }
  .article-body h3,
  .news-detail__body h3 { font-size: 18px; }
  .article-body li,
  .news-detail__body li { font-size: 15px; }
}