/*
 * 後から足すページ(記事一覧・カテゴリ・検索結果・404)のスタイル(N73・依頼19)。
 *
 * ★なぜ親テーマに置くのか
 * 契約後にページを足すのは日常(ブログ・お知らせ・メニュー・採用)で、
 * 「後から足したページだけ見た目が違う」が30社すべてで起きる。これを防ぐには
 * 型もスタイルも親が持ち、子テーマは色と字だけを渡す形にしておく必要がある。
 * 子テーマ側にCSSを写す形にすると、雛形から作った顧客サイトが写し忘れたときに
 * 素のWordPressの見た目に戻ってしまう。
 *
 * ★base.css とは別のファイル・別のハンドル(article.css と同じ理由)
 * 子テーマ(localift-child-localift)はLPの行間がずれるのを避けるため
 * `localift-base-styles` を dequeue している。ここに書いたものを base.css に
 * 混ぜると、自社サイトのブログにだけ効かなくなる。
 *
 * ★色は「子テーマが定義していればそれを使い、無ければ既定値」の形で書く
 * var(--card, #fff) のように必ず既定値を添える。自社サイトの子テーマは
 * --card / --line / --g / --a … を :root で定義済みなので自動でその配色になり、
 * 何も定義していない子テーマ(localift-child-sample)でも色が消えない。
 * 挿絵のSVGが使う8変数(--card --line --g --ill-m --ill-l --a --a2 --ashadow)も同じ。
 *
 * ★大きさと余白に --wp--preset--* を使わない(依頼18で分かったこと)
 * 子テーマは同じスラッグを別の値で定義できるため、プリセットで書くと
 * テーマごとに見た目が変わる。px/em/remで書く。
 */

/*
 * ★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）は包んだままなので、子テーマは上書きできる。
 */

/* --------------------------------------------------------------
 * 挿絵と一覧で使う色の既定値。
 * 子テーマの :root が後から読み込まれて上書きするので、ここは「土台」。
 * ------------------------------------------------------------ */

/*
 * ★挿絵のSVGが使う変数の既定値(依頼3)。
 *
 * SVGの中は fill="var(--card)" のように「素の変数名」で書いてある(見本と同じ)。
 * SVGの属性値には var() のフォールバックを書けないため、変数が未定義だと
 * 色が解決できず、挿絵がまっ黒に塗りつぶされる
 * (localift-child-sample を有効にして実際にそうなることを確認した)。
 *
 * そこで素の名前の既定値をここで定義する。子テーマの site.css は
 * これより後に読み込まれるので、自社サイトや顧客サイトが :root で
 * 同じ名前を定義していれば、そのままその配色で上書きされる。
 */
:where(:root) {
	--card: #ffffff;
	--paper: #ffffff;
	--ink: #1e1e1e;
	--ink2: #3f3f52;
	--mut: #6b6b7b;
	--line: #e3e3ec;
	--line2: #d3d3e0;
	--soft: #f6f6fa;
	--soft2: #eef0f8;
	--g: #3a5a7a;
	--gd: #2b445d;
	--a: #f0a92a;
	--a2: #fdf6e6;
	--ashadow: #c98a1c;
	--ill-m: #b9bdd6;
	--ill-l: #dcdfee;
}

