/* ============================================================
   rally/assets/css/rally.css
   スタンプラリー参加者向け 独立CSS
   ------------------------------------------------------------
   テーマカラーは CSS 変数（--rally-base / --rally-accent）で管理。
   将来 group_rallies に theme カラムを追加してテーマ切り替えに
   対応する際、:root の値を body のクラスで切り替える方式に拡張する。
   ============================================================ */

:root {
    /* --- デフォルトテーマ: 紺×金（navy_gold） --- */
    --rally-base:        #1a3a5c;
    --rally-base-light:  #2e6096;
    --rally-accent:      #c8a84b;
    --rally-accent-soft: #fff8e6;
    --rally-text:        #212529;
    --rally-bg:          #f8f9fa;
}

/* ------------------------------------------------------------
   カラーパレット切替（団体管理画面で選択）
   body.rally-theme-XXX が付与されると :root の値を上書き
   ------------------------------------------------------------ */

/* navy_gold（デフォルト・明示指定用） */
body.rally-theme-navy_gold {
    --rally-base:        #1a3a5c;
    --rally-base-light:  #2e6096;
    --rally-accent:      #c8a84b;
    --rally-accent-soft: #fff8e6;
}

/* crimson_cream: 紅×クリーム（桜・紅葉・和） */
body.rally-theme-crimson_cream {
    --rally-base:        #9b2335;
    --rally-base-light:  #c14156;
    --rally-accent:      #f0c987;
    --rally-accent-soft: #fff5e0;
}

/* forest_amber: 森×琥珀（自然・温泉・観光地） */
body.rally-theme-forest_amber {
    --rally-base:        #2d5a3d;
    --rally-base-light:  #4a8160;
    --rally-accent:      #d4923f;
    --rally-accent-soft: #fdf1de;
}

/* ocean_coral: 海×珊瑚（海辺・夏祭り・港町） */
body.rally-theme-ocean_coral {
    --rally-base:        #1f6b8e;
    --rally-base-light:  #3a8eb3;
    --rally-accent:      #ff7e6b;
    --rally-accent-soft: #ffeae6;
}

/* slate_pink: スレート×桃（モダン・若年層向け） */
body.rally-theme-slate_pink {
    --rally-base:        #3d3d4e;
    --rally-base-light:  #5d5d72;
    --rally-accent:      #e89db8;
    --rally-accent-soft: #fdeef4;
}
/* cyan_yellow: シアン×イエロー（ポップ・キャンペーン向け／ブランド指定色 #00AED6 / #FFDD00）
   ベースは白文字が読めるようシアンを少し濃く(#0089ab)、明るい側(base-light)にブランドのシアンを配置 */
body.rally-theme-cyan_yellow {
    --rally-base:        #0089ab;
    --rally-base-light:  #00aed6;
    --rally-accent:      #ffdd00;
    --rally-accent-soft: #fffbe0;
}
/* 以下4テーマはアクセント色が明るく白文字だとWCAG AA不合格のため暗色テキストに上書き */
/* crimson_cream #f0c987: 白文字コントラスト比1.5:1 → 暗色で13.8:1 */
body.rally-theme-crimson_cream .btn-rally-accent,
body.rally-theme-crimson_cream .btn-rally-accent:hover {
    color: #5a2a00;
}
/* ocean_coral #ff7e6b: 白文字コントラスト比2.4:1 → 暗色で8.8:1 */
body.rally-theme-ocean_coral .btn-rally-accent,
body.rally-theme-ocean_coral .btn-rally-accent:hover {
    color: #5a1a00;
}
/* slate_pink #e89db8: 白文字コントラスト比2.0:1 → 暗色で13.4:1 */
body.rally-theme-slate_pink .btn-rally-accent,
body.rally-theme-slate_pink .btn-rally-accent:hover {
    color: #3d3d4e;
}
/* cyan_yellow #FFDD00: 白文字コントラスト比1.1:1 → 暗色で11.6:1 */
body.rally-theme-cyan_yellow .btn-rally-accent,
body.rally-theme-cyan_yellow .btn-rally-accent:hover {
    color: #212529;
}

/* ------------------------------------------------------------
   ベース
   ------------------------------------------------------------ */
body.rally-body {
    background-color: var(--rally-bg);
    color: var(--rally-text);
    font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* container は Bootstrap のものをそのまま使うが、rally画面では狭めに */
.rally-container {
    max-width: 960px;
}

/* ------------------------------------------------------------
   ナビゲーション
   ------------------------------------------------------------ */
.navbar-rally {
    background-color: var(--rally-base);
}
.navbar-rally .navbar-brand {
    color: #fff;
    font-weight: 700;
}
.navbar-rally .navbar-brand:hover { color: #fff; }
.navbar-rally .navbar-toggler {
    border-color: rgba(255,255,255,.3);
}
.navbar-rally .offcanvas-header {
    background: var(--rally-base);
    color: #fff;
}

/* ------------------------------------------------------------
   ヒーローエリア
   ------------------------------------------------------------ */
.rally-hero {
    background: linear-gradient(135deg, var(--rally-base) 0%, var(--rally-base-light) 100%);
    color: #fff;
    padding: 3.5rem 0;
    text-align: center;
}
/* 背景画像が登録されている場合は少し背を高くしてビジュアル映えを優先 */
.rally-hero.rally-hero-image {
    padding: 6.5rem 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.rally-hero h1 {
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 2rem;
}
.rally-hero .lead {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: rgba(255,255,255,.92);
}
.rally-hero .period {
    color: rgba(255,255,255,.85);
}

/* ------------------------------------------------------------
   3ステップカード
   ------------------------------------------------------------ */
.rally-step-icon {
    font-size: 2.5rem;
    color: var(--rally-base);
    margin-bottom: .75rem;
}
.rally-step-card {
    border: none;
}
.rally-step-card h5 {
    font-weight: 700;
}

/* ------------------------------------------------------------
   スタンプカード（card.php用）
   ------------------------------------------------------------ */
/* 取得済みスタンプ */
.rally-stamped-card {
    background: linear-gradient(135deg, var(--rally-base) 0%, var(--rally-base-light) 100%);
    color: #fff;
}
.rally-stamp-icon {
    font-size: 2rem;
    color: var(--rally-accent);
}
.rally-stamp-icon-empty {
    font-size: 2rem;
    color: #ccc;
}
.rally-stamp-count {
    color: var(--rally-accent);
    font-weight: 700;
}
.rally-progress-bar {
    background-color: var(--rally-accent) !important;
}

/* ------------------------------------------------------------
   ボタン
   ------------------------------------------------------------ */
.btn-rally-primary {
    background-color: var(--rally-base);
    color: #fff;
    border: none;
    font-weight: 700;
}
.btn-rally-primary:hover {
    background-color: var(--rally-base-light);
    color: #fff;
}
.btn-rally-accent {
    background-color: var(--rally-accent);
    color: #fff;
    border: none;
    font-weight: 700;
}
.btn-rally-accent:hover {
    background-color: var(--rally-accent);
    filter: brightness(0.88);
    color: #fff;
}

/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */
.rally-footer {
    background-color: var(--rally-base);
    color: rgba(255,255,255,.9);
    padding: 1.5rem 0;
    text-align: center;
    margin-top: auto;
}
.rally-footer a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
}
.rally-footer a:hover {
    color: #fff;
}