/* Sports Ticker — fixed top bar, scoped to .sports-ticker-wrap */

/* Push page content below the fixed ticker bar. This 40px offset is the ONLY
   thing the ticker reserves on the page — it makes room for the fixed bar and
   nothing more. Ad placement/spacing is intentionally left to the site's ad
   stack (Publisher Desk / GAM) so the two never fight over the same elements. */
body.sports-ticker-active {
  padding-top: 40px !important;
}

.sports-ticker-wrap {
  /* Fixed top bar */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;

  /* Dimensions & colours */
  --brand-purple: #7c3aed;
  --brand-pink:   #c026d3;
  --brand-accent: #e879f9;
  --win-green:    #22c55e;
  --lose-red:     #ef4444;
  --ticker-bg:    #111111;
  --ticker-text:  #e5e7eb;
  --ticker-muted: #9ca3af;
  --label-w:      110px;

  height: 38px;
  overflow: hidden;
  background: var(--ticker-bg);
  border-bottom: 2px solid var(--brand-purple);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  isolation: isolate;
}

/* Logged-in WordPress users already have an admin toolbar at the top. Keep the
   ticker directly beneath it so neither bar covers the other's controls. */
.admin-bar .sports-ticker-wrap { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .sports-ticker-wrap { top: 46px; }
}

/* Compact private-preview marker centered in the empty portion of WordPress's
   admin toolbar. It is informational only and never blocks toolbar clicks. */
.sports-ticker-preview-badge {
  position: fixed;
  top: 6px;
  left: 50%;
  z-index: 100000;
  transform: translateX(-50%);
  padding: 2px 8px;
  border: 1px solid #f59e0b;
  border-radius: 3px;
  background: #78350f;
  color: #fff;
  font: 800 10px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.08em;
  pointer-events: none;
  white-space: nowrap;
}

@media screen and (max-width: 782px) {
  .sports-ticker-preview-badge { top: 13px; }
}

/* ── Sections ──────────────────────────────────────────────── */
.sports-ticker-wrap .ticker-section {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  transform: translateY(-100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.sports-ticker-wrap .ticker-section.visible  { transform: translateY(0); }
.sports-ticker-wrap .ticker-section.exiting  {
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.55, 0, 1, 0.45);
}

/* ── Labels ─────────────────────────────────────────────────── */
.sports-ticker-wrap .ticker-label {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  margin: 0;
  height: 100%;
  padding: 0 13px 0 7px;
  font-family: inherit;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  gap: 4px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  /* Broadcast-style slanted right edge */
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.sports-ticker-wrap .ticker-label:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

.sports-ticker-wrap .ticker-label.games   { background: var(--brand-purple); }
.sports-ticker-wrap .ticker-label.stories { background: var(--brand-pink); }
.sports-ticker-wrap .ticker-label.breaking {
  background: #dc2626;
  animation: st-pulse 1.1s ease-in-out infinite;
}

@keyframes st-pulse {
  0%, 100% { background: #dc2626; }
  50%       { background: #991b1b; }
}

/* Live-style dot on the BREAKING label (replaces the old emoji; pulses in
   sync with the label background). */
.sports-ticker-wrap .breaking-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  flex: 0 0 auto;
  animation: st-dot-pulse 1.1s ease-in-out infinite;
}

@keyframes st-dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

@keyframes st-flash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(2.2); }
  100% { filter: brightness(1); }
}

.sports-ticker-wrap .label-flash { animation: st-flash 0.5s ease-out; }

/* ── Scrolling strip ─────────────────────────────────────────── */
.sports-ticker-wrap .ticker-content {
  overflow: hidden;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
  background: var(--ticker-bg);
  position: relative;
  /* Padding lives on this (non-animated) parent so the marquee loop stays
     seamless; it also keeps static content clear of the left edge fade. */
  padding-left: 12px;
}

/* Soft edge fades — content melts in/out instead of hard-clipping. Overlays
   sit above the strip but ignore the pointer so links stay clickable. */
.sports-ticker-wrap .ticker-content::before,
.sports-ticker-wrap .ticker-content::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.sports-ticker-wrap .ticker-content::before {
  left: 0;
  width: 14px;
  background: linear-gradient(to right, var(--ticker-bg), rgba(17, 17, 17, 0));
}
.sports-ticker-wrap .ticker-content::after {
  right: 0;
  width: 24px;
  background: linear-gradient(to left, var(--ticker-bg), rgba(17, 17, 17, 0));
}

.sports-ticker-wrap .ticker-scroll {
  display: inline-flex;
  align-items: center;
  /* The animation NAME (a per-section, exact-pixel keyframe) and DURATION are set
     in JS so one loop == exactly one content pass. Timing/iteration live here. */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.sports-ticker-wrap .ticker-scroll:hover { animation-play-state: paused; }

/* ── Items ──────────────────────────────────────────────────── */
.sports-ticker-wrap .ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ticker-text);
  padding-right: 18px;
  white-space: nowrap;
}

.sports-ticker-wrap .ticker-item a {
  color: var(--ticker-text);
  text-decoration: none;
}
.sports-ticker-wrap .ticker-item a:hover {
  color: var(--brand-accent);
  text-decoration: underline;
}

.sports-ticker-wrap .ticker-sep {
  color: #374151;
  padding-right: 10px;
  font-size: 0.6rem;
  user-select: none;
}

