/* ====================================================================
 * article.css — 記事本文タイポグラフィ（フェーズA-1）
 *
 * 仕様の正: gtm/branding/body-typography-spec（v0.2・2026-07-02 approved-draft）
 * トークンの正: v1.1-draft.md（design-tokens.core.css へ写経済み）
 *
 * スコープ: .article 配下（通常投稿・固定ページ・CPT単記事）。
 *   会員エリアは .article 不使用のため構造的に対象外。
 *   トップ（page-id-785）は enqueue 条件で除外（home.css が担当）。
 *   例外: 末尾「A-1追補: 記事周辺UI」のみ .article 外
 *   （シェアボタン・サイドバー見出し。スキン旧装飾の置換）。
 * 読込順: priority 20・deps: pb1-design-tokens-core（functions.php）。
 * 禁止: コンポーネント名トークン（--font-size-paddle-card 等）の直参照。
 *   必ず --font-size-article-* エイリアスを使う（Plato条件・仕様 §3.12）。
 * ==================================================================== */

/* ---- §3.9 本文の行間・字間・段落余白（Step B と同値の .article 展開）---- */
.article {
  line-height: 1.7;             /* v1.1-draft §2.4 body */
  letter-spacing: 0.04em;       /* §2.5 ja-body */
  font-size: 1rem;              /* --base-font-size 16px 維持（SP縮小の既存ルールも維持） */
}
.article .entry-content > * {
  line-height: 1.7;             /* 既存 `.entry-content > *`（1.8）を特異度で上回り仕様値1.7を通す（pre実測 2026-07-02） */
}
.article h1, .article h2, .article h3,
.article h4, .article h5, .article h6 {
  line-height: 1.6;             /* §2.4 tight */
  letter-spacing: 0.06em;       /* §2.5 ja-heading */
  word-break: keep-all;
  overflow-wrap: anywhere;      /* §2.7 禁則 */
}
.article .entry-content > h1, .article .entry-content > h2,
.article .entry-content > h3, .article .entry-content > h4,
.article .entry-content > h5, .article .entry-content > h6 {
  line-height: 1.6;             /* 上の `> *` 1.7 が見出しへ勝たないよう同特異度で再指定 */
}
.article p {
  margin-bottom: 1.5em;
}

/* ---- §3.1 記事タイトル（H1）: 装飾ボーダー全廃・素のボールド ---- */
.article h1.entry-title,
.article h1 {
  background: none;
  border: none;
  border-bottom: none;
  margin: 0 0 var(--space-title-bottom);
  padding: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-article-h1);
}

/* ---- §3.2 本文見出し H2: ブランドブルー太字＋オレンジ丸ドット ----
 * ドットは 10px＝content-Title と同寸（ドットは 10px/4px の2段のみ・第3変種禁止）。*/
.article h2 {
  position: relative;
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  width: auto;
  margin: 2.5em 0 1em;
  padding: 0 0 0 24px;
  color: var(--color-title-on-white);        /* = brand-blue */
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-article-h2);
}
.article h2::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  background: var(--color-dot-on-white);     /* = brand-orange */
  background-image: none;
  border-radius: var(--radius-circle);
}
.article h2::after {
  content: none;                             /* Cocoon親の::after装飾打消し */
}

/* ---- §3.3 本文見出し H3: 本文色太字＋3pxブルー左ボーダー（tab-Wrapper と同太さ）---- */
.article h3 {
  background: none;
  background-image: none;
  border: none;
  border-left: 3px solid var(--color-brand-blue);
  border-radius: 0;
  margin: 2em 0 0.75em;
  padding: 0.2em 0 0.2em 16px;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-article-h3);
}

/* ---- §3.4 H4以下: 装飾なし太字（H2ドット→H3縦線→H4素の引き算階層）---- */
.article h4,
.article h5,
.article h6 {
  background: none;
  border: none;
  margin: 1.75em 0 0.5em;
  padding: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: 1.0625rem;   /* 17px。本文16pxとの最小差分 */
}
.article h4::before, .article h4::after,
.article h5::before, .article h5::after,
.article h6::before, .article h6::after {
  content: none;   /* skin-samuraiblue-muji の飾り正方形・部分下線バーの残存打消し（pre実測 2026-07-02） */
}

/* ---- §3.5 目次: News タブの型を移植（3pxブルー枠＋非対称radius）----
 * 非対称radius＝「PB1のカードは左上が立つ」シグネチャの形の引用。
 * 幅は Cocoon 親の display:table（内容幅）を維持（width/display は上書きしない）。*/
