/* ----------------------------- */
/* containers */

.wp-site-blocks {
    margin: 0 auto;
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}
:root :where(.is-layout-flow) > * {
    margin-block-start: 0;
}

/* ----------------------------- */
/* section gutters */

/* Full-bleed section patterns center their content but add no side padding, so on
   narrow viewports the content runs flush to the window edge. Give those sections a
   horizontal gutter: the background still paints edge-to-edge (padding is inside the
   border box) while the inner content insets. On desktop the padding is swallowed by
   the content cap's auto-margins, so wide renders are unchanged.

   This is the DEMOTED fallback for already-inserted (old-markup) content; the pattern
   files also set this natively. :where() = specificity 0, so any client padding edit,
   and the pattern's own inline padding, always win. Loaded in the editor canvas too
   (add_editor_style) → front/editor parity. */
:root {
    --bmg-section-gutter: 1rem;
}

:where(
        .bmg-intro-split,
        .bmg-welcome-intro,
        .bmg-look-inside,
        .bmg-join-cta,
        .bmg-program-cards,
        .bmg-floating-imgs-and-content,
        .bmg-faq,
        .bmg-blog-cards,
        .bmg-side-tabs,
        .bmg-event-cards,
        .bmg-hover-cards,
        .bmg-map-location,
        .bmg-testimonials,
        .bmg-partners,
        .has-chevron-background,
        .bmg-button-cards-section,
        .bmg-y-difference,
        .bmg-sport-cards
    ) {
    padding-inline: var(--bmg-section-gutter);
}

/* Mobile rhythm: sections ship 72px block padding inline in their markup, which
   reads oversized on a phone. Clamp it below 560px. !important is required to
   beat the inline style — an accepted media-query exception (see migration plan);
   desktop/editor edits are untouched. */
@media (max-width: 560px) {
    :where(
            .bmg-intro-split,
            .bmg-welcome-intro,
            .bmg-look-inside,
            .bmg-join-cta,
            .bmg-program-cards,
            .bmg-floating-imgs-and-content,
            .bmg-faq,
            .bmg-blog-cards,
            .bmg-side-tabs,
            .bmg-event-cards,
            .bmg-hover-cards,
            .bmg-map-location,
            .bmg-testimonials,
            .bmg-partners,
            .bmg-button-cards-section,
            .bmg-y-difference,
            .bmg-sport-cards
        ) {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
}

/* ----------------------------- */
/* text */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    letter-spacing: var(--letter-spacing-lg);
}

body,
body p,
body li {
    letter-spacing: var(--letter-spacing-sm);
}

.has-body-font-family {
    font-family: var(--font-body);
}
.has-heading-font-family {
    font-family: var(--font-heading);
}

/* accessible visually-hidden text (standard WP utility) */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
    word-wrap: normal !important;
}

/* Editor canvas only: a couple of full-bleed sections whose flex content can run
   wider than the (sidebar-narrowed) editor canvas — clip so the canvas doesn't get
   a horizontal scrollbar. Inert on the front end (no .editor-styles-wrapper there). */
.editor-styles-wrapper .bmg-announcements,
.editor-styles-wrapper .bmg-event-cards {
    overflow-x: clip;
}

/* The event date/time block emits a month/day badge; it's only shown where a
   layout opts in (e.g. the event cards). Hidden by default everywhere else. */
.bmg-event-date-time__badge {
    display: none;
}

/* Pillar ticker: the markup ships a 40px gap between items but only 8px
   between a chevron and its label, so each » hugged the NEXT word (PP #1).
   Even both out to 24px (and match the loop seam) so the chevron sits centered
   between phrases. CSS-side so already-inserted tickers get it too. */
.bmg-ticker .ticker__group > .wp-block-group {
    gap: 24px;
}

.bmg-ticker .ticker__group > .wp-block-group > .wp-block-group {
    gap: 24px;
}

.bmg-ticker .ticker__group {
    padding-right: 24px;
}

/* Canonical YMCA chevron (the exact shape used by the ticker block) as a
   recolorable mask. Use for ALL decorative chevron accents — never hand-roll an
   SVG. Pattern: width/height a chevron box, background-color the fill you want,
   and -webkit-mask/mask: var(--bmg-chevron-mask) no-repeat center / contain.
   For a double "»" cluster, place two such elements (or two layered masks). */
