/* American Children Fund: the tafund.org layout and type, recoloured from the winged AC logo.
   Warm cream paper, navy carries everything, red is the one accent (like the logo's red feather), no gold.
   Scoped to html.acf; tools/theme_site.py publishes it as assets/acf-<hash>.css for every page. */
html.acf {
  --color-gold-500: #143654;
  --color-gold-600: #143654;
  --color-gold-text: #b2222d;
  --shadow-warm-sm: 0 1px 2px rgba(13, 42, 69, .05);
  --shadow-warm: 0 1px 2px rgba(13, 42, 69, .04), 0 8px 24px rgba(13, 42, 69, .06);
  --shadow-warm-lift: 0 2px 4px rgba(13, 42, 69, .05), 0 14px 32px rgba(13, 42, 69, .09);
  --shadow-warm-lg: 0 2px 4px rgba(13, 42, 69, .05), 0 16px 40px rgba(13, 42, 69, .08);
}
html.acf body { background: var(--color-cream-50); }

html.acf .acf-hero img[src$="acf-seal.png"] { width: 112px; height: 112px; filter: none; }

/* cards: lighter edges, softer depth */
html.acf .border-line { border-color: var(--color-line); }
html.acf .acf-treasury { border-color: transparent; box-shadow: var(--shadow-warm-lg); }
html.acf .acf-treasury .eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--color-red-600); vertical-align: 1px; }

/* the navy band now starts on a straight edge instead of the copied flag ribbon */
html.acf #why-it-matters .text-\[\#e1c688\] { color: #f2b8bd; }

/* larger, softer card rounding everywhere; buttons keep the original control radius */
html.acf { --radius-card: 18px; }

/* hero: one centred column, the logo leads between a mirrored pair of its wings, the treasury reads as a wide live strip */
html.acf .acf-hero-grid { grid-template-columns: 1fr !important; justify-items: center; min-height: 0 !important; gap: 56px !important; padding-top: 76px !important; padding-bottom: 72px !important; }
html.acf .acf-hero-grid > div:first-child { align-items: center !important; text-align: center !important; }
html.acf .acf-hero-grid > div:first-child > div:last-child { justify-content: center !important; }
html.acf .acf-hero-grid h1 { margin-top: 28px; }
@media (min-width: 1024px) { html.acf .acf-hero-grid h1 { font-size: 80px; } }
html.acf .acf-hero-grid > div:first-child > p { margin-left: auto; margin-right: auto; }
html.acf .acf-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; right: auto; left: 50%; top: 40px; transform: translateX(-50%); width: min(1100px, 96vw); aspect-ratio: auto; height: 520px; background: url("../brand/wing.png") right center / auto 100% no-repeat; opacity: .045; }
html.acf .acf-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 40px; transform: translateX(-50%) scaleX(-1); width: min(1100px, 96vw); height: 520px; background: url("../brand/wing.png") right center / auto 100% no-repeat; opacity: .045; }
@media (min-width: 1024px) {
  html.acf .acf-treasury {
    max-width: 1000px !important; justify-self: center !important; width: 100%;
    display: grid; grid-template-columns: auto 1fr 1fr auto; grid-template-areas: "k sub ver links" "amt sub ver links";
    align-items: center; column-gap: 40px; padding: 26px 36px !important; text-align: left;
  }
  html.acf .acf-treasury > * { margin: 0 !important; }
  html.acf .acf-treasury > :nth-child(1) { grid-area: k; }
  html.acf .acf-treasury > :nth-child(2) { grid-area: amt; margin-top: 8px !important; }
  html.acf .acf-treasury > :nth-child(3) { grid-area: sub; }
  html.acf .acf-treasury > :nth-child(4) { grid-area: ver; border-top: 0 !important; padding-top: 0 !important; border-left: 1px solid var(--color-line); padding-left: 32px; }
  html.acf .acf-treasury > :nth-child(5) { grid-area: links; flex-direction: column; gap: 10px !important; }
}

/* how it works: counters for the timeline numbers */
html.acf #how-it-works ol { counter-reset: step; }
html.acf #how-it-works li { counter-increment: step; }
html.acf .acf-step > span:first-child { display: none; }
html.acf .acf-step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); line-height: 1; }

