/* No top-level block-gap */
.single > .wp-site-blocks > *,
.page > .wp-site-blocks > *,
.archive > .wp-site-blocks > *,
.search > .wp-site-blocks > *,
.error404 > .wp-site-blocks > *,
:has(+ .dvo-gapless) {
    margin-block-start: 0;
}

/* ------------------------------ */
/* Style Variants - Textures:
/*      - Node
/*      - Beacon Single
/*      - Circles
/*      - Radiating
/*      - Beacon Pattern
/*      - Roar Button
/* ------------------------------ */

/* All "connecting" textures: create a pseudo element
/* for the texture, so it can be rotated and scaled.
/*
/* The following textures "connect:"
/*      - Node
/*      - Beacon Single
/*      - Circles
/*      - Radiating
/*
/* We use attribute selectors here to capture both the
/* default and 'invert' versions of each texture.
/* ------------------------------ */
[class*=is-style-roar__texture-node],
[class*=is-style-roar__texture-beacon-single],
[class*=is-style-roar__texture-circles],
[class*=is-style-roar__texture-radiating] {
    /* Keep pattern inside row */
    overflow: hidden;

    /* Keep content above texture */
    & > * {
        position: relative;
        z-index: 2;
    }

    &::after,
    &[class*=is-style-roar__texture-circles]::before {
        /* Why use all these !importants??
        /* To override WP's use of the :after pseudo element in the block editor.
        /* Without overriding, the textures "jump" when editors mouse over the groups.
        /* See https://github.com/wordpress/gutenberg/issues/73754
        /* Note that while that issue is marked "closed," the issue persists.
        /* Should WP's outline implementation change in the future, we can remove the !importants. */
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top right;
        position: absolute;
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        bottom: auto !important;
        z-index: 1;
    }

    &[class*=invert]::after {
        transform: rotate(180deg) scaleX(-1);
        top: auto !important;
        bottom: 0 !important;
    }
}


/* Connecting Texture 1: Node
/* Standalone texture of a mesh network of nodes.
/* ------------------------------ */
[class*=is-style-roar__texture-node]::after {
    background-image: url(/wp-content/themes/roar/assets/images/texture-node-purple-large.svg);
    width: 25vw;
    height: 25vw;
}
/* Discourage the texture from impeding content at all screens sizes */
@media only screen and (max-width: 1100px) {
    [class*=is-style-roar__texture-node]::after {
        width: 30vw;
        height: 30vw;
    }
}
@media only screen and (max-width: 781px) {
    [class*=is-style-roar__texture-node]::after {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-purple-small.svg);
        }
}
@media only screen and (max-width: 500px) {
    [class*=is-style-roar__texture-node]::after {
        width: 40vw;
        height: 40vw;
    }
}


/* Connecting Texture 2: Beacon Single
/* Standalone large beacon icon.
/* ------------------------------ */
[class*=is-style-roar__texture-beacon-single]::after {
    background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-purple.svg);
    width: 28rem;
    height: 28rem;
}
/* Discourage the texture from impeding content at all screens sizes.
/* We scale using a precise size here instead of vw to ensure the
/* edges of the illustration always meet with no rounding gaps
/* when combining the "invert" modes. */
@media only screen and (max-width: 1100px) {
    [class*=is-style-roar__texture-beacon-single]::after {
        width: 20rem;
        height: 20rem;
    }
}
@media only screen and (max-width: 781px) {
    [class*=is-style-roar__texture-beacon-single]::after {
        width: 12rem;
        height: 12rem;
    }
}
@media only screen and (max-width: 500px) {
    [class*=is-style-roar__texture-beacon-single]::after {
        width: 8rem;
        height: 8rem;
    }
}

