/*
    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);
}

/* ---------- "How can we help you?" bar (Help_CTA_Bar: 1296 x 89, padding 24/32, radius 8) ---------- */

.rr-footer__help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px;
    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;
}

/* CTA buttons: padding 12/16/12/12, 10px icon gap, radius 10, Archivo Medium 16 / 105%, -1.5% tracking */
footer.rr-footer .rr-footer__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 12px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--rr-footer-text);
    font-family: var(--rr-footer-heading-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.015em;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

    footer.rr-footer .rr-footer__btn i {
        width: 16px;
        font-size: 14px;
        text-align: center;
    }

    footer.rr-footer .rr-footer__btn.rr-footer__btn--dark {
        background-color: var(--rr-footer-bg);
    }

        footer.rr-footer .rr-footer__btn.rr-footer__btn--dark:hover {
            background-color: var(--rr-footer-text);
            color: var(--rr-footer-bg);
        }

    footer.rr-footer .rr-footer__btn.rr-footer__btn--outline {
        border-color: var(--rr-footer-text);
        background-color: transparent;
    }

        footer.rr-footer .rr-footer__btn.rr-footer__btn--outline:hover {
            background-color: var(--rr-footer-text);
            color: var(--rr-footer-bg);
        }

/* ---------- Logo, paragraph and link columns (64px under the bar) ---------- */

.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: 431px;
    max-width: 100%;
}

.rr-footer__logo {
    display: inline-block;
    align-self: flex-start;
}

    /* Logo 103 x 24.28. The CMS logo is the dark version; show it white like the design. */
    .rr-footer__logo img {
        display: block;
        width: auto;
        height: 24.28px;
        filter: brightness(0) invert(1);
    }

/* disclaimerContent carries inline editor styles for the old footer (right-aligned, 8pt, italic),
   so everything inside is normalised to the design: Noto Sans 14 / 105%, -3% tracking. */
.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.05 !important;
    letter-spacing: -0.03em !important;
    text-align: left !important;
}

    .rr-footer__about p {
        margin: 0;
    }

/* Footer_Link_Columns: 3 x 160px, 48px apart */
.rr-footer__columns {
    display: grid;
    grid-template-columns: repeat(3, 160px);
    gap: 48px;
}

/* Each column stacks title + links with 16px between every item */
.rr-footer__column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

footer.rr-footer .rr-footer__column-title {
    color: var(--rr-footer-text);
    font-family: var(--rr-footer-heading-font);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.05;
}

.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;
    }

/* ---------- Social icons and copyright (48px under the columns) ---------- */

.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;
}

    /* Font Awesome 5 Brands, 20px */
    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);
        }

/* Inter 10.67 / 17px */
.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 (no Figma frame for these sizes yet) ---------- */

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

@media (max-width: 1024px) {
    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 {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 32px;
    }
}

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