/*
The card is hidden until newsletterModal.js opens it, so it fails closed if the
script never runs. visibility (rather than display) keeps the transition alive
and keeps the card out of the tab order and the accessibility tree while shut.
Mobile slides up from the bottom, desktop slides in from the right.
*/

.newsletterModal {
    position: fixed;
    z-index: 900; /* below the country / investor disclaimer, which owns 1000 */
    left: 1.6rem;
    right: 1.6rem;
    bottom: 1.6rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(100% + 1.6rem));
    transition: transform 400ms ease-in-out,
    opacity 400ms ease-in-out,
    visibility 0s linear 400ms;
}

.newsletterModal.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.newsletterModal__card {
    position: relative;
    background-color: var(--color-beige-light);
    padding: 3.2rem 2.4rem;
    /* Not in the comp — the card floats over white page content and needs the
       separation. Drop this rule if the designer wants it flat. */
    box-shadow: 0 0.2rem 2.4rem rgba(15, 45, 70, 0.14);
}

.newsletterModal__close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--color-blue);
    transition: opacity 200ms;
}

.newsletterModal__close svg {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
}

/* icon-close.twig hard-codes fill="white" for use on dark backgrounds */
.newsletterModal__close svg rect {
    fill: currentColor;
}

.newsletterModal__heading {
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.03em;
    color: var(--color-blue);
    margin: 0 0 1.2rem;
    padding-right: 3.2rem; /* clear of the close button */
}

.newsletterModal__description,
.newsletterModal__description p {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.03em;
    color: var(--color-gray);
    margin: 0;
}

.newsletterModal__description {
    margin-bottom: 3.2rem;
}

@media screen and (min-width: 940px) {
    .newsletterModal {
        left: auto;
        right: 4rem;
        bottom: 4rem;
        width: 45.4rem;
        transform: translateX(calc(100% + 4rem));
    }

    .newsletterModal.is-open {
        transform: translateX(0);
    }

    .newsletterModal__card {
        padding: 4.8rem;
    }

    .newsletterModal__heading {
        padding-right: 0;
    }

    .newsletterModal__description {
        margin-bottom: 5.6rem;
    }
}

@media (hover: hover) {
    .newsletterModal__close:hover {
        opacity: 0.5;
        background: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .newsletterModal {
        transform: none;
        transition: opacity 200ms linear, visibility 0s linear 200ms;
    }

    .newsletterModal.is-open {
        transform: none;
    }
}