/*------------------------------------*\
    
    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,
.bg-textured-gray { 
    position: relative;
    z-index: 1;
}

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

.bg-textured-gray {
    background: var(--lightest-grey);
}

.textured-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    pointer-events: none;
    z-index: -1;
}

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

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

.bg-yellow {
    background: var(--primary);
}

.bg-yellow .sub-heading {
    color: var(--white);
}

.bg-yellow ul li:before {
    background: var(--white);
}

.bg-yellow .btn-tertiary {
    color: var(--black);
    box-shadow: 0px 0px 0px 4px var(--white);
    -webkit-box-shadow: 0px 0px 0px 4px var(--white);
    -moz-box-shadow: 0px 0px 0px 4px var(--white);
}

.bg-yellow .btn-link::after {
	background: var(--black);
}

.bg-dark-grey h1,
.bg-dark-grey h2,
.bg-dark-grey h3,
.bg-dark-grey h4,
.bg-dark-grey h5,
.bg-dark-grey h6 {
    color: var(--white);
}

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

.bg-dark-grey p a:not(.btn) {
    color: var(--white);
    text-decoration-color: var(--white);
}

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

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

@media (min-width: 1200px) {
    .bg-textured-gray { 
        background: transparent;
    }

    .wysiwyg h3 {
        margin-top: 50px;
    }   

    .wysiwyg h4,
    .wysiwyg h5 {
        margin-top: 35px;
    }  
    
    .bg-dark-grey .btn-tertiary:hover {
        color: var(--primary);
        box-shadow: 0px 0px 0px 4px var(--primary-hover);
        -webkit-box-shadow: 0px 0px 0px 4px var(--primary-hover);
        -moz-box-shadow: 0px 0px 0px 4px var(--primary-hover);
    }

    .bg-dark-grey .btn-link:hover {
        color: var(--primary);
    }

    .bg-dark-grey p a:not(.btn):hover {
        color: var(--primary);
        text-decoration-color: var(--primary);
    }

    .bg-yellow p a:not(.btn):hover {
        color: var(--white);
        text-decoration-color: var(--white);
    }

    .bg-yellow .btn-tertiary:hover {
        color: var(--black);
		box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.50);
        -webkit-box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.50);
        -moz-box-shadow: 0px 0px 0px 64pxpx rgba(255, 255, 255, 0.50);
    }

    .bg-yellow .btn-link {
        color: var(--black);
    }
}

.bg-textured-gray + .bg-textured-gray,
.bg-dark-grey + .bg-dark-grey,
.bg-yellow + .bg-yellow {
    padding-top: 0;
}