/*
    Rouse Refresh footer
    Used by Views/Partials/RouseRefresh/footer-new.cshtml. Everything is scoped to .rr-footer so the
    old footer rules (footer, .footer-top, .social-icons ...) do not apply.

    Values taken from the Figma "Footer" component (XLarge, 1440 wide).
    Fonts: Archivo Medium (bar title, column titles, buttons), Noto Sans (paragraph, links) - both loaded by _base.css;
    Inter for the copyright line (loaded below).
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');

footer.rr-footer {
    --rr-footer-bg: #171245;          /* Colour/Dark Blue */
    --rr-footer-purple: #6A59FD;      /* Colour/Purple */
    --rr-footer-text: #F9F9F9;        /* Colour/Smooth White */
    --rr-footer-gutter: 72px;
    --rr-footer-heading-font: 'Archivo', 'Noto Sans', 'Segoe UI', Arial, sans-serif;
    --rr-footer-body-font: 'Noto Sans', 'Segoe UI', Arial, sans-serif;

    margin: 0;
    padding: 80px 0;
    background-color: var(--rr-footer-bg);
    color: var(--rr-footer-text);
}
footer.rr-footer a {
        text-decoration: none;
    }
footer.rr-footer h2,
    footer.rr-footer h3,
    footer.rr-footer p,
    footer.rr-footer ul {
        margin: 0;
    }
.rr-footer__inner {
    max-width: calc(1296px + (var(--rr-footer-gutter) * 2));
    margin: 0 auto;
    padding: 0 var(--rr-footer-gutter);
}
.rr-footer__help {
    /* Match the wide content's fluid gutter without moving the other footer content. */
    margin-inline: calc(clamp(16px, calc(5 * var(--rr-design-unit, 1vw)), 72px) - var(--rr-footer-gutter));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 48px; /* Figma: 24px 32px - widened so the title and buttons sit evenly inset */
    border-radius: 8px;
    background-color: var(--rr-footer-purple);
}
footer.rr-footer .rr-footer__help-title {
    color: var(--rr-footer-text);
    font-family: var(--rr-footer-heading-font);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.05;
}
.rr-footer__help-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
footer.rr-footer .rr-footer__btn {
    gap: 10px;
}
footer.rr-footer .rr-footer__btn i {
        width: 16px;
        font-size: 14px;
        text-align: center;
    }
footer.rr-footer .rr-footer__btn-icon {
        display: block;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        /* Use the uploaded icon's silhouette and inherit the button colour in every state. */
        background-color: currentColor;
        -webkit-mask-image: var(--rr-footer-icon);
        mask-image: var(--rr-footer-icon);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
.rr-footer__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-top: 64px;
}
.rr-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 500px;
    max-width: 100%;
}
.rr-footer__logo {
    display: inline-block;
    align-self: flex-start;
}
.rr-footer__logo img {
        display: block;
        width: auto;
        height: 24.28px;
        filter: brightness(0) invert(1);
    }
.rr-footer__about,
.rr-footer__about * {
    color: var(--rr-footer-text) !important;
    font-family: var(--rr-footer-body-font) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-align: left !important;
}
.rr-footer__about p {
        margin: 0;
    }
.rr-footer__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    margin-left: auto;
}
.rr-footer__column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px 32px;
}
footer.rr-footer .rr-footer__column,
footer.rr-footer .rr-footer__column-title {
    color: var(--Colour-Smooth-White, #F9F9F9);
    font-family: var(--rr-footer-heading-font);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 105%;
}
footer.rr-footer a.rr-footer__column-title:hover,
footer.rr-footer a.rr-footer__column-title:focus,
footer.rr-footer a.rr-footer__column-title:active {
    color: var(--Colour-Smooth-White, #F9F9F9) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.rr-footer__links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    list-style: none;
}
footer.rr-footer .rr-footer__links a {
    color: var(--rr-footer-text);
    font-family: var(--rr-footer-body-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    opacity: 0.7;
    transition: opacity .2s ease;
}
footer.rr-footer .rr-footer__links a:hover {
        opacity: 1;
    }
.rr-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
}
.rr-footer__social {
    display: flex;
    align-items: center;
    gap: 31px;
}
footer.rr-footer .rr-footer__social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 20px;
        color: var(--rr-footer-text);
        font-size: 20px;
        line-height: 20px;
    }
footer.rr-footer .rr-footer__social a svg {
            width: 18px;
            height: 18px;
        }
footer.rr-footer .rr-footer__social a:hover {
            color: var(--rr-footer-purple);
        }
.rr-footer__copyright,
.rr-footer__copyright * {
    color: var(--rr-footer-text);
    font-family: 'Inter', var(--rr-footer-body-font);
    font-size: 10.67px;
    line-height: 17px;
    letter-spacing: 0.08px;
}
.rr-footer__copyright p {
        margin: 0;
    }

/* ---------- Responsive ---------- */

@media (max-width: 1439.98px) {
footer.rr-footer {
        --rr-footer-gutter: 40px;
    }
}

@media (max-width: 999.98px) {
footer.rr-footer {
        --rr-footer-gutter: 20px;
        padding: 56px 0;
    }
.rr-footer__help {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }
footer.rr-footer .rr-footer__help-title {
        font-size: 26px;
    }
.rr-footer__main {
        flex-direction: column;
        gap: 40px;
        margin-top: 48px;
    }
.rr-footer__brand {
        width: auto;
    }
.rr-footer__columns {
        align-self: stretch;
        margin: 0;
    }
.rr-footer__column {
        justify-content: flex-start;
        gap: 48px;
    }
}

@media (max-width: 749.98px) {
.rr-footer__column {
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
    }
}

@media (max-width: 749.98px) {
.rr-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}