/**
 * @file
 * Styles for the BI Custom Vimeo Fixes module.
 *
 * Provides visual and interaction fixes for the Vimeo/video.js player used
 * within the site. These styles address:
 *
 * - Play button interaction issues on Android devices.
 * - Pause button stacking issues on mobile devices.
 * - Incorrect player dimensions after entering/exiting fullscreen.
 * - Video container sizing and aspect ratio consistency.
 * - Vimeo migration regressions affecting the custom play button design.
 *
 * The rules below intentionally use !important in several places because
 * video.js and Vimeo inject inline styles and dynamically modify the player
 * DOM during playback and fullscreen transitions.
 */


/* ==========================================================================
   Android play icon / control bar fixes
   ========================================================================== */

/**
 * Ensures the control bar remains visible and clickable on Android devices.
 * Some Android browsers render the control bar underneath the video layer.
 */
.video-js .vjs-control-bar {
    position: absolute !important;
    margin-top: -30px !important;
    z-index: 3;
    bottom: 0 !important;
}

/**
 * Keeps the paused video layer beneath the control bar while not fullscreen.
 */
.video-js.vjs-paused:not(.vjs-fullscreen) .vjs-tech {
    position: absolute !important;
    z-index: 2;
}

/**
 * Resets the control bar offset when the player is paused.
 */
.video-js.vjs-paused .vjs-control-bar {
    margin-top: 0 !important;
}


/* ==========================================================================
   Fullscreen player fixes
   ========================================================================== */

/**
 * Forces the video element to occupy the full viewport height while in
 * fullscreen mode and preserves the aspect ratio.
 */
.video-js.vjs-fullscreen .vjs-tech {
    width: 100% !important;
    height: 100vh !important;
    object-fit: contain;
}

/**
 * Prevents the fullscreen wrapper from collapsing or inheriting incorrect
 * inline dimensions after entering or exiting fullscreen mode.
 */
.video-js.vjs-fullscreen:not(.vjs-ios-native-fs) {
    width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
    display: block;
}

/**
 * Ensures the control bar stays above the fullscreen video layer.
 */
.video-js.vjs-fullscreen .vjs-control-bar {
    position: absolute !important;
    margin-top: -30px !important;
    z-index: 3;
}


/* ==========================================================================
   Pause button layering fix
   ========================================================================== */

/**
 * Increases the stacking order of the pause button so it remains tappable
 * on mobile devices.
 */
.gds-video__button--is-pause {
    z-index: 99;
}


/* ==========================================================================
   Video container height and aspect ratio fixes
   ========================================================================== */

/**
 * Maintains a consistent 16:9 aspect ratio for the video wrapper.
 */
.gds-video__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

/**
 * Ensures nested wrappers injected by Vimeo/video.js fill the parent
 * container completely.
 */
.gds-video__video>div {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
}

/**
 * Forces the underlying <video> element to match the wrapper dimensions.
 */
.gds-video__video video {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}


/* ==========================================================================
   Custom play button fixes after Vimeo migration
   ========================================================================== */

/* Vimeo Fixes */
.video-js .vjs-big-play-button {
    z-index: 3;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    color: #00e47c;
    transform: scale(1.65) translateY(27px);
}

.video-js .vjs-big-play-button {
    background-color: rgba(0, 0, 0, .45);
    background-color: rgba(0, 0, 0, .81);
    border: 0;
    border-radius: 50%;
    min-width: 98px;
    min-height: 98px;
}

.gds-video-player__video:is(:hover, :focus) .vjs-big-play-button {
    background-color: #08312a;
}

.video-js .vjs-big-play-button {
    transform: translate(-4.5%, -25.1%);
}

/* ==========================================================================
   Subtitle issues with Vimeo migration
   ========================================================================== */
.vjs-modal-dialog.vjs-text-track-settings {
    z-index: 9;
}

div.video-js .vjs-control-bar {
    z-index: 5;
}