/* MCR.CITY live feed ticker 1.0.0 (MCR-LIVE-TICKER-03)
   One compact row between the homepage map (#mv) and Today in Manchester
   (#wot-day). Own namespace (.mcr-ticker-*) so the legacy .wot-ticker rules
   still carried by style.css never reach it. Colours follow the #wot-day
   authority in footer.php (white surface, #050507 ink, rgba(5,5,7,.08) rules). */

.mcr-ticker{
  position:relative;
  z-index:1;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:100%;
  min-width:0;
  height:36px;
  padding:0 14px;
  box-sizing:border-box;
  overflow:hidden;
  background:#fff;
  color:#050507;
  border-bottom:1px solid rgba(5,5,7,.08);
  font-family:Inter,system-ui,sans-serif;
  line-height:1;
}
.mcr-ticker ul,
.mcr-ticker li{list-style:none;margin:0;padding:0}
.mcr-ticker time{display:inline}

/* Scope label: what the feed covers. The rule after it is the separator. */
.mcr-ticker-scope{
  flex:0 0 auto;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding-right:10px;
  border-right:1px solid rgba(5,5,7,.14);
  white-space:nowrap;
}
#mcrLiveTicker .mcr-ticker-day{
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#050507;
}
#mcrLiveTicker .mcr-ticker-from,
#mcrLiveTicker .mcr-ticker-cat{
  font-size:10.5px;
  font-weight:700;
  color:#5b616d;
}
#mcrLiveTicker .mcr-ticker-cat::before{content:"\00B7";margin-right:6px;color:rgba(5,5,7,.4)}

/* Pause control: a real button, shown only while the row can scroll. */
.mcr-ticker-pause{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin:0;
  padding:0;
  border:1px solid rgba(5,5,7,.18);
  border-radius:50%;
  background:#fff;
  color:#050507;
  font:inherit;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.mcr-ticker-pause:hover{border-color:rgba(5,5,7,.4)}
.mcr-ticker-pause:focus-visible{outline:2px solid #E8201A;outline-offset:2px}
.mcr-ticker-pause svg{width:9px;height:9px;fill:currentColor;display:block}
.mcr-ticker-pause .mcr-ticker-ico-play{display:none}
.mcr-ticker.is-paused .mcr-ticker-pause .mcr-ticker-ico-play{display:block}
.mcr-ticker.is-paused .mcr-ticker-pause .mcr-ticker-ico-pause{display:none}
.mcr-ticker:not(.is-scrolling) .mcr-ticker-pause,
.mcr-ticker.is-static .mcr-ticker-pause{display:none}

/* Viewport clips the track, so nothing here can widen the page. */
.mcr-ticker-viewport{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent 100%);
}
.mcr-ticker-track{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  width:max-content;
  transform:translateX(0);
}
.mcr-ticker.is-scrolling .mcr-ticker-track{
  animation:mcrTickerScroll var(--mcr-ticker-dur,60s) linear infinite;
  will-change:transform;
}
@keyframes mcrTickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.mcr-ticker-set{display:flex;flex:0 0 auto;align-items:center}
.mcr-ticker-item{display:inline-flex;flex:0 0 auto;align-items:center;white-space:nowrap}
/* trailing separator on every item keeps the loop seam identical to any other gap */
.mcr-ticker-item::after{
  content:"";
  display:inline-block;
  width:1px;
  height:12px;
  margin:0 16px;
  background:rgba(5,5,7,.16);
}
/* Text colours carry the root id: the theme's
   .CENTRE.white-bg a:not([class*="btn"]):not([class*="pill"]) and its
   .CENTRE.white-bg span rules outrank plain class selectors. */
#mcrLiveTicker .mcr-ticker-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#050507;
  -webkit-text-fill-color:#050507;
  text-decoration:none;
  font-size:12.5px;
  font-weight:650;
  line-height:1;
  border-radius:3px;
}
#mcrLiveTicker .mcr-ticker-link:hover .mcr-ticker-title,
#mcrLiveTicker .mcr-ticker-link:focus-visible .mcr-ticker-title{text-decoration:underline;text-underline-offset:2px}
#mcrLiveTicker .mcr-ticker-link:focus-visible{outline:2px solid #E8201A;outline-offset:3px}
.mcr-ticker-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--tc,#7C3AED)}
#mcrLiveTicker .mcr-ticker-time{color:#5b616d;-webkit-text-fill-color:#5b616d;font-weight:750;font-variant-numeric:tabular-nums}
#mcrLiveTicker .mcr-ticker-title{color:#050507;-webkit-text-fill-color:#050507;font-weight:850}
#mcrLiveTicker .mcr-ticker-venue{color:#5b616d;-webkit-text-fill-color:#5b616d;font-weight:600}
#mcrLiveTicker .mcr-ticker-venue::before{content:"\00B7";margin-right:7px;color:rgba(5,5,7,.4);-webkit-text-fill-color:rgba(5,5,7,.4)}