:root {
    --bmg-chevron-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.48737 331.73077"><path d="m 185.30123,156.18301 -0.68,-1.19 -75.76,-134.220003 -1.32,-2.33 C 100.86123,6.8830065 88.461228,-0.16699349 75.111228,0.00300651 h -62.5 c -7.0499997,0.09 -12.68999971,5.86999999 -12.60999971,12.92000049 -0.03,2.14 0.49,4.25 1.51000001,6.13 L 77.771228,154.19301 c 7.2,12.63 7.31,28.1 0.3,40.84 l -66.3,117.59 c -1.02,1.87 -1.54,3.98 -1.51,6.11 -0.08,7.05 5.57,12.82 12.61,12.9 0,0 0,0 0,0 0,0 43.24,0.22 64.14,0 18.100002,-0.19 22.410002,-0.46 33.750002,-20.78 l 63.77,-113 1.19,-2.1 c 3.24,-5.93 4.88,-12.61 4.76,-19.37 0.04,-7.03 -1.73,-13.94 -5.15,-20.08"/></svg>');
}

/* two-tone heading accent — Option B headings are purple-dk (#5c2e91) with the
   accent word(s) wrapped in .bmg-accent-purple = purple-md (#92278f). On dark
   sections the heading base is white and the accent stays purple-md. */
:where(.bmg-accent-purple) {
    color: var(--primary-md);
}

/* Section eyebrow / kicker — Option B places a small uppercase heading-font label
   directly above most section titles (e.g. "WHERE COMMUNITY COMES TO LIFE").
   Color comes from the WP text-color class in markup (has-primary-dk-color on
   light sections, has-white-color on dark). */
:where(.bmg-eyebrow) {
    margin: 0 0 2px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

/* ----------------------------- */
/* buttons */

/* Color variants */

/*--------------*/
/*primary link*/
.wp-block-button .wp-block-button__link,
.wp-block-ymca-icon-button .ymca-icon-button__link {
    background: transparent;
    border: 2px solid transparent;
    color: var(--primary-dk);

    transition: all 0.25s ease;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-ymca-icon-button .ymca-icon-button__link:hover {
    border: 2px solid var(--primary-dk);
}
/*--------------*/
/*white link*/
.wp-block-button.is-style-bmg-white-link .wp-block-button__link,
.wp-block-ymca-icon-button.is-style-bmg-white-link .ymca-icon-button__link {
    background: transparent;
    border: 2px solid transparent;
    color: var(--white);

    transition: all 0.25s ease;
}
.wp-block-button.is-style-bmg-white-link .wp-block-button__link:hover,
.wp-block-ymca-icon-button.is-style-bmg-white-link .ymca-icon-button__link:hover {
    border: 2px solid var(--white);
}
/*--------------*/
/*primary bg*/
.wp-block-button.is-style-bmg-primary .wp-block-button__link,
.wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link {
    background: var(--primary-lt);
    color: var(--black);

    transition: all 0.25s ease;
}
.wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover {
    border: 2px solid transparent;
    background: var(--primary-dk);
    color: var(--white);
}

.dark-bg .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.has-primary-dk-background-color.has-background .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.has-camp-dk-background-color.has-background .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.has-camp-md-background-color.has-background .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.has-black-background-color.has-background .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.has-gray-background-color.has-background .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-primary-dk-background-color) .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-camp-dk-background-color) .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-camp-md-background-color) .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-black-background-color) .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-gray-background-color) .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.dark-bg .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.has-primary-dk-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.has-camp-dk-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.has-camp-md-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.has-black-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.has-gray-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-primary-dk-background-color) .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-camp-dk-background-color) .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-camp-md-background-color) .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-black-background-color) .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-gray-background-color) .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover {
    background: var(--white);
    color: var(--purple-dk);
}

