/* パンくずの帯。ヘッダーの直下、コンテナ幅いっぱいに敷く薄いグレー。

   出しているのは template-parts/breadcrumb-bar.php で、入口は 7 本ある。
   親テーマのテンプレート 6 本
   （404.php / archive.php / index.php / page.php / search.php / single.php）が
   get_header() の直後で呼ぶ経路と、WooCommerce の
   woocommerce_before_main_content（BreadcrumbController::renderBar、優先度 5）
   である。Woo のショップ・商品カテゴリー・商品詳細は Woo 側のテンプレートで
   描かれ、テンプレート 6 本の 1 行では届かないので、この 7 本目が要る。
   入口を数え違えると帯の取りこぼしや二重出力に直結するので、
   template-parts/breadcrumb-bar.php の冒頭コメントと同じ数を保つこと。
   帯そのものは <section class="l-site-content"> の外にあり、
   幅の制約はこの中の .l-container が持つ。

   このファイルは外観プリセットの有無に関わらず常時読み込まれる
   （BreadcrumbController::enqueueStyles、ハンドル optib-breadcrumb-bar）。
   帯はプリセットに関係なく全ページに出るので、プリセット有効時にしか
   読まれない appearance-blog.css には置けない。

   背景に var(--color-bg-light) を使うのは、ダーク配色がこのトークンを
   すでに差し替えているためである（presets/_shared/palettes/dark/style.css）。
   実値で #f0f0f0 と書くと、ダークのときだけ帯が白く浮く。
   フォールバックの #f0f0f0 は、親テーマの :root が読めない環境向け。

   帯と本文の間隔は、この margin-bottom と .l-site-content の margin-top が
   隣り合って相殺（margin collapsing）した結果になる。大きいほうが残る。
   その margin-top を 0 にする規則（.optib-breadcrumb-bar + .l-site-content）は
   appearance-blog.css 側に残してある——あれは帯のスタイルではなく親テーマ
   既定レイアウトの余白を打ち消す規則で、常時読み込む側へ移すとプリセット
   無効のサイトで全ページの本文上余白が 0 になるためである。
   結果として、デスクトップではプリセット有効なら 24px、無効なら
   親テーマの 80px が出る。767.98px 以下ではこのファイル末尾の
   @media が margin-bottom を 16px に落とす（プリセットの有無に関わらず）。

   なお、Woo の入口（woocommerce_before_main_content）で出た帯には、
   その隣接セレクタが構造上届かない。帯の次に来るのが .l-site-content では
   なく Woo 側の本文ラッパー（実測で DIV#primary.content-area）だからである。
   プリセット有効でも本文の上余白は打ち消されず、実測で 48px 空く。
   appearance-blog.css の当該規則のコメントにも同じことを書いてある。 */
.optib-breadcrumb-bar {
  background: var(--color-bg-light, #f0f0f0);
  padding-block: 10px;
  margin-bottom: 24px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* 中身は2通りある。Yoast SEO があれば Yoast の出力（.optib-crumbs__yoast、
   中身は素の <a> と区切り文字）、無ければ自前の <ol>（.optib-crumbs）。
   どちらも同じ帯に収まるよう、色と字送りは両方に当てる。 */
.optib-breadcrumb-bar .optib-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.optib-breadcrumb-bar .optib-crumbs__item {
  display: flex;
  align-items: center;
}

/* 区切りの「>」。文字として持たせず ::before に置くのは、
   読み上げに「大なり」を混ぜないためである。 */
.optib-breadcrumb-bar .optib-crumbs__item + .optib-crumbs__item::before {
  content: ">";
  margin: 0 0.5em;
  color: var(--color-text-muted);
}

/* 家アイコン。画像ファイルを持たず、SVG をマスクにして塗る
   （headers/bar の虫眼鏡と同じ方式）。currentColor ではなく
   var(--color-text-muted) を書いているのは、この ::before が
   <li> の直下にあり、リンクの色（hover で変わる）を継がないためである。 */
.optib-breadcrumb-bar .optib-crumbs__item--home::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.4em;
  flex: none;
  background-color: var(--color-text-muted);
  -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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.optib-breadcrumb-bar a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.optib-breadcrumb-bar a:hover,
.optib-breadcrumb-bar a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

/* 現在地。リンクにしていないので、色と太さで「ここ」だと示す。 */
.optib-breadcrumb-bar .optib-crumbs__current {
  color: var(--color-text);
  font-weight: 700;
}

/* Yoast の出力。Yoast は <span class="breadcrumb_last"> で現在地を包み、
   区切りは設定した文字をそのまま地の文として出す。
   <p> の余白だけ落として、色は上の a と帯の色をそのまま使う。 */
.optib-breadcrumb-bar .optib-crumbs__yoast,
.optib-breadcrumb-bar .optib-crumbs__yoast p {
  margin: 0;
}

.optib-breadcrumb-bar .optib-crumbs__yoast .breadcrumb_last {
  color: var(--color-text);
  font-weight: 700;
}

/* モバイル。帯は1行に収め、あふれたら横に流す。
   折り返すと帯の高さが2倍になり、深い階層のページだけ
   ヘッダーの下が分厚くなる。省略記号で切ると、
   現在地（いちばん右）が真っ先に読めなくなる。
   横スクロールなら、指で辿れば全部たどり着ける。

   このブロックは appearance-blog.css の @media から移してきた。
   向こうに置いたままだと、上の無条件宣言（font-size 13px /
   margin-bottom 24px）と詳細度が同点で、読み込み順が
   appearance-blog.css → breadcrumb-bar.css のため後勝ちで
   打ち消される。プリセット有効時ですら 12px / 16px が
   当たっていなかった（getComputedStyle で実測）。 */
@media (max-width: 767.98px) {
  .optib-breadcrumb-bar {
    margin-bottom: 16px;
    font-size: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .optib-breadcrumb-bar .optib-crumbs__list,
  .optib-breadcrumb-bar .optib-crumbs__yoast {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}