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

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

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

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

    .sub-heading,
    .subheading {
        background-image: var(--light-blue-linear);
    }
}

.bg-darkest-blue {
    background: var(--near-black);
    color: var(--white);
}

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

.bg-blue-gradient {
    background: linear-gradient(107deg, var(--medium-blue) 4.02%, var(--bright-blue) 107.33%);
    color: var(--white);
}

.bg-dark-blue h2,
.bg-dark-blue h3,
.bg-dark-blue h4,
.bg-dark-blue h5,
.bg-dark-blue h6,
.bg-bright-blue h2,
.bg-bright-blue h3,
.bg-bright-blue h4,
.bg-bright-blue h5,
.bg-bright-blue h6,
.bg-darkest-blue h2,
.bg-darkest-blue h3,
.bg-darkest-blue h4,
.bg-darkest-blue h5,
.bg-darkest-blue h6,
.bg-blue-gradient h2,
.bg-blue-gradient h3,
.bg-blue-gradient h4,
.bg-blue-gradient h5,
.bg-blue-gradient h6 {
    color: var(--white);
}

.bg-bright-blue .sub-heading,
.bg-blue-gradient .sub-heading {
    background: linear-gradient(107deg, var(--white) 4.02%, var(--white) 107.33%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: capitalize
}

.bg-dark-blue .btn-primary,
.bg-bright-blue .btn-primary,
.bg-darkest-blue .btn-primary,
.bg-blue-gradient .btn-primary {
    -webkit-text-fill-color: var(--bright-blue);
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 100%);
}

.bg-dark-blue .btn-primary::before,
.bg-bright-blue .btn-primary::before,
.bg-darkest-blue .btn-primary::before,
.bg-blue-gradient .btn-primary::before {
    background: linear-gradient(107deg, var(--medium-blue) 4.02%, var(--bright-blue) 107.33%);
    opacity: 0.25;
}