/* navy band for the mission, same navy and type colours as the band under the hero */
html.acf .acf-navy { background: var(--color-navy-800); color: var(--color-cream-50); }
html.acf .acf-navy h2 { color: var(--color-cream-50); }
html.acf .acf-navy .eyebrow { color: #f2b8bd; }
html.acf .acf-navy .text-ink\/85 { color: #d5e0e6; }

/* the starting line: heading centred, the three figures in one row */
html.acf .acf-stats > div { grid-template-columns: 1fr !important; gap: 56px !important; }
html.acf .acf-stats > div > div:first-child { text-align: center !important; max-width: 760px; margin: 0 auto; }
html.acf .acf-stats > div > div:first-child p { margin-left: auto; margin-right: auto; }
html.acf .acf-stats #context-title { font-size: clamp(2.8rem, 5vw, 4.6rem) !important; }
html.acf .acf-stats > div > div:last-child { border-top: 0 !important; display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  html.acf .acf-stats > div > div:last-child { grid-template-columns: repeat(3, 1fr); }
  html.acf .acf-stats article + article { border-left: 1px solid rgba(255, 255, 255, .16); }
}
html.acf .acf-stats article {
  display: flex !important; flex-direction: column; align-items: center; text-align: center !important;
  border-bottom: 0 !important; padding: 12px 28px !important; gap: 14px !important;
}
html.acf .acf-stats article strong { font-size: clamp(3.6rem, 6vw, 5.4rem) !important; font-weight: 500 !important; }
html.acf .acf-stats article p { max-width: 30ch; margin: 0 !important; }
html.acf .acf-stats article a { min-height: 0 !important; justify-content: center !important; }
@media (max-width: 767px) {
  html.acf .acf-stats article { padding: 24px 0 !important; }
  html.acf .acf-stats article + article { border-top: 1px solid rgba(255, 255, 255, .16); }
}

/* how it works: four navy cards, a large number, generous padding */
html.acf #how-it-works ol { gap: 20px; }
html.acf .acf-step {
  background: var(--color-navy-800) !important; border: 0 !important; box-shadow: none !important;
  border-radius: var(--radius-card) !important; padding: 36px 32px 34px !important; min-height: 0 !important;
}
html.acf .acf-step::before { font-size: 56px; color: var(--color-cream-50); margin-bottom: 26px; opacity: .92; }
html.acf .acf-step .eyebrow { display: none; }
html.acf .acf-step h3 { color: var(--color-cream-50) !important; font-size: 1.4rem !important; min-height: 0 !important; }
html.acf .acf-step p { color: #c9d5df !important; }
@media (min-width: 1024px) { html.acf .acf-step { min-height: 300px !important; } }

/* mission: a centred statement over the darkened family photo */
html.acf .acf-statement {
  position: relative; isolation: isolate; overflow: hidden; padding-top: 140px !important; padding-bottom: 140px !important;
  background: linear-gradient(rgba(9, 32, 56, .82), rgba(9, 32, 56, .88)), url("../images/family.jpg") center 40% / cover !important;
}
html.acf .acf-statement > div { display: block !important; max-width: 820px; text-align: center; }
html.acf .acf-statement .section-heading { align-items: center !important; text-align: center !important; }
html.acf .acf-statement h2 { font-size: clamp(2.4rem, 4.6vw, 3.8rem) !important; line-height: 1.05 !important; }
html.acf .acf-statement p.mt-6 { margin-left: auto; margin-right: auto; max-width: 58ch; font-size: 1.15rem; color: #e3eaef; }

/* FAQ: heading on the left, questions in a light card on the right, on its own band */
html.acf .acf-faq { background: #efe6d6 !important; }
@media (min-width: 1024px) {
  html.acf #faq > div { max-width: var(--container-content) !important; display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
  html.acf #faq .section-heading { align-items: flex-start !important; text-align: left !important; position: sticky; top: 120px; margin: 0; }
}
html.acf #faq .divide-y { margin-top: 0; background: #fffdf8; border-radius: 22px; padding: 8px 32px; box-shadow: 0 1px 2px rgba(13, 42, 69, .05), 0 16px 40px rgba(13, 42, 69, .07); }
html.acf #faq details { padding-top: 22px; padding-bottom: 22px; }
html.acf #faq summary { font-size: 1.05rem; }
@media (max-width: 639px) { html.acf #faq .divide-y { padding: 4px 20px; } }

/* closing call: the whole section in navy */
html.acf .acf-closer { background: var(--color-navy-800); padding-top: 112px !important; padding-bottom: 112px !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }
html.acf .acf-closer h2 { color: var(--color-cream-50) !important; font-size: clamp(2.2rem, 4vw, 3.4rem) !important; line-height: 1.1 !important; }
html.acf .acf-closer p { color: #d5e0e6 !important; }
html.acf .acf-closer a { background: var(--color-red-600) !important; color: #fff !important; }

/* app preview: four tabs for the newer app (Home, Learn, Missions, Profile) */
html.acf .app-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: 480px !important; }