/* Cover
-------------------------------------------------- */

/* Allow vertical overlap on cover blocks
------------------------- */

.wp-block-cover:has(.is-style-cover-overlap-bottom, .is-style-cover-overlap-top, .is-style-featured-image-overlap-bottom, .is-style-featured-image-overlap-top, .is-style-image-overlap-bottom, .is-style-image-overlap-top) {
    overflow: visible;
}

/* Multiply (Blend Mode)
------------------------- */

.is-style-cover-multiply::before {
    content: '';
    background-color: var(--wp--preset--color--primary-extra-dark);
    width: 100%;
    height: 100%;
    position: absolute;
}

.is-style-cover-multiply > img {
    mix-blend-mode: multiply;
}

/* Overlap Bottom
------------------------- */

.is-style-cover-overlap-bottom {
    margin-bottom: calc(var(--wp--preset--spacing--50) * -1) !important;
    position: relative;
    z-index: 9;
}

/* Margin collapse hack for negative margin-bottom overlap */
.wp-block-group:has( .is-style-cover-overlap-bottom) {
    padding-bottom: 1px !important;
}

/* Hack to allow for negative margin-bottom overlap to work on cover blocks with min-height 100% */
.is-style-cover-overlap-bottom[style*="min-height:100%;"] {
    margin-top: var(--wp--preset--spacing--50) !important;
    position: relative;
    z-index: 9;
}

/* Overlap Left
------------------------- */

.is-style-cover-overlap-left {
    @media (min-width: 1280px) {
        margin-left: calc(var(--wp--preset--spacing--50) * -1) !important;
        position: relative;
        z-index: 9;
    }
}

/* Overlap Right
------------------------- */

.is-style-cover-overlap-right {
    @media (min-width: 1280px) {
        margin-right: calc(var(--wp--preset--spacing--50) * -1) !important;
        position: relative;
        z-index: 9;
    }
}

/* Overlap Top
------------------------- */

.is-style-cover-overlap-top {
    margin-top: calc(var(--wp--preset--spacing--50) * -1) !important;
    position: relative;
    z-index: 9;
}

/* Margin collapse hack for negative margin-top overlap */
.wp-block-group:has(> .is-style-cover-overlap-top) {
    padding-top: 1px !important;
}

/* Overlap Top Half Height
------------------------- */

.is-style-cover-overlap-top-half {
    @media (min-width: 960px) {
        position: relative;
        z-index: 9;
        transform: translateY(-50%);
    }
}