.video {
    background-color: rgb(var(--color-background));
}

.video .block-heading {
    width: 100%;
}

.video .theme-video-media__poster {
    background-color: rgb(243 243 243 / 100%);
}

.video theme-video-media {
    height: 100%;
}

/* =========================================================
   Overlay
   Mobile-first: overlay content sits UNDER the video
   Desktop (>=960): overlay sits ON TOP of the video (as before)
   ========================================================= */

.theme-video__wrap {
    position: relative;
    width: 100%;

    /* MOBILE: stack video then overlay */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* MOBILE (default): overlay is in normal document flow */
.theme-video__overlay {
    position: relative;
    /* key: contains ::before on mobile */
    inset: auto;
    /* key: not covering the video */
    z-index: 1;
    display: flex;
    padding: clamp(16px, 3vw, 40px);
    pointer-events: none;

    /* ✅ Source of truth for overlay text color */
    color: var(--overlay-text, #ffffff);
}

.theme-video__overlay::before {
    content: "";
    position: absolute;
    inset: 0;

    /* background only behind the overlay content on mobile */
    background: var(--overlay-bg, #000000);
    opacity: var(--overlay-bg-opacity, 0.35);
    pointer-events: none;
}

.theme-video__overlay-inner {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    max-width: var(--overlay-max-width, 520px);
}

/* ✅ Force RTE content to inherit overlay color (prevents .rte overriding) */
.theme-video__overlay-inner :is(h1, h2, h3, h4, h5, h6,
    p, span, strong, em, li, small, div, blockquote) {
    color: inherit;
}

/* =========================================================
   Fonts (hard-set)
   - Heading + CTA: Brother
   - Body: Fraktion mono family
   ========================================================= */

.theme-video__overlay-heading.rte {
    font-family: "Brother", sans-serif;
}

.theme-video__overlay-text,
.theme-video__overlay-actions {
    font-family: "FraktionMono Bold", sans-serif;
}

/* Force CTA button font to Brother (override any global .button / a resets) */
.theme-video .theme-video__overlay-button :is(a.button, button.button, .button) {
    font-family: "Brother Bold", "Brother", sans-serif !important;
    font-weight: 800;
}

.theme-video .theme-video__overlay-button :is(a.button, button.button, .button) :is(span, strong, em, i, b) {
    font-family: inherit !important;
    font-weight: inherit;
}

/* =========================================================
   Typography (driven by block settings)
   ========================================================= */

.theme-video__overlay-heading {
    margin: 0 0 10px 0;
    font-weight: 800;
    font-size: var(--overlay-heading-font-size-mobile, 36px);
    letter-spacing: var(--overlay-heading-letter-spacing, 0px);
    line-height: 1.1;
}

.theme-video__overlay-text {
    margin: 0 0 16px 0;
    font-size: var(--overlay-text-font-size-mobile, 16px);
    letter-spacing: var(--overlay-text-letter-spacing, 0px);
    line-height: 1.35;
}

.theme-video__overlay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* CTA sizing */
.theme-video__overlay-button .button {
    font-family: inherit;
    font-size: var(--overlay-button-font-size-mobile, 14px);
    letter-spacing: var(--overlay-button-letter-spacing, 0px);
}

/* Optional shadow toggle */
.theme-video__btn-shadow {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

//* =========================================================
   Overlay positioning
   Separate mobile + desktop position classes
   ========================================================= */

/* Mobile positions */
    .theme-video__overlay--m-top-left {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .theme-video__overlay--m-top-center {
        align-items: flex-start;
        justify-content: center;
    }

    .theme-video__overlay--m-top-right {
        align-items: flex-start;
        justify-content: flex-end;
    }

    .theme-video__overlay--m-center-left {
        align-items: center;
        justify-content: flex-start;
    }

    .theme-video__overlay--m-center-center {
        align-items: center;
        justify-content: center;
    }

    .theme-video__overlay--m-center-right {
        align-items: center;
        justify-content: flex-end;
    }

    .theme-video__overlay--m-bottom-left {
        align-items: flex-end;
        justify-content: flex-start;
    }

    .theme-video__overlay--m-bottom-center {
        align-items: flex-end;
        justify-content: center;
    }

    .theme-video__overlay--m-bottom-right {
        align-items: flex-end;
        justify-content: flex-end;
    }

/* Desktop positions */
@media (min-width: 960px) {
    .theme-video__overlay--d-top-left {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .theme-video__overlay--d-top-center {
        align-items: flex-start;
        justify-content: center;
    }

    .theme-video__overlay--d-top-right {
        align-items: flex-start;
        justify-content: flex-end;
    }

    .theme-video__overlay--d-center-left {
        align-items: center;
        justify-content: flex-start;
    }

    .theme-video__overlay--d-center-center {
        align-items: center;
        justify-content: center;
    }

    .theme-video__overlay--d-center-right {
        align-items: center;
        justify-content: flex-end;
    }

    .theme-video__overlay--d-bottom-left {
        align-items: flex-end;
        justify-content: flex-start;
    }

    .theme-video__overlay--d-bottom-center {
        align-items: flex-end;
        justify-content: center;
    }

    .theme-video__overlay--d-bottom-right {
        align-items: flex-end;
        justify-content: flex-end;
    }
}

/* Text alignment */
.theme-video__overlay-inner.text-left {
    text-align: left;
}

.theme-video__overlay-inner.text-center {
    text-align: center;
}

.theme-video__overlay-inner.text-right {
    text-align: right;
}

/* =========================================================
   DESKTOP: put overlay back ON TOP of the video
   ========================================================= */
@media (min-width: 960px) {
    .theme-video__wrap {
        display: block;
        /* restore prior behavior */
    }

    .theme-video__overlay {
        position: absolute;
        inset: 0;
        z-index: 5;
        padding: clamp(16px, 3vw, 40px);
    }

    .theme-video__overlay-heading {
        font-size: var(--overlay-heading-font-size-desktop, 54px);
    }

    .theme-video__overlay-text {
        font-size: var(--overlay-text-font-size-desktop, 18px);
    }

    .theme-video__overlay-button .button {
        font-size: var(--overlay-button-font-size-desktop, 16px);
    }
}