/* Background variants
   ========================================================================== */

.form-block--bg-blue        {
    background-color: var(--color-blue);
    background-image: url('../../assets/images/blue-accent.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
}
.form-block--bg-transparent { background-color: transparent; }

/* Component
   ========================================================================== */

.form-block {
    padding: 5rem 2rem;

    @media (max-width: 767px) {
        padding: 3rem 1rem;
    }

    & .form-block__inner {
        max-width: var(--container-max-width);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    & .form-block__title {
        font-family: 'Work Sans', sans-serif;
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        font-weight: 700;
        margin: 0;
        line-height: 1.2;
        text-align: center;

        &.form-block__title--left   { text-align: left; }
        &.form-block__title--center { text-align: center; }
    }

    &.form-block--bg-blue .form-block__title {
        color: var(--color-white);
    }

    &.form-block--bg-transparent .form-block__title {
        color: var(--color-dark_green);
    }

    /* HubSpot form label overrides on blue background */

    &.form-block--bg-blue .hs-form-html label,
    &.form-block--bg-blue .hs-form-html p,
    &.form-block--bg-blue .hs-form-html div,
    &.form-block--bg-blue .hs-form-html span,
    &.form-block--bg-blue .hs-form-html legend {
        color: var(--color-white) !important;
    }

    & .form-block__form {
        & p:first-child { margin-top: 0; }
        & p:last-child  { margin-bottom: 0; }
    }
}