/* ============================================================================
   MailerLite newsletter band.

   ── Specificity, and why every override below leads with an id ──
   universal.js injects <style> blocks INSIDE `.ml-embedded` whose selectors all
   lead with the generated container id, e.g.

     #mlb2-44518581.ml-form-embedContainer .ml-form-embedWrapper
       .ml-form-embedBody .ml-form-embedSubmit button:hover { ... !important }

   An id outranks any number of classes, so a class-only override loses no
   matter how many `!important`s it carries. Every rule that has to beat theirs
   is therefore anchored on our own `#jcf-newsletter` and carries two more
   classes than their equivalent chain (`.ml-embedded` and
   `.ml-form-align-center` are the spare links used for that).

   Their form id changes whenever the client swaps forms, so we never match on
   it — only on ours, which is stable.
   ========================================================================== */

/* ------------------------------------------------------------------ band */

.jcf-newsletter {
    /* Its own section above the footer, in the theme's dark green so it reads
       as a separate block from the footer's near-black ground. */
    background-color: var(--theme-dark, #122F2A);
    padding: 48px 0;
}

.jcf-newsletter__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 56px;
}

.jcf-newsletter__copy {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 480px;
}

.jcf-newsletter__title {
    margin: 0 0 10px;
    font-family: var(--title-font, inherit);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.jcf-newsletter__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    font-family: var(--body-font, inherit);
    color: var(--light-color, #829592);
}

.jcf-newsletter__form {
    flex: 1 1 420px;
    min-width: 0;
    max-width: 560px;
}

/* --------------------------------------------------------------- loading */

/* `.ml-embedded` is an empty 0px div until MailerLite's CDN responds, which
   collapsed the band to an unexplained void — permanently if the fetch failed.
   `:empty` stops matching the instant their first child lands, so this needs no
   JavaScript and cannot get stuck out of sync with the DOM. */
.jcf-newsletter .ml-embedded:empty {
    display: block;
    min-height: 200px;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 10px;
}

.jcf-newsletter .ml-embedded:empty::after {
    content: attr(data-loading-label);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    font-size: 14px;
    color: rgba(255, 255, 255, .45);
}

/* ------------------------------------------------- widget chrome removal */

/* The widget is built to stand alone on a white landing page: it ships a card
   background, borders, rounding and generous outer padding. Inside our band all
   of that is dead vertical space — this was the source of the tall gaps. */
#jcf-newsletter .ml-embedded .ml-form-embedContainer,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody {
    background: transparent !important;
    /* A background image on any of these would also drive height. */
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* Defensive: the widget is built to stand alone, so never let it impose a
       height of its own on our band. (Not the cause of the phone-layout gaps —
       that was a flex-basis axis bug in the media query below.) */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    /* `flow-root`, never plain `block`: MailerLite floats `.ml-form-embedSubmit`
       and `.ml-form-embedPermissions` left and relies on this wrapper being
       `inline-block` to contain them. Forcing `block` let both escape their
       parent, which then reported a height ~80px shorter than its own contents
       and tore the layout open on narrow screens. `flow-root` is block-level
       AND establishes a block formatting context, so floats stay contained. */
    display: flow-root !important;
}

/* Header slot reserves room for a banner image we do not use; and their title
   and description are authored in one language, so ours (above, localised)
   stands in for them. */
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedHeader,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent {
    display: none !important;
}

/* --------------------------------------------------------------- fields */

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
    margin: 0 0 10px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
    width: 100% !important;
    max-width: 100% !important;
}

/* Consent line — inherit the band's palette, not the widget's light-page one. */
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions p {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, .62) !important;
}

/* Chrome paints a blue focus ring outside the field's own border, which reads
   as a foreign colour here. Replaced, not merely removed: a bare
   `outline: none` would leave keyboard users unable to tell which field they
   are in, so the field's own border turns gold instead. */
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody input:focus,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody input:focus-visible,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody textarea:focus,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--theme-color2, #FFAC00) !important;
}

/* Fields: the theme's pill-shaped inputs, on the dark band. */
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
    height: 56px !important;
    padding: 0 26px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 50px !important;
    background-color: rgba(255, 255, 255, .06) !important;
    color: var(--white-color, #fff) !important;
    font-family: var(--body-font, inherit) !important;
    font-size: 15px !important;
}

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder {
    color: var(--light-color, #829592) !important;
    opacity: 1 !important;
}

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions p {
    font-family: var(--body-font, inherit) !important;
    color: var(--light-color, #829592) !important;
}

/* --------------------------------------------------------------- button */

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
    margin: 0 !important;
    padding: 0 !important;
}

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    height: 56px !important;
    border-radius: 50px !important;
    background-color: var(--theme-color2, #FFAC00) !important;
    color: var(--title-color, #1F1F1F) !important;
    font-family: var(--body-font, inherit) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: background-color 200ms ease, color 200ms ease !important;
}

/* Gold button turns the theme green on hover, like the site's `.th-btn`. */
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:focus {
    background-color: var(--theme-color, #1A685B) !important;
    color: var(--white-color, #fff) !important;
}

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover *,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover * {
    color: var(--white-color, #fff) !important;
}

/* Success / error panels the widget swaps in after a submit. */
#jcf-newsletter .ml-embedded .ml-form-successBody,
#jcf-newsletter .ml-embedded .ml-form-successContent {
    background: transparent !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, .8) !important;
}

/* ----------------------------------------------------------------- small */

@media (max-width: 860px) {
    .jcf-newsletter {
        padding: 36px 0;
    }

    .jcf-newsletter__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    /* `flex: 1 1 <basis>` above sizes these along the MAIN axis. In the row
       layout that axis is width, which is what those bases are for. Here the
       direction flips to column, so the same bases would become HEIGHTS —
       forcing 320px of box around ~110px of copy and 420px around the form,
       which is what opened the tall gaps above the fields and below the
       button. Reset to content-sized and let width do the work instead. */
    .jcf-newsletter__copy,
    .jcf-newsletter__form {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }
}


/* ------------------------------------------------ float containment

   Belt and braces for the floats described above: the consent line and the
   submit row are meant to stack full width in this band, so drop the float
   outright rather than only containing it, and give the elements that wrap
   them a block formatting context in case the widget adds more floats later.
   ------------------------------------------------------------------------ */

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-embedPermissions,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-embedSubmit,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-formContent {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody .ml-block-form,
#jcf-newsletter .ml-embedded .ml-form-embedContainer .ml-form-align-center .ml-form-embedWrapper .ml-form-embedBody form {
    display: flow-root !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Tighten the band on the smallest screens. */
@media (max-width: 700px) {
    .jcf-newsletter {
        padding: 28px 0 24px;
    }

    .jcf-newsletter__inner {
        gap: 18px;
    }
}


/* ------------------------------------------------ footer top spacing

   `.widget-area` ships with `padding-top: 80px` (style.css). With the band now
   directly above the footer, that stacked on top of the band's own bottom
   padding and left the logo floating a long way down. Top only. */

.footer-wrapper .widget-area {
    padding-top: 44px;
}

@media (max-width: 700px) {
    .footer-wrapper .widget-area {
        padding-top: 28px;
    }
}