/* ==========================================================================
   GLOBAL BASE
   Minimal reset so WordPress/theme defaults don't bleed into the
   scoped #tt-* wrapper components. Intentionally tiny — almost all
   visual styling is scoped per-component exactly as it was authored.
   ========================================================================== */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #F8F8F6;
    color: var(--tt-ink);
}

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

a {
    color: inherit;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* 2.7: the brand's dark green is now the main colour. Ink (text) is a deeper shade of it,
   titles and headings use the brand green itself, and black is kept for the homepage intro
   statement, project descriptions, buttons and links (which turn green on hover).
   Change a colour here and it changes everywhere the theme uses it. */
:root {
    --tt-green: #3A5F5F;        /* brand dark green: headings, accents, buttons */
    --tt-green-dark: #2F4E4E;   /* hover and pressed fills */
    --tt-green-deep: #253D3D;   /* the "ink": body text and navigation */
    --tt-green-tint: #E6EDED;   /* soft fills */
    --tt-green-line: #B9CACA;   /* strong hairlines */
    --tt-ink: var(--tt-green-deep);
    --tt-meta: #526666;         /* secondary text (5.7:1 on the page colour) */
    --tt-line: #CAD6D4;         /* hairlines and card borders */
    --tt-black: #111111;        /* black: the intro statement, project descriptions and buttons/links (green on hover) */
    --tt-teal: #3A5F5F;         /* older name for the brand green, still used */
}
::selection { background: #3A5F5F; color: #FFFFFF; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--tt-teal); outline-offset: 3px; }
main a:not([class]):hover, .tt-prose a:hover { color: var(--tt-teal); text-decoration-color: var(--tt-teal); }
main a:not([class]) { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ==========================================================================
   2.8.2: brand scrollbars, the same as the Collective's (members.thinktanks.co):
   a straight brand-green bar on a quiet track, everywhere on the site.
   ========================================================================== */
::-webkit-scrollbar { width: 20px; height: 20px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { min-height: 36px; min-width: 36px; border: 3px solid transparent; border-radius: 0; background: var(--tt-green, #3A5F5F) padding-box; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { border-width: 2px; }
@supports not selector(::-webkit-scrollbar) {
	* { scrollbar-color: var(--tt-green, #3A5F5F) transparent; scrollbar-width: auto; }
}