/* =========================================================================
   CAFSI — landing page stylesheet
   GENERATED by design-system/apply-to-landing.sh — do not edit by hand.
   Sources: design-system/src/{tokens,base,landing}.css
   ========================================================================= */

/* =========================================================================
   CAFSI — design tokens
   Direction: warm and human. Cream carries the page, sage does the work,
   navy is reserved for text, gold appears only where we ask for something.

   This file is the single source of truth. The preview pages inline it at
   build time, and assets/css/style.css in the landing page consumes it.
   ========================================================================= */

:root {

  /* ---- Colour ---------------------------------------------------------
     Sampled from the official logo. Cream and sage are the surfaces; navy
     is text; gold is spent on one thing per screen. */

  --cream:        #FAF7F2;   /* page background */
  --cream-deep:   #F2EBE0;   /* alternating sections, quiet panels */
  --paper:        #FFFFFF;   /* cards lifted off the cream */

  --sage:         #758F79;   /* surfaces, icon holders, illustration */
  --sage-tint:    #E7EDE7;   /* the lightest surface that still reads sage */
  --sage-deep:    #43594A;   /* sage used as text — AA on cream */

  --navy:         #122C55;   /* headings and body */
  --navy-soft:    #51617C;   /* secondary text */
  --navy-deep:    #0C1E3C;   /* footer */

  --gold:         #C39F57;   /* CTA fill only — never text on cream */
  --gold-bright:  #D8B76B;   /* CTA hover */
  --gold-deep:    #7E5C13;   /* gold as text — AA on cream */

  --line:         #E3DCD0;   /* hairlines on cream */
  --line-strong:  #CFC5B4;

  --danger:       #A32C22;
  --success:      #2E6B4F;

  /* ---- Type -----------------------------------------------------------
     Bricolage Grotesque carries headings and every piece of UI: humanist,
     slightly irregular, warm without being soft-headed. Newsreader carries
     running prose — a serif reads as a letter from a person rather than a
     form from an agency, which is the whole point for this audience.

     Deliberately not a display serif over a neutral sans: that pairing is
     the default, and it would make CAFSI look like every other non-profit. */

  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui:      var(--font-display);

  --text-xs:   0.8125rem;                              /* 13px — labels */
  --text-sm:   0.9375rem;                              /* 15px — captions */
  --text-base: 1.0625rem;                              /* 17px — prose */
  --text-lg:   1.1875rem;                              /* 19px — lead */
  --text-xl:   clamp(1.35rem, 1.1rem + 0.8vw, 1.6rem);
  --text-2xl:  clamp(1.7rem,  1.3rem + 1.6vw, 2.4rem);
  --text-3xl:  clamp(2.2rem,  1.5rem + 3.2vw, 3.6rem);

  --leading-tight: 1.08;
  --leading-snug:  1.28;
  --leading-body:  1.62;

  --tracking-tight: -0.022em;
  --tracking-wide:   0.14em;   /* eyebrows only */

  /* ---- Shape — the signature -------------------------------------------
     The logo is a pair of hands cradling a family. The whole identity is
     "held". So containers are cupped: the top corners stay tight, the
     bottom corners open up, and the shadow sits underneath rather than
     around. Read it as resting in a palm.

     This is the one place the design is loud. Everything else stays quiet,
     and the shape is used on maybe four elements per page — the hero
     visual, the form panel, the icon holders. Applied to everything it
     stops meaning anything. */

  --cup:        18px 18px 56px 56px;
  --cup-sm:     12px 12px 28px 28px;
  --cup-lg:     24px 24px 88px 88px;
  --radius:     14px;    /* ordinary corners, for everything not cupped */
  --radius-sm:  9px;
  --pill:       999px;

  /* Shadow falls below, like weight resting in a hand. */
  --lift:       0 10px 24px -14px rgb(18 44 85 / 22%);
  --lift-high:  0 22px 48px -22px rgb(18 44 85 / 28%);

  /* ---- Space ----------------------------------------------------------- */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 1160px;
}

/* Shared reset + primitives used by every preview page and by the landing.
   Kept separate from tokens.css so tokens stay a pure value list. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Eyebrow ------------------------------------------------------------
   A small label above a heading. Sage, never gold: gold is reserved for
   the one thing we are asking the reader to do. */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sage-deep);
}
.eyebrow--onDark { color: var(--gold); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--lift); }
.btn:active { transform: translateY(0); }

