@charset "UTF-8";
/* ============================================================
 * 詐欺バスターズ — パンくず
 *
 * 中身は template-parts/breadcrumb.php が組み立てる。
 * 記事・記事一覧・固定ページで同じ見た目にするため、
 * ページ別CSSではなくここに置いている。
 *
 * !important 使用禁止
 * ============================================================ */

.sb-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  font-size: .75rem;
  line-height: 1.7;
  color: var(--sb-mute);
}

/* 押せる高さを確保する。実測 20px しかなく、指では狙えなかった。
   padding で広げ、同じ量の負のマージンで見た目の位置を戻す。
   （見た目を変えずに当たり判定だけ広げる） */
.sb-crumb a {
  display: inline-block;
  padding-block: .7rem;
  margin-block: -.7rem;
  color: var(--sb-mute);
  text-decoration: none;
  transition: color .18s var(--sb-ease);
}
.sb-crumb a:hover { color: var(--sb-ink); }
.sb-crumb a:focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: 3px;
}

/* 区切りの「›」は、地の文字と同じ 12px だと細くて見えない。
   グリフ自体が字面の中で小さく、線も1本しかないため。
   文字は大きくするが、濃さは足し過ぎない。
   区切りが目立って地名より先に読まれると、順序が壊れる。 */
.sb-crumb__sep {
  font-size: 1.3em;
  line-height: 1;
  color: rgba(16, 18, 20, .42);
}

/* 現在地。記事タイトルは長いので、はみ出したら省略する。 */
.sb-crumb__now {
  color: var(--sb-ink);
  /* 狭い画面では 14em まで詰める。段は使わない。 */
  max-width: clamp(14em, 40vw, 28em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}