:where(:root) {
	--lc-blog-paper: var( --paper, #ffffff );
	--lc-blog-card: var( --card, #ffffff );
	--lc-blog-ink: var( --ink, #1e1e1e );
	--lc-blog-ink2: var( --ink2, #3f3f52 );
	--lc-blog-mut: var( --mut, #6b6b7b );
	--lc-blog-line: var( --line, #e3e3ec );
	--lc-blog-line2: var( --line2, #d3d3e0 );
	--lc-blog-soft: var( --soft, #f6f6fa );
	--lc-blog-soft2: var( --soft2, #eef0f8 );
	--lc-blog-g: var( --g, #3a5a7a );
	--lc-blog-gd: var( --gd, #2b445d );
}

/* --------------------------------------------------------------
 * ★:where() の使い分け(N83・N86)。次に触る人へ。
 *
 * このファイルと article.css の「既定値」は :where() で包んで詳細度を0にしてある。
 * 子テーマが読み込み順に関係なく上書きできるようにするため(D241)。
 *
 * ただし ★セレクタの末尾が「要素名・擬似クラス・属性」のものは、
 * それを :where() の外に出してある。書き忘れではない。
 *
 *   :where(.crumb) a      ← 正しい (0,0,1)
 *   :where(.crumb a)      ← これだと (0,0,0) になって効かない
 *
 * theme.json が出すCSSは素の要素セレクタだから——
 *   a:where(:not(.wp-element-button)){text-decoration:underline}  (0,0,1)
 *   h2{font-size:2.5rem}                                          (0,0,1)
 * セレクタごと包むと (0,0,0) になり、theme.json のほうが勝つ。
 * 実際、依頼23で全部包んだときに、カードのリンクに下線が付き、
 * 見出しが40pxに戻った(実測して見つけた)。
 *
 * 0,0,1 にしておけば theme.json と同点になり、あとから読み込まれるこちらが勝つ。
 * それでいて子テーマの .doc h2 や .bl__t(0,1,x)には負けるので、
 * 「顧客ごとに変えてよい」も保てる。
 *
 * ★例外は、子テーマの飾りに負けると読めなくなる所——カードの題名と絞り込み(N334)。
 * ここだけは :where() の外に出してあり、変えたいときの書き方をそれぞれの注釈に書いた。
 * ------------------------------------------------------------ */

/* --------------------------------------------------------------
 * 共通の器。
 *
 * .sub(パンくず＋アイキャッチ文字＋h1＋リード)は、LPの11枚と共通の器。
 * これが無いから後から足したページが浮いていた(N73)。
 * 自社サイトは site.css が同じ名前で上書きするので、ここは
 * 「何も持っていない子テーマでも型が成立する」ための最低限。
 * ------------------------------------------------------------ */

/*
 * ★box-sizingは「仕様」なので :where() で包まない(N83・依頼3)。
 * width:100% と padding:0 18px を併せると、既定の content-box では
 * 左右18pxずつが幅の外に足され、360pxの画面で36pxはみ出す
 * (scrollWidth=396 / clientWidth=360 を実測・N80)。
 * 負けると横スクロールが出て画面が壊れるため、子テーマに譲らない。
 */
.lc-blog .wrap,
.sub .wrap {
	box-sizing: border-box;
}

/* 幅と余白は「既定」。顧客ごとに変えてよいので :where() で包む */
:where(.lc-blog .wrap, .sub .wrap) {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 18px;
	position: relative;
}

:where(.sub) {
	padding: 26px 0 34px;
	background: var( --lc-blog-soft );
	border-bottom: 1px solid var( --lc-blog-line );
}

:where(.crumb) {
	margin-bottom: 10px;
	color: var( --lc-blog-mut );
	font-size: 11.5px;
}

:where(.crumb) a {
	color: inherit;
}

:where(.crumb span) {
	margin: 0 0.4em;
}

:where(.sub__eb) {
	display: block;
	margin-bottom: 6px;
	color: var( --lc-blog-g );
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
}

:where(.sub h1) {
	margin: 0;
}

:where(.sub__l) {
	max-width: 70ch;
	color: var( --lc-blog-ink2 );
	font-size: 14px;
	line-height: 1.85;
}

:where(.sec) {
	padding: 52px 0;
	position: relative;
}

:where(.sec--sub) {
	padding: 34px 0 48px;
}

/*
 * 読み物の幅(N80・依頼21)。記事ページの本文は一覧より狭くする。
 * 1行が長すぎると目が戻る位置を見失うため。
 */
:where(.lc-blog .narrow) {
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
}

/* --------------------------------------------------------------
 * 記事一覧のカード(依頼2)
 * 3列 →(900px以下)2列 →(640px以下)1列。
 * カード全体が1つのリンクで、中に別のリンクを入れない(入れ子は不正なHTML)。
 * ------------------------------------------------------------ */

:where(.bl) {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
	padding: 0;
	list-style: none;
}

.lc-blog .bl {
	margin: 6px 0 0;
}

/*
 * カード1枚。core/post-template が出す <li class="wp-block-post …"> にも同じ見た目を
 * 当てる(post-templateは1件ごとにclassを足すAPIを持たないため、見本の .bl__c と
 * 「.bl の直下のli」の両方を対象にしている)。
 */
/*
 * core/post-template は is-layout-flow を付けるため、WordPress側の
 * 「2つ目以降に上の余白を足す」規則が効いてカードの頭がそろわない。
 * グリッドの隙間は .bl の gap で付けているので、ここで打ち消す。
 */
.bl > li,
.bl > li + li {
	margin-block-start: 0;
	margin-block-end: 0;
}

:where(.bl__c, .bl > li) {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var( --lc-blog-line );
	border-radius: 16px;
	background: var( --lc-blog-card );
	overflow: hidden;
}

:where(.bl__c) a, :where(.bl) > li a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

:where(.bl__ill) {
	display: grid;
	place-items: center;
	padding: 14px;
	border-bottom: 1px solid var( --lc-blog-line );
	background: var( --lc-blog-soft );
	aspect-ratio: 16 / 9;
}

:where(.bl__ill svg, .bl__ill img) {
	width: 100%;
	height: 100%;
	max-height: 132px;
	object-fit: cover;
}

:where(.bl__b) {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 18px;
}

:where(.bl__cat) {
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 999px;
	background: var( --lc-blog-soft2 );
	color: var( --lc-blog-gd );
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/*
 * ★カードの題名は、字の大きさ・太さ・行間・色・余白を :where() の外に出す(N334・N329 と同じ形)。
 *
 * 題名は <h2> なので、子テーマのセクション見出しの飾りがそのまま当たる。
 * C001 では子テーマの .sec h2{font-size:30px;font-weight:900}(0,1,1・後から読まれる)が
 * 親の :where(.bl) h2.bl__t(0,1,1)に勝ち、1枚の題名が30pxで4行に膨らんでいた。
 * .bl .bl__t(0,2,0)にして、.sec h2 や theme.json の h2{font-size:2.5rem}(0,0,1)に負けないようにする。
 * ★子テーマが一覧のカードをわざと変えたいときは .lc-blog .bl .bl__t(0,3,0)で書く。
 */
.bl .bl__t {
	margin: 0;
	color: var( --lc-blog-ink );
	font-size: 17px;
	font-weight: 800;
	line-height: 1.55;
}

:where(.bl__x) {
	margin: 0;
	color: var( --lc-blog-ink2 );
	font-size: 13.5px;
	line-height: 1.85;
}

:where(.bl__d) {
	margin-top: auto;
	color: var( --lc-blog-mut );
	font-size: 12px;
}

/* 題名の色を :where() の外に出したので、指を乗せたときの色も外に出す(0,3,0 以上) */
.bl .bl__c:hover .bl__t,
.bl > li:hover .bl__t {
	color: var( --lc-blog-gd );
}

/* --------------------------------------------------------------
 * カテゴリの絞り込み・ページ送り・検索窓・記事0本のとき
 * ------------------------------------------------------------ */

:where(.blcat) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.lc-blog .blcat {
	margin: 0 0 22px;
}

:where(.blcat) a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var( --lc-blog-line );
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}

/*
 * ★絞り込みの字の色と下線は :where() の外に出す(N334)。
 *
 * 絞り込みはリンクだが、見た目は「札」。字は本文の濃い色・下線なし・選んでいるものは枠で示す。
 * :where() の中(0,0,1)だと、子テーマの a{color:…}(0,0,1)や theme.json の
 * a:where(:not(.wp-element-button)){text-decoration:underline}(0,0,1)と同点になり、
 * 後から読まれるほうが勝つ——C001 はリンクの色(#0B5FA5)と下線、自社と雛形も下線が付いていた。
 * .lc-blog .blcat a(0,2,1)なら、リンクの色が何色の子テーマでも同じ見え方になる。
 * ★子テーマが絞り込みをわざと変えたいときは .lc-blog .blcat li a(0,2,2)で書く。
 */
.lc-blog .blcat a {
	color: var( --lc-blog-ink );
	text-decoration: none;
}

.lc-blog .blcat a:hover,
.lc-blog .blcat a[aria-current] {
	border-color: var( --lc-blog-g );
	background: var( --lc-blog-soft2 );
	color: var( --lc-blog-gd );
}

/* 記事が0本のとき。顧客サイトは開設直後かならずこの状態になる */
:where(.blnone) {
	padding: 34px 18px;
	border: 1px dashed var( --lc-blog-line2 );
	border-radius: 16px;
	color: var( --lc-blog-ink2 );
	text-align: center;
}

:where(.blpg) {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.lc-blog .blpg {
	margin: 34px 0 0;
}

:where(.blpg) a, :where(.blpg) span {
	min-width: 38px;
	padding: 7px 12px;
	border: 1px solid var( --lc-blog-line );
	border-radius: 10px;
	color: var( --lc-blog-ink2 );
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

:where(.blpg .page-numbers.current, .blpg span[aria-current]) {
	border-color: var( --lc-blog-g );
	background: var( --lc-blog-g );
	color: #ffffff;
}

:where(.blpg) a:hover {
	border-color: var( --lc-blog-g );
	color: var( --lc-blog-gd );
}

:where(.blsearch) {
	display: flex;
	gap: 8px;
	max-width: 460px;
}

.lc-blog .blsearch {
	margin: 0 auto 26px;
}

:where(.blsearch input, .blsearch .wp-block-search__input) {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var( --lc-blog-line );
	border-radius: 10px;
	background: #ffffff;
	color: var( --lc-blog-ink );
	font: inherit;
	font-size: 15px;
}

:where(.blsearch input:focus) {
	outline: 2px solid var( --lc-blog-g );
	outline-offset: 1px;
	border-color: var( --lc-blog-g );
}

:where(.blsearch button, .blsearch .wp-block-search__button) {
	padding: 11px 22px;
	border: 0;
	border-radius: 10px;
	background: var( --lc-blog-g );
	color: #ffffff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

:where(.blsearch) button:hover {
	background: var( --lc-blog-gd );
}

/* 「◯◯の検索結果：N件」 */
:where(.doc__meta) {
	color: var( --lc-blog-mut );
	font-size: 12px;
}

.lc-blog .doc__meta {
	margin-bottom: 20px;
}

/* --------------------------------------------------------------
 * ブログの説明(記事一覧の頭)と、404の案内
 * ------------------------------------------------------------ */

:where(.blabout) {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 20px;
	align-items: center;
	padding: 18px 22px;
	border: 1px solid var( --lc-blog-line );
	border-radius: 16px;
	background: var( --lc-blog-soft2 );
}

.lc-blog .blabout {
	margin: 0 0 26px;
}

:where(.blabout__ill) {
	max-width: 130px;
}

:where(.blabout b) {
	display: block;
	margin: 0 0 5px;
	color: var( --lc-blog-ink );
	font-size: 14.5px;
}

:where(.blabout p) {
	margin: 0;
	color: var( --lc-blog-ink2 );
	font-size: 13.5px;
	line-height: 1.9;
}

:where(.cs) {
	padding: 36px 20px;
	border: 1px solid var( --lc-blog-line );
	border-radius: 18px;
	background: #ffffff;
	text-align: center;
}

:where(.cs__ill) {
	max-width: 260px;
	margin: 0 auto 18px;
}

:where(.cs__ill svg) {
	width: 100%;
	height: auto;
}

/* 404の「よく見られている3本」。案内の箱との間を空ける */
.lc-blog .lc-blog-popular {
	margin-top: 34px;
}

/* --------------------------------------------------------------
 * ボタン。子テーマが .btn を持っていればそちらが勝つ。
 * ------------------------------------------------------------ */

:where(.lc-blog-btns) {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 520px;
}

.lc-blog .lc-blog-btns {
	margin: 22px auto 0;
}

:where(.lc-blog-btns .btn) {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;
	border: 2px solid transparent;
	border-radius: 12px;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

:where(.lc-blog-btns .btn--main) {
	background: var( --a, #f0a92a );
	color: var( --lc-blog-ink );
	box-shadow: 0 4px 0 var( --ashadow, #c98a1c );
}

:where(.lc-blog-btns .btn--sub) {
	border-color: var( --lc-blog-line2 );
	background: var( --lc-blog-card );
	color: var( --lc-blog-ink2 );
}

/* --------------------------------------------------------------
 * 画面幅
 * ------------------------------------------------------------ */

/* --------------------------------------------------------------
 * 記事タイトルの折り返し(N83・依頼4)
 *
 * core/post-title と .sub h1 は 2.5rem(40px)。360pxの画面では
 * 日本語のタイトルが4行に折り返して、本文が画面の下に押し出される
 * (雛形の子テーマで実測)。狭い画面だけ 1.75rem(28px) に落とす。
 *
 * theme.json のフルード・タイポグラフィは使わない。全サイズの出方が
 * 一度に変わり、いま入れると原因の切り分けができなくなるため。
 * ------------------------------------------------------------ */

@media ( max-width: 600px ) {

	:where(.sub h1, .wp-block-post-title) {
		font-size: 1.75rem;
	}
}

@media ( max-width: 900px ) {

	:where(.bl) {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 640px ) {

	:where(.bl) {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	:where(.bl__ill svg) {
		max-height: 108px;
	}

	:where(.blabout) {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 18px;
		text-align: center;
	}

	:where(.blabout__ill) {
		max-width: 118px;
		margin: 0 auto;
	}
}