/**
 * Divi Theme Builder chrome: pin the footer to the bottom of the viewport
 * when the page is shorter than the screen, without capping a tall page at
 * 100vh (that put the footer over the overflowing content).
 *
 * Divi 5 wraps the layout as body > #page-container > #et-boc > header +
 * #et-main-area > #main-content + footer.
 */
html,
body,
#page-container {
    height: auto;
    min-height: 100%;
}

#page-container,
#et-boc,
#et-main-area,
#main-content {
    overflow: visible;
}

#et-boc {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    display: flex;
    flex-direction: column;
}

#et-main-area {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    height: auto;
}

#main-content {
    flex: 1 0 auto;
    height: auto;
}

footer.et-l--footer {
    flex-shrink: 0;
    margin-top: auto;
}

.admin-bar #et-boc {
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar #et-boc {
        min-height: calc(100vh - 46px);
        min-height: calc(100dvh - 46px);
    }
}

/**
 * Hero video cover.
 *
 * Put this class on an empty full-screen overlay section (Divi → Advanced →
 * CSS Class) that sits above a video background. It holds for a beat, then
 * fades away so the video can finish settling. pointer-events stay off so
 * the overlay never blocks clicks, even while it is still visible.
 *
 * Hold and fade lengths can be overridden on the section:
 *   --spruce-hero-cover-hold
 *   --spruce-hero-cover-fade
 */
.spruce-hero-cover {
    --spruce-hero-cover-hold: 1s;
    --spruce-hero-cover-fade: 0.8s;
    pointer-events: none;
    animation: spruce-hero-cover-fade var(--spruce-hero-cover-fade) ease-out var(--spruce-hero-cover-hold) forwards;
}

@keyframes spruce-hero-cover-fade {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spruce-hero-cover {
        --spruce-hero-cover-hold: 0s;
        --spruce-hero-cover-fade: 0.01s;
    }
}

/* Keep the overlay visible in the Visual Builder so it can still be selected. */
.et-fb .spruce-hero-cover,
.et-vb .spruce-hero-cover,
.et-fb-root-ancestor .spruce-hero-cover,
.et-fb-iframe-ancestor .spruce-hero-cover {
    animation: none;
}

/**
 * Divi background video fade-in.
 *
 * Put this class on the section that has the video background
 * (Divi → Advanced → CSS Class). The video stays hidden until playback
 * starts, then fades in. Later sections wait until the previous video has
 * fully loaded. Fade length:
 *   --spruce-bg-video-fade
 */
.spruce-bg-video {
    --spruce-bg-video-fade: 0.6s;
}

.spruce-bg-video .et-pb-background-video,
.spruce-bg-video .et_pb_section_video_bg,
.spruce-bg-video video {
    opacity: 0;
}

.spruce-bg-video.spruce-bg-video--ready .et-pb-background-video,
.spruce-bg-video.spruce-bg-video--ready .et_pb_section_video_bg,
.spruce-bg-video.spruce-bg-video--ready video {
    opacity: 1;
    transition: opacity var(--spruce-bg-video-fade) ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .spruce-bg-video .et-pb-background-video,
    .spruce-bg-video .et_pb_section_video_bg,
    .spruce-bg-video video {
        display: none;
    }
}

/* Keep the video visible in the Visual Builder. */
.et-fb .spruce-bg-video .et-pb-background-video,
.et-vb .spruce-bg-video .et-pb-background-video,
.et-fb-root-ancestor .spruce-bg-video .et-pb-background-video,
.et-fb-iframe-ancestor .spruce-bg-video .et-pb-background-video,
.et-fb .spruce-bg-video .et_pb_section_video_bg,
.et-vb .spruce-bg-video .et_pb_section_video_bg,
.et-fb-root-ancestor .spruce-bg-video .et_pb_section_video_bg,
.et-fb-iframe-ancestor .spruce-bg-video .et_pb_section_video_bg,
.et-fb .spruce-bg-video video,
.et-vb .spruce-bg-video video,
.et-fb-root-ancestor .spruce-bg-video video,
.et-fb-iframe-ancestor .spruce-bg-video video {
    display: revert;
    opacity: 1;
    transition: none;
}