/* ══════════════════════════════════════════════════════════════════════
   site.css — shared styles for the Horse Racing ETL site
   Imported on every page after Bootstrap. Per-page files keep only
   genuinely page-specific rules.
   ══════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────── */
:root {
    /* Brand */
    --c-turf:        #1a3a2a;
    --c-turf-light:  #254d39;
    --c-gold:        #c4922a;
    --c-gold-light:  #e8b84b;

    /* Race type */
    --c-flat:        #1e5fa8;
    --c-jump:        #b54c14;

    /* Surfaces */
    --c-bg:          #f2efe8;
    --c-card:        #ffffff;
    --c-border:      #ddd6c8;

    /* Text */
    --c-text:        #1c1c1c;
    --c-muted:       #6b6056;
    --c-label:       #8a7e72;

    /* Bootstrap link overrides */
    --bs-link-color:           #1a5c35;
    --bs-link-hover-color:     var(--c-turf);
    --bs-link-color-rgb:       26, 92, 53;
    --bs-link-hover-color-rgb: 26, 58, 42;

    /* Semantic */
    --c-win:         #c4922a;
    --c-place:       #1e5fa8;
    --c-results:     #1a7a3c;
    --c-nr:          #9e9088;
    --c-elo-pos:     #1a7a3c;
    --c-elo-neg:     #c0392b;
}

/* ── Base ──────────────────────────────────────────────────────────── */
html { font-size: 16px; }
body {
    background: var(--c-bg);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1rem;
    color: var(--c-text);
}
@media (min-width: 768px) { body { min-width: 480px; } }

/* ── Bootstrap overrides ───────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg:                var(--c-turf);
    --bs-btn-border-color:      var(--c-turf);
    --bs-btn-hover-bg:          var(--c-turf-light);
    --bs-btn-hover-border-color:var(--c-turf-light);
    --bs-btn-active-bg:         #122b1e;
    --bs-btn-active-border-color:#122b1e;
    --bs-btn-disabled-bg:       var(--c-turf);
    --bs-btn-disabled-border-color:var(--c-turf);
    --bs-btn-focus-shadow-rgb:  26, 58, 42;
}

.form-check-input:checked {
    background-color: var(--c-turf);
    border-color:     var(--c-turf);
}
.form-check-input:focus {
    border-color: var(--c-turf-light);
    box-shadow:   0 0 0 0.25rem rgba(26, 58, 42, 0.25);
}

/* ── Navbar ────────────────────────────────────────────────────────── */
.navbar.bg-dark {
    background: var(--c-turf) !important;
    border-bottom: 2px solid var(--c-gold);
}
.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
}

/* ── Search strip ──────────────────────────────────────────────────── */
.bg-white.border-bottom {
    background: var(--c-card) !important;
    border-bottom-color: var(--c-border) !important;
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
    border-color: var(--c-border);
}
.card-header {
    background: linear-gradient(to bottom, #faf8f4, #ffffff);
    border-bottom-color: var(--c-border);
    padding: 0.5rem 0.75rem;
}
.course-name {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-turf);
}

/* Fixture card coloured top borders */
.fixture-card             { border-top: 4px solid var(--c-muted); }
.fixture-card.track-flat  { border-top-color: var(--c-flat); }
.fixture-card.track-jump  { border-top-color: var(--c-jump); }
.fixture-card.is-abandoned { opacity: 0.7; }

