/* Newsletter Offer Landing Page (page-newsletter-offer.php) */

/* Full-bleed: drop the site container the header opens around page content */
.page-template-page-newsletter-offer #content > .main-container {
    max-width: none;
    padding: 0;
}

/* Fill at least the window: each wrapper down to the hero stretches, so on
   short pages the hero (and its photo) grows instead of leaving space under the footer */
.page-template-page-newsletter-offer {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.page-template-page-newsletter-offer #page,
.page-template-page-newsletter-offer #content,
.page-template-page-newsletter-offer #content > .main-container,
.newsletter-offer {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
}

.newsletter-offer {
    --newsletter-offer-body-font: Arial, Helvetica, sans-serif;
    background: #fff;
    color: #000;
}

.newsletter-offer__hero {
    position: relative;
    flex: 1 0 auto;
    overflow: hidden;
}

/* Photo fills the lower part of the hero and fades up into the white */
.newsletter-offer__media {
    position: absolute;
    top: 30%;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
}

.newsletter-offer__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.newsletter-offer__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, .85) 20%, rgba(255, 255, 255, 0) 50%);
}

.newsletter-offer__content {
    position: relative;
    z-index: 1;
    max-width: 1060px;
    padding-top: 55px;
    padding-bottom: 290px;
    text-align: center;
}

.newsletter-offer__heading {
    margin: 0 0 18px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(34px, 4.3vw, 54px);
    font-weight: 700;
    line-height: 1.17;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
}

.newsletter-offer__intro,
.newsletter-offer__body {
    margin: 0 0 16px;
    font-family: var(--newsletter-offer-body-font);
    font-size: 15px;
    line-height: 1.4;
    color: #000;
}

.newsletter-offer__intro {
    font-weight: 700;
}

/* Klaviyo embedded form container. The form's own layout, colours and copy
   are set in Klaviyo's form editor. */
.newsletter-offer__form {
    max-width: 482px;
    min-height: 56px;
    margin: 24px auto 0;
}

/* klaviyo.js's wrapper otherwise shrinks to its content */
.newsletter-offer__form > div {
    width: 100%;
}

/* Klaviyo form restyled to the design: email input and button side by side.
   klaviyo.js writes inline styles and its own class-based CSS, so these need
   !important. Only Klaviyo's stable class names and the form's structure are
   targeted, not its generated go… classes. The button selector has to outrank
   the site-wide Klaviyo button rule in components/footer.css. */
.newsletter-offer__form form.klaviyo-form {
    padding: 0 !important;
}

/* Fields container: holds an input row and a button row */
.newsletter-offer__form form.klaviyo-form > div:first-child {
    flex-direction: row !important;
    min-height: 0 !important;
}

.newsletter-offer__form form.klaviyo-form > div:first-child > div {
    flex: 1 1 auto;
    min-width: 0;
}

.newsletter-offer__form form.klaviyo-form > div:first-child > div:last-child {
    flex: 0 0 182px;
}

.newsletter-offer__form form.klaviyo-form > div:first-child > div > div {
    width: 100%;
}

.newsletter-offer__form .klaviyo-emailinput input,
.newsletter-offer .newsletter-offer__form .klaviyo-form .klaviyo-form-button {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.newsletter-offer__form .klaviyo-emailinput input {
    padding: 0 18px !important;
    background: #fff !important;
    color: #000 !important;
}

.newsletter-offer__form .klaviyo-emailinput input::placeholder {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #000 !important;
    opacity: 1;
}

.newsletter-offer__form .klaviyo-emailinput input:focus::placeholder {
    color: #767676 !important;
}

.newsletter-offer .newsletter-offer__form .klaviyo-form .klaviyo-form-button {
    padding: 0 16px !important;
    background: #000 !important;
    color: #fff !important;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.newsletter-offer .newsletter-offer__form .klaviyo-form .klaviyo-form-button:hover,
.newsletter-offer .newsletter-offer__form .klaviyo-form .klaviyo-form-button:focus-visible {
    background: #333 !important;
    border-color: #333 !important;
}

.newsletter-offer__form .klaviyo-emailinput input:focus-visible,
.newsletter-offer .newsletter-offer__form .klaviyo-form .klaviyo-form-button:focus-visible {
    outline: 2px solid #ff3d00 !important;
    outline-offset: 2px;
}

.newsletter-offer__consent {
    max-width: 450px;
    margin: 24px auto 0;
    font-family: var(--newsletter-offer-body-font);
    font-size: 10px;
    line-height: 1.3;
    color: #000;
}

.newsletter-offer__consent p {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.newsletter-offer__consent a {
    color: inherit;
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    .newsletter-offer__hero {
        display: flex;
        flex-direction: column;
    }

    /* Stacks under the copy instead of sitting behind it */
    .newsletter-offer__media {
        position: relative;
        order: 2;
        top: auto;
    }

    .newsletter-offer__media img {
        height: auto;
    }

    .newsletter-offer__media::after {
        background: linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, 0) 35%);
    }

    .newsletter-offer__content {
        padding: 50px 30px 20px;
    }

    .newsletter-offer__heading {
        margin-bottom: 24px;
        font-size: 28px;
        line-height: 1.15;
    }

    .newsletter-offer__intro,
    .newsletter-offer__body {
        margin-bottom: 20px;
    }

    .newsletter-offer__form {
        max-width: 285px;
        margin-top: 28px;
    }

    .newsletter-offer__form form.klaviyo-form > div:first-child {
        flex-direction: column !important;
    }

    .newsletter-offer__form form.klaviyo-form > div:first-child > div,
    .newsletter-offer__form form.klaviyo-form > div:first-child > div:last-child {
        flex: none;
    }

    .newsletter-offer__form .klaviyo-emailinput input,
    .newsletter-offer .newsletter-offer__form .klaviyo-form .klaviyo-form-button {
        height: 42px !important;
        font-size: 14px !important;
    }

    .newsletter-offer__form .klaviyo-emailinput input {
        text-align: center;
    }

    .newsletter-offer__consent {
        max-width: 285px;
        margin-top: 36px;
        font-size: 11.5px;
    }
}