/*
 * 記事本文のスタイル(N69)。
 *
 * theme.json で表現できないもの(表のセル・キャプション・要点/注意ボックス)だけを
 * ここに置く。配色は theme.json のパレット(base / contrast / gray-100 / gray-300 /
 * gray-600 / accent)の CSS 変数だけを使い、新しい色を足さない。
 *
 * ★大きさと余白に --wp--preset--font-size--* / --wp--preset--spacing--* を使わない(D230)。
 * 理由は2つある。
 * (1) 子テーマは自分の theme.json で同じスラッグを別の値に定義できる。
 * (2) スラッグの値がテーマの宣言どおりに出るとは限らない。theme.json v3 は
 *     defaultFontSizes / defaultSpacingSizes の既定が true で、WordPressコアの
 *     既定プリセットがテーマの宣言より優先される(N82・N83で実測)。
 *     文字サイズは依頼23で defaultFontSizes:false を入れて宣言どおりに直したが、
 *     余白(--wp--preset--spacing--*)は未対応で、いまも宣言と実効値が食い違っている。
 * 大きさ・余白は em/rem で書き、色だけを下の --lc-* 経由でパレットから引く。
 *
 * ※以前この節に「自社サイトの子テーマが large を 36px と定義しているため」と
 * 書いていたが、事実ではなかった。子テーマも親と同じ 1.25rem を宣言しており、
 * 36px はWordPressコアの既定値だった(N83で判明)。
 *
 * ★base.css とは別のファイル・別のハンドルにしている。
 * 子テーマ(localift-child-localift)は base.css を dequeue しているため
 * (LPの行間がずれるので意図的にそうしている)、記事のスタイルを base.css に
 * 入れると自社サイトの記事にだけ効かなくなる。
 */

/*
 * ★margin だけ :where() の外（N92）。
 * コアの :root :where(.is-layout-flow) > *{margin-block-start:24px;margin-block-end:0}
 * と > :first-child{margin-block-start:0} が (0,1,0)/(0,2,0) で当たるため、
 * :where() の中（0,0,0）だと必ず負けて余白が消える（本番で実際に起きた）。
 * .lc-blog を1つ足して (0,2,0) にし、後ろに置いて勝たせる。
 * margin 以外（色・線・字・display・gap）は包んだままなので、子テーマは上書きできる。
 */

/* --------------------------------------------------------------
 * 記事まわりで使う色。既存のパレットから引くだけで、新しい色は足さない。
 * 独自パレットを持つ子テーマは、この4つを読み替えれば全体がそろう。
 * ------------------------------------------------------------ */

