/* ==========================================================================
   USCE Market Ticker — Frontend Styles
   ========================================================================== */

:root {
    --usce-ticker-bg:           #fdf6e6;
    --usce-ticker-border:       rgba(13,27,42,0.10);
    --usce-ticker-text:         #4a5568;
    --usce-ticker-label:        #b8922d;
    --usce-ticker-price:        #0d1b2a;
    --usce-ticker-sep:          rgba(13,27,42,0.12);
    --usce-ticker-up:           #15803d;
    --usce-ticker-down:         #b91c1c;
    --usce-ticker-flat:         #718096;
    --usce-ticker-stale:        #92400e;
    --usce-ticker-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --usce-ticker-transition:   color 0.35s ease, opacity 0.3s ease;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.usce-ticker {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             clamp(4px, 0.5vw, 10px);
    height:          34px;
    padding:         0 clamp(8px, 1vw, 24px);
    background:      var(--usce-ticker-bg);
    border-bottom:   1px solid var(--usce-ticker-border);
    font-family:     var(--usce-ticker-font);
    font-size:       clamp(0.68rem, 0.6rem + 0.2vw, 0.82rem);
    color:           var(--usce-ticker-text);
    letter-spacing:  0.02em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-wrap:       nowrap;
    white-space:     nowrap;
    overflow:        hidden;
    line-height:     1;
    position:        relative;
    z-index:         1;
}

/* When inside Flatsome top bar — override the parent bar to light theme */
.flatsome-top-bar:has(.usce-ticker),
.header-top:has(.usce-ticker),
#top:has(.usce-ticker),
.top-bar:has(.usce-ticker),
.top-bar-inner:has(.usce-ticker),
.top-bar-section:has(.usce-ticker) {
    background:  #fdf6e6 !important;
    border-bottom: 1px solid rgba(13,27,42,0.10) !important;
    color: #0d1b2a !important;
}

.flatsome-top-bar .usce-ticker,
.header-top .usce-ticker,
#top .usce-ticker,
.top-bar .usce-ticker,
.top-bar-inner .usce-ticker,
.top-bar-section .usce-ticker {
    background:  transparent;
    border:      none;
    height:      100%;
    padding:     0;
}

/* Fallback wrapper (wp_body_open injection) */
.usce-ticker-fallback-wrapper {
    width:       100%;
    background:  #fdf6e6;
    border-bottom: 1px solid rgba(13,27,42,0.10);
    display:     flex;
    justify-content: center;
}

/* ── Metal item ──────────────────────────────────────────────────────────── */
.usce-ticker__item {
    display:     flex;
    align-items: center;
    gap:         clamp(3px, 0.3vw, 6px);
    flex-shrink: 1;
    min-width:   0;
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.usce-ticker__label {
    font-size:      clamp(0.56rem, 0.5rem + 0.15vw, 0.72rem);
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--usce-ticker-label, #b8922d);
    flex-shrink:    0;
}

/* ── Price ───────────────────────────────────────────────────────────────── */
.usce-ticker__price {
    font-size:   clamp(0.68rem, 0.6rem + 0.2vw, 0.86rem);
    font-weight: 600;
    color:       var(--usce-ticker-price, #0d1b2a);
    font-variant-numeric: tabular-nums;
    transition:  var(--usce-ticker-transition);
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

@keyframes usce-flash {
    0%   { opacity: 1; }
    25%  { opacity: 0.3; }
    100% { opacity: 1; }
}
.usce-ticker__price--updating {
    animation: usce-flash 0.45s ease;
}

/* ── Change amount & percentage ──────────────────────────────────────────── */
.usce-ticker__change-amt,
.usce-ticker__change-pct {
    font-size:   clamp(0.60rem, 0.54rem + 0.15vw, 0.74rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition:  var(--usce-ticker-transition);
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.usce-ticker__change-pct {
    font-size:   clamp(0.56rem, 0.5rem + 0.12vw, 0.70rem);
    opacity:     0.8;
}
.usce-ticker__change--up   { color: var(--usce-ticker-up); }
.usce-ticker__change--down { color: var(--usce-ticker-down); }
.usce-ticker__change--flat { color: var(--usce-ticker-flat); }

/* ── Directional indicator ───────────────────────────────────────────────── */
.usce-ticker__indicator {
    display:     flex;
    align-items: center;
    width:       10px;
    height:      10px;
    flex-shrink: 0;
    transition:  color 0.35s ease;
}
.usce-ticker__indicator--up    { color: var(--usce-ticker-up); }
.usce-ticker__indicator--down  { color: var(--usce-ticker-down); }
.usce-ticker__indicator--flat  { color: var(--usce-ticker-flat); }

.usce-arrow { display: block; width: 10px; height: 10px; }

/* ── Separator ───────────────────────────────────────────────────────────── */
.usce-ticker__sep {
    display:    block;
    width:      1px;
    height:     14px;
    background: var(--usce-ticker-sep);
    flex-shrink: 0;
    margin:     0 clamp(1px, 0.2vw, 4px);
}

/* ── Updated timestamp ───────────────────────────────────────────────────── */
.usce-ticker__updated {
    font-size:   clamp(0.58rem, 0.52rem + 0.12vw, 0.68rem);
    color:       var(--usce-ticker-flat);
    opacity:     0.65;
    flex-shrink: 0;
    position:    absolute;
    right:       clamp(8px, 1vw, 24px);
}

/* ── Stale notice ────────────────────────────────────────────────────────── */
.usce-ticker--stale .usce-ticker__price { opacity: 0.45; }
.usce-ticker__stale-notice {
    font-size:  0.66rem;
    color:      var(--usce-ticker-stale);
    font-style: italic;
    flex-shrink: 0;
    position:   absolute;
    right:      clamp(8px, 1vw, 24px);
}

/* ── Dark variant (for use on dark headers) ──────────────────────────────── */
.usce-ticker--dark {
    --usce-ticker-bg:     rgba(13,27,42,0.88);
    --usce-ticker-text:   #a0aec0;
    --usce-ticker-label:  #d4a054;
    --usce-ticker-price:  #e2e8f0;
    --usce-ticker-sep:    rgba(253,246,230,0.12);
    --usce-ticker-up:     #34d399;
    --usce-ticker-down:   #f87171;
    --usce-ticker-flat:   #94a3b8;
}

/* ── Compact variant ─────────────────────────────────────────────────────── */
.usce-ticker--compact {
    height: 28px;
    font-size: clamp(0.62rem, 0.56rem + 0.15vw, 0.72rem);
}

/* ==========================================================================
   Responsive — progressive show/hide of secondary data
   ========================================================================== */

/*
 * Strategy: the base styles use clamp() so font sizes and gaps scale fluidly.
 * Media queries only toggle visibility of secondary elements at each tier,
 * ensuring the primary data (label + price) always fits.
 */

/* ── ≤ 479px  — phones: label + price only, wrap to 2 rows ──────────────── */
@media (max-width: 479px) {
    .usce-ticker {
        height: auto;
        padding: 4px 8px;
        flex-wrap: wrap;
        white-space: normal;
        gap: 3px 8px;
    }
    .usce-ticker__sep,
    .usce-ticker__change-amt,
    .usce-ticker__change-pct,
    .usce-ticker__indicator,
    .usce-ticker__updated,
    .usce-ticker__stale-notice {
        display: none;
    }
}

/* ── 480 – 639px — large phone: show change amount ──────────────────────── */
@media (min-width: 480px) and (max-width: 639px) {
    .usce-ticker {
        height: auto;
        padding: 4px 10px;
        flex-wrap: wrap;
        white-space: normal;
        gap: 3px 8px;
    }
    .usce-ticker__sep,
    .usce-ticker__change-pct,
    .usce-ticker__updated,
    .usce-ticker__stale-notice {
        display: none;
    }
}

/* ── 640 – 849px — small tablet: single row, hide pct + timestamp ────────── */
@media (min-width: 640px) and (max-width: 849px) {
    .usce-ticker {
        height: 32px;
    }
    .usce-ticker__change-pct,
    .usce-ticker__updated {
        display: none;
    }
}

/* ── 850 – 1079px — tablet / narrow laptop: hide pct ────────────────────── */
@media (min-width: 850px) and (max-width: 1079px) {
    .usce-ticker {
        height: 32px;
    }
    .usce-ticker__change-pct {
        display: none;
    }
}

/* ── 1080 – 1439px — laptop: full display, compact spacing ──────────────── */
@media (min-width: 1080px) and (max-width: 1439px) {
    .usce-ticker {
        height: 34px;
    }
}

/* ── 1440 – 1919px — desktop: comfortable spacing ───────────────────────── */
@media (min-width: 1440px) and (max-width: 1919px) {
    .usce-ticker {
        height: 36px;
    }
    .usce-ticker__sep { height: 16px; }
}

/* ── ≥ 1920px — 4K / ultra-wide ─────────────────────────────────────────── */
@media (min-width: 1920px) {
    .usce-ticker {
        height: 38px;
    }
    .usce-ticker__sep { height: 16px; }
}