/* Empty state: one honest line, no motion. */
#mcrLiveTicker .mcr-ticker-empty{
  margin:0;
  font-size:12px;
  font-weight:650;
  color:#5b616d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#mcrLiveTicker .mcr-ticker-empty a{color:#E8201A;-webkit-text-fill-color:#E8201A;font-weight:800;text-decoration:none}
#mcrLiveTicker .mcr-ticker-empty a:hover,
#mcrLiveTicker .mcr-ticker-empty a:focus-visible{text-decoration:underline}

.mcr-ticker-sr{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Pointer hover freezes the row in place so it can be read. */
@media (hover:hover){
  .mcr-ticker.is-scrolling:hover .mcr-ticker-track{animation-play-state:paused}
}
/* Off screen or tab hidden: animation stops, resumes where it was. */
.mcr-ticker.is-offscreen .mcr-ticker-track,
.mcr-ticker.is-hidden .mcr-ticker-track{animation-play-state:paused}

/* Static mode: pause button pressed, keyboard focus inside the row, or reduced
   motion. The row becomes a plain scrollable strip, one copy of the list. */
.mcr-ticker.is-paused .mcr-ticker-track,
.mcr-ticker.is-static .mcr-ticker-track,
.mcr-ticker .mcr-ticker-viewport:focus-within .mcr-ticker-track{animation:none;transform:none;will-change:auto}
.mcr-ticker.is-paused .mcr-ticker-viewport,
.mcr-ticker.is-static .mcr-ticker-viewport,
.mcr-ticker .mcr-ticker-viewport:focus-within{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-mask-image:none;
  mask-image:none;
  scrollbar-width:thin;
  scrollbar-color:rgba(5,5,7,.28) transparent;
}
.mcr-ticker.is-paused .mcr-ticker-set[aria-hidden],
.mcr-ticker.is-static .mcr-ticker-set[aria-hidden],
.mcr-ticker .mcr-ticker-viewport:focus-within .mcr-ticker-set[aria-hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .mcr-ticker .mcr-ticker-track{animation:none;transform:none;will-change:auto}
  .mcr-ticker .mcr-ticker-viewport{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-mask-image:none;
    mask-image:none;
    scrollbar-width:thin;
    scrollbar-color:rgba(5,5,7,.28) transparent;
  }
  .mcr-ticker .mcr-ticker-set[aria-hidden]{display:none}
  .mcr-ticker .mcr-ticker-pause{display:none}
}

@media (max-width:900px){
  .mcr-ticker{height:32px;padding:0 8px;gap:8px}
  .mcr-ticker-scope{padding-right:8px}
  #mcrLiveTicker .mcr-ticker-day{font-size:9px}
  #mcrLiveTicker .mcr-ticker-from,
  #mcrLiveTicker .mcr-ticker-cat{font-size:10px}
  #mcrLiveTicker .mcr-ticker-link{font-size:12px}
  .mcr-ticker-item::after{margin:0 12px}
  .mcr-ticker-pause{width:20px;height:20px}
}