.wp-block-group.has-background.has-white-background-color .wp-block-button.is-style-bmg-primary .wp-block-button__link:hover,
.wp-block-group.has-background.has-white-background-color .wp-block-ymca-icon-button.is-style-bmg-primary .ymca-icon-button__link:hover {
    background: var(--purple-md);
    color: var(--white);
}
/*--------------*/
/*white bg*/
.wp-block-button.is-style-bmg-white .wp-block-button__link,
.wp-block-ymca-icon-button.is-style-bmg-white .ymca-icon-button__link {
    background: var(--white);
    border: 2px solid var(--white);
    color: var(--purple-dk);

    transition: all 0.25s ease;
}
.wp-block-button.is-style-bmg-white .wp-block-button__link:hover,
.wp-block-ymca-icon-button.is-style-bmg-white .ymca-icon-button__link:hover {
    border: 2px solid var(--purple-dk);
    background: var(--purple-dk);
    color: var(--white);
}

.has-primary-dk-background-color .wp-block-button.is-style-bmg-white .wp-block-button__link:hover,
.has-primary-dk-background-color .wp-block-ymca-icon-button.is-style-bmg-white .ymca-icon-button__link:hover,
.has-purple-band-gradient-background .wp-block-button.is-style-bmg-white .wp-block-button__link:hover,
.has-purple-band-gradient-background .wp-block-ymca-icon-button.is-style-bmg-white .ymca-icon-button__link:hover {
    border: 2px solid var(--white);
}
/*--------------*/
/*secondary bg*/
.wp-block-button.is-style-bmg-secondary .wp-block-button__link,
.wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link {
    border: 2px solid transparent;
    background: var(--primary-dk);
    color: var(--white);

    transition: all 0.25s ease;
}
.wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover {
    border: 2px solid transparent;
    background: var(--primary-md);
    color: var(--white);
}
.dark-bg .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.has-primary-dk-background-color.has-background .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.has-camp-dk-background-color.has-background .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.has-camp-md-background-color.has-background .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.has-black-background-color.has-background .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.has-gray-background-color.has-background .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-primary-dk-background-color) .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-camp-dk-background-color) .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-camp-md-background-color) .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-black-background-color) .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-gray-background-color) .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.dark-bg .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.has-primary-dk-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.has-camp-dk-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.has-camp-md-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.has-black-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.has-gray-background-color.has-background .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-primary-dk-background-color) .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-camp-dk-background-color) .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-camp-md-background-color) .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-black-background-color) .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover,
.wp-block-cover:has(> .wp-block-cover__background.has-gray-background-color) .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover {
    background: var(--white);
    color: var(--accent-2-hover);
}

.wp-block-group.has-background.has-white-background-color .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover,
.wp-block-group.has-background.has-white-background-color .wp-block-ymca-icon-button.is-style-bmg-secondary .ymca-icon-button__link:hover {
    background: var(--accent-2-hover);
    color: var(--accent-2-hover-btn-text);
}

/*--------------*/
/*secondary light (outline on dark bg)*/
.wp-block-button.is-style-bmg-secondary-light .wp-block-button__link,
.wp-block-ymca-icon-button.is-style-bmg-secondary-light .ymca-icon-button__link {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);

    transition: all 0.25s ease;
}
.wp-block-button.is-style-bmg-secondary-light .wp-block-button__link:hover,
.wp-block-ymca-icon-button.is-style-bmg-secondary-light .ymca-icon-button__link:hover {
    background: var(--white);
    border: 2px solid var(--white);
    color: var(--purple-dk);
}
/*--------------*/
/*secondary link*/
.wp-block-button.is-style-bmg-secondary-link .wp-block-button__link,
.wp-block-ymca-icon-button.is-style-bmg-secondary-link .ymca-icon-button__link {
    background: transparent;
    border: 2px solid transparent;
    color: var(--accent-2-hover);

    transition: all 0.25s ease;
}
.wp-block-button.is-style-bmg-secondary-link .wp-block-button__link:hover,
.wp-block-ymca-icon-button.is-style-bmg-secondary-link .ymca-icon-button__link:hover {
    border: 2px solid var(--accent-2-hover);
}
/*--------------*/
/* icon inherits text color */
.wp-block-ymca-icon-button .ymca-icon-button__icon svg {
    /* width: 100%;
    height: 100%;
    display: block; */
    fill: currentColor;
}

/* ----------------------------- */
/* icons */

.wp-block-social-links .wp-block-social-link:hover {
    transform: scale(1);
}
.wp-block-social-links .wp-social-link a {
    pointer-events: none;
}