/* Connecting Texture 3: Circles
/* Standalone concentric circles in opposite corners of group.
/* ------------------------------ */
[class*=is-style-roar__texture-circles]::after,
[class*=is-style-roar__texture-circles]::before {
    background-image: url(/wp-content/themes/roar/assets/images/texture-circles-purple.svg);
    width: 20vw;
    height: 20vw;
}
/* Since circles has TWO textures (one in each corner),
/* we leverage both pseudo elements. Duplicate selectors here
/* allow us to keep things organized in the scaffold above.  */
[class*=is-style-roar__texture-circles][class*=is-style-roar__texture-circles] {
    &::before {
        /* See the connecting pattern scaffold above
        /* for an explanation of all these gross !important declarations. */
        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: rotate(180deg);
    }
    &[class*=invert]::before {
        top: 0 !important;
        bottom: auto !important;
        transform: rotate(270deg);
    }
}
/* Keep definition in the texture on small screens */
@media only screen and (max-width: 500px) {
    [class*=is-style-roar__texture-circles]::after,
    [class*=is-style-roar__texture-circles]::before {
        width: 30vw;
        height: 30vw;
    }
}

/* Connecting Texture 4: Radiating */
/* Single wave radiating icon.
/* ------------------------------ */
[class*=is-style-roar__texture-radiating]::after {
    background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-purple.svg);
    width: 20vw;
    height: 20vw;
}
/* Keep definition in the texture on small screens */
@media only screen and (max-width: 500px) {
    [class*=is-style-roar__texture-radiating]::after {
        width: 30vw;
        height: 30vw;
    }
}


/* Beacon PATTERN Texture
/* NOT an invertable/connecting texture.
/* A repeating beacon graphic on the group's left side
/* ------------------------------ */
.is-style-roar__texture-beacon-pattern {

    background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-purple.svg);
    background-repeat: repeat-y;
    background-position: top left;
}
@media only screen and (max-width: 860px) {
    .is-style-roar__texture-beacon-pattern {
        background-size: var(--wp--custom--layout--beacon-pattern-small-screen-size);
    }
}


/* Roar Button Texture */
/* NOT an invertable/connecting texture.
/* A photo (png) of the actual roar button in the bottom right */
/* May be combined with other styles that use the pseudo element textures. */
[class*=-roar-button] {
    --roar-texture-button-size: 14%;

    background-image: url(/wp-content/themes/roar/assets/images/texture-roar-button.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: var(--roar-texture-button-size);

    /* Combine with gradient backgrounds */
    /* Importants because WP is aggressive with them. */
    &.has-roar-purple-to-white-gradient-background {
        background-image: url(/wp-content/themes/roar/assets/images/texture-roar-button.png), var(--wp--preset--gradient--roar-purple-to-white) !important;
    }
    &.has-white-to-roar-purple-gradient-background {
        background-image: url(/wp-content/themes/roar/assets/images/texture-roar-button.png), var(--wp--preset--gradient--white-to-roar-purple) !important;
    }
    &.has-white-to-roar-purple-gradient-background,
    &.has-roar-purple-to-white-gradient-background {
        background-repeat: no-repeat !important;
        background-position: bottom right !important;
        background-size: var(--roar-texture-button-size), cover !important;
    }
}

/* Combine Roar Button with Beacon Pattern option */
.is-style-roar__texture-beacon-pattern-roar-button {
    background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-purple.svg), url(/wp-content/themes/roar/assets/images/texture-roar-button.png);
    background-repeat: repeat-y, no-repeat;
    background-position: top left, bottom right;
    background-size: auto, var(--roar-texture-button-size);

     /* Importants because WP is aggressive with them. */
    &.has-roar-purple-to-white-gradient-background {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-purple.svg), url(/wp-content/themes/roar/assets/images/texture-roar-button.png), var(--wp--preset--gradient--roar-purple-to-white) !important;
    }
    &.has-white-to-roar-purple-gradient-background {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-purple.svg), url(/wp-content/themes/roar/assets/images/texture-roar-button.png), var(--wp--preset--gradient--white-to-roar-purple) !important;
    }
    &.has-white-to-roar-purple-gradient-background,
    &.has-roar-purple-to-white-gradient-background {
        background-repeat: repeat-y, no-repeat, no-repeat !important;
        background-position: top left, bottom right, bottom right !important;
        background-size: auto, var(--roar-texture-button-size), cover !important;
    }
}
@media only screen and (max-width: 860px) {
    .is-style-roar__texture-beacon-pattern-roar-button {
        background-size: var(--wp--custom--layout--beacon-pattern-small-screen-size), var(--roar-texture-button-size);
        &.has-white-to-roar-purple-gradient-background,
        &.has-roar-purple-to-white-gradient-background {
            background-size: var(--wp--custom--layout--beacon-pattern-small-screen-size), var(--roar-texture-button-size), cover !important;
        }
    }
}


