.block-call-to-action {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--70);
}
.block-call-to-action.alignwide {
    margin-top: var(--wp--preset--spacing--70);
}
.block-call-to-action.alignfull {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.block-call-to-action.alignfull h2 {
    font-size: var(--wp--preset--font-size--xxxx-large) !important;
    margin: 0 auto 2rem auto !important;
    max-width: 800px;
}


/* --------------------------------------------------------------------------
   Primary button — outline, fills aubergine on hover

   The global hover in style.css fills with accent-2, so the aubergine fill
   needs a selector that outranks `:root :where(...)` plus !important.
   -------------------------------------------------------------------------- */

.block-call-to-action .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
    background: var(--wp--preset--color--accent-1) !important;
    border-color: var(--wp--preset--color--accent-1) !important;
    color: var(--wp--preset--color--base) !important;
}

/* The chevron is a background image, so the light version has to be swapped in */
.block-call-to-action .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500004 13.5L6.5 7L0.500004 0.5' stroke='%23f9f8e8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}