/*
Theme Name: She Evolves
Theme URI: https://sheevolves.world
Author: She Evolves
Description: Classic WordPress theme for She Evolves -- "1000 Stories, 100,000 Trees."
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: she-evolves
*/

:root {
  --ground: #FBFAF7;
  --ink: #16181A;
  --body: #55595E;
  --body-strong: #3A3F44;
  --muted: #8A8F94;
  --muted-light: #A7ABAF;
  --rule: #E6E2D9;
  --border: #E0DCD2;
  --border-light: #EFEBE2;
  --green: #2E7D5B;
  --green-dark: #14503A;
  --coral: #C9502F;
  --ochre: #9C6E10;
  --tint-green: #EAF2ED;
  --tint-coral: #FBEDE7;
  --tint-sand: #F5EFDF;
  --footer-green: #5FB98C;

  /* Additional tokens found in the signed-off static build, beyond the base
     set documented in CLAUDE.md -- accessible text/rule colors for content
     sitting on a tint or dark background. */
  --copy: #33373B;
  --coral-dark: #B0431F;
  --coral-ink: #8A3A1C;
  --tint-sand-rule: #E4DCC4;
  --tint-sand-border: #DDD3B8;
  --ochre-ink: #8A6A1E;
  --ink-panel: #22262A;
  --on-dark-body: #C9CDD0;
  --on-dark-strong: #B9BDC0;

  --footer-text: #E8E6E1;
  --footer-fine: #8E9298;
  --footer-rule: #2C3034;
  --footer-social-bg: #224032;
  --footer-social-fg: #7FCFA3;
  --footer-social-bg-hover: #2C5642;
  --footer-social-fg-hover: #A7E3C2;

  /* Link colors. Every link reads these two, and any background or
     component that needs different contrast redefines them -- see "Link
     colors by context" below. */
  --link: var(--green);
  --link-hover: var(--coral-dark);
  --coral-light: #F2A48A;  /* coral hover on dark surfaces */

  --content-width: 1240px;
  --content-width-narrow: 940px;
  --gutter: clamp(20px, 5vw, 40px);
}

/* Reset */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: Figtree, system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  a,
  .pill-btn {
    transition: none;
  }
}

/* No a:focus here: keyboard focus gets the :focus-visible ring, and a
   focus color would stay stuck on a link after a tap on mobile. */
a:hover {
  color: var(--link-hover);
}

/* Link colors by context. Text links are green and fade to coral on
   hover (--coral-dark rather than --coral: plain coral is 4.3:1 on the
   page ground, under the 4.5:1 text minimum). Contexts flip or lighten
   the pair so the hover always stands out from what is behind it. */

/* Dark surfaces: light text, light coral on hover. */
.site-footer,
.ambassador-band,
.dark-cta-band {
  --link: var(--footer-text);
  --link-hover: var(--coral-light);
}

.site-footer__bottom {
  --link: var(--footer-fine);
  --link-hover: var(--coral-light);
}

/* Coral tints: coral links, so the hover goes the other way, to green. */
.cta-band--coral,
.share-band,
.benefit-card--coral,
.legal-callout,
.stat-row--coral {
  --link: var(--coral-dark);
  --link-hover: var(--green-dark);
}

/* Whole-card links keep their text color; the button or heading inside
   them reacts instead (see .pill-btn below). */
.featured-story,
.promo-card,
.tile-row,
.feature-band {
  --link: var(--ink);
  --link-hover: var(--ink);
}

.whatsapp-card {
  --link: var(--ground);
  --link-hover: var(--ground);
}

/* Headings that are links: ink, coral on hover. */
.story-card__title a,
.faces-band__heading a {
  --link: var(--ink);
}

/* Quiet outlined pill links: body text, coral text and border on hover. */
.category-pill,
.jump-nav a,
.follow-pills a {
  --link: var(--body-strong);
}

.category-pill:hover,
.jump-nav a:hover,
.follow-pills a:hover {
  border-color: var(--coral-dark);
}

.category-pill.is-active {
  --link: var(--ground);
  --link-hover: var(--ground);
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Accessibility */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  height: auto;
  width: auto;
  display: block;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--ground);
  border-radius: 8px;
}

/* Layout */

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--narrow {
  max-width: var(--content-width-narrow);
}

.site {
  overflow-x: hidden;
}

/* Buttons */

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 14.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.pill-btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
  --link: var(--btn-fg);
  --link-hover: var(--btn-fg-hover);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover lightens the fill to the variant's own tint and moves the text to
   the deep tone of the same hue for contrast. An inset ring in the
   original color keeps the pill's shape even on a band of that same tint.
   A pill inside a whole-card link (the quote band, e.g.) reacts when the
   card is hovered. */
.pill-btn:hover,
a:hover .pill-btn {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  box-shadow: inset 0 0 0 1.5px var(--btn-ring);
}

.pill-btn--primary {
  --btn-bg: var(--ink);
  --btn-fg: var(--ground);
  --btn-bg-hover: var(--border-light);
  --btn-fg-hover: var(--ink);
  --btn-ring: var(--ink);
}

.pill-btn--coral {
  --btn-bg: var(--coral);
  --btn-fg: #fff;
  --btn-bg-hover: var(--tint-coral);
  --btn-fg-hover: var(--coral-ink);
  --btn-ring: var(--coral);
}

