/* ============================================================
 *  breadcrumb.css — パンくず（pankuzu）の新デザイン
 *
 *  - 全ページで enqueue（functions.php）
 *  - 既存 common.css / layout.css は触らず、ここで上書き
 *  - HTML 構造は inc/pankuzu.php そのまま:
 *      <div class="pankuzu">
 *        <div class="breadcrumb"><?php bcn_display(); ?></div>
 *      </div>
 *  - bcn_display() の出力（Breadcrumb NavXT プラグイン）を想定:
 *      <span class="home"><a><span property="name">ホーム</span></a></span>
 *      &gt;
 *      <span property="name" class="current-item">現ページ</span>
 *  - セパレータ「›」は Breadcrumb NavXT の管理画面で
 *    「Settings → Breadcrumb NavXT → 一般 → Breadcrumb Separator」を ` › ` に変えると揃う
 * ============================================================ */

.pankuzu {
  background: #ffffff;
  padding: 8px 40px;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic",
               "Noto Sans JP", arial, sans-serif;
}

.pankuzu .breadcrumb {
  max-width: 1280px;
  margin: 0 auto;
  font-size: 11px;
  letter-spacing: .06em;
  color: #7a6b66;
  line-height: 1.8;
  /* 兄弟 ListItem の baseline ズレを防ぐため flex で center 揃え */
  display: flex;
  align-items: center;
  flex-wrap: nowrap;        /* 1行に固定 */
  overflow: hidden;         /* はみ出した分はカット */
  min-width: 0;
}
.pankuzu .breadcrumb > span[typeof="ListItem"] {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;           /* 通常は縮ませない */
  min-width: 0;
}
/* 最後の (current-item を含む) ListItem は余白を全部使い ellipsis 対象に */
.pankuzu .breadcrumb > span[typeof="ListItem"]:last-of-type {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.pankuzu .breadcrumb .current-item {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* リンク */
.pankuzu .breadcrumb a {
  color: #7a6b66;
  text-decoration: none;
  transition: color .15s;
}
.pankuzu .breadcrumb a:hover { color: #e84e7f; }

/* 現在のページ */
.pankuzu .breadcrumb .current-item {
  color: #544541;
  font-weight: 600;
}

/* 各 ListItem の間にセパレータ「›」を CSS で挿入
   （BCN のセパレータ設定が空でも見えるようにする）
   親 .breadcrumb は flex なので vertical-align/transform 不要 */
.pankuzu .breadcrumb span[typeof="ListItem"] + span[typeof="ListItem"]::before {
  content: "\203A";          /* › */
  color: #a79e97;
  font-size: 14px;
  margin: 0 8px 0 6px;
  line-height: 1;
  transform: translateY(-1px);
}

/* HOME アイコン（インライン SVG／functions.php の bcn_anchor_template フィルタで挿入） */
.pankuzu .breadcrumb .home {
  display: inline-flex;
  align-items: center;
}
.pankuzu .breadcrumb .home a,
.pankuzu .breadcrumb span.home {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* BCN は非 TOP では <a class="home"><span property="name"><svg/>HOME</span></a> と
   内側の span がもう一段あるので、その span も flex 化して縦中央揃え */
.pankuzu .breadcrumb .home a > span[property="name"],
.pankuzu .breadcrumb .home > span[property="name"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.pankuzu .breadcrumb .home svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: inherit;          /* a / span の color を継承 */
  vertical-align: middle;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .pankuzu { padding: 8px 16px; }
  .pankuzu .breadcrumb { font-size: 10px; }
  .pankuzu .breadcrumb .home svg { width: 11px; height: 11px; }
}