/* ==========================================================================
   Organization Website Backgrounds
   - .wb-bg-layer    : background media layer (image/video/animation)
   - .wb-bg-overlay  : tinted overlay for text contrast (theme-aware via CSS vars)
   - Caller (section/hero wrapper) must establish position:relative so these
     absolute layers anchor correctly. Section content should sit at z-index:2.
   ========================================================================== */

.wb-bg-layer,
.wb-bg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.wb-bg-layer {
    z-index: 0;
}

/* Parallax / fixed attachment: pin the base layer to the viewport so content
   scrolls over a stationary background. Only the org/page base-layer editors
   set this; it's a real <img>/<video> in a fixed box (no iOS
   background-attachment jank). wb-bg-hide-mobile still hides it on narrow
   viewports. */
.wb-bg-layer.wb-bg-fixed,
.wb-bg-overlay.wb-bg-fixed {
    position: fixed;
}

.wb-bg-overlay {
    z-index: 1;
    background-color: var(--wb-ov-color, transparent);
    opacity: var(--wb-ov-opacity, 0);
}

[data-theme="dark"] .wb-bg-overlay {
    background-color: var(--wb-ov-color-dark, var(--wb-ov-color, transparent));
    opacity: var(--wb-ov-opacity-dark, var(--wb-ov-opacity, 0));
}

/* Image background */
.wb-bg-image .wb-bg-img {
    width: 100%;
    height: 100%;
    object-fit: var(--wb-bg-size, cover);
    object-position: var(--wb-bg-position, center center);
    display: block;
}

/* Video background */
.wb-bg-video .wb-bg-video,
.wb-bg-layer .wb-bg-video {
    width: 100%;
    height: 100%;
    object-fit: var(--wb-bg-size, cover);
    object-position: var(--wb-bg-position, center center);
    display: block;
}

/* Three.js animation canvas mount override. CanvasAnimationsWidget renders a
   fixed-position canvas by default; inside a section we scope it to the
   section wrapper instead. */
.wb-bg-anim-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* Sit at the media-layer level so the overlay tint (z-index 1) paints over
       the animation and section/footer content (z-index 2) stays above it.
       Without this, the content rule below pulls the canvas to z-index 2 (it is
       neither .wb-bg-layer nor .wb-bg-overlay) and the overlay has no effect. */
    z-index: 0 !important;
}

/* Mobile disable: hide media layer on narrow viewports. Overlay remains so
   text contrast on the underlying section color is preserved. */
@media (max-width: 768px) {
    .wb-bg-layer.wb-bg-hide-mobile {
        display: none;
    }
}

/* Ensure existing .website-section wrapper creates a positioning context and
   that content sits above the bg+overlay layers. */
.website-section {
    position: relative;
}

/* Lift section CONTENT above the bg + overlay layers. Excludes the shape
   dividers (.website-section-divider): they are decorative surface elements that
   must keep their own absolute positioning and sit BELOW the overlay (see
   website-theme.css) so an overlay tints them together with the section
   background. Without this exclusion the broad selector forces the divider to
   position:relative (dropping it into flow, where section padding insets it) and
   z-index:2 (above the overlay, so it escapes the tint) - the two divider bugs
   this rule used to cause whenever a background widget loaded this stylesheet. */
.website-section > .container,
.website-section > *:not(.wb-bg-layer):not(.wb-bg-overlay):not(.website-section-divider) {
    position: relative;
    z-index: 2;
}

/* Opaque colour sections fully COVER the background media (image/video/birds),
   so the media-contrast overlay (.wb-bg-overlay, z-index 1) has nothing to tint
   there - it would only dull the brand colour. The footer already sits outside
   the overlay and shows its true colour; match that by lifting opaque sections
   above the overlay too. Transparent/default sections are intentionally left
   below it so the media they reveal still gets its contrast tint.

   `isolation: isolate` scopes these z-indexes to the page wrapper so they never
   leak into the document's root stacking order (sticky header, floating widgets
   stay on top). The divider inside a lifted section rides with it (its own
   z-index:0 is now relative to the section), so an opaque section and its edges
   read as one consistent colour in every theme. */
.website-page {
    isolation: isolate;
}
.website-section-primary,
.website-section-secondary,
.website-section-dark,
.website-section-light,
.website-section-gradient,
.website-section-mesh {
    z-index: 2;
}