.pill-btn--green {
  --btn-bg: var(--green);
  --btn-fg: #fff;
  --btn-bg-hover: var(--tint-green);
  --btn-fg-hover: var(--green-dark);
  --btn-ring: var(--green);
}

.pill-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bg-hover: #FFFFFF;
  --btn-fg-hover: var(--ink);
  --btn-ring: var(--ink);
  border: 1px solid #D6D2C8;
}

.pill-btn--outline:hover,
a:hover .pill-btn--outline {
  border-color: var(--ink);
  box-shadow: none;
}

.pill-btn--whatsapp,
.pill-btn--mint {
  --btn-bg: var(--footer-green);
  --btn-fg: #10281E;
  --btn-bg-hover: #C4EBD5;
  --btn-fg-hover: #10281E;
  --btn-ring: var(--footer-green);
}

/* Outline pill for dark bands (the Ambassador band's contact button). */
.pill-btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--footer-text);
  --btn-bg-hover: rgba(255, 255, 255, 0.1);
  --btn-fg-hover: #FFFFFF;
  --btn-ring: var(--footer-text);
  box-shadow: inset 0 0 0 1px rgba(232, 230, 225, 0.45);
}

.pill-btn--whatsapp {
  font-weight: 700;
  padding: 14px 26px;
}

/* Pill photograph -- the signature move. Height is set per component (a
   hero photo and a card thumbnail crop at different heights); this class
   only fixes the shape. */

.pill-photo {
  display: block;
  width: 100%;
  border-radius: 999px;
  object-fit: cover;
}

/* Stat row */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px;
  padding: 34px 38px;
  border-radius: 44px;
  background: var(--tint-green);
}

.stat-row--coral {
  background: var(--tint-coral);
}

.stat-row--sand {
  background: var(--tint-sand);
}

.stat-row__value {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.stat-row__label {
  margin-top: 4px;
  font-size: 14px;
  color: var(--body);
}

/* Tinted CTA band */

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding: 34px 42px;
  border-radius: 40px;
  background: var(--tint-green);
  color: inherit;
}

.cta-band--coral {
  background: var(--tint-coral);
}

.cta-band--sand {
  background: var(--tint-sand);
}

.cta-band__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.cta-band__text {
  margin-top: 6px;
  font-size: 15.5px;
  color: var(--body);
}

.cta-band__action {
  flex: none;
}

/* Form input */

.se-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--body-strong);
}

.se-input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 13px 18px;
  font-family: Figtree, system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
  outline: none;
}

.se-input::placeholder {
  color: var(--muted-light);
}

.se-input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

textarea.se-input {
  border-radius: 24px;
  resize: vertical;
  line-height: 1.55;
}

.se-hint {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* Site header */

.site-header {
  position: relative;
  background: var(--ground);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-logo {
  display: flex;
  align-items: center;
  flex: none;
}

.site-logo img {
  height: clamp(64px, 7vw, 84px);
  width: auto;
}

.nav-toggle {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--ground);
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.primary-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  background: var(--ground);
  border-top: 1px solid var(--border-light);
  padding: 8px 24px 24px;
  z-index: 10;
}

.primary-nav.is-open {
  display: flex;
}

.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.primary-nav__list a {
  display: block;
  padding: 15px 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  --link: var(--ink);
  --link-hover: var(--green-dark);
  border-bottom: 1px solid var(--border-light);
}

.primary-nav .pill-btn--support {
  margin-top: 18px;
  width: 100%;
  padding: 15px 26px;
  font-size: 15.5px;
}

@media (min-width: 1080px) {
  .nav-toggle {
    display: none;
  }

  .primary-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background: transparent;
    border-top: 0;
    padding: 0;
  }

  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--body-strong);
  }

  .primary-nav__list a {
    padding: 0 0 2px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: normal;
    --link: var(--body-strong);
    --link-hover: var(--ink);
    border-bottom: 2px solid transparent;
  }

  .primary-nav__list .current-menu-item > a,
  .primary-nav__list .current_page_item > a {
    --link: var(--ink);
    border-bottom-color: var(--green);
  }

  .primary-nav .pill-btn--support {
    margin-top: 0;
    width: auto;
    padding: 9px 18px;
    font-size: 14.5px;
  }
}

/* Site footer */

.site-footer {
  background: var(--ink);
  color: var(--footer-text);
}


.site-footer__inner {
  padding-top: 54px;
  padding-bottom: 54px;
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.site-footer__logo img {
  height: 40px;
  width: auto;
}

.site-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14.5px;
}

.site-footer__actions {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--footer-social-bg);
  color: var(--footer-social-fg);
}

.social-btn:hover,
.social-btn:focus {
  background: var(--footer-social-bg-hover);
  color: var(--footer-social-fg-hover);
}

.site-footer__bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--footer-rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--footer-fine);
}


.site-footer__legal,
.site-footer__meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Content pages: About, Support, Privacy, Safety */

.kicker {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
}

.kicker--coral {
  color: var(--coral-dark);
}

.kicker--mint {
  color: var(--footer-green);
}

.page-hero {
  padding-top: 56px;
}

.page-hero h1 {
  margin-top: 14px;
  font-size: clamp(28px, 4.2vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 720px;
}

.page-hero p {
  margin-top: 20px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 580px;
}

.prose {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--copy);
}

.prose p + p {
  margin-top: 22px;
}

