/* ==========================================================================
   Container System
   --------------------------------------------------------------------------
   .section        → outer wrapper. Full-bleed, owns backgrounds / full-width
                     visuals. Never constrains width.
   .section__inner → inner wrapper. Constrains content to a safe width at
                     every breakpoint so it never touches the viewport edges.
                     Uses width (not padding), centered with margin-inline.
   --------------------------------------------------------------------------
   Breakpoints (literal, since CSS vars aren't valid in @media conditions):
     tablet  → 48rem  /  768px
     laptop  → 64rem  / 1024px
     desktop → 90rem  / 1440px
   ========================================================================== */

:root {
    /* Inner container widths.
       Phone stays fluid: physical phones span 320–430px, and a fixed width
       can't sit nicely across that range without overflow or huge gutters.
       Tablet / laptop / desktop use fixed pixels for a predictable,
       design-locked feel. Desktop pulls wideSize from theme.json. */
    --container-phone: 90%;
    --container-tablet: 680px;
    --container-laptop: 960px;
    --container-desktop: var(--wp--style--global--wide-size, 1280px);
}

.is-root-container {
    overflow: hidden;
}

main.entry-content {
    overflow: hidden;
}

.block-editor-iframe__body .gb-site-header {
    background-color: #8f8f8f !important;
}

.section {
    width: 100%;
    overflow: hidden;
}

.section__inner {
    max-width: var(--container-phone);
    margin-inline: auto;
    width: 100%;
}

.wp-block-group.has-global-padding {
    width: 100%;
    max-width: var(--container-phone);
    margin-inline: auto;
}


@media (min-width: 48rem) {
    .section__inner {
        max-width: var(--container-tablet);
    }

    .wp-block-group.has-global-padding {
        max-width: var(--container-tablet);
        margin-inline: auto;
    }
}

@media (min-width: 64rem) {
    .section__inner {
        max-width: var(--container-laptop);
    }

    .wp-block-group.has-global-padding {
        max-width: var(--container-laptop);
    }
}

@media (min-width: 90rem) {
    .section__inner {
        max-width: var(--container-desktop);
        margin-inline: auto;
    }

    .wp-block-group.has-global-padding {
        max-width: var(--container-desktop);
        margin-inline: auto;
    }
}

.section--inner-full {
    width: 100%;
}