/* ==========================================================================
   FOG PAGES REFRESH — "Grove-FOG / Warm Humanity" (Sept 2026)
   --------------------------------------------------------------------------
   Brings every public page (about, programs, impact, donate, apply, career,
   blog, stories, contact, volunteer, campaigns, transparency, faq…) up to
   the same design language as the redesigned homepage:

     • warm ivory paper + gold/navy radial hero washes
     • Sora display headings in deep navy ink with the gold rule
     • pill buttons (navy primary / gold CTA) with soft navy shadows
     • white rounded cards with hairline borders + hover lift
     • consistent section rhythm, typography and form styling

   Loaded LAST (end of footer.php) so it wins the cascade over the
   per-page inline <style> blocks, which render earlier in <body>.
   All selectors are `html`-prefixed on purpose (specificity), mirroring
   fog-public.css. Tokens come from fog-tokens.css (already loaded).
   ========================================================================== */

/* ============================== HEROES =================================== */
html main .about-hero,
html main .programs-hero,
html main .impact-hero,
html main .donate-hero,
html main .apply-hero,
html main .career-hero,
html main .blog-hero,
html main .contact-hero,
html main .stories-hero,
html main .volunteer-hero,
html main .camp-hero,
html main .transparency-hero,
html main .faq-hero,
html main .page-hero {
  position: relative;
  padding: calc(var(--fog-header-h, 74px) + 56px) 0 72px;
  background:
    radial-gradient(720px 380px at 88% -10%, rgba(208, 176, 40, .16), transparent 62%),
    radial-gradient(560px 340px at -8% 108%, rgba(0, 64, 144, .12), transparent 62%),
    linear-gradient(170deg, var(--fog-paper) 0%, #F3EEDF 60%, #EDE6D2 100%);
  color: var(--fog-text);
  overflow: hidden;
}
/* decorative heart-gold glow, same family as the homepage hero */
html main .about-hero::before,
html main .programs-hero::before,
html main .impact-hero::before,
html main .donate-hero::before,
html main .apply-hero::before,
html main .career-hero::before,
html main .blog-hero::before,
html main .contact-hero::before,
html main .stories-hero::before,
html main .volunteer-hero::before,
html main .camp-hero::before,
html main .transparency-hero::before,
html main .page-hero::before {
  content: "";
  position: absolute;
  inset: auto -140px -180px auto;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(208, 176, 40, .14), transparent 70%);
  pointer-events: none;
}
html main .about-hero > *,
html main .programs-hero > *,
html main .impact-hero > *,
html main .donate-hero > *,
html main .apply-hero > *,
html main .career-hero > *,
html main .blog-hero > *,
html main .contact-hero > *,
html main .stories-hero > *,
html main .volunteer-hero > *,
html main .camp-hero > *,
html main .transparency-hero > *,
html main .page-hero > * { position: relative; }

/* hero heading — homepage title treatment */
html main .about-hero h1,
html main .programs-hero h1,
html main .impact-hero h1,
html main .donate-hero h1,
html main .apply-hero h1,
html main .career-hero h1,
html main .blog-hero h1,
html main .contact-hero h1,
html main .stories-hero h1,
html main .volunteer-hero h1,
html main .camp-hero h1,
html main .transparency-hero h1,
html main .faq-hero h1,
html main .page-hero h1 {
  font-family: var(--fog-font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--fog-ink);
}
/* hero sub / lead text */
html main .about-hero p,
html main .programs-hero p,
html main .impact-hero p,
html main .donate-hero p,
html main .apply-hero p,
html main .career-hero p,
html main .blog-hero p,
html main .contact-hero p,
html main .stories-hero p,
html main .volunteer-hero p,
html main .camp-hero p,
html main .transparency-hero p,
html main .faq-hero p,
html main .page-hero p {
  color: var(--fog-text-muted);
  font-size: 1.06rem;
  line-height: 1.75;
  max-width: 64ch;
}

/* hero kicker / eyebrow chip (pages use several legacy names) */
html main .about-hero .kicker, html main .about-hero .eyebrow, html main .about-hero .sub-heading,
html main .programs-hero .kicker, html main .programs-hero .eyebrow,
html main .impact-hero .kicker, html main .impact-hero .eyebrow,
html main .donate-hero .kicker, html main .donate-hero .eyebrow,
html main .apply-hero .kicker, html main .apply-hero .eyebrow,
html main .career-hero .kicker, html main .career-hero .eyebrow,
html main .blog-hero .kicker, html main .blog-hero .eyebrow,
html main .contact-hero .kicker, html main .contact-hero .eyebrow,
html main .stories-hero .kicker, html main .stories-hero .eyebrow,
html main .volunteer-hero .kicker, html main .volunteer-hero .eyebrow,
html main .page-hero .kicker, html main .page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--fog-surface);
  border: 1px solid var(--fog-line);
  box-shadow: var(--fog-sh-1);
  color: var(--fog-primary);
  font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--fog-r-pill);
  margin-bottom: 22px;
}

