/**
 * Global On Demand shortcode styles (the Vimeo embed frame and facade poster). The
 * control bar is Tailwind in its island; the fullscreen and idle-cursor rules stay
 * here because they key off this PHP-rendered container, not the island's nodes.
 */

/* [ashm_global_on_demand_video] - a responsive 16:9 Vimeo box. It renders inside an
 * Elementor single template; the :has() rule below claims the row for whichever
 * Shortcode widget wraps it. */
.ashm-global-on-demand-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* Legacy fallback for engines without aspect-ratio: keep the 16:9 box via padding. */
@supports not (aspect-ratio: 1) {
    .ashm-global-on-demand-video { height: 0; padding-top: 56.25%; }
}
.ashm-global-on-demand-video iframe,
.ashm-global-on-demand-video > * {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Inside an Elementor flex container, a Shortcode widget with no explicit width
 * shrinks to its content's minimum size - and this facade has no intrinsic
 * content (width:100% + aspect-ratio only), so the widget collapses to a few
 * pixels and the video is invisible. Claim the full row whenever the widget
 * wraps this video, whatever its _element_id. */
.elementor-widget-shortcode:has(.ashm-global-on-demand-video) { width: 100%; flex-shrink: 0; }

/* ── Lite-embed facade (poster + play button) ────────────────────────────────
 *
 * A long recording should not pay for the Vimeo player until the learner presses
 * play, so the shortcode renders only this poster; the video island injects the
 * iframe on the first click. The poster is a bare <button>, so it needs the same
 * hard reset the control-bar buttons use to shed the theme/Elementor brand-pill
 * styling that would otherwise match it. */
.ashm-global-on-demand-video__poster {
    box-sizing: border-box !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--global-background-default, #eef1f6) !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    overflow: hidden;
}
.ashm-global-on-demand-video__poster:focus-visible {
    outline: 3px solid var(--global-brand-primary, #0060ae) !important;
    outline-offset: -3px !important;
}
.ashm-global-on-demand-video__poster-image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
/* A soft scrim so the play button reads over a bright poster. */
.ashm-global-on-demand-video__poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 15, 30, 0.35), rgba(10, 15, 30, 0) 55%);
    pointer-events: none;
}
.ashm-global-on-demand-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(16, 22, 40, 0.72);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition:
        transform 0.15s ease,
        background-color 0.15s ease;
    pointer-events: none;
}
.ashm-global-on-demand-video__play > svg {
    margin-left: 3px; /* optically centre the triangle in the disc */
}
.ashm-global-on-demand-video__poster:hover .ashm-global-on-demand-video__play,
.ashm-global-on-demand-video__poster:focus-visible .ashm-global-on-demand-video__play {
    transform: translate(-50%, -50%) scale(1.06);
    background: var(--global-brand-primary, #0060ae);
}

/* Idle poster fallback when the post has no featured image and no Vimeo thumbnail. */
.ashm-global-on-demand-video__poster-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1b2a4a 0%, #0f1a30 100%);
}

/* ── Control-bar container states ─────────────────────────────────────────────
 * The bar itself is Tailwind (in the island); these rules act on the container the
 * island can't restyle from its own nodes. Fullscreen: the container fills the
 * screen and drops the 16:9 box so the iframe and the bottom-pinned overlay stay
 * visible. Each selector is its own rule on purpose: a comma-grouped list is
 * dropped whole by any engine that does not know one of the pseudos (Firefox lacks
 * :-webkit-full-screen, Safari before 16.4 lacks :fullscreen), which would also
 * drop the --fullscreen class the island sets as the reliable fallback. */
.ashm-global-on-demand-video--fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
}
.ashm-global-on-demand-video:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
}
.ashm-global-on-demand-video:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
}
@supports not (aspect-ratio: 1) {
    .ashm-global-on-demand-video--fullscreen {
        height: 100vh;
        padding-top: 0;
    }
}
/* Hide the cursor while playing with the pointer idle (bar auto-hidden). The
 * surface's Tailwind sets cursor:pointer with !important, so this must be
 * !important and more specific to win. */
.ashm-global-on-demand-video--idle {
    cursor: none;
}
.ashm-global-on-demand-video--idle .ashm-global-on-demand-controls__surface {
    cursor: none !important;
}

/* The certificate strip sits inside the video's widget since the shortcode
 * merge, so the container gap that used to separate the two widgets no
 * longer applies; restore that breathing room here. */
.ashm-global-on-demand-video + [data-ashm-global-on-demand-survey-mount] {
    margin-top: 32px;
}

/* ── Listing-card image ([ashm_global_on_demand_card_image]) ─────────────────
 * Fills the loop template's media container, replacing its featured-image
 * background. The container keeps its own aspect-ratio (624/334) and
 * max-width in the loop template's custom CSS; these rules paint the same
 * slot edge to edge from the inside. The navy is owned here, hardcoded, so
 * the template container carries no background colour at all (its paint
 * reached the card's rounded clip and fringed at fractional DPI). */
/* No overflow:hidden here: its clip layer antialiases separately from the
 * card's rounded clip and fringes the corners at fractional DPI. Nothing
 * needs clipping anyway - the in-flow image fills the box exactly and the
 * fallback is absolutely inset to it. */
.ashm-global-on-demand-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 624 / 334;
    background: #122346;
}
/* The legacy padding-top box has zero content height, so an in-flow image
 * collapses there; only that path keeps the absolute fill. */
@supports not (aspect-ratio: 1) {
    .ashm-global-on-demand-card-image { height: 0; padding-top: 53.53%; }
    .ashm-global-on-demand-card-image__img { position: absolute; inset: 0; }
}
.ashm-global-on-demand-card-image__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.ashm-global-on-demand-card-image__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* The bundled logo is brand blue on transparent; the filter renders it white. */
.ashm-global-on-demand-card-image__fallback-logo {
    width: 40%;
    max-width: 240px;
    height: auto;
    filter: brightness(0) invert(1);
}
/* Same Elementor collapse quirk as the video's rule above. The media container
 * also ships 32px padding that its background image ignores but a child widget
 * would inherit as an inset, so zero it where this card is the content. Four
 * classes on purpose: the loop template sets the padding vars with three, and
 * Elementor prints loop CSS after this sheet, so a tie would lose. */
.elementor-widget-shortcode:has(.ashm-global-on-demand-card-image) { width: 100%; flex-shrink: 0; }
.e-con.e-child:has(> .elementor-widget-shortcode .ashm-global-on-demand-card-image) {
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}