/* Rouse Refresh ESG page (Views/GrassRootNew.cshtml).
   Figma: "Environment, Social & Governance". Hero layout lives in hero.css;
   this file only owns the text sections below it.
   Sections stack full-width in a single column.
   Tiers: XLarge >=1440, Large 1000–<1440, Medium 750–<1000, Small <750.
   Section title is 40px down to 1000px, then 24px; always SemiBold. */
.rr-esg {
    --esg-navy: #171245;
    --esg-purple: #6a59fd;
    --esg-white: #f9f9f9;
    --esg-gutter: 72px;
    --esg-subtitle-size: 28px;
    --esg-heading-font: 'Archivo', sans-serif;
    --esg-body-font: 'Noto Sans', sans-serif;
    color: var(--esg-navy);
    background: var(--esg-white);
    font: 400 16px/1.15 var(--esg-body-font);
    letter-spacing: 0;
}

.rr-esg *,
.rr-esg *::before,
.rr-esg *::after {
    box-sizing: border-box;
}

.rr-esg__body {
    padding: 80px var(--esg-gutter);
}

.rr-esg__grid {
    --esg-section-gap: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--esg-section-gap);
    max-width: 1296px;
    margin: 0 auto;
}

.rr-esg__group > .rr-esg__block + .rr-esg__block {
    margin-top: var(--esg-section-gap);
}

.rr-esg__group > .rr-esg__block + .rr-esg__block--subsection {
    margin-top: 24px;
}

/* Content in a section's own "Content Center" shows full width (one column); items added
   to its "Section List" show as a two-column grid. So the editor chooses one or two columns
   by where the content goes. The Section List grid collapses to one column below 1000px. */
.rr-esg__subs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 24px;
    align-items: start;
    min-width: 0;
    margin-top: var(--esg-section-gap);
}

.rr-esg__block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    /* Keep anchored sections clear of the fixed header. */
    scroll-margin-top: 96px;
}

html.rr-refresh-page .rr-esg .rr-esg__title {
    margin: 0;
    color: inherit;
    font: 600 40px/1.05 var(--esg-heading-font) !important;
    letter-spacing: 0;
    text-transform: none;
}

html.rr-refresh-page .rr-esg .rr-esg__subtitle {
    margin: 0;
    color: inherit;
    font: 600 var(--esg-subtitle-size)/1.15 var(--esg-heading-font) !important;
    letter-spacing: 0;
    text-transform: none;
}

.rr-esg__rte {
    color: inherit;
    font: 400 16px/1.15 var(--esg-body-font);
    overflow-wrap: break-word;
}

    .rr-esg__rte > * {
        margin: 0;
    }

    .rr-esg__rte > * + * {
        margin-top: 24px;
    }

    .rr-esg__rte :is(p, li, span, strong) {
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    /* Keep the navy colour for legacy paragraphs wrapped in <strong>. */
    .rr-esg__rte p > strong:only-child,
    .rr-esg__rte p > strong:only-child * {
        color: var(--esg-navy) !important;
    }

    .rr-esg__rte :is(ul, ol) {
        padding-left: 24px;
    }

    .rr-esg__rte ul {
        list-style: disc;
    }

    .rr-esg__rte li + li {
        margin-top: 12px;
    }

    /* Lists stack in a single column. Intentional multi-column layouts (e.g. the
       "Our priorities" columns) are built by the editor with a <div class="row">, below. */

    /* Inner RTE headings use Noto Sans in a clear size scale (h2 > h3 > h4 > h5 > h6), all
       below the section title (40px) and subsection title (28px), so the editor's chosen
       heading level is visible. Mobile sizes are in the <750px media query. */
    .rr-esg__rte :is(h2, h3, h4, h5, h6) {
        color: inherit;
    }

    .rr-esg__rte h2 { font: 600 26px/1.1 var(--esg-body-font) !important; }
    .rr-esg__rte h3 { font: 600 20px/1.1 var(--esg-body-font) !important; }
    .rr-esg__rte h4 { font: 500 18px/1.15 var(--esg-body-font) !important; }
    .rr-esg__rte h5 { font: 500 16px/1.15 var(--esg-body-font) !important; }
    .rr-esg__rte h6 { font: 500 14px/1.15 var(--esg-body-font) !important; }

    /* Editor-controlled multi-column layout: a <div class="row"> with child column
       divs renders as equal, responsive columns. Supports both the Bootstrap ".col"
       and a plain ".column" convention; collapses to one column on narrow screens. */
    .rr-esg__rte .row {
        display: flex;
        flex-wrap: wrap;
        gap: 48px;
        margin: 0;
    }

    .rr-esg__rte .row > * {
        flex: 1 1 300px;
        min-width: 0;
        padding: 0;
    }

    .rr-esg__rte a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color .2s ease;
    }

        .rr-esg__rte a:hover,
        .rr-esg__rte a:focus-visible {
            color: var(--esg-purple) !important;
        }

        .rr-esg__rte a:focus-visible {
            outline: 2px solid var(--esg-purple);
            outline-offset: 2px;
        }

    .rr-esg__rte img {
        max-width: 100%;
        height: auto;
    }

@media (prefers-reduced-motion: reduce) {
    .rr-esg__rte a {
        transition: none;
    }
}

@media (max-width: 1439.98px) {
    .rr-esg {
        --esg-gutter: 40px;
        --esg-subtitle-size: 24px;
    }

    .rr-esg__body {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

@media (max-width: 999.98px) {
    .rr-esg {
        --esg-gutter: 20px;
        --esg-subtitle-size: 20px;
    }

    .rr-esg__body {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    html.rr-refresh-page .rr-esg .rr-esg__title {
        font-size: 24px !important;
    }

    .rr-esg__subs {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 749.98px) {
    .rr-esg {
        --esg-gutter: 16px;
        --esg-subtitle-size: 18px;
    }

    .rr-esg__body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .rr-esg__grid {
        --esg-section-gap: 48px;
    }

    .rr-esg__block {
        gap: 16px;
    }

    .rr-esg__rte h2 { font-size: 22px !important; }
    .rr-esg__rte h3 { font-size: 18px !important; }
    .rr-esg__rte :is(h4, h5, h6) { font-size: 16px !important; }
}