/* ------------------------------------------------------------- */
/* End of Group Texture Styles



/* ------------------------------ */
/* Style Variant: Logo Grid
/* ------------------------------ */

.is-style-roar__logo-grid {
    align-items: center;
}

.is-style-roar__logo-grid figure {
    text-align: center;
}

@media only screen and (max-width: 781px) {
    .is-style-roar__logo-grid {
        /* Always go to two columns on small screens, regardless of editor settings */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ------------------------------ */
/* Style Variant: Highlight
/* ------------------------------ */
.is-style-roar__group-highlight {
    background-color: var(--wp--custom--highlight--color-background-default);
    padding: var(--wp--custom--highlight--padding);
    border-radius: var(--wp--custom--highlight--border-radius);
    backdrop-filter: blur(3px);
    &.roar__stat {
        background-color: var(--wp--custom--highlight--color-background-stat);
    }
}

/* ------------------------------ */
/* Style Variant: Highlight Grid
/* ------------------------------ */
.is-style-roar__group-highlight-grid.is-layout-grid {
    gap: var(--wp--preset--spacing--four-x-large);

    .is-style-roar__group-highlight {
        background-color: var(--wp--preset--color--neutral-50);

        h1, h2, h3, h4, h5, h6 {
            font-size: var(--wp--preset--font-size--heading-six);
            color: var(--wp--preset--color--cobalt-600);
        }
    }
}


/* ------------------------------ */
/* Image / Industry Routing
/* ------------------------------ */
.roar__image-routing.is-layout-grid {
    gap: var(--wp--preset--spacing--four-x-large);
}

.roar__query-industry-routing,
.roar__image-routing {
    ul.wp-block-post-template {
        gap: var(--wp--preset--spacing--four-x-large);
    }

    figure.wp-block-post-featured-image {
        margin-bottom: var(--wp--preset--spacing--extra-large);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: var(--wp--preset--spacing--extra-large);
        margin-bottom: 0;
    }

    .wp-block-post-excerpt {
        margin-top: 0;
    }
}

/* ------------------------------ */
/* Responsive Behavior for Grids
/* ------------------------------ */
/* Importants to override WP's very-specific selectors for grid layouts,
/* which are sadly not responsive.   */
@media only screen and (max-width: 1000px) {
    .is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media only screen and (max-width: 500px) {
    .is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ------------------------------ */
/* Responsive Iframe Container
/* ------------------------------ */

.wp-block-group.roar__responsive-iframe {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* 16:9 Aspect Ratio */
    padding-top: 56.25%;
}

.wp-block-group.roar__responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* Background color helps editors see the scaled iframe in the block editor */
.wp-block-group.roar__responsive-iframe[class*="block-editor"] {
    background-color: var(--wp--preset--color--neutral-100);
}


/* ------------------------------ */
/* Hero Patterns
/* ------------------------------ */

/* Full Width Hero: 1 column with headline, text, and image */
.roar__hero-full-width {
    background-image: url(/wp-content/themes/roar/assets/images/texture-node-hero-full-width.svg), var(--wp--preset--gradient--roar-purple-to-white);
    background-position: top left;
    background-repeat: no-repeat;
}

/* Two Column Simple Hero: 2 col text + image, simpler than the other 2-col hero */
.roar__hero-two-column-simple {
    background-image: url(/wp-content/themes/roar/assets/images/texture-node-hero-two-column-simple.svg), var(--wp--preset--gradient--roar-purple-to-white);
    background-position: top left;
    background-repeat: no-repeat;
    overflow-x: hidden;

    .wp-block-column:first-child {
        padding-top: var(--wp--preset--spacing--ten-x-large-no-scaling);
        padding-bottom: var(--wp--preset--spacing--ten-x-large);
    }
}

/* Two Column Complex Hero: like the simple version,
/* but with a fancier image treatment
/* and support for additional child rows. */
.roar__hero-two-column-complex {
    background-image: var(--wp--preset--gradient--roar-purple-to-white);
    background-repeat: no-repeat;
    overflow: hidden;
    
    /* Specifically select only the first "row," since this hero
    /* needs to support additional rows below the first,
    /* allowing the node pattern treatment to flow across content. */
    & > .wp-block-columns:first-child {
        .wp-block-column:first-child {
            padding-top: var(--wp--preset--spacing--ten-x-large-no-scaling);
            padding-bottom: var(--wp--preset--spacing--ten-x-large);

            .wp-block-button.is-style-outline .wp-block-button__link {
                background-color: white;
                &:hover {
                    background-color: var(--wp--custom--color-semantic--button-background-hover);
                }
            }

            & > * {
                z-index: 10;
                position: relative;
            }
        }
        .wp-block-column:last-child {
            position: relative;
            & > * {
                z-index: 2;
                position: relative;
            }
            &::after {
                content: '';
                position: absolute;
                z-index: 3;
                right: calc(var(--wp--style--root--padding-right) * -1);
                top: 89%;
                width: 98vw;
                height: 30vw;
                background-image: url(/wp-content/themes/roar/assets/images/texture-node-hero-two-column-complex.svg);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: top right;
            }
        }
    }
}
/* Adjust position & scale of the layered node treatment,
/* Until it disappears entirely on small screens. */
@media only screen and (min-width: 1800px) {
    .roar__hero-two-column-complex>.wp-block-columns:first-child .wp-block-column:last-child::after {
        top: 70%;
    }
}
@media only screen and (min-width: 1600px) {
    .roar__hero-two-column-complex > .wp-block-columns:first-child .wp-block-column:last-child::after {
        width: 120vw;
        height: 40vw;
        left: -50vw;
        right: auto;
        top: 75%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .roar__hero-two-column-complex>.wp-block-columns:first-child .wp-block-column:last-child::after {
        top: 80%;
    }
}
@media only screen and (min-width: 782px) and (max-width: 999px) {
    .roar__hero-two-column-complex>.wp-block-columns:first-child .wp-block-column:last-child::after {
        top: 105%;
    }
}
@media only screen and (max-width: 781px) {
.roar__hero-two-column-complex > .wp-block-columns:first-child .wp-block-column:last-child::after,
.roar__hero-two-column-complex > .wp-block-columns:first-child .wp-block-column:first-child::after {
        display: none;
    }
}

/* In both hero column versions, the image in col 2 bleeds off the right edge.
/* We attach the image to edge of page on all screen sizes above the stackpoint.
/* Do the same with the background texture on the Complex hero (the ::afters here) */
@media screen and (min-width: 782px) and (max-width: 1600px) {
    .roar__hero-two-column-simple,
    .roar__hero-two-column-complex {
        .roar__hero-image {
            margin-right: calc(var(--wp--style--root--padding-right) * -1);
        }
    }
}
@media only screen and (min-width: 1000px) {
    .roar__hero-two-column-simple,
    .roar__hero-two-column-complex {
        .roar__hero-image {
            margin-right: -20vw;
        }
    }
}

/* When layout stacks and image no longer bleeds off the right edge,
/* All corners should be rounded. */
@media only screen and (max-width: 781px) {
    .roar__hero-two-column-simple,
    .roar__hero-two-column-complex {
        .roar__hero-image img {
            border-top-left-radius: var(--wp--preset--border-radius--medium);
            border-top-right-radius: var(--wp--preset--border-radius--medium);
            border-bottom-left-radius: var(--wp--preset--border-radius--medium);
            border-bottom-right-radius: var(--wp--preset--border-radius--medium);
            /* Without the bleed edge or padding from the text column,
            /* the image also needs bottom padding or it touches the next row. */
            padding-bottom: var(--wp--preset--spacing--ten-x-large);
        }
    }
}

/* All three hero patterns share the same mobile treatment for background textures */
@media only screen and (max-width: 781px) {
    .roar__hero-full-width,
    .roar__hero-two-column-simple,
    .roar__hero-two-column-complex {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-hero-full-width-top-mobile.svg), var(--wp--preset--gradient--roar-purple-to-white);
        background-position: top center;
        background-size: contain;
    }
}


/* ------------------------------------------------ */
/* Section Styling / Color Theming
/* Modify children when parent group gets a bg color
/* ------------------------------------------------ */

/* On-dark behavior: automatically swap to light text */
.has-roar-purple-950-background-color,
.has-roar-purple-900-background-color,
.has-roar-purple-800-background-color,
.has-roar-purple-700-background-color,
.has-roar-purple-600-background-color,
.has-roar-purple-500-background-color,
.has-cobalt-950-background-color,
.has-cobalt-900-background-color,
.has-cobalt-800-background-color,
.has-cobalt-700-background-color,
.has-cobalt-600-background-color,
.has-cobalt-500-background-color,
.has-mint-950-background-color,
.has-mint-900-background-color,
.has-mint-800-background-color,
.has-mint-700-background-color,
.has-mint-600-background-color,
.has-neutral-950-background-color,
.has-neutral-900-background-color,
.has-neutral-800-background-color,
.has-neutral-700-background-color,
.has-neutral-600-background-color,
.has-neutral-500-background-color {
    color: var(--wp--preset--color--neutral-white);

    h1, h2, h3, h4, h5, h6 {
        color: var(--wp--preset--color--neutral-white);
    }

    .wp-block-accordion-item {
        border-bottom-color: var(--wp--preset--color--neutral-white);
    }

    .is-style-roar__paragraph-fine-print {
        color: var(--wp--preset--color--neutral-white);
    }

    .wp-block-button .wp-block-button__link {
        color: var(--wp--custom--color-semantic--text-body);
        border-color: var(--wp--preset--color--neutral-white);
        background-color: var(--wp--preset--color--neutral-white);
        &:hover {
            color: var(--wp--preset--color--neutral-white);
            background-color: transparent;
        }
    }

    .wp-block-button.is-style-outline .wp-block-button__link {
        color: var(--wp--preset--color--neutral-white);
        border-color: var(--wp--preset--color--neutral-white);
        background-color: transparent;
        &:hover {
            color: var(--wp--custom--color-semantic--text-body);
            background-color: var(--wp--preset--color--neutral-white);
            border-color: var(--wp--preset--color--neutral-white);
        }
    }

    .wp-block-cb-carousel-v2 .cb-button-next,
    .wp-block-cb-carousel-v2 .cb-button-prev {
        border-color: var(--wp--preset--color--neutral-white);
    }
    .wp-block-cb-carousel-v2 .cb-button-next::after {
        background-image: url(/wp-content/themes/roar/assets/images/icon-arrow-right-neutral-light.svg);
    }
    .wp-block-cb-carousel-v2 .cb-button-prev::after {
        background-image: url(/wp-content/themes/roar/assets/images/icon-arrow-left-neutral-light.svg);
    }
}

/* Roar Purple */
/* ------------------------------ */
.has-background[class*=has-roar-purple] {
    /* Add styles here for all purple BGs.
    /* They currently use the default purple texture files, hence this blank section. */
}
/* Roar Purple Lights */
.has-roar-purple-50-background-color,
.has-roar-purple-100-background-color,
.has-roar-purple-200-background-color,
.has-roar-purple-300-background-color,
.has-roar-purple-400-background-color {
    a:where(:not(.wp-element-button)) {
        color: var(--wp--custom--color-theming--on-roar-purple-light--link);
        &:hover {
            color: var(--wp--custom--color-theming--on-roar-purple-light--link-hover);
        }
    }
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-roar-purple-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-roar-purple-light--feature-list-headline);
        }
    }
    &.is-style-roar__group-highlight,
    & .is-style-roar__group-highlight,
    &.is-style-roar__quote-highlight,
    & .is-style_roar__quote-highlight,
    & .is-style-roar__group-highlight-grid.is-layout-grid .is-style-roar__group-highlight {
        background-color: var(--wp--custom--color-theming--on-roar-purple-light--highlight);
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-roar-purple-light--highlight-headline);
        }
    }
    & [class*=is-style-roar__paragraph-stat] {
        color: var(--wp--custom--color-theming--on-roar-purple-light--stat);
    }
    .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-roar-purple-light--accordion-icon-plus);
    }
    .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-roar-purple-light--accordion-icon-minus);
    }
}
/* Roar Purple Darks */
.has-roar-purple-500-background-color,
.has-roar-purple-600-background-color,
.has-roar-purple-700-background-color,
.has-roar-purple-800-background-color,
.has-roar-purple-900-background-color,
.has-roar-purple-950-background-color {
    a:where(:not(.wp-element-button)) {
        color: var(--wp--custom--color-theming--on-roar-purple-dark--link);
        &:hover {
            color: var(--wp--custom--color-theming--on-roar-purple-dark--link-hover);
        }
    }
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-roar-purple-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-roar-purple-dark--feature-list-headline);
        }
    }
    &.is-style-roar__group-highlight,
    & .is-style-roar__group-highlight,
    &.is-style-roar__quote-highlight,
    & .is-style_roar__quote-highlight,
    & .is-style-roar__group-highlight-grid.is-layout-grid .is-style-roar__group-highlight {
        background-color: var(--wp--custom--color-theming--on-roar-purple-dark--highlight);
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-roar-purple-dark--highlight-headline);
        }
    }
    & [class*=is-style-roar__paragraph-stat] {
        color: var(--wp--custom--color-theming--on-roar-purple-dark--stat);
    }
    .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-roar-purple-dark--accordion-icon-plus);
    }
    .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-roar-purple-dark--accordion-icon-minus);
    }
}


