/*------------------------------------*\
    
    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;
}

.bg-white {
    background: #ffffff;
    color: #6B6B6B;
}

.bg-grey {
    background: #F5F5F7;
    color: #6B6B6B;
}

.bg-dark-blue {
    background: #12284C;
    color: #ffffff;
}

.bg-dark-blue h2,
.bg-blue-gradient h2,
.bg-image h2 {
    color: #ffffff;
    -webkit-text-fill-color: #fff;
} 

.bg-light-gradient {
    background: linear-gradient(180deg, #FFF 0%, #F5F5F7 100%);
}

.bg-blue-gradient {
    background: linear-gradient(50deg, #12284C 25.14%, #0575A1 100%);
    color: #ffffff;
}

.wysiwyg.bg-dark-blue h2:not(.component__title),
.wysiwyg.bg-blue-gradient h2:not(.component__title),
.wysiwyg.bg-image h2:not(.component__title) {
    color: #ffffff;
    -webkit-text-fill-color: #fff;
}

.wysiwyg.bg-dark-blue h3,
.wysiwyg.bg-blue-gradient h3,
.wysiwyg.bg-image h3,
.wysiwyg.bg-dark-blue h4,
.wysiwyg.bg-blue-gradient h4,
.wysiwyg.bg-image h4,
.wysiwyg.bg-dark-blue h5,
.wysiwyg.bg-blue-gradient h5,
.wysiwyg.bg-image h5,
.wysiwyg.bg-dark-blue h6,
.wysiwyg.bg-blue-gradient h6,
.wysiwyg.bg-image h6 {
    color: #ffffff;
}

.bg-white + .bg-white:not(.no-padding-top-collapse),
.bg-white + .bg-white:not(.cta-full-width),
.bg-grey + .bg-grey:not(.no-padding-top-collapse),
.bg-dark-blue + .bg-dark-blue:not(.no-padding-top-collapse),
.bg-white + .bg-light-gradient {
    padding-top: 0;
} 


.bg-white.no-padding-top-collapse + .bg-white,
.bg-grey.no-padding-top-collapse + .bg-grey,
.bg-dark-blue.no-padding-top-collapse + .bg-dark-blue,
.bg-blue-gradient.no-padding-top-collapse + .bg-blue-gradient,
.bg-light-gradient.no-padding-top-collapse + .bg-light-gradient {
    padding-top: var(--section-margins);
} 

.bg-image {
    color: #fff;
}

.wysiwyg__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    overflow-clip-margin: unset;
}

.bg-image:not(.half-text-testimonials):before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .85;
    background-color: #12284C; 
    z-index: 2;
}

.bg-image .container {
    position: relative;
    z-index: 3;
}

.wysiwyg__sidebar {
    background: #F5F5F7;
    border-radius: 8px;
    padding: 35px 20px 25px;
    margin-top: 50px;

    & h2 {
        color: #12284C;
        -webkit-text-fill-color: #12284C;
    }

    & ul li {
        color: #333333;
        font-weight: 400;
    }
}

.wysiwyg__sidebar.sharp {
    border-radius: 0;
}

/* .wysiwyg .btn {
    margin-bottom: 20px;
} */

.bg-light-gradient .wysiwyg__sidebar {
    background: #F5F5F7;
}

.bg-grey .wysiwyg__sidebar,
.bg-dark-blue .wysiwyg__sidebar,
.bg-image .wysiwyg__sidebar,
.bg-blue-gradient .wysiwyg__sidebar {
    background: #fff;

    & :is(h3, h4, h5, h6) {
        color: #12284C;
    }
}

.bg-grey .wysiwyg__sidebar h4,
.bg-dark-blue .wysiwyg__sidebar h4,
.bg-image .wysiwyg__sidebar h4,
.bg-blue-gradient .wysiwyg__sidebar h4 {
    color: #12284C ;
}

.bg-grey .wysiwyg__sidebar p,
.bg-dark-blue .wysiwyg__sidebar p,
.bg-image .wysiwyg__sidebar p,
.bg-blue-gradient .wysiwyg__sidebar p {
    color: #6B6B6B;
}

.wysiwyg__sidebar h4,
.wysiwyg__sidebar p {
    margin-bottom: 20px;
}

.wysiwyg__sidebar ul {
    margin: 0;
    padding: 0;
}

.wysiwyg__sidebar ul li {
    margin: 12px 0;
    padding: 0;
}

.wysiwyg__sidebar ul li::before {
    display: none;
}

.wysiwyg__sidebar ul li a {
    margin: 0;
    padding: 0;
    background: linear-gradient(90deg, #12284C 0%, #089CD6 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wysiwyg__sidebar ul li a :where(sup, sub) {
    background: inherit;
}

.wysiwyg__content h4 {
    color: #6B6B6B;
}

.wysiwyg__content p {
    margin-bottom: 22px;
}

.row-center {
    justify-content: center;
}

.text-image-column__text {
    margin-top: 20px;
}

.text-image-column__img {
    margin: 0 auto;
    max-width: 396px;
}

@media (min-width: 1200px) {
    .bg-dark-blue p a:hover,
    .bg-blue-gradient p a:hover,
    .bg-image p a:hover {
        color: #45B5E0;
        -webkit-text-fill-color: #45B5E0;
        font-weight: 400;
        text-shadow: 0 0 1px #45B5E0;
    }

    .bg-dark-blue .btn-tertiary:hover,
    .bg-blue-gradient .btn-tertiary:hover,
    .bg-image .btn-tertiary:hover {
        color: #45B5E0;
    }

    .wysiwyg__sidebar {
        padding: 46px 45px;
        margin-top: 0;
    }
    
    .wysiwyg__sidebar h4,
    .wysiwyg__sidebar p {
        margin-bottom: 20px;
    }

    .wysiwyg__sidebar p {
        font-size: 16px;
    }

    .wysiwyg__sidebar ul li:last-child {
        margin-bottom: 0;
    }

    .wysiwyg--with-sidebar .row-center {
        align-items: center;
    }

    .wysiwyg--with-sidebar .row-center.row-reverse {
        flex-direction: row-reverse;
    }

    .wysiwyg__sidebar ul li a:hover {
        background: linear-gradient(90deg, #089CD6 0%, #12284C 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .wysiwyg--padding {
        padding-top: 100px;
    }

    .text-image-column .flex-row {
        align-items: center;
        flex-direction: row-reverse;
    }

    .text-image-column .flex-row--reverse {
        flex-direction: row;
    }
    
    
    .text-image-column__text {
        margin-top: 0;
    }

    .wysiwyg--padding.wysiwyg--reduce-padding {
        padding-top: 70px;
        padding-bottom: 70px;
    }

}