/*
 * 外観プリセット「ブログ」の基本スタイル。
 *
 * theme.css（tailwind ビルドの出力）には載せず、ブログプリセットが常時有効な
 * ことを前提に optib-appearance-blog ハンドルで読み込む。
 *
 * ここの規則はすべて preset 由来の body クラス配下にある。詳細度が
 * theme.css より 1 クラスぶん高いことが構造で保証されるので、
 * <link> の並び順が入れ替わっても勝敗が変わらない。
 *
 * 部品ごとの CSS（配色・レイアウト・合わせ目・ヘッダー・フッター）は
 * presets/_shared/<種別>/<名前>/style.css 側にある。
 */

/* ===========================================================
   全組み合わせ共通のトークン

   親テーマ OptiB には影のトークンが無く、値がハードコードされている。
   共有部品が上書きできる接点を作るため、ここで定義する。
   共有部品側は presets/_shared/ の palettes / layouts / skins の
   style.css で上書きするだけでよい（palettes/dark がそうしている）。
   =========================================================== */
body.optib-preset-blog {
  --optib-shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --optib-shadow-md: 0 2px 8px rgb(0 0 0 / 8%);
  --optib-shadow-lg: 0 8px 24px rgb(0 0 0 / 10%);
}


/* ===========================================================
   ウィジェットが空のときの1カラム化

   親テーマの sidebar.php は is_active_sidebar() を見ておらず、
   ウィジェットが空でも <aside class="l-grid__sidebar"> を常に出す。
   そのため空判定は PHP 側で行い、body の
   .optib-no-sidebar を起点にここで畳む
   （クラスを付けるのは AppearancePresetController::addBodyClasses()。
   単体投稿で blog-sidebar にウィジェットがあるときは付かない。
   その場合はサイドバーの列が実在するので、畳む相手が無い）。

   配色やレイアウトで分岐しない。ウィジェットが空かどうかは
   装飾の好みではなくサイトの状態だからである。

   詳細度: この2規則は body.optib-preset-blog.optib-no-sidebar 起点で 0,3,1。
   打ち消す相手は親テーマ theme.css の .l-grid__main / .l-grid__sidebar で、
   いずれも 0,1,0。相手は2組ある。
   - メディアクエリの外: .l-grid__col-12, .l-grid__main, .l-grid__sidebar
     { grid-column: span 12 }（main 側は同じ値なので 992px 未満では no-op）
   - @media (min-width: 992px) の中: main が span 8、sidebar が span 4
   メディアクエリは詳細度を上げないので、0,2,0 > 0,1,0 で
   読み込み順に関係なく両方に勝つ。

   前置の body.optib-preset-blog は詳細度のためではなく、このファイルの
   全セレクタをプリセット配下に閉じる方針（設計 §2-4）に揃えるためである。

   ただし勝てるのは「今この2プロパティに競合が無い」ためでもある。
   子テーマ style.css は共有部品より前に読まれるので、共有部品が同じ
   プロパティを書けば後勝ちで負ける。現状 .l-grid__main 自身の
   grid-column を触る規則は共有部品に無い（card-grid/style.css:48 は
   0,3,0 で main 自身に当たるが display / grid-template-columns /
   gap / align-items だけで、grid-column は子 `> *` にしか当てていない）。
   共有部品側に .l-grid__main の grid-column を足すときは、ここが黙って
   負けることに注意すること。

   検索結果ページ（親 search.php）の main は .col-lg-8 であって
   .l-grid__main ではない。親テーマは Bootstrap を読み込んでおらず
   .col-lg-8 の定義も無いため、main は元から全幅である。
   ここで main 側の指定が当たらなくても見え方は変わらない。

   下の「サイドバーの左右」も、この検索結果ページには当たらない。
   ラッパが .l-grid ではなく .row であり、親 theme.css には
   .row の定義が 0 件（.l-grid__col-lg-8 はあるが、素の .col-lg-8 は
   セレクタとして存在しない）。つまり .row は grid コンテナですらない。
   要素そのものは在る。親 search.php は get_sidebar() を呼び、親 sidebar.php
   の早期 return は product/shop/product_category/product_tag だけなので
   検索結果は素通りし、<aside class="l-grid__sidebar"> が出力される。
   セレクタはマッチし grid-column 宣言も適用されている。効かない理由は
   親が grid コンテナでないことだけで、宣言が不活性になっている。
   打ち消しを足していないのは「書く先が無いから」ではなく、宣言が
   不活性で見え方に影響しないためである。同じ理屈で
   body.optib-preset-blog.optib-no-sidebar .l-grid__sidebar { display:none } のほうは
   grid に依存しないので、検索結果でも実際に効いている。
   =========================================================== */
body.optib-preset-blog.optib-no-sidebar .l-grid__main {
  grid-column: span 12;
}

body.optib-preset-blog.optib-no-sidebar .l-grid__sidebar {
  display: none;
}


