/*------------------------------------*\
    
    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 { 
    /* color: #474747; */
    position: relative;
    z-index: 1;
}

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

.bg-light-grey {
    background: rgba(189, 203, 239, 0.2);
}

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

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

.bg-light-blue h2,
.bg-dark-blue h2,
.bg-light-blue h3,
.bg-dark-blue h3,
.bg-light-blue h4,
.bg-dark-blue h4 {
    color: var(--white);
}

.bg-light-blue .sub-heading,
.bg-dark-blue .sub-heading {
    color: #BDCBEF;
}

.bg-dark-blue ul li::before,
.bg-light-blue ul li::before {
    background: #FDC149;
}

.bg-light-blue p a:not(.btn),
.bg-dark-blue p a:not(.btn) {
    color: #FDC149;
}

.bg-light-blue .btn-tertiary,
.bg-dark-blue .btn-tertiary {
    color: #FDC149;
}

.wysiwyg__graphic {
    position: absolute;
    right: -40px;
    bottom: 0;
    z-index: -1;
}

.wysiwyg p + ul {
    margin-top: -15px;
}

.wysiwyg .ninja_table_wrapper + p {
    margin-top: 25px;
}

.wysiwyg .btn {
    display: block;
    width: fit-content;
}

@media (min-width: 768px) {
    .wysiwyg .btn {
        display: inline-block;
        width: fit-content;
    }
}

@media (min-width: 1200px) {
    .bg-light-blue .btn-tertiary:hover,
    .bg-dark-blue .btn-tertiary:hover {
        color: #BDCBEF;
    }
}

.image-text__link a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.image-text__link a:hover,
.image-text__link a.active {
    color: var(--primary-color);
}

.image-text__img--product {
    transition: opacity 0.3s ease;
}