/* ===========================
   SS Video Modal  (.ssv-*)

   A dependency-free lightbox player. Everything is namespaced under `.ssv`
   so it cannot collide with Bootstrap 5.3, header.css, footer.css or
   hero-banner.css - all four are loaded on the same pages.

   Why custom controls rather than `<video controls>`: the native control set
   has no quality selector, and the whole point of shipping three renditions
   is to let the visitor pick one. Once the bar is custom, captions have to be
   custom too (see .ssv__cues below).

   Layout is a fixed overlay with a 16:9 stage. The stage - not the dialog -
   is what goes fullscreen, so the browser letterboxes the video and not our
   chrome.
   =========================== */

.ssv {
    /* palette - deliberately dark; the player is the only dark surface on the
       site, so it reads as a separate "room" rather than part of the page */
    --ssv-brand: #0070C0;
    --ssv-brand-lift: #2b90dd;
    --ssv-ink: #ffffff;
    --ssv-dim: rgba(255, 255, 255, 0.72);
    --ssv-chrome: #0d1117;
    --ssv-rail: rgba(255, 255, 255, 0.28);
    --ssv-buffer: rgba(255, 255, 255, 0.46);
    --ssv-radius: 12px;

    /* written by video-modal.js */
    --ssv-played: 0%;
    --ssv-buffered: 0%;

    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* iOS: dvh keeps the dialog inside the visible area when the URL bar is up */
    height: 100vh;
    height: 100dvh;
}

.ssv[hidden] {
    display: none;
}

.ssv,
.ssv * {
    box-sizing: border-box;
    font-family: 'Roboto', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* header.css sets `* { font-family: Roboto }`; these resets have to beat
   Bootstrap's reboot for the elements we actually build. */
.ssv :where(p) {
    margin: 0;
}

.ssv :where(button) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssv__backdrop {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 12, 20, 0.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: ssvFade 0.22s ease both;
}

/* ---------------------------
   Dialog
   --------------------------- */
.ssv__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(1120px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--ssv-radius);
    background: var(--ssv-chrome);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    animation: ssvRise 0.26s cubic-bezier(0.4, 0, 0.2, 1) both;
    overflow: hidden;
}

.ssv__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 14px 12px 18px;
    flex: 0 0 auto;
}

.ssv__titles {
    min-width: 0;
    flex: 1 1 auto;
}

.ssv__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--ssv-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssv__sub {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 18px;
    color: var(--ssv-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssv__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--ssv-ink);
    transition: background-color 0.16s linear;
}

.ssv__close:hover {
    background: rgba(255, 255, 255, 0.13);
}

/* ---------------------------
   Stage
   --------------------------- */
.ssv__stage {
    position: relative;
    flex: 0 1 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    /* the stage is the fullscreen target, so it needs its own black ground */
}

.ssv__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    /* index.css applies transform/backface tricks to media on some pages */
    transform: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.ssv__stage:fullscreen {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
}

.ssv__stage:-webkit-full-screen {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
}

/* A transparent hit layer over the video: click anywhere to toggle playback,
   the way every video player behaves. It sits under the control bar so the
   bar's own buttons still win. */
.ssv__surface {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    cursor: pointer;
}

/* The big centre play button. Present while paused, gone while playing -
   `visibility` rather than `display` so the fade can run. */
.ssv__big {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 112, 192, 0.92);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease, opacity 0.18s linear, visibility 0s linear 0s, background-color 0.16s linear;
}

.ssv__big:hover {
    background: var(--ssv-brand-lift);
    transform: scale(1.06);
}

.ssv.is-playing .ssv__big {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.86);
    transition-delay: 0s, 0s, 0.18s, 0s;
    pointer-events: none;
}

/* ---------------------------
   Buffering spinner
   --------------------------- */
.ssv__spin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ssvSpin 0.9s linear infinite;
    pointer-events: none;
}

.ssv__spin[hidden] {
    display: none;
}

/* ---------------------------
   Captions
   --------------------------- */
/* The track is held at mode `hidden` and the cues are painted here instead of
   by the browser. Native cue rendering anchors to the bottom of the video box
   and knows nothing about our control bar, so captions sat underneath it.
   Rendering them ourselves also means one consistent look across engines. */
.ssv__cues {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 78px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    pointer-events: none;
    transition: bottom 0.2s ease;
}

.ssv:not(.is-chrome-on) .ssv__cues {
    bottom: 28px;
}

.ssv__cue {
    display: inline-block;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.76);
    color: #fff;
    font-size: clamp(14px, 2.1vw, 20px);
    font-weight: 500;
    line-height: 1.4;
    text-wrap: balance;
}

.ssv__cue b,
.ssv__cue i,
.ssv__cue u {
    font-weight: inherit;
    font-style: inherit;
    text-decoration: inherit;
}

/* ---------------------------
   Control bar
   --------------------------- */
.ssv__chrome {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 44px 12px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.52) 42%, rgba(0, 0, 0, 0) 100%);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s linear, transform 0.2s ease;
}

/* Auto-hide while playing and idle. `visibility` is not used: the bar must
   stay hit-testable for the pointermove that brings it back. */
.ssv:not(.is-chrome-on) .ssv__chrome {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.ssv:not(.is-chrome-on) .ssv__surface {
    cursor: none;
}

.ssv__row {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}

.ssv__spacer {
    flex: 1 1 auto;
}

.ssv__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    color: #fff;
    transition: background-color 0.14s linear, color 0.14s linear;
}

.ssv__btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.ssv__btn[aria-pressed="true"] {
    color: var(--ssv-brand-lift);
}

