.hero-section {
    min-height: calc(100vh - (2*var(--wp--preset--spacing--40)) - 48px);
}

@media screen and (min-width: 600px) {
    .wp-block-navigation__submenu-container {
        border: 2px solid var(--wp--preset--color--accent-2) !important;
    }
}

@media screen and (max-width: 599px) {
    .wp-block-navigation__submenu-container {
        padding-top: 0.5rem !important;
        padding-bottom: 0.75rem !important;
    }

    .wp-block-navigation__submenu-container
    .wp-block-pages-list__item {
        border-right: 1px solid var(--wp--preset--color--accent-2) !important;
    }

    .wp-block-navigation__submenu-container
    .wp-block-pages-list__item:last-child {
        border-bottom: 1px solid var(--wp--preset--color--accent-2) !important;
    }
}


.custom-hero-bg .wp-block-cover__image-background,
.custom-hero-bg .wp-block-cover__background,
.custom-footer-bg .wp-block-cover__image-background,
.custom-footer-bg .wp-block-cover__background {
    /* 1. Limit to the right half */
    width: 50% !important;
    height: 100% !important;
    left: auto !important;
    right: -30% !important;

    mix-blend-mode: screen !important;    
}

.custom-hero-bg .wp-block-cover__image-background,
.custom-hero-bg .wp-block-cover__background {
    /* Keep rotation to place the greenest part in the corner */
    transform: rotate(180deg);
    
    /* Pull the image back into the visible viewport to prevent masking issues */
    right: 0 !important; 

    /* Apply a radial fade starting from the local bottom-left (visual top-right on screen) */
    -webkit-mask-image: radial-gradient(circle at bottom left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(circle at bottom left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
}

.custom-footer-bg .wp-block-cover__image-background,
.custom-footer-bg .wp-block-cover__background {
    transform: rotate(-90deg);

    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
}