/* Newsletter Sign-up */

/* General flex layout, single-column as base */
#mc_embed_shell #mc_embed_signup_scroll {
    display: flex;
    flex-direction: column;
    gap: var(--zero-point-five-spacer);
}
/* De-style everything first with no priority */
#mc_embed_shell input[type="email"],
#mc_embed_shell input[type="submit"] {
    appearance: none;
    background: none;
    padding: 0;
    margin: 0;
    border: 0;
    font: inherit;
    line-height: 1;
    width: fit-content;
    height: fit-content;
    border-radius: 0 !important;
    color: inherit;
}
/* Re-style selectively as a base */
#mc_embed_shell input[type="email"] {
    border-bottom: 1px solid;
}
#mc_embed_shell input[type="submit"] {
    border: 1px solid;
    padding: var(--zero-point-five-spacer);
}
/* Remove padding/margins on inline messages so that they fall back on flex settings */
#mc_embed_shell .mce_inline_error {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    color: inherit !important;
    width: 100%;
    font: inherit !important;
}
/* Default field group styles, basic */
#mc_embed_shell .mc-field-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--zero-point-five-spacer);
}

/* Group — "Sticky-header" style (registered in js/gutenberg-ext.js)
 *
 * Figma "Lux / Practice" (4988:5713), on a 12-column grid with a 30px gutter:
 * the first block (the heading) sits in columns 1–3, everything after it in
 * 4–11, and column 12 stays empty. The heading docks near the top of the
 * viewport and travels with its section until the section ends. Set the group
 * to Wide.
 */

.wp-block-group.is-style-sticky-header {
    padding-top: var(--three-spacer);
    padding-bottom: var(--three-spacer);
    border-top: 1px solid var(--wp--preset--color--text-10);
}

.wp-block-group.is-style-sticky-header + .wp-block-group.is-style-sticky-header {
    margin-top: calc(2 * var(--three-spacer));
}

/* Own the vertical rhythm rather than inheriting the layout's blockGap. */
.wp-block-group.is-style-sticky-header > * {
    margin-top: 0;
    margin-bottom: 0;
}

.wp-block-group.is-style-sticky-header > * + * {
    margin-top: var(--three-spacer);
}

/* Consecutive paragraphs read as one body of text. */
.wp-block-group.is-style-sticky-header > p + p {
    margin-top: var(--one-point-five-spacer);
}

/* Heading, with the dot from the design's Accordion Block. */
.wp-block-group.is-style-sticky-header > :first-child {
    position: relative;
    padding-left: calc(13px + var(--two-spacer));
}

.wp-block-group.is-style-sticky-header > :first-child::before {
    content: "";
    position: absolute;
    left: 0;
    /* Centred on the first line, whatever the heading's line height. */
    top: calc(0.5lh - 6.5px);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--page-color);
}

@media screen and (min-width: 1080px) {
    .wp-block-group.is-style-sticky-header {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--three-spacer);
        row-gap: 0;
    }

    /* Fill the track instead of the constrained layout's centred content width. */
    .wp-block-group.is-style-sticky-header > * {
        grid-column: 4 / span 8;
        width: 100%;
        max-width: none;
    }

    /* A sticky grid item can only travel within its own grid area, so the
     * heading spans every row to make that area the whole section. 99 is
     * simply more rows than a section will have; unused rows collapse to 0. */
    .wp-block-group.is-style-sticky-header > :first-child {
        grid-column: 1 / span 3;
        grid-row: 1 / span 99;
        align-self: start;
        position: sticky;
        top: var(--three-spacer);
    }

    /* Top-aligned with the heading. */
    .wp-block-group.is-style-sticky-header > :first-child + * {
        margin-top: 0;
    }
}