/**
 * Hero Background Rotator
 * /wp-content/themes/GastineauGuiding/assets/hero-bg-rotator.css
 */

/**
 * The hero section needs position: relative so the absolutely
 * positioned slide layers stack behind its content correctly.
 * body:not(.et-fb) scope prevents Divi canvas interference.
 */
body:not(.et-fb) #hero-section {
    position: relative;
    overflow: hidden;
}

/**
 * Each slide layer — absolutely fills the section,
 * hidden by default, shown via .is-active
 */
body:not(.et-fb) .gg-hero-bg-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/**
 * Active slide — fully visible
 */
body:not(.et-fb) .gg-hero-bg-slide.is-active {
    opacity: 1;
}

/**
 * Ensure all direct children of the section (Divi rows etc.)
 * sit above the slide layers
 */
body:not(.et-fb) #hero-section > .et_pb_row,
body:not(.et-fb) #hero-section > .et_pb_section_video_bg,
body:not(.et-fb) #hero-section > .et_pb_section_video_bg_overlay {
    position: relative;
    z-index: 1;
}

/**
 * Remove Divi's own background image on the section
 * once our rotator slides are injected (class added by JS)
 */
body:not(.et-fb) #hero-section.gg-rotator-active {
    background-image: none !important;
}