/**
 * 共有配色: ダーク（ニュートラルグレー）
 *
 * 色味を持たないグレーを基調にし、アクセントだけ親テーマの紺を明るくして使う。
 * レイアウトは持たない。どのレイアウトと組んでも成立するよう、
 * トークンの差し替えを主にする。
 *
 * 読まれるのは、外観設定の配色が「ダーク」のときである
 * （inc/appearance.php の OPTIB_CHILD_SCHEME_PARTS が dark => palettes/dark）。
 * 読み込み順は palettes/ → layouts/ → skins/ で、ここが最初に読まれる。
 *
 * 【重要】親テーマは一部の色をハードコードしている。
 * トークンの差し替えだけでは暗くならない面があるため、
 * このファイルの後半でそれらを名指しで上書きしている。
 * 親テーマを更新したら、ここが追随できているか確認すること。
 */

.optib-palettes-dark {
  /* --- カスタマイザー変数 ----------------------------------
     親テーマの --color-* は、これらの別名にすぎない
     （例: --color-primary: var(--primary-color, #384d7a)）。

     そして親テーマは、別名を経由せず --primary-color を直接使う箇所を
     39 箇所持っている（.btn-primary / .bg-primary / .text-primary /
     .dropdown-item:hover など。style.css:66,68,78,135,139,241 ほか）。
     そのうち7箇所は !important 付きで、通常の宣言では上書きできない。

     **だから、別名ではなくこちらを差し替える。**
     変数の値を差し替える経路なので、!important でも効く。

     カスタムプロパティは近い祖先の宣言が勝つ。これらは body に付くため、
     カスタマイザーが :root に出力した値より優先される。
     ダークでは任意の色を許すと配色が破綻するので、意図的に固定する。
     ------------------------------------------------------ */
  --primary-color: #8ab4f8;
  --primary-light-color: #aecbfa;
  --primary-dark-color: #5b8ee0;
  --secondary-color: #6ddb6a;
  --tertiary-color: #9aa0a6;
  --brand-color: #8ab4f8;
  --link-color: #e3e3e3;
  --link-hover-color: #8ab4f8;

  /* --- トークン --------------------------------------------
     上の変数から導かれるものもあるが、親テーマの既定値に
     依存しないよう明示する。
     ------------------------------------------------------ */
  --color-primary: #8ab4f8;
  --color-primary-light: #aecbfa;
  --color-secondary: #6ddb6a;
  --color-tertiary: #9aa0a6;

  --color-text: #e3e3e3;
  --color-text-dark: #f5f5f5;
  --color-text-muted: #9aa0a6;

  --color-link: #e3e3e3;
  --color-link-hover: #8ab4f8;

  --color-bg: #16181a;
  --color-bg-light: #1f2124;

  --color-border: #34383d;
  --color-border-dark: #45494f;

  /* 影は暗い面では効きにくいので、より濃くする。 */
  --optib-child-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --optib-child-shadow-md: 0 2px 10px rgb(0 0 0 / 50%);
  --optib-child-shadow-lg: 0 10px 28px rgb(0 0 0 / 60%);

  /* この配色の中で使い回す値。 */
  --optib-child-dark-surface: #1f2124;
  --optib-child-dark-surface-raised: #26292d;

  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ===============================================================
   親テーマがハードコードしている色の上書き

   親テーマ OptiB は約150箇所で色を直接書いており、その多くが
   assets/css/src/style.css（FLOCSS 化されていないレガシー部分）にある。
   トークンを差し替えても、これらは明るいまま残る。

   ここでは面積の大きいものだけを上書きする。細部まで追わない。
   すべてを追うと親テーマの更新に追随できなくなるため、
   「明るい板が残って見える」レベルのものに絞っている。

   file:line は調査時点（2026-09-01）の
   optib/assets/css/src/style.css を指す。
   =============================================================== */

/* --- サイドバーのウィジェット（style.css:430,438,449） ---------- */
.optib-palettes-dark .widget {
  background: var(--optib-child-dark-surface);
  color: var(--color-text);
}

.optib-palettes-dark .widget-title span {
  background: var(--optib-child-dark-surface);
  color: var(--color-text-dark);
}

.optib-palettes-dark .widget-title::before {
  background: var(--color-border);
}

/* ウィジェット内のリンクと区切り線（style.css:485,493） */
.optib-palettes-dark .widget-list li:not(:last-child) {
  border-bottom-color: var(--color-border);
}

.optib-palettes-dark .widget-list li a {
  color: var(--color-text);
}

/* --- 検索ボックス（style.css:465,476） -------------------------- */
.optib-palettes-dark .widget-search input {
  color: var(--color-text);
  background: transparent;
  border-bottom-color: var(--color-border);
}

.optib-palettes-dark .widget-search button {
  color: var(--color-text-dark);
  background: var(--optib-child-dark-surface-raised);
}

/* --- フォーム（style.css:415,418 / 534） ------------------------ */
.optib-palettes-dark .form-group label {
  color: var(--color-text);
}

.optib-palettes-dark .form-group .form-control {
  color: var(--color-text);
  background-color: var(--optib-child-dark-surface-raised);
  border-color: var(--color-border);
}

.optib-palettes-dark .subscription .form-control {
  color: var(--color-text);
  background-color: var(--optib-child-dark-surface-raised);
}

/* 入力欄のプレースホルダは、暗い背景では既定色が沈んで読めない。 */
.optib-palettes-dark .form-control::placeholder,
.optib-palettes-dark .widget-search input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* --- ページネーション（style.css:343,348） ---------------------- */
.optib-palettes-dark .pagination .page-item .page-link {
  color: var(--color-text);
  background: var(--optib-child-dark-surface-raised);
}

/* --- 会話（吹き出し）ブロック -----------------------------------
   親テーマのブロック optib/conversation
   （ConversationBlockController.php:164 で登録、CSS は同ファイル内の
   インライン文字列 602-698 行）。

   このブロックは吹き出しごとに
   style="--wew-bubble-bg:...;--wew-bubble-border:..." を
   **要素へインラインで必ず書き出す**（同 401, 423 行）。
   未設定でも定数 DEFAULT_BUBBLE_BG = '#ffffff'（同 81 行）が入る。

   インラインで要素に付いた変数は、body 側の宣言に勝つ。
   **つまり変数の差し替えでは直せない。**
   変数を読んでいる background / border-color のほうを、
   詳細度で上回って上書きする。

   [style*="--wew-bubble-bg:#ffffff"] を付けているのは、
   **既定のままの吹き出しだけを対象にするため。**
   ブロック側で色を明示した吹き出しは、その指定を尊重する。

   注意: 親テーマが DEFAULT_BUBBLE_BG の値を変えると、この属性一致は
   静かに外れて白い吹き出しに戻る。親テーマ更新時は確認すること。
   --------------------------------------------------------------- */
.optib-palettes-dark .wew-conversation-bubble[style*="--wew-bubble-bg:#ffffff"] {
  color: var(--color-text);
  background: var(--optib-child-dark-surface-raised);
  border-color: var(--color-border);
}

/* 吹き出しの三角。:after が背景色、:before が枠線色を担う。 */
.optib-palettes-dark .wew-conversation-box.left-bubble .wew-conversation-bubble[style*="--wew-bubble-bg:#ffffff"]:after {
  border-left-color: var(--optib-child-dark-surface-raised);
}

.optib-palettes-dark .wew-conversation-box.right-bubble .wew-conversation-bubble[style*="--wew-bubble-bg:#ffffff"]:after {
  border-right-color: var(--optib-child-dark-surface-raised);
}

.optib-palettes-dark .wew-conversation-box.left-bubble .wew-conversation-bubble[style*="--wew-bubble-border:#c8c8c8"]:before {
  border-left-color: var(--color-border);
}

.optib-palettes-dark .wew-conversation-box.right-bubble .wew-conversation-bubble[style*="--wew-bubble-border:#c8c8c8"]:before {
  border-right-color: var(--color-border);
}

/* --- 記事本文の細部（base.css:96-99） ---------------------------
   親側が body:not(.elementor-page) .the-content figcaption で
   詳細度 (0,2,2) を持つ。同じ形に body と :not() を足して上回る。
   --------------------------------------------------------------- */
body.optib-palettes-dark:not(.elementor-page) .the-content figcaption,
body.optib-palettes-dark:not(.elementor-page) .the-content .wp-caption-text {
  color: var(--color-text-muted);
}

/* --- ヘッダーのドロップダウン（style.css:205） ------------------
   全ページのヘッダーに出るため、白いままだと目立つ。
   --------------------------------------------------------------- */
.optib-palettes-dark .navbar .dropdown-menu {
  color: var(--color-text);
  background: var(--optib-child-dark-surface-raised);
  border-color: var(--color-border);
}

/* --- SNS 導線（_p-social-cta.css:29-32） ------------------------
   親側が #social-cta を含み詳細度 (1,1,0) を持つ。
   ID には ID でしか勝てないため、ここだけスコープの規則から外れる。
   共有部品の CSS は .optib-<種別>-<名前> の配下に置くのが原則だが、
   親テーマが ID を使っている箇所は例外になる。
   --------------------------------------------------------------- */
body.optib-palettes-dark #social-cta .p-social-cta__top {
  background: var(--optib-child-dark-surface);
}