/* "On this page" jump nav */

.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jump-nav a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.3;
}

/* Legal sections (Privacy) */

.legal-section {
  padding-bottom: 40px;
}

.legal-section__title {
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -0.026em;
  font-weight: 800;
}

.legal-section__body {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--copy);
}

.legal-callout {
  margin-top: 16px;
  padding: 18px 22px;
  border-radius: 22px;
  background: var(--tint-coral);
  font-size: 15px;
  line-height: 1.55;
  color: var(--coral-ink);
}

.legal-help-box {
  padding: 30px 34px;
  border-radius: 34px;
  background: var(--tint-green);
}

.legal-help-box__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.022em;
}

.legal-help-box__body {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--copy);
}

/* Helpline cards (Safety) */

.helpline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.helpline-card {
  padding: 22px 26px;
  border-radius: 28px;
  background: #FFFFFF;
}

.helpline-card__name {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.3;
}

.helpline-card__number {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--coral-dark);
}

.helpline-card__note {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--body);
}

/* Step list (moderation) */

.step-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.step-row__n {
  padding-top: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--green);
}

.step-row__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.26;
}

.step-row__body {
  margin-top: 7px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

/* Dot list (promises, ambassador perks) */

.dot-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dot-list__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}

.dot-list__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
}

.dot-list__dot--mint {
  background: var(--footer-green);
}

.dot-list__item--on-dark {
  color: var(--footer-text);
}

/* Founder card (About) */

.founder-card {
  padding: 44px;
  border-radius: 48px;
  background: var(--tint-sand);
}

.founder-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
  align-items: start;
}

.founder-card__photo {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  border-radius: 40px;
  object-fit: cover;
}

.founder-card__name {
  margin-top: 24px;
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.founder-card__role {
  margin-top: 8px;
  font-size: 15px;
  color: var(--body);
}

.founder-card__quote {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tint-sand-rule);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
  font-style: italic;
}

.founder-card__pullquote {
  margin-top: 22px;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* Committee cards (About) */

.committee-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.committee-card {
  padding: 26px 28px;
  border-radius: 30px;
  border: 1px solid var(--rule);
  background: #FFFFFF;
}

.committee-card__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.committee-card__org {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--body);
  font-style: italic;
}

/* Bordered info band (About "Supported by", Support "Organisations") */

.info-band {
  padding: 34px clamp(20px, 5vw, 40px);
  border-radius: 40px;
  border: 1px solid var(--rule);
}

.org-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 26px 34px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.5;
  color: var(--copy);
}

/* Ambassador band (Support) */

.ambassador-band {
  padding: clamp(24px, 5vw, 48px);
  border-radius: 48px;
  background: var(--ink);
  color: var(--footer-text);
}

.ambassador-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}

.ambassador-band__heading {
  margin-top: 14px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.034em;
  font-weight: 800;
  color: var(--ground);
}

.ambassador-band__body {
  margin-top: 18px;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--on-dark-body);
  max-width: 460px;
}

.ambassador-band__perks {
  margin-top: 30px;
}

.ambassador-band__cta {
  margin-top: 34px;
}

.ambassador-stat {
  margin-top: 26px;
  padding: 26px 30px;
  border-radius: 32px;
  background: var(--ink-panel);
}

.ambassador-stat__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--footer-fine);
}

.ambassador-stat__value {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ambassador-stat__value strong {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ground);
}

.ambassador-stat__value span {
  font-size: 16px;
  color: var(--on-dark-strong);
}

.ambassador-stat__note {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--on-dark-strong);
}

/* Notes under the donation form (Support) */

.donation-notes {
  margin-top: 16px;
  padding: 0 clamp(8px, 2vw, 16px);
}

.donation-notes p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body);
}

.donation-notes p + p {
  margin-top: 6px;
}

/* Cost list (Support) */

.cost-list {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cost-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.cost-row__amount {
  flex: none;
  min-width: 96px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cost-row__buys {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--copy);
}

/* Donation panel placeholder (Support) -- replaced by the GiveWP shortcode
   output once Phase 8 wires the real form. */

.donation-panel,
.form-panel {
  padding: 38px clamp(20px, 5vw, 40px);
  border-radius: 48px;
  background: var(--tint-green);
}

.donation-panel__placeholder,
.form-panel__placeholder {
  padding: 34px 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
}

/* Stories index */

.stories-hero h1 {
  margin-top: 14px;
  font-size: clamp(31px, 4.7vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 780px;
}

.featured-story {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding: 34px;
  border-radius: 48px;
  background: var(--tint-green);
  color: var(--ink);
}

.featured-story__photo {
  flex: 115 1 340px;
  height: 330px;
  --pill-h: 330px;
}

.featured-story__body {
  flex: 100 1 300px;
  min-width: 0;
}

.featured-story__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
}

.featured-story__eyebrow span.sep {
  color: #9AA39C;
  text-transform: none;
  letter-spacing: normal;
}

.featured-story__eyebrow span.meta {
  color: var(--body);
  letter-spacing: 0.06em;
}

.featured-story__title {
  margin-top: 16px;
  font-size: 36px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.featured-story__excerpt {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 420px;
}

.featured-story__meta {
  margin-top: 22px;
  font-size: 14px;
  color: #6B7075;
}

.featured-story__cta {
  margin-top: 26px;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-pill {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
}

.category-pill.is-active {
  border-color: transparent;
  background: var(--ink);
  color: var(--ground);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 34px 26px;
}

/* Pagination -- paginate_links( array( 'type' => 'list' ) ), used on the
   Stories index and category archives. WordPress gives the <ul> itself the
   class "page-numbers" as well as every link/span inside it, so the
   container and item rules below are tag-qualified to tell them apart. */

ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

a.page-numbers,
span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--body-strong);
  font-size: 14.5px;
  font-weight: 600;
}

a.page-numbers:hover,
a.page-numbers:focus-visible {
  border-color: var(--green);
  background: var(--tint-green);
  color: var(--green-dark);
}

span.page-numbers.current {
  border-color: transparent;
  background: var(--ink);
  color: var(--ground);
}

span.page-numbers.dots {
  min-width: auto;
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--muted);
  font-weight: 700;
}

