/* ============================================================
   VIDAPI EVENTS — FIT TO SCREEN (UNDER NAV)
   EVENTS ONLY • CSS ONLY • NAV SAFE
============================================================ */

/* ============================================================
   PAGE BASE
============================================================ */
body.single-events {
  background: #000;
  overflow: hidden; /* prevent page scroll */
}

/* ============================================================
   NAV HEIGHT CONTROL
   Adjust if your header changes
============================================================ */
body.single-events {
  --vidapi-nav-height: 96px; /* 🔑 measured header height */
}

/* Admin bar present */
body.single-events.admin-bar {
  --vidapi-nav-height: 128px; /* header + WP admin bar */
}

/* ============================================================
   EVENT PLAYER STAGE — BELOW NAV
============================================================ */
body.single-events .event-player-wrap {
  position: fixed !important;
  top: var(--vidapi-nav-height);
  left: 0;
  width: 100vw !important;
  height: calc(100vh - var(--vidapi-nav-height));
  margin: 0 !important;
  padding: 0 !important;
  background: #000;
  overflow: hidden;
  z-index: 9000; /* BELOW NAV */
}

/* ============================================================
   VIDEO.JS — FILL AVAILABLE SPACE
============================================================ */
body.single-events .event-player-wrap .video-js {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000;
  box-sizing: border-box !important;
}

/* ============================================================
   VIDEO SURFACE — ASPECT CONTROL
============================================================ */
body.single-events .event-player-wrap .video-js video,
body.single-events .event-player-wrap .video-js .vjs-tech {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* switch to cover if desired */
  background: #000;
  display: block !important;
}

/* ============================================================
   LOWER THIRD — SAFE AREA + NAV AWARE
============================================================ */
body.single-events .event-lower-third {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 20px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  font-family: Arial, system-ui, sans-serif;
  border-radius: 6px;
  z-index: 9100;
  max-width: min(90vw, 520px);
  pointer-events: none;
}

/* ============================================================
   LIVE BADGE
============================================================ */
body.single-events .event-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 12px;
  background: #c40000;
  color: #fff;
  border-radius: 4px;
  letter-spacing: 0.6px;
}

body.single-events .event-live-dot {
  width: 8px;
  height: 8px;
  background: #ff2a2a;
  border-radius: 50%;
  animation: vidapiLivePulse 1.5s infinite;
}

@keyframes vidapiLivePulse {
  0% { opacity: 1; }
  50% { opacity: 0.35; }
  100% { opacity: 1; }
}

/* ============================================================
   FULLSCREEN — TRUE NATIVE FULLSCREEN
============================================================ */
body.single-events .video-js.vjs-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
  z-index: 2147483647 !important;
}

/* ============================================================
   MOBILE SAFE TWEAKS
============================================================ */
@media (max-width: 768px) {
  body.single-events {
    --vidapi-nav-height: 72px;
  }

  body.single-events .event-lower-third {
    right: calc(env(safe-area-inset-right) + 12px);
    font-size: 12px;
    padding: 10px 12px;
    max-width: 85vw;
  }
}