/*
 * Strategy & Impact page, Sep 2026.
 *
 * Hand-written: the theme's gulp build is not run on this project, so nothing
 * here goes through assets/scss or dist/. Enqueued from functions.php after
 * the compiled theme stylesheet.
 *
 * Visual idea: the subject is documents - an annual record. So the page reads
 * as a ledger rather than a set of cards: thin rules, the year as the marker,
 * the report cover treated as a physical object. One animated moment only,
 * the figures counting up; nothing else moves on its own.
 */

.wa-impact {
    --wa-green-900: #264410;
    --wa-green-600: #599130;
    --wa-paper: #ffffff;
    --wa-paper-sunk: #f7f8f4;
    --wa-rule: #d8dcd2;
    --wa-rule-strong: #264410;
    --wa-ink: #2c2f28;
    --wa-ink-quiet: #5c6157;

    color: var(--wa-ink);
}

/* The theme bolds the first paragraph of editor content as a standfirst.
   Here the figures already carry that job, so the intro stays plain. */
.rjc-editor-content .wa-impact__intro,
.rjc-editor-content.with-excerpt > .wa-impact .wa-impact__intro {
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 38em;
    color: var(--wa-ink);
    margin: 0 0 3rem;
}

/* ---------------------------------------------------------------
   Figures
   A band of numbers read left to right like a record, divided by
   hairlines rather than sat in separate boxes.
   --------------------------------------------------------------- */
.wa-figures {
    background: var(--wa-green-900);
    padding: 2.5rem 2rem 2.25rem;
    margin: 0 0 3rem;
}

.wa-figures__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.wa-figures__item {
    padding: 0 1.75rem;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.wa-figures__item:first-child {
    padding-left: 0;
    border-left: 0;
}

.wa-figures__item:last-child {
    padding-right: 0;
}

.wa-figures__value {
    display: block;
    /* shrinks rather than wraps: a six-digit figure plus a unit would break
       onto a second line and drop that column's rule out of line */
    font-size: clamp(2.125rem, 3.4vw, 3.125rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    color: #ffffff;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* The rule under each value fills as its number counts. */
.wa-figures__rule {
    display: block;
    height: 2px;
    width: 100%;
    margin: .9rem 0 .8rem;
    background: rgba(255, 255, 255, .16);
    position: relative;
    overflow: hidden;
}

.wa-figures__rule::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wa-green-600);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.wa-figures__item.is-counted .wa-figures__rule::after {
    transform: scaleX(1);
}

/* Three levels: the figure, what it counts, then the qualifier. The middle one
   carries the meaning, so it gets the weight - the figure alone says nothing. */
.wa-figures__label {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: #f2f7ea;
    max-width: 14em;
}

.wa-figures__note {
    display: block;
    margin-top: .3rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.45;
    color: #b3caa0;
    max-width: 15em;
}

/* Side by side, hold two lines for every label so the notes below start on the
   same line across all four columns. Stacked, each one takes what it needs. */
@media (min-width: 992px) {
    .wa-figures__label {
        min-height: 2.87rem;
    }
}

/* ---------------------------------------------------------------
   Latest report
   The cover is the object; the type sits beside it, not in a card.
   --------------------------------------------------------------- */
.wa-impact__heading {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--wa-green-900);
    margin: 0 0 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--wa-rule-strong);
}

.wa-latest {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: flex-start;
    margin: 0 0 3.5rem;
}

.wa-latest__cover {
    flex: 0 0 auto;
    width: 212px;
    max-width: 45%;
    height: auto;
    display: block;
    /* directional, like paper lifted off the page - not a soft grey halo */
    box-shadow: 10px 10px 0 0 var(--wa-paper-sunk), 11px 11px 0 1px var(--wa-rule);
}

.wa-latest__body {
    flex: 1 1 22rem;
}

.wa-latest__title {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--wa-green-900);
    margin: 0 0 .6rem;
}

.wa-latest__meta {
    font-size: .9375rem;
    color: var(--wa-ink-quiet);
    margin: 0 0 1.25rem;
}

.wa-latest__summary {
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 34em;
    margin: 0 0 1.75rem;
}

/* ---------------------------------------------------------------
   Buttons
   Theme radius kept (3px) so these read as the site's buttons.
   --------------------------------------------------------------- */
.wa-btn {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .9rem 1.6rem;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.wa-btn--solid {
    background: var(--wa-green-600);
    color: #ffffff;
    border: 2px solid var(--wa-green-600);
}

.wa-btn--solid:hover,
.wa-btn--solid:focus {
    background: var(--wa-green-900);
    border-color: var(--wa-green-900);
    color: #ffffff;
    text-decoration: none;
}

.wa-btn--quiet {
    background: transparent;
    color: #2f5a17;
    border: 2px solid var(--wa-green-600);
}

.wa-btn--quiet:hover,
.wa-btn--quiet:focus {
    background: var(--wa-green-600);
    color: #ffffff;
    text-decoration: none;
}

.wa-btn:focus-visible {
    outline: 3px solid var(--wa-green-900);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Past reports
   An index: the year is the marker, the row is the record.
   --------------------------------------------------------------- */
.wa-archive {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 3.5rem;
    font-size: 1.0625rem;
}

.wa-archive caption {
    caption-side: top;
    text-align: left;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--wa-green-900);
    margin: 0 0 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--wa-rule-strong);
}