/* ===========================================================
   サイドバーの左右
   -----------------------------------------------------------
   body の .optib-sidebar-left / -right を起点に入れ替える
   （クラスを付けるのは AppearancePresetController::addBodyClasses()。
   値は AppearancePresetResolver が sidebar_position 設定から決める）。

   DOM は親テーマのまま <main> → <aside> の順である。
   テンプレートを持たず、grid-column の指定だけで見た目の左右を決める。

   親テーマ theme.css の実測値（assets/css/src/flocss/layout/_l-container.css
   がソース、配信は assets/css/theme.css）:
   - .l-grid { grid-template-columns: repeat(12, 1fr) }
   - メディアクエリの外: .l-grid__col-12, .l-grid__main, .l-grid__sidebar
     { grid-column: span 12 }
   - @media (min-width: 992px) の中: .l-grid__main { grid-column: span 8 }
     / .l-grid__sidebar { grid-column: span 4 }
   境界は 992px ちょうど1つ。新しい境界は作らない。

   992px 未満では、ここで何も指定しない。
   両者が span 12 のまま縦に積まれ、DOM 順どおり記事一覧が先に来る。
   左を選んでいてもサイドバーは上に出ない。

   right は親の既定と同じ並び（main が先）なので、規則を書かない。
   書かないことが「親のまま」であり、打ち消しの必要が無い。

   -----------------------------------------------------------
   grid-row: 1 が要る理由（これが無いとサイドバーが消える）

   grid-column だけでは足りない。列を入れ替えても、自動配置は
   行方向に後戻りしないからである。
   css-grid-1 §8.5 Grid Item Placement Algorithm の
   「Position the remaining grid items」/ "sparse" packing（既定）:

     If the item has a definite column position:
     Set the column position of the cursor to the grid item's column-start line.
     If this is less than the previous column position of the cursor,
     increment the row position by 1.

   親に grid-auto-flow の指定は 0 件なので既定の row（sparse）である。
   DOM 順は main → aside（親 index.php:22-44 / archive.php:21-47。
   .l-grid の直下の子はこの2つだけで、他に兄弟は無い）。
   order の指定も親子ともに無いので、この順で配置される。

   実際の流れ:
   - main は列開始 5 が確定。cursor の列を 5 にする。5 < 1 ではないので
     行は増えず、1行目に載る。cursor の列位置は 5 になる。
   - aside は列開始 1 が確定。cursor の列を 1 にする。
     1 < 5 なので **row が 1 つ増える**。よって 2 行目へ送られる。

   結果、サイドバーは記事一覧の下に回る。要素も規則も生きているのに
   画面から消えたように見えるのはこれが理由である。
   「main の右端を越えたから」ではなく「直前の cursor 列位置より
   小さいから」が正確な発火条件である。

   値を 1 にした理由:
   .l-grid の直下の子は main と aside の 2 つだけなので、両方を
   1 行目に固定してよい。列は 1–5 と 5–13 で重ならないため衝突しない。
   span は既定の 1 で、これは right（親の既定）のときに自動配置が
   作る形とまったく同じである。つまり grid-row: 1 は新しい見た目を
   足すのではなく、左右で同じ結果に揃えるための指定である。
   将来 .l-grid の直下に3つ目の子が増えたら、ここは見直しが要る。

   grid-auto-flow: dense でも直る（dense は cursor の行を先頭に戻すと
   仕様に明記がある）が、dense は .l-grid 内の他の自動配置にも一律で
   効いてしまうので採らない。ここだけを直す指定のほうが影響が狭い。

   right 側に対称の grid-row を書かなかった理由:
   right では main も aside も列開始が確定しない（親の span 8 / span 4 の
   まま）ので、上の分岐に入らず「両軸とも自動」の経路で素直に 1 行目に
   並ぶ。行送りは起きない。つまり right に grid-row を書いても現状の
   結果は 1 ミリも変わらず、親の既定を打ち消す規則が 1 つ増えるだけに
   なる。「right には規則を書かない」という上の方針を崩す対価に見合わない。
   非対称に見えるのは、行送りが左を選んだときにだけ起きる現象だからで
   ある。この段落がその非対称の理由である。

   詳細度（grid-row について）:
   親テーマ theme.css・子 presets/ のいずれにも grid-row / grid-auto-flow の
   指定は 0 件である（親で grid-area を使うのは .p-post-navigation の
   3 箇所だけで、.l-grid とは別物）。競合が無いので、この 2 宣言は
   詳細度を問わず適用される。セレクタ自体は変えていないので、
   grid-column 側の 0,3,1 という比較も上に書いたまま変わらない。

   詳細度:
   - 相手（親 theme.css）: .l-grid__main / .l-grid__sidebar = 0,1,0
   - 相手（このファイル上方）: body.optib-preset-blog.optib-no-sidebar
     .l-grid__main = 0,3,1
   - ここ: body.optib-sidebar-left:not(.optib-no-sidebar) .l-grid__main
     = 要素 body が 1、クラスが .optib-sidebar-left / :not() 内の
       .optib-no-sidebar / .l-grid__main で 3 → 0,3,1
   0,3,1 > 0,1,0 なので、読み込み順に関係なく親には勝つ。
   上方の 1 カラム化とは同じ 0,3,1 で並ぶが、:not(.optib-no-sidebar) が
   両者を排他にしているので、どちらが勝つかを問う場面が無い。
   メディアクエリは詳細度を上げないため、この比較に影響しない。

   :not(.optib-no-sidebar) を挟んでいるのは、詳細度を稼ぐためだけでなく
   ウィジェットが空のときに 1 カラム化と競合させないためである。
   空のときは上のブロックが勝ち、こちらはそもそも当たらない。
   =========================================================== */
@media (min-width: 992px) {
  body.optib-sidebar-left:not(.optib-no-sidebar) .l-grid__sidebar {
    grid-column: 1 / span 3;
    grid-row: 1;
  }

  body.optib-sidebar-left:not(.optib-no-sidebar) .l-grid__main {
    grid-column: 4 / span 9;
    grid-row: 1;
  }
}


/* ===========================================================
   サイドバー幅（right 側にも揃える）
   -----------------------------------------------------------
   幅の基準は参照サイト（with-planning.co.jp）の #sidebar 固定
   300px。12カラムグリッドでは 3/12 列がその近似値になる
   （実測 302px、コンテナ幅 1280px 時）。

   left 側は上のブロックで 1 / span 3・4 / span 9 に変更済み。
   right（既定の並び、DOM 順のまま main が先）はここまで
   「right は親の既定と同じ並びなので規則を書かない」として
   親テーマの span 8 / span 4 のままだったが、それだと left と
   幅が揃わない。順序（grid-row・列の開始位置）は変えず、
   span 数だけを揃える。

   :not(.optib-sidebar-left) はここでは無くても良い
   （left 側は詳細度 0,3,1 で常に勝つ）が、対象を明示するために
   付けている。:not(.optib-no-sidebar) は他ブロックと同じ
   理由（ウィジェットが空で 1 カラム化しているときと競合させない）。
   =========================================================== */
@media (min-width: 992px) {
  body.optib-sidebar-right:not(.optib-no-sidebar) .l-grid__main {
    grid-column: span 9;
  }

  body.optib-sidebar-right:not(.optib-no-sidebar) .l-grid__sidebar {
    grid-column: span 3;
  }
}