/* Gold is the donation ask, and nothing else. Navy text on gold clears AA. */
.btn--gold  { --btn-bg: var(--gold); --btn-fg: var(--navy); }
.btn--gold:hover { --btn-bg: var(--gold-bright); }

.btn--navy  { --btn-bg: var(--navy); --btn-fg: var(--cream); }
.btn--navy:hover { --btn-bg: var(--navy-deep); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border-color: var(--line-strong);
}
.btn--quiet:hover { --btn-bg: var(--sage-tint); border-color: var(--sage); }

.btn--onDark {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  border-color: rgb(250 247 242 / 40%);
}
.btn--onDark:hover { --btn-bg: rgb(250 247 242 / 12%); border-color: var(--cream); }

.btn--lg { padding: 1rem 2.1rem; font-size: var(--text-base); }
.btn--sm { padding: .55rem 1.15rem; font-size: var(--text-xs); }
.btn--block { width: 100%; }
.btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ---- Cupped container — the signature ----------------------------------- */
.cup    { border-radius: var(--cup);    box-shadow: var(--lift); }
.cup-sm { border-radius: var(--cup-sm); }
.cup-lg { border-radius: var(--cup-lg); box-shadow: var(--lift-high); }

/* ---- Preview page chrome (design-system pages only) --------------------- */
.ds-page { padding: 2.5rem 2rem 3rem; }
.ds-title {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: .35rem;
}
.ds-note {
  max-width: 62ch;
  color: var(--navy-soft);
  font-size: var(--text-sm);
  margin-bottom: 2.25rem;
}
.ds-group { margin-bottom: 2.75rem; }
.ds-group:last-child { margin-bottom: 0; }
.ds-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--navy-soft);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
.ds-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.ds-caption { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--navy-soft); }

/* =========================================================================
   Landing page layout.

   Everything above this point (tokens + base) is the design system and is
   shared. What follows is page-specific composition: the sections, and
   nothing that another page would need.
   ========================================================================= */

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--cream);
  padding: .75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--cream-deep); }

.section__head { max-width: 46ch; margin-bottom: var(--space-5); }
.section__title { font-size: var(--text-2xl); margin-block: .4rem .7rem; }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(250 247 242 / 90%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .85rem;
}
.site-header__logo img { width: auto; height: 44px; }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav a:not(.btn) {
  font-family: var(--font-ui); font-weight: 500; font-size: var(--text-sm);
  text-decoration: none; color: var(--navy);
}
.site-nav a:not(.btn):hover { color: var(--sage-deep); }

@media (max-width: 720px) {
  .site-header__logo img { height: 34px; }
  .site-nav a:not(.btn) { display: none; }
}

/* ---- Hero -------------------------------------------------------------- */
.hero { background: var(--cream); padding-block: clamp(2.5rem, 1rem + 4vw, 4.5rem) var(--section-y); }
.hero__grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 880px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

.hero__title { font-size: var(--text-3xl); margin-block: .8rem 1.1rem; }
.hero__subtitle { font-size: var(--text-lg); color: var(--navy-soft); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: var(--space-4); }

/* The cupped visual. One per page — this is the loudest element in the design. */
.hero__visual {
  background: var(--sage-tint);
  border-radius: var(--cup-lg);
  box-shadow: var(--lift-high);
  aspect-ratio: 4/3;
  overflow: hidden;
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Mission ----------------------------------------------------------- */
.mission { background: var(--cream-deep); padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.mission__inner { max-width: 44rem; margin-inline: auto; text-align: center; }
.mission__text {
  font-size: var(--text-xl); font-style: italic;
  line-height: 1.5; margin-top: .8rem;
}

/* ---- Service cards ----------------------------------------------------- */
/* Six services, so the grid is pinned to 3 columns rather than left to
   auto-fit: at container width auto-fit resolves to 4, which strands two
   cards on a second row. 3 + 3 is the only balanced split for six. */
.cards {
  list-style: none; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);   /* ordinary corners — a list, not a held thing */
  padding: 1.75rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--sage); box-shadow: var(--lift); transform: translateY(-2px); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: 1rem;
  background: var(--sage-tint); color: var(--sage-deep);
  border-radius: var(--cup-sm);   /* the cup, at its smallest */
}
.card__title { font-size: var(--text-lg); margin-bottom: .45rem; }
.card__text { color: var(--navy-soft); font-size: var(--text-sm); }

