/**
 * R3.7D.1 -- Video component pre-play cover (`.fgma-video__cover`, `Project_Component_Renderer::
 * render_video()`). Purely additive: every existing `.fgma-video`/`.fgma-video__embed`/
 * `.fgma-video__iframe`/`.fgma-video--failover`/`.fgma-video__failover-image`/`.fgma-video__caption`
 * rule (WordPress Additional CSS, section "12. Video") is untouched -- this file only styles the new
 * `.fgma-video__cover` button and, scoped strictly inside it, the SAME `.fgma-video__failover-image`
 * class already used by the (untouched) embed-failed fallback case elsewhere.
 *
 * `.fgma-video__embed` already establishes `position:relative` + `aspect-ratio:var(--fgma-embed-
 * ratio)` (see that rule) -- the exact same box the iframe itself already fills via
 * `position:absolute;inset:0`. `.fgma-video__iframe` carries no explicit `z-index` (auto). Two
 * `position:absolute` siblings with `z-index:auto` stack by DOM order -- the LATER sibling paints on
 * top, not the earlier one -- so the cover (which precedes the iframe in markup) was visually
 * covered once the iframe painted, despite being first in the DOM. Fix: an explicit `z-index` on the
 * cover alone is sufficient (any explicit value beats a sibling's `z-index:auto` regardless of DOM
 * order) -- no edit to the external `.fgma-video__iframe` rule needed.
 *
 * The play icon DOES need its own stacking rule: `.fgma-video__failover-image` is `position:absolute`
 * (positioned), while the `<svg>` is `position:static` by default. Per CSS2.1 painting order,
 * positioned descendants (the image, step 6) paint AFTER non-positioned in-flow descendants (the
 * static svg, step 5) REGARDLESS of DOM order -- so the image painted over the icon despite the
 * icon coming later in markup. Giving the svg `position:relative` (required before `z-index` has any
 * effect on a non-positioned box) plus a `z-index` higher than the image's implicit `auto` moves it
 * into the same "positioned descendants" bucket, ordered above the image. Both are scoped inside
 * `.fgma-video__cover`'s own stacking context (already established by its `position:absolute` +
 * explicit `z-index:1`), so this can never affect anything outside the cover.
 *
 * Centering: `align-items`/`justify-content` on `.fgma-video__cover` position the icon (its only
 * remaining direct flex child not removed from flow by `position:absolute`); centered per this
 * round's own explicit requirement, replacing the previous bottom-right placement.
 *
 * `fgma-video.js` (Video_Cover_Assets) hides the button via the native `hidden` attribute on click/
 * keyboard activation. The UA `[hidden]{display:none}` rule and this file's own `.fgma-video__cover
 * {display:flex}` are equal specificity (0,1,0) -- author styles beat UA styles at equal specificity
 * regardless of source order, so `display:flex` won and the cover never actually disappeared.
 * `.fgma-video__cover[hidden]` (0,2,0) restores `display:none` once hidden. If JS never runs, the
 * cover simply stays visible over a still-functional iframe underneath, never a broken video.
 *
 * Play-icon color reuses the existing shared `--e-global-color-v4-fgma-brand-red` token (already
 * used elsewhere in this codebase's own Additional CSS, e.g. the quote-underline rule) -- matching
 * Production's own real, literal red play-button color, never a new hardcoded hex value.
 *
 * Hover/focus regression: the theme's own `reset.css` ships `button:hover,button:focus{color:#fff}`
 * (confirmed live) -- a bare type+pseudo-class selector, specificity (0,1,1), which beats this
 * file's own `.fgma-video__cover{color:...}` (0,1,0) on hover/focus, so the button's `color` (and
 * therefore the circle's `fill="currentColor"`) turned white. Rather than chase every pseudo-class
 * that reset rule covers, `.fgma-video__cover svg` gets its own explicit, unconditional `color`
 * declaration (0,1,1) -- an element's own explicit value is never overridden by an ancestor's
 * *inherited* value changing, in any ancestor state (hover, focus, focus-visible, active), so this
 * is permanent and needs no separate `:hover`/`:focus` variant. The theme's global `button` rule
 * itself is untouched.
 */
.fgma-video__cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--fgma-space-md);
    border: 0;
    background: none;
    color: var(--e-global-color-v4-fgma-brand-red, #f21400);
    cursor: pointer;
}

.fgma-video__cover[hidden] {
    display: none;
}

.fgma-video__cover .fgma-video__failover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fgma-video__cover svg {
    position: relative;
    z-index: 2;
    color: var(--e-global-color-v4-fgma-brand-red, #f21400);
}