/* =========================================================
   2A HLS Player — Plyr theme overrides
   Brand color + 2A .video-frame look (rounded, dark, shadow).
   Lane 14 #1: Full port of Vercel plyr-theme.css (17 tokens + chrome).
   Tokens also live in style.css :root (Lane 2 #16); kept here for
   self-containment so this file remains drop-in usable.
   ========================================================= */

:root {
    /* Brand + control accents */
    --plyr-color-main:                       #eb5d1d;
    --plyr-video-control-color:              #ffffff;
    --plyr-video-control-color-hover:        #ffffff;
    --plyr-video-control-background-hover:   rgba(235, 93, 29, 0.85);

    /* Controls bar gradient — keeps video frame the focus */
    --plyr-video-controls-background: linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0.85)
    );

    --plyr-control-icon-size:                18px;
    --plyr-control-spacing:                  12px;
    --plyr-control-radius:                   8px;

    /* Progress bar */
    --plyr-range-track-height:               5px;
    --plyr-range-thumb-height:               14px;
    --plyr-range-thumb-background:           #ffffff;
    --plyr-range-thumb-shadow:               0 1px 2px rgba(0, 0, 0, 0.4),
                                             0 0 0 2px rgba(235, 93, 29, 0.4);
    --plyr-range-fill-background:            #eb5d1d;
    --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.25);

    /* Center play button */
    --plyr-video-control-background:         rgba(0, 0, 0, 0.45);

    /* Settings menu (quality + speed) */
    --plyr-menu-background:                  rgba(20, 20, 20, 0.96);
    --plyr-menu-color:                       #ffffff;
    --plyr-menu-border-color:                rgba(255, 255, 255, 0.08);
    --plyr-menu-shadow:                      0 10px 30px rgba(0, 0, 0, 0.5),
                                             0 0 0 1px rgba(255, 255, 255, 0.05);
    --plyr-menu-radius:                      10px;
    --plyr-menu-arrow-color:                 rgba(20, 20, 20, 0.96);

    /* Tooltips on hover (time, button labels) */
    --plyr-tooltip-background:               #1a1a1a;
    --plyr-tooltip-color:                    #ffffff;
    --plyr-tooltip-radius:                   6px;
    --plyr-tooltip-shadow:                   0 4px 10px rgba(0, 0, 0, 0.4);
    --plyr-tooltip-arrow-size:               5px;

    /* Time text */
    --plyr-video-controls-time-color:        #ffffff;

    /* Focus ring */
    --plyr-focus-visible-color:              #ff7a45;
}

/* Plyr injects its own <div class="plyr"> wrapper inside .video-frame.
   Make sure it fills the frame and inherits our rounded corners. */
