/*
 * ClimateScout site styles
 * Loaded after bootstrap.min.css. Sets the brand palette and base styles by
 * overriding Bootstrap 5.3 CSS variables; page-specific styling lives elsewhere.
 */

/* ---------- 1. Brand palette ---------- */

:root {
    --cs-orange: #E4610F;
    --cs-orange-dark: #C4520C;
    --cs-orange-darker: #A94609;
    --cs-orange-darkest: #8E3A07;
    --cs-orange-soft: #FBE7DA;
    --cs-ink: #16181D;
    --cs-slate: #4A5560;
    --cs-pine: #1F4D46;
    --cs-pine-dark: #163833;
    --cs-sage: #9DBFB1;
    --cs-sand: #F6F3EE;
    --cs-line: #E3DED6;

    --cs-font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Bootstrap theme variables ---------- */

:root,
[data-bs-theme="light"] {
    --bs-primary: var(--cs-orange);
    --bs-primary-rgb: 228, 97, 15;
    --bs-primary-text-emphasis: var(--cs-orange-darker);
    --bs-primary-bg-subtle: var(--cs-orange-soft);
    --bs-primary-border-subtle: #F4C3A3;

    --bs-body-font-family: var(--cs-font-sans);
    --bs-body-color: var(--cs-slate);
    --bs-body-color-rgb: 74, 85, 96;
    --bs-body-bg: var(--cs-sand);
    --bs-body-bg-rgb: 246, 243, 238;
    --bs-emphasis-color: var(--cs-ink);
    --bs-heading-color: var(--cs-ink);

    --bs-tertiary-bg: #FFFFFF;
    --bs-tertiary-bg-rgb: 255, 255, 255;

    --bs-link-color: var(--cs-pine);
    --bs-link-color-rgb: 31, 77, 70;
    --bs-link-hover-color: var(--cs-pine-dark);
    --bs-link-hover-color-rgb: 22, 56, 51;

    --bs-border-color: var(--cs-line);
    --bs-focus-ring-color: rgba(228, 97, 15, 0.25);
}

/* ---------- 2b. Dark theme (html[data-bs-theme="dark"], set by theme.js) ---------- */

[data-bs-theme="dark"] {
    --bs-body-color: #D5D9DE;
    --bs-body-color-rgb: 213, 217, 222;
    --bs-body-bg: var(--cs-ink);
    --bs-body-bg-rgb: 22, 24, 29;
    --bs-emphasis-color: var(--cs-sand);
    --bs-heading-color: var(--cs-sand);
    --bs-secondary-color: rgba(213, 217, 222, 0.75);

    --bs-secondary-bg: #1F2228;
    --bs-secondary-bg-rgb: 31, 34, 40;
    --bs-tertiary-bg: #262A31;
    --bs-tertiary-bg-rgb: 38, 42, 49;

    --bs-primary-text-emphasis: #F0A06E;
    --bs-primary-bg-subtle: #3A1F0E;
    --bs-primary-border-subtle: #7A3A12;

    --bs-link-color: var(--cs-sage);
    --bs-link-color-rgb: 157, 191, 177;
    --bs-link-hover-color: #BFD6CC;
    --bs-link-hover-color-rgb: 191, 214, 204;

    --bs-border-color: #30343B;
}

/* ---------- 3. Base elements ---------- */

html {
    position: relative;
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Keeps the footer at the bottom on short pages. */
body > .container {
    flex: 1 0 auto;
}

/* Brand logo: one image per theme; shrinks on narrow screens. */
.cs-logo {
    display: block;
    max-width: 60vw;
    height: auto;
}

.cs-logo-on-dark,
[data-bs-theme="dark"] .cs-logo-on-light {
    display: none;
}

[data-bs-theme="dark"] .cs-logo-on-dark {
    display: block;
}

/* Inline SVG icons (see the sprite in _Layout): sized to the text, drawn in its colour. */
.cs-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.box-shadow {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

::selection {
    background-color: var(--cs-orange-soft);
    color: var(--cs-ink);
}

/* ---------- 4. Bootstrap components (compiled colours not covered by the variables above) ---------- */

/* Buttons use the darker orange so white labels meet WCAG AA contrast (4.5 : 1). */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cs-orange-dark);
    --bs-btn-border-color: var(--cs-orange-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-orange-darker);
    --bs-btn-hover-border-color: var(--cs-orange-darker);
    --bs-btn-focus-shadow-rgb: 228, 97, 15;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-orange-darkest);
    --bs-btn-active-border-color: var(--cs-orange-darkest);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cs-orange-dark);
    --bs-btn-disabled-border-color: var(--cs-orange-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--cs-orange-darker);
    --bs-btn-border-color: var(--cs-orange-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-orange-dark);
    --bs-btn-hover-border-color: var(--cs-orange-dark);
    --bs-btn-focus-shadow-rgb: 228, 97, 15;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-orange-darker);
    --bs-btn-active-border-color: var(--cs-orange-darker);
    --bs-btn-disabled-color: var(--cs-orange-darker);
    --bs-btn-disabled-border-color: var(--cs-orange-dark);
}