/* フォローボタンの帯（_p-social-cta.css:192-200, background #f5f5f5）。 */
body.optib-palettes-dark #social-cta .p-social-cta__follow {
  background-color: var(--optib-child-dark-surface-raised);
}

/* X（旧 Twitter）のフォローボタンは文字色が #000 の直書き
   （_p-social-cta.css:230）。暗い背景では黒い文字が沈む。
   ブランド色が黒である以上、暗い面では成立しないため、
   通常時は文字色を戻す。ホバー時は親側が背景 #000 + 文字 #fff を
   指定しており（同 234-235）、そのままで成立する。 */
body.optib-palettes-dark #social-cta a.p-social-cta__follow-btn--twitter {
  color: var(--color-text);
}

/* --- 画像の白抜き対策 -------------------------------------------
   透過 PNG のロゴやアイコンは、暗い背景で見えなくなることがある。
   ただし写真まで反転させると壊れるため、自動処理はしない。
   個別のサイトで必要になったら、そのサイトの子テーマ側で指定する。
   --------------------------------------------------------------- */

/* --- パンくずの帯 -----------------------------------------------
   帯の背景は子テーマの style.css が var(--color-bg-light) で書いており、
   この配色は上の :root 相当のブロックでそのトークンを #1f2124 に
   差し替えている。つまり何も書かなくても暗くはなる。

   それでも1規則置いてあるのは、--color-bg-light が
   「明るい面の、さらに一段淡い地」という意味の名前だからである。
   帯に要るのは「本文より一段持ち上がった面」で、この配色では
   その役をトークン --optib-child-dark-surface が担っている。
   同じ値が偶然そろっているだけの状態を、意味の側で固定しておく。
   --------------------------------------------------------------- */
body.optib-palettes-dark .optib-child-breadcrumb-bar {
  background: var(--optib-child-dark-surface);
}