/* ---- About + pillars --------------------------------------------------- */
.about {
  display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 900px) { .about { grid-template-columns: 1.15fr .85fr; } }
.about__copy p:not(.eyebrow) { margin-top: 1rem; color: var(--navy-soft); }

.pillars { display: grid; gap: 1.1rem; margin-top: 1.25rem; }
.pillar { padding-left: 1.1rem; border-left: 3px solid var(--gold); }
.pillar__title { font-family: var(--font-ui); font-weight: 600; }
.pillar__text { margin: .15rem 0 0; font-size: var(--text-sm); color: var(--navy-soft); }

/* ---- Donate — the one dark band ---------------------------------------- */
.donate {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--cream);
  padding-block: var(--section-y);
}
.donate::after {
  content: ''; position: absolute; inset: auto -12% -60% auto;
  width: 34rem; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgb(195 159 87 / 20%) 0%, transparent 62%);
}
.donate__inner { position: relative; max-width: 40rem; }
.donate__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem;
  background: rgb(195 159 87 / 18%); color: var(--gold);
  border-radius: var(--cup-sm);
}
.donate__title { font-size: var(--text-2xl); margin-block: .4rem .9rem; }
.donate__text { color: rgb(250 247 242 / 78%); margin-bottom: var(--space-4); max-width: 46ch; }
.donate__note { margin-top: 1.4rem; font-size: var(--text-sm); color: rgb(250 247 242 / 55%); max-width: 46ch; }

/* ---- Contact ----------------------------------------------------------- */
.contact {
  display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 900px) { .contact { grid-template-columns: .85fr 1.15fr; } }
.contact__intro p:not(.eyebrow) { color: var(--navy-soft); }

.contact__details { list-style: none; padding: 0; margin-top: var(--space-4); display: grid; gap: .9rem; }
.contact__details li { display: flex; align-items: center; gap: .75rem; font-size: var(--text-sm); }
.contact__details svg { flex: none; color: var(--sage); }
.contact__details a { color: var(--navy); text-decoration-color: var(--line-strong); }

/* Cupped: this panel is the thing the page exists to hold. */
.contact__form-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--cup);
  box-shadow: var(--lift);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

/* ---- Form -------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field label { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); }
.req { color: var(--danger); }
.opt { color: var(--navy-soft); font-weight: 400; }

.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .9rem;
  background: var(--cream);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sage); background: var(--paper);
  box-shadow: 0 0 0 3px rgb(117 143 121 / 22%);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--danger); }

.field--check { gap: .35rem; }
.check { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .32rem; flex: none; accent-color: var(--sage-deep); }
.check span { font-size: var(--text-sm); color: var(--navy-soft); }

.form__note { font-size: var(--text-sm); color: var(--navy-soft); text-align: center; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Alerts ------------------------------------------------------------ */
.alert {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: var(--text-sm);
}
.alert p { margin-top: .2rem; color: var(--navy-soft); }
.alert--success { background: var(--sage-tint); border-color: #C9D8CB; color: var(--success); }
.alert--success svg { flex: none; }
.alert--error { background: #FBF0EF; border-color: #E8CDCA; color: var(--danger); }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--navy-deep);
  color: rgb(250 247 242 / 68%);
  padding-block: 3.5rem 2.25rem;
  text-align: center;
}
.site-footer__inner { display: grid; justify-items: center; gap: 1rem; }
.site-footer__logo { width: auto; height: 56px; }
.site-footer__tagline {
  font-family: var(--font-ui); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--gold);
}
.site-footer__social { display: flex; gap: 1.5rem; }
.site-footer__social a { font-size: var(--text-sm); text-decoration-color: rgb(250 247 242 / 30%); }
.site-footer__social a:hover { color: var(--cream); }
.site-footer__legal {
  font-size: var(--text-sm); color: rgb(250 247 242 / 48%);
  border-top: 1px solid rgb(250 247 242 / 12%);
  padding-top: 1.4rem; margin-top: .6rem; width: 100%;
}