/*  VYNILYN — small site-wide rules.

    WHY THIS FILE EXISTS RATHER THAN style.css. The child theme's own style.css is enqueued in
    functions.php as:

        wp_enqueue_style( 'child-style', ... , array( 'avada-stylesheet' ) );

    and `avada-stylesheet` is NOT a registered handle on this install — checked on 2026-09-27:
    `child-style` is registered, `avada-stylesheet` is not. WordPress will not output a style whose
    dependency is missing, so style.css has not been loading at all and anything in it is inert.
    Fixing that dependency would switch ~7 KB of dormant CSS on in one go on a live site, so it is
    left alone and deliberately not relied upon. This file is enqueued with no dependencies.
*/

/*  Ben, 2026-09-27: hide the reCAPTCHA badge.
    Google injects .grecaptcha-badge at runtime, so it never appears in the server HTML and CSS is
    the only lever. visibility rather than display: the widget still needs to size and run itself,
    it just is not seen.

    NOTE FOR BEN AND CB: Google's terms ask that, when the badge is hidden, the form carries the
    reCAPTCHA notice instead - "This site is protected by reCAPTCHA and the Google Privacy Policy
    and Terms of Service apply." That wording is not added here; it is a copy decision.  */
.grecaptcha-badge { visibility: hidden !important; }

/*  Ben, 2026-09-27: "move the EPK button above the badge as its empty space now."
    The badge is rendered INSIDE .fusion-form-recaptcha-field, and visibility:hidden leaves its
    60px box in the layout - measured: submit button ends at y=2321, the field runs 2321-2381, the
    Media Kit button started at 2389. Collapsing the field closes that gap, which lifts the button
    directly under the submit button. The field is clipped rather than display:none'd so the widget
    still lays out and runs; reCAPTCHA v3 needs no visible badge to score a submission. */
.fusion-form-recaptcha-field {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/*  The Media Kit button sits left under the booking form on desktop, per Ben. On phones a
    left-hung button looks stranded, so it re-centres. */
@media (max-width: 800px) {
    .fusion-button.vy-epk { display: block; margin-left: auto; margin-right: auto; }
}

/*  Hero: let the video be seen on phones.
    Avada paints .fullwidth-video-image at z-index 2 over the <video> at z-index 1, and only sets
    that layer to display:none at desktop widths - measured at a 442px viewport on 2026-09-27,
    where the video was playing fine underneath it the whole time. The class is added by
    vy-hero-hls.js ONLY while the video genuinely reports playing, so the poster still covers a
    hero that cannot play, which is the whole point of having it. */
/*  REVISED the same day. Hiding the poster on play fixed only the END of the sequence. Ben:
    "it seems like it flashed first frame of video, then fallback, then starts playing - on all
    devices." That is exactly right, and it happens because the <video> is visible from the very
    first paint: the browser paints whatever the MP4 <source> has loaded, the script then swaps in
    the stream, the poster shows through the gap, and the video reappears when it plays.

    So the poster now STAYS as the permanent base layer and the video fades in over it once it is
    genuinely playing. The video starts at opacity 0 from CSS in the head, so it cannot paint a
    stray frame before the script has even run, and there is nothing to flash between.  */
.fusion-fullwidth .fullwidth-video {
    opacity: 0;
    transition: opacity .45s ease;
}
.fusion-fullwidth.vy-hero-playing .fullwidth-video {
    opacity: 1;
}

/*  Raising the video's z-index above the poster does NOT work - Avada sets z-index on
    .fullwidth-video with higher specificity, measured still computing to 1 with this rule present.
    So the poster DIV is hidden on play instead. There is no gap during the crossfade because the
    hero container carries the same photograph as its own background-image (verified at 442px:
    containerBg = vynilyn-hero-poster-group.jpg), so the video fades up over the identical still. */
.fusion-fullwidth.vy-hero-playing .fullwidth-video-image { display: none !important; }

/*  Ben, 2026-09-27: the DJs LOGIN button in the header reads 11px on phones.
    Targeted by href rather than Avada's auto-numbered .button-1, which renumbers. */
@media (max-width: 800px) {
    a.fusion-button[href*="/login"],
    a.fusion-button[href*="/login"] .fusion-button-text {
        font-size: 11px !important;
    }
}

/*  Hero headline: stop the band name being cut in half on narrow phones.
    Ben, 2026-09-27, from a screenshot reading "VYNILYI".

    Measured at a 375px viewport, with a safe right edge of 367px:

        90px (was)  word 398px wide, right edge 428px   - 53px off the screen
        80px        354px            384px              - still clipped
        74px        327px            357px              - largest that fits
        71px        314px            344px              - fits with margin

    min(90px, 19vw) gives 71px at 375, 84px at 442, and caps at 90px from 474 upward, so DESKTOP IS
    UNCHANGED and every phone scales to fit with no breakpoints to maintain. It only ever makes the
    word smaller than it is now, never larger.

    Keyed to .vy-hero-home, a deliberate class, rather than Avada's auto-numbered
    .fusion-builder-row-4 which renumbers whenever containers are added or reordered. Verified the
    selector matches exactly ONE element. !important because Avada sets this size inline. */
.vy-hero-home .fusion-text strong {
    font-size: min(90px, 19vw) !important;
    line-height: 1.05 !important;
}