/* ----------------------------- */
/* printing */

/*hide on front end*/
.print-only {
    display: none !important;
}
/* show in WP editor/admin so you can edit it */
.wp-admin .print-only,
.editor-styles-wrapper .print-only {
    display: block !important;
    opacity: 0.75;
    outline: 1px dashed #999;
}
.wp-admin .print-only.is-layout-flex,
.editor-styles-wrapper .print-only.is-layout-flex {
    display: flex !important;
}
/*show on print screen*/
@media print {
    .print-only {
        display: block !important;
    }
    .print-only.is-layout-flex {
        display: flex !important;
    }
}

/* ----------------------------- */
/* backgrounds */

/* --------------------- */
/* trianlge in top right */
section.has-tri-right-background {
    position: relative;
    overflow: hidden;
}

section.has-tri-right-background::after {
    content: "";
    position: absolute;
    top: -35px !important;
    right: -45px !important;
    bottom: auto !important;
    left: auto !important;
    width: 268px;
    height: 299px;
    pointer-events: none;
    background-color: var(--blue-tint);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M268,31.32v236.07c0,17.37-14.24,31.61-31.61,31.61s-10.54-1.14-15.1-3.7L15.95,176.84c-9.4-5.41-15.95-15.66-15.95-27.34s6.27-21.92,15.95-27.34L221.29,3.7c4.56-2.56,9.68-3.7,15.1-3.7,17.37,0,31.61,14.23,31.61,31.61v-.29Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M268,31.32v236.07c0,17.37-14.24,31.61-31.61,31.61s-10.54-1.14-15.1-3.7L15.95,176.84c-9.4-5.41-15.95-15.66-15.95-27.34s6.27-21.92,15.95-27.34L221.29,3.7c4.56-2.56,9.68-3.7,15.1-3.7,17.37,0,31.61,14.23,31.61,31.61v-.29Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    z-index: 1;
}

/* -------------------- */
/* trianlge in top left */
section.has-tri-left-background {
    position: relative;
    overflow: hidden;
}

section.has-tri-left-background::after {
    content: "";
    position: absolute;
    top: -35px !important;
    left: -45px !important;
    bottom: auto !important;
    right: auto !important;
    width: 268px;
    height: 299px;
    pointer-events: none;
    background-color: var(--blue-tint);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M0,31.32v236.07c0,17.37,14.24,31.61,31.61,31.61s10.54-1.14,15.1-3.7l205.34-118.46c9.4-5.41,15.95-15.66,15.95-27.33s-6.26-21.93-15.95-27.34L46.71,3.7c-4.56-2.56-9.68-3.7-15.1-3.7C14.24,0,0,14.23,0,31.61v-.29Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M0,31.32v236.07c0,17.37,14.24,31.61,31.61,31.61s10.54-1.14,15.1-3.7l205.34-118.46c9.4-5.41,15.95-15.66,15.95-27.33s-6.26-21.93-15.95-27.34L46.71,3.7c-4.56-2.56-9.68-3.7-15.1-3.7C14.24,0,0,14.23,0,31.61v-.29Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    z-index: 1;
}

/* -------------------- */
/* triangle in top right & bottom left */
section.has-tri-top-right-bottom-left-background {
    position: relative;
    overflow: hidden;
}

section.has-tri-top-right-bottom-left-background::before {
    /* Bottom Left */
    content: "";
    position: absolute;
    bottom: 76px !important;
    left: -45px !important;
    top: auto !important;
    right: auto !important;
    width: 268px;
    height: 299px;
    pointer-events: none;
    background-color: var(--blue-tint);
    transform: scaleY(-1);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M0,31.32v236.07c0,17.37,14.24,31.61,31.61,31.61s10.54-1.14,15.1-3.7l205.34-118.46c9.4-5.41,15.95-15.66,15.95-27.33s-6.26-21.93-15.95-27.34L46.71,3.7c-4.56-2.56-9.68-3.7-15.1-3.7C14.24,0,0,14.23,0,31.61v-.29Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M0,31.32v236.07c0,17.37,14.24,31.61,31.61,31.61s10.54-1.14,15.1-3.7l205.34-118.46c9.4-5.41,15.95-15.66,15.95-27.33s-6.26-21.93-15.95-27.34L46.71,3.7c-4.56-2.56-9.68-3.7-15.1-3.7C14.24,0,0,14.23,0,31.61v-.29Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    z-index: 1;
}