/* ===========================================================
   サイドバーの追従（下スクロール時）
   -----------------------------------------------------------
   body の .optib-sidebar-sticky-on を起点に効かせる
   （クラスを付けるのは AppearancePresetController::addBodyClasses()。
   値は AppearancePresetResolver が sidebar_sticky 設定から決める）。
   既定は -off で、-off 側には規則を書かない。書かないことが
   「親のまま」であり、更新しただけでは挙動が変わらない。

   追従そのものは position: sticky が受け持つ。JavaScript は
   「サイドバーが画面より高いときだけ」に絞るためだけに使い、
   スクロール位置の計算や top / bottom の書き換えはしない
   （assets/js/sidebar-sticky.js、詳しくは下の【絞り込み】を見よ）。

   -----------------------------------------------------------
   境界を 992px にした理由

   親テーマ theme.css（ソースは
   optib-theme/wp-content/themes/optib/assets/css/src/flocss/layout/_l-container.css）
   の実測値:
   - _l-container.css:36-43  .l-grid__main / .l-grid__sidebar { grid-column: span 12 }
   - _l-container.css:46     @media (min-width: 992px)
   - _l-container.css:47-49    .l-grid__main { grid-column: span 8 }
   - _l-container.css:51-53    .l-grid__sidebar { grid-column: span 4 }
   .l-grid__sidebar に当たる規則は親テーマのソース全体でこの2箇所だけである
   （grep "l-grid__sidebar" assets/css/src/ → _l-container.css:41 と :51 の2件）。
   つまり 2 カラムになる境界は min-width: 992px のちょうど1つ。
   上の「サイドバーの左右」と同じ境界を使い、新しい境界は作らない。

   992px 未満では main と sidebar が span 12 のまま縦に積まれる。
   縦積みで追従させると、サイドバーが記事一覧の下に居座って
   ずっと画面を占め続けることになるので、効かせない。

   -----------------------------------------------------------
   なぜ top ではなく bottom なのか

   要件は「サイドバーの中身が画面より高いとき、サイドバー全体を
   いったんスクロールさせ、下端まで見たところで固定する」である。

   top: 0 だと、上端が画面の上に着いた時点で貼り付く。
   サイドバーが画面より高い場合、下端は画面の外に出たまま固定され、
   そこから先はどれだけスクロールしても下端が読めない。

   bottom: 0 は逆に、下端が画面の下辺に着くまでは普通に流れ、
   着いた時点で貼り付く。到達するまでの間にサイドバー全体が
   画面を通過するので、下端まで読める。読み終えた位置で止まる。
   これが要件そのものである。

   サイドバー内に独立したスクロールバーは作らない（overflow を
   与えていない）。先頭ウィジェットだけを固定する方式も採らない
   （固定するのは .l-grid__sidebar 自身であって、その子ではない）。

   上へ戻すときは追従しない。position: sticky で「下スクロールでは
   追わせ、上スクロールでは即座に外す」ことはできず、そこを作るには
   スクロール位置を見る JavaScript が要る。そこまではやらない。

   -----------------------------------------------------------
   align-self: start が要る理由（これが無いと 1px も動かない）

   .l-grid__sidebar はグリッドアイテムであり、align-self の初期値は
   normal（グリッドでは stretch と同じ振る舞い）である。
   つまりサイドバーの高さは行の高さ、すなわち記事一覧と同じ高さまで
   引き伸ばされている。親テーマにも子テーマの presets/ にも
   .l-grid__sidebar の align-self / align-items を触る規則は無い
   （presets 側で align-items を書いているのは
   presets/_shared/layouts/card-grid/style.css:54 だけで、対象は
   .l-grid__main であり、その中の子の並びを決めるためのものである）。

   sticky の可動域は、その要素を含むブロック（ここではグリッドエリア
   ＝行の高さ）から要素自身の高さを引いた分しかない。引き伸ばされて
   いると両者が等しく、可動域が 0 になる。規則は適用されているのに
   1px も動かない、という見え方になる。

   align-self: start で高さを内容ぶんに戻すと、
   可動域 = 行の高さ − サイドバーの高さ、が生まれる。
   記事一覧のほうが高いあいだだけ追従し、追い越すことはない。

   なお align-self: start は .optib-sticky-ready の「外」に、
   sticky-on の下で無条件に置いてある。JS が測る高さをクラスの
   付け外しで変えないためである。理由は下の規則の直前に書いた。

   -----------------------------------------------------------
   祖先の overflow / contain の実測（sticky が殺されていないか）

   sticky は、祖先にスクロールコンテナがあると、そちらを基準に貼り付く。
   祖先チェーンは実測で
     html > body > section.l-site-content > div.l-container > div.l-grid > aside.l-grid__sidebar
   （親 index.php:19-22 / archive.php:19-21 と、親 sidebar.php:26 の <aside>。
   get_sidebar() は index.php:43 / archive.php:46 にあり、いずれも
   div.l-grid の直下で呼ばれている。だから .l-grid > .l-grid__sidebar と
   直下結合子で書ける）。

   セレクタを .l-grid の直下に閉じてあるのは検索結果ページのためである。
   親 search.php:22 のラッパは <div class="row">、その中の main は
   search.php:23 の .col-lg-8 で、どちらも CSS 定義が 0 件（親 assets/css 配下・
   子テーマの CSS すべてに .row のセレクタ定義は無い）。つまり .row は
   grid コンテナではない。それでも search.php:48 で get_sidebar() を呼ぶので
   <aside class="l-grid__sidebar"> は出力される。
   上の「サイドバーの左右」が検索結果で無害なのは grid-column が
   grid コンテナの外で不活性だからであって、セレクタが外れているからではない。
   position / bottom / align-self は grid に依存しないので、同じ書き方をすると
   検索結果ページで実際に効き、サイドバーが結果一覧に重なる。
   .l-grid > を挟むと search.php にはマッチしない（.row は .l-grid ではない）。
   footer.php:23 にも .l-grid はあるが、その中に .l-grid__sidebar は無い。
   single.php / page.php は get_sidebar() を呼ばない（親テーマ内の
   get_sidebar() 呼び出しは index.php:43 / archive.php:46 / search.php:48 の3件）。

   - contain: 親テーマ・子テーマの CSS を通して 0 件
     （grep "contain:" assets/css/src/ → 出力なし）。
   - overflow: 親テーマのソース全体で 15 件あるが、上の祖先に当たるのは
     assets/css/src/flocss/foundation/_base.css:15 の
     :where(body) { overflow-x: hidden } ただ1つである。
     残りは .wp-block-latest-posts li / .code-tabs / .c-card /
     .p-post-navigation / .p-widget__recent-post-thumb / .l-header__* /
     .u-overflow-* などで、いずれもサイドバーの祖先ではない。
   - height / min-height / max-height: 祖先の 4 ファイル
     （_l-container.css / _l-section.css / _base.css / _reset.css）で
     当たるのは _reset.css:51 の height: auto のみ。高さを固定していない。
   - .l-site-content は margin-block だけ（_l-section.css:31-33、
     992px 以上でも 36-40 行で margin-block を変えるだけ）。

   残る body の overflow-x: hidden は sticky を殺さない。
   css-overflow-3 §3.3 の viewport への伝播による。
   ルート要素（html）の overflow が visible のとき、HTML 文書では
   body の overflow が viewport へ伝播し、body 自身は visible として
   扱われる。親テーマ・子テーマともに html への overflow 指定は 0 件
   なので、この経路に入る。つまり body はスクロールコンテナにならず、
   サイドバーは viewport を基準に貼り付く。
   （overflow-x: hidden が sticky を壊す、として知られている形は
   html 側に書かれた場合や、body より内側の中間要素に書かれた場合である。
   ここはどちらでもない。）

   -----------------------------------------------------------
   詳細度

   ここには規則が2つある。

   [A] align-self 用（ready の外・無条件）
     body.optib-sidebar-sticky-on:not(.optib-no-sidebar) .l-grid > .l-grid__sidebar
   要素 body が 1、クラスが .optib-sidebar-sticky-on /
   :not() 内の .optib-no-sidebar / .l-grid / .l-grid__sidebar で
   4 → 0,4,1。

   [B] sticky 用（ready 付き）
     body.optib-sidebar-sticky-on:not(.optib-no-sidebar) .l-grid > .l-grid__sidebar.optib-sticky-ready
   [A] に .optib-sticky-ready が 1 つ増えて 5 → 0,5,1。
   （> は結合子なので詳細度に加算しない。
     :not() 自身も加算せず、引数の中身だけを数える。）

   [A] と [B] はプロパティが重ならない（[A] は align-self のみ、
   [B] は position / bottom のみ）ので、両者のあいだで打ち消しは起きない。
   [B] のほうが高いが、その差は使っていない。

   競合相手を、宣言するプロパティごとに数える。
   - position / bottom / align-self を .l-grid__sidebar に当てている規則は、
     親テーマ theme.css にも子 presets/ にも 0 件である
     （親で .l-grid__sidebar を含むセレクタの宣言ブロックは実測 2 件、
      _l-container.css:41-43 と :51-53 に対応する
      .l-grid__col-12,.l-grid__main,.l-grid__sidebar{grid-column:span 12} と
      .l-grid__sidebar{grid-column:span 4} で、どちらも grid-column のみ。
      親で position: sticky を使うのは .l-header だけ。
      子の presets/ 配下で align-items を書いているのは
      presets/_shared/layouts/card-grid/style.css:54 のみで、対象は
      .l-grid__main であってサイドバーではない）。
     競合が無いので、この3宣言は詳細度を問わず適用される。
   - 同じ要素に他のプロパティを当てている規則は 3 つある。
     親 .l-grid__sidebar = 0,1,0（grid-column）
     子 body.optib-preset-blog.optib-no-sidebar .l-grid__sidebar
       = 0,3,1（display）
     子 body.optib-sidebar-left:not(...) .l-grid__sidebar = 0,3,1
       （grid-column / grid-row）
     どれもプロパティが重ならないので、打ち消し合わない。
   0,5,1 は最後のもの（0,3,1）より高いが、宣言が重ならないため
   打ち消しは起きず、順序も問題にならない。

   -----------------------------------------------------------
   【絞り込み】サイドバーがビューポートより低いときの押し下げ

   bottom: 0 は「下端がスクロールポートの下辺より上に来てはならない」という
   制約であり、sticky のオフセットは初期位置から即座に適用される。
   サイドバーがビューポートより低いと、スクロール 0 の時点で既に違反しており、
   ブラウザは要素を下へ押し下げる。押し下げの上限は包含ブロック
   （＝グリッドエリア＝行の高さ）で、align-self: start により
   行は記事一覧ぶん高くサイドバーは低いので、押し下げ量は大きい。
   結果、初期表示からサイドバーが画面下端に貼り付き、上に空白が空く。
   上の「下端が着くまでは普通に流れる」が成り立つのは、
   サイドバーがビューポートより高いときだけである。

   検討した選択肢と、それぞれの代償:
   - top: 0 を併記する
       → 不可。両方指定時は top 制約が勝ち、ビューポートより高い
         サイドバーは上端で固定され、下端が永久に読めない。要件が壊れる。
   - min-block-size: 100vh を足す
       → 押し下げは消え、高いときの振る舞いも保たれる。ただし
         min-block-size はグリッドの auto 行のサイズ計算に寄与するため、
         行が 100vh まで伸びる。記事一覧とサイドバーの両方が 100vh より
         低いページで、フッタの手前に空白が出る。
   - 「低いときは追従させない」を CSS だけで選り分ける
       → 手段が無い。top / bottom のパーセンテージは包含ブロックの高さ基準で、
         要素自身の高さを参照する記法が無い。コンテナクエリでも
         「自分の高さ vs ビューポート」は条件にできない。
         ラッパを 1 枚噛ませる古典的な手法は DOM 変更になる。

   採ったのは3つ目を JavaScript で作る道である。
   assets/js/sidebar-sticky.js が、サイドバーの高さとビューポートの
   高さを比べ、高いときだけサイドバー要素へ .optib-sticky-ready を
   付ける。低いときは付けない（付いていれば外す）。
   高さが変わる場面（リサイズ・回転・画像の遅延読み込み・ウィジェットの
   非同期描画）に追随するため、ResizeObserver（要素の寸法）と
   resize イベント（ビューポートの高さ）の両方を見ている。
   JS がするのはこの付け外しだけで、スクロール位置は見ないし
   top / bottom も書き換えない。追従は下の sticky のままである。

   下の規則が .optib-sticky-ready を要求しているのは、
   既定を「効かない側」に置くためである。JS が読み込まれない・
   失敗する、のいずれでもクラスは付かず、sticky が宣言されないので
   親テーマのままの流し込みになる。
   壊れ方は「追従しない」だけで、レイアウトは崩れない。

   ResizeObserver が無い古いブラウザは、これには当たらない。
   assets/js/sidebar-sticky.js は update() を無条件に 1 回呼び、
   resize リスナも無条件に登録する（RO の有無を見るのはその後）。
   したがって RO が無くても初回描画時とリサイズ時にクラスは付き、
   追従は効く。効かないのは中身の高さがあとから変わったときの
   追随だけである。

   min-block-size: 100vh は採らない。押し下げは消えるが、
   グリッドの auto 行が 100vh まで伸びて、短いページでフッタの手前に
   空白が出るためである。

   :not(.optib-no-sidebar) を挟んでいるのは、ウィジェットが空のときに
   効かせないためである。空のときは上のブロックの display: none が勝ち、
   ここは当たっても意味を持たない。条件を明示しておくほうが、
   後から読んだときに「空でも追従の指定が生きている」と誤読されない。

   左右のどちらでも効く。セレクタが
   .optib-sidebar-left / -right を見ていないためである。
   追従は左右とは別の軸であり、片方でだけ効く理由が無い。
   =========================================================== */
