/* 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);
    line-height: 1;
}
/* De-style everything first with no priority */
#mc_embed_shell input[type="email"],
#mc_embed_shell input[type="text"],
#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"],
#mc_embed_shell input[type="text"] {
    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;
    font-size: var(--wp--preset--font-size--small) !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);
}
/* Checkboxes */
#mc_embed_shell input[type="checkbox"] {
    + label {
        cursor: pointer;
        position: relative;
        display: flex !important;
        align-items: baseline;
        &&::before {
            content: '';
            top: 0;
            left: 0;
            display: flex;
            width: 0.875rem;
            min-width: 0.875rem;
            height: 0.875rem;
            min-height: 0.875rem;
            border-radius: 50%;
            border: 1px solid var(--foreground);
            margin-right: var(--one-spacer);
        }
        &&:hover {
            &&::before {
                background-color: var(--foreground-tint);
            }
        }
    }
    &&:checked {
        + label {
            &&::before {
                background-color: var(--foreground) !important;
            }
        }
    }
}
#mc_embed_shell .input-group * {
    margin: 0 !important;
    padding: 0 !important;
}
.mc-field-group.input-group {
    display: grid !important;
    grid-template-columns: 1 !important;
    gap: var(--two-spacer) !important;
    width: 100% !important;
    padding: 0 !important;
}
#mc_embed_shell input[type="submit"] {
    background-color: transparent !important;
    border-radius: 130px !important;
    border-color: inherit !important;
    border-width: 1px !important;
    border-style: solid !important;
    color: inherit !important;
    font-family: 'Aktiv Extended', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    padding-top: 10px !important;
    padding-right: 12px !important;
    padding-bottom: 10px !important;
    padding-left: 12px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}
#mce-responses {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    #mce-error-response,
    #mce-success-response {
        font-family: var(--wp--preset--font-family--aktiv-ext) !important;
        font-size: var(--wp--preset--font-size--small) !important;
        margin: var(--three-spacer) 0 0 0 !important;
        padding: var(--one-spacer) !important;
        width: fit-content !important;
        color: var(--foreground) !important;
        border: 1px solid !important;
        line-height: 1.4 !important;
    }
}

/* Custom variations */

/* —> Button(s) */

.wp-block-button.is-style-outline-w-arrow .wp-block-button__link.wp-element-button {
    background-color: transparent !important;
    color: inherit !important;
}

.wp-block-button.is-style-no-outline-w-arrow .wp-block-button__link.wp-element-button {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: 0 !important;
}

.rounded-link.arrow-after::after,
.wp-block-button.is-style-outline-w-arrow .wp-block-button__link.wp-element-button::after,
.wp-block-button.is-style-no-outline-w-arrow .wp-block-button__link.wp-element-button::after {
    content: var(--arrow);
    margin-left: var(--one-spacer);
    margin-top: -4px;
    height: 12px;
}

/* -> Custom column rules */
.vertical-rules > *:not(:last-child),
.vertical-rules-grid > *,
.wp-block-columns:not(.is-style-no-rules):not(.is-style-special-rules) .wp-block-column:not(:last-child) {
    position: relative;
}
.vertical-rules > *:not(:last-child)::after,
.vertical-rules-grid > *::after,
.wp-block-columns:not(.is-style-no-rules):not(.is-style-special-rules) .wp-block-column:not(:last-child)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: calc(-1 * var(--two-spacer));
    background-color: var(--foreground);
}
@media screen and (min-width: 782px) {
    .vertical-rules > *:not(:last-child)::after,
    .wp-block-columns:not(.is-style-no-rules):not(.is-style-special-rules) .wp-block-column:not(:last-child)::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: unset;
        right: calc(-1 * var(--two-spacer));
        bottom: unset;
        background-color: var(--foreground);
    }
    .vertical-rules-grid > *:nth-child(even)::before {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: unset;
        left: calc(-1 * var(--two-spacer));
        bottom: unset;
        background-color: var(--foreground);
    }
    /* If the grid has an odd number of items on the two-col. display, turn off the last item's ::after styles */
    .vertical-rules-grid:has(a:last-child:nth-child(odd)) > a:last-child::after {
        content: none;
    }
    /* Add a full-width border back in using a psuedo class on the container instead */
    .vertical-rules-grid:has(a:last-child:nth-child(odd)) {
        position: relative;
    }
    .vertical-rules-grid:has(a:last-child:nth-child(odd))::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        left: 0;
        bottom: calc(-1 * var(--two-spacer));
        background-color: var(--foreground);
    }
    /* If the grid has an even number of items on the two-col. display, turn off the last two items' ::after styles */
    .vertical-rules-grid:has(a:last-child:nth-child(even)) > a:last-child::after,
    .vertical-rules-grid:has(a:last-child:nth-child(even)) > a:nth-last-child(2)::after {
        content: none;
    }
    /* Add a full-width border back in using a psuedo class on the container instead */
    .vertical-rules-grid:has(a:last-child:nth-child(even)) {
        position: relative;
    }
    .vertical-rules-grid:has(a:last-child:nth-child(even))::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        left: 0;
        bottom: calc(-1 * var(--two-spacer));
        background-color: var(--foreground);
    }
    /* If grid-col-6 item in grid w/ vertical rules,
       make the last item have a right-side rule *if* odd */
    @media screen and (min-width: 782px) {
        .vertical-rules-grid:has(a.grid-md-col-6:last-child:nth-child(odd)) a.grid-md-col-6:last-child:nth-child(odd)::before {
            content: '';
            position: absolute;
            width: 1px;
            height: 100%;
            right: 0;
            right: calc(-1 * var(--two-spacer));
            background-color: var(--foreground);
        }
    }
}