/* Cobalt */
/* ------------------------------ */
.has-background[class*=has-cobalt] {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-cobalt-large.svg);
        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-cobalt-small.svg);
        }
    }
    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-cobalt.svg);
    }
    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-cobalt.svg);
    }
    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-cobalt.svg);
    }
    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-cobalt.svg);
    }
}
/* Cobalt Lights */
.has-cobalt-50-background-color,
.has-cobalt-100-background-color,
.has-cobalt-200-background-color,
.has-cobalt-300-background-color,
.has-cobalt-400-background-color {
    a:where(:not(.wp-element-button)) {
        color: var(--wp--custom--color-theming--on-cobalt-light--link);
        &:hover {
            color: var(--wp--custom--color-theming--on-cobalt-light--link-hover);
        }
    }
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-cobalt-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-cobalt-light--feature-list-headline);
        }
    }
    &.is-style-roar__group-highlight,
    & .is-style-roar__group-highlight,
    &.is-style-roar__quote-highlight,
    & .is-style_roar__quote-highlight,
    & .is-style-roar__group-highlight-grid.is-layout-grid .is-style-roar__group-highlight {
        background-color: var(--wp--custom--color-theming--on-cobalt-light--highlight);
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-cobalt-light--highlight-headline);
        }
    }
    & [class*=is-style-roar__paragraph-stat] {
        color: var(--wp--custom--color-theming--on-cobalt-light--stat);
    }
    .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-cobalt-light--accordion-icon-plus);
    }
    .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-cobalt-light--accordion-icon-minus);
    }
}
/* Cobalt Darks */
.has-cobalt-500-background-color,
.has-cobalt-600-background-color,
.has-cobalt-700-background-color,
.has-cobalt-800-background-color,
.has-cobalt-900-background-color,
.has-cobalt-950-background-color {
    a:where(:not(.wp-element-button)) {
        color: var(--wp--custom--color-theming--on-cobalt-dark--link);
        &:hover {
            color: var(--wp--custom--color-theming--on-cobalt-dark--link-hover);
        }
    }
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-cobalt-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-cobalt-dark--feature-list-headline);
        }
    }
    &.is-style-roar__group-highlight,
    & .is-style-roar__group-highlight,
    &.is-style-roar__quote-highlight,
    & .is-style_roar__quote-highlight,
    & .is-style-roar__group-highlight-grid.is-layout-grid .is-style-roar__group-highlight {
        background-color: var(--wp--custom--color-theming--on-cobalt-dark--highlight);
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-cobalt-dark--highlight-headline);
        }
    }
    & [class*=is-style-roar__paragraph-stat] {
        color: var(--wp--custom--color-theming--on-cobalt-dark--stat);
    }
    .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-cobalt-dark--accordion-icon-plus);
    }
    .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-cobalt-dark--accordion-icon-minus);
    }
}