.story-card {
  display: block;
  color: var(--ink);
}

.story-card__photo-link {
  display: block;
}

.story-card__photo {
  height: 190px;
  --pill-h: 190px;
}

.story-card__cat {
  margin-top: 16px;
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
}

.story-card__title {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
}



.story-card__excerpt {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.5;
}

.story-card__meta {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* Related story card (smaller, used on single.php) */

.story-card--related .story-card__photo {
  height: 150px;
}

.story-card--related .story-card__title {
  font-size: 19px;
  letter-spacing: -0.018em;
  line-height: 1.3;
}

/* Single story */

.post-header {
  max-width: 820px;
  margin: 0 auto;
}

.post-header__back {
  font-size: 14px;
  font-weight: 600;
}

.post-header__eyebrow {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
}

.post-header__eyebrow .sep {
  color: #C3C8C4;
}

.post-header__eyebrow .meta {
  color: #6B7075;
  letter-spacing: 0.06em;
  text-transform: none;
}

.post-header__title {
  margin-top: 18px;
  font-size: clamp(29px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.post-header__lead {
  margin-top: 22px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--body);
  font-weight: 400;
}

.post-header__author {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 14px;
}

.post-header__author-photo {
  width: 44px;
  height: 44px;
  flex: none;
}

.post-header__author-name {
  font-size: 15px;
  font-weight: 700;
}

.post-header__author-role {
  font-size: 13.5px;
  color: #6B7075;
}

.post-hero {
  max-width: 820px;
  margin: 0 auto;
  height: 420px;
  --pill-h: 420px;
}

.prose--story {
  max-width: 700px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.72;
  color: var(--copy);
}

.prose--story h2 {
  margin-top: 44px;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.028em;
  font-weight: 800;
}

.prose--story p + p,
.prose--story p + h2,
.prose--story h2 + p {
  margin-top: 18px;
}

.prose--story blockquote {
  margin: 40px 0 0;
  padding: 32px 36px;
  border-radius: 36px;
  background: var(--tint-green);
  border: none;
}

.prose--story blockquote p {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}

.post-footer {
  max-width: 700px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.post-footer__filed {
  font-size: 14px;
  color: #6B7075;
}

.post-footer__actions {
  display: flex;
  gap: 10px;
}

.post-footer .pill-btn {
  padding: 11px 22px;
  font-size: 13.5px;
}

.post-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.post-gallery img {
  border-radius: 32px;
  object-fit: cover;
  width: 100%;
  height: 220px;
}

/* Comments */

.comments-section {
  max-width: 700px;
  margin: 0 auto;
}

.comments-section__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.comments-section__intro {
  margin-top: 8px;
  font-size: 14.5px;
  color: #6B7075;
}

.comment-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  list-style: none;
  padding: 0;
}

.comment {
  display: flex;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}

.comment__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--tint-green);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

.comment__body {
  min-width: 0;
}

.comment__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.comment__author {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.comment__date {
  font-size: 12.5px;
  color: var(--muted);
}

.comment__text {
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--copy);
}

.comment-form {
  margin-top: 36px;
  padding: 30px 32px;
  border-radius: 36px;
  background: var(--tint-green);
}

.comment-form__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.022em;
}

.comment-form .comment-form-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.comment-form__footer {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.comment-form__note {
  font-size: 13px;
  color: var(--body);
  max-width: 360px;
}

/* Trees + Communities page */

.qr-band {
  padding: 40px clamp(24px, 5vw, 46px);
  border-radius: 48px;
  background: var(--tint-sand);
}

.qr-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 44px;
  align-items: center;
}

.qr-band__code {
  display: inline-flex;
  padding: 16px;
  border-radius: 28px;
  background: #FFFFFF;
}

.qr-band__code img {
  display: block;
  width: 168px;
  height: 168px;
}

.qr-band__body {
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 440px;
}

.quote-band {
  padding: 48px clamp(24px, 5vw, 52px);
  border-radius: 48px;
  background: var(--tint-green);
}

.quote-band__text {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.34;
  letter-spacing: -0.026em;
  font-weight: 500;
  color: var(--ink);
  max-width: 900px;
}

.quote-band__text::before {
  content: '\201C';
}

.quote-band__text::after {
  content: '\201D';
}

