/* Newsletter Sign-up */

/* General flex layout, single-column as base */
#mc_embed_shell #mc_embed_signup_scroll {
    display: flex;
    flex-direction: column;
    gap: var(--zero-point-five-spacer);
}
/* De-style everything first with no priority */
#mc_embed_shell input[type="email"],
#mc_embed_shell input[type="submit"] {
    appearance: none;
    background: none;
    padding: 0;
    margin: 0;
    border: 0;
    font: inherit;
    line-height: 1;
    width: fit-content;
    height: fit-content;
    border-radius: 0 !important;
    color: inherit;
}
/* Re-style selectively as a base */
#mc_embed_shell input[type="email"] {
    border-bottom: 1px solid;
}
#mc_embed_shell input[type="submit"] {
    border: 1px solid;
    padding: var(--zero-point-five-spacer);
}
/* Remove padding/margins on inline messages so that they fall back on flex settings */
#mc_embed_shell .mce_inline_error {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    color: inherit !important;
    width: 100%;
    font: inherit !important;
}
/* Default field group styles, basic */
#mc_embed_shell .mc-field-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--zero-point-five-spacer);
}

/* Gutenberg variations */
.wp-block-columns.is-style-padded-rules {
    border: 1px solid;
    gap: 0;
    .wp-block-column {
        position: relative;
        padding: var(--two-spacer);
        @media screen and (min-width: 782px) {
            &&:not(:last-child)::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 1px;
                height: 100%;
                background-color: var(--wp--preset--color--black);
            }
        }
        @media screen and (max-width: 781px) {
            &&:not(:last-child)::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: var(--wp--preset--color--black);
            }
        }
    }
}
.wp-block-separator.is-style-double-divider {
    border: none !important;
    border: 0;
    padding: 1px;
    background-color: white;
    mix-blend-mode: darken;
    filter: saturate(0) blur(1px) contrast(100);
    background-image: url(../img/noise.png);
    background-size: 100%;
    background-repeat: repeat;
    max-width: var(--responsive--aligndefault-width) !important;
    width: var(--responsive--aligndefault-width) !important;
    margin-left: auto;
    margin-right: auto;
    &&::before {
        content: '';
        display: flex;
        width: 100%;
        border-top: 1.5px dashed var(--wp--preset--color--black)
    }
    &&::after {
        content: '';
        margin-top: 3px;
        display: flex;
        width: 100%;
        border-bottom: 1.5px dashed var(--wp--preset--color--black)
    }
    @media screen and (max-width: 781px) {
        max-width: var(--responsive--alignwide-width) !important;
        width: var(--responsive--alignwide-width) !important;
        margin-left: auto;
        margin-right: auto;
    }
}

.wp-block-image.is-style-in-left-margin {
    position: absolute;
    left: var(--two-spacer);
    width: calc((100vw - 760px)/2 - var(--four-spacer)) !important;
    transform: translateY(-50%);
    padding: 0 var(--four-spacer);
    @media screen and (max-width: 781px) {
        position: relative !important;
        left: 0 !important;
        width: auto !important;
        transform: translateY(0) !important;
        padding: 0 var(--two-spacer) !important;
        /* Block wasn't inheriting default blockGap on its own, pulling it in here */
        margin-block-start: var(--wp--style--block-gap) !important;
    }
}

.wp-block-image.is-style-in-right-margin {
    position: absolute;
    right: var(--two-spacer);
    width: calc((100vw - 760px)/2 - var(--four-spacer)) !important;
    transform: translateY(-50%);
    padding: 0 var(--four-spacer);
    @media screen and (max-width: 781px) {
        position: relative !important;
        left: 0 !important;
        width: auto !important;
        transform: translateY(0) !important;
        padding: 0 var(--two-spacer) !important;
        /* Block wasn't inheriting default blockGap on its own, pulling it in here */
        margin-block-start: var(--wp--style--block-gap) !important;
    }
}