/*------------------------------------*\
    
    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;
    color: var(--color-black);
}

.bg-cream {
    background: #F4EFE8;
}

.bg-rose-pink {
    background: #F0E4DE;
}

.bg-maroon {
    background: #4B1007;
    color: #FFFFFF;
}

.bg-maroon h2,
.bg-maroon h3,
.bg-maroon h4,
.bg-maroon h5,
.bg-maroon h6,
.bg-maroon .sub-heading {
    color: #fff;
}

.bg-maroon p a:not(.btn) {
    color: #EDD9D4;
    background: linear-gradient(to bottom, rgba(244, 239, 232, 0.25) 0%, rgba(244, 239, 232, 0.25) 100%);
    background-size: 3px 0;
    background-position: 0 100%;
    background-repeat: repeat-x;
}

.bg-maroon a:hover {
    color: var(--color-primary);
}

.bg-maroon .btn-primary {
    color: var(--color-black);
    background: #FFFFFF;
}

.bg-maroon .btn-secondary {
    color: #FFFFFF;
    border-color: #FFFFFF;
}

.bg-maroon .btn-tertiary,
.bg-maroon .btn-link {
    color: #FFFFFF;
}

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

.bg-rose-pink blockquote {
    background: #F4EFE8;
}

.bg-rose-pink blockquote::after {
    color: rgba(237, 217, 212, 0.25);
}

.bg-maroon blockquote {
    background: #A35C52;
    color: #FFFFFF;
}

.bg-maroon blockquote::after {
    color: rgba(218, 175, 169, 0.25);
}

.example-btns {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.example-btns .btn + .btn {
    margin-top: 0;
    margin-left: 0;
}

@media (min-width: 768px) {
    .example-btns {
        flex-direction: row;
        align-items: center;
        gap: 20px 32px;
    }
}

@media (min-width: 1200px) {
    .bg-maroon p a:hover {
        background-size: 2px 10px;
    }

    .bg-maroon .btn-primary:hover {
        color: #fff;
        background: #EF4024;
    }

    .bg-maroon .btn-secondary:hover {
        color: #EF4024;
        border-color: #EF4024;
    }

    .bg-maroon .btn-tertiary:hover,
    .bg-maroon .btn-link:hover {
        color: #EF4024;
    }

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

    .example-btns {
        gap: 30px;
    }

}