/* On ink, the darker orange is too dim for text; the brand orange passes (about 5 : 1). */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--cs-orange);
    --bs-btn-disabled-color: var(--cs-orange);
}

/* Bootstrap's grey (#6c757d) is under 4.5 : 1 on both our backgrounds; its secondary text colour passes in each theme. */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary-color);
}

/* Skip link: shown at the top left when it gets keyboard focus. */
.cs-skip-link:focus {
    position: fixed !important;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 2px solid var(--cs-orange);
    border-radius: .375rem;
}

/* The skip link moves focus to <main>; it needs no focus ring of its own. */
#content:focus {
    outline: none;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #F1B087;
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--cs-orange);
    border-color: var(--cs-orange);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--cs-orange-dark);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--cs-orange-dark);
}

/* ---------- Zone pages ---------- */
/* --cs-zone-bg / --cs-zone-fg come from the generated /css/zones.css (class cs-zone-{code}; the colours are data). */
.cs-zone-label {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: .25rem;
    background-color: var(--cs-zone-bg, var(--cs-line));
    color: var(--cs-zone-fg, var(--cs-ink));
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Building diagram band: black to match the artwork, and sticky so the diagram stays in view
   while strategies are chosen (as on the old site). */
.cs-diagram {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #000;
    color: #fff;
}

.cs-diagram-help {
    margin: 0;
    padding-top: 1rem;
    font-weight: 500;
}

.cs-diagram-help .cs-icon {
    color: var(--cs-orange);
}

.cs-diagram-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 50vh;
}

/* Strategy layers (<g class="cs-diagram-layer">, marked by DiagramMarkup) are hidden until selected. */
.cs-diagram-layer {
    visibility: hidden;
}

.cs-diagram-layer.is-visible {
    visibility: visible;
}

/* Strategy cards: a link to the strategy page plus a toggle that shows it on the diagram. */
.cs-strategy-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    height: 100%;
    padding: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
}

.cs-strategy-card.is-selected {
    border-color: var(--cs-orange);
    box-shadow: inset 0 0 0 1px var(--cs-orange);
}

