/*
 * Pause/play toggle for auto-playing motion (includes/gsd/gsd-pause-controls.php).
 *
 * Sits bottom-right of the media it controls. The scope wrapper is positioned by
 * each block's own CSS (hero column: relative; Webflow's .w-background-video:
 * relative; the marquee strip gets it in blocks-frontend.css). Navy on white with
 * a white ring, 44px tall — well over the 24px minimum (SC 2.5.8) and readable on
 * both the navy hero panel and the white logo strip.
 */
.gsd-pause {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 2px solid #fff;
    background: #031444;
    color: #fff;
    font-family: var(--nav-font, inherit);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    -webkit-appearance: none;
    appearance: none;
}

.gsd-pause:hover {
    background: #000d33;
}

.gsd-pause:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Icon-only variant (gsd_pause_button( ..., false )): square, no gap, no side
   padding, and a slightly larger glyph since it is now the button's whole visible
   content. The accessible name comes from the aria-label -- see the helper. The
   44px floor is kept: dropping the word shrinks the LOOK, never the target. */
.gsd-pause--icon {
    gap: 0;
    width: 44px;
    padding: 0;
    justify-content: center;
}

.gsd-pause--icon .gsd-pause__icon {
    width: 16px;
    height: 16px;
}

/* Affiliates marquee: the scope is the whole .affiliates section, and the button sits
   top-right beside the centred heading rather than over the strip (logos would slide
   under it).

   It is deliberately QUIET here (2026-09-15): the solid navy pill read as a call to
   action next to the heading, so the chrome drops away and the navy glyph carries the
   control. Non-text contrast (SC 1.4.11) rides on that glyph -- #031444 on the white
   section is ~15:1, far past the 3:1 a UI component needs -- which is why the fill and
   the ring can go this light without failing. Don't lighten the ICON to match. */
.affiliates[data-gsd-pause-scope] {
    position: relative;
}

.affiliates > .gsd-pause {
    top: 16px;
    right: 5%;
    bottom: auto;
    background: transparent;
    border: 1px solid rgba(3, 20, 68, .22);
    color: #031444;
    box-shadow: none;
}

.affiliates > .gsd-pause:hover {
    background: rgba(3, 20, 68, .06);
    border-color: rgba(3, 20, 68, .5);
}

.affiliates > .gsd-pause:focus-visible {
    outline-color: #031444;
}

.gsd-pause__icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex: none;
}

.gsd-pause[data-paused="true"] .gsd-pause__icon--pause,
.gsd-pause[data-paused="false"] .gsd-pause__icon--play {
    display: none;
}

/* Hidden by the script when there is nothing to pause (e.g. the Luminous video
   has no src on narrow screens / reduced motion). [hidden] wins regardless. */
.gsd-pause[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .gsd-pause {
        right: 10px;
        bottom: 10px;
        min-width: 36px;
        min-height: 36px; /* still 1.5× the 24px minimum */
        padding: 0 12px;
        font-size: 13px;
    }

    .gsd-pause--icon {
        width: 36px;
        padding: 0;
    }

    /* Narrow screens: the heading needs the width, so the marquee button drops
       into the flow, centred under the strip. */
    .affiliates > .gsd-pause {
        position: static;
        display: inline-flex;
        margin: 12px auto 0;
    }

    .affiliates[data-gsd-pause-scope] {
        text-align: center;
    }
}