/* ==========================================================================
   The Savings Mentor — News ticker
   Yellow strip under the category menu with scrolling headlines.
   All classes are prefixed "tsm-ticker" so nothing collides with existing CSS.
   ========================================================================== */

.tsm-ticker {
  --tsm-ticker-bg: #FFD400;          /* yellow stripe */
  --tsm-ticker-ink: #111;            /* black text */
  --tsm-ticker-up: #0B7A34;          /* green up arrow */
  --tsm-ticker-down: #C8102E;        /* red down arrow */

  display: flex;
  align-items: stretch;
  height: calc(36px * 0.98 * 0.7);  /* 24.7px */
  overflow: hidden;
  background: var(--tsm-ticker-bg);
  color: var(--tsm-ticker-ink);
  font-family: var(--font-text, 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

.tsm-ticker__label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 14px;
  background: var(--tsm-ticker-ink);
  color: var(--tsm-ticker-bg);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tsm-ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tsm-ticker__track {
  display: flex;
  width: max-content;
}

/* The script duplicates the list and sets the speed, then adds .is-running */
.tsm-ticker.is-running .tsm-ticker__track {
  animation: tsm-ticker-scroll var(--tsm-ticker-duration, 120s) linear infinite;
}

/* Pause while the reader hovers or tabs into it */
.tsm-ticker:hover .tsm-ticker__track,
.tsm-ticker:focus-within .tsm-ticker__track {
  animation-play-state: paused;
}

@keyframes tsm-ticker-scroll {
  to {
    transform: translateX(-50%);
  }
}

.tsm-ticker__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsm-ticker__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 32px;                   /* 64px between headlines */
  white-space: nowrap;
}

/* Small black square centred in the space between headlines */
.tsm-ticker__item::after {
  content: '';
  position: absolute;
  right: -2.5px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--tsm-ticker-ink);
}

/* A figure that moved: bold, followed by a coloured arrow */
.tsm-ticker__chg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0.32em;
  font-weight: 700;
  letter-spacing: 0;
}

.tsm-ticker__chg::after {
  content: '';
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
}

.tsm-ticker__chg--up::after {
  border-bottom: 7px solid var(--tsm-ticker-up);
  margin-top: -1px;                  /* optical centring on the digits */
}

.tsm-ticker__chg--down::after {
  border-top: 7px solid var(--tsm-ticker-down);
  margin-top: 1px;
}

/* Reduced motion: no auto-scroll; the reader can swipe/scroll the strip instead */
@media (prefers-reduced-motion: reduce) {
  .tsm-ticker.is-running .tsm-ticker__track {
    animation: none;
  }

  .tsm-ticker__viewport {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tsm-ticker__list[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 640px) {
  .tsm-ticker {
    height: calc(32px * 0.98 * 0.7); /* 21.95px */
    font-size: 0.75rem;
  }

  .tsm-ticker__label {
    padding: 0 10px;
  }

  .tsm-ticker__item {
    padding: 0 24px;
  }
}