/* Mint */
/* ------------------------------ */
.has-background[class*=has-mint] {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-mint-large.svg);

        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-mint-small.svg);
        }
    }

    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-mint.svg);
    }

    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-mint.svg);
    }

    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-mint.svg);
    }

    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-mint.svg);
    }
}
/* Mint Lights */
.has-mint-50-background-color,
.has-mint-100-background-color,
.has-mint-200-background-color,
.has-mint-300-background-color,
.has-mint-400-background-color {
    a:where(:not(.wp-element-button)) {
        color: var(--wp--custom--color-theming--on-mint-light--link);
        &:hover {
            color: var(--wp--custom--color-theming--on-mint-light--link-hover);
        }
    }
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-mint-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-mint-light--feature-list-headline);
        }
    }
    &.is-style-roar__group-highlight,
    & .is-style-roar__group-highlight,
    &.is-style-roar__quote-highlight,
    & .is-style_roar__quote-highlight,
    & .is-style-roar__group-highlight-grid.is-layout-grid .is-style-roar__group-highlight {
        background-color: var(--wp--custom--color-theming--on-mint-light--highlight);
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-mint-light--highlight-headline);
        }
    }
    & [class*=is-style-roar__paragraph-stat] {
        color: var(--wp--custom--color-theming--on-mint-light--stat);
    }
    .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-mint-light--accordion-icon-plus);
    }
    .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-mint-light--accordion-icon-minus);
    }
}
/* Mint Darks */
.has-mint-500-background-color,
.has-mint-600-background-color,
.has-mint-700-background-color,
.has-mint-800-background-color,
.has-mint-900-background-color,
.has-mint-950-background-color {
    a:where(:not(.wp-element-button)) {
        color: var(--wp--custom--color-theming--on-mint-dark--link);
        &:hover {
            color: var(--wp--custom--color-theming--on-mint-dark--link-hover);
        }
    }
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-mint-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-mint-dark--feature-list-headline);
        }
    }
    &.is-style-roar__group-highlight,
    & .is-style-roar__group-highlight,
    &.is-style-roar__quote-highlight,
    & .is-style_roar__quote-highlight,
    & .is-style-roar__group-highlight-grid.is-layout-grid .is-style-roar__group-highlight {
        background-color: var(--wp--custom--color-theming--on-mint-dark--highlight);
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-mint-dark--highlight-headline);
        }
    }
    & [class*=is-style-roar__paragraph-stat] {
        color: var(--wp--custom--color-theming--on-mint-dark--stat);
    }
    .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-mint-dark--accordion-icon-plus);
    }
    .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-mint-dark--accordion-icon-minus);
    }
}

