/* ============================================================
 * assets/breadcrumb/breadcrumb.css
 * 役割: パンくずリスト（<ol class="breadcrumb clearfix">）の
 *       スタイリッシュ化。親テーマ xeory_base の bzb_breadcrumb()
 *       出力を CSS のみで上書きする（PHP ロジック・HTML 構造は無改変）。
 *
 * 親テーマ側の元マークアップ（live curl で実機確認済・R080607）:
 *   <ol class="breadcrumb clearfix" itemscope itemtype=".../BreadcrumbList">
 *     <meta itemprop="name" content="パンくずリスト">
 *     <li ...><a href="..."><i class="fa fa-home"></i> <span itemprop="name">ホーム</span></a><meta ...> /</li>
 *     <li ...><a href="..."><i class="fa fa-folder"></i> <span itemprop="name">現職裁判官の一覧</span></a><meta ...> /</li>
 *     <li ...><i class="fa fa-file-text"></i> <span itemprop="name">○○裁判官（N期）の経歴</span><meta ...></li>
 *   </ol>
 *   - 各 <li> 末尾の区切りは「素テキスト " /"」（要素で囲まれていない）。
 *   - 行頭アイコンは FontAwesome 4（fa fa-home / fa-folder / fa-file-text）。
 *   - 最後の項目（現在ページ）はリンク <a> 無しで <i>+<span> のみ。
 *
 * 設計方針（サイトの既存デザイン言語に合わせる）:
 *   - プライマリ色 #0044cc 系、角丸、控えめな影、ホバーで色＋淡い背景
 *   - 区切りの素テキスト " /" は li を font-size:0 で潰し、中身（a/span/i）の
 *     font-size を復活させる（HTML 改変不要のための定石。post-footer.css と同手法）
 *   - 区切りは CSS の ::before でシェブロン「›」を描画（DOM 非改変）
 *   - 子テーマの kisu-link.js が .breadcrumb 内「N期」をインライン <a> 化するため、
 *     項目リンクの装飾は「直下リンク .breadcrumb > li > a」のみに限定し、
 *     タイトル内のインライン期リンク（span 内）には影響させない
 * ============================================================ */

/* ---- コンテナ: <ol class="breadcrumb clearfix"> ---- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0 22px;
  padding: 9px 16px;
  list-style: none;
  font-size: 13px;
  line-height: 1.7;
  background: linear-gradient(135deg, #f7faff, #eef3ff);
  border: 1px solid #e1eaff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 68, 204, 0.05);
  overflow: visible; /* 親テーマの overflow:hidden を解除 */
}

/* itemscope 用の <meta> は不可視に（描画されないが念のため） */
.breadcrumb meta {
  display: none;
}

/* ---- 各項目: float 解除 → flex 化、区切り素テキスト " /" を font-size:0 で潰す ---- */
.breadcrumb > li {
  float: none;
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: 0; /* 区切りの素テキスト " /" を 0 幅化 */
}

/* ---- シェブロン区切り（2 番目以降の項目の前に挿入） ---- */
.breadcrumb > li:not(:first-child)::before {
  content: "\203A"; /* › 単一右シェブロン */
  margin: 0 9px;
  color: #9db4e0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

/* ---- 中身（リンク・テキスト・アイコン）の font-size を復活 ---- */
.breadcrumb > li > a,
.breadcrumb > li > span,
.breadcrumb > li > i.fa {
  font-size: 13px;
}

/* ---- 行頭アイコン（home / folder / file）を控えめに ---- */
.breadcrumb > li > a > i.fa,
.breadcrumb > li > i.fa {
  margin-right: 6px;
  color: #7b93c4;
  font-size: 12px;
  vertical-align: middle;
}

/* ============================================================
 * リンク項目（ホーム・カテゴリー）
 * ============================================================ */
.breadcrumb > li > a {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  color: #3a4a63;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.breadcrumb > li > a:hover,
.breadcrumb > li > a:focus-visible {
  color: #0044cc;
  background: #ffffff;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0, 68, 204, 0.14);
}
.breadcrumb > li > a:hover > i.fa,
.breadcrumb > li > a:focus-visible > i.fa {
  color: #0044cc;
}

/* ============================================================
 * 現在のページ（最後の項目・リンク無し）
 * ============================================================ */
.breadcrumb > li:last-child > i.fa {
  color: #0044cc;
}
.breadcrumb > li:last-child > span {
  color: #14233f;
  font-weight: 700;
  padding: 3px 2px;
  white-space: normal; /* 長いタイトルは折り返し可 */
}

/* ============================================================
 * スマホ: 余白・サイズを詰める（折り返しで読みやすさ優先）
 * ============================================================ */
@media (max-width: 600px) {
  .breadcrumb {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
  }
  .breadcrumb > li > a,
  .breadcrumb > li > span,
  .breadcrumb > li > i.fa {
    font-size: 12px;
  }
  .breadcrumb > li:not(:first-child)::before {
    margin: 0 6px;
    font-size: 14px;
  }
  .breadcrumb > li > a {
    padding: 2px 7px;
  }
}