/* system.css — the product's default look (Stage 11 round 7).
   All colours and fonts are CSS custom properties on :root. The
   client's brand (round 9, from the brand_tokens table) overrides
   them by re-declaring :root in a <style> block inside <head>. Every
   rule below reads a variable, never a typed value.

   Stage 14 round 6 (8 October 2026):
   - --max-content-width widened to 45rem per Stage 11 carry-over.
   - .site-header grew a logo link + a back-to-home link; no menu.
   - .site-footer now carries name, address, EIN, phone and email.
   - .site-demo-bar renders at the top of <body> when SITE_PREVIEW=1
     (set on the demo only; a client install never has it). */

:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-text-muted: #6a6a6a;
    --color-primary: #2a4365;
    --color-primary-contrast: #ffffff;
    --color-border: #e5e5e5;
    --color-dark: #1a1a1a;
    --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    --radius: 6px;
    --max-content-width: 45rem;

    /* System success colour. NOT a brand token — kept out of the
       `brand_tokens` override list so every brand draws the thank-
       you tick in the same green. Added in stage 14 round 7 for the
       white-circle green-tick on the thank-you page. */
    --color-success: #2d7a4f;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-bg);
    /* The donation page's wide banner and its form-row use
       `width: 100vw` plus a negative-margin breakout to span the
       full viewport. On Windows browsers that reserve space for a
       visible vertical scrollbar, 100vw is a few px wider than the
       HTML element, which would otherwise introduce a horizontal
       scrollbar on every public page. `overflow-x: clip` clips the
       overflow WITHOUT turning the body into a scroll container,
       so `position: sticky` on the gift-summary panel keeps
       working. The `hidden` line is a fallback for the small set
       of old browsers that do not understand `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text);
    line-height: 1.2;
    margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

a {
    color: var(--color-primary);
}

/* Demo notice bar. Rendered only when `.env` has SITE_PREVIEW=1,
   so it never ships to a client. Sits above the header; small,
   readable, out of the way of the form. Reads on --color-dark so
   a brand whose text and dark tokens differ picks the right one. */
.site-demo-bar {
    background: var(--color-dark);
    color: var(--color-bg);
    text-align: center;
    padding: 8px 16px;
    font-size: .875rem;
    line-height: 1.4;
}

/* The header, main and footer each paint their own full-width
   background (so a dark band or a tinted footer can go edge-to-edge).
   Their CONTENT columns live in `.site-header-inner`,
   `.site-main > *` and `.site-footer-inner` respectively, each at
   --max-content-width. The donation page overrides --max-content-width
   via donations.css so its header, band, form and footer line up in
   the same shared column.

   .site-main stays as the layout.php's content column; it keeps the
   same max-width as the inner wrappers so other public pages that
   render straight into .site-main keep working. */
.site-header {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
}
.site-footer {
    width: 100%;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: .9375rem;
    line-height: 1.6;
}

/* The content column uses a 1.5rem horizontal gutter so the site
   header, main and footer line up with the donation page's dp-wrap
   (which also uses 1.5rem). Stage 14 round 8a B6 fix (the logo
   was ~10px off the band edge before). */
.site-main {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.site-header-inner,
.site-footer-inner {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.site-logo {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-text);
    max-height: 48px;
}
/* Round 3 Piece 1b fix 1 add-on (27 October 2026): image logo renders
   at the client-chosen height, width auto so the logo never stretches.
   The text fallback keeps its own font-based sizing. */
img.site-logo {
    height: var(--logo-height, 56px);
    width: auto;
    max-height: none;
}
.site-back {
    font-size: .9375rem;
    color: var(--color-text-muted);
    text-decoration: none;
}
.site-back:hover,
.site-back:focus {
    color: var(--color-primary);
    text-decoration: underline;
}
.site-footer-name {
    color: var(--color-text);
    font-weight: 600;
    margin-bottom: .25rem;
}
.site-footer-address,
.site-footer-ein,
.site-footer-phone {
    margin-bottom: .25rem;
}
.site-footer-email a {
    color: var(--color-primary);
}
.site-footer-copyright {
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

/* Round 2b (R2aa) + fix 1 (26 October 2026): the small "Powered by
   Nonprofio" strip at the bottom of a public page. Sits inside the
   charity's .site-footer so it inherits the charity's background
   AND its text colour — currentColor on the SVG strokes gives the
   dots the same automatic light/dark the donation pages use.

   Fix 1 removed the border-top + 1rem top margin that was the
   "white band" on charities with a dark footer. The strip now
   paints only against whatever the charity's footer gives it. */
.site-powered-by {
    margin-top: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .75rem;
    color: inherit;
    opacity: 0.72;
}
.site-powered-mark {
    display: inline-flex;
    align-items: center;
    color: inherit;
}
.site-powered-mark svg {
    display: block;
    height: 10px;
    width: auto;
}
.site-powered-text a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .02em;
    opacity: 1;
}
.site-powered-text a:hover,
.site-powered-text a:focus {
    text-decoration: underline;
}