/* Neutral Light Backgrounds */
/* ------------------------------ */
.has-neutral-50-background-color,
.has-neutral-100-background-color,
.has-neutral-200-background-color,
.has-neutral-300-background-color {

    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-dark-large.svg);

        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-dark-small.svg);
        }
    }

    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-neutral-dark.svg);
    }

    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-neutral-dark.svg);
    }

    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-neutral-dark.svg);
    }

    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-neutral-dark.svg);
    }

    /* End Neutral Light Textures */
    /* Begin theming of child elements */
    a:where(:not(.wp-element-button)) {
        color: var(--wp--custom--color-theming--on-neutral-light--link);
        &:hover {
            color: var(--wp--custom--color-theming--on-neutral-light--link-hover);
        }
    }

    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-neutral-light--icon);
    }

    &.roar__feature-list,
    & .roar__feature-list {
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-neutral-light--feature-list-headline);
        }
    }

    &.is-style-roar__group-highlight,
    & .is-style-roar__group-highlight,
    &.is-style-roar__quote-highlight,
    & .is-style_roar__quote-highlight,
    & .is-style-roar__group-highlight-grid.is-layout-grid .is-style-roar__group-highlight {
        background-color: var(--wp--custom--color-theming--on-neutral-light--highlight);
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-neutral-light--highlight-headline);
        }
    }

    & [class*=is-style-roar__paragraph-stat] {
        color: var(--wp--custom--color-theming--on-neutral-light--stat);
    }

    .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-neutral-light--accordion-icon-plus);
    }
    .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-neutral-light--accordion-icon-minus);
    }
}