/* ========================= SECTION RHYTHM ================================ */
html main .core-principles,
html main .impact-highlights,
html main .impact-section,
html main .benefits-section,
html main .contact-methods,
html main .featured-story-section,
html main .stories-grid-section,
html main .pledge-section,
html main .quick-nav + section,
html main .mission-section,
html main .values-section,
html main .team-section,
html main .faq-section,
html main .cta-section,
html main .final-cta {
  padding: 84px 0;
}
html main .core-principles h2,
html main .impact-highlights h2,
html main .benefits-section h2,
html main .contact-methods h2,
html main .mission-section h2,
html main .values-section h2,
html main .team-section h2,
html main .faq-section h2,
html main h2.section-title,
html main .section-header h2 {
  font-family: var(--fog-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--fog-ink);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}
/* gold-ink uppercase subtitle above section titles */
html main .section-subtitle,
html main .section-eyebrow,
html main .subtitle,
html main .eyebrow,
html main .section-header .kicker {
  display: inline-block;
  color: var(--fog-gold-ink);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 10px;
}

/* ============================== BUTTONS ================================== */
/* Re-assert the homepage button language over per-page overrides. */
html main .btn,
html main .btn-primary,
html main .btn-secondary,
html main .btn-gold,
html main .btn-outline,
html main .btn-outline-navy,
html main .btn-outline-gold {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--fog-font-body);
  font-weight: 800; font-size: .9rem; line-height: 1;
  padding: 13px 26px;
  border-radius: var(--fog-r-pill);
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .18s var(--fog-ease), box-shadow .18s var(--fog-ease),
              background .18s, color .18s, border-color .18s, filter .18s;
}
html main .btn:hover,
html main .btn-primary:hover,
html main .btn-secondary:hover,
html main .btn-gold:hover,
html main .btn-outline:hover,
html main .btn-outline-navy:hover { transform: translateY(-2px); }
html main .btn:active,
html main .btn-primary:active,
html main .btn-secondary:active { transform: translateY(0); }

html main .btn-primary,
html main .btn-navy,
html main .donate-btn,
html main .btn-donate {
  background: var(--fog-primary);
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(0, 64, 144, .28);
}
html main .btn-primary:hover,
html main .btn-navy:hover,
html main .donate-btn:hover {
  background: var(--fog-primary-strong);
  box-shadow: 0 10px 24px rgba(0, 64, 144, .35);
}
html main .btn-secondary,
html main .btn-gold,
html main .donate-btn-gold,
html main .cta-btn {
  background: linear-gradient(135deg, #E3CC63 0%, var(--fog-gold) 100%);
  color: #06264A !important;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(208, 176, 40, .38);
}
html main .btn-secondary:hover,
html main .btn-gold:hover,
html main .cta-btn:hover {
  box-shadow: 0 10px 24px rgba(208, 176, 40, .45);
  filter: saturate(1.08);
}
html main .btn-outline,
html main .btn-outline-navy {
  background: transparent;
  border-color: var(--fog-line-strong);
  color: var(--fog-text);
}
html main .btn-outline-navy { border-color: var(--fog-primary); color: var(--fog-primary) !important; }
html main .btn-outline-navy:hover { background: var(--fog-primary); color: #fff !important; }

/* =============================== CARDS =================================== */
html main .card,
html main .feature-card,
html main .program-card,
html main .story-card,
html main .blog-card,
html main .post-card,
html main .news-card,
html main .team-card,
html main .benefit-card,
html main .value-card,
html main .principle-card,
html main .pillar-card,
html main .impact-card,
html main .testimonial-card,
html main .faq-item,
html main .method-card,
html main .contact-card,
html main .plan-card {
  background: var(--fog-surface);
  border: 1px solid var(--fog-line);
  border-radius: 18px;
  box-shadow: var(--fog-sh-1);
  transition: transform .2s var(--fog-ease), box-shadow .2s var(--fog-ease), border-color .2s;
}
html main .card:hover,
html main .feature-card:hover,
html main .program-card:hover,
html main .story-card:hover,
html main .blog-card:hover,
html main .post-card:hover,
html main .news-card:hover,
html main .team-card:hover,
html main .benefit-card:hover,
html main .value-card:hover,
html main .principle-card:hover,
html main .pillar-card:hover,
html main .impact-card:hover,
html main .method-card:hover,
html main .contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fog-sh-3);
  border-color: var(--fog-line-strong);
}
html main .card h3,
html main .feature-card h3,
html main .program-card h3,
html main .story-card h3,
html main .blog-card h3,
html main .post-card h3,
html main .team-card h3,
html main .benefit-card h3,
html main .value-card h3,
html main .principle-card h3,
html main .pillar-card h3,
html main .impact-card h3,
html main .method-card h3,
html main .contact-card h3 {
  font-family: var(--fog-font-display);
  font-weight: 700;
  color: var(--fog-ink);
  letter-spacing: -.015em;
}