.ssv__btn--cc[aria-pressed="true"]::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.ssv__btn--cc {
    position: relative;
}

.ssv__time {
    flex: 0 0 auto;
    padding: 0 10px 0 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------------------
   Sliders (scrub + volume)
   --------------------------- */
/* One shared skin. The played / buffered fills are painted as a gradient on
   the input itself, driven by --ssv-played / --ssv-buffered, so there is no
   second element to keep in sync. */
.ssv__range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    touch-action: none;
}

.ssv__range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 4px;
    background:
        linear-gradient(to right, var(--ssv-brand-lift) 0 var(--ssv-played), transparent var(--ssv-played) 100%),
        linear-gradient(to right, var(--ssv-buffer) 0 var(--ssv-buffered), transparent var(--ssv-buffered) 100%),
        var(--ssv-rail);
}

.ssv__range::-moz-range-track {
    height: 4px;
    border-radius: 4px;
    background:
        linear-gradient(to right, var(--ssv-brand-lift) 0 var(--ssv-played), transparent var(--ssv-played) 100%),
        linear-gradient(to right, var(--ssv-buffer) 0 var(--ssv-buffered), transparent var(--ssv-buffered) 100%),
        var(--ssv-rail);
}

.ssv__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -4.5px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.14s ease;
}

.ssv__range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.14s ease;
}

.ssv__range:hover::-webkit-slider-thumb,
.ssv__range:focus-visible::-webkit-slider-thumb {
    transform: scale(1.25);
}

.ssv__range:hover::-moz-range-thumb,
.ssv__range:focus-visible::-moz-range-thumb {
    transform: scale(1.25);
}

.ssv__scrub {
    padding: 0 2px;
}

/* The volume slider only claims width once it is wanted, so the bar does not
   carry 80px of dead rail on a phone. */
.ssv__vol {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.ssv__vol .ssv__range {
    width: 0;
    opacity: 0;
    transition: width 0.18s ease, opacity 0.18s linear;
}

.ssv__vol:hover .ssv__range,
.ssv__vol:focus-within .ssv__range {
    width: 84px;
    opacity: 1;
    margin: 0 8px 0 2px;
}

/* ---------------------------
   Settings menu
   --------------------------- */
.ssv__menu {
    position: absolute;
    right: 12px;
    bottom: 62px;
    z-index: 5;
    width: 232px;
    max-height: min(320px, calc(100% - 90px));
    overflow-y: auto;
    padding: 6px;
    border-radius: 10px;
    background: rgba(16, 22, 30, 0.97);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    animation: ssvFade 0.14s ease both;
}

.ssv__menu[hidden] {
    display: none;
}

.ssv__group + .ssv__group {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ssv__glabel {
    display: block;
    padding: 6px 10px 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.ssv__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 18px;
    color: #fff;
    text-align: left;
    transition: background-color 0.12s linear;
}

.ssv__item:hover {
    background: rgba(255, 255, 255, 0.11);
}

.ssv__tick {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    opacity: 0;
    color: var(--ssv-brand-lift);
}

.ssv__item[aria-checked="true"] .ssv__tick {
    opacity: 1;
}

.ssv__item[aria-checked="true"] {
    font-weight: 500;
}

.ssv__note {
    margin-left: auto;
    padding-left: 8px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------
   Focus
   --------------------------- */
.ssv :where(button, input, [tabindex]):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* A keyboard visitor tabbing into the bar must not have it fade out from
   under them. */
.ssv__chrome:focus-within {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

.ssv__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------
   Motion
   --------------------------- */
@keyframes ssvFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ssvRise {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes ssvSpin {
    to { transform: rotate(360deg); }
}

/* ---------------------------
   Small screens
   --------------------------- */
@media screen and (max-width: 599.98px) {
    .ssv {
        padding: 0;
        align-items: stretch;
    }

    .ssv__dialog {
        max-width: none;
        height: 100%;
        border-radius: 0;
        justify-content: center;
    }

    .ssv__head {
        padding: 10px 8px 8px 14px;
    }

    .ssv__title {
        font-size: 15px;
    }

    .ssv__big {
        width: 64px;
        height: 64px;
        margin: -32px 0 0 -32px;
    }

    .ssv__chrome {
        padding: 36px 6px 8px;
    }

    .ssv__btn {
        width: 36px;
        height: 36px;
    }

    .ssv__time {
        padding: 0 6px 0 4px;
        font-size: 12px;
    }

    /* No hover on touch, so the volume rail would never open. The mute button
       stays; fine-grained volume is the hardware's job on a phone. */
    .ssv__vol .ssv__range {
        display: none;
    }

    .ssv__cues {
        bottom: 64px;
    }

    .ssv__menu {
        right: 6px;
        bottom: 54px;
        width: min(232px, calc(100vw - 24px));
    }
}

/* The dialog is width-driven, so a short landscape phone would push the stage
   off the bottom. Cap by height instead and let the sides letterbox. */
@media screen and (max-height: 560px) and (min-width: 600px) {
    .ssv__stage {
        max-height: calc(100vh - 120px);
    }

    .ssv__dialog {
        max-width: min(1120px, calc((100vh - 120px) * 16 / 9));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssv__backdrop,
    .ssv__dialog,
    .ssv__menu {
        animation: none;
    }

    .ssv__big,
    .ssv__chrome,
    .ssv__cues,
    .ssv__btn,
    .ssv__item,
    .ssv__close,
    .ssv__vol .ssv__range {
        transition: none;
    }

    .ssv__spin {
        animation-duration: 2.4s;
    }
}