.wa-archive th {
    text-align: left;
    font-size: .875rem;
    font-weight: 600;
    color: var(--wa-ink-quiet);
    padding: 0 .75rem .7rem;
    border-bottom: 1px solid var(--wa-rule);
}

.wa-archive th:first-child,
.wa-archive td:first-child {
    padding-left: 0;
}

.wa-archive th:last-child,
.wa-archive td:last-child {
    padding-right: 0;
}

.wa-archive td {
    padding: 1.15rem .75rem;
    border-bottom: 1px solid var(--wa-rule);
    vertical-align: baseline;
}

/* The theme stripes editor tables (rgba(0,0,0,.05) on odd rows), which cancels
   out the hover below. An index of four rows does not need stripes; the hover
   is the useful signal, so it gets the row to itself. */
.rjc-editor-content .wa-archive tbody tr,
.rjc-editor-content .wa-archive tbody tr:nth-of-type(2n + 1) {
    background: transparent;
    transition: background-color .15s ease;
}

.rjc-editor-content .wa-archive tbody tr:hover,
.rjc-editor-content .wa-archive tbody tr:nth-of-type(2n + 1):hover {
    background: #eef1e8;
}

.wa-archive__year {
    font-weight: 700;
    color: var(--wa-green-900);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wa-archive__title {
    color: var(--wa-ink);
}

.wa-archive__kind {
    color: var(--wa-ink-quiet);
    font-size: .9375rem;
}

.wa-archive__get {
    text-align: right;
    white-space: nowrap;
}

.wa-archive__get a {
    color: #2f5a17;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}

.wa-archive__get a:hover,
.wa-archive__get a:focus {
    color: var(--wa-green-900);
    border-bottom-color: var(--wa-green-900);
    text-decoration: none;
}

/* ---------------------------------------------------------------
   Strategy
   Held apart from the reports: it is a plan, not a record. Same
   treatment as the latest report but quieter - the document shown as
   an object, on the dark green so it reads as a different kind of thing.
   --------------------------------------------------------------- */
.wa-strategy {
    background: var(--wa-green-900);
    padding: 2.25rem 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem 2.5rem;
    align-items: center;
}

.wa-strategy__cover {
    flex: 0 0 auto;
    width: 116px;
    height: auto;
    display: block;
    box-shadow: 7px 7px 0 0 rgba(255, 255, 255, .1);
}

.wa-strategy__text {
    flex: 1 1 18rem;
}

.wa-strategy__term {
    display: block;
    font-size: .875rem;
    font-weight: 400;
    color: #b3caa0;
    margin-bottom: .3rem;
}

.wa-strategy__text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #ffffff;
    margin: 0 0 .5rem;
}

.wa-strategy__text p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #dce8d0;
    max-width: 30em;
}

.wa-btn--ondark {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, .5);
}

.wa-btn--ondark:hover,
.wa-btn--ondark:focus {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--wa-green-900);
    text-decoration: none;
}

.wa-btn--ondark:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Temporary homepage announcement
   --------------------------------------------------------------- */
.wa-announce {
    /* WasteAid orange ($orange in assets/scss/give.scss). White on it is 3.4:1,
       which passes WCAG AA only as large text - keep text 20px and bold. */
    background: #DD683E;
    border-bottom: 3px solid #b8522c;
    padding: 1.15rem 0;
}

.wa-announce__inner {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    align-items: center;
}

.wa-announce__text {
    flex: 1 1 22rem;
    margin: 0;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.45;
}

.wa-announce__link {
    flex: 0 0 auto;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    border-bottom: 2px solid #ffffff;
    padding-bottom: 2px;
    transition: border-color .18s ease, color .18s ease;
}

.wa-announce__link:hover,
.wa-announce__link:focus {
    color: #ffffff;
    border-bottom-color: #264410;
    text-decoration: none;
}

/* ---------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------- */
@media (max-width: 991px) {
    .wa-figures__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 0;
    }

    .wa-figures__item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .wa-figures {
        padding: 2rem 1.5rem;
    }

    .wa-figures__value {
        font-size: 2.5rem;
    }

    .wa-figures__item {
        padding: 0 1.25rem;
    }

    .wa-impact__heading,
    .wa-archive caption {
        font-size: 1.375rem;
    }

    .wa-latest {
        gap: 1.75rem;
    }

    .wa-latest__cover {
        width: 150px;
        box-shadow: 7px 7px 0 0 var(--wa-paper-sunk), 8px 8px 0 1px var(--wa-rule);
    }

    .wa-latest__title {
        font-size: 1.5rem;
    }

    /* the kind of report is the first thing to go when space is short */
    .wa-archive__kind,
    .wa-archive th:nth-child(3) {
        display: none;
    }

    .wa-archive {
        font-size: 1rem;
    }

    .wa-archive td {
        padding: 1rem .5rem;
    }

    .wa-strategy {
        padding: 1.5rem;
    }
}

@media (max-width: 479px) {
    .wa-figures__list {
        grid-template-columns: 1fr;
    }

    .wa-figures__item,
    .wa-figures__item:nth-child(3) {
        padding: 0;
        border-left: 0;
    }

    .wa-latest__cover {
        max-width: 60%;
    }
}

/* ---------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wa-figures__rule::after {
        transition: none;
        transform: scaleX(1);
    }

    .wa-btn,
    .wa-archive tbody tr,
    .wa-archive__get a,
    .wa-announce__link {
        transition: none;
    }
}