/* Add padding to sections */
.wp-block-group.alignfull[class*="is-style-section-"],
.wp-site-blocks > .wp-block-group[class*="is-style-section-"],
.wp-block-template-part > .wp-block-group[class*="is-style-section-"],
.is-root-container > .wp-block-group[class*="is-style-section-"] {
    padding-top: var(--wp--custom--global--spacing--padding--section);
    padding-bottom: var(--wp--custom--global--spacing--padding--section);
}

/* Remove padding from adjacent sections */
.wp-block-group.alignfull.is-style-section-base + .wp-block-group.alignfull.is-style-section-base,
.wp-site-blocks > .wp-block-group.is-style-section-base + .wp-block-group.is-style-section-base,
.wp-block-group.alignfull.is-style-section-base-variant + .wp-block-group.alignfull.is-style-section-base-variant,
.wp-site-blocks > .wp-block-group.is-style-section-base-variant + .wp-block-group.is-style-section-base-variant,
.wp-block-group.alignfull.is-style-section-contrast + .wp-block-group.alignfull.is-style-section-contrast,
.wp-site-blocks > .wp-block-group.is-style-section-contrast + .wp-block-group.is-style-section-contrast,
.wp-block-group.alignfull.is-style-section-primary + .wp-block-group.alignfull.is-style-section-primary,
.wp-site-blocks > .wp-block-group.is-style-section-primary + .wp-block-group.is-style-section-primary,
.wp-block-group.alignfull.is-style-section-accent + .wp-block-group.alignfull.is-style-section-accent,
.wp-site-blocks > .wp-block-group.is-style-section-accent + .wp-block-group.is-style-section-accent {
    padding-top: 0;
}

/* Remove margin from adjacent sections */
.wp-block-group.alignfull + .wp-block-group.alignfull,
.wp-site-blocks > .wp-block-template-part + .wp-block-group,
.wp-site-blocks > .wp-block-group {
    margin-top: 0;
}

/* Stretch child elements of stack groups to fill the width of the parent */
.wp-block-group.is-vertical > * {
    width: 100%;
}

/* Remove border radius from full width groups */
.wp-block-group.alignfull,
.wp-site-blocks > .wp-block-group,
.wp-block-template-part > .wp-block-group {
    border-radius: 0;
}

/* Hide overflow from groups with sliders */
.wp-block-group.alignfull:has(.wp-block-query.is-style-slider),
.wp-block-group.alignfull:has(.wp-block-mijnwerkgever-slider) {
    overflow: hidden;
}

/* Sticky */
.is-position-sticky.wp-block-group {
    top: calc(var(--wp--preset--spacing--60) + var(--wp-admin--admin-bar--position-offset, 0px));
}

/* Grid */
@media screen and (max-width: 640px) {
    .wp-block-group.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Speech Bubble */
.is-style-section-speech-bubble {
    --radius: var(--wp--custom--global--spacing--padding--background);
    --tailW: 57px;
    --tailH: 40px;
    --stroke: 6px;
    --fill: var(--base-variant);
    --border-solid: var(--base-variant);
    --speech-gradient: linear-gradient(90deg,#2f6fb8 0, #2f6fb8 max(57px, 20%), #4fa5a1 60%, #88c070 100%);

    position: relative;
    z-index: 0;
    margin-bottom: var(--tailH) !important;
    border-bottom-left-radius: 0 !important;
    border: var(--stroke) solid var(--border-solid);
    background: var(--fill);
    border-radius: var(--radius);
    border-bottom-left-radius: 0;
    padding: var(--wp--custom--global--spacing--padding--background);
    padding-bottom: calc(var(--wp--custom--global--spacing--padding--background) + var(--tailH));
}

/* parent overrides */
.is-style-section-contrast .is-style-section-speech-bubble,
.is-style-section-primary .is-style-section-speech-bubble,
.is-style-section-base-variant .is-style-section-speech-bubble {
    --border-solid: var(--base);
    --fill: var(--base);
    color: var(--contrast);
}

/* gradient variant (bubble) */
.is-style-section-speech-bubble.has-primary-gradient-gradient-background {
    border: var(--stroke) solid transparent;
    background: linear-gradient(var(--base), var(--base)) padding-box, var(--speech-gradient) border-box !important;
}

.is-style-section-speech-bubble::after,
.is-style-section-speech-bubble::before {
    content: "";
    position: absolute;
    transform: translateY(100%);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M0 0 V40 H20 L60 0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M0 0 V40 H20 L60 0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.is-style-section-speech-bubble::after {
    left: calc(-1 * var(--stroke)) !important;
    width: var(--tailW);
    bottom: 6px !important;
    height: var(--tailH);
    outline: none !important;
    background: var(--border-solid);
    z-index: -2;
    clip-path: inset(calc(var(--stroke) + 1px) 0 0 0);
}

.is-style-section-speech-bubble::before {
    left: -6px;
    width: calc(var(--tailW) - (3 * var(--stroke)));
    transform: translate(var(--stroke), calc(100% + var(--stroke) - 1px));
    height: calc(var(--tailH) - (2 * var(--stroke)) + 1px);
    background: var(--fill);
    z-index: -1;
    bottom: 8px;
    transform: translate(var(--stroke), calc(100% + var(--stroke)));
    clip-path: inset(-0 0 0 0);
}

.is-style-section-speech-bubble.has-primary-gradient-gradient-background::before {
    background: var(--base);
}

.is-style-section-speech-bubble.has-primary-gradient-gradient-background::after {
    background: var(--speech-gradient);
}

@supports not ((mask-image: url("")) or (-webkit-mask: url(""))) {
    .is-style-section-speech-bubble::after,
    .is-style-section-speech-bubble::before {
        -webkit-mask: none;
        mask: none;
        clip-path: polygon(0 0, 0 100%, 33% 100%, 100% 0);
        transform: translateY(100%);
    }

    .is-style-section-speech-bubble::after {
        clip-path: polygon(0 0, 0 100%, 33% 100%, 100% 0);
    }
}


/* Radius Group */
.wp-block-group:has(.wp-block-cover) {
    overflow: hidden;
}

/* Newsletter Footer */
.wp-block-group.alignfull:has(.footer-newsletter-form_wrapper) {
    &:before,
    &:after{
        content:'';
        width: 100%;
        height: 30px;
        aspect-ratio: 153530;
        z-index: 10;
        display: block;
        position: absolute;
        left: 0;
        background: var(--wp--preset--gradient--primary-gradient);
    }
    &:before {
        top: 0;
    }
    &:after {
        bottom: 0;
    }
}