section.has-tri-top-right-bottom-left-background::after {
    /* Top Right */
    content: "";
    position: absolute;
    top: 76px !important;
    right: -45px !important;
    bottom: auto !important;
    left: auto !important;
    width: 268px;
    height: 299px;
    pointer-events: none;
    background-color: var(--blue-tint);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M268,31.32v236.07c0,17.37-14.24,31.61-31.61,31.61s-10.54-1.14-15.1-3.7L15.95,176.84c-9.4-5.41-15.95-15.66-15.95-27.34s6.27-21.92,15.95-27.34L221.29,3.7c4.56-2.56,9.68-3.7,15.1-3.7,17.37,0,31.61,14.23,31.61,31.61v-.29Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M268,31.32v236.07c0,17.37-14.24,31.61-31.61,31.61s-10.54-1.14-15.1-3.7L15.95,176.84c-9.4-5.41-15.95-15.66-15.95-27.34s6.27-21.92,15.95-27.34L221.29,3.7c4.56-2.56,9.68-3.7,15.1-3.7,17.37,0,31.61,14.23,31.61,31.61v-.29Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    z-index: 1;
}

/* -------------------- */
/* triangle in top left & bottom right */
section.has-tri-top-left-bottom-right-background {
    position: relative;
    overflow: hidden;
}

section.has-tri-top-left-bottom-right-background::before {
    /* Bottom Right */
    content: "";
    position: absolute;
    bottom: 76px !important;
    right: -45px !important;
    top: auto !important;
    left: auto !important;
    width: 268px;
    height: 299px;
    pointer-events: none;
    background-color: var(--blue-tint);
    transform: scaleY(-1);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M268,31.32v236.07c0,17.37-14.24,31.61-31.61,31.61s-10.54-1.14-15.1-3.7L15.95,176.84c-9.4-5.41-15.95-15.66-15.95-27.34s6.27-21.92,15.95-27.34L221.29,3.7c4.56-2.56,9.68-3.7,15.1-3.7,17.37,0,31.61,14.23,31.61,31.61v-.29Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M268,31.32v236.07c0,17.37-14.24,31.61-31.61,31.61s-10.54-1.14-15.1-3.7L15.95,176.84c-9.4-5.41-15.95-15.66-15.95-27.34s6.27-21.92,15.95-27.34L221.29,3.7c4.56-2.56,9.68-3.7,15.1-3.7,17.37,0,31.61,14.23,31.61,31.61v-.29Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    z-index: 1;
}

section.has-tri-top-left-bottom-right-background::after {
    /* Top Left */
    content: "";
    position: absolute;
    top: 76px !important;
    left: -45px !important;
    bottom: auto !important;
    right: auto !important;
    width: 268px;
    height: 299px;
    pointer-events: none;
    background-color: var(--blue-tint);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M0,31.32v236.07c0,17.37,14.24,31.61,31.61,31.61s10.54-1.14,15.1-3.7l205.34-118.46c9.4-5.41,15.95-15.66,15.95-27.33s-6.26-21.93-15.95-27.34L46.71,3.7c-4.56-2.56-9.68-3.7-15.1-3.7C14.24,0,0,14.23,0,31.61v-.29Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 299'%3E%3Cpath d='M0,31.32v236.07c0,17.37,14.24,31.61,31.61,31.61s10.54-1.14,15.1-3.7l205.34-118.46c9.4-5.41,15.95-15.66,15.95-27.33s-6.26-21.93-15.95-27.34L46.71,3.7c-4.56-2.56-9.68-3.7-15.1-3.7C14.24,0,0,14.23,0,31.61v-.29Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    z-index: 1;
}

/* Fix Gutenberg editor overlap by pushing inner containers above the pseudo-element shapes */
.editor-styles-wrapper section[class*="has-tri-"] > .wp-block-cover__inner-container,
.editor-styles-wrapper section[class*="has-tri-"] > .wp-block-group__inner-container,
.editor-styles-wrapper section[class*="has-tri-"] > .block-editor-inner-blocks {
    position: relative;
    z-index: 2;
}