/*
 * Accessibility overrides for the stock video.js skin.
 * Loaded after video-js.min.css so equal-specificity selectors here win.
 */

/* ------------------------------------------------------------------ */
/* WCAG 1.4.10 Reflow                                                  */
/* The stock skin sets `display: none` on .vjs-progress-control at     */
/* the x-small (<=320px) and tiny (<=210px) layouts, which removes     */
/* seeking entirely (no hotkeys are configured, and display:none also  */
/* drops the seek bar from the tab order). 320 CSS px is exactly the   */
/* width 1.4.10 requires full functionality at, so keep the progress   */
/* bar and give it its own full-width row above the buttons, where an  */
/* in-row bar would be too short to use.                               */
/* ------------------------------------------------------------------ */

.video-js.vjs-layout-x-small .vjs-control-bar,
.video-js.vjs-layout-tiny .vjs-control-bar {
  flex-wrap: wrap;
  height: auto;
}

.video-js.vjs-layout-x-small .vjs-progress-control,
.video-js.vjs-layout-tiny .vjs-progress-control {
  display: flex;
  order: -1;
  flex-basis: 100%;
  width: 100%;
  height: 1.5em;
}

/* .vjs-control is height:100% in the stock skin; once the control bar
   wraps that resolves against an auto-height bar, so pin the button
   row back to the standard 3em. */
.video-js.vjs-layout-x-small
  .vjs-control-bar
  .vjs-control:not(.vjs-progress-control),
.video-js.vjs-layout-tiny
  .vjs-control-bar
  .vjs-control:not(.vjs-progress-control) {
  height: 3em;
}

/* ------------------------------------------------------------------ */
/* WCAG 1.4.11 Non-text contrast / 2.4.7 Focus visible                 */
/* The stock skin styles the subtitle-settings Reset/Done focus ring   */
/* with outline-style/width but no outline-color, so browsers fall     */
/* back to their default: Edge and Firefox use the button text color   */
/* (#2B333F), which is invisible (~1:1) against the modal background   */
/* rgba(43,51,63,0.75). Fix the color, and offset the ring off the     */
/* white button face onto the dark backdrop so it contrasts >=3:1 on   */
/* both edges in every browser.                                        */
/* ------------------------------------------------------------------ */

.vjs-track-settings-controls button:focus,
.vjs-track-settings-controls button:active {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* WCAG 1.4.11 Non-text contrast — seek bar                            */
/* Stock trough rgba(115,133,159,.5) sits at ~2:1 against the control  */
/* bar and ~1.4:1 against the buffered bar. Use a dark, near-opaque    */
/* trough (white played bar then reads at >11:1) and a lighter         */
/* buffered bar (>=3.1:1 against both the trough and the played bar).  */
/* The trough's extent doesn't contrast against the control bar, but   */
/* that information is redundant with the always-visible remaining-    */
/* time text (restored at small layouts below), which 1.4.11 accepts.  */
/* Ratios verified over black, grey and white video frames.            */
/* ------------------------------------------------------------------ */

.video-js .vjs-slider {
  background-color: rgba(43, 51, 63, 0.9);
}

/* Paint only the inner segments, otherwise parent+child alphas stack
   and push the buffered bar too close to the white played bar. */
.video-js .vjs-load-progress {
  background: transparent;
}

.video-js .vjs-load-progress div {
  background: rgba(255, 255, 255, 0.45);
}

/* Keep the remaining-time text visible at small layouts (stock hides
   it <=425px). It is the visible text equivalent for the seek bar's
   extent (see above) and restores the time information otherwise lost
   on reflow (WCAG 1.4.10). */
.video-js.vjs-layout-small .vjs-remaining-time,
.video-js.vjs-layout-x-small .vjs-remaining-time,
.video-js.vjs-layout-tiny .vjs-remaining-time {
  display: flex;
}

/* ------------------------------------------------------------------ */
/* WCAG 1.4.12 Text spacing (robustness)                               */
/* The stock skin vertically centers the time text with a fixed        */
/* line-height: 3em; user text-spacing overrides (line-height 1.5)     */
/* push the text to the top of the control bar. Not a strict 1.4.12    */
/* failure (nothing clips), but flex centering keeps it aligned        */
/* regardless of the effective line-height.                            */
/* ------------------------------------------------------------------ */

.video-js .vjs-remaining-time {
  display: flex;
  align-items: center;
  justify-content: center;
}