.video-frame .plyr {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.video-frame .plyr,
.video-frame .plyr__video-wrapper,
.video-frame video {
    background: #000;
}

/* Hide native controls inside Plyr-wrapped frames — Plyr renders its own UI. */
.video-frame video[data-twoa-hls]::-webkit-media-controls {
    display: none !important;
}
.video-frame video[data-twoa-hls] {
    /* Belt-and-braces: in case the attribute lingers before Plyr mounts. */
    outline: none;
}

/* =========================================================
   Center play button — bigger, branded ring, hover lift.
   Plyr centers via absolute translate(-50%,-50%); custom transforms
   MUST preserve that or the button snaps to the top-left.
   ========================================================= */
.plyr--video .plyr__control--overlaid {
    background: rgba(235, 93, 29, 0.92);
    border: 2px solid rgba(255, 255, 255, 0.85);
    padding: clamp(14px, 2vw, 22px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
                0 0 0 6px rgba(235, 93, 29, 0.15);
    transform: translate(-50%, -50%) scale(1);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 220ms ease,
                box-shadow 220ms ease;
}

.plyr--video .plyr__control--overlaid:hover,
.plyr--video .plyr__control--overlaid:focus-visible {
    background: #ff7a45;
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
                0 0 0 8px rgba(235, 93, 29, 0.2);
}

.plyr--video .plyr__control--overlaid svg {
    width: clamp(20px, 2vw, 28px);
    height: clamp(20px, 2vw, 28px);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* =========================================================
   Control-bar buttons — round, brand-orange hover.
   Press-down feedback compensates for Plyr's instant icon swap.
   ========================================================= */
.plyr__controls .plyr__control {
    border-radius: 999px;
    transition: background-color 160ms ease,
                color 160ms ease,
                transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.plyr__controls .plyr__control:hover {
    transform: scale(1.08);
}

.plyr__controls .plyr__control:active {
    transform: scale(0.94);
}

.plyr__controls .plyr__control[aria-pressed="true"],
.plyr__controls .plyr__control.plyr__tab-focus {
    background: var(--plyr-color-main);
}

/* Settings menu items — branded hover + orange check on selected option. */
.plyr__menu__container .plyr__control {
    padding: 0.55rem 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color 140ms ease, color 140ms ease;
}

.plyr__menu__container .plyr__control:hover {
    background: rgba(235, 93, 29, 0.18);
    color: #ff7a45;
}

.plyr__menu__container [role="menuitemradio"][aria-checked="true"]::before {
    background: var(--plyr-color-main);
    border-color: var(--plyr-color-main);
}

/* =========================================================
   Progress bar / scrubber — taller hit-target + thumb scrub.
   WebKit + Firefox forks both needed (no shared thumb selector).
   ========================================================= */
.plyr--video .plyr__progress input[type="range"] {
    height: 18px;
}

.plyr--video .plyr__progress input[type="range"]::-webkit-slider-thumb {
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 160ms ease;
}

.plyr--video .plyr__progress:hover input[type="range"]::-webkit-slider-thumb,
.plyr--video .plyr__progress input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.3);
}

.plyr--video .plyr__progress input[type="range"]::-moz-range-thumb {
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 160ms ease;
}

.plyr--video .plyr__progress:hover input[type="range"]::-moz-range-thumb,
.plyr--video .plyr__progress input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.3);
}

/* Shared skeleton-shimmer keyframe — consumed by Mp4Player + HLSPlayer. */
@keyframes video-loader-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton spinner keyframe (parity with Tailwind animate-spin). */
@keyframes twoa-video-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   Standard chrome preset (.video-frame--standard) — Vercel
   VIDEO_FRAME_CHROME parity: rounded-2xl + border-2 white/10 +
   shadow-lg + hover:border-orange/50 + transition-all 300ms.
   The base .video-frame (style.css) already supplies most of this;
   this modifier upgrades the hover/transition to the full Vercel
   recipe (transition-all so border AND shadow animate together).
   ========================================================= */
.video-frame--standard {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* =========================================================
   Loading skeleton + error overlay — ports the React skeleton
   (Mp4Player.tsx / HLSPlayer.tsx). JS flips .is-ready / .is-error
   on the parent .video-frame.
   ========================================================= */
.twoa-video-loader,
.twoa-video-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* bg-dark-deep (#1a1a1a) so the skeleton matches the dark frame. */
    background: #1a1a1a;
    z-index: 3; /* above Plyr's own <div class="plyr"> wrapper */
}

/* Skeleton fades out once Plyr mounts (.is-ready) — 500ms like the
   React `transition-opacity duration-500`. Stays interaction-transparent. */
.twoa-video-loader {
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
    overflow: hidden;
}
.video-frame.is-ready .twoa-video-loader,
.video-frame.is-error .twoa-video-loader {
    opacity: 0;
}

/* Diagonal shimmer band sweeping across the dark surface. */
.twoa-video-loader__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(235, 93, 29, 0.10) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: video-loader-shimmer 1.4s linear infinite;
}

.twoa-video-loader__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Spinner: 40px ring, white/20 track, orange top arc — Tailwind
   `h-10 w-10 border-2 border-white/20 border-t-orange animate-spin`. */
.twoa-video-loader__spinner {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #eb5d1d;
    animation: twoa-video-spin 0.8s linear infinite;
}

