/*
 * Mailchimp CTA Block - style.css
 * Uses Astra Child global CSS variables for colours and typography.
 * Fallback values provided for non-Astra environments.
 *
 * Astra global colour map (hansvanzanten.nl):
 *   --ast-global-color-0  Brand (primary)          -> button background
 *   --ast-global-color-1  Brand alternative        -> button hover
 *   --ast-global-color-2  Headings                 -> headline colour
 *   --ast-global-color-3  Body text                -> subtext + input text
 *   --ast-global-color-4  Primary background       -> input background
 *   --ast-global-color-7  Subtle background        -> block background
 *   --ast-global-color-8  Miscellaneous support    -> input border
 */

.mc-cta-block-14199 {
    box-sizing:       border-box;
    width:            100%;
    padding:          48px;
    background-color: var(--ast-global-color-7, #f5f0eb);
    border-radius:    12px;
    font-family:      var(--ast-body-font-family, inherit);
}

.mc-cta-block-14199__headline {
    margin:      0 0 12px;
    font-size:   2rem;
    font-weight: 700;
    line-height: 1.2;
    color:       var(--ast-global-color-2, #1a1a1a);
    font-family: var(--ast-heading-font-family, inherit);
}

.mc-cta-block-14199__subtext {
    margin:      0 0 28px;
    font-size:   1rem;
    line-height: 1.6;
    color:       var(--ast-global-color-3, #555555);
}

.mc-cta-block-14199__form {
    display:         flex;
    flex-wrap:       wrap;
    gap:             12px;
    justify-content: center;
}

.mc-cta-block-14199__input {
    flex:          1 1 220px;
    padding:       12px 16px;
    font-size:     1rem;
    border:        1px solid var(--ast-global-color-8, #cccccc);
    border-radius: 6px;
    outline:       none;
    transition:    border-color 0.2s;
    background:    var(--ast-global-color-4, #ffffff);
    color:         var(--ast-global-color-3, #1a1a1a);
    font-family:   var(--ast-body-font-family, inherit);
}

.mc-cta-block-14199__input:focus {
    border-color: var(--ast-global-color-0, #3a3a3a);
}

.mc-cta-block-14199__btn {
    flex:             0 0 auto;
    padding:          12px 28px;
    font-size:        1rem;
    font-weight:      600;
    background-color: var(--ast-global-color-0, #3a3a3a);
    color:            var(--ast-global-color-4, #ffffff);
    border:           none;
    border-radius:    6px;
    cursor:           pointer;
    transition:       background-color 0.2s, opacity 0.2s;
    font-family:      var(--ast-body-font-family, inherit);
}

.mc-cta-block-14199__btn:hover {
    background-color: var(--ast-global-color-1, #1a1a1a);
}

.mc-cta-block-14199__btn:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

.mc-cta-block-14199__message {
    display:       none;
    margin-top:    16px;
    padding:       12px 16px;
    border-radius: 6px;
    font-size:     0.95rem;
}

.mc-cta-block-14199__message--visible {
    display: block;
}

.mc-cta-block-14199__message--success {
    background-color: #e6f4ea;
    color:            #2d6a4f;
    border:           1px solid #b7dfca;
}

.mc-cta-block-14199__message--error {
    background-color: #fdecea;
    color:            #a61c00;
    border:           1px solid #f5c6c2;
}

@media ( max-width: 600px ) {
    .mc-cta-block-14199 {
        padding: 32px 24px;
    }
    .mc-cta-block-14199__form {
        flex-direction: column;
    }
    .mc-cta-block-14199__btn {
        width: 100%;
    }
}