/* Running event banner (homepage) — shown when an upcoming event is within 30 days */
:root { --banner-h: 0px; }
body.has-event-banner { --banner-h: 38px; padding-top: var(--banner-h); }

.tz-event-banner {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--banner-h);
  z-index: 1100;
  background: #D90024;
  color: #ffffff;
  overflow: hidden;
  display: flex; align-items: center;
  font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.tz-event-banner__track {
  display: inline-flex; flex-shrink: 0;
  animation: tz-banner-scroll 28s linear infinite;
}
.tz-event-banner:hover .tz-event-banner__track { animation-play-state: paused; }
.tz-event-banner__item { display: inline-flex; align-items: center; padding-right: 64px; color: inherit; text-decoration: none; }
.tz-event-banner__item::after { content: "\2022"; margin-left: 64px; }
a.tz-event-banner__item:hover { text-decoration: underline; }
@keyframes tz-banner-scroll { to { transform: translateX(-50%); } }

/* offset fixed header and menus below the banner */
body.has-event-banner .c-header { top: var(--banner-h); }
body.has-event-banner .c-mega,
body.has-event-banner .c-mega-backdrop,
body.has-event-banner .c-mobile-menu { top: calc(var(--banner-h) + var(--header-h)); }

@media (max-width: 768px) {
  body.has-event-banner { --banner-h: 34px; }
  .tz-event-banner { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-event-banner { justify-content: center; white-space: normal; text-align: center; }
  .tz-event-banner__track { animation: none; }
  .tz-event-banner__item:not(:first-child), .tz-event-banner__item::after { display: none; }
  .tz-event-banner__item { padding: 0 12px; }
}