@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "flowbite";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite.min";

/* Poppins (Latin: English & Spanish) - local files */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/poppins-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/poppins-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins-latin-700-italic.woff2") format("woff2");
}

/* 4.166666499999998 is directly related to the w-11/12 class applied below. */
/* This value represents half of the empty space leftover. */

.video-js .vjs-tech {
  @apply flex;
  @apply flex-col;
  @apply mx-auto;
}

.video-js div.vjs-control-bar {
  @apply text-sm;
  @apply bg-black;
  @apply w-screen;
  @apply sm:max-w-[507px];
  @apply left-[-4.166666499999998%];
}

div > div.vjs-play-progress.vjs-slider-bar {
  @apply bg-frankly-teal;
  @apply border-frankly-teal-200;
  @apply text-frankly-teal;
}

.video-js .vjs-big-play-button {
  border: none;
  background: none;
  font-size: 5rem;
}

.video-js .vjs-current-time.vjs-time-control.vjs-control,
.video-js .vjs-remaining-time.vjs-time-control.vjs-control {
  display: inline-block;
}

:not(.vjs-has-started) .vjs-control-bar {
  display: flex;
}

.field_with_errors {
  display: contents;
}


/* Video.js Text Track Styling - Simple and Clean */
.vjs-text-track-display {
  @apply pointer-events-none;
  @apply absolute;
  @apply bottom-0;
  @apply left-0;
  @apply right-0;
  @apply top-0;
  z-index: 9999;
}

/* Position the CC popup to the left of the button */
.video-js .vjs-subs-caps-button .vjs-menu {
  right: auto !important;
  left: 0 !important;
  transform: translateX(-50%) !important;
}

.vjs-text-track-cue > div {
  @apply absolute;
  @apply left-0;
  @apply right-0;
  @apply text-center;
  @apply bg-black;
  @apply bg-opacity-80;
  @apply text-white;
  @apply px-2;
  @apply py-1;
  @apply mx-auto;
  @apply max-w-4xl;
  @apply rounded;
  @apply text-base;
  @apply font-medium;
  @apply leading-relaxed;
  @apply text-xl;
  position: absolute !important;
  bottom: 40px !important;
  top: auto !important;
}

/* Lock Video.js wrapper size on mobile to prevent layout shift when player inits */
@media (max-width: 767px) {
  [data-media-player-target="videoContainer"] .video-js {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
  }

  /* Captions above control bar on real mobile (iOS etc.): move entire display up so it's not behind control bar */
  [data-media-player-target="videoContainer"] .vjs-text-track-display {
    z-index: 15 !important;
    bottom: 0 !important;
    top: 0 !important;
  }
  [data-media-player-target="videoContainer"] .vjs-text-track-cue {
    bottom: 88px !important;
    top: auto !important;
  }
  [data-media-player-target="videoContainer"] .vjs-text-track-cue > div {
    bottom: 88px !important;
    top: auto !important;
  }
}

/* Hide player until Video.js ready; show placeholder, then swap on data-loaded */
[data-controller="media-player"] .media-player-placeholder {
  opacity: 1;
}
[data-controller="media-player"] .media-player-video-container,
[data-controller="media-player"] .media-player-controls-overlay {
  opacity: 0;
}
[data-controller="media-player"][data-loaded] .media-player-placeholder {
  opacity: 0;
  pointer-events: none;
}
[data-controller="media-player"][data-loaded] .media-player-video-container,
[data-controller="media-player"][data-loaded] .media-player-controls-overlay {
  opacity: 1;
}

/* Mobile: hide scrollbar on video overlay (removes gray bar), ensure full viewport coverage */
@media (max-width: 767px) {
  .media-player-overlay {
    scrollbar-width: none;
    -ms-overflow-style: none;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
  }
  .media-player-overlay::-webkit-scrollbar {
    display: none;
  }

  /* YouTube-style: hide controls until user taps; show when data-controls-visible */
  [data-controller="media-player"][data-loaded]:not([data-controls-visible]) .media-player-controls-overlay {
    opacity: 0;
    pointer-events: none;
  }
  [data-controller="media-player"][data-controls-visible] .media-player-controls-overlay {
    opacity: 1;
  }

  /* Center play/pause icon: hidden until controls revealed; play vs pause by data-playing */
  [data-controller="media-player"]:not([data-controls-visible]) .media-player-center-button {
    opacity: 0;
    pointer-events: none;
  }
  [data-controller="media-player"][data-controls-visible] .media-player-center-button {
    opacity: 1;
  }
  [data-controller="media-player"] .media-player-center-button .center-play-icon {
    display: none;
  }
  [data-controller="media-player"] .media-player-center-button .center-pause-icon {
    display: none;
  }
  [data-controller="media-player"]:not([data-playing]) .media-player-center-button .center-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-controller="media-player"][data-playing] .media-player-center-button .center-pause-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop overlay: ensure Video.js native control bar is visible and interactive */
@media (min-width: 768px) {
  .media-player-overlay .video-js .vjs-control-bar {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 20;
    pointer-events: auto;
    opacity: 1;
  }
  .media-player-overlay .video-js .vjs-big-play-button {
    z-index: 10;
    pointer-events: auto;
  }
}