/* ===== Site chrome =====

   The header shell, the logo, the footer, the buttons and the design tokens.
   Every page links this. Until 2026-09-28 each of these rules was pasted into
   13 separate places, 12 inline <style> blocks plus answers.css, and 18 of the
   48 had drifted apart. The visible one: static-website-conversion and
   web-design carried an older footer, so their column headings were not
   uppercased, the footer did not centre on mobile, and the social icons were a
   different size and colour from the other 11 pages. Nobody had noticed,
   because noticing meant opening 13 files.

   This file is the majority version of every rule that appeared more than
   once. The nav is not here; it went out the same way in nav.css, and keeping
   them separate keeps each file readable.

   A page that genuinely differs keeps the differing declarations in its own
   <style> block, which loads after this file. Four do: index.html gives the
   header a stacking context, website-grader.html makes it sticky and
   translucent and adds its own grade-colour tokens, 404.html has a one-row
   footer, and design-system.html has a sticky header, a compact footer and
   the style guide's own tokens. Those are design, not drift, so they stayed.  */

:root {
  /* Native controls and scrollbars follow the theme. Without it the charity
     form's checkboxes stayed white in dark mode. */
  color-scheme: light dark;
  --accent: #1F7D5E;
  --bg: #FAFBFC;
  --bg-elevated: #F1F5F9;
  --bg-surface: #FFFFFF;
  --border: #D8DEE8;
  --border-subtle: #E8ECF2;
  --container-xl: 1200px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --on-primary: #FFFFFF;
  --primary: #9A5D2A;
  --primary-active: #7E4A20;
  --primary-hover: #8F5525;
  /* Used by website-grader.html, which defined its own copy, and shown on
     design-system.html. */
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --radius-xl: 16px;
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-primary: 0 4px 14px rgba(181,110,50,0.2);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  /* The full spacing scale. --space-1 was missing, so nav.css reached for it
     and got padding: 0 (#102); 5 and 10 were the other gaps. */
  --space-1: 4px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-2: 8px;
  --space-20: 80px;
  --space-24: 96px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --text: #0B1220;
  --text-faint: #667085;
  --text-muted: #5A6577;
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
}

.skip-link {
  background: var(--primary);
  border-radius: var(--radius-md);
  color: var(--on-primary);
  font-weight: 600;
  left: 50%;
  padding: var(--space-3) var(--space-6);
  position: absolute;
  text-decoration: none;
  top: -100px;
  transform: translateX(-50%);
  transition: top var(--transition-fast);
  z-index: 1000;
}

.skip-link:focus {
  top: var(--space-4);
}

/* Was pasted into 13 page <style> blocks and answers.css, identically. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) var(--space-6);
}

.header-inner {
  align-items: center;
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--container-xl);
}

.logo {
  align-items: center;
  color: var(--text);
  display: flex;
  gap: var(--space-3);
  text-decoration: none;
}

.logo-mark {
  height: 40px;
  object-fit: contain;
  width: 40px;
}

.logo-text {
  font-size: 1.125rem;
  font-weight: 700;
}

.btn {
  align-items: center;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  /* A <button> does not inherit the page font, so without this every
     button.btn rendered in Arial beside a.btn in the system stack. */
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: var(--space-2);
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--primary);
  box-shadow: var(--shadow-primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--space-16) var(--space-6) var(--space-8);
}

.footer-inner {
  margin: 0 auto;
  max-width: var(--container-xl);
}

.footer-grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  margin-bottom: var(--space-12);
}

.footer-brand {
  max-width: 280px;
}

.footer-logo {
  align-items: center;
  color: var(--text);
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  text-decoration: none;
}

.footer-logo img {
  height: 32px;
  width: 32px;
}

.footer-logo span {
  font-size: 0.9375rem;
  font-weight: 600;
}

.footer-tagline {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer-column h2 {
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: var(--space-3);
}

.footer-column a {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--primary);
}

.footer-bottom {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-6);
}

.footer-copy {
  color: var(--text-faint);
  font-size: 0.8125rem;
}

.footer-social {
  display: flex;
  gap: var(--space-4);
}

.footer-social a {
  color: var(--text-faint);
  font-size: 1.125rem;
  transition: color var(--transition-fast);
}

.footer-social a:hover {
  color: var(--primary);
}

.btn-large {
  font-size: 1rem;
  padding: var(--space-4) var(--space-8);
}

.footer-bottom p {
  color: var(--text-faint);
  font-size: 0.8125rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3DD6A6;
    --bg: #0B1220;
    --bg-elevated: #162035;
    --bg-surface: #101A2E;
    --border: #22304A;
    --border-subtle: #1A2740;
    --on-primary: #0B1220;
    --primary: #C67C3E;
    --primary-active: #B56E32;
    --primary-hover: #D88A4A;
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-primary: 0 4px 14px rgba(198,124,62,0.3);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --text: #F1F5FF;
    --text-faint: #8A96AD;
    --text-muted: #A8B2C7;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    gap: var(--space-8);
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: 480px;
  }
}

@media (max-width: 768px) {
  .header-inner {
    flex-wrap: wrap;
  }
  .footer-grid {
    gap: var(--space-8);
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: none;
    text-align: center;
  }
  .footer-logo {
    justify-content: center;
  }
  .footer-column {
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

/* The footer keeps two columns on phones. One column stacked about twenty
   links into a 1,100px strip that outweighed each page's own call to action. */

/* Printing a page should print the page, not the site around it. Lived in
   answers.css, so it only applied to the answer pages. */
@media print {
  .header,
  .footer,
  .skip-link {
    display: none;
  }
}