/**
 * 5K Fundraiser – CharityWP Theme Layer
 *
 * Visual parity with the legacy charitywp theme while keeping all plugin
 * markup/logic intact. Loaded after public.css, so every rule here is an
 * override targeting existing .fiveKay-* classes.
 *
 * Design tokens and typography are defined first so they can be reused.
 * Component-specific rules follow and cover the full frontend surface:
 * leaderboard, hero, features, total-raised, CTA, runner cards / profile,
 * checkout, registration, and cart.
 */

/* ------------------------------------------------------------------ */
/*  Design tokens                                                       */
/* ------------------------------------------------------------------ */
:root {
    --fivekay-primary:         #82d3a2;
    --fivekay-primary-dark:    #6ec68f;
    --fivekay-accent:          #f8b864;
    --fivekay-text:            #666666;
    --fivekay-heading:         #333333;
    --fivekay-border:          #eeeeee;
    --fivekay-progress-track:  #dddddd;

    --fivekay-font-body:       "Open Sans", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", sans-serif;
    --fivekay-font-heading:    "Roboto Slab", "Georgia", serif;

    --fivekay-radius-pill:     500px;
    --fivekay-radius-card:     5px;
    --fivekay-shadow:          0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------------------------ */
/*  Leaderboard                                                         */
/* ------------------------------------------------------------------ */

/* Body text inherits Open Sans from the card container. */
.fiveKay-leaderboard {
    font-family: var(--fivekay-font-body);
    color: var(--fivekay-text);
    border-radius: var(--fivekay-radius-card);
    box-shadow: var(--fivekay-shadow);
}

/* Header uses Roboto Slab, uppercase, letter-spaced — matches .charitywp h3. */
.fiveKay-leaderboard__header {
    background: var(--fivekay-primary);
}

.fiveKay-leaderboard__header h3 {
    font-family: var(--fivekay-font-heading);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

/* Name column: heavier, uppercase, heading font so it feels like a title. */
.fiveKay-leaderboard__name {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--fivekay-heading);
}

/* Raised amount: heading font for parity with charitywp's runner totals. */
.fiveKay-leaderboard__raised {
    font-family: var(--fivekay-font-heading);
    color: var(--fivekay-heading);
}

/* Rank pill: keep the round badge but shift to the heading font. */
.fiveKay-leaderboard__rank {
    font-family: var(--fivekay-font-heading);
}

/* Progress bar: force the green theme fill.
   The base public.css defaults to a blue gradient unless .fiveKay-progress-bar--green
   is added, and the leaderboard shortcode doesn't add that modifier. Override here. */
.fiveKay-leaderboard .fiveKay-progress {
    background: var(--fivekay-progress-track);
    border-radius: var(--fivekay-radius-card);
}

.fiveKay-leaderboard .fiveKay-progress-bar {
    background: linear-gradient(90deg, var(--fivekay-primary-dark), var(--fivekay-primary));
}

/* ------------------------------------------------------------------ */
/*  Shared — apply the plugin's Open Sans / Roboto Slab font stack to  */
/*  every frontend component (overrides whatever the host theme sets   */
/*  on the page wrapper). This is the layer that gives the plugin's    */
/*  surfaces consistent typography regardless of which theme is        */
/*  active; the --fivekay-font-* tokens are defined on :root above.    */
/* ------------------------------------------------------------------ */
.fiveKay-total-raised,
.fiveKay-section-header,
.fiveKay-runners-grid,
.fiveKay-runners-search,
.fiveKay-view-all,
.fiveKay-profile,
.fiveKay-checkout,
.fiveKay-registration,
.fiveKay-race-results,
.fiveKay-donor-report {
    font-family: var(--fivekay-font-body);
    color: var(--fivekay-text);
}

.fiveKay-total-raised h2,
.fiveKay-section-header h2,
.fiveKay-profile h1,
.fiveKay-profile h2,
.fiveKay-profile h3,
.fiveKay-checkout h2,
.fiveKay-checkout h3,
.fiveKay-registration h3,
.fiveKay-donor-report h2 {
    font-family: var(--fivekay-font-heading);
    color: var(--fivekay-heading);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ------------------------------------------------------------------ */
/*  Total Raised banner                                                 */
/* ------------------------------------------------------------------ */
.fiveKay-total-raised__label {
    font-family: var(--fivekay-font-body);
}

.fiveKay-total-raised__amount {
    font-family: var(--fivekay-font-heading);
    color: var(--fivekay-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ------------------------------------------------------------------ */
/*  Section header (runners page banner)                                */
/* ------------------------------------------------------------------ */
.fiveKay-section-header__title {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fivekay-heading);
}

.fiveKay-section-header__subtitle {
    font-family: var(--fivekay-font-body);
    color: var(--fivekay-text);
}

/* ------------------------------------------------------------------ */
/*  Runner card (runners grid)                                          */
/* ------------------------------------------------------------------ */
.fiveKay-runner-card {
    font-family: var(--fivekay-font-body);
    border: 1px solid var(--fivekay-border);
    border-radius: var(--fivekay-radius-card);
}

.fiveKay-runner-card__name {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--fivekay-heading);
}

.fiveKay-runner-card .fiveKay-progress {
    background: var(--fivekay-progress-track);
}

.fiveKay-runner-card .fiveKay-progress-bar,
.fiveKay-runner-card .fiveKay-progress-bar--green {
    background: linear-gradient(90deg, var(--fivekay-primary-dark), var(--fivekay-primary));
}

/* Sponsor button: public.css already handles the pill shape, border, and
   hover state — only the typography needs the theme font stack here. */
.fiveKay-sponsor-btn {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fiveKay-sponsor-input {
    font-family: var(--fivekay-font-body);
    border: 1px solid var(--fivekay-border);
    border-radius: var(--fivekay-radius-card);
}

.fiveKay-runners-search__input {
    font-family: var(--fivekay-font-body);
    border: 1px solid var(--fivekay-border);
    border-radius: var(--fivekay-radius-pill);
}

/* Match the adjacent search input's pill shape. The base public.css
   gives both controls 8px corners; the theme layer upgrades search to
   a pill, so the sort dropdown has to follow or the two sit visibly
   mismatched on the same row. */
.fiveKay-runners-sort__select {
    font-family: var(--fivekay-font-body);
    border: 1px solid var(--fivekay-border);
    border-radius: var(--fivekay-radius-pill);
}

/* ------------------------------------------------------------------ */
/*  Runner profile page                                                 */
/* ------------------------------------------------------------------ */
.fiveKay-profile__name {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fivekay-heading);
}

.fiveKay-profile__goal-msg {
    font-family: var(--fivekay-font-body);
    color: var(--fivekay-text);
}

.fiveKay-profile .fiveKay-progress {
    background: var(--fivekay-progress-track);
}

.fiveKay-profile .fiveKay-progress-bar,
.fiveKay-profile .fiveKay-progress-bar--green {
    background: linear-gradient(90deg, var(--fivekay-primary-dark), var(--fivekay-primary));
}

/* ------------------------------------------------------------------ */
/*  Checkout page                                                       */
/* ------------------------------------------------------------------ */
.fiveKay-checkout__table {
    font-family: var(--fivekay-font-body);
}

.fiveKay-checkout__table th {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--fivekay-heading);
    border-bottom: 2px solid var(--fivekay-border);
}

.fiveKay-checkout__input {
    font-family: var(--fivekay-font-body);
    border: 1px solid var(--fivekay-border);
    border-radius: var(--fivekay-radius-card);
}

.fiveKay-checkout__pay-btn {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--fivekay-primary);
    border-radius: var(--fivekay-radius-pill);
    color: var(--fivekay-primary);
    background: transparent;
    transition: background 0.4s ease, color 0.4s ease;
}

