/* CANAL PASS — Urgent ticker. A thin, classic newsroom-style strip —
   no outer margin (so it sits flush against whatever sits above/below
   it — the rest of the vertical gap comes from the surrounding column/
   block, not from this component; see the plugin README note), no
   label of any kind — just the scrolling headlines themselves.
   Self-contained, hardcoded tokens (brand #0a3d62) — does not depend
   on theme or other plugin CSS. */

.cpau-ticker {
  display: flex;
  align-items: center;
  background: #0a3d62;
  border-radius: 4px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
}
.cpau-ticker * { box-sizing: border-box; }

.cpau-ticker-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #cfe0ee;
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Viewport clips the track; the track itself is twice the content's
   width (rendered twice server-side) and scrolls left by exactly one
   copy's width (-50%), then snaps back — reads as an unbroken loop. */
.cpau-ticker-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  min-width: 0;
  height: 100%;
}
.cpau-ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  white-space: nowrap;
  animation: cpau-ticker-scroll var(--cpau-ticker-duration, 40s) linear infinite;
}
.cpau-ticker:hover .cpau-ticker-track,
.cpau-ticker:focus-within .cpau-ticker-track {
  animation-play-state: paused;
}
@keyframes cpau-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Each item is a real <button> (reset to look like plain ticker text)
   so it's keyboard-operable and opens the full update in the shared
   modal on click — same click-through pattern as the News list. */
.cpau-ticker-item {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: #ffffff;
  font-size: .88rem;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.cpau-ticker-item:hover .cpau-ticker-item-title,
.cpau-ticker-item:focus-visible .cpau-ticker-item-title {
  text-decoration: underline;
}
.cpau-ticker-item:focus-visible {
  outline: 1px solid #c9a86a;
  outline-offset: 2px;
  border-radius: 2px;
}
.cpau-ticker-item-title {
  font-weight: 700;
  white-space: nowrap;
}
.cpau-ticker-item-excerpt {
  font-weight: 400;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
}
.cpau-ticker-sep {
  color: rgba(255, 255, 255, .3);
  padding: 0 16px;
  font-size: .8rem;
}

/* Respect reduced-motion — swap the animation for plain horizontal
   scroll so the content is still reachable, just not auto-moving. */
@media (prefers-reduced-motion: reduce) {
  .cpau-ticker-track {
    animation: none;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .cpau-ticker-item { font-size: .78rem; }
  .cpau-ticker-sep { padding: 0 12px; }
}