/* ==========================================================================
   Footer pattern
   ========================================================================== */

.wp-footer-v2-container {
    /* Figma: width 944.884px; height 365.41px; right: -104.305px; top: -253.135px */
    background-image: url("../../decorations/background-spine.svg");
    background-repeat: no-repeat;
    /* Right and top anchored: the CTA Banner V2 above draws the other half of
       this spine against the same right edge (see cta-banner-v2.css), and the
       two must meet exactly at the shared edge. */
    background-position: right 0 top 0;
}

/* Wide screens: scale with the footer width so the spine keeps meeting the
   CTA banner's, which scales the same way. */
@media (min-width: 1440px) {
    .wp-footer-v2-container {
        background-size: calc(801 / 1440 * 100%) auto;
    }
}

.footer-v2-copyright-row {
    border-top: none;
}

/* Footer links: fade instead of underline. */
.wp-footer-v2-container .wp-block-navigation a,
.footer-v2-bottom-link a,
.footer-v2-copyright-row a {
    text-decoration: none;
    transition: opacity var(--wp--custom--transition--base);
}

.wp-footer-v2-container .wp-block-navigation a:hover,
.footer-v2-bottom-link a:hover,
.footer-v2-copyright-row a:hover {
    opacity: 0.7;
}

/* Newsletter form: 46px input and button, pill shaped, side by side. */
.wp-footer-v2-container .mc4wp-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    justify-content: flex-end;
}

.wp-footer-v2-container .mc4wp-form input[type="email"] {
    flex: 1 1 200px;
    max-width: 280px;
    height: 46px;
    padding: 11px 16px;
    margin: 0;
    color: var(--wp--preset--color--background);
    font-family: var(--wp--preset--font-family--open-sans);
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.5;
    border-radius: 30px;
    border: 1px solid #F2F7F566;
    background: var(--wp--preset--color--primary);
    box-shadow: none;
}

.wp-footer-v2-container .mc4wp-form input[type="email"]::placeholder {
    color: #F2F7F552;
    opacity: 1;
}

.wp-footer-v2-container .mc4wp-form input[type="email"]:focus-visible {
    outline: none;
    border-color: var(--wp--preset--color--background);
}

.wp-footer-v2-container .mc4wp-form input[type="submit"] {
    height: 46px;
    padding: 9px 24px 11px;
    margin: 0;
    color: var(--wp--preset--color--background);
    font-family: var(--wp--preset--font-family--open-sans);
    font-size: var(--wp--preset--font-size--base);
    font-weight: var(--wp--custom--font-weight--semibold);
    line-height: 1.5;
    letter-spacing: -0.02em;
    border-radius: 30px;
    border: 1px solid var(--wp--preset--color--secondary);
    background: var(--wp--preset--color--secondary);
    cursor: pointer;
    transition: var(--wp--custom--transition--base);
    transition-property: background-color, border-color, color;
}

.wp-footer-v2-container .mc4wp-form input[type="submit"]:hover {
    background: var(--wp--preset--color--background);
    border-color: var(--wp--preset--color--background);
    color: var(--wp--preset--color--primary);
}

@media (width < 768px) {
    .footer-v2-copyright-row,
    .footer-v2-copyright-row p {
        text-align: center;
    }

    .wp-footer-v2-container .mc4wp-form-fields {
        justify-content: flex-start;
    }

    .wp-footer-v2-container .mc4wp-form input[type="email"] {
        max-width: none;
    }
}