/* ── Score colours ──────────────────────────────────────────── */
.sports-ticker-wrap .score-win  { color: var(--win-green); font-weight: 900; position: relative; }
.sports-ticker-wrap .score-lose { color: var(--lose-red);  font-weight: 900; position: relative; }
.sports-ticker-wrap .score-dash { color: #6b7280; padding: 0 2px; }
.sports-ticker-wrap .game-status {
  color: var(--ticker-text);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ── Score delta badge (+1, +2) — pops up and fades ─────────── */
.sports-ticker-wrap .ticker-delta {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  padding: 0 3px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
  font-size: 0.55rem;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  transform: translateY(-0.45em);
  animation: st-delta-fade 3s ease-out forwards;
}

@keyframes st-delta-fade {
  0%   { opacity: 1; transform: translateY(-0.45em) scale(1.15); }
  25%  { opacity: 1; transform: translateY(-0.45em) scale(1); }
  100% { opacity: 0; transform: translateY(-0.7em)  scale(0.85); }
}

/* ── Score flash on change ───────────────────────────────────── */
.sports-ticker-wrap .score-updated {
  animation: st-score-pulse 1.8s ease-out 2;
}

@keyframes st-score-pulse {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.8) drop-shadow(0 0 4px rgba(34,197,94,0.5)); }
  100% { filter: brightness(1); }
}

/* ── Team badge ─────────────────────────────────────────────── */
.sports-ticker-wrap .tb {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  /* Default faint outline; inline style overrides border-color with the team's
     secondary colour so dark badges stay visible on the black bar. */
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

/* ── National game items (text format) ──────────────────────── */
/* Match the MN game font exactly so the Games row reads as one consistent set. */
.sports-ticker-wrap .ticker-national {
  color: var(--ticker-text);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ── League tag (MLB / NHL / WNBA …) before each game ────────── */
.sports-ticker-wrap .ticker-league {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  margin-right: 2px;
  border-radius: 3px;
  background: rgba(124, 58, 237, 0.18);
  color: var(--brand-accent);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Minnesota games — subtle "home" pill so they read as primary ─ */
.sports-ticker-wrap .ticker-item.mn-game {
  background: rgba(124, 58, 237, 0.16);
  border-left: 2px solid var(--brand-purple);
  border-radius: 4px;
  padding: 2px 10px 2px 8px;
  margin-right: 6px;
}

/* National games — grey "pill" mirroring the MN purple pill, so the two groups
   read as distinct without needing a label. */
.sports-ticker-wrap .ticker-item.ticker-national-item {
  background: rgba(148, 163, 184, 0.14);
  border-left: 2px solid #64748b;
  border-radius: 4px;
  padding: 2px 10px 2px 8px;
  margin-right: 6px;
}

/* ── Context label (Stanley Cup Final, NBA Finals, ALCS …) ────── */
.sports-ticker-wrap .ticker-context {
  color: var(--ticker-text);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ── National (non-MN) score — neutral white, no win/lose colour ─ */
.sports-ticker-wrap .nat-score {
  color: var(--ticker-text);
  font-weight: 900;
  padding: 0 1px;
}

/* ── Stat line (| SP: ... | J. Bell: ...) ──────────────────── */
.sports-ticker-wrap .game-stat-line {
  color: #e5e7eb;
  font-size: 0.7rem;
  font-weight: 600;
  padding-left: 2px;
}

/* ── Game links ─────────────────────────────────────────────── */
.sports-ticker-wrap .ticker-game-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sports-ticker-wrap .ticker-game-link:hover .tb {
  opacity: 0.85;
}

/* ── "vs" label between badges ──────────────────────────────── */
.sports-ticker-wrap .vs-label {
  color: #cbd5e1;
  font-size: .72rem;
  font-weight: 600;
}

/* ── Breaking strip ─────────────────────────────────────────── */
.sports-ticker-wrap .breaking-item   { color: #fca5a5; font-weight: 900; }
.sports-ticker-wrap .breaking-detail { color: #e5e7eb; font-weight: 600; }
.sports-ticker-wrap .breaking-source { color: #f87171; font-size: 0.68rem; font-weight: 700; }

/* ── Loading / empty state ──────────────────────────────────── */
.sports-ticker-wrap .ticker-loading {
  color: var(--ticker-muted);
  font-style: italic;
}

/* ── Small screens — give content more of the bar ───────────── */
@media (max-width: 480px) {
  .sports-ticker-wrap { --label-w: 84px; }
  .sports-ticker-wrap .ticker-label {
    font-size: 0.58rem;
    padding: 0 5px;
    letter-spacing: 0.05em;
  }
  .sports-ticker-wrap .ticker-item    { font-size: 0.72rem; }
  .sports-ticker-wrap .ticker-national { font-size: 0.72rem; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
/* Content is shown statically and sections swap without sliding. ticker.js
   detects the same preference and skips the marquee/glide entirely; these
   rules are the CSS half (and a safety net) of that behavior. */
@media (prefers-reduced-motion: reduce) {
  .sports-ticker-wrap .ticker-section  { transition: none !important; }
  .sports-ticker-wrap .ticker-scroll   { animation: none !important; }
  .sports-ticker-wrap .ticker-label.breaking,
  .sports-ticker-wrap .breaking-dot,
  .sports-ticker-wrap .label-flash,
  .sports-ticker-wrap .score-updated   { animation: none !important; }
}