/* ------------------------------ */
/* Blue "body" background
/* with support for Root Padding layouts.
/* ------------------------------ */

/* To achieve Devon's "double layer" root padding aware layout, we must tweak
WP's default root-padding-aware behavior slightly. We need *two* containers that
apply the root padding (an outer blue one, and an inner white/main one that can
be constrained). */

.wp-site-blocks {
    background-color: var(--wp--custom--color-primitives--blue-primary);
    background-image: url(/wp-content/themes/devon-prep/assets/images/texture-body-background.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    /* Calculate the widths for these "double layered" containers:
    /* Global width + the left & right root padding */
    --constrained-outer-width: calc(var(--wp--style--global--content-size) + (var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left)));
    --constrained-outer-width-wide: calc(var(--wp--style--global--wide-size) + (var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left)));
}

/* Define the outer layer */
.wp-site-blocks > .is-layout-constrained {
    max-width: var(--constrained-outer-width-wide);
    margin-right: auto;
    margin-left: auto;
}

/* Define the inner layer */
.wp-site-blocks > .is-layout-constrained > .wp-block-group,
body[class*="landing"] .entry-content > .is-layout-constrained > .wp-block-group,
.block-editor-iframe__html .is-root-container > main > .entry-content > .is-layout-constrained > .wp-block-group {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    background-color: var(--wp--custom--color-primitives--white);
}