.bg-dark-blue .btn-secondary,
.bg-dark-blue .btn-secondary::after,
.bg-bright-blue .btn-secondary,
.bg-bright-blue .btn-secondary::after,
.bg-darkest-blue .btn-secondary,
.bg-darkest-blue .btn-secondary::after,
.bg-blue-gradient .btn-secondary,
.bg-blue-gradient .btn-secondary::after {
    border-color: var(--white);
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-dark-blue .btn-secondary::before,
.bg-bright-blue .btn-secondary::before,
.bg-darkest-blue .btn-secondary::before,
.bg-blue-gradient .btn-secondary::before {
    background: linear-gradient(107deg, var(--white) 4.02%, var(--light-blue) 107.33%);
    opacity: 0.25;
}

.bg-dark-blue .btn-tertiary,
.bg-dark-blue .btn-tertiary::after,
.bg-bright-blue .btn-tertiary,
.bg-bright-blue .btn-tertiary::after,
.bg-darkest-blue .btn-tertiary,
.bg-darkest-blue .btn-tertiary::after,
.bg-blue-gradient .btn-tertiary,
.bg-blue-gradient .btn-tertiary::after {
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-group+h4 {
    margin-top: 35px;
}

.bg-white + .bg-white,
.bg-light-blue + .bg-light-blue,
/* .bg-dark-blue + .bg-dark-blue, */
.bg-darkest-blue + .bg-darkest-blue,
.bg-bright-blue + .bg-bright-blue,
.bg-blue-gradient + .bg-blue-gradient {
    padding-top: 0;
    margin-top: 0;
}

.bg-dark-blue p a:not(.btn),
.bg-bright-blue p a:not(.btn),
.bg-darkest-blue p a:not(.btn),
.bg-dark-blue li a:not(.btn),
.bg-bright-blue li a:not(.btn),
.bg-darkest-blue li a:not(.btn),
.bg-dark-blue h2 a:not(.btn),
.bg-bright-blue h2 a:not(.btn),
.bg-darkest-blue h2 a:not(.btn),
.bg-dark-blue h3 a:not(.btn),
.bg-bright-blue h3 a:not(.btn),
.bg-darkest-blue h3 a:not(.btn),
.bg-dark-blue h4 a:not(.btn),
.bg-bright-blue h4 a:not(.btn),
.bg-darkest-blue h4 a:not(.btn),
.bg-dark-blue h5 a:not(.btn),
.bg-bright-blue h5 a:not(.btn),
.bg-darkest-blue h5 a:not(.btn),
.bg-dark-blue h6 a:not(.btn),
.bg-bright-blue h6 a:not(.btn),
.bg-darkest-blue h6 a:not(.btn),
.bg-dark-blue table a:not(.btn),
.bg-bright-blue table a:not(.btn),
.bg-darkest-blue table a:not(.btn) {
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration-color: var(--white);
}

@media (min-width: 768px) {
    .btn-group+h4 {
        margin-top: 50px;
    }
}

@media (min-width: 1200px) {
    .bg-dark-blue .sub-heading,
    .bg-darkest-blue .sub-heading {
        background: linear-gradient(107deg, var(--white) 4.02%, var(--white) 107.33%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-transform: capitalize
    }

    .bg-dark-blue p a:hover,
    .bg-bright-blue p a:hover,
    .bg-darkest-blue p a:hover,
    .bg-blue-gradient p a:hover {
        text-decoration: none;
        background: linear-gradient(107deg, var(--medium-blue) 4.02%, var(--bright-blue) 107.33%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    table a:hover,
    table a:hover,
    table a:hover,
    table a:hover {
        text-decoration: none;
        background: linear-gradient(107deg, var(--medium-blue) 4.02%, var(--bright-blue) 107.33%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    table tr:nth-child(even) a:hover,
    table tr:nth-child(even) a:hover,
    table tr:nth-child(even) a:hover,
    table tr:nth-child(even) a:hover {
        background: linear-gradient(90deg, #EC222E 0%, #AD0D15) 100%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .bg-dark-blue .btn-primary:hover,
    .bg-bright-blue .btn-primary:hover,
    .bg-darkest-blue .btn-primary:hover,
    .bg-blue-gradient .btn-primary:hover {
        -webkit-text-fill-color: var(--white);
        background: linear-gradient(90deg, var(--bright-red) 0%, var(--rich-red) 100%);
    }

    .bg-dark-blue .btn-primary:hover::before,
    .bg-bright-blue .btn-primary:hover::before,
    .bg-darkest-blue .btn-primary:hover::before,
    .bg-blue-gradient .btn-primary:hover::before {
        background: linear-gradient(107deg, var(--white) 4.02%, var(--white) 107.33%);
        opacity: 0.75;
    }

    .bg-dark-blue .btn-secondary:hover,
    .bg-dark-blue .btn-secondary:hover::after,
    .bg-bright-blue .btn-secondary:hover,
    .bg-bright-blue .btn-secondary:hover::after,
    .bg-darkest-blue .btn-secondary:hover,
    .bg-darkest-blue .btn-secondary:hover::after,
    .bg-blue-gradient .btn-secondary:hover,
    .bg-blue-gradient .btn-secondary:hover::after {
        border-color: var(--rich-red);
        background: linear-gradient(90deg, var(--bright-red) 0%, var(--rich-red) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .bg-dark-blue .btn-secondary:hover::before,
    .bg-bright-blue .btn-secondary:hover::before,
    .bg-darkest-blue .btn-secondary:hover::before,
    .bg-blue-gradient .btn-secondary:hover::before {
        background: linear-gradient(90deg, var(--bright-red) 0%, var(--rich-red) 100%);
        opacity: 0.15;
    }

    .bg-dark-blue .btn-tertiary:hover,
    .bg-dark-blue .btn-tertiary:hover::after,
    .bg-bright-blue .btn-tertiary:hover,
    .bg-bright-blue .btn-tertiary:hover::after,
    .bg-darkest-blue .btn-tertiary:hover,
    .bg-darkest-blue .btn-tertiary:hover::after,
    .bg-blue-gradient .btn-tertiary:hover,
    .bg-blue-gradient .btn-tertiary:hover::after {
        background: linear-gradient(90deg, var(--bright-red) 0%, var(--rich-red) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

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

 
.wysiwyg {
    .wysiwyg__sidebar {
        padding: 30px 25px 10px;
        border-radius: 12px;
        overflow: hidden;
        position: sticky;
        top: 260px;
        margin-top: 30px;
    }

    .wysiwyg__sidebar.is-not-sticky {
        position: relative;
    }
    
    .wysiwyg__sidebar-heading {
        font-size: 22px;
        margin-bottom: 10px;
        color: var(--dark-blue);
    }

    .wysiwyg__sidebar.bg-dark-blue .wysiwyg__sidebar-heading {
        color: var(--white);
    }
    
    .wysiwyg__sidebar-links {
        margin-bottom: -12px;
    }
    
    .wysiwyg__sidebar-links .btn {
        margin-right: 25px;
        margin-bottom: 12px;
        background-image: var(--bright-blue-linear);
        display: block;
        width: fit-content;

        &:after {
            background-image: var(--bright-blue-linear);
        }
    }
}

.table-structure {
    margin-bottom: 30px;
}

.wysiwyg__sidebar.bg-light-blue {
    color: var(--dark-gray);

    p a:not(.btn),
    li a:not(.btn),
    h2 a:not(.btn),
    h3 a:not(.btn),
    h4 a:not(.btn),
    h5 a:not(.btn),
    h6 a:not(.btn),
    table a:not(.btn) {
        background: linear-gradient(90deg,#0071CE 0%,#004883 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-decoration-color: #0071CE;
    }
}

@media (min-width: 1200px) {
    .wysiwyg__sidebar {
        margin-top: 0;
    }

    .wysiwyg__sidebar.bg-light-blue {
        p a:not(.btn):hover,
        li a:not(.btn):hover,
        h2 a:not(.btn):hover,
        h3 a:not(.btn):hover,
        h4 a:not(.btn):hover,
        h5 a:not(.btn):hover,
        h6 a:not(.btn):hover,
        table a:not(.btn):hover {
            background: linear-gradient(90deg, #EC222E 0%, #AD0D15) 100%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}