.twoa-video-loader__label,
.twoa-video-error__label {
    font-size: 0.75rem;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

/* Error overlay — hidden until JS adds .is-error. Sits above the
   skeleton (which is faded out by the shared .is-error rule above). */
.twoa-video-error {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    visibility: hidden;
    z-index: 4;
}
.video-frame.is-error .twoa-video-error {
    opacity: 1;
    visibility: visible;
}

/* Reduced motion: kill the shimmer + spinner motion (matches the
   React prefers-reduced-motion guard). */
@media (prefers-reduced-motion: reduce) {
    .twoa-video-loader__shimmer { animation: none; }
    .twoa-video-loader__spinner { animation-duration: 1.6s; }
}

/* Volume slider — match progress thickness. */
.plyr__volume input[type="range"] {
    --plyr-range-track-height: 4px;
    --plyr-range-thumb-height: 12px;
}

/* Time text — tabular numbers prevent jitter as seconds tick. */
.plyr__time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Captions — bigger + readable shadow. */
.plyr__captions {
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Bigger play-large hit target on touch. */
@media (max-width: 640px) {
    .video-frame .plyr__control--overlaid {
        padding: calc(var(--plyr-control-spacing, 10px) * 1.2);
    }
}

/* =========================================================
   MOBILE CONTROL PARITY — controls must be identical to desktop.
   Plyr 3.7.8's bundled CSS hides the duration (the second .plyr__time)
   below 767px:  @media (max-width:767px){.plyr__time+.plyr__time{display:none}}
   It also ships --plyr-control-spacing-based collapsing on some forks. We
   neutralize every viewport-conditional control hide so volume, current-time,
   duration, settings, quality, captions, pip and fullscreen render the same
   on phones as on desktop. These selectors carry higher specificity than
   Plyr's defaults and load AFTER plyr.css (enqueue ordering), so they win.
   ========================================================= */
@media (max-width: 767px) {
    /* Restore the duration / total-time element Plyr hides on small screens. */
    .plyr .plyr__time + .plyr__time {
        display: inline-block !important;
    }
}

/* Keep the full volume control (mute + slider) visible on every viewport —
   no Plyr build/version may collapse it on touch. */
.plyr__controls .plyr__volume {
    display: flex !important;
}
.plyr__controls .plyr__volume input[type="range"] {
    display: block !important;
}
/* Cap the volume slider on narrow phones so the full control row can't
   overflow / push the progress bar off-screen (<375px). */
@media (max-width: 480px) {
    .plyr__controls .plyr__volume input[type="range"] {
        max-width: 56px;
        min-width: 36px;
    }
}

/* Never let any control button disappear on small screens. */
.plyr__controls .plyr__control[data-plyr="mute"],
.plyr__controls .plyr__control[data-plyr="captions"],
.plyr__controls .plyr__control[data-plyr="pip"],
.plyr__controls .plyr__control[data-plyr="airplay"],
.plyr__controls .plyr__control[data-plyr="fullscreen"],
.plyr__controls .plyr__control[data-plyr="settings"],
.plyr__controls [data-plyr="settings"] {
    display: inline-flex !important;
}

/* =========================================================
   Settings / quality menu must stay tappable + on-screen on phones.
   Plyr anchors the menu to the bottom-right of the control bar; on a narrow
   frame the menu can overflow the rounded .video-frame (overflow:hidden) and
   get clipped. Allow the popup container to size to viewport and cap its
   height so long quality lists scroll instead of clipping.
   ========================================================= */
@media (max-width: 640px) {
    .plyr__menu__container {
        max-width: calc(100vw - 24px);
    }
    .plyr__menu__container .plyr__control[role="menuitem"],
    .plyr__menu__container .plyr__control[role="menuitemradio"] {
        /* 44px min touch target for menu rows on touch screens. */
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .plyr__menu__container > div {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* The reveal/entrance animation of the frame is viewport-independent: the
   .twoa-anim-fade-in-right wrapper (video-frame.php) + .video-frame--standard
   transition above apply identically at all widths, so mobile entrance matches
   desktop. (prefers-reduced-motion still collapses it via the global rule.) */

/* =========================================================
   VERTICAL VOLUME (≤ tablet, 1024px) — reclaim horizontal space.
   On phones/tablets the inline horizontal volume slider squeezes the
   .plyr__progress (seek/time) bar down to nothing. Here the volume is
   collapsed to a tiny inline anchor (so its width returns to the
   progress bar) and the slider is lifted into a compact VERTICAL
   pop-up above the speaker icon, revealed on hover / focus / touch-tap
   (.is-open is toggled by hls-player.js for touch).
   Desktop (≥1025px) keeps the default horizontal slider.
   Vercel mirror: 2A-Construction-LLC/src/app/styles/plyr-theme.css.
   ========================================================= */
@media (max-width: 1024px) {
    /* Tiny inline footprint → the freed row width flows to .plyr__progress. */
    .plyr__controls .plyr__volume {
        position: relative;
        width: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
        margin: 0;
        overflow: visible;
    }

    /* Pop-up backdrop panel, anchored above the volume's own position. */
    .plyr__controls .plyr__volume::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: 34px;
        height: 112px;
        background: rgba(15, 15, 15, 0.92);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, visibility 0.18s ease;
        z-index: 5;
    }

    /* The range input becomes a vertical slider centered in the panel. */
    .plyr__controls .plyr__volume input[type="range"] {
        position: absolute;
        bottom: calc(100% + 55px);
        left: 50%;
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        transform: translateX(-50%) rotate(-90deg);
        transform-origin: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, visibility 0.18s ease;
        z-index: 6;
    }

    /* Reveal on hover/focus of the mute button (the visual trigger) or the
       volume pop-up itself. `.is-open` is toggled by JS for touch taps. */
    .plyr__controls .plyr__control[data-plyr="mute"]:hover + .plyr__volume::before,
    .plyr__controls .plyr__control[data-plyr="mute"]:focus-visible + .plyr__volume::before,
    .plyr__controls .plyr__volume:hover::before,
    .plyr__controls .plyr__volume:focus-within::before,
    .plyr__controls .plyr__volume.is-open::before,
    .plyr__controls .plyr__control[data-plyr="mute"]:hover + .plyr__volume input[type="range"],
    .plyr__controls .plyr__control[data-plyr="mute"]:focus-visible + .plyr__volume input[type="range"],
    .plyr__controls .plyr__volume:hover input[type="range"],
    .plyr__controls .plyr__volume:focus-within input[type="range"],
    .plyr__controls .plyr__volume.is-open input[type="range"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* =========================================================
   Cinematic mode (.plyr--cinematic, added by hls-player.js) — default for every
   non-autoplay video. Inline, the control BAR is hidden but a small, faint play
   triangle stays as the "this is a video" signal; a click anywhere enters
   fullscreen, where the .is-cinematic-fs marker (toggled off the native
   Fullscreen API, since Plyr's own .plyr--fullscreen-active is unreliable here)
   restores the full controls. Keyed on .plyr so it covers both .video-frame
   videos and raw ones (testimonials). Tune the rest opacity via the var below.
   ========================================================= */
.plyr--cinematic {
    --twoa-cinematic-play-opacity: 0.25; /* ~75% transparent at rest */
}
/* Hide only the control bar inline. Once a testimonial has been opened to
   fullscreen at least once, hls-player.js sets .twoa-activated and we stop
   force-hiding the bar — so the paused clip shows normal controls inline
   (pause/seek/replay) instead of the only affordance being a re-fullscreen
   click. Non-testimonial cinematic videos never get .twoa-activated, so their
   behavior is unchanged. */
.plyr--cinematic.plyr:not(.is-cinematic-fs):not(.twoa-activated) .plyr__controls {
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Small, faint play triangle inline; pointer-events:none so a click passes
   through to the container -> fullscreen. Keep the centering translate. Once
   activated, the normal full-size Plyr play button returns (clearer paused
   state). */
.plyr--cinematic.plyr:not(.is-cinematic-fs):not(.twoa-activated) .plyr__control--overlaid {
    opacity: var(--twoa-cinematic-play-opacity) !important;
    transform: translate(-50%, -50%) scale(0.62) !important;
    pointer-events: none !important;
    transition: opacity 200ms ease, transform 200ms ease;
}
.plyr--cinematic.plyr:not(.is-cinematic-fs):not(.twoa-activated):hover .plyr__control--overlaid,
.plyr--cinematic.plyr:not(.is-cinematic-fs):not(.twoa-activated):focus-within .plyr__control--overlaid {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(0.72) !important;
}
.plyr--cinematic.plyr:not(.is-cinematic-fs),
.plyr--cinematic.plyr:not(.is-cinematic-fs) video {
    cursor: pointer;
}
/* Touch devices can't hover to reveal the play triangle, so show it more
   prominently (and larger for a clearer "tap to watch" affordance) at rest. */
@media (hover: none) {
    .plyr--cinematic.plyr:not(.is-cinematic-fs):not(.twoa-activated) .plyr__control--overlaid {
        opacity: 0.62 !important;
        transform: translate(-50%, -50%) scale(0.82) !important;
    }
}