/* ============================================================
   VIDAPI EVENTS + ONLINE TV — MOBILE-LOCKED TV MODE (FINAL)
   NAV-ANCHORED • NO FLOAT • VIDEO.JS OVERRIDES
============================================================ */

/* ============================================================
   PAGE BASE
============================================================ */
body.single-events,
body.single-online_tv {
  background: #000;
  overflow: hidden;

  /* Desktop nav height */
  --vidapi-nav-height: 96px;
}

/* Admin bar */
body.single-events.admin-bar,
body.single-online_tv.admin-bar {
  --vidapi-nav-height: 128px;
}

/* ============================================================
   PLAYER STAGE — HARD-ANCHORED TO NAV
============================================================ */
body.single-events .event-player-wrap,
body.single-online_tv .event-player-wrap {
  position: fixed !important;
  top: var(--vidapi-nav-height);
  left: 0;
  right: 0;
  bottom: 0; /* 🔒 fills remaining screen */

  width: 100vw !important;
  height: auto !important;

  background: #000;
  overflow: hidden;

  display: block;
  z-index: 9000;
}

/* ============================================================
   VIDEO.JS ROOT — FULL STAGE (NO FLEX / NO CENTERING)
============================================================ */
body.single-events .event-player-wrap > .video-js,
body.single-online_tv .event-player-wrap > .video-js {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #000;
  box-sizing: border-box !important;
}

/* Disable Video.js intrinsic ratio & mobile centering */
.video-js.vjs-fluid {
  padding-top: 0 !important;
  height: 100% !important;
}

.video-js,
.video-js * {
  transform: none !important;
}

/* ============================================================
   VIDEO SURFACE  HARD TOP LOCK (CRITICAL FIX)
============================================================ */
body.single-events .video-js video,
body.single-events .video-js .vjs-tech,
body.single-online_tv .video-js video,
body.single-online_tv .video-js .vjs-tech {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain; /* switch to cover if desired */
  background: #000;

  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* ============================================================
   CONTROL BAR — VISUALLY ATTACHED TO VIDEO
============================================================ */
body.single-events .video-js .vjs-control-bar,
body.single-online_tv .video-js .vjs-control-bar {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex !important;
  align-items: center;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0)
  ) !important;
}

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

/* ============================================================
   FULLSCREEN — TRUE NATIVE
============================================================ */
body.single-events .video-js.vjs-fullscreen,
body.single-online_tv .video-js.vjs-fullscreen {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  background: #000 !important;
  z-index: 2147483647 !important;
}