/* ── Tables ────────────────────────────────────────────────────────── */
.race-table th,
.entries-table th {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-label);
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
    background: #f8f6f1;
}
.race-table td,
.entries-table td {
    padding: 0.3rem 0.5rem;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.table > :not(caption) > * > * {
    border-color: var(--c-border);
}
table.table-sm td,
table.table-sm th { padding: 0.25rem 0.4rem; }

/* ── Going strip ───────────────────────────────────────────────────── */
.going-strip { font-size: 0.72rem; color: var(--c-muted); }
.going-strip strong { color: var(--c-text); }

/* ── Typography helpers ────────────────────────────────────────────── */
.horse-name  { font-weight: 600; }
.trainer-name { font-size: 0.7rem; color: var(--c-muted); }
a.horse-link { color: inherit; text-decoration: none; }
a.horse-link:hover { text-decoration: underline; }

/* ── Non-runners ───────────────────────────────────────────────────── */
tr.is-nr td         { color: var(--c-nr); }
tr.is-nr .horse-name { font-weight: 400; }

/* ── Position / ELO ────────────────────────────────────────────────── */
.pos-winner    { color: var(--c-win); font-weight: 700; font-size: 1rem; }
.elo-delta-pos { color: var(--c-elo-pos); font-weight: 600; }
.elo-delta-neg { color: var(--c-elo-neg); font-weight: 600; }

/* ── Badges ────────────────────────────────────────────────────────── */
.badge-flat    { background: var(--c-flat);    color: #fff; }
.badge-jump    { background: var(--c-jump);    color: #fff; }
.badge-results { background: var(--c-results); color: #fff; }

/* ── Section headings (profile pages) ─────────────────────────────── */
.section-heading {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-label);
    font-weight: 600;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
}

/* ── Stat cards (horse / jockey / trainer profiles) ────────────────── */
.stat-card  { min-width: 90px; }
.stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--c-turf); }
.stat-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-label); }
.stat-sub   { font-size: 0.7rem; color: var(--c-muted); }

/* ── Scroll helpers ────────────────────────────────────────────────── */
.table-responsive { min-width: 0; }

/* ── Spinner ───────────────────────────────────────────────────────── */
.spinner-border { color: var(--c-turf) !important; }

