/*
    Custom HTML blocks: the Campaign Monitor sign-up forms (Newsletter, Making
    Waves and the three event pages). Raw third-party markup in a core/html
    block, so none of it can be a block setting; each rule keys to the embed's own
    markup. The first half is Making Waves, the second the Newsletter's box model.

    Making Waves — ported from joshua-tree/scss/templates/making-waves/
    (_body.scss, _form.scss). Legacy scoped under
    body.page-template-making-waves; yosemite anchors on the section classes
    directly (STYLES.md: no body-class-scoped page CSS).

    Phase 6B.2 (ruled 2026-07-24): the header band (_header.scss) was fully
    re-composed as native block markup in migrate-making-waves.php — heading
    color/weight/padding and paragraph italic/alignment/padding all ride real
    block supports (textColor, typography.fontWeight/fontStyle/textAlign,
    spacing.padding) baked directly into the migrated markup. No CSS survives
    for it; do not re-add a `.making-waves-header` rule here.

    The band and the card around the embed are Groups now
    (migrate-making-waves-groups.php, WRAP #47); what is left styles the
    Campaign Monitor form's own markup (.js-cm-form), which stays a Custom HTML
    island. The two pages with the bespoke widget have none of these classes.
*/

.js-cm-form .field + .field {
    padding-top: var(--wp--preset--spacing--40);
}

.js-cm-form .field label {
    display: block;
    font-weight: bold;
    padding-bottom: var(--wp--preset--spacing--10);
}

.js-cm-form .field input[type='text'],
.js-cm-form .field input[type='email'] {
    width: 100%;
    color: #666;
    padding: 0.75rem;
    height: auto;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    background: #fafafa;
}

.js-cm-form .other-list {
    display: flex;
}

.js-cm-form .other-list input {
    display: block;
    margin-top: 6px;
}

.js-cm-form .other-list label {
    padding-left: var(--wp--preset--spacing--10);
    font-size: var(--wp--preset--font-size--copy-small);
    line-height: 1.25em;
    font-weight: normal;
    font-style: italic;
}

.js-cm-form .submit button {
    color: var(--wp--preset--color--white);
    background: #1193BA;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0.875rem;
    border: 2px solid var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--button);
    transition: all 0.3s ease-in;
}

@media screen and (min-width: 768px) {
    .js-cm-form .submit button {
        padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) 1.375rem;
    }
}

/*
    Newsletter signup — the third-party Campaign Monitor embed. It stays a
    Custom HTML island, so these rules key to the embed's own markup
    (.js-cm-form, .l-center-container), not to theme classes. The band around
    it is composed with editor tools (migrate-newsletter.php, 2026-10-21).
*/

.js-cm-form fieldset > div {
    margin-top: 0.25rem;
}

/* Legacy rendered this embed at UA-default box-sizing (content-box); block
   themes apply a global border-box reset, which makes the embed's inline
   `min-height: calc(100vh - 15rem)` absorb its own 15rem padding (measured:
   wrapper 889px vs legacy 900px at 900vh). Restore the legacy box model for
   the embed's outer band only (not a Group that happens to hold it:
   the Making Waves card is a border-box Group and production's is 480px). */
div:has(> .l-center-container):not(.wp-block-group) {
    box-sizing: content-box;
}