:where(.wp-block-post-content, .doc, .ptoc, .prel, .pmeta) {
	--lc-rule: var(--wp--preset--color--gray-300, #d8d8d8);
	--lc-rule-strong: var(--wp--preset--color--gray-600, #5c5c5c);
	--lc-band: var(--wp--preset--color--gray-100, #f2f2f2);
	--lc-band-weak: var(--wp--preset--color--gray-100, #f2f2f2);
	--lc-muted: var(--wp--preset--color--gray-600, #5c5c5c);

	/*
	 * そのサイトのアクセント(N197・D446①)。
	 *
	 * ★`--wp--preset--color--accent` を直接書かない。
	 * **自社の子テーマ(localift-child-localift)には accent というスラッグが無い**
	 * (パレットが paper/ink/g/a…)。直接書くと、**親の仮の色 #3a5a7a が出る**——
	 * そのサイトのどこにも無い青が見出しの番号に付く(実測で見つけた)。
	 *
	 * ★accent が無いサイトでは、本文色(contrast)に倒す。
	 * **無い色を勝手に作らない。**番号は大きさと字間で見分けが付く。
	 *
	 * ★自社のように独自パレットのサイトは、compat.css に1行足せばそろう——
	 *     .lc-callout, .wp-block-post-content { --lc-accent: var(--wp--preset--color--a); }
	 *   `--lc-callout-line` を読み替えているのと同じ形（読み替え先は1か所）。
	 */
	--lc-accent: var(--wp--preset--color--accent, var(--wp--preset--color--contrast, #1e1e1e));

	/*
	 * 表の見出し行(N197・D446①)。
	 *
	 * ★「アクセント色の地＋白文字」は、そのままだとAAを割る。
	 * 実測(WCAG 2.1 相対輝度)——
	 *   localift-base の accent #3a5a7a × 白 =  7.18:1  ○
	 *   C001 の accent      #F5A524 × 白 =  2.04:1  ★×
	 *   自社の a            #e5a00f × 白 =  2.24:1  ★×
	 * **顧客のアクセントは明るい色のほうが多い。**そのまま白を載せると読めない。
	 *
	 * そこで **アクセントを45%暗くした色**を地にする。新しい色は足していない——
	 * 地は「そのサイトのアクセント」のままで、濃さだけを下げている。
	 *   #3a5a7a → #203243 × 白 = 13.14:1
	 *   #F5A524 → #875b14 × 白 =  5.94:1
	 *   #e5a00f → #7e5808 × 白 =  6.39:1
	 * ★35%では C001 が 4.58:1 と境目すれすれになるので採らない。
	 *
	 * ★color-mix() を読めないブラウザ向けに、先に本文色(contrast)を置く。
	 * どちらに転んでも白文字が読める側に倒す(素のアクセントには絶対に倒さない)。
	 */
	/*
	 * ★アクセントを45%暗くした色。地にも文字にも使う。
	 * 素のアクセントは **文字としても読めない**——実測で
	 * C001 #F5A524 を白地に置くと 2.04:1、自社 #e5a00f で 2.24:1（AAは4.5:1）。
	 * 見出しの番号のような小さい字ほど効くので、番号もこの色で出す。
	 */
	--lc-accent-deep: color-mix(in srgb, var(--lc-accent) 55%, #000000);

	--lc-th-bg: var(--wp--preset--color--contrast, #1e1e1e);
	--lc-th-ink: var(--wp--preset--color--base, #ffffff);
}

/* --------------------------------------------------------------
 * 見出し(h2 / h3)
 *
 * 「本文の太字と見分けにくい」への対処(N72)。区切り線と余白に加えて、
 * ★記事本文の見出しの大きさもここが持つ(N82・依頼1)。
 *
 * もともとは「大きさは theme.json 側で付ける」としていたが、theme.json の
 * elements.h2 は --wp--preset--font-size--xx-large(2.5rem=40px)を引いており、
 * 記事本文の見出しとしては大きすぎた(雛形の子テーマで実測。360pxの画面では
 * 見出しだけで2〜3行に折り返し、h3も36pxでh2とほとんど差が無かった)。
 * D230「親テーマでプリセットのスラッグを大きさの基準に使わない」が、
 * このファイルには適用されていながら theme.json には適用されていなかった。
 *
 * 値は自社サイトのPC表示(21px)を基準にしている。机の上で決めた数字ではなく、
 * すでに実地で読まれている紙面の値を親の既定にする。
 *
 * ★.doc h2 には大きさを付けない(付ける対象は .wp-block-post-content だけ)。
 * 加えて、このファイルの「既定」は :where() で包んで詳細度を下げてある(N83・依頼3)。
 * これで自社の site.css の .doc h2(0,1,1)が勝ち、自社サイトは 18px/PC 21px のまま。
 * 顧客サイト(子テーマが何も上書きしていない)では、下の 1.375rem が効く。
 * ------------------------------------------------------------ */

:where(.doc h2, .wp-block-post-content h2) {
	padding-top: 0.6em;
	border-top: 1px solid var(--lc-rule);
}

/*
 * 大きさは記事本文にだけ。remで書き、プリセットのスラッグは使わない(D230)。
 *
 * ★ここだけ :where() の外に要素名を出している(N83・依頼3)。
 * theme.json の elements.h2 は `h2{font-size:2.5rem}` という素の要素セレクタ
 * (詳細度 0,0,1)で出る。セレクタ全体を :where() で包むと詳細度が 0,0,0 になり、
 * theme.json のほうが勝って本文の見出しが40pxに戻る(雛形で実測して確認した)。
 *
 * 詳細度の計算(N86でコメントに残すことにした)——
 *
 *   theme.json                     h2                          = (0,0,1)
 *   ここ                           :where(.wp-block-post-content) h2
 *                                  :where(…)=0 + h2=要素1つ     = (0,0,1)
 *   自社の site.css                .doc h2 = クラス1+要素1      = (0,1,1)
 *
 * theme.json と ★同点★ なので、あとから読み込まれる article.css が勝つ。
 * `.doc h2` は上回るので、子テーマの上書きは今までどおり効く。
 *
 * ★「:where() の入れ忘れ」ではない。
 * `:where(.wp-block-post-content h2)` と書くと (0,0,0) になり、
 * theme.json の h2(0,0,1)に負けて40pxに戻る。実測で確認済み(N83)。
 * 同じ理由で、リンク・カードの見出し・関連記事の見出しも要素名を外に出してある。
 */
:where(.wp-block-post-content) h2 {
	font-size: 1.375rem;
}

:where(.wp-block-post-content) h3 {
	font-size: 1.125rem;
}

/*
 * h2 に通し番号を付ける(N197・D446①)。
 *
 * ★原稿もブロックも変えない。CSSのカウンタだけで出す。
 * 原稿に「01」と書かせると、途中に節を足したときに全部書き直しになり、
 * lc copy-check の数字の突き合わせにも番号が混ざる。
 *
 * ★`.lc-blog` の中だけに効かせる。
 * `.wp-block-post-content` は**固定ページにもある**（C001のトップも `wp:post-content`）。
 * 範囲を切らないと、トップの「2つのかたちで、運びます。」に 01 が付く。
 * `.lc-blog` は single / archive / home / search の `<main>` にだけ付く（親テーマのテンプレート）。
 *
 * ★番号は飾りなので読み上げに入れない（aria-hidden にできないので、
 * content に空の alt テキストを添える）。見出しの文そのものは変わらない。
 */
:where(.lc-blog .wp-block-post-content) {
	counter-reset: lc-h2;
}

:where(.lc-blog .wp-block-post-content) h2 {
	counter-increment: lc-h2;
}

:where(.lc-blog .wp-block-post-content h2)::before {
	content: counter(lc-h2, decimal-leading-zero) " " / "";
	margin-right: 0.5em;
	color: var(--lc-accent);
	color: var(--lc-accent-deep);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* 強調は太さだけ。色は変えない(多用されても画面が汚れないように) */
:where(.doc strong, .wp-block-post-content strong) {
	font-weight: 700;
}

/* --------------------------------------------------------------
 * 表(core/table)
 * theme.json はブロック全体にしか効かないため、th/td はここで指定する。
 * ------------------------------------------------------------ */

.wp-block-table {
	/* 横に長い表はスマホで横スクロールさせる(セルを潰して読めなくしない) */
	overflow-x: auto;
}

:where(.wp-block-table table) {
	width: 100%;
	border-collapse: collapse;
}

:where(.wp-block-table th, .wp-block-table td) {
	padding: 0.7em 1em;
	/* 罫線は横罫だけ。格子にすると読みにくくなるが、行の区切りは見えるようにする */
	border: 0;
	border-bottom: 1px solid var(--lc-rule);
	text-align: left;
	vertical-align: top;
}

:where(.wp-block-table th) {
	/* ★先に置くほうが「読めるが地味」な側。color-mix() を読めないブラウザはこちらで止まる */
	background: var(--lc-th-bg);
	background: var(--lc-accent-deep);
	color: var(--lc-th-ink);
	font-weight: 700;
	white-space: nowrap;
	/* 見出し行の下は、地の濃さで十分に分かれるので細くする */
	border-bottom: 1px solid var(--lc-rule);
}

/* 1行おきの薄い背景。横に長い表で行を追いやすくする */
:where(.wp-block-table tbody tr:nth-child(even)) {
	background: var(--lc-band-weak);
}

/*
 * 結論の行(N209・D458)。
 *
 * ★判定はPHP側(inc/table.php)。**その行のセルが全部、太字だけでできているか**で決める。
 * 記号では判定しない(D417⑤)。全行が当てはまったら1行も反転しない（対比にならないため）。
 *
 * ★色は見出し行と同じ「アクセントを45%暗くした地＋白文字」。
 * 新しい色は足さない。**表の中で濃いのは見出し行と結論の行の2つだけ**にする。
 *
 * ★1行おきの薄い背景より後ろに置いて勝たせる（同じ詳細度なので順番で決まる）。
 */
:where(.wp-block-table tbody tr.lc-row-conclusion) {
	background: var(--lc-th-bg);
	background: var(--lc-accent-deep);
}

:where(.wp-block-table tbody tr.lc-row-conclusion td) {
	border-bottom-color: transparent;
	color: var(--lc-th-ink);
}

/* 太字は地が濃いぶん、字を太らせすぎない（濃い地の上では細いほうが読みやすい） */
:where(.wp-block-table tbody tr.lc-row-conclusion td strong) {
	font-weight: 700;
}

/* --------------------------------------------------------------
 * 画像の説明文(キャプション)
 * ------------------------------------------------------------ */

:where(.wp-block-image figcaption) {
	margin-top: 0.6em;
	color: var(--lc-muted);
	font-size: 0.875em;
	line-height: 1.7;
	text-align: left;
}

.wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------
 * 要点ボックス・注意ボックス(N69・依頼2)
 *
 * 中身は core/group + core/paragraph だけで組んである。当社のテーマが外れても
 * 段落として読めるまま残る(利用規約 別表3の譲渡を想定)。ここは見た目だけを足す。
 * ------------------------------------------------------------ */

:where(.lc-callout) {
	/*
	 * 色は「差し替えできる3つの変数」に逃がしてから使う。
	 *
	 * 既定はこのテーマ(localift-base)のパレット。顧客サイトの子テーマ
	 * (localift-child-sample系)はパレットを上書きしないので、そのまま効く。
	 * 自社サイトの子テーマだけは独自のパレット(paper/ink/g/a…)を持っていて
	 * 親のスラッグが存在しないため、子テーマ側の compat.css でこの3つを
	 * 自分のパレットに読み替えている。新しい色は足していない。
	 */
	--lc-callout-line: var(--wp--preset--color--accent, #3a5a7a);
	--lc-callout-bg: var(--wp--preset--color--gray-100, #f2f2f2);
	--lc-callout-strong: var(--wp--preset--color--contrast, #1e1e1e);

	padding: 1.2em 1.4em;
	border-radius: 2px;
}

.lc-blog .lc-callout {
	margin: 2em 0;
}

:where(.lc-callout > *:first-child) {
	margin-top: 0;
}

:where(.lc-callout > *:last-child) {
	margin-bottom: 0;
}

/*
 * 要点: 左にアクセントの太い縦線＋アクセントの薄い地(N197・D446①)。
 *
 * ★いままでは gray-100 で、注意ボックスとほとんど同じ強さに見えた。
 * 地をアクセントの薄い色にすると、**帯6pxだけだったアクセントが面で効く。**
 *
 * ★薄さは10%。実測で本文色との比は 14.42:1 / 15.19:1 / 16.94:1（3パレット）で、
 * どれもAAに余裕がある。色は `--lc-callout-line` から作るので、
 * 自社の compat.css が3変数を読み替えていれば、そのまま自社の色で薄地になる
 * （読み替え先を2か所に書かない・N118）。
 *
 * ★color-mix() を読めないブラウザは、いままでどおり --lc-callout-bg で止まる。
 */
:where(.lc-callout--point) {
	border-left: 6px solid var(--lc-callout-line);
	background: var(--lc-callout-bg);
	background: color-mix(in srgb, var(--lc-callout-line) 10%, var(--wp--preset--color--base, #ffffff));
}

/* 注意: 左に本文色の太い縦線＋背景なし。「注意」の見出しは本文側で出している */
:where(.lc-callout--caution) {
	border-left: 6px solid var(--lc-callout-strong);
	background: transparent;
}

/* 「注意」の見出しを目立たせる(小さく薄くせず、はっきり出す) */
:where(.lc-callout--caution > p:first-child) {
	margin-bottom: 0.5em;
	letter-spacing: 0.08em;
}

:where(.lc-callout--caution > p:first-child strong) {
	display: inline-block;
	border-radius: 2px;
	font-size: 0.8em;
}

/*
 * ★「注意」の札の地・字・余白だけは :where() の外（N329・D668）。
 *
 * 地と字は**2つで1組**。子テーマが `strong` に地だけを付けると（蛍光ペンの下線など）、
 * 字は白のまま地だけが替わり、白い字が白い地に乗って読めなくなる。実際に2社とも起きた——
 *   自社：site.css の `.doc strong{color:ink}` → ink × ink = 1:1（N328a）
 *   C001：site.css の 782px 以下の `.sec p strong{background:linear-gradient(…)}` → 白 × 白 = 1:1
 * 子テーマが `strong` を飾るのはよくあることなので、30社のどこでも起きうる。
 * そこで (0,2,2) にして、`.sec p strong`（0,1,2）のような飾りには勝たせる。
 * 子テーマが札そのものを変えたいときは、これより強い宣言で書けばよい。
 */
.lc-callout--caution > p:first-child strong {
	padding: 0.15em 0.7em;
	background: var(--lc-callout-strong);
	color: var(--wp--preset--color--base, #fff);
}

/* --------------------------------------------------------------
 * 本文の図(N197・D446②)
 *
 * ★図の中に文字を入れない。
 * SVGの中の文字は、翻訳もされず、検索にも読まれず、拡大しても本文と同じ大きさにならない。
 * ラベルは図の外（figcaption）に置き、図は形だけを持つ。
 *
 * ★図は「原稿に名前だけ書き、実体はテーマが持つ」形。
 * 原稿に任意のHTMLが入る入口を開けると、lc copy-check も検査も効かなくなる
 * （markdown-to-blocks.js の html:false はそのまま）。
 * ------------------------------------------------------------ */

.lc-figure {
	margin: 2em 0;
}

:where(.lc-figure) {
	padding: 1.2em 1.4em;
	border: 1px solid var(--lc-rule);
	border-radius: 2px;
	background: var(--wp--preset--color--base, #ffffff);
	text-align: center;
}

:where(.lc-figure svg) {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto;
}

/* 図が出せないときの知らせ（編集できる人にだけ出る・D431②） */
:where(.lc-figure-problem) {
	margin: 2em 0;
	padding: 1em 1.2em;
	border-left: 6px solid var(--lc-callout-strong, #1e1e1e);
	background: var(--lc-band);
	color: var(--wp--preset--color--contrast, #1e1e1e);
	font-size: 0.9375em;
	line-height: 1.7;
}

/* ラベルは図の外。キャプションと同じ見た目にそろえる */
:where(.lc-figure figcaption) {
	margin-top: 0.8em;
	color: var(--lc-muted);
	font-size: 0.875em;
	line-height: 1.7;
	text-align: left;
}

/* --------------------------------------------------------------
 * 記事ページの構成(N72・依頼1)
 * 目次・著者/更新日・関連記事。見た目は既存の .sub / .doc に合わせる。
 * ------------------------------------------------------------ */

/* 著者と日付 */
:where(.pmeta) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.2em;
}

/* 目次: h2だけを並べる。JavaScriptは使わない */
:where(.ptoc) {
	padding: 1.2em 1.4em;
	border: 1px solid var(--lc-rule);
	border-radius: 2px;
	background: var(--lc-band-weak);
}

.lc-blog .ptoc {
	margin: 0 0 2em;
}

:where(.ptoc__t) {
	margin: 0 0 0.6em;
	font-weight: 700;
}

:where(.ptoc__l) {
	margin: 0;
	padding-left: 1.4em;
}

:where(.ptoc__l li) {
	margin: 0.35em 0;
	line-height: 1.7;
}

/* 関連記事: 本文のあと */
:where(.prel) {
	padding-top: 1.5em;
	border-top: 1px solid var(--lc-rule);
}

.lc-blog .prel {
	margin-top: 3em;
}

/* 関連記事の見出しも <h2>。上と同じ理由で要素名を :where() の外に出す */
:where(.prel) h2.prel__t {
	margin: 0 0 0.8em;
	padding-top: 0;
	border-top: 0;
	font-size: 1.25em;
}

:where(.prel__l) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.prel__l li) {
	padding: 0.6em 0;
	border-bottom: 1px solid var(--lc-rule);
	line-height: 1.7;
}

:where(.prel__d) {
	display: block;
	color: var(--lc-muted);
	font-size: 0.85em;
}