/* ── Betfair steam tier badges ─────────────────────────────────────── */
.steam-amber  { background: #f59e0b; color: #1c1c1c; }
.steam-orange { background: #e65100; color: #fff; }
.steam-red    { background: #dc2626; color: #fff; }

/* ── Jockey silks ──────────────────────────────────────────────────── */

/* Option A — row background wash (combined with Option B column)
   --bs-table-bg: transparent makes Bootstrap's <td> cells see-through so
   the <tr> background shows as one continuous image from the row's left edge.
   Not applied to NR rows — table-danger handles those independently.
   Offset -100px skips the left sleeve + 5px grey border line.
   Fade ends at 300px (body width minus both 5px grey border lines),
   so the right sleeve and its grey line are fully white before the silk ends. */
.has-silk {
    --bs-table-bg: transparent;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.70) 0px, rgba(255,255,255,1) 300px),
        var(--silk-url);
    background-size: 100% 100%, 500px 500px;
    background-position: left top, -100px 50%;
    background-repeat: no-repeat, no-repeat;
}

/* Option B — split body + helmet cell
   Full silk width (sleeves included) on the left; helmet circle overlaid top-right.
   Body element is 45px (full silk at 45px scale) starting at left:0.
   Container is 54px to accommodate body + helmet overlap. */
.silk-split { position: relative; width: 54px; height: 46px; flex-shrink: 0; margin: 0 auto; }
.silk-split-body {
    position: absolute; left: 0; top: 0;
    width: 45px; height: 46px;
    background-size: 45px 45px;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.silk-split-helmet {
    position: absolute; right: 10px; top: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background-size: 62px 62px;
    background-position: -36px -4px;
    background-repeat: no-repeat;
    border: 1.5px solid rgba(255,255,255,0.7);
    overflow: hidden;
}
.table-danger .silk-split-body,
.table-danger .silk-split-helmet { opacity: 0.35; }

/* Fallback placeholder */
.silk-placeholder {
    display: block; width: 54px; height: 46px;
    background: var(--c-border); border-radius: 3px; margin: 0 auto;
}

/* Silk thumbnail in odds table — small inline version */
.silk-odds {
    display: inline-block;
    position: relative;
    width: 26px; height: 28px;
    vertical-align: middle;
    flex-shrink: 0;
}
.silk-odds-body {
    position: absolute; left: 1px; top: 0;
    width: 17px; height: 28px;
    background-size: 27px 27px;
    background-position: -5px 0;
    background-repeat: no-repeat;
}
.silk-odds-helmet {
    position: absolute; right: 0; top: 0;
    width: 13px; height: 13px;
    border-radius: 50%;
    background-size: 37px 37px;
    background-position: -21px -2px;
    background-repeat: no-repeat;
    border: 1px solid rgba(255,255,255,0.6);
    overflow: hidden;
}

/* ── ML prediction rank pills ─────────────────────────────────────────── */
.ml-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
}
.ml-pick-1 { background: var(--c-gold);   color: #fff; }
.ml-pick-2 { background: #8a8a8a;         color: #fff; }
.ml-pick-3 { background: #a0632a;         color: #fff; }
.ml-shape-square  { border-radius: 2px; }
.ml-shape-diamond { border-radius: 0; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.ml-pick-n { color: var(--c-muted); font-size: 0.68rem; }
.ml-div    { font-size: 0.62rem; color: var(--c-muted); margin-left: 2px; }
.ml-cell        { line-height: 1; }
.ml-cell > div  { margin: 0; padding: 0; white-space: nowrap; line-height: 17px; }
.ml-value  { color: var(--c-gold); font-size: 0.6rem; margin-left: 1px; vertical-align: middle; }

/* ── Bet tier badges ───────────────────────────────────────────────────── */
.bet-tier-1 { background-color: #b8860b; color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; }
.bet-tier-2 { background-color: #5b4a8a; color: #fff; font-size: 0.6rem; font-weight: 600; }
.bet-tier-3 { background-color: #3a6e5a; color: #fff; font-size: 0.6rem; font-weight: 500; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer { text-align: center; padding: 0.75rem 1rem; margin-top: 2rem; font-size: 0.75rem; color: var(--c-muted); border-top: 1px solid var(--c-border); }
.footer-sep  { margin: 0 0.5rem; }

/* ══ Auth / account pages ════════════════════════════════════════════════ */

/* Page heading — Playfair Display in turf, used across new pages */
.page-heading {
    font-family: 'Playfair Display', serif;
    color: var(--c-turf);
}

/* Disclaimer box — home page and signup page */
.disclaimer-box {
    background: #fdfbf5;
    border: 1px solid var(--c-border);
    border-radius: 0.375rem;
    font-size: 0.78rem;
    color: var(--c-muted);
    padding: 0.85rem 1rem;
    line-height: 1.6;
}
.disclaimer-box strong { color: var(--c-text); }

/* Referral link display box — account page */
.referral-box {
    background: #f8f6f1;
    border: 1px solid var(--c-border);
    border-radius: 0.375rem;
    font-family: monospace;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    word-break: break-all;
}

/* Subscription status badge — account page */
.sub-badge { font-size: 0.78rem; padding: 0.3em 0.7em; }

/* Referral code badge — large stylised code for sharing verbally */
.referral-code-badge {
    font-family: 'Courier New', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    color: var(--c-turf);
    background: #fdfbf5;
    border: 2px dashed var(--c-gold);
    border-radius: 0.5rem;
    padding: 0.4rem 1.25rem 0.4rem 1.5rem; /* right padding compensates letter-spacing on last char */
    user-select: all;
}

/* Home page hero band */
.hero-band {
    background:
        linear-gradient(to right, rgba(26,58,42,0.88) 0%, rgba(26,58,42,0.65) 55%, rgba(26,58,42,0.3) 100%),
        url('img/hero.webp') center center / cover no-repeat;
    color: #fff;
    padding: 2rem 0 1.5rem;
    border-bottom: 3px solid var(--c-gold);
}
.hero-band .site-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.hero-band .site-tagline {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* Skeleton loading placeholders */
@keyframes skel-shine {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.skel, .skel-dk {
    display: block;
    background-size: 300% 100%;
    animation: skel-shine 3.5s ease-in-out infinite;
    border-radius: 0.3rem;
}
.skel    { background-image: linear-gradient(90deg, #ebebeb 30%, #d8d8d8 50%, #ebebeb 70%); }
.skel-dk { background-image: linear-gradient(90deg, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 70%); }

/* Home page stat pills (inside hero) */
.stat-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    background: rgba(255,255,255,0.12);
    border-radius: 0.3rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
}
.stat-pill-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-gold);
    line-height: 1;
}
.stat-pill-label { opacity: 0.75; }

/* Home page winning ticker */
.ticker-wrap {
    overflow: hidden;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    background: #fff;
}
.ticker-inner {
    display: flex;
    gap: 2.5rem;
    white-space: nowrap;
    width: max-content;
    animation: ticker-scroll 40s linear infinite;
    padding: 0.4rem 0;
}
.ticker-wrap:hover .ticker-inner { animation-play-state: paused; }
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
}
.ticker-win  { color: var(--c-turf); font-weight: 700; }
.ticker-odds { color: var(--c-muted); }
.ticker-type { color: var(--c-gold); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.03em; }