/* card icon plates */
html main .card .icon,
html main .feature-card .icon,
html main .program-card .icon,
html main .benefit-card .icon,
html main .value-card .icon,
html main .principle-card .icon,
html main .impact-card .icon,
html main .method-card .icon,
html main .section-icon {
  background: var(--fog-primary-soft);
  color: var(--fog-primary);
  border-radius: 14px;
}

/* ============================== STATISTICS =============================== */
html main .stat-number,
html main .counter,
html main .metric-value,
html main .impact-number,
html main .stat-value {
  font-family: var(--fog-font-display);
  font-weight: 800;
  color: var(--fog-primary);
  letter-spacing: -.02em;
}
html main .stat-label,
html main .metric-label {
  color: var(--fog-text-muted);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ================================ FORMS ================================== */
html main input[type="text"],
html main input[type="email"],
html main input[type="tel"],
html main input[type="password"],
html main input[type="number"],
html main input[type="url"],
html main input[type="date"],
html main select,
html main textarea {
  background: var(--fog-surface);
  border: 1.5px solid var(--fog-line-strong);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--fog-font-body);
  font-size: .95rem;
  color: var(--fog-text);
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
}
html main input:focus,
html main select:focus,
html main textarea:focus {
  outline: none;
  border-color: var(--fog-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fog-gold) 22%, transparent);
}
html main label,
html main .form-label {
  font-weight: 700;
  color: var(--fog-ink);
  font-size: .9rem;
}
/* form cards: apply / donate / contact / volunteer */
html main .apply-form,
html main .donate-form,
html main .contact-form,
html main .volunteer-form,
html main .form-card,
html main .application-form,
html main .form-container {
  background: var(--fog-surface);
  border: 1px solid var(--fog-line);
  border-radius: 20px;
  box-shadow: var(--fog-sh-2);
  padding: clamp(24px, 4vw, 44px);
}

/* ============================ CTA BANNERS ================================ */
html main .cta-section,
html main .final-cta,
html main .donate-cta {
  background:
    radial-gradient(560px 300px at 90% -20%, rgba(208, 176, 40, .22), transparent 60%),
    linear-gradient(135deg, var(--fog-ink) 0%, var(--fog-primary) 100%);
  border-radius: 24px;
  color: #fff;
  text-align: center;
}
html main .cta-section h2,
html main .final-cta h2,
html main .donate-cta h2 { color: #fff; }
html main .cta-section p,
html main .final-cta p,
html main .donate-cta p { color: rgba(255, 255, 255, .82); }

/* =========================== TABLES & LISTS ============================== */
html main table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--fog-surface);
  border: 1px solid var(--fog-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--fog-sh-1);
}
html main thead th {
  background: var(--fog-surface-2);
  color: var(--fog-ink);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--fog-line);
}
html main tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--fog-line);
  color: var(--fog-text);
  font-size: .93rem;
}
html main tbody tr:last-child td { border-bottom: none; }
html main tbody tr:hover td { background: var(--fog-surface-2); }

/* =============================== MISC ==================================== */
/* links inside body copy keep the brand blue */
html main p a, html main li a {
  color: var(--fog-primary);
  font-weight: 600;
}
html main p a:hover, html main li a:hover { color: var(--fog-primary-strong); }

/* drop-cap-free, airy prose */
html main .prose p, html main .content p, html main article p {
  line-height: 1.8;
  color: var(--fog-text);
  margin-bottom: 1.1em;
}

/* image rounding on editorial imagery */
html main .story-image img,
html main .featured-image img,
html main .post-image img,
html main article img,
html main .blog-feature img {
  border-radius: 16px;
}

/* mobile: calm the hero padding so the fixed header still clears */
@media (max-width: 720px) {
  html main .about-hero,
  html main .programs-hero,
  html main .impact-hero,
  html main .donate-hero,
  html main .apply-hero,
  html main .career-hero,
  html main .blog-hero,
  html main .contact-hero,
  html main .stories-hero,
  html main .volunteer-hero,
  html main .camp-hero,
  html main .transparency-hero,
  html main .faq-hero,
  html main .page-hero {
    padding: calc(var(--fog-header-h, 74px) + 36px) 0 48px;
  }
}