/**
 * Agency Custom Elementor Widgets — Number Scrubber
 * number-scrubber.css
 *
 * Minimal layout — the number is the star.
 * Color is driven by JS via inline style on .acew-ns-number.
 * Prefix, suffix, and label inherit from Elementor typography controls.
 */

/* ── Color sentinel spans ────────────────────────────────────────────────── */
/* Hidden elements that receive color via Elementor selectors.              */
/* JS reads getComputedStyle to resolve globals, CSS vars, any format.      */
.acew-ns-sentinel-start,
.acew-ns-sentinel-end {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    /* Default colors — overridden by Elementor selectors */
}
.acew-ns-sentinel-start { color: #ffffff; }
.acew-ns-sentinel-end   { color: var(--acew-accent, #959699); }

/* ── Widget root ─────────────────────────────────────────────────────────── */
.acew-ns-widget {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* ── Number row — prefix, number, suffix sit inline ─────────────────────── */
.acew-ns-number-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.1em;
    line-height: 1;
}

/* ── Main number ─────────────────────────────────────────────────────────── */
.acew-ns-number {
    font-family: inherit;
    font-size: clamp( 3rem, 8vw, 8rem );
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    /* Color set by JS via style attribute */
    will-change: color;
}

/* ── Prefix / suffix ─────────────────────────────────────────────────────── */
.acew-ns-prefix,
.acew-ns-suffix {
    font-family: inherit;
    font-size: 0.45em;
    font-weight: 600;
    line-height: 1;
    display: inline-block;
    /* Color inherited from parent (.acew-ns-widget) color set by JS */
    color: inherit;
}

.acew-ns-prefix {
    align-self: flex-start;
    padding-top: 0.2em;
}

.acew-ns-suffix {
    align-self: flex-end;
    padding-bottom: 0.15em;
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.acew-ns-label {
    display: block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 10px;
    line-height: 1.4;
}

/* ── Reduced motion — snap to final value ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .acew-ns-number {
        will-change: auto;
    }
}