.article .toc {
  position: relative;   /* ::before オレンジアクセントの基準 */
  background: var(--color-brand-white);
  border: 3px solid var(--color-brand-blue);
  border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
  padding: var(--space-card-padding);
}
.article .toc::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 64px;
  height: 3px;
  background: var(--color-brand-orange);   /* 上辺左端の部分オレンジ＝シャープな左上角のアクセント（2026-07-02 ユーザーA案確定） */
}
.article .toc-title,
.article label.toc-title {
  background: none;
  background-image: none;
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-bold);
}
.article .toc a {
  color: var(--color-text-primary);
  text-decoration: none;
}
.article .toc a:hover {
  color: var(--color-blue-light);
}
.article .toc .toc-content {
  background: none;
  background-image: none;   /* Cocoonスキン（samuraiblue-muji）の左下・右下三角形グラデ打消し（pre実測 2026-07-02） */
  border: none;             /* 同スキンの灰色1px枠打消し（.toc 側の3pxブルー枠と二重になるため） */
  border-radius: 0;
}

/* ---- §3.6 通常表: th＝ブランドブルーベタ＋白文字（AAA 10.4:1）----
 * 対象は「本文エディタ由来の表」に限定: entry-content 直下の class なし table ＋
 * Gutenberg の figure.wp-block-table 内 table。
 * 旧 `.article table th` は広すぎ、CPT情報表（tournament-info 等・style.css の淡ブルーを
 * 同特異度後勝ちで上書き）とアーカイブ一覧カード内の表（無変化要件違反）へ波及したため
 * 限定した（pre実測 2026-07-02）。CPT表の淡ブルーは style.css の値差替えが正。
 * table への radius 付与は border-collapse 制約により行わない（仕様 §3.6）。
 * `.scrollable-table > table:not([class])` 枝は固定ページ（クラシックエディタ製・
 * Cocoonの「レスポンシブテーブル」設定で div.scrollable-table にラップされる）用。
 * 既存の `> table:not([class])` 直子枝は同設定OFF時（scrollable-tableラップ無し）の
 * フォールバックであり削除禁止。*/
.article .entry-content > table:not([class]) th,
.article .entry-content > .scrollable-table > table:not([class]) th,
.article .entry-content > figure.wp-block-table table th {
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
  border: 1px solid var(--color-blue-pale);
}
.article .entry-content > table:not([class]) td,
.article .entry-content > .scrollable-table > table:not([class]) td,
.article .entry-content > figure.wp-block-table table td {
  border: 1px solid var(--color-blue-pale);
}

/* ---- §3.7 blockquote: 淡ブルー面＋radius-card のフラットカード ---- */
.article blockquote {
  background: var(--color-blue-pale);
  border: none;
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
  color: var(--color-text-primary);
}
.article blockquote::before,
.article blockquote::after {
  content: none;   /* Cocoon引用アイコンの打消し */
}

/* ---- §3.8 リスト・本文リンク・強調 ----
 * リンクは p a / li a / td a に限定（Cocoonカード型リンク・ボタンブロックへの波及防止）。
 * Cocoonマーカー装飾（.marker 等）・ボックス・吹き出しは本仕様では触らない（論点3 A案確定）。*/
.article ul > li::marker {
  color: var(--color-brand-orange);
}
.article ol > li::marker {
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-bold);
}
.article ul,
.article ol {
  margin-bottom: 1.5em;
}

.article p a,
.article li a,
.article td a {
  color: var(--color-blue-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--t-base);
}
.article p a:hover,
.article li a:hover,
.article td a:hover {
  color: var(--color-brand-blue);
}

.article mark {
  background: var(--color-highlight-mark);
}

/* ---- §3.10 画像: radius-card（20px）展開 ----
 * .no-radius 使用可否基準: スクリーンショット・バナー・図表など「写真でない矩形素材」のみ使用可。
 * 通常の写真・サムネへの使用は不可（radius-card が既定）。既存記事のHTML編集は不要（例外救済用）。*/
.article .entry-content img,
.article figure img,
.article .wp-post-image {
  border-radius: var(--radius-card);
}
.article img.no-radius {
  border-radius: 0;
}

