/*------------------------------------*\
    
    WebFX WYSIWYG Customizations - Global styling for all ACF WYSIWYG's

    Add custom WYSIWYG styling to this file if it should be applied to all ACF WYSIWYG's on the site
    Otherwise, put your block-specific styles in individual block stylesheets

\*------------------------------------*/

.wysiwyg { 
    position: relative;
    z-index: 1;
}

.wysiwyg__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;    
}

.bg-image::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(255, 255, 255, 0.93);
}

.bg-white {
    background: var(--white);
}

.bg-white {
    background: var(--white);
}

.bg-charcoal {
    background: var(--primary);
    color: var(--white);
}

.bg-dark-gray {
    background: var(--dark-gray);
    color: var(--white);
}

.bg-light-gray {
    background: var(--light-gray);
}

.bg-charcoal h1,
.bg-charcoal h2,
.bg-charcoal h3,
.bg-charcoal h4,
.bg-charcoal h5,
.bg-charcoal .sub-heading,
.bg-dark-gray h1,
.bg-dark-gray h2,
.bg-dark-gray h3,
.bg-dark-gray h4,
.bg-dark-gray h5,
.bg-dark-gray .sub-heading {
    color: var(--white);
}

.bg-charcoal .btn-black,
.bg-dark-gray .btn-black {
    border: 1px solid var(--white);
}

.bg-charcoal .btn-tertiary,
.bg-dark-gray .btn-tertiary {
    color: var(--white);
}

.bg-charcoal p a,
.bg-dark-gray p a {
    color: var(--white);
}

.bg-charcoal ul li:before,
.bg-dark-gray ul li:before {
    background: var(--white);
}

.wysiwyg p + h3,
.wysiwyg p + h4 {
    margin-top: 30px;
}

.bg-image .wysiwyg__wrapper {
    border-radius: 6px;
}

@media (min-width: 768px) {
    .wysiwyg p + h3,
    .wysiwyg p + h4 {
        margin-top: 35px;
    }
}

@media (min-width: 1200px) {
    .bg-charcoal .btn-black:hover,
    .bg-dark-gray .btn-black:hover {
        border: 1px solid var(--white);
        background: var(--text-color);
        color: var(--white);
    }

    .bg-charcoal .btn-tertiary:hover,
    .bg-dark-gray .btn-tertiary:hover,
    .bg-charcoal p a:hover,
    .bg-dark-gray p a:hover {
        color: var(--secondary);
    }

    .bg-image::before {
        display: none;
    }

    .bg-image .wysiwyg__wrapper {
        background: var(--white);
        padding: 75px 108px;
    }

}