/*
 * パンくずナビゲーション 補正用 CSS
 *
 * 既存サイトの意匠（グレー背景・黒リンク等）は public/assets/css/common.css の
 *   .breadcrumb { margin-top: 45px; background-color: #dddddd; padding: 10px 0; font-size: 12px; }
 *   .breadcrumb li { list-style: none; font-size: 10px; }
 *   .breadcrumb a { color: #000; text-decoration: none; }
 *   .breadcrumb li span { margin: 0 10px; }
 *   .breadcrumb .inner { width:100%; max-width:1020px; margin:0 auto; }
 * を引き続き利用する。
 *
 * 本ファイルでは、CSV「中古車検索サイト 開発スケジュール - パンくず周り」の指示と
 * 新しい HTML 構造（Schema.org BreadcrumbList の itemprop 用 span を追加した結果、
 * 1 つの <li> 内に span が複数存在するようになった）に対応するための
 * "差分の補正" のみを行う。
 *
 * 主な対応:
 *  - 横にはみ出す場合は折り返さずスクロール（CSV 指示）
 *  - common.css の `.breadcrumb li span { margin: 0 10px; }` が
 *    全 span に効くと title 文字列にも左右マージンが付いてレイアウト崩れになるため、
 *    BEM クラスで上書き（詳細度を一段上げて勝たせる）。
 *  - stock TOP 用「フッター直上のパンくず」は common.css の意匠と分離するため
 *    .breadcrumb--footer 修飾子を用意。
 *  - SEO 用の画面非表示 h1 を念のため宣言。
 */

/* ============================================================
 * 横スクロール対応（CSV 指示）
 *
 * <ol class="breadcrumb__list"> に対して直接フレックス + 横スクロールを適用。
 * common.css 側でも 7XX px 以下のメディアクエリで .breadcrumb ol に
 * 横スクロールが設定されているが、PC 幅でも横はみ出しに耐えるよう
 * デバイス幅を問わずここで一括設定する。
 * ============================================================ */
.breadcrumb .breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.breadcrumb .breadcrumb__list::-webkit-scrollbar {
    height: 4px;
}

.breadcrumb .breadcrumb__list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 2px;
}

.breadcrumb .breadcrumb__item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* ============================================================
 * common.css の `.breadcrumb li span { margin: 0 10px; }`
 * （詳細度 0,1,2）を打ち消す。
 *
 * 新 HTML は <li> の中に
 *   <a><span itemprop="name">…</span></a>
 *   <span class="breadcrumb__separator">＞</span>
 * の 2 種類の span が並ぶ。前者にまで 10px マージンが付くと、
 * リンクの中で title 文字列がリンク領域からはみ出して見える。
 *
 * 詳細度を `.breadcrumb` 1 段ぶん上げて (0,2,1) で勝たせる。
 * ============================================================ */
.breadcrumb .breadcrumb__link > span,
.breadcrumb .breadcrumb__current {
    margin: 0;
}

/* セパレータ ＞ の左右余白だけは明示的に付け直す。
   common.css の `.breadcrumb li span { margin: 0 10px; }` と同等の見た目を、
   .breadcrumb__separator にだけ適用する形にする。 */
.breadcrumb .breadcrumb__separator {
    margin: 0 10px;
    flex: 0 0 auto;
}

/* リンクのホバー時だけ下線（既存意匠の踏襲＋アクセシビリティ） */
.breadcrumb .breadcrumb__link:hover,
.breadcrumb .breadcrumb__link:focus {
    text-decoration: underline;
}

/* ============================================================
 * フッター直上のパンくず（stock TOP 用）
 * common.css の .breadcrumb { margin-top: 45px; background-color: #dddddd; }
 * をそのまま使うとフッター直上には合わないため、別意匠で打ち消す。
 *
 * ※ index.blade.php の HTML 構造は
 *    <div class="breadcrumb--footer">
 *        <nav class="breadcrumb"> ... </nav>
 *    </div>
 * となるため、子孫セレクタ（スペースあり）で nav.breadcrumb を指定する。
 * ============================================================ */
.breadcrumb--footer .breadcrumb {
    margin-top: 0;
    background-color: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    padding: 8px 0;
}

/* SP: 車両一覧などと同様に .inner へ左右余白（cars-index.css 準拠） */
@media screen and (max-width: 768px) {
    .breadcrumb--footer .breadcrumb {
        padding: 0;
    }

    .breadcrumb--footer .breadcrumb .inner {
        padding: 6px 20px;
    }

    .breadcrumb--footer .breadcrumb .breadcrumb__list {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* ============================================================
 * 画面非表示の h1（SEO 用）
 * layouts/app.blade.php の @section('h1_hidden') 経由で挿入される。
 * .visually-hidden は common.css 側で既に定義されているため、ここでは
 * 念のための保険として最小限のリセットを再宣言する。
 * ============================================================ */
.seo-h1 {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}