/* ==========================================================================
   SUPARCO Latest News Ticker
   Scoped component styles. All selectors are prefixed with
   `suparco-news-ticker` to avoid any collision with existing site styles.
   ========================================================================== */

.suparco-news-ticker {
  --suparco-ticker-duration: 45s;
  --suparco-ticker-bg: var(--site-footer, #081727);
  --suparco-ticker-accent: var(--site-orange, #ff7a00);
  --suparco-ticker-text: #f2f5f8;
  --suparco-ticker-border: var(--site-border, rgba(255, 255, 255, 0.08));
  --suparco-ticker-height: 44px;

  position: relative;
  z-index: 30;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--suparco-ticker-height);
  background: var(--suparco-ticker-bg);
  border-bottom: 1px solid var(--suparco-ticker-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  isolation: isolate;
  box-sizing: border-box;

  /* Fallback offset so the ticker clears the fixed header even without JS.
     Refined precisely by suparco-news-ticker.js once the header's real
     rendered height is known. */
  margin-top: 73px;
}

@media (min-width: 992px) {
  .suparco-news-ticker {
    margin-top: 113px;
  }
}

.suparco-news-ticker * {
  box-sizing: border-box;
}

/* ---- Label ---- */

.suparco-news-ticker__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 18px;
  background: rgba(255, 122, 0, 0.08);
  border-right: 1px solid var(--suparco-ticker-border);
  color: var(--suparco-ticker-accent);
  font-family: 'Titillium Web', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.suparco-news-ticker__label-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--suparco-ticker-accent);
}

/* The live-status indicator replaces the static broadcast glyph with a
   solid dot plus an expanding ripple ring — a quieter, more institutional
   "this ticker is live" cue than an icon. Pure CSS/pseudo-elements only,
   so no markup changes are needed on any page. */
.suparco-news-ticker__label-icon svg {
  display: none;
}

.suparco-news-ticker__label-icon::before,
.suparco-news-ticker__label-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
}

.suparco-news-ticker__label-icon::before {
  background: var(--suparco-ticker-accent);
  transform: translate(-50%, -50%);
  animation: suparco-news-ticker-dot-blink 2s ease-in-out infinite;
}

.suparco-news-ticker__label-icon::after {
  border: 1.5px solid var(--suparco-ticker-accent);
  transform: translate(-50%, -50%) scale(1);
  animation: suparco-news-ticker-dot-ripple 2s ease-out infinite;
}

@keyframes suparco-news-ticker-dot-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes suparco-news-ticker-dot-ripple {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suparco-news-ticker__label-icon::before {
    animation: none;
    opacity: 1;
  }

  .suparco-news-ticker__label-icon::after {
    display: none;
  }
}

.suparco-news-ticker__label-text {
  line-height: 1;
  transform: translateY(0.5px);
}

/* ---- Viewport / track ---- */

.suparco-news-ticker__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* Subtle edge fade — decorative only, never blocks clicks */
.suparco-news-ticker__viewport::before,
.suparco-news-ticker__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 2;
  pointer-events: none;
}

.suparco-news-ticker__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--suparco-ticker-bg), rgba(8, 23, 39, 0));
}

.suparco-news-ticker__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--suparco-ticker-bg), rgba(8, 23, 39, 0));
}

.suparco-news-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Animation only runs once JS confirms the track has been measured and
   cloned; otherwise the static (readable, scrollable-if-needed) list from
   Phase 15 is shown. */
.suparco-news-ticker[data-ticker-ready="true"] .suparco-news-ticker__track {
  animation: suparco-news-ticker-scroll var(--suparco-ticker-duration) linear infinite;
}

.suparco-news-ticker:hover[data-ticker-ready="true"] .suparco-news-ticker__track,
.suparco-news-ticker:focus-within[data-ticker-ready="true"] .suparco-news-ticker__track {
  animation-play-state: paused;
}

@keyframes suparco-news-ticker-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--suparco-ticker-distance, -50%), 0, 0);
  }
}

/* ---- List / items ---- */

.suparco-news-ticker__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 24px 0 20px;
  gap: 0;
}

/* Without JS/animation: allow the original list to scroll horizontally
   inside its own viewport rather than overflowing the page. */
.suparco-news-ticker:not([data-ticker-ready="true"]) .suparco-news-ticker__viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.suparco-news-ticker:not([data-ticker-ready="true"]) .suparco-news-ticker__track {
  width: auto;
}

.suparco-news-ticker__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
}

.suparco-news-ticker__item + .suparco-news-ticker__item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 22px;
  border-radius: 50%;
  background: var(--suparco-ticker-accent);
  opacity: 0.85;
  flex-shrink: 0;
}

.suparco-news-ticker__link {
  color: var(--suparco-ticker-text);
  font-family: 'Titillium Web', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: var(--suparco-ticker-height);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.suparco-news-ticker__link:hover,
.suparco-news-ticker__link:focus-visible {
  color: #ffffff;
  border-color: var(--suparco-ticker-accent);
}

.suparco-news-ticker__link:focus-visible {
  outline: 2px solid var(--suparco-ticker-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Cloned (visual-only) copy must never take keyboard focus */
.suparco-news-ticker__list[aria-hidden="true"] .suparco-news-ticker__link {
  pointer-events: none;
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .suparco-news-ticker[data-ticker-ready="true"] .suparco-news-ticker__track {
    animation: none;
    transform: none;
  }

  .suparco-news-ticker__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .suparco-news-ticker__track {
    width: auto;
  }
}

/* ---- Responsive ---- */

@media (max-width: 767.98px) {
  .suparco-news-ticker {
    --suparco-ticker-height: 40px;
  }

  .suparco-news-ticker__label {
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 575.98px) {
  .suparco-news-ticker__label {
    padding: 0 10px;
    gap: 6px;
  }

  .suparco-news-ticker__list {
    padding: 0 16px 0 14px;
  }

  .suparco-news-ticker__item + .suparco-news-ticker__item::before {
    margin: 0 16px;
  }

  .suparco-news-ticker__link {
    font-size: 12.5px;
  }

  .suparco-news-ticker__viewport::before,
  .suparco-news-ticker__viewport::after {
    width: 18px;
  }
}