/*
 * Page sections as full-width bands instead of grey boxes.
 *
 * Pages mark their content sections with the editor colour "custom-color-1"
 * (a grey group). The top-level row holding such a group (the group itself
 * or the columns block it sits in) becomes a full-width band, alternating
 * warm beige and white. The grey box background and rounded corners go away.
 */

:root {
    --section-band-bg: #f5efe6;
    --section-band-pad: clamp(1rem, 2.5vw, 2rem);
    --section-inner-pad: clamp(0.75rem, 2vw, 1.5rem);
}

.entry-content .has-custom-color-1-background-color {
    background-color: transparent !important;
    border-radius: 0 !important;
    /* The old box padding adds to the band padding, so keep it small */
    padding-top: var(--section-inner-pad) !important;
    padding-bottom: var(--section-inner-pad) !important;
}

.entry-content > :is(
    .wp-block-columns:has(.has-custom-color-1-background-color),
    .has-custom-color-1-background-color
) {
    padding-top: var(--section-band-pad);
    padding-bottom: var(--section-band-pad);
}

/*
 * No white gap above the footer when a page ends with a section band.
 * An empty trailing paragraph left by the editor is ignored.
 */
.entry-content > p:empty:last-child {
    display: none;
}

.entry-content > :is(
    .wp-block-columns:has(.has-custom-color-1-background-color),
    .has-custom-color-1-background-color
):is(:last-child, :has(+ p:empty:last-child)) {
    margin-bottom: 0 !important;
}

/* :has() cannot be nested, so each ending is spelled out */
.wp-site-blocks:has(.entry-content > .wp-block-columns:last-child .has-custom-color-1-background-color) > footer.wp-block-template-part,
.wp-site-blocks:has(.entry-content > .has-custom-color-1-background-color:last-child) > footer.wp-block-template-part,
.wp-site-blocks:has(.entry-content > p:empty:last-child):has(.entry-content > .wp-block-columns:nth-last-child(2) .has-custom-color-1-background-color) > footer.wp-block-template-part,
.wp-site-blocks:has(.entry-content > p:empty:last-child):has(.entry-content > .has-custom-color-1-background-color:nth-last-child(2)) > footer.wp-block-template-part {
    margin-top: 0 !important;
}

/* Full-bleed elements must not cause a horizontal scrollbar */
body {
    overflow-x: clip;
}

/*
 * No white gap under the header when a page starts with the front page hero
 * or a section band. nav.js reads --main-gap and keeps --main-offset in sync
 * while the header is fixed.
 */
#wp--skip-link--target {
    --main-gap: 32px;
}

/* :has() cannot be nested, so each starting block is spelled out */
#wp--skip-link--target:has(> .entry-content > .wp-block-group.alignwide:first-child > .wp-block-cover),
#wp--skip-link--target:has(> .entry-content > .wp-block-columns:first-child .has-custom-color-1-background-color),
#wp--skip-link--target:has(> .entry-content > .has-custom-color-1-background-color:first-child) {
    --main-gap: 0px;
    margin-top: var(--main-offset, var(--main-gap)) !important;
}

.entry-content > :first-child:is(
    .wp-block-columns:has(.has-custom-color-1-background-color),
    .has-custom-color-1-background-color
) {
    margin-top: 0 !important;
}

/* Front page hero image spans the full screen width, without rounded corners */
.home .entry-content > .wp-block-group.alignwide:first-child:has(> .wp-block-cover) {
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc((100% - 100vw) / 2) !important;
    margin-right: calc((100% - 100vw) / 2) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}

.home .entry-content > .wp-block-group.alignwide:first-child > .wp-block-cover {
    border-radius: 0 !important;
}

.home .entry-content > .wp-block-group.alignwide:first-child + * {
    margin-top: 0 !important;
}

/* On tablets and desktops the image narrows into a white frame */
@media (min-width: 782px) {
    .home .entry-content > .wp-block-group.alignwide:first-child:has(> .wp-block-cover) {
        background: #fff !important;
        padding-top: var(--section-band-pad) !important;
        padding-bottom: var(--section-band-pad) !important;
    }

    .home .entry-content > .wp-block-group.alignwide:first-child > .wp-block-cover {
        max-width: min(1200px, 100% - 4rem);
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 16px !important;
        min-height: clamp(320px, 26vw, 420px) !important;
    }
}

/* Band colour extends to the screen edges without causing horizontal scroll */
.entry-content > :nth-child(odd of :is(
    .wp-block-columns:has(.has-custom-color-1-background-color),
    .has-custom-color-1-background-color
)) {
    background-color: var(--section-band-bg) !important;
    box-shadow: 0 0 0 100vmax var(--section-band-bg);
    clip-path: inset(0 -100vmax);
}