.quote-band__attribution {
  margin-top: 26px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* South Africa planting map */

.map-panel {
  position: relative;
  height: 420px;
  border-radius: 44px;
  overflow: hidden;
  background: var(--ground);
  border: 1px solid var(--rule);
}

@media (min-width: 720px) {
  .map-panel {
    height: 620px;
  }
}

.map-panel svg {
  display: block;
  width: 100%;
  height: 100%;
}

.se-map-pin {
  cursor: pointer;
}

.se-map-pin__dot {
  fill: var(--coral);
  stroke: var(--ground);
  stroke-width: 2;
  transition: r 180ms ease;
}

.se-map-pin:hover .se-map-pin__dot,
.se-map-pin.active .se-map-pin__dot {
  r: 11;
}

.se-map-pin__halo {
  fill: var(--coral);
  opacity: 0.16;
}

.se-map-pin:focus-visible {
  outline: none;
}

.se-map-pin:focus-visible .se-map-pin__dot {
  stroke: var(--green);
  stroke-width: 3;
}

.se-map-card {
  position: absolute;
  width: 296px;
  max-width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 26px;
  padding: 22px 24px;
  box-shadow: 0 18px 44px rgba(22, 24, 26, 0.14);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.se-map-card.on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.se-map-card__kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
}

.se-map-card__title {
  margin: 8px 0 0;
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -0.022em;
  font-weight: 800;
}

.se-map-card__date {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted);
}

.se-map-card__dl {
  margin: 16px 0 0;
  display: grid;
  gap: 11px;
}

.se-map-card__dl dt {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.se-map-card__dl dd {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--copy);
}

.se-map-card__trees {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.se-map-card__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: var(--border-light);
  color: var(--body);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}

.se-map-card__close:hover {
  background: var(--border);
}

.se-map-hint {
  position: absolute;
  left: 0;
  bottom: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Planting events grid */

.planting-card {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 30px;
  border-radius: 36px;
  border: 1px solid var(--rule);
  background: #FFFFFF;
  color: var(--ink);
}

.planting-card__photo {
  height: 150px;
  --pill-h: 150px;
  object-position: center 42%;
  background: var(--border-light);
}

.planting-card__place {
  margin-top: 20px;
}

.planting-card__group {
  margin-top: 7px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.24;
}

.planting-card__date {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.planting-card__trees {
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.planting-card__trees-value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.planting-card__trees-label {
  font-size: 14px;
  color: var(--body);
}

.planting-card__section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.planting-card__section-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.planting-card__species {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.species-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--tint-green);
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 600;
}

.planting-card__activity {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--copy);
}

/* School Competition */

.anchor-target {
  scroll-margin-top: 24px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pill-btn--compact {
  padding: 13px 26px;
}

.section-heading {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.032em;
  font-weight: 800;
  text-wrap: pretty;
}

.page-hero .page-hero__heading--large {
  font-size: clamp(31px, 4.7vw, 56px);
  line-height: 1.05;
  max-width: 800px;
  text-wrap: pretty;
}

.page-hero .page-hero__lead--large {
  margin-top: 22px;
  font-size: 19px;
  max-width: 600px;
}

.participate-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 44px;
  align-items: center;
  padding: 44px clamp(24px, 5vw, 48px);
  border-radius: 48px;
  background: var(--tint-sand);
}

.participate-band__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ochre-ink);
}

.participate-band__body {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--body);
  max-width: 440px;
}

.participate-band__ask {
  border-color: var(--tint-sand-border);
}

.eligibility-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.eligibility-list__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--tint-sand-rule);
}

.eligibility-list dt {
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.eligibility-list dd {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  text-align: right;
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-row--large {
  grid-template-columns: 60px minmax(0, 1fr);
  padding: 24px 0;
}

.step-row--large .step-row__title {
  font-size: 22px;
  letter-spacing: -0.024em;
  line-height: 1.24;
}

.winner-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 26px;
}

.winner-card {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 30px;
  border-radius: 36px;
  border: 1px solid var(--rule);
  background: #FFFFFF;
}

.winner-card__photo {
  height: 150px;
  --pill-h: 150px;
  object-position: center 46%;
  background: #EDEAE3;
}

.winner-card__meta {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.winner-card__meta:first-child {
  margin-top: 0;
}

.winner-card__award {
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--tint-coral);
  color: var(--coral-dark);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.winner-card__year {
  font-size: 13px;
  color: var(--muted);
}

.winner-card__school {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.24;
  text-wrap: pretty;
}

.winner-card__place {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--muted);
}

.winner-card__citation {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--copy);
}

.school-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.school-gallery img {
  height: 140px;
  background: #EDEAE3;
}

/* Modal dialog (school registration) -- a native <dialog> opened with
   showModal(), so focus containment, Escape and the inert page behind it
   come from the browser. assets/js/dialog.js adds the rest: backdrop-tap
   close, body scroll lock, the thank-you swap. */

.se-modal {
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 36px;
  background: var(--ground);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(22, 24, 26, 0.22);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.se-modal::backdrop {
  background: rgba(22, 24, 26, 0.55);
}

.se-modal[open],
.se-modal[open]::backdrop {
  animation: se-modal-fade 0.2s ease-out;
}

@keyframes se-modal-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .se-modal[open],
  .se-modal[open]::backdrop {
    animation: none;
  }
}

.se-modal__panel {
  padding: 28px clamp(20px, 5vw, 36px) 32px;
}

.se-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.se-modal__title {
  margin-top: 10px;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: pretty;
}

.se-modal__close {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.se-modal__form {
  margin-top: 20px;
}

.se-modal__note {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body);
}