.cs-strategy-link {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.cs-strategy-link:hover .cs-strategy-name,
.cs-strategy-link:focus-visible .cs-strategy-name {
    text-decoration: underline;
}

.cs-strategy-link img {
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.cs-strategy-summary {
    display: block;
    margin-top: .25rem;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

/* A strategy blocked by a selected one: the whole card looks switched off (no fill, dashed edge, faded contents);
   only the "Conflicts with …" note stays clear, since it says why. */
.cs-strategy-card.is-disabled {
    border-style: dashed;
    background-color: transparent;
}

.cs-strategy-card.is-disabled .cs-strategy-link,
.cs-strategy-card.is-disabled .cs-strategy-toggle {
    opacity: .4;
}

.cs-strategy-card.is-disabled img {
    filter: grayscale(1);
}

.cs-strategy-toggle {
    display: inline-flex;
    flex: none;
    padding: .25rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--cs-orange-dark);
}

.cs-strategy-toggle .cs-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.cs-strategy-toggle:disabled {
    color: var(--bs-secondary-color);
    cursor: not-allowed;
}

.cs-strategy-toggle .cs-icon-on,
.cs-strategy-toggle[aria-pressed="true"] .cs-icon-off {
    display: none;
}

.cs-strategy-toggle[aria-pressed="true"] .cs-icon-on {
    display: inline;
}

.cs-strategy-conflict {
    flex-basis: 100%;
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

/* ---------- Strategy pages ---------- */
.cs-strategy-illustration {
    width: 100%;
    max-width: 320px;
    height: auto;
}

/* Zone chips link to the zone pages (the colours come from /css/zones.css). */
a.cs-zone-label {
    text-decoration: none;
}

a.cs-zone-label:hover,
a.cs-zone-label:focus-visible {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--cs-zone-bg, var(--cs-line));
}

/* Reference project photo: a button that opens the lightbox; photos are cropped to one shape so cards line up. */
.cs-project-photo {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
}

.cs-project-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.cs-project-photo:hover img,
.cs-project-photo:focus-visible img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .cs-project-photo img {
        transition: none;
    }
}

/* 2030 Palette band: black like the old site. */
.cs-palette-band {
    background-color: #000;
    color: #fff;
}

.cs-palette-link {
    color: #fff;
    font-size: 1.25rem;
    text-decoration-color: var(--cs-orange);
    text-underline-offset: .25em;
}

.cs-palette-link:hover,
.cs-palette-link:focus-visible {
    color: var(--cs-orange-soft);
}

/* Lightbox: the browser's <dialog>, opened by lightbox.js. */
.cs-lightbox {
    max-width: min(95vw, 1400px);
    padding: 1rem;
    border: 0;
    border-radius: .5rem;
    background-color: #000;
    color: #fff;
}

.cs-lightbox::backdrop {
    background-color: rgb(0 0 0 / .8);
}

.cs-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    margin: 0 auto;
}

.cs-lightbox form {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem;
}

.cs-lightbox-caption {
    margin: .75rem 0 0;
    text-align: center;
}

/* ---------- Print (zone pages: the diagram with the selected strategies, as on the old site) ---------- */
.cs-strategy-print-summary {
    display: none;
}

/* Print margins (top, right, bottom, left): a wider left edge for binding or hole-punching. */
@page {
    margin: .5in .5in .5in 1in;
}

