/* CatholicG33k Live Status — isolated to the Core header indicator. */

.cg-header .cg33k-live-status {
  --cg33k-live-width: 104px;
  position: relative;
  flex: 0 0 auto;
  width: var(--cg33k-live-width);
  aspect-ratio: 512 / 201;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-decoration: none;
  line-height: 0;
  opacity: 1;
  transform: translateZ(0) scale(1);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.cg-header .cg33k-live-status.is-live {
  opacity: 1;
  pointer-events: auto;
  transform: translateZ(0) scale(1);
}

.cg-header .cg33k-live-status.is-offline {
  opacity: 0.42;
  pointer-events: none;
  cursor: default;
}

.cg-header .cg33k-live-status__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: contain;
}

.cg-header .cg33k-live-status.is-offline .cg33k-live-status__image {
  filter: grayscale(1) brightness(0.78) contrast(0.92);
  animation: none;
}

.cg-header .cg33k-live-status.is-live .cg33k-live-status__image {
  filter:
    drop-shadow(0 0 2px rgba(255, 20, 20, 0.9))
    drop-shadow(0 0 7px rgba(255, 0, 0, 0.55))
    drop-shadow(0 0 13px rgba(255, 0, 0, 0.3));
  animation: cg33k-live-neon-pulse 1.9s ease-in-out infinite;
}

.cg-header .cg33k-live-status.is-live:hover,
.cg-header .cg33k-live-status.is-live:focus-visible {
  transform: translateZ(0) scale(1.04);
}

.cg-header .cg33k-live-status.is-live:hover .cg33k-live-status__image,
.cg-header .cg33k-live-status.is-live:focus-visible .cg33k-live-status__image {
  filter:
    brightness(1.1)
    drop-shadow(0 0 3px rgba(255, 35, 35, 1))
    drop-shadow(0 0 9px rgba(255, 0, 0, 0.72))
    drop-shadow(0 0 16px rgba(255, 0, 0, 0.4));
}

.cg-header .cg33k-live-status.is-live:focus-visible {
  outline: 2px solid #ffb400;
  outline-offset: 3px;
}

.cg-header .cg33k-live-status__screen-reader {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes cg33k-live-neon-pulse {
  0%,
  100% {
    opacity: 0.9;
    filter:
      drop-shadow(0 0 2px rgba(255, 20, 20, 0.82))
      drop-shadow(0 0 6px rgba(255, 0, 0, 0.45))
      drop-shadow(0 0 11px rgba(255, 0, 0, 0.22));
  }

  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 3px rgba(255, 35, 35, 1))
      drop-shadow(0 0 9px rgba(255, 0, 0, 0.68))
      drop-shadow(0 0 16px rgba(255, 0, 0, 0.34));
  }
}

/* Keep the indicator compact on the existing medium desktop header. */
@media (min-width: 1101px) and (max-width: 1380px) {
  .cg-header .cg33k-live-status {
    --cg33k-live-width: 86px;
  }
}

/* On mobile it remains visible beside the menu control while desktop Search hides. */
@media (max-width: 1100px) {
  .cg-header .cg33k-live-status {
    --cg33k-live-width: 74px;
  }
}

@media (max-width: 430px) {
  .cg-header .cg33k-live-status {
    --cg33k-live-width: 64px;
  }

  .cg-header .cg-header-actions {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-header .cg33k-live-status,
  .cg-header .cg33k-live-status__image {
    animation: none !important;
    transition: none !important;
  }
}