.se-modal__thanks {
  margin-top: 22px;
  padding: 24px;
  border-radius: 28px;
  background: var(--tint-green);
}

.se-modal__thanks-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.se-modal__thanks-body {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--copy);
}

/* Change Maker Program */

.program-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 32px;
  background: var(--ink);
  object-fit: cover;
}

.benefit-card {
  padding: 38px clamp(20px, 5vw, 40px);
  border-radius: 44px;
  background: var(--tint-green);
}

.benefit-card--coral {
  background: var(--tint-coral);
}

.benefit-card__title {
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -0.028em;
  font-weight: 800;
}

.dot-list__dot--coral {
  background: var(--coral);
}

.question-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.question-card {
  padding: 30px 32px;
  border-radius: 36px;
  border: 1px solid var(--rule);
  background: #FFFFFF;
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: pretty;
}

.dark-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding: 40px clamp(24px, 5vw, 46px);
  border-radius: 48px;
  background: var(--ink);
}

.dark-cta-band__text {
  max-width: 520px;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.028em;
  font-weight: 800;
  color: var(--ground);
  text-wrap: pretty;
}

.dark-cta-band__action {
  flex: none;
  padding: 15px 30px;
  font-size: 15px;
}

/* Share your Voice / Contact */

.form-thanks {
  padding: 30px 34px;
  border-radius: 34px;
  background: var(--tint-green);
}

.form-thanks--white {
  background: #FFFFFF;
}

.form-thanks__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.form-thanks__body {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}

.contact-card {
  padding: 28px 32px;
  border-radius: 34px;
}

.contact-card--green {
  background: var(--tint-green);
}

.contact-card--outline {
  border: 1px solid var(--rule);
}

.contact-card__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
}

.contact-card__label--muted {
  color: #6B7075;
}

.contact-card__links {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-card__address {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}

.whatsapp-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px 30px;
  border-radius: 34px;
  background: var(--ink);
  color: var(--ground);
}

.whatsapp-card:hover .whatsapp-card__pill {
  background: #C4EBD5;
}

.whatsapp-card__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.whatsapp-card__text {
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--on-dark-strong);
}

.whatsapp-card__pill {
  transition: background-color 0.3s ease;
  flex: none;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--footer-green);
  color: #10281E;
  font-size: 13.5px;
  font-weight: 700;
}

.follow-pills {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.follow-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
}

.contact-map {
  display: block;
  width: 100%;
  height: 240px;
  border-radius: 34px;
  object-fit: cover;
}

.share-band {
  padding: 40px clamp(20px, 5vw, 40px);
  border-radius: 48px;
  background: var(--tint-coral);
}

.numbered-steps {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.numbered-steps li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 15.5px;
  color: var(--copy);
}

.numbered-steps__n {
  min-width: 22px;
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
}

.form-card {
  padding: 34px clamp(20px, 5vw, 34px);
  border-radius: 40px;
  border: 1px solid var(--rule);
  background: #FFFFFF;
}

.support-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 26px 34px;
  border-radius: 48px;
  background: var(--tint-sand);
}

.support-strip__text {
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--copy);
}

/* Default page (page.php) -- editor content, so lists, subheadings and
   inline links need styling the hand-built templates never did. */

.prose--page {
  margin: 0;
}

.prose--page h3 {
  margin-top: 32px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.022em;
  font-weight: 800;
}

.prose--page ul,
.prose--page ol {
  margin: 18px 0 0;
  padding-left: 1.3em;
}

.prose--page li + li {
  margin-top: 8px;
}

.prose--page p + ul,
.prose--page p + ol,
.prose--page ul + p,
.prose--page ol + p,
.prose--page h3 + p {
  margin-top: 18px;
}

.prose--page a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 404 */

.not-found {
  max-width: 640px;
  margin: 0 auto;
  padding: 110px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.not-found__title {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 400;
}

.not-found__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}

/* Home */

.home-hero {
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
}

.home-hero__text {
  flex: 44 1 300px;
  min-width: 0;
  padding-left: clamp(0px, calc((100vw - 760px) * 0.16), 80px);
}

.home-hero__media {
  flex: 56 1 380px;
  min-width: 0;
}

.home-hero__heading {
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 400;
}

.hero-segment--coral { color: var(--coral); }
.hero-segment--green { color: var(--green); }
.hero-segment--ochre { color: var(--ochre); }