/* Neutral Dark Backgrounds */
/* ------------------------------ */
.has-neutral-400-background-color,
.has-neutral-500-background-color,
.has-neutral-600-background-color,
.has-neutral-700-background-color,
.has-neutral-800-background-color,
.has-neutral-900-background-color,
.has-neutral-950-background-color {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-light-large.svg);

        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-light-small.svg);
        }
    }

    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-neutral-light.svg);
    }

    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-neutral-light.svg);
    }

    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-neutral-light.svg);
    }

    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-neutral-light.svg);
    }
    /* End Neutral Dark Textures */
    /* Begin theming of child elements */
    a:where(:not(.wp-element-button)) {
        color: var(--wp--custom--color-theming--on-neutral-dark--link);
        &:hover {
            color: var(--wp--custom--color-theming--on-neutral-dark--link-hover);
        }
    }

    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-neutral-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-neutral-dark--feature-list-headline);
        }
    }
    &.is-style-roar__group-highlight,
    & .is-style-roar__group-highlight,
    &.is-style-roar__quote-highlight,
    & .is-style_roar__quote-highlight,
    & .is-style-roar__group-highlight-grid.is-layout-grid .is-style-roar__group-highlight {
        background-color: var(--wp--custom--color-theming--on-neutral-dark--highlight);
        h1, h2, h3, h4, h5, h6 {
            color: var(--wp--custom--color-theming--on-neutral-dark--highlight-headline);
        }
    }
    & [class*=is-style-roar__paragraph-stat] {
        color: var(--wp--custom--color-theming--on-neutral-dark--stat);
    }

    .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-neutral-dark--accordion-icon-plus);
    }
    .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
        background-image: var(--wp--custom--color-theming--on-neutral-dark--accordion-icon-minus);
    }
}