/* ── Brand colours ────────────────────────────────────────────────────────── */
:root {
    --rally-dark:    #2C3E50;
    --rally-green:   #27AE60;
    --rally-red:     #E74C3C;
    --rally-orange:  #E67E22;
    --rally-light:   #F8F9FA;
    --rally-muted:   #7F8C8D;
}

/* ── Global ───────────────────────────────────────────────────────────────── */
body { font-family: 'Segoe UI', sans-serif; }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.rally-navbar {
    background-color: var(--rally-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    padding-top: .4rem;
    padding-bottom: .4rem;
}
.rally-navbar .navbar-brand {
    font-size: 1.4rem;
    letter-spacing: -.3px;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-rally-primary {
    background-color: var(--rally-orange);
    border-color: var(--rally-orange);
    color: #fff;
}
.btn-rally-primary:hover { background-color: #cf6d17; color: #fff; }

.btn-rally-dark {
    background-color: var(--rally-dark);
    border-color: var(--rally-dark);
    color: #fff;
}
.btn-rally-dark:hover { background-color: #1a2737; color: #fff; }

/* ── Hero section ─────────────────────────────────────────────────────────── */
.hero-section {
    background:
        linear-gradient(to bottom, rgba(0,0,0,.52) 0%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.55) 100%),
        url('/images/Hero_Candidate_2.png') center / cover no-repeat;
    min-height: 480px;
    display: flex;
    align-items: center;
    border-radius: 0;
    /* force GPU compositing — eliminates sub-pixel fringe on text */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
}
.hero-section::after { display: none; }
.hero-section,
.hero-section * {
    -webkit-font-smoothing: antialiased;
    outline: none;
    text-shadow: none;
}
.hero-section h1 {
    text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

/* ── Section headings ─────────────────────────────────────────────────────── */
.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rally-dark);
}
.section-title span { color: var(--rally-orange); }

/* ── Rally card ───────────────────────────────────────────────────────────── */
.rally-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    transition: transform .15s, box-shadow .15s;
    overflow: hidden;
}
.rally-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.rally-card-img {
    height: 160px;
    object-fit: cover;
    background: linear-gradient(135deg, #34495e, #2c3e50);
}
.rally-card-img-placeholder {
    height: 160px;
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}
.badge-type { font-size: .7rem; letter-spacing: .5px; }

/* ── Coming-soon rally card (AppSettings:RalliesComingSoon) ─────────────────── */
.rally-card-coming-soon { position: relative; }
.rally-card-coming-soon .rally-card-img,
.rally-card-coming-soon .rally-card-img-placeholder {
    filter: grayscale(45%);
    opacity: .8;
}
.coming-soon-ribbon {
    position: absolute;
    top: 18px;
    right: -34px;
    transform: rotate(45deg);
    background: #e74c3c;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 40px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    z-index: 2;
}

/* ── How-it-works steps ───────────────────────────────────────────────────── */
/* archived emoji style — kept for reference */
.step-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--rally-green);
    color: #fff;
    font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.step-icon {
    width: 128px; height: 128px;
    object-fit: contain;
    display: block;
    margin: 0 auto 1.25rem;
}

/* ── Auth cards ───────────────────────────────────────────────────────────── */
.auth-card {
    max-width: 420px;
    margin: 60px auto;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0,0,0,.1);
}

/* ── Score badge ──────────────────────────────────────────────────────────── */
.score-badge {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rally-green);
}

/* ── Group leaderboard ────────────────────────────────────────────────────── */
.leaderboard-row { border-bottom: 1px solid #f0f0f0; padding: .6rem 0; }
.leaderboard-rank { font-size: 1.2rem; font-weight: 700; min-width: 36px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.rally-footer { background-color: #1a2737; }

/* ── Access code display ──────────────────────────────────────────────────── */
.access-code {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--rally-dark);
}

/* ── Answer hover-reveal ──────────────────────────────────────────────────── */
.answer-hidden {
    display: inline-block;
    filter: blur(5px);
    user-select: none;
    cursor: pointer;
    transition: filter 0.25s ease;
    border-radius: 4px;
    padding: 0 2px;
}
.answer-hidden:hover { filter: none; }
.result-row { border-bottom: 1px solid #f0f0f0; padding: .75rem 0; }
.result-row:last-child { border-bottom: none; }
.result-indicator-correct { color: var(--rally-green); font-weight: 700; }
.result-indicator-wrong   { color: var(--rally-red);   font-weight: 700; }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.text-rally-green { color: var(--rally-green) !important; }
.text-rally-muted { color: var(--rally-muted) !important; }
.bg-rally-dark    { background-color: var(--rally-dark) !important; }
.bg-rally-light   { background-color: var(--rally-light) !important; }

/* ── Home page scenery background ────────────────────────────────────────── */
.home-content-bg {
    background:
        linear-gradient(rgba(255,255,255,0.68), rgba(255,255,255,0.68)),
        url('/images/Scenery_BG_Sedona.jpg') fixed center / cover no-repeat;
}
/* Additional overlay for explicit section backgrounds — kept lighter since
   the base already provides 68% white */
.home-content-bg .bg-white {
    background-color: rgba(255, 255, 255, 0.40) !important;
}
.home-content-bg .bg-rally-light {
    background-color: rgba(248, 249, 250, 0.35) !important;
}

/* ── "Coming Soon" gate page ─────────────────────────────────────────────── */
.coming-soon-hero {
    min-height: 100vh;
    background: url('/images/coming-soon-mechanic.png') center / cover no-repeat;
    display: flex;
}
.coming-soon-overlay {
    width: 100%;
    background: rgba(27, 38, 49, 0.68);
}