/* Live event announcement banner (#videoAlert), shared by the whitelabel
   player page and the legacy event view templates.

   The banner is rendered server-side and refreshed by the status_watch
   polling, which replaces the element's innerHTML wholesale — so every
   decoration (eyebrow label, icon, glow) lives on the element itself or
   its pseudo-elements, never as child markup.

   Whitelabel theme tokens are used when the page defines them and fall
   back to the default palette on the legacy templates. */
.video-announcement-alert {
  width: min(92%, 900px);
  margin: var(--spacing-3xl, 32px) auto;
  padding: 16px 28px 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--danger-red-color, #ea5455) 55%, white);
  background: var(--danger-red-color, #ea5455);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--danger-red-color, #ea5455) 90%, white),
    color-mix(in srgb, var(--danger-red-color, #ea5455) 85%, black)
  );
  color: #fff;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 10px 32px color-mix(in srgb, var(--danger-red-color, #ea5455) 40%, transparent);
  animation: video-announcement-pulse 3s ease-in-out infinite;
}
.video-announcement-alert::before {
  content: "Announcement";
  display: table;
  margin: 0 auto 6px;
  padding-left: 22px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.92;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M16.88 4.35A23.1 23.1 0 018.25 6H7.5a5.25 5.25 0 00-.88 10.43 21.6 21.6 0 001.38 3.94c.46 1 1.67 1.32 2.58.8l.66-.38c.88-.51 1.16-1.6.77-2.47a17.1 17.1 0 01-.63-1.6c1.92.25 3.76.75 5.5 1.44A23.1 23.1 0 0021 12c0-2.77-.49-5.43-1.39-7.89a1.5 1.5 0 00-2.73.24z'/><path d='M18.76 3.7a1.5 1.5 0 00-1.02 2.82A19.6 19.6 0 0119.5 12c0 1.85-.26 3.64-.74 5.33a1.5 1.5 0 102.9.79c.55-1.95.84-4 .84-6.12 0-2.11-.29-4.16-.84-6.1a1.5 1.5 0 00-1.9-1.2z'/></svg>")
    left center / 14px 14px no-repeat;
}
/* Rich-text announcements arrive as <p> soup, often with a trailing blank
   <p><br></p> from the editor — collapse the bloat. */
.video-announcement-alert p {
  margin: 0 0 0.4em;
}
.video-announcement-alert p:last-child {
  margin-bottom: 0;
}
.video-announcement-alert p:last-child:has(> br:only-child) {
  display: none;
}
.video-announcement-alert a {
  color: #fff;
}
@keyframes video-announcement-pulse {
  0%,
  100% {
    box-shadow: 0 10px 32px color-mix(in srgb, var(--danger-red-color, #ea5455) 40%, transparent);
  }
  50% {
    box-shadow: 0 10px 44px color-mix(in srgb, var(--danger-red-color, #ea5455) 65%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .video-announcement-alert {
    animation: none;
  }
}
@media only screen and (max-width: 768px) {
  .video-announcement-alert {
    width: 94%;
    padding: 14px 18px 16px;
    font-size: 1rem;
  }
}