@media (min-width: 992px) {
  /* align-self: start は .optib-sticky-ready の外に置く。
     これは体裁の都合ではなく、JS の測定が成り立つための前提である。

     align-self の初期値は normal（グリッドでは stretch 相当）なので、
     クラスが無いあいだのサイドバーの高さは「行の高さ」＝記事一覧の高さに
     引き伸ばされている。この規則を ready の中に入れると、
     クラスの有無でサイドバー自身の高さが変わってしまい、
     assets/js/sidebar-sticky.js の
     getBoundingClientRect().height vs window.innerHeight の比較が
     次の2つの形で壊れる。

       (1) 中身が短くても記事一覧が長ければ「高い」と判定され、
           bottom: 0 による初期表示からの押し下げが再現する。
       (2) クラスを付けると高さが内容ぶんに縮み、ResizeObserver が
           再発火して「低い」に戻り、また付く……と発振する（点滅する）。

     ready の外に無条件で置けば、JS が測る値はクラスの付け外しで
     変化しない。だから比較が安定し、付け外しも収束する。
     この2つは切り離すと壊れる関係にある。片方だけ動かすな。

     ready の外に出しても見た目は変わらない。.l-grid__sidebar および
     aside 単独のセレクタに background / border / box-shadow / outline を
     与えている規則は親テーマ・子テーマとも 0 件で、高さが縮んでも
     塗りの差が出ないためである。
     セレクタを body.optib-sidebar-sticky-on の下に置いてあるので、
     設定が off の利用者には当たらない。 */
  body.optib-sidebar-sticky-on:not(.optib-no-sidebar) .l-grid > .l-grid__sidebar {
    align-self: start;
  }

  body.optib-sidebar-sticky-on:not(.optib-no-sidebar) .l-grid > .l-grid__sidebar.optib-sticky-ready {
    position: sticky;
    bottom: 0;
    /* 実際の追従は assets/js/sidebar-sticky.js が transform: translateY()
       で行っている（このファイル冒頭のコメント、および同スクリプトの
       冒頭コメントを参照。grid + bottom 指定では position: sticky が
       Chrome で効かないための代替）。will-change は、ブラウザに
       「この要素の transform は動く」と事前に伝え、専用の合成レイヤーを
       あらかじめ用意させるための指定。無いと、transform を書き換える
       たびに新しくレイヤーを作り直すことがあり、それがスクロール中の
       カクつきの一因になる。 */
    will-change: transform;
  }
}