/* ====================================================================
 * A-1追補: 記事周辺UI（シェアボタン・サイドバー見出し）
 * 本文（.article）スコープ外だが、skin-samuraiblue-muji の旧装飾が
 * 残存していた記事周辺UIを新デザイン言語へ統一する（2026-07-02 ユーザー承認）。
 * article.css は home 以外の全ページで enqueue されるため一覧ページにも効く。
 * ==================================================================== */

/* ---- シェアボタン: ピル型アウトライン（DESIGN §4.6「ボタンはピル」）----
 * スキンの `#container .sns-buttons a`（濃紺ベタ角矩形）を id 込み同等以上の
 * 特異度で上書き。hover はベタ反転（白文字 AAA 10.4:1）。*/
#container .sns-share .sns-buttons a {
  background: var(--color-brand-white);
  background-image: none;
  color: var(--color-brand-blue);
  border: 1px solid var(--color-brand-blue);
  border-radius: var(--radius-button);            /* 60px ピル */
  transition: background-color var(--t-base), color var(--t-base);
}
#container .sns-share .sns-buttons a:hover {
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
}

/* ---- サイドバー見出し: 本文H2と同型（オレンジ10pxドット＋ブランドブルー太字）----
 * サイドバータイトルはトップ content-Title と同役割のセクション見出し。
 * ドットは 10px＝content-Title / 本文H2 と同寸（10px/4px の2段のみ・第3変種禁止）。
 * スキンの6px二重下線＋回転正方形2個（::before/::after）を打消し。*/
.sidebar h2,
.sidebar h3 {
  position: relative;
  background: none;
  border: none;
  border-bottom: none;
  padding: 0 0 0 24px;
  color: var(--color-title-on-white);             /* = brand-blue */
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.sidebar h2::before,
.sidebar h3::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  margin: 0;
  background: var(--color-dot-on-white);          /* = brand-orange */
  border-radius: var(--radius-circle);
  transform: none;                                /* スキンの rotate(50deg) 打消し */
}
.sidebar h2::after,
.sidebar h3::after {
  content: none;                                  /* スキンの第2の正方形打消し */
}

/* ---- パンくず: ミニマル＋先頭4pxオレンジドット（B案・2026-07-02 ユーザー確定）----
 * Cocoon既定のFAアイコン（fa-home/fa-folder）を撤去し白帯を透過。
 * 区切りはスラッシュ・先頭ドットは4px＝10px/4pxの2段の小サイズ側（第3変種なし）。*/
#breadcrumb {
  background: transparent;
}
#breadcrumb::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  vertical-align: 2px;
  background: var(--color-dot-on-white);          /* = brand-orange */
  border-radius: var(--radius-circle);
}
#breadcrumb .fa {
  display: none;
}
#breadcrumb .breadcrumb-sep {
  font-size: 0;                                   /* 既定の「>」テキストを消す */
}
#breadcrumb .breadcrumb-sep::before {
  content: "/";
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 8px;
}
#breadcrumb a:hover {
  color: var(--color-brand-blue);
}
@media screen and (max-width: 767px) {
  #breadcrumb {
    margin-top: 24px;   /* SPでヘッダーとの近接を緩和（2026-07-03 ユーザー指定値） */
  }
}

/* ---- 上に戻るボタン: ブランドブルー正円＋単一シェブロン（A案・2026-07-03 ユーザー確定）----
 * Cocoon既定（灰色#eee・角丸5px・二重山形»）を置換。
 * PCは #go-to-top(fixed right:10px) が右レール #main-Nav(幅101px・z-index10万台)の
 * 背面に完全に隠れ実質不可視だったため、レール左隣へ移設（右レールのない会員エリアは
 * 既存調整 bottom:80px/right:4px を維持するため除外）。SPは既存調整
 * （style.css: right:7px / bottom:calc(52px+12px) / z-index:100）を維持。*/
.go-to-top-button {
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
  border: none;
  border-radius: var(--radius-circle);
  width: 48px;
  height: 48px;
  transition: background-color var(--t-base);
}
.go-to-top-button:hover {
  background: var(--color-blue-light);
  color: var(--color-brand-white);
}
.go-to-top-button .fa-angle-double-up::before {
  content: "\f106";   /* 二重山形 » → 単一シェブロン ^（FA4 angle-up） */
}
@media screen and (min-width: 835px) {
  body:not(#members):not(.cat-members) #go-to-top {
    right: 117px;   /* 右レール101px + 16px */
    bottom: 16px;
  }
}