/* —> Custom vertical rules for just two-col. + widths */
@media screen and (min-width: 782px) {
    .vertical-rules-md > *:not(:last-child) {
        position: relative;
    }
    .vertical-rules-md > *:not(:last-child)::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        right: calc(-1 * var(--two-spacer));
        background-color: var(--foreground);
    }
}

/* —> Custom rule just for 2-col. default layouts to ensure equal widths */
.wp-block-columns:not(.is-style-no-rules):not(.is-style-special-rules):has(> :nth-child(1):nth-last-child(2)) .wp-block-column {
    flex-basis: 50%;
}

/* Custom vertical rules for group elements inside of column blocks with 'Special Rules' style variation */
@media screen and (min-width: 782px) {
    /* —> Override default 'block' display so that we can use 'flex-grow' on the inner group block */
    .wp-block-columns.is-style-special-rules > .wp-block-column {
        display: flex;
        flex-direction: column;
    }
    /* —> Since 'flex' makes elements like hr's have zero width, specifiy 100% as needed */
    .wp-block-columns.is-style-special-rules > .wp-block-column hr {
        width: 100%;
    }
    /* —> Add a 'relative' position to the group item that will get the special vertical rules */
    .wp-block-columns.is-style-special-rules > .wp-block-column > .wp-block-group {
        position: relative;
        flex-grow: 1;
    }
    /* —> For every column *but* the last one, add a rule via 'after' psuedo element */
    .wp-block-columns.is-style-special-rules > .wp-block-column:not(:last-child) > .wp-block-group::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        right: calc(-1 * var(--two-spacer));
        background-color: var(--foreground);
    }
}

/* Special Event Banner */
.special-event-banner > a > div {
    aspect-ratio: 2/3;
}
@media screen and (min-width: 782px) {
    .special-event-banner > a > div {
        aspect-ratio: 3/1;
    }
}
.special-event-banner img {
    opacity: 0.25;
    filter: saturate(0);
}
.special-event-banner > a > div > div {
    z-index: 999;
}
@media screen and (max-width: 479px) {
    .special-event-banner h3 {
        font-size: 1.3125rem !important;

    }
}

/* Post Carousel */
div.post-carousel {
    .swiper-pagination {
        z-index: 999;
        width: fit-content !important;
        height: fit-content !important;
        top: unset;
        left: calc(50% + var(--two-spacer) + var(--one-point-five-spacer));
        right: unset;
        bottom: var(--one-point-five-spacer);
        @media screen and (max-width: 781px) {
            left: var(--one-point-five-spacer);
        }
        .swiper-pagination-bullet {
            margin: 0 !important;
            width: var(--one-point-five-spacer);
            height: var(--one-point-five-spacer);
            border: 1px solid white !important;
            opacity: 1 !important;
            background-color: transparent !important;
        }
        .swiper-pagination-bullet-active {
            background-color: white !important;
        }
    }
    @media screen and (max-width: 379px) {        
        .button-next svg,
        .button-prev svg {
            height: 30px;
        }
    }
}
/* ^ */

/* Justify content in column (or group!) block vertically */
.wp-block-column.is-style-justify-content,
.wp-block-group.is-style-justify-content-fill {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* For groups, also fill the available height */
.wp-block-group.is-style-justify-content-fill {
    height: 100%;
}
/* ^ */

/* Add a group style that lets the margin shrink to 20px/two-spacer
—> Think: first block underneath above-fold, but should feel like part of it rather than having a larger gap */
.wp-block-group.is-style-mt-2 {
    margin-top: var(--two-spacer) !important;
}
/* ^ */

/* Style default details block */
.wp-block-details {
    summary {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        font-family: var(--wp--preset--font-family--aktiv);
        line-height: 1.15;
        font-size: 2.25rem;
        font-weight: 100;
        &::marker {
            content: '';
        }
        &::after {
            content: '';
            width: 2.5rem;
            height: 2.5rem;
            background-image: var(--details-closed);
            background-size: contain;
            background-position: top right;
            background-repeat: no-repeat;
        }
    }
    &[open] {
        summary {
            &::after {
                background-image: var(--details-opened);
            };
        };
    }
}

i, em {
    font-family: inherit;
    font-style: italic;
    font-weight: 300;
}

.has-100-font-weight {
    i, em {
        font-weight: 100 !important;
    }
}

/* Mindbody fix */
.modal-close:hover {
    opacity: 1 !important;
}

/*  */
@media screen and (max-width: 479px) {
    :root :where(.wp-block-button .wp-block-button__link) {
        font-size: 0.75rem !important;
    }
}