/* ==========================================================================
   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;
}

/* Image Divider (.website-section-flush is only ever set for it): the band
   is an opaque, position:relative z-index:2 sibling that paints its OWN image,
   so with the default layer order (layer 0, overlay 1) the animation and the
   contrast tint hide UNDER the picture. Lift both above the band; they stay
   pointer-events:none so the band link/button remain clickable. (Descendant,
   not child: the media widget sits in a display:contents wrapper.) */
.website-section-flush .wb-bg-layer {
    z-index: 3;
}
.website-section-flush .wb-bg-overlay {
    z-index: 4;
}
/* The animation is NOT a .wb-bg-layer: CanvasAnimationsWidget emits a bare
   canvas.wb-bg-anim-canvas pinned to z-index:0 !important (rule below), so it
   needs its own lift (higher specificity + !important to beat that pin).
   pointer-events:none so it never blocks the band's link/button; the
   cursor-follow interaction of presets like Butterflies is therefore idle here. */
.website-section-flush .wb-bg-anim-canvas {
    z-index: 3 !important;
    pointer-events: none;
}

.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) and the Ken Burns / Parallax image
   frame (.website-section-image-frame): both 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 them to
   position:relative (the image frame then has no explicit size and collapses
   to 0 height - Ken Burns/Parallax paints nothing - and the divider drops
   into flow, where section padding insets it) and z-index:2 (above the
   overlay, so they escape the tint) - bugs this rule used to cause whenever a
   background widget (org/page default, or any OTHER section's own media
   layer) loaded this stylesheet on the same page. */
.website-section > .container,
.website-section > *:not(.wb-bg-layer):not(.wb-bg-overlay):not(.website-section-divider):not(.website-section-image-frame) {
    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;
}