/* ==========================================================================
   My Contribution ("Your impact") block
   --------------------------------------------------------------------------
   Colours come from the scheme palette: var(--scheme-*, fallback). Admin block colour settings arrive as
   block-scoped --cb-* custom properties, set on #contribution-app-block only after validation and contrast
   checks in modules/conversions/frontend/views/blocks/ContributionsBlock.php. --cb-text is always set: the
   scheme text colour when it reaches 4.5:1 on white, otherwise #000000. --cb-heading (the block <h1>) is brand
   primary when it reaches 4.5:1 on the page background, else the scheme text colour, else #000000.
   Neutrals: #FFFFFF card/bar fills, #000000 focus ring, rgba(0,0,0,…) shadows, borders and grid lines.
   ========================================================================== */

#contribution-app-block {
    padding: 8px 0 24px;
}

/* !important only to beat the global "h1-h6 { color: primary !important }" in views/css/scheme.php, which can fail
   contrast on the default page background for a light brand. The id selector makes this rule win; the colour is
   chosen in ContributionsBlock.php (--cb-heading). */
#contribution-app-block .cb-heading {
    color: var(--cb-heading, #000000) !important;
}

.my-contribution-block .cb-heading {
    margin: 0 0 20px;
    font-size: 28px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Built-in default wording (e.g. "MORE INFO", "GLOBAL") shown in sentence case. Admin text is untouched. */
.my-contribution-block .cb-default-case {
    display: inline-block;
    text-transform: lowercase;
}

.my-contribution-block .cb-default-case::first-letter {
    text-transform: uppercase;
}

.my-contribution-block .cb-admin-text {
    text-transform: none;
}

/* Keep keyboard-focused controls clear of the sticky site header and the feedback tab (WCAG 2.4.11). */
.my-contribution-block button,
.my-contribution-block select {
    scroll-margin-top: 120px;
    scroll-margin-bottom: 80px;
}

/* ---- Controls bar: tab pills + activity picker ---- */

.my-contribution-block .cb-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.my-contribution-block .cb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.my-contribution-block .cb-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    max-width: 100%;
    margin: 0;
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background-color: var(--cb-pill-bg, var(--scheme-primary, #2E7D32));
    color: var(--cb-pill-text, var(--scheme-on-primary, #FFFFFF));
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.my-contribution-block .cb-pill:hover,
.my-contribution-block .cb-pill:focus-visible,
.my-contribution-block .cb-pill.is-active {
    background-color: var(--cb-pill-active-bg, var(--scheme-secondary, #1B5E20));
    color: var(--cb-pill-active-text, var(--scheme-on-secondary, #FFFFFF));
}

/* Non-colour cue for the selected pill (REQ-39): a 2px ring in its text colour, inset 2px from the edge. */
.my-contribution-block .cb-pill.is-active {
    box-shadow: inset 0 0 0 2px var(--cb-pill-active-bg, var(--scheme-secondary, #1B5E20)),
                inset 0 0 0 4px var(--cb-pill-active-text, var(--scheme-on-secondary, #FFFFFF));
}

.my-contribution-block .cb-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
}

.my-contribution-block .cb-picker-label {
    margin: 0;
    color: var(--cb-label, var(--cb-text, var(--scheme-text, #000000)));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.my-contribution-block .cb-select {
    width: auto;
    min-width: 240px;
    max-width: 100%;
    height: auto;
    min-height: 38px;
    margin: 0;
    padding: 6px 10px;
    /* rgba(0,0,0,0.55) on #FFFFFF renders as #737373: 4.7:1, above the 3:1 a control border needs (1.4.11). */
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 8px;
    background-color: #FFFFFF;
    color: var(--cb-text, var(--scheme-text, #000000));
    font-size: 14px;
    box-shadow: none;
}

/* ---- Layout ---- */

.my-contribution-block .cb-layout > [class*="col-"] {
    min-width: 0;
    margin-bottom: 20px;
}

/* ---- Chart card ---- */

/* Overrides the shared rounded-box rule in style.css so only this one radius and shadow apply (REQ-3). */
#contribution-app-block .contribution-chart-container {
    position: relative;
    min-width: 0;
    padding: 18px 18px 10px;
    background: #FFFFFF;
    border-radius: 14px;
    -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* !important only to beat the global "h1-h6 { color: primary !important }" in scheme.php, which is not
   guaranteed to be readable on white. */
#contribution-app-block .cb-chart-title {
    margin: 0 0 8px;
    color: var(--cb-text, var(--scheme-text, #000000)) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.my-contribution-block #contribution-chart {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: transparent;
}

/* ---- "Show data table" toggle and the data table (A11Y-4) ---- */

.my-contribution-block .cb-table-toggle {
    display: inline-flex;
    align-items: center;
    min-width: 24px;
    min-height: 24px;
    max-width: 100%;
    margin: 6px 0 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cb-text, var(--scheme-text, #000000));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

/* Styles apply only while the table is shown; while it is .sr-only, Bootstrap's visually-hidden rules must win. */
.my-contribution-block .cb-data-table:not(.sr-only) {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 4px;
    border-collapse: collapse;
    color: var(--cb-text, var(--scheme-text, #000000));
    font-size: 13px;
    line-height: 1.3;
}

/* Bootstrap gives table captions #777 (4.5:1 on white only barely); use the guarded text colour instead. */
.my-contribution-block .cb-data-table caption {
    padding: 4px 0;
    color: var(--cb-text, var(--scheme-text, #000000));
    font-weight: 700;
}

.my-contribution-block .cb-data-table th,
.my-contribution-block .cb-data-table td {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    text-align: left;
    overflow-wrap: anywhere;
}

/* ---- Metric cards ---- */

.my-contribution-block .cb-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.my-contribution-block .cb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 12px 10px 10px;
    background: #FFFFFF;
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
}

/* Selected card (REQ-40): 2px outline in primary when it reaches 3:1 on white, else the text colour. */
.my-contribution-block .cb-card.is-selected {
    border-color: var(--cb-selected, var(--scheme-text, #000000));
}

.my-contribution-block .cb-card-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 24px;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--cb-text, var(--scheme-text, #000000));
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.my-contribution-block .cb-card-title {
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.my-contribution-block .cb-card-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.my-contribution-block .cb-card-value {
    max-width: 100%;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* "More info" button */
.my-contribution-block .custom-more-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 24px;
    min-height: 24px;
    max-width: 100%;
    margin: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cb-more-info, var(--cb-text, var(--scheme-text, #000000)));
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.my-contribution-block .custom-more-info-btn:hover {
    color: var(--cb-more-info-hover, var(--cb-text, var(--scheme-text, #000000)));
    text-decoration: underline;
}

.my-contribution-block .icon-container {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--cb-more-info-icon, var(--cb-text, var(--scheme-text, #000000)));
    border-radius: 50%;
}

.my-contribution-block .icon-container .fa-info {
    color: var(--cb-more-info-icon, var(--cb-text, var(--scheme-text, #000000)));
    font-size: 12px;
    line-height: 1;
}

.my-contribution-block .custom-more-info-btn:hover .icon-container {
    border-color: var(--cb-more-info-icon-hover, var(--cb-text, var(--scheme-text, #000000)));
}

.my-contribution-block .custom-more-info-btn:hover .icon-container .fa-info {
    color: var(--cb-more-info-icon-hover, var(--cb-text, var(--scheme-text, #000000)));
}

/* ---- Info modal ---- */

.my-contribution-block #contribution-info-modal p {
    text-align: left;
    font-size: 1.3em;
}

.my-contribution-block #contribution-info-modal .modal-footer {
    text-align: center;
}

/* Keeps the spacing the former empty heading gave the modal. The top margin is left to style.css so tablet and
   desktop look as they did before (CR-1). */
.my-contribution-block #contribution-info-modal .modal-title-top {
    min-height: 33px;
    margin-bottom: 10px;
}

/* Scrolling at 200% zoom and on short viewports (A11Y-2, WCAG 1.4.10). style.css sets .modal to
   overflow-y: hidden !important and gives .modal-body a fixed 345px height on phones, which clips the text.
   The first declaration of each pair is the fallback for browsers without min(). */
.my-contribution-block #contribution-info-modal {
    overflow-y: auto !important;
}

.my-contribution-block #contribution-info-modal .modal-body {
    height: auto;
    min-height: 280px;
    min-height: min(280px, calc(100vh - 260px));
    max-height: 360px;
    max-height: max(120px, min(360px, calc(100vh - 260px)));
}

.my-contribution-block #contribution-info-modal .dismiss-button,
.my-contribution-block #contribution-info-modal .btn-close {
    min-width: 24px;
    min-height: 24px;
}

/* ---- Keyboard focus: two-tone ring (white outline + black ring) visible on any brand colour ---- */

.my-contribution-block .cb-pill:focus-visible,
.my-contribution-block .cb-select:focus,
.my-contribution-block .cb-card-select:focus-visible,
.my-contribution-block .custom-more-info-btn:focus-visible,
.my-contribution-block .cb-table-toggle:focus-visible,
.my-contribution-block #contribution-info-modal .dismiss-button:focus-visible,
.my-contribution-block #contribution-info-modal .btn-close:focus-visible {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #000000 !important;
}

.my-contribution-block .cb-pill.is-active:focus-visible {
    box-shadow: inset 0 0 0 2px var(--cb-pill-active-bg, var(--scheme-secondary, #1B5E20)),
                inset 0 0 0 4px var(--cb-pill-active-text, var(--scheme-on-secondary, #FFFFFF)),
                0 0 0 4px #000000 !important;
}

/* ---- Motion: only when the member has not asked for reduced motion ---- */

@media (prefers-reduced-motion: no-preference) {
    .my-contribution-block .cb-pill {
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .my-contribution-block .cb-card {
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .my-contribution-block .cb-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }
}

/* ---- Windows high-contrast / forced colours: keep the selected states visible without colour ---- */

@media (forced-colors: active) {
    .my-contribution-block .cb-card {
        border-color: Canvas;
    }

    .my-contribution-block .cb-card.is-selected {
        border-color: Highlight;
    }

    .my-contribution-block .cb-pill {
        border: 1px solid ButtonText;
    }

    .my-contribution-block .cb-pill.is-active {
        border-width: 3px;
    }
}

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

/* Short viewports (200% zoom, landscape phones): a smaller gap above the modal so the text has room (A11Y-2). */
@media (max-height: 600px) {
    .my-contribution-block #contribution-info-modal .modal-title-top {
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    .my-contribution-block .cb-heading {
        margin-bottom: 14px;
        font-size: 22px;
    }

    .my-contribution-block .cb-controls {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px;
    }

    .my-contribution-block .cb-picker {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-left: 0;
    }

    .my-contribution-block .cb-select {
        width: 100%;
    }

    #contribution-app-block .contribution-chart-container {
        padding: 14px 10px 6px;
    }

    .my-contribution-block .cb-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* Phone: each card is a row, image on the left, title / value / "More info" left-aligned beside it. */
    .my-contribution-block .cb-card {
        align-items: stretch;
        padding: 10px 12px;
        text-align: left;
    }

    .my-contribution-block .cb-card-select {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        row-gap: 2px;
    }

    .my-contribution-block .cb-card.has-image .cb-card-select {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 12px;
    }

    .my-contribution-block .cb-card.has-image .cb-card-img {
        grid-column: 1;
        grid-row: 1 / span 2;
        justify-self: center;
        max-width: 48px;
        max-height: 48px;
    }

    .my-contribution-block .cb-card.has-image .cb-card-title {
        grid-column: 2;
        grid-row: 1;
    }

    .my-contribution-block .cb-card.has-image .cb-card-value {
        grid-column: 2;
        grid-row: 2;
    }

    .my-contribution-block .cb-card .custom-more-info-btn {
        align-self: flex-start;
    }

    /* Line "More info" up with the text column: 4px button padding + 48px image + 12px gap - 6px own padding. */
    .my-contribution-block .cb-card.has-image .custom-more-info-btn {
        margin-left: 58px;
    }
}