/* ===========================================================
   サイドバーウィジェット：内側に余白を追加
   -----------------------------------------------------------
   親テーマ theme.css の .widget は
     { background: #fff; margin-bottom: 40px }
   で、そもそも padding が無い。ライトパレット（白背景）のときは
   目立たなかったが、ダークパレットで背景がグレー系の面色に
   なると、中身（カレンダーの日付セルなど）が箱の縁に接して見え、
   バランスが悪く見える。
   .widget-title には元から margin-bottom: 15px があるので、
   タイトルと本文の間隔はここでは触らない。box 全体の外周だけに
   16px の padding を足す。
   .widget-title:before の横線は width: 100% を widget の
   content box 基準で引いているだけなので、padding を足しても
   幅は変わらず特に副作用は無い（実機のカレンダーウィジェットで
   確認済み。テキスト系の他ウィジェットは今回未確認）。
   =========================================================== */
body.optib-preset-blog .widget {
  padding: 16px;
}


/* ===========================================================
   検索結果ページのサイドバー左右。

   検索結果は .l-grid ではなく .row / .col-lg-8 という別の骨組みで
   組まれているため、他ページ用の規則（上のブロック）は当たらない。
   ここだけ独立して同じことを書く必要がある。

   この規則は .row が display: grid であることに依存している。その
   宣言はプリセットに属さない汎用の整形なので Issue #3102 の側にあり、
   #3102 が入るまで検索結果ページの左右指定は効かない。w1b が壊した
   のではなく、プリセットと汎用 CSS を切り分けたことが作った順序依存
   である。
   =========================================================== */
@media (min-width: 992px) {
  body.optib-preset-blog.search.optib-sidebar-left .row > .l-grid__sidebar {
    grid-column: 1 / span 3;
  }

  body.optib-preset-blog.search.optib-sidebar-left .row > .col-lg-8 {
    grid-column: 4 / span 9;
  }

  /* 右は :not(.optib-sidebar-left) ではなく正のクラスで書く。:not()
     のままだと sidebar_position=theme（どちらのクラスも付かない）で
     右レイアウトが当たり、「その軸は親テーマのまま」が破れる。 */
  body.optib-preset-blog.search.optib-sidebar-right .row > .col-lg-8 {
    grid-column: span 9;
  }

  body.optib-preset-blog.search.optib-sidebar-right .row > .l-grid__sidebar {
    grid-column: span 3;
  }
}


/* ===========================================================
   単体投稿ページ（single-post）を参考サイトのデザインに寄せる

   対応する子テーマテンプレート: template-parts/post/content.php
   （親テーマ optib/template-parts/post/content.php を上書き）

   方針: 色は固定値を書かず、既存の親テーマ :root トークン
   （--color-text / --color-bg-light / --color-border / --color-primary 等）
   だけを使う。これらはパレット preset（dark / light-blue）ごとに
   値が変わるカスタムプロパティなので、ここで固定色を書かなければ
   ダーク配色・ライト配色のどちらでも自動的に馴染む。
   （実際に有効なパレットは DB オプション optib_preset で決まり、
   ファイル側からは固定できないため、両方で破綻しない書き方にしている）
   =========================================================== */

/* 本文幅を参考サイト（with-planning.co.jp/blog/...）の記事本文幅
   798px に合わせる。.l-grid__center-8 は grid-column: 3/11 で
   広めの列を確保するので、その内側でさらに max-width を絞り、
   margin-inline: auto でセンタリングする（サイドバーは元々無い）。

   width: 100% を明示している理由。
   .l-grid__center-8 はグリッドアイテムであり、本来は justify-items の
   既定（stretch）でトラック幅いっぱいに広がるはずだが、実際には
   「タイトルが短い投稿」で中身の内容幅（date badge + タイトル文字数ぶん）
   まで縮んでしまう現象が起きていた（自動最小サイズがトラック幅を下回る
   場合に縮む、Grid のアイテムサイズ決定の既定挙動によるもの）。
   結果、幅が縮んだ上に margin-inline: auto が効いて中央寄せになり、
   本文（.p-post__content 側は文章が長いため縮まない）と左端がズレて
   見えていた。width: 100% を明示して、内容量に関係なく必ずトラック幅
   いっぱいを取るようにし、この縮みを起こさせない。 */
body.optib-preset-blog.single-post .optib-post-width {
  width: 100%;
  max-width: 798px;
  margin-inline: auto;
}