.fiveKay-checkout__pay-btn:hover {
    background: var(--fivekay-primary);
    color: #fff;
}

.fiveKay-checkout__empty {
    font-family: var(--fivekay-font-body);
    color: var(--fivekay-text);
}

/* ------------------------------------------------------------------ */
/*  Cart bar — the base public.css styles the bar to mirror the legacy  */
/*  shoppingBar/innerBar spec and lets the link inherit the host        */
/*  theme's text color; we only restyle the Clear Cart button here.     */
/* ------------------------------------------------------------------ */
.fiveKay-cart-bar__clear-btn {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ------------------------------------------------------------------ */
/*  Registration gate                                                   */
/* ------------------------------------------------------------------ */
.fiveKay-registration__heading {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fivekay-heading);
}

.fiveKay-registration__age-input {
    font-family: var(--fivekay-font-body);
    border: 1px solid var(--fivekay-border);
    border-radius: var(--fivekay-radius-card);
}

.fiveKay-registration__consent-text {
    font-family: var(--fivekay-font-body);
    color: var(--fivekay-text);
}

/* ------------------------------------------------------------------ */
/*  Race results                                                        */
/* ------------------------------------------------------------------ */
.fiveKay-race-results__message,
.fiveKay-race-results__title,
.fiveKay-results-category-heading {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fivekay-heading);
}

.fiveKay-results-table {
    font-family: var(--fivekay-font-body);
}

.fiveKay-results-table thead th {
    font-family: var(--fivekay-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--fivekay-primary);
}

/* ------------------------------------------------------------------ */
/*  Donor report                                                        */
/* ------------------------------------------------------------------ */
.fiveKay-donor-report__desc {
    font-family: var(--fivekay-font-body);
    color: var(--fivekay-text);
    text-align: center;
}

.fiveKay-donor-report__input {
    font-family: var(--fivekay-font-body);
    border: 1px solid var(--fivekay-border);
    border-radius: var(--fivekay-radius-card);
}

.fiveKay-donor-report__summary {
    font-family: var(--fivekay-font-heading);
    color: var(--fivekay-heading);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

.fiveKay-donor-report__empty,
.fiveKay-donor-report__error {
    font-family: var(--fivekay-font-body);
    text-align: center;
}

/* ------------------------------------------------------------------ */
/*  Small text elements                                                 */
/* ------------------------------------------------------------------ */

/* Cart-row remove button — keep the red color, adopt the theme font. */
.fiveKay-checkout__remove {
    font-family: var(--fivekay-font-heading);
}

/* Sponsor input validation error. */
.fiveKay-sponsor-error {
    font-family: var(--fivekay-font-body);
}

/* Plain-text error messages returned from shortcodes. */
.fiveKay-error {
    font-family: var(--fivekay-font-body);
}