.hero-accent {
  font-weight: 800;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-accent--coral { background-image: linear-gradient(100deg, #E8853F, var(--coral) 78%); }
.hero-accent--green { background-image: linear-gradient(100deg, #5AAE83, var(--green) 78%); }
.hero-accent--ochre { background-image: linear-gradient(100deg, #D3A22B, var(--ochre) 78%); }

.home-hero__lead {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  max-width: 430px;
}

/* Unclipped, transparent PNG/WebP cut-outs -- the one place content
   photography is not a pill crop. */
.hero-slider {
  position: relative;
  height: clamp(280px, 40vw, 500px);
}

.hero-slider__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 700ms ease;
}

.hero-slider__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide {
    transition: none;
  }
}

.promo-grid {
  padding-top: 38px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 20px;
}

.promo-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px clamp(22px, 4vw, 34px);
  border-radius: 34px;
  background-size: 56px 56px;
  color: var(--ink);
}

.promo-card--green {
  background-color: var(--tint-green);
  background-image: url(assets/images/pattern-green.svg);
}

.promo-card--coral {
  background-color: var(--tint-coral);
  background-image: url(assets/images/pattern-coral.svg);
}

.promo-card__photo {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  object-fit: cover;
}

.promo-card__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.promo-card__text {
  margin-top: 6px;
  font-size: 15px;
  color: var(--body);
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 26px 20px;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.home-stats__value {
  font-size: clamp(26px, 3.9vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.home-stats__label {
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B7075;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-bottom: 26px;
}

.section-head__link {
  font-size: 14.5px;
  font-weight: 600;
}

.faces-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  padding: 34px clamp(24px, 4vw, 44px);
  border-radius: 44px;
  background: var(--tint-sand);
}

.faces-band__text {
  flex: 1 1 300px;
  min-width: 0;
}

.faces-band__heading {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.faces-band__body {
  margin-top: 8px;
  max-width: 460px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

.faces-band__body a {
  font-weight: 600;
}

.faces-band__faces {
  flex: none;
  display: flex;
  align-items: center;
  padding-left: 14px;
}

/* The six Change Maker faces -- the other exception to the pill crop. */
.faces-band__face {
  flex: none;
  width: clamp(44px, 7vw, 76px);
  height: clamp(44px, 7vw, 76px);
  margin-left: -14px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--tint-sand);
  background: var(--tint-green);
}

.home-lists {
  padding-top: 84px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 56px;
}

.home-lists__heading {
  margin-bottom: 22px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.tile-list {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--rule);
}

.tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 22px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}

.tile-row__photo {
  width: min(100%, 270px);
  height: 140px;
  --pill-h: 140px;
  background: var(--border-light);
}

.tile-row__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.tile-row__text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--body);
}

.feature-band {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: 48px;
  background: var(--tint-green);
  color: var(--ink);
}

.feature-band__media {
  flex: 11 1 320px;
  min-width: 0;
}

.feature-band__body {
  flex: 10 1 300px;
  min-width: 0;
}

.feature-band__quote {
  margin-top: 16px;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.feature-band__attribution {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--body);
}

.act-bands {
  padding-top: 80px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.act-bands .cta-band {
  gap: 20px 40px;
  padding: 34px clamp(24px, 5vw, 42px);
}

/* Portrait photos in pill crops. The mode is the Customizer's Photos >
   Portrait photos setting, as a body class; portrait images are flagged by
   the server (data-portrait) or by assets/js/pill-photos.js (.is-portrait).
   - pill-portrait-center: no change, cropped from the middle.
   - pill-portrait-top: still a horizontal pill, framed toward the top
     where faces usually are.
   - pill-portrait-vertical: the pill turns upright at the same height.
   - pill-portrait-square: a 1:1 square with very round corners -- full
     column width on phones, and from 720px no taller than the horizontal
     pill it replaces (each component records that height as --pill-h). */

.pill-portrait-top .pill-photo:is(.is-portrait, [data-portrait]) {
  object-position: center 25%;
}

.pill-portrait-vertical .pill-photo:is(.is-portrait, [data-portrait]) {
  flex: none;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1.6;
  object-position: center 25%;
}

/* Heights are set per component, some inline, hence !important. */
.pill-portrait-square .pill-photo:is(.is-portrait, [data-portrait]) {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1;
  border-radius: 28%;
  object-position: center 25%;
}

@media (min-width: 720px) {
  .pill-portrait-square .pill-photo:is(.is-portrait, [data-portrait]) {
    width: min(100%, var(--pill-h, 100%));
  }
}

/* An editor's explicit "Framing" choice on the image beats every mode and
   any per-template default (some templates set object-position inline). */
.pill-photo[data-focal="top"] {
  object-position: center 12% !important;
}

.pill-photo[data-focal="center"] {
  object-position: center !important;
}

.pill-photo[data-focal="bottom"] {
  object-position: center 88% !important;
}

/* Gravity Forms -- restyled to match the theme's own form controls
   (.se-label / .se-input / pill buttons). Written against the plugin's
   "Gravity Forms 2.5 Theme" (Forms > Settings > Default Form Theme), whose
   rules are .gform_wrapper.gravity-theme + element selectors; the extra
   .gfield/.gform_footer class here outranks them without !important. */

.gform_wrapper.gravity-theme .gform_fields {
  grid-row-gap: 18px;
}

/* Radio and checkbox groups render as <fieldset>; drop the browser frame. */
.gform_wrapper.gravity-theme fieldset.gfield {
  margin: 0;
  padding: 0;
  border: 0;
}

.gform_wrapper.gravity-theme .gfield .gfield_label,
.gform_wrapper.gravity-theme .gfield legend.gfield_label {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--body-strong);
}

.gform_wrapper.gravity-theme .gfield .gfield_required {
  color: var(--coral-dark);
}

.gform_wrapper.gravity-theme .gfield input[type="text"],
.gform_wrapper.gravity-theme .gfield input[type="email"],
.gform_wrapper.gravity-theme .gfield input[type="tel"],
.gform_wrapper.gravity-theme .gfield input[type="number"],
.gform_wrapper.gravity-theme .gfield input[type="url"],
.gform_wrapper.gravity-theme .gfield input[type="date"],
.gform_wrapper.gravity-theme .gfield select,
.gform_wrapper.gravity-theme .gfield textarea {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 13px 18px;
  font-family: Figtree, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  background-color: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.gform_wrapper.gravity-theme .gfield textarea {
  border-radius: 24px;
  line-height: 1.55;
  resize: vertical;
}

.gform_wrapper.gravity-theme .gfield input::placeholder,
.gform_wrapper.gravity-theme .gfield textarea::placeholder {
  color: var(--muted-light);
}

.gform_wrapper.gravity-theme .gfield input:focus-visible,
.gform_wrapper.gravity-theme .gfield select:focus-visible,
.gform_wrapper.gravity-theme .gfield textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.gform_wrapper.gravity-theme .gfield input[type="file"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-size: 15px;
  background: #FFFFFF;
  border: 1px dashed var(--border);
  border-radius: 24px;
}

.gform_wrapper.gravity-theme .gfield input[type="checkbox"],
.gform_wrapper.gravity-theme .gfield input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
}

.gform_wrapper.gravity-theme .gfield .gchoice label {
  font-size: 15px;
  color: var(--body-strong);
}

.gform_wrapper.gravity-theme .gfield .gfield_description {
  padding-top: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* Validation */

.gform_wrapper.gravity-theme .gform_validation_errors {
  margin-bottom: 18px;
  padding: 14px 18px;
  border: none;
  border-radius: 22px;
  background: var(--tint-coral);
  box-shadow: none;
}

.gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error {
  font-size: 15px;
  color: var(--coral-ink);
}

.gform_wrapper.gravity-theme .gfield_error .gfield_label,
.gform_wrapper.gravity-theme .gfield .validation_message {
  color: var(--coral-ink);
}

.gform_wrapper.gravity-theme .gfield .validation_message {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
}

.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea {
  border-color: var(--coral-dark);
}

/* Submit: the green pill button, with the same lighten-on-hover. */

.gform_wrapper.gravity-theme .gform_footer {
  margin-top: 8px;
  padding: 0;
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer button {
  min-height: 48px;
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  background: var(--green);
  color: #FFFFFF;
  font-family: Figtree, system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_footer button:hover {
  background: var(--tint-green);
  color: var(--green-dark);
  box-shadow: inset 0 0 0 1.5px var(--green);
}

/* The story form sits on the coral band: coral submit, like the design. */
.share-band .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.share-band .gform_wrapper.gravity-theme .gform_footer button {
  background: var(--coral);
}

.share-band .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.share-band .gform_wrapper.gravity-theme .gform_footer button:hover {
  background: var(--tint-coral);
  color: var(--coral-ink);
  box-shadow: inset 0 0 0 1.5px var(--coral);
}

.share-band .gform_wrapper.gravity-theme .gfield input[type="checkbox"] {
  accent-color: var(--coral);
}

/* The Change Maker application sits in a white card: ink submit. */
.form-card .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.form-card .gform_wrapper.gravity-theme .gform_footer button {
  background: var(--ink);
  color: var(--ground);
}

.form-card .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.form-card .gform_wrapper.gravity-theme .gform_footer button:hover {
  background: var(--border-light);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* The plugin's own spinner sits next to the button; keep it in line. */
.gform_wrapper.gravity-theme .gform_ajax_spinner {
  margin-left: 12px;
  vertical-align: middle;
}

/* Hide the plugin's confirmation while the theme's thank-you panel takes
   over (assets/js/forms.js); without JS it stays visible. */
[data-form-body][hidden] {
  display: none;
}

/* Planting form (/log-planting/). Add these as the field's "Custom CSS
   Class" (Appearance tab) in the form editor:
   - se-choice-cards on the "Who is entering?" radio: each choice becomes a
     card that fills green when picked.
   - se-chips on the activities checkboxes: each choice becomes a pill
     that turns solid green when ticked. */

.gform_wrapper.gravity-theme .se-choice-cards .gfield_radio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

.gform_wrapper.gravity-theme .se-chips .gfield_checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gform_wrapper.gravity-theme :is(.se-choice-cards, .se-chips) .gchoice {
  position: relative;
  margin: 0;
}

/* The real input stays in the DOM (keyboard, screen readers) but sits
   invisibly under its label. */
.gform_wrapper.gravity-theme :is(.se-choice-cards, .se-chips) .gchoice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.gform_wrapper.gravity-theme .se-choice-cards .gchoice label {
  display: block;
  max-width: none;
  margin: 0;
  padding: 16px 20px;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.gform_wrapper.gravity-theme .se-choice-cards .gchoice input:checked + label {
  border-color: var(--green);
  background: var(--tint-green);
}

.gform_wrapper.gravity-theme .se-chips .gchoice label {
  display: inline-flex;
  align-items: center;
  max-width: none;
  margin: 0;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  color: var(--body-strong);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.gform_wrapper.gravity-theme .se-chips .gchoice input:checked + label {
  border-color: var(--green);
  background: var(--green);
  color: #FFFFFF;
}

.gform_wrapper.gravity-theme :is(.se-choice-cards, .se-chips) .gchoice input:focus-visible + label {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* "Use my current location" (assets/js/log-planting.js) */

.geo-locate {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.geo-locate__status {
  font-size: 13.5px;
  color: var(--muted);
}

.geo-locate__status.is-ok {
  color: var(--green-dark);
}

.geo-locate__status.is-error {
  color: var(--coral-dark);
}