/* DS-005: token replacement for the live notification banner.

   Sticky rather than fixed: a fixed banner sits over the top of the page, so
   the logo, the menu, and anything scrolled to the top were covered, including
   when they held keyboard focus (Requirement 8.2). Sticky keeps the banner in
   view while it takes its own space in the flow; `scroll-padding-top` on the
   root makes keyboard focus and in-page links stop below it. */
html:has(.live-banner) {
  scroll-padding-top: var(--tkc-space-8);
}

/* The theme pins the hero's logo-and-menu bar to the top of the page
   (`.main-nav.overlay { position: absolute; top: 0 }`), which is under the
   banner. `top: auto` leaves it at its natural place, the top of the hero,
   below the banner. The hero itself stays unpositioned: positioning it would
   paint its background over the Particles_Background layer. */
html:has(.live-banner) .main-nav.overlay {
  top: auto;
}

.live-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--tkc-space-2);
  padding: var(--tkc-space-2) var(--tkc-space-4);
  color: var(--tkc-color-bg);
  background-color: var(--tkc-color-accent-strong);
  box-shadow: var(--tkc-shadow-md);
  font-size: var(--tkc-size-100);
  font-weight: var(--tkc-weight-bold);
}

.live-dot {
  width: var(--tkc-space-3);
  height: var(--tkc-space-3);
  background-color: var(--tkc-color-bg);
  border-radius: var(--tkc-radius-pill);
  animation: tkc-live-pulse var(--tkc-motion-slow) ease-in-out infinite alternate;
}

.live-link {
  color: var(--tkc-color-bg);
  text-decoration: underline;
}

/* On the banner's accent fill the focus token measures 1.2:1; the page color
   is the banner's own text color and clears 3:1 in both appearances. */
.live-link:focus-visible {
  outline: medium solid var(--tkc-color-bg);
  outline-offset: var(--tkc-space-1);
}

@keyframes tkc-live-pulse {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation-duration: 0s;
    animation-iteration-count: 1;
    opacity: 1;
  }
}