/* =============================================================================
   Count Stat Block
   /blocks/count-stat/count-stat.css

   ALL visual values come from CSS custom properties set inline by the
   render callback. Nothing is hardcoded here except structural layout.
   Variant modifier classes (--light, --dark, --accent, --transparent)
   provide sensible fallback values for each var so colour pickers are
   "nice to have" rather than "required".
   ============================================================================= */


/* ── Variant default tokens ─────────────────────────────────────────────────
   These set the CSS vars that the admin colour pickers can override.
   They live on the modifier class so specificity works correctly.
   --------------------------------------------------------------------------- */

/* Light (default) */
.count-stat-block--light {
    --cs-bg:            #fafafa;
    --cs-border-color:  #f0f0f0;
    --cs-label-color:   #999;
    --cs-subtext-color: #bbb;
}

/* Dark */
.count-stat-block--dark {
    --cs-bg:            #1c1c1e;
    --cs-border-color:  #2a2a2e;
    --cs-label-color:   rgba(255, 255, 255, 0.5);
    --cs-subtext-color: rgba(255, 255, 255, 0.35);
}

/* Accent — background = number colour, text goes white */
.count-stat-block--accent {
    --cs-bg:            var(--cs-number-color, #ad3075);
    --cs-border-color:  var(--cs-number-color, #ad3075);
    --cs-label-color:   rgba(255, 255, 255, 0.75);
    --cs-subtext-color: rgba(255, 255, 255, 0.55);
}

/* On accent cards the number/prefix/suffix should be white by default,
   unless the admin has overridden prefix/suffix colours specifically.
   We use a local fallback chain: the inline style sets --cs-number-color
   to the chosen accent colour; here we override to white for accent only. */
.count-stat-block--accent .count-stat__number,
.count-stat-block--accent .count-stat__prefix,
.count-stat-block--accent .count-stat__suffix {
    color: #fff;
}

/* Transparent — no background or border */
.count-stat-block--transparent {
    --cs-bg:           transparent;
    --cs-border-color: transparent;
    --cs-border-width: 0;
    --cs-label-color:  inherit;
    --cs-subtext-color:inherit;
}


/* ── Block wrapper ───────────────────────────────────────────────────────────
   All spacing/border/shadow controlled via vars set by PHP.
   --------------------------------------------------------------------------- */

.count-stat-block {
    background    : var(--cs-bg, #fafafa);
    border        : var(--cs-border-width, 1.5px) solid var(--cs-border-color, #f0f0f0);
    border-radius : var(--cs-border-radius, 10px);
    padding       : var(--cs-padding, 20px 18px);
    box-shadow    : var(--cs-shadow, none);
    width         : 100%;
    text-align    : var(--cs-text-align, left);
}


/* ── Number row ──────────────────────────────────────────────────────────────
   justify-content is set via --cs-number-justify from the admin select.
   --------------------------------------------------------------------------- */

.count-stat__number-wrap {
    display         : flex;
    align-items     : baseline;
    justify-content : var(--cs-number-justify, flex-start);
    gap             : 0.1em;
    line-height     : 1;
}


/* ── Number, prefix, suffix ──────────────────────────────────────────────────
   Each has its own colour var. Prefix/suffix fall back to number colour
   (set in PHP so the fallback chain is already resolved before it reaches CSS).
   --------------------------------------------------------------------------- */

.count-stat__number {
    font-family : var(--cs-font-family, inherit);
    font-size   : var(--cs-number-size, 28px);
    font-weight : var(--cs-font-weight, 800);
    color       : var(--cs-number-color, #ad3075);
    line-height : 1;
}

.count-stat__prefix {
    font-family : var(--cs-font-family, inherit);
    font-size   : var(--cs-number-size, 28px);
    font-weight : var(--cs-font-weight, 800);
    color       : var(--cs-prefix-color, var(--cs-number-color, #ad3075));
    line-height : 1;
}

.count-stat__suffix {
    font-family : var(--cs-font-family, inherit);
    font-size   : var(--cs-number-size, 28px);
    font-weight : var(--cs-font-weight, 800);
    color       : var(--cs-suffix-color, var(--cs-number-color, #ad3075));
    line-height : 1;
}


/* ── Label ───────────────────────────────────────────────────────────────────
   Colour falls back through variant default → generic muted grey.
   --------------------------------------------------------------------------- */

.count-stat__label {
    color       : var(--cs-label-color, #999);
    margin-top  : 4px;
    line-height : 1.4;
}


/* ── Supporting text ─────────────────────────────────────────────────────────
   --------------------------------------------------------------------------- */

.count-stat__sub-text {
    color       : var(--cs-subtext-color, #bbb);
    margin-top  : 6px;
    line-height : 1.55;
}