body.optib-preset-blog.single-post .p-post__thumbnail-wrap {
  max-width: calc(798px + var(--container-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  box-sizing: border-box;
}

/* ここから 1 規則だけ、パンくず関連でありながらこのファイルに残してある。

   .optib-breadcrumb-bar + .l-site-content { margin-top: 0 } は帯のスタイル
   ではなく、親テーマ既定レイアウト（theme.css の .l-site-content の
   margin-block）を打ち消す規則である。帯の見た目一式は、モバイルの
   @media（767.98px 以下）も含めて breadcrumb-bar.css へ切り出し、
   常時読み込むようにした。無条件宣言だけを常時読む側へ移すと、
   こちらに残したメディア指定が詳細度同点・後勝ちで打ち消されるため、
   分けずに全部あちらへ置いている。この 1 つを
   一緒に持っていくと、外観プリセットを使っていない既定のサイトでも
   全ページの本文上余白が 80px から 0 に変わってしまう。
   既定サイトのレイアウトを動かさないことを、帯の下の余白を詰めることより
   優先した。プリセット無効時に帯と本文が 80px 空くのは、その帰結である。 */

/* 単体記事だけ、帯の下の間隔を 24px に詰める。
   親テーマ .l-site-content の margin-top 80px は、ページ見出し帯がある
   テンプレート向けの値である。帯が入った今、単体記事では空きすぎる。
   body.optib-preset-blog.single-post ではなく .single にしてあるのは、single.php が投稿タイプを
   問わず使われるため（FluentCart の商品 single-fluent-products など）。
   body.optib-preset-blog.single-post に限ると、商品ページだけ 80px のまま残る（実機で確認）。 */
/* 帯の直後に来る .l-site-content の上余白（親は 80px）を 0 にし、
   帯の margin-bottom 24px だけを残す。

   この規則が当たらない場合は 2 通りある。
   1. 帯が出ないページ（Elementor のテンプレートなど）。親の余白のまま。
   2. 帯は出るが、次に来るのが .l-site-content ではないページ。
      本 PR が新設した WooCommerce の入口
      （BreadcrumbController::register の woocommerce_before_main_content、
      優先度 5）がこれで、帯の次は Woo 側の本文ラッパー
      （実測で DIV#primary.content-area）になる。隣接セレクタが構造上
      届かず、プリセット有効でも帯と本文が 48px 空く（実測）。
      本 PR が作った例外なので、ここに明記しておく。 */
.optib-breadcrumb-bar + .l-site-content {
  margin-top: 0;
}

/* 見出しエリア全体: 左に日付バッジ、右にカテゴリー行+タイトルの2カラム */
.optib-headline-row {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.optib-headline-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 日付・カテゴリー・著者を横並びにする上段行（右カラムの中の1行目） */
.optib-post-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

.optib-headline-col .p-post__title {
  margin: 0;
}

/* 日付バッジ（月・日・年を3段スタック表示。参考サイトの縦長バッジに合わせ、
   見出しエリアの高さいっぱいに広がる） */
.optib-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  min-width: 4.5em;
  padding: 0.5em 0.75em;
  border-radius: var(--radius-sm, 2px);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  flex-shrink: 0;
}

.optib-date-badge__m {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.optib-date-badge__d {
  font-weight: 700;
  font-size: 1.5rem;
}

.optib-date-badge__y {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* カテゴリーピルバッジ（アーカイブ一覧の配色統一に合わせテーマカラーを使用） */
.optib-cat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.optib-cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  text-decoration: none;
  line-height: 1.6;
}

.optib-cat-badge:hover {
  background: color-mix(in srgb, var(--color-primary) 80%, black);
  color: #fff;
}

.optib-post-author {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.optib-post-author a {
  color: inherit;
}



/* ===========================================================
   ブログサイドバー（blog-sidebar）表示時の調整

   通常（サイドバー無し）は本文を798pxに絞ってセンタリングしているが、
   サイドバーが表示される2カラムレイアウトのときは、l-grid__main の
   幅にそのまま追従させる。798px固定をやめて、幅・センタリングを打ち消す。

   l-grid__main の列数は環境で変わる。親テーマ theme.css の既定は
   992px以上で 8/12 列。sidebar_position を明示した場合は、この
   ファイルの body.optib-sidebar-right / body.optib-sidebar-left ブロックが
   9/12 列に上書きする。どちらでも「main に追従させる」という意図は同じ。
   =========================================================== */
body.optib-preset-blog .optib-single-with-sidebar .optib-post-width {
  max-width: none;
  margin-inline: 0;
}

body.optib-preset-blog .optib-single-with-sidebar .p-post__thumbnail-wrap {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* ブログサイドバーのウィジェット。既存の main-sidebar と見た目を揃える
   （固定色を使わず、既存トークンのみで両パレット対応）。 */
body.optib-preset-blog #secondary .widget {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

body.optib-preset-blog #secondary .widget:last-child {
  border-bottom: none;
}

body.optib-preset-blog #secondary .widget-title {
  margin: 0 0 var(--spacing-md);
  font-size: 1rem;
  color: var(--color-text);
}



/* ===========================================================
   単体記事のスマホ表示（767px 以下）
   -----------------------------------------------------------
   実機（390px 幅）で見て直した箇所。数値はすべてその観測から来ている。

   - 見出しエリア: 日付バッジ（72px 幅・見出しの高さいっぱい）が
     タイトル列を 249px まで狭め、タイトルが 7 行になっていた。
     バッジを 1 行の横長チップにしてタイトルの上へ置き、
     タイトルを全幅にする。年月日の順にするため order で並べ替え、
     「年」「日」は ::after で足す（「月」はテンプレートが出している）。
   - パンくず: 記事タイトルまで含むため 3 行に折り返していた。
     1 行に収めて横スクロールにする。この対処はここではなく
     breadcrumb-bar.css 末尾の @media に置いてある（帯の無条件宣言と
     同じファイルに置かないと、後勝ちで打ち消されるため）。
   - 上の余白: 親テーマ .l-site-content の margin-top 48px を
     ヘッダー直下で半分にする。
   - アイキャッチ: .p-post__thumbnail-wrap の padding-inline が
     コンテナの余白と二重になり、本文より両側 26px ずつ狭かった。
   - 会話ブロック（親テーマの wp-block-optib-conversation）:
     アバター列が 120px 固定で、337px の本文幅の 3 分の 1 を取り、
     吹き出しが 1 行 8 文字程度になっていた。64px に縮める。
   =========================================================== */
@media (max-width: 767.98px) {
  .optib-headline-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm, 12px);
    margin-bottom: 0;
  }

  .optib-date-badge {
    flex-direction: row;
    align-items: baseline;
    gap: 0.3em;
    align-self: flex-start;
    min-width: 0;
    padding: 0.3em 0.7em;
    line-height: 1.2;
    font-size: 0.8125rem;
  }

  .optib-date-badge__y {
    order: 1;
    font-size: inherit;
    color: var(--color-text);
  }

  .optib-date-badge__y::after {
    content: "年";
  }

  .optib-date-badge__m {
    order: 2;
    font-size: inherit;
    color: var(--color-text);
  }

  .optib-date-badge__d {
    order: 3;
    font-size: inherit;
    font-weight: 600;
  }

  .optib-date-badge__d::after {
    content: "日";
  }

  .optib-headline-col .p-post__title {
    font-size: 1.375rem;
    line-height: 1.45;
  }

  body.optib-preset-blog.single-post .p-post__thumbnail-wrap {
    padding-inline: 0;
  }

  .wp-block-optib-conversation .wew-conversation-avatar {
    width: 64px;
    flex-basis: 64px;
  }

  .wp-block-optib-conversation .wew-conversation-avatar img {
    width: 48px;
    height: 48px;
  }

  .wp-block-optib-conversation .wew-conversation-participant-name {
    font-size: 0.6875rem;
  }
}


/* ヘッダーの追従を止める。
 *
 * 親テーマの .l-header は素で position: sticky; top: 0 を持っており
 * （親 assets/css/src/flocss/layout/_l-header.css）、管理バーが出ている
 * ときは top をその高さに差し替えている。だから既定は「追従する」で、
 * ここで打ち消すのは「追従しない」を選んだときだけである。
 *
 * position を static に戻せば top も z-index も効かなくなるので、
 * 親の admin-bar 用の指定を1つずつ打ち消す必要はない。
 * 1行で済むぶん、親が top の値を変えてもここは追随しなくてよい。
 *
 * 詳細度: 要素 body が 1、クラスが .optib-header-sticky-off と
 * .l-header で 2、計 0-2-1。親の .l-header（0-1-0）に勝つ。
 * 共有部品を作らず子テーマの style.css に置いてあるのは、
 * この規則がヘッダーのデザイン（theme / bar）のどちらでも同じだけ効き、
 * どの共有部品にも属さないためである。 */
body.optib-header-sticky-off .l-header {
  position: static;
}


/* ===========================================================
   ヘッダーの色（バー型）

   ここにあるのは「濃い帯の上に白い文字を置く」ための色だけである。
   高さ・ロゴの寸法・1行化・スマホの右ドロワーといった「形」は、
   共有部品（presets/_shared/headers/bar/style.css）にある。

   起点は body.optib-headers-bar だけである。移植元の子テーマは
   :is(.optib-headers-bar, .optib-header-theme) と書いて「ヘッダーは
   親テーマのまま」を選んだ人にも帯色を当てていたが、親テーマ側では
   それを引き継がない。header=theme は「この軸は親テーマのまま」を
   意味する既定であり、既定のままの人の見た目が変わってはいけない。
   帯色が欲しい人は header=bar を選ぶ。

   その結果、子テーマで header=theme のときに出ていた帯色は、
   親テーマでは出ない。これは意図した差である。

   詳細度は body（要素1）＋ クラス1。共有部品より前に読まれるので、
   同じ宣言を持つ規則があれば負けうるが、いまは形と色で宣言が
   重ならないようにしてある。

   帯の色は var(--color-primary) を使い、実値を書かない。
   親テーマの :root が --color-primary: var(--primary-color, #384d7a) と
   定義しており、--primary-color はカスタマイザーの「メインカラー」を
   PHP がインラインで注入している。この1本に乗せておくだけで、
   OptiB の一般設定を変えたときにヘッダーの帯もそのまま追随する。

   帯の上に乗る文字は #fff 固定である。主色は濃色である前提を置いている。
   明るい主色を選ぶと読みにくくなるが、そこを color-mix で自動調整すると
   「主色をそのまま出す」という狙いが崩れる。
   =========================================================== */

/* 帯そのもの。
   親の .l-header は background-color: var(--color-bg) と
   border-bottom: 1px solid var(--color-border) を持つ。
   帯にすると下線は帯の中に埋もれて濁るだけなので消す。 */
body.optib-headers-bar .l-header {
  background-color: var(--color-primary);
  border-bottom: 0;
  color: #fff;
}

/* ロゴ画像が未設定のとき、親テーマはサイト名とキャッチフレーズを出す。
   .l-header__brand-link と .l-header__phrase は親テーマのどの CSS にも
   定義が無く（クラス名があるだけ）、素のリンクとして出ている。
   バー型ではキャッチを消すが（共有部品側）、親のままでは残るので、
   両方に白を当てる。 */
body.optib-headers-bar .l-header__brand-link,
body.optib-headers-bar .l-header__phrase {
  color: #fff;
}

/* メニューの項目。親の .c-nav__link は色 var(--color-text-dark)。 */
body.optib-headers-bar .l-header__nav .c-nav__link {
  color: #fff;
}

/* hover は色を変えず不透明度で落とす。
   親は :hover で var(--color-primary) にするが、帯そのものが
   その色なので、ホバーした項目が帯に溶けて消える。
   フォーカスにも同じものを当てる。キーボードで辿るときに
   「いまどこにいるか」が見えないと、1行の帯では位置を見失う。 */
body.optib-headers-bar .l-header__nav .c-nav__link:hover,
body.optib-headers-bar .l-header__nav .c-nav__link:focus-visible {
  color: #fff;
  opacity: 0.75;
}

/* 子メニューを持つ項目の下向き三角。
   親は border-top: 4px solid currentColor で描いており、
   currentColor は上で白にしてあるので、実は何もしなくても白くなる。
   それでも書いてあるのは、この矢印が .c-nav__link ではなく
   ::after 側にあり、色の出どころが一目で追えないためである。 */
body.optib-headers-bar .l-header__nav .c-nav__item.has-children > .c-nav__link::after {
  border-top-color: #fff;
}

/* ドロップダウン（子メニュー）。
   実際に付くクラスは "sub-menu c-dropdown__menu" で、
   親テーマの functions.php の nav_menu_submenu_css_class フィルタが
   既定の sub-menu に c-dropdown__menu を足している。

   ドロップダウンは帯の外に落ちる白い箱なので、帯の白文字が
   そのまま降りてくると白地に白で読めなくなる。ここで戻す。
   リンクを a で受けているのは、子の <a> に .c-nav__link と
   .c-dropdown__link のどちらが付くかが階層で変わるためで、
   どちらでも同じ1規則で当てたい。 */
body.optib-headers-bar .l-header__nav .c-dropdown__menu {
  background-color: #fff;
}

body.optib-headers-bar .l-header__nav .c-dropdown__menu a {
  color: var(--color-text);
  opacity: 1;
}

body.optib-headers-bar .l-header__nav .c-dropdown__menu a:hover,
body.optib-headers-bar .l-header__nav .c-dropdown__menu a:focus-visible {
  color: var(--color-primary);
  opacity: 1;
}

/* 検索ボタン。親は色 var(--color-text-dark)、hover で var(--color-primary)。
   メニューと同じ理由で、hover は色ではなく不透明度で落とす。 */
body.optib-headers-bar .p-search__btn {
  color: #fff;
}

body.optib-headers-bar .p-search__btn:hover,
body.optib-headers-bar .p-search__btn:focus-visible {
  color: #fff;
  opacity: 0.75;
}

/* 検索オーバーレイ。
   親は「ヘッダーいっぱいに白い帯を被せ、素の input を置く」だけで、
   濃い帯の上に白い帯が唐突に現れ、プレースホルダーが左端で切れて見えていた。
   帯の色はそのまま（メインカラー）に保ち、その中に丸い白の入力欄を置く。
   左に虫眼鏡、右に閉じるボタン。入力欄の最大幅を絞って中央に寄せる。

   ここは形と色が分けられない。丸い白の入力欄という「形」が、
   帯を濃い色にしたことの結果だからである。まとめてこちらに置く。 */
body.optib-headers-bar .p-search__overlay {
  gap: 12px;
  padding: 6px 0;
  background-color: var(--color-primary);
}

body.optib-headers-bar .p-search__form {
  position: relative;
  flex: 1;
  max-width: 640px;
  margin: 0 auto;
}

/* 虫眼鏡。画像ファイルを持たず、SVG をマスクにして background-color で塗る。
   白い入力欄の中に置くので、帯の白ではなくグレー（#8a8a8a）にする。 */
body.optib-headers-bar .p-search__form::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-color: #8a8a8a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

body.optib-headers-bar .p-search__input {
  height: 40px;
  padding: 0 16px 0 42px;
  font-size: 15px;
  color: var(--color-text, #333);
  background-color: #fff;
  border: 0;
  border-radius: 999px;
  box-sizing: border-box;
}

body.optib-headers-bar .p-search__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

body.optib-headers-bar .p-search__input::placeholder {
  color: #8a8a8a;
}

body.optib-headers-bar .p-search__close {
  color: #fff;
  opacity: 0.85;
}

body.optib-headers-bar .p-search__close:hover,
body.optib-headers-bar .p-search__close:focus-visible {
  color: #fff;
  opacity: 1;
}

/* スマホ幅。境は親テーマに合わせて 991px。 */
@media (max-width: 991px) {
  /* ハンバーガー。線は background-color: currentColor で描かれているので、
     ボタンの色を変えれば3本とも白になる。 */
  body.optib-headers-bar .l-header__toggle {
    color: #fff;
  }

  /* 開いたメニューの面。帯より一段濃くする。
     帯と同じ色にすると、境目が消えて1枚の面に見える。
     color-mix で主色から派生させてあるので、
     一般設定でメインカラーを変えてもここだけ取り残されない。 */
  body.optib-headers-bar .l-header__mobile-nav {
    background-color: color-mix(in srgb, var(--color-primary) 85%, #000);
    border-bottom: 0;
  }

  /* 区切り線の色。0.15 ではなく 0.12 なのは、移す前のバー型が
     実際に描いていた値がこちらだったからである（同じ詳細度の2規則が
     あって、後に書かれたドロワー側の 0.12 が勝っていた）。
     見た目を変えないほうを採った。 */
  body.optib-headers-bar .c-nav--mobile .c-nav__link {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  body.optib-headers-bar .c-nav--mobile .c-nav__link:hover,
  body.optib-headers-bar .c-nav--mobile .c-nav__link:focus-visible {
    color: #fff;
    opacity: 0.75;
  }

  body.optib-headers-bar .c-nav--mobile .c-nav__item.has-children > .c-nav__link::after {
    border-top-color: rgba(255, 255, 255, 0.7);
  }

  /* 子メニューは閉じた状態が既定。親テーマの JS がスマホではタップで
     li.c-dropdown に is-open を付け外しするので、それに合わせて開く。

     開閉そのものは「形」に見えるが、ここに置いてある。
     親は PC 用のドロップダウン（白地・濃い文字）をスマホの子メニューにも
     そのまま当てるため、濃い面の中に薄いグレーの箱が出て白文字が消える。
     この打ち消しは帯を濃い色にした側の責任で、
     バー型か親のままかに関わらず要る。 */
  body.optib-headers-bar .c-nav--mobile .c-dropdown__menu {
    position: static;
    display: none;
    margin: 0 12px 8px;
    padding: 4px 0;
    background-color: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
  }

  body.optib-headers-bar .c-nav--mobile .c-dropdown__menu a {
    display: block;
    padding: 12px 20px 12px 28px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 0;
    opacity: 1;
  }

  body.optib-headers-bar .c-nav--mobile .c-dropdown__menu a:hover,
  body.optib-headers-bar .c-nav--mobile .c-dropdown__menu a:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    opacity: 1;
  }

  body.optib-headers-bar .c-nav--mobile .c-dropdown.is-open > .c-dropdown__menu {
    display: block;
  }

  /* 開いている親項目の矢印は上向きにして、閉じられることを示す。 */
  body.optib-headers-bar .c-nav--mobile .c-dropdown.is-open > .c-nav__link .ti-angle-down,
  body.optib-headers-bar .c-nav--mobile .c-dropdown.is-open > a .ti-angle-down {
    display: inline-block;
    transform: rotate(180deg);
  }

  /* 孫メニューは、さらに一段だけ内側へ。 */
  body.optib-headers-bar .c-nav--mobile .c-dropdown__menu .c-dropdown__menu {
    margin: 0 8px 4px;
    background-color: rgba(255, 255, 255, 0.06);
  }
}

/* ダーク配色のときは帯を黒にする。
   ダークパレットはメインカラーを明るい青に差し替えるため、帯全体が
   青くなって暗い画面から浮いていた（実機で確認）。ダークでは帯を #111、
   ドロワーと検索の帯もそれに合わせる。メインカラーはリンクやボタンに残る。
   フッターのサイトマップも同じ扱いにしてあり
   （presets/_shared/footers/sitemap/style.css）、上下で黒に揃う。 */
body.optib-palettes-dark .l-header,
body.optib-palettes-dark .p-search__overlay {
  background-color: #111;
}

@media (max-width: 991px) {
  body.optib-palettes-dark .l-header__mobile-nav {
    background-color: #000;
  }
}