/**
 * 合わせ目: リストレイアウト × ライト配色
 *
 * レイアウトは共有部品 layouts/thumb-list にある。
 * 記事1件分のマークアップも同じディレクトリにある
 * （presets/_shared/layouts/thumb-list/template-parts/post/content-excerpt.php）。
 *
 * ここにあるのは、そのレイアウトに乗せる「色」だけである。
 * レイアウトは色を1つも持たない流儀なので、色は組み合わせの側が書く。
 *
 * ライトでは配色の共有部品を読まない。親テーマ OptiB の :root が
 * 背景と文字を実値で持っており（--color-bg: #fff / --color-text: #333）、
 * 素のままで白ベースだからである。だからここでは明るい前提の実値を直接書く。
 * 同じ役割をダーク側で受け持つのが skins/thumb-list-dark で、
 * あちらは palettes/dark が定義したトークンを読んで書く。
 *
 * 全組み合わせ共通のトークン（--optib-child-shadow-*）は
 * 子テーマの style.css の :root にある。ここには置かない。
 *
 * すべてのセレクタは .optib-skins-thumb-list-light 配下、かつ一覧文脈クラス
 * （.p-post 系 / .nav-links・.page-numbers / main）のいずれかを含む。
 * レイアウトの共有部品と同じ深さで書いてあるので詳細度は並び、
 * 後から読まれるこちらが勝つ（読み込み順は 配色 → レイアウト → 合わせ目）。
 */

/* (2) ホバー背景 */
.optib-skins-thumb-list-light .p-post--list:hover {
  background: #eee;
}

/* (1) 記事1件の区切り線。
 * border の一括指定は分割せず、色ごとこちら側に置いている
 * （共有部品の先頭コメントを参照）。 */
.optib-skins-thumb-list-light .p-post--list {
  border-bottom: dotted 1px #c3c3c3;
}

/* (5) 日付バッジ。寸法は共有部品側、地と線の色だけここ */
.optib-skins-thumb-list-light .p-post--list .p-post__meta-item--date {
  border-left: solid 3px #c3c3c3;
  background: #eee;
}

/* (6) カテゴリチップ
 * 元は #111 固定の黒地だったが、OptiB本体のテーマカラー変更に追従させたい
 * という依頼により var(--color-primary) に変更（子テーマ側でのみ上書き）。
 * --color-primary は親テーマの :root で var(--primary-color, #384d7a) を参照しており、
 * Customizerの「プライマリカラー」変更がそのまま反映される。 */
.optib-skins-thumb-list-light .p-post--list .p-post__meta-item--cat a {
  background: var(--color-primary);
  color: #fff;
}

/* 親の .p-post__meta a:hover が同系色に当たると読めなくなるので打ち消す。
 * ホバーは少し暗くして押下感を出す（テーマカラーに追従しつつ濃淡だけ変える）。 */
.optib-skins-thumb-list-light .p-post--list .p-post__meta-item--cat a:hover {
  background: color-mix(in srgb, var(--color-primary) 80%, black);
  color: #fff;
}

/* (10) 続きを読む
 * カテゴリチップと同じ理由でテーマカラーに追従させる。 */
.optib-skins-thumb-list-light .p-post--list .c-btn--outline-primary {
  border: solid 1px var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
}

.optib-skins-thumb-list-light .p-post--list:hover .c-btn--outline-primary,
.optib-skins-thumb-list-light .p-post--list .c-btn--outline-primary:hover {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
}

/* (14) stretched link のフォーカス表示。
 * 位置と重ね順は共有部品側にある。ここは (2) の :hover と同じ背景だけ。
 *
 * :focus-within は使わない。理由は2つある。
 *   1. カード内のリンクの遷移先は3種類ある（カテゴリアーカイブ / 著者アーカイブ / 記事本体）。
 *      :focus-within だとカテゴリや著者にフォーカスしても「記事へ飛ぶ」見た目が出て、
 *      遷移先を誤って伝える。強調するのは記事本体へ行くリンク
 *      （.p-post__title a と .p-post__more）にフォーカスがあるときだけにする。
 *   2. :focus-within は :focus-visible ではないので、マウスクリックやタッチの後も
 *      強調が貼り付いたまま残る。:focus-visible ならキーボード起因のときだけ点く。
 *
 * :has() を使うのは、この2条件を満たしつつ「カード全体が反応する」を残せる唯一の書き方だから。
 * 採らなかった案: :has() をやめてフォーカスされたリンク自身にだけ効果を出す。
 * その代償は、ブロック全体が押せるという情報がキーボード利用者にだけ伝わらなくなること、
 * つまりこの機能そのものがキーボードでは見えなくなることで、目的と衝突する。
 * :has() 非対応ブラウザではこの2規則が丸ごと無視され、
 * カード全体の強調が出ないだけになる。リンク自身のフォーカスリングは
 * 親テーマの :where(:focus-visible) が出すので残り、操作は壊れない。 */
.optib-skins-thumb-list-light .p-post--list:has(.p-post__title a:focus-visible),
.optib-skins-thumb-list-light .p-post--list:has(.p-post__more:focus-visible) {
  background: #eee;
}

/* (10) の :hover 版と対になる、フォーカス時の「続きを読む」
 * 同じくテーマカラーに追従させる。 */
.optib-skins-thumb-list-light .p-post--list:has(.p-post__title a:focus-visible) .c-btn--outline-primary,
.optib-skins-thumb-list-light .p-post--list:has(.p-post__more:focus-visible) .c-btn--outline-primary {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
}