/* Fonts are loaded HERE, not per page. A page that drops its own <link> silently
   falls back to Georgia and the wordmark changes — which is exactly what happened
   to the internal docs. @import must stay first in the file. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,400&display=swap");

/* ============================================================================
   Made for Good — shared design system
   ----------------------------------------------------------------------------
   ONE source for the things every Made for Good page shares: tokens, layout,
   the site header, page nav, the internal banner, and the responsive rules.

   Link it FIRST, before any page-specific <style>:
     <link rel="stylesheet" href="/mfg.css">

   Page-specific styling (tab strips, diagrams, bespoke cards) stays in the
   page. Anything that appears on more than one page belongs in here instead —
   that is the whole point. Widths, banners and breakpoints drifted precisely
   because each page carried its own copy.
   ========================================================================== */

:root {
  /* — Brand — */
  --ground: #FAF8F4;
  --surface: #FFFFFF;
  --primary: #1B3A2D;
  --primary-light: #264A3A;
  --accent: #00646b;
  --accent-soft: rgba(0, 100, 107, 0.1);
  --sage: #8BA888;
  --sage-soft: rgba(139, 168, 136, 0.15);
  --text: #2C2C2C;
  --text-secondary: #5A5A56;
  --border: rgba(27, 58, 45, 0.12);

  /* — Type — */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* — Layout —
     --content-max is the page container. --measure is the reading width for
     prose-like blocks (text, callouts, notes, lists). Tables, diagrams and
     card grids run to the container. Two intentional widths, never more. */
  --content-max: 1080px;
  --measure: 760px;
}

/* ---------- Layout ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  /* Top padding reserves the internal banner's height (~30px) PLUS a 1.5rem comfortable gap, so
     the header sits at the same height with or without the banner (no jump) and the banner never
     crowds it. Internal pages drop the reserved 30px because the banner itself fills it. */
  padding: calc(1.5rem + 30px) 2rem 4rem;
}

.internal-banner + .page { padding-top: 1.5rem; }

/* ---------- Internal marker ----------
   Matches the brand templates (mg.css). Deliberately soft yellow rather than a
   loud alert: it marks audience, it is not an error state. */
.internal-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fdf3c4;
  color: #7a5c12;
  font: 500 11px/1.4 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  padding: .42rem 1rem;
  border-bottom: 1px solid #efe1a0;
}

/* ---------- Site header ---------- */
.site-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0;
}
/* Signature Made for Good rule — the header divider, matching the MG rainbow / FFxMG rule
   rather than a plain grey line. Sits under the brand lockup. */
.site-header::after {
  content: "";
  display: block;
  height: 4px;
  border-radius: 2px;
  margin: 0.6rem 0 0;
  background: linear-gradient(90deg, var(--sage), var(--accent) 55%, var(--primary));
}

/* Linked logos open the brand sites in a new tab. */
.logo-link { display: inline-flex; align-items: center; }

.mfg-hero-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--primary);
  margin: 0 0 0.5rem;
}

.site-header .logo-bar { margin-bottom: 0.6rem; }
.logo-bar { display: flex; align-items: center; gap: 1rem; }
.logo-bar img { height: 26px; width: auto; display: block; }
.logo-bar .logo-sep { width: 1px; height: 22px; background: var(--border); }

.partnership-of {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
}

/* ---------- Page nav ---------- */
.pagenav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.75rem;
  padding-bottom: 0;
}

.pagenav a,
.pagenav .current { padding-bottom: 0.35rem; border-bottom: 2px solid transparent; }
.pagenav a { color: var(--text-secondary); text-decoration: none; }
.pagenav a:hover { color: var(--accent); }
.pagenav .current { color: var(--primary); border-bottom-color: var(--accent); }
.pagenav .navsep { color: var(--border); font-weight: 400; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.9rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
h2 { font-size: 1.55rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
h3 { font-size: 1.2rem; margin: 1.75rem 0 0.6rem; }

p { max-width: var(--measure); }

/* Small uppercase eyebrow above a heading. */
.sec-label,
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.5rem 0 0.4rem;
}

.note { font-size: 12px; color: var(--text-secondary); line-height: 1.55; max-width: var(--measure); }

/* ---------- Callouts ---------- */
.callout {
  max-width: var(--measure);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout .co-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.35rem;
}

/* ---------- Tables ----------
   Full container width; wide tables scroll inside themselves rather than
   dragging the whole page sideways. */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow-x: auto;
  margin: 1.1rem 0 1.5rem;
}
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  background: var(--primary);
  color: #fff;
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
tbody td {
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}

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

/* ---------- Responsive ----------
   ONE content breakpoint for every page. Component-level breakpoints (a card
   grid collapsing, a tab strip shrinking) belong with that component. */
@media (max-width: 700px) {
  /* Lighter comfort gap (1rem) on mobile, but still reserve the banner height so there's no jump. */
  .page { padding: calc(1rem + 30px) 1rem 3rem; }
  .internal-banner + .page { padding-top: 1rem; }
  body { padding: 0; }
  .internal-banner { margin: 0; }
  .mfg-hero-wordmark { font-size: 1.7rem; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.35rem; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}