@media print {
    /* Use the full page width instead of Bootstrap's 720 px container. */
    .container {
        max-width: none;
    }

    /* Keep the logo bar; drop the menu, footer and on-screen controls. */
    .navbar-toggler,
    .navbar-collapse,
    footer,
    .cs-diagram-help,
    .cs-strategy-toggle,
    .cs-strategy-conflict {
        display: none !important;
    }

    /* The diagram's line art is white and grey, so its band must print (browsers skip backgrounds by default).
       On paper it uses a light grey instead of black (less ink); white and grey lines stay visible on it. */
    .cs-diagram {
        position: static;
        background-color: #dee2e6;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Capped so the first few strategies fit on page 1 with the diagram. */
    .cs-diagram-svg {
        max-height: 5.5cm;
    }

    /* Strategies as a stacked list below the diagram (plain block flow, so Chrome breaks pages cleanly between rows). */
    .row:has(> div > .cs-strategy-card) {
        display: block;
        margin: .5rem 0 0;
    }

    .row:has(> div > .cs-strategy-card) > div {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* When strategies are selected, print only those cards (with their summaries); with none selected, print them all. */
    .row:has(.cs-strategy-card.is-selected) > div:not(:has(.cs-strategy-card.is-selected)) {
        display: none;
    }

    /* Each row: icon in a fixed left column, name and summary aligned to its right. The link wrapper steps aside
       (display: contents) so the icon and name sit directly in the card's grid. */
    .cs-strategy-card {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: 1rem;
        row-gap: .125rem;
        align-items: start;
        height: auto;
        padding: .75rem 0;
        border: 0;
        border-bottom: 1px solid #ced4da;
        border-radius: 0;
        background: none;
        break-inside: avoid;
    }

    .cs-strategy-card.is-selected {
        border-color: #ced4da;
        box-shadow: none;
    }

    .cs-strategy-link {
        display: contents;
    }

    .cs-strategy-link img {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 48px;
        height: 48px;
    }

    .cs-strategy-name {
        grid-column: 2;
        font-weight: 500;
    }

    .cs-strategy-print-summary {
        display: block;
        grid-column: 2;
        margin: 0;
        font-size: .8125rem;
    }

    /* Every page: paper is white (theme.js also switches to the light theme while printing). */
    body {
        background-color: #fff;
        color: #000;
    }

    /* On-screen controls: map zoom, locate and search (the credits stay), the filter-button rows (home zone groups,
       comparison regions) and the calculator's button. */
    .cs-skip-link,
    .leaflet-top,
    .cs-zone-filter,
    .cs-calculator button[type="submit"] {
        display: none !important;
    }

    /* Colour keys and zone labels are background colours, which browsers drop when printing: keep them. */
    .cs-zone-swatch,
    .cs-zone-label,
    .cs-map-legend-swatch,
    .cs-legend-strip-swatch {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Maps print the coloured regions on white, without the base map: its tiles load too late for the printout. */
    .cs-map-tiles {
        display: none;
    }

    .leaflet-container {
        background: #fff;
    }

    /* 2030 Palette: browsers drop the black band, so print it as an outlined box with the link's address. */
    .cs-palette-band {
        background: none;
        color: #000;
        border: 1px solid #ced4da;
    }

    .cs-palette-band .container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .cs-palette-band h2,
    .cs-palette-link {
        color: #000;
    }

    .cs-palette-link::after {
        content: " (" attr(href) ")";
        font-size: .8125rem;
        word-break: break-all;
    }
}

/* ---------- Home: climate map ---------- */
.cs-climate-map {
    height: clamp(360px, 60vh, 600px);
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
}

/* Base map muted, so the zone colours stand out (OpenStreetMap tiles are busy and colourful). */
.cs-map-tiles {
    filter: grayscale(1);
    opacity: .7;
}

[data-bs-theme="dark"] .cs-map-tiles {
    filter: grayscale(1) invert(1);
    opacity: .6;
}

/* Country names over the map colours (map-labels.js): centred on their point, with a halo so they read on any colour. */
.cs-map-label span {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #212529;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 4px #fff;
    pointer-events: none;
}

[data-bs-theme="dark"] .cs-map-label span {
    color: #fff;
    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 4px #000;
}

.cs-zone-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cs-zone-filter .btn[aria-pressed="true"] {
    border-color: var(--bs-btn-active-border-color);
    background-color: var(--bs-btn-active-bg);
    color: var(--bs-btn-active-color);
}

.cs-zone-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.cs-zone-link:hover,
.cs-zone-link:focus-visible {
    text-decoration: underline;
}

.cs-zone-swatch {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .25rem;
    background-color: var(--cs-zone-bg, var(--cs-line));
}

/* Address search box in the map's top-right corner. */
.cs-map-search {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    width: min(18rem, 70vw);
    padding: .375rem;
    border-radius: .375rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 1px 4px rgb(0 0 0 / .3);
}

.cs-map-search input {
    flex: 1 1 0;
    min-width: 0;
}

.cs-map-search-status {
    flex-basis: 100%;
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

.cs-map-search-status:empty {
    display: none;
}

/* ---------- Carbon map ---------- */
/* Info box and legend on the map. */
.cs-map-panel {
    padding: .5rem .75rem;
    border-radius: .375rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 1px 4px rgb(0 0 0 / .3);
    color: var(--bs-body-color);
    font-size: .8125rem;
    line-height: 1.5;
}

.cs-map-legend-swatch {
    display: inline-block;
    width: 1rem;
    height: .75rem;
    margin-right: .5rem;
    vertical-align: middle;
    border: 1px solid rgb(0 0 0 / .15);
}

/* Phones: the key moves from the map to a strip under it (#carbon-legend-strip, shown below md). */
@media (max-width: 767.98px) {
    .cs-map-legend {
        display: none;
    }
}

.cs-legend-strip {
    font-size: .75rem;
}

.cs-legend-strip-row {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2px;
    margin-top: .25rem;
    text-align: center;
    line-height: 1.2;
}

.cs-legend-strip-swatch {
    display: block;
    height: .75rem;
    margin-bottom: .25rem;
    border: 1px solid rgb(0 0 0 / .15);
}

/* ---------- Carbon comparison ---------- */
.cs-carbon-location {
    padding: 1.25rem 1.5rem;
    border-left: .375rem solid var(--cs-orange);
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
}

/* The chosen location's name leads the panel, as on the old site. */
.cs-carbon-location-name {
    margin-bottom: .5rem;
    font-size: calc(1.5rem + 1.5vw);
    font-weight: 700;
}

@media (min-width: 1200px) {
    .cs-carbon-location-name {
        font-size: 3rem;
    }
}

.cs-carbon-location-label {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.cs-carbon-location-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.cs-calculator {
    padding: 1.25rem;
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
}

.cs-calculator .cs-unit-select {
    flex: 0 0 auto;
    width: auto;
}

.cs-carbon-chart {
    position: relative;
    height: 400px;
}

/* Calculator infographic: one card per equivalency, stacked. --eq-color is set per factor key below. */
.cs-eq-card {
    --eq-color: var(--cs-slate);
    margin-bottom: .75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background-color: var(--bs-body-bg);
}

.cs-eq-head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cs-eq-badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--eq-color);
    color: #fff;
}

.cs-eq-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.cs-eq-amount {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.cs-eq-label,
.cs-eq-scale {
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

.cs-eq-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: .75rem 0 .375rem;
    color: var(--eq-color);
}

.cs-eq-icon {
    position: relative;
    width: 22px;
    height: 22px;
    opacity: 0;
    animation: cs-eq-pop .35s ease-out forwards;
    animation-delay: calc(var(--i) * 25ms);
}

.cs-eq-icon svg {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.cs-eq-icon .cs-eq-empty {
    opacity: .18;
}

/* The filled part of an icon; less than full width for the remainder (e.g. 0.8 of a home). */
.cs-eq-fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
}

.cs-eq-scale {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
}

.cs-eq-scale svg {
    width: 12px;
    height: 12px;
    fill: var(--eq-color);
}

@keyframes cs-eq-pop {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-eq-icon {
        opacity: 1;
        animation: none;
    }
}

.cs-eq-co2 { --eq-color: #5B6770; }
.cs-eq-gasoline-gallons { --eq-color: var(--cs-orange); }
.cs-eq-vehicle-miles { --eq-color: #3D6E9E; }
.cs-eq-home-electricity { --eq-color: var(--cs-orange-darker); }
.cs-eq-smartphones-charged { --eq-color: #6B5B95; }
.cs-eq-tree-seedlings { --eq-color: #3C8D5A; }
.cs-eq-forest-acres { --eq-color: var(--cs-pine); }

/* Dark theme: the darker colours need a lighter shade to stand out on a dark background. */
[data-bs-theme="dark"] .cs-eq-forest-acres { --eq-color: var(--cs-sage); }
[data-bs-theme="dark"] .cs-eq-smartphones-charged { --eq-color: #A99BD1; }

/* ---------- Content pages (About …) ---------- */
/* Headings and paragraphs come from a content block, so spacing is set here rather than with classes. */
.cs-content h2,
.cs-content h3,
.cs-content h4 {
    margin-top: 2rem;
}

.cs-content h1 + p {
    font-size: 1.25rem;
    font-weight: 300;
}

/* ---------- Sponsors ---------- */
.cs-sponsor-card {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}

.cs-sponsor-logo {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.cs-sponsor-invite {
    padding: 1.5rem 2rem;
    border-left: .375rem solid var(--cs-orange);
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
}

/* Footer strip: logos in greyscale until hovered or focused, so no sponsor's colours dominate the footer. */
.cs-sponsor-strip-title {
    display: block;
    margin-bottom: .75rem;
    color: inherit;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
}

.cs-sponsor-strip img {
    filter: grayscale(1);
    opacity: .7;
    transition: filter .2s, opacity .2s;
}

.cs-sponsor-strip a:hover img,
.cs-sponsor-strip a:focus-visible img {
    filter: none;
    opacity: 1;
}

/* ---------- Contact ---------- */
/* Honeypot field: moved off-screen rather than display:none, which some bots detect and skip. */
.cs-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Admin area ---------- */
/* Side menu: full height beside the page from lg up. */
@media (min-width: 992px) {
    .cs-admin-sidebar {
        min-height: calc(100vh - 57px);
    }
}

.cs-admin-menu-heading {
    margin: 1.25rem 0 .25rem;
    padding: 0 1rem;   /* Bootstrap's .nav-link side padding, so headings line up with the items */
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cs-admin-sidebar .nav-link {
    padding-top: .3rem;
    padding-bottom: .3rem;
    border-radius: .375rem;
    color: var(--bs-body-color);
}

.cs-admin-sidebar .nav-link:hover {
    background-color: var(--bs-tertiary-bg);
}

.cs-admin-sidebar .nav-link.active {
    background-color: var(--bs-tertiary-bg);
    box-shadow: inset 3px 0 0 var(--cs-orange);
    font-weight: 500;
}

.cs-admin-sidebar .nav-link.disabled {
    color: var(--bs-secondary-color);
}

/* "soon" next to screens not built yet: quiet, so it doesn't outshine the menu. */
.cs-admin-soon {
    margin-left: .375rem;
    padding: 0 .375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    color: var(--bs-secondary-color);
    font-size: .6875rem;
    vertical-align: .1em;
}

/* A contact message as the visitor typed it (line breaks kept). */
.cs-admin-message {
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Rich-text editor (Quill, snow theme): the site's font and colours in both themes. The text is the same size as
   on the public pages (".ql-container" also matches, so Quill's own 13 px would otherwise win). Quill's
   "height: 100%" is replaced by the content's height: in a form row it made the box as tall as the whole column
   (label and toolbar included), so it ran over the next field. */
.cs-rich-text,
.cs-rich-text.ql-container {
    height: auto;
    min-height: 20rem;
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
}

.cs-rich-text .ql-editor {
    min-height: 20rem;
    line-height: 1.6;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--bs-border-color);
}

.ql-toolbar.ql-snow {
    border-radius: .375rem .375rem 0 0;
    background-color: var(--bs-tertiary-bg);
}

.ql-container.ql-snow {
    border-radius: 0 0 .375rem .375rem;
    background-color: var(--bs-body-bg);
}

.ql-snow .ql-stroke {
    stroke: var(--bs-body-color);
}

.ql-snow .ql-fill {
    fill: var(--bs-body-color);
}

.ql-snow .ql-picker,
.ql-snow .ql-editor.ql-blank::before {
    color: var(--bs-secondary-color);
}

.ql-snow .ql-picker-options,
.ql-snow .ql-tooltip {
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 2px 8px rgb(0 0 0 / .2);
}

.ql-snow .ql-tooltip input[type="text"] {
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke {
    stroke: var(--cs-orange);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--cs-orange);
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-label.ql-active,
.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-item.ql-selected {
    color: var(--cs-orange);
}

.ql-snow a {
    color: var(--bs-link-color);
}

/* A shorter editor for descriptions (sponsors). */
.cs-rich-text.cs-rich-text-short,
.cs-rich-text-short .ql-editor {
    min-height: 8rem;
}

/* Climate zones: the diagram's artwork as a small thumbnail in the list, and a preview under the form's choice
   (the choice and preview on their own row, no wider than half the form on large screens). */
.cs-admin-diagram-field {
    max-width: 36rem;
}

.cs-admin-diagram-thumb {
    width: auto;
    height: 2.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
}

.cs-admin-diagram-preview {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
}

.cs-admin-diagram-preview[hidden] {
    display: none;
}

/* Logo thumbnail in admin lists and forms: on white, like most logos are made for. */
.cs-admin-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 3.5rem;
    padding: .375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background-color: #fff;
}

.cs-admin-logo img {
    max-width: 100%;
    max-height: 100%;
}

/* Audit entry: long values (HTML, descriptions) wrap instead of widening the table. */
.cs-audit-changes td {
    max-width: 30rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Media library tiles and preview: images on a checkerboard, so transparent logos and white images show. */
.cs-media-tile {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cs-media-thumb,
.cs-media-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: repeating-conic-gradient(#e9ecef 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}

.cs-media-thumb {
    aspect-ratio: 4 / 3;
    padding: .25rem;
}

.cs-media-tile:hover .cs-media-thumb,
.cs-media-tile:focus-visible .cs-media-thumb {
    border-color: var(--cs-orange);
}

.cs-media-thumb img,
.cs-media-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cs-media-preview {
    min-height: 12rem;
    max-height: 28rem;
    padding: .5rem;
}

/* Dashboard count tiles. */
.cs-admin-tile {
    height: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
}

.cs-admin-tile-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.cs-admin-tile-label {
    color: var(--bs-secondary-color);
    font-size: .875rem;
}