/* ========================================
   congestion-ticker.css
   速報ニュースバー（混雑情報ティッカー）用スタイル

   トップページ（index.html / index_test.html）の
   ヒーロー直下に表示する1行ニュースティッカー専用。

   関連ファイル:
     - js2026/congestion-ticker.js  : 表示ロジック
     - tools/congestion-editor.html : 編集ページ（プレビュー用に同等のCSSを内蔵）
     - data/congestionInfo (Firebase): 表示データ

   design.md §10 例外申請：ユーザーの明示指示に基づき
   @keyframes による横スクロールアニメーションを今回限り解禁。
   ======================================== */

.congestion-ticker {
    display: block;
    background-color: #fffdf8;
    /* クリーム面（design.md §3） */
    border-top: 1px solid #ebe5d8;
    border-bottom: 1px solid #ebe5d8;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    color: #0f3d75;
    font-size: 0.85rem;
    line-height: 1;
    position: relative;
    z-index: 5;
    /* メインコンテンツとの間を5px狭める */
    margin-bottom: -5px;
}

.congestion-ticker[hidden] {
    display: none !important;
}

/* 中央寄せ・最大幅制限 */
.congestion-ticker__inner {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 30px;
}

.congestion-ticker__label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding-right: 0.8em;
    margin-right: 0.8em;
    border-right: 1px solid #dee8e2;
    color: #316204;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.congestion-ticker__label .fa-info-circle {
    font-size: 0.85rem;
    color: #316204;
}

.congestion-ticker--emergency .congestion-ticker__label {
    color: #dc3545;
    border-right-color: #f5c6cb;
}

.congestion-ticker--emergency .congestion-ticker__label .fa-info-circle {
    color: #dc3545;
}

.congestion-ticker__viewport {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.congestion-ticker__track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: congestion-ticker-scroll var(--congestion-ticker-duration, 30s) linear infinite;
}

@keyframes congestion-ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 各項目のアイコン */
.congestion-ticker__item-icon {
    color: #316204;
    margin-right: 0.4em;
    font-size: 0.85em;
}

.congestion-ticker__item--emergency .congestion-ticker__item-icon {
    color: #dc3545;
}

/* 項目の区切り */
.congestion-ticker__item + .congestion-ticker__item::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.85em;
    background-color: #c4cfc7;
    margin: 0 1em;
    vertical-align: middle;
}

/* 各項目末尾の更新時刻（小さく薄く） */
/* WCAG AA 対応：背景 #fffdf8 でコントラスト 4.5:1 以上を確保 */
.congestion-ticker__item-time {
    margin-left: 0.6em;
    font-size: 0.78em;
    font-weight: 400;
    color: #5a7aaa;
    letter-spacing: 0.02em;
}

.congestion-ticker__item--emergency .congestion-ticker__item-time {
    color: #a02633;
}

@media (min-width: 1000px) {
    .congestion-ticker {
        font-size: 0.9rem;
    }

    .congestion-ticker__inner {
        min-height: 32px;
    }

    .congestion-ticker__label {
        font-size: 0.72rem;
    }
}

/* A11y: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .congestion-ticker__track {
        animation: none;
        padding-left: 0;
        white-space: normal;
    }

    .congestion-ticker__track[data-fade-mode="true"] .congestion-ticker__item {
        display: none;
    }

    .congestion-ticker__track[data-fade-mode="true"] .congestion-ticker__item.is-active {
        display: inline-block;
    }
}

/* ========================================
   【メンテナンス時の注意事項】
   ========================================

   ■ 色の調整
   背景色: .congestion-ticker の background-color
   罫線色: .congestion-ticker の border-*
   ラベル色: .congestion-ticker__label の color
   緊急時の赤: .congestion-ticker--emergency 系

   ■ 高さ調整
   .congestion-ticker__inner の min-height

   ■ 幅制限
   .congestion-ticker__inner の max-width

   ■ メインコンテンツとの間隔
   .congestion-ticker の margin-bottom（負値で接近）

   ■ アニメーション速度
   --congestion-ticker-duration（JS側で文字長から自動計算）
   prefers-reduced-motion 時は自動停止＋フェード切替

   ■ アニメーションを完全に止めたい場合
   .congestion-ticker__track の animation: none;

======================================== */