/*
  Food for Our Planet — the Earth Day 2027 skin (final design, 2026-10-09).
  ------------------------------------------------------------------------
  Loaded after every other stylesheet, only on pages whose fixture sets
  `meta.skin: "ffop"`, and on <body> as well as <main> because the site header
  renders outside <main>. Nothing here replaces the base styles; it sits on top.

  Built from Jonah's Figma export ("2027 theme CSS Figma .txt"). Its values are
  quoted rather than reinterpreted -- 75px titles at 0.95 and -2.9%, 23px body
  at -1px, Montserrat 12px eyebrows at 1.2px -- because the brief is to match
  the comps, and a number re-derived by eye is a number that drifts.

  Mostly tokens, as before: the base already expresses bands, ink and accents
  as custom properties, so redefining them reskins the page without rewriting
  its rules. The rules below are where the design departs from the house
  style -- the type system, the square buttons, the flat photo overlay.

  This replaces the interim maroon-and-cream skin outright; that design was
  superseded by these comps.

  ⚠ Open Runde (the reading face) is not on Google Fonts. Inter, which Open
  Runde is a rounded cut of, stands in until the files are self-hosted -- at
  which point --font-body is the only line that changes.
*/

body.skin-ffop,
.edo-page.skin-ffop {
  /* --- palette, from the export's :root ------------------------------ */
  --ffop-heading: #243146;
  --ffop-text: #110f0e;
  --ffop-blue: #4c71f6;
  --ffop-orange: #ff7c1e;
  --ffop-gray: #efefef;
  --ffop-rule: #d9d9d9;

  /* --- the house tokens, pointed at it --------------------------------- */
  --color-ink: var(--ffop-text);
  --color-ink-muted: #4a4f57;
  --color-display: var(--ffop-heading);
  --color-accent: var(--ffop-blue);
  --color-accent-alt: var(--ffop-orange);
  --color-surface: #ffffff;
  --color-surface-alt: var(--ffop-gray);    /* tone "tint" -> the grey band  */
  --color-surface-invert: var(--ffop-blue); /* tone "navy" -> the blue band  */

  /* --- faces ----------------------------------------------------------- */
  --font-display: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Open Runde', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --weight-display: 800;

  /* --- measures -------------------------------------------------------- */
  --container: 1200px;
  --ffop-title: 75px;
  --ffop-body: 23px;
}

@media (max-width: 1024px) {
  body.skin-ffop, .edo-page.skin-ffop { --ffop-title: 56px; }
}
@media (max-width: 640px) {
  body.skin-ffop, .edo-page.skin-ffop { --ffop-title: 40px; --ffop-body: 20px; }
}

/* ============================================================ sections ==== */

/*
  96px top and bottom, from the export's .section. Its 720px min-height is
  the Figma frame size, not a layout rule -- applied to every band it puts a
  screen of empty space under the short ones, the exact complaint that moved
  this page off the deck layout. Only the opening band keeps a floor.
*/
.edo-page.skin-ffop .block,
.edo-page.skin-ffop .block.is-snap,
.edo-page.skin-ffop .block.is-freescroll {
  padding-block: 96px;
}
.edo-page.skin-ffop > .block:first-child {
  min-height: min(720px, 100svh);
  display: flex;
  align-items: center;
}
@media (max-width: 1024px) {
  .edo-page.skin-ffop .block { padding-block: 72px; }
}
@media (max-width: 640px) {
  .edo-page.skin-ffop .block { padding-block: 48px; }
}

.edo-page.skin-ffop .block__inner {
  width: min(var(--container), calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
}

/* ================================================================ type ==== */

/* Every title: Libre Franklin ExtraBold, the export's .page-title. */
.edo-page.skin-ffop :is(.block__heading, .block--page-header .block__heading[class]) {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--ffop-title);
  line-height: 0.95;
  letter-spacing: -0.029em;
  color: var(--color-display);
  text-transform: none;
  max-width: 965px;
  margin-bottom: 0;
}
/* The pillar and partner titles are set in caps in the comps. */
.edo-page.skin-ffop .block--page-header .block__heading[class] {
  text-transform: uppercase;
}

/* Reading text: the export's .body-copy. */
.edo-page.skin-ffop :is(.block__body, .prose p, .prose li, .accordion__a) {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--ffop-body);
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-ink);
  max-width: 760px;
}
.edo-page.skin-ffop .block__body { margin-top: 24px; }
.edo-page.skin-ffop .prose { margin-top: 24px; }
.edo-page.skin-ffop .prose > * + * { margin-top: 20px; }

/* Eyebrow: Montserrat 700, 12px, 1.2px, caps, blue. */
.edo-page.skin-ffop .block__eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ffop-blue);
  margin-bottom: 12px;
}

/* A sub-head under a title: the hero's subtitle and the focus intro. */
.edo-page.skin-ffop .block__subhead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-ink);
  margin-top: 16px;
  max-width: 760px;
}

/*
  Links in running text: orange and bare at rest, black and underlined on
  hover (Steve, 2026-10-12). On a photograph the hover goes white instead,
  because black on a dark picture disappears.
*/
.edo-page.skin-ffop :is(.block__body, .prose, .accordion__a, .block__richtext) a {
  color: var(--ffop-orange);
  text-decoration: none;
  text-underline-offset: 3px;
  font-weight: 700; /* bold at rest and on hover */
}
.edo-page.skin-ffop :is(.block__body, .prose, .accordion__a, .block__richtext) a:is(:hover, :focus-visible) {
  color: var(--ffop-text);
  text-decoration: underline;
}
.edo-page.skin-ffop .block.has-bg :is(.block__body, .prose, .block__richtext) a:is(:hover, :focus-visible) {
  color: #ffffff;
}

/* ============================================================= buttons ==== */

/* The export's .button: orange, 4px corners, Libre Franklin caps. */
.edo-page.skin-ffop .btn,
body.skin-ffop .site-header .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
  border: 0;
  border-radius: 0; /* square corners, Steve 2026-10-12 */
  background: var(--ffop-orange);
  color: var(--ffop-gray);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17.3px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.edo-page.skin-ffop .btn:hover,
.edo-page.skin-ffop .btn:focus-visible,
body.skin-ffop .site-header .btn:hover {
  background: #e86a0e;
  color: #ffffff;
}
.edo-page.skin-ffop .btn:focus-visible {
  outline: 3px solid var(--ffop-blue);
  outline-offset: 4px;
}
/* Every button in the comps is the orange one; there is no outline style. */
.edo-page.skin-ffop :is(.btn--outline, .btn--primary, .btn--secondary, .btn--white, .btn--donate) {
  background: var(--ffop-orange);
  border: 0;
  color: var(--ffop-gray);
}
.edo-page.skin-ffop .block__actions {
  gap: 12px;
  margin-top: 32px;
}

/* ======================================================= photo sections ==== */

/*
  The export's .photo-section::before: a flat 50% black over the picture.
  Everything on a photograph turns white.
*/
.edo-page.skin-ffop .block.has-bg {
  background-color: var(--ffop-text);
}
.edo-page.skin-ffop .block.has-bg[data-scrim] .block__scrim {
  background: rgb(0 0 0 / 50%);
}
.edo-page.skin-ffop .block.has-bg :is(
  .block__heading, .block__heading[class], .block__subhead, .block__body,
  .block__eyebrow, .prose, .prose p, .prose li
) {
  color: #ffffff;
}

/* ======================================================= the pillar hero == */

/*
  Title band over a photograph, from the export's .health-hero. The comps
  keep this one brighter than other photo bands -- the farmers are the
  subject -- so it takes a fade from the left, where the words are, rather
  than the flat 50% wash.
*/
.edo-page.skin-ffop .block--page-header.has-bg[data-scrim] .block__scrim {
  background: linear-gradient(90deg,
    rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 38%) 45%, rgb(0 0 0 / 0%) 78%);
}
.edo-page.skin-ffop .block--page-header .block__inner { max-width: none; }
.edo-page.skin-ffop .block--page-header :is(.block__eyebrow, .block__subhead, .block__body) {
  max-width: 600px;
}
.edo-page.skin-ffop .block--page-header .block__eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 16px;
}
.edo-page.skin-ffop .block--page-header .btn {
  font-size: 14px;
  letter-spacing: 1.2px;
}

/* ================================================================ stats ==== */

/* The export's .stats: three columns, a blue hairline, a big blue figure. */
.edo-page.skin-ffop .stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 0;
  text-align: left;
}
.edo-page.skin-ffop .stats__item {
  border-top: 1px solid var(--ffop-blue);
  padding-top: 16px;
  text-align: left;
}
.edo-page.skin-ffop .stats__value {
  font: 900 36px/40px var(--font-label);
  color: var(--ffop-blue);
  letter-spacing: 0;
}
.edo-page.skin-ffop .stats__label {
  margin-top: 8px;
  font: 400 17.3px/22.75px var(--font-body);
  letter-spacing: -1px;
  color: var(--color-ink);
}
.edo-page.skin-ffop .stats__source {
  margin-top: 12px;
  font: 400 11.3px/16px var(--font-label);
  letter-spacing: -0.2px;
  color: var(--color-ink);
}
@media (max-width: 640px) {
  .edo-page.skin-ffop .stats { grid-template-columns: 1fr; }
}
/* The figures follow "Why it matters" directly in the comp; no gap band. */
.edo-page.skin-ffop #why-it-matters { padding-bottom: 0; }
.edo-page.skin-ffop #figures { padding-top: 64px; }

/* =================================================== the focus bullets ==== */

/* The export's .health-focus: a 28px intro and two columns of bullets. */
.edo-page.skin-ffop .block--prose .block__subhead {
  font: 500 28px/41.25px var(--font-body);
  letter-spacing: -0.01em;
  margin-top: 16px;
}
.edo-page.skin-ffop .prose.is-cols-2 ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  columns: auto;
  max-width: 954px;
  margin-top: 24px;
}
.edo-page.skin-ffop .prose.is-cols-2 ul > li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  column-gap: 12px;
  padding: 12px 0;
  border: 0;
  font: 500 23px/28px var(--font-body);
  letter-spacing: -0.01em;
  max-width: none;
}
.edo-page.skin-ffop .prose.is-cols-2 ul > li::before {
  content: "\2022";
  position: static;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--font-label);
  color: currentColor;
}
@media (max-width: 640px) {
  .edo-page.skin-ffop .prose.is-cols-2 ul { grid-template-columns: 1fr; column-gap: 0; }
}

/* ================================================================= quiz ==== */

/* The export's .quiz-layout: 485 : 670, centred, 48px apart. */
.edo-page.skin-ffop #quiz .block__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 485fr) minmax(0, 670fr);
  align-items: center;
  gap: 48px;
}
.edo-page.skin-ffop #quiz .block__heading { font-size: min(var(--ffop-title), 64px); }
.edo-page.skin-ffop #quiz .btn {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.5px;
}
.edo-page.skin-ffop #quiz .block__media {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 1024px) {
  .edo-page.skin-ffop #quiz .block__inner--split { grid-template-columns: 1fr; }
}

/* ================================================= round photographs ===== */

/* The export's .explore-grid: three 320px columns of 240px circles. */
.edo-page.skin-ffop .block--cards.is-circle .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 320px));
  justify-content: center;
  gap: 45px;
  margin-top: 32px;
}
.edo-page.skin-ffop .block--cards.is-circle .card {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding: 24px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
}
.edo-page.skin-ffop .block--cards.is-circle .card__image {
  width: 240px;
  height: 240px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.edo-page.skin-ffop .block--cards.is-circle .card__text { padding: 0; text-align: center; }
.edo-page.skin-ffop .block--cards.is-circle .card__title {
  font: 800 22px/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-align: center;
}

@media (max-width: 1024px) {
  .edo-page.skin-ffop .block--cards.is-circle .cards { gap: 20px; }
}
@media (max-width: 640px) {
  .edo-page.skin-ffop .block--cards.is-circle .cards { grid-template-columns: 1fr; }
}

/* ======================================================= benefit tiles ==== */

/* The partner page's .benefits-grid: four blue tiles, icon, caps title. */
.edo-page.skin-ffop .block--cards.is-benefit .cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.edo-page.skin-ffop .block--cards.is-benefit .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: 280px;
  padding: 28px;
  border: 0;
  border-radius: 0;
  background: var(--ffop-blue);
  color: #ffffff;
  box-shadow: none;
}
.edo-page.skin-ffop .block--cards.is-benefit .card__tile {
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  color: #ffffff;
}
.edo-page.skin-ffop .block--cards.is-benefit .card__tile svg { width: 36px; height: 36px; }
.edo-page.skin-ffop .block--cards.is-benefit .card__text { padding: 0; }
.edo-page.skin-ffop .block--cards.is-benefit .card__title {
  font: 800 20px/26px var(--font-display);
  letter-spacing: -0.4px;
  text-transform: uppercase;
  color: #ffffff;
}
.edo-page.skin-ffop .block--cards.is-benefit .card__excerpt {
  margin-top: 16px;
  font: 500 17px/26px var(--font-body);
  letter-spacing: -1px;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .edo-page.skin-ffop .block--cards.is-benefit .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .edo-page.skin-ffop .block--cards.is-benefit .cards { grid-template-columns: 1fr; }
}

/* ================================================================== FAQ ==== */

/* The export's .faq-item: hairline rules, 26px Open Runde, a + that turns −. */
.edo-page.skin-ffop .accordion { margin-top: 24px; }
.edo-page.skin-ffop .accordion__item {
  border: 0;
  border-bottom: 1px solid var(--ffop-rule);
  background: none;
}
.edo-page.skin-ffop .accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 59px;
  padding: 16px 0;
  font: 400 26px/1.2 var(--font-body);
  letter-spacing: -1px;
  color: var(--color-ink);
  cursor: pointer;
}
.edo-page.skin-ffop .accordion__q::after {
  content: "+";
  flex-shrink: 0;
  font: 700 25px/28px var(--font-label);
  color: var(--color-ink);
  border: 0;
  transform: none;
  width: auto;
  height: auto;
}
.edo-page.skin-ffop .accordion__item[open] > .accordion__q::after { content: "\2212"; }
.edo-page.skin-ffop .accordion__a { padding-bottom: 24px; }
@media (max-width: 640px) {
  .edo-page.skin-ffop .accordion__q { font-size: 21px; }
}

/* ============================================================ carousel ==== */

.edo-page.skin-ffop .block--carousel .card__label {
  background: var(--ffop-blue);
  color: #ffffff;
  border-radius: 0;
  font-family: var(--font-body);
}
.edo-page.skin-ffop .block--carousel .card__title {
  font: 800 15px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ffop-heading);
}
.edo-page.skin-ffop .block--carousel .card__excerpt {
  font: 500 15px/1.45 var(--font-body);
  letter-spacing: -0.3px;
  color: var(--color-ink);
}
.edo-page.skin-ffop .carousel__btn {
  background: var(--ffop-blue);
  border-color: var(--ffop-blue);
  color: #ffffff;
  border-radius: 50%;
}
.edo-page.skin-ffop .carousel__dot[aria-selected="true"] {
  background: var(--ffop-heading);
  border-color: var(--ffop-heading);
}

/* ====================================================== the blue bar ===== */

/*
  "Interested in Partnering?" -- one line and one button on the blue band.
  The cta-band was built for the closing sign-off (a panel of stacked links
  and a social row), so a one-button band is told to lay out as a row.
*/
.edo-page.skin-ffop .block--cta-band:not(:has(.block__social)) {
  padding-block: 20px;
}
.edo-page.skin-ffop .block--cta-band:not(:has(.block__social)) .block__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 48px;
  flex-wrap: wrap;
  text-align: left;
}
.edo-page.skin-ffop .block--cta-band:not(:has(.block__social)) .block__heading {
  font-size: clamp(28px, 3.4vw, 44px);
  color: #ffffff;
  margin: 0;
}
.edo-page.skin-ffop .block--cta-band:not(:has(.block__social)) .block__panel {
  background: none;
  padding: 0;
}
.edo-page.skin-ffop .block--cta-band:not(:has(.block__social)) .block__actions {
  flex-direction: row;
  margin: 0;
}
.edo-page.skin-ffop .block--cta-band:not(:has(.block__social)) .block__actions .btn {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 14px;
  border-bottom: 0;
  text-align: center;
  /* blocks.css strips cta-band buttons to links for the closing panel. */
  background: var(--ffop-orange);
  color: var(--ffop-gray);
  border-radius: 0; /* square corners, Steve 2026-10-12 */
}

/* ===================================================== the closing panel == */

/* "Support The Earth Day Movement": white title on the photo, blue panel. */

/* ===================================================== the closing panel == */

/* Closing CTA heading */
.edo-page.skin-ffop .block--cta-band:has(.block__social) .block__heading {
  color: #ffffff;
  text-align: center;
}

/* Remove blue background from the overall panel */
.edo-page.skin-ffop .block--cta-band .block__panel {
  background: transparent;
  padding: 16px 12px 20px;
}

/* Restore regular orange buttons */
.edo-page.skin-ffop .block--cta-band:has(.block__social) .block__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
  background: var(--ffop-orange);
  color: var(--ffop-gray);
  border: 0;
  border-radius: 0;
  text-decoration: none;
  font: 800 17.3px/1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Button hover */
.edo-page.skin-ffop .block--cta-band:has(.block__social) .block__actions .btn:is(:hover, :focus-visible) {
  background: #e86a0e;
  color: #ffffff;
}

/* Blue rectangle only around social media */
.edo-page.skin-ffop .block--cta-band .block__social {
  background: var(--ffop-blue);
  padding: 20px 24px;
  border-radius: 0;
}

/* Social media label */
.edo-page.skin-ffop .block--cta-band .block__social-label {
  font: 800 14px/1.3 var(--font-display);
  text-transform: uppercase;
  color: #ffffff;
}


/* ============================================== Our Focus, stacked ===== */

/*
  Centred title and copy with the three-circle animation underneath --
  Steve, 2026-10-09. The comp centres this section where every other title on
  the page sits left.
*/
.edo-page.skin-ffop .block--two-column.is-stacked .block__inner--split {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.edo-page.skin-ffop .block--two-column.is-stacked .block__col--content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
}
.edo-page.skin-ffop .block--two-column.is-stacked .block__body {
  max-width: 900px;
  margin-inline: auto;
  font-size: 19px;
  letter-spacing: -0.4px;
}
.edo-page.skin-ffop .block--two-column.is-stacked .block__col--widget {
  width: 100%;
  max-width: 900px;
  height: auto;
}

/* =========================================================== the hero ==== */

/*
  The 2027 hero: words left, orbiting photographs right, over a field. The
  field is already dark, so it takes a lighter wash than the export's 50%.
*/
.edo-page.skin-ffop #intro.block--two-column.has-bg[data-scrim] .block__scrim {
  background: rgb(0 0 0 / 30%);
}
.edo-page.skin-ffop #intro.block--two-column .block__inner--split {
  align-items: center;
  gap: 48px;
}
.edo-page.skin-ffop #intro.block--two-column .block__heading {
  text-transform: uppercase;
  font-size: min(var(--ffop-title), 68px);
}
.edo-page.skin-ffop #intro.block--two-column .block__body {
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.4px;
  max-width: 540px;
}
.edo-page.skin-ffop #intro.block--two-column .btn {
  min-height: 48px;
  padding: 12px 22px;
  font-size: 14px;
}

/* ====================================================== the animations === */

/*
  The orbit sits on a dark photograph in the final design: a thin white ring
  through the six circles, and the three headlines in white Libre Franklin.
*/
.edo-page.skin-ffop .ffop-headlines h2 {
  font: 800 clamp(13px, 5cqw, 34px)/1.2 var(--font-display);
  color: #ffffff;
  letter-spacing: -0.01em;
}
.edo-page.skin-ffop .ed-half-label {
  font: 800 clamp(15px, 2.2cqw, 20px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-top: 2.4cqw;
}


/* ============================================================= header ==== */

body.skin-ffop .site-header__bar {
  background: #ffffff;
  border-bottom-color: var(--ffop-orange);
}
body.skin-ffop .site-header :is(.nav__link, .nav__summary) {
  font-family: var(--font-label);
  font-weight: 600;
  color: var(--ffop-heading);
}
body.skin-ffop .site-header :is(.nav__link, .nav__summary):hover {
  color: var(--ffop-blue);
}
body.skin-ffop .site-header .btn {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 14px;
}
/* Overlay, while transparent over the opening photograph. */
body.skin-ffop .site-header--overlay:not(.is-solid) .site-header__bar {
  background: transparent;
  border-bottom-color: transparent;
}
body.skin-ffop .site-header--overlay:not(.is-solid) :is(.nav__link, .nav__summary) {
  color: #ffffff;
}

/* ========================================================== page strip ==== */
/* The comps have no breadcrumb row; the fixtures leave crumbs and share
   empty, which removes it. This only tidies it if one is ever added back. */
body.skin-ffop .page-strip { background: #ffffff; }

/* ============================================================ partners ==== */

/* "Who Can Partner with Us?": one list, read across in rows, blue bullets. */
.edo-page.skin-ffop #who-can .prose > p { font-size: 17px; line-height: 1.45; letter-spacing: -0.2px; max-width: 560px; }
.edo-page.skin-ffop #who-can .prose.is-cols-2 ul { row-gap: 8px; max-width: none; }
.edo-page.skin-ffop #who-can .prose.is-cols-2 ul > li {
  padding: 0;
  grid-template-columns: 10px minmax(0, 1fr);
  font: 500 17px/24px var(--font-label);
  letter-spacing: -0.3px;
}
.edo-page.skin-ffop #who-can .prose.is-cols-2 ul > li::before { color: var(--ffop-blue); }

/* "Who We've Worked with": logos, three to a row, the remainder centred. */
.edo-page.skin-ffop .block--cards.is-logo .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}
.edo-page.skin-ffop .block--cards.is-logo .cards__item { flex: 0 1 calc((100% - 48px) / 3); }
.edo-page.skin-ffop .block--cards.is-logo .card {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.edo-page.skin-ffop .block--cards.is-logo .card__image {
  width: auto;
  max-width: 100%;
  height: 110px;
  object-fit: contain;
  border-radius: 0;
  aspect-ratio: auto;
}
.edo-page.skin-ffop .block--cards.is-logo .card__text { display: none; }
@media (max-width: 640px) {
  .edo-page.skin-ffop .block--cards.is-logo .cards__item { flex-basis: 100%; }
}

/* The partner form's card: white on grey, the five-colour rule on top. */
.edo-page.skin-ffop #partner-form .block__inner {
  max-width: 820px;
  padding: 56px 40px;
  background: #ffffff;
  border-top: 6px solid transparent;
  border-image: linear-gradient(90deg,
    #243146 0 20%, #4c71f6 20% 40%, #e86aa6 40% 60%, #e8a33d 60% 80%, #ff7c1e 80% 100%) 1;
  text-align: center;
}
.edo-page.skin-ffop #partner-form .block__heading {
  text-transform: uppercase;
  font-size: min(var(--ffop-title), 52px);
  margin-inline: auto;
}
.edo-page.skin-ffop #partner-form .prose p {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  margin-inline: auto;
}
.edo-page.skin-ffop #partner-form .block__actions { justify-content: center; }

/* Centred sections centre their measure as well as their text. */
.edo-page.skin-ffop .is-align-center :is(.block__heading, .block__body, .prose, .prose p) {
  margin-inline: auto;
  text-align: center;
}

/* WP Rocket's WebP rewrite moves .card__image onto a <picture>; style the img too. */
.edo-page.skin-ffop .block--cards.is-circle .card__image img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.edo-page.skin-ffop .block--cards.is-circle picture.card__image { display: block; overflow: hidden; }
.edo-page.skin-ffop .block--cards.is-logo .card__image img { height: 110px; width: auto; max-width: 100%; object-fit: contain; }
.edo-page.skin-ffop .block--cards.is-logo picture.card__image { width: 100%; height: 110px; aspect-ratio: auto; overflow: visible; display: grid; place-items: center; }
.edo-page.skin-ffop #quiz .block__media img { border-radius: 0; }

/*
  The arc sits in the lower part of its 1000x800 stage, so stacked under the
  text the stage's empty top read as a gap. Trim it (percent margins are of
  the width, as the stage's own geometry is).
*/
.edo-page.skin-ffop .block--two-column.is-stacked .ed-half-stage {
  margin-top: -18%;
  margin-bottom: -10%;
}

/* The comp's closing panel is half the band wide, centred under the title. */
.edo-page.skin-ffop .block--cta-band:has(.block__social) .block__panel {
  width: min(100%, 680px);
  margin-inline: auto;
}

/* The base gives stats a grey band and strips the item rules; the comp has
   neither -- the figures sit on white under "Why it matters", each on a blue
   hairline. */
.edo-page.skin-ffop .block--stats:not(.has-bg):not(.is-tone-tint) { background: #ffffff; }
.edo-page.skin-ffop .block--stats:not(.has-bg) .stats__item {
  border-top: 1px solid var(--ffop-blue);
  padding-top: 16px;
}
.edo-page.skin-ffop #who-can .prose.is-cols-2 ul > li::before { font-size: 1.4em; line-height: 0.75; }

/* "Support The Earth Day Movement": centre the title over the panel and give
   it room before the panel starts (Steve, 2026-10-11). */
.edo-page.skin-ffop .block--cta-band:has(.block__social) .block__heading {
  margin-inline: auto;
  margin-bottom: 40px;
  text-align: center;
}

/* Our Focus on a phone: the three circles are ~70px, so the labels wrap
   under their own circle instead of running into the next one. */
@media (max-width: 640px) {
  .edo-page.skin-ffop .ed-half .ed-half-item { width: 28%; }
  .edo-page.skin-ffop .ed-half .ed-half-label {
    font-size: 13px;
    line-height: 1.15;
    white-space: normal;
    margin: 8px 0 0;
  }
  .edo-page.skin-ffop .block--two-column.is-stacked .ed-half-stage { margin-bottom: 0; }
}

/* The Virtuous partner form brings its own card, stripe, title and intro, so
   our section is only the grey band around it (2026-10-12). */
.edo-page.skin-ffop #partner-form.block--embed .block__inner {
  background: none;
  border: 0;
  padding: 0;
  max-width: 820px;
}
.edo-page.skin-ffop #partner-form.block--embed .embed {
  background: none;
  padding: 0;
  min-height: 0;
}

/* Stories header runs the full width: the 965px title cap wrapped
   "Food for Our Planet™ Stories" onto two lines (Steve, 2026-10-12). */
.edo-page.skin-ffop .block--carousel .block__head-text,
.edo-page.skin-ffop .block--carousel .block__head-text :is(.block__heading, .block__body) {
  max-width: none;
  flex-basis: 100%;
}


/*
  Links that are a picture: the words go orange on hover and nothing is
  underlined (Steve, 2026-10-12) -- the Our Focus bubbles, the round
  "More from" photographs and the story cards.
*/
.edo-page.skin-ffop :is(.ed-half-link, .block--cards.is-circle .card, .block--carousel .card),
.edo-page.skin-ffop :is(.ed-half-link, .block--cards.is-circle .card, .block--carousel .card):is(:hover, :focus-visible),
.edo-page.skin-ffop :is(.ed-half-link, .block--cards.is-circle .card, .block--carousel .card):is(:hover, :focus-visible) * {
  text-decoration: none;
}
.edo-page.skin-ffop .ed-half-link:is(:hover, :focus-visible) .ed-half-label,
.edo-page.skin-ffop .block--cards.is-circle .card:is(:hover, :focus-visible) .card__title,
.edo-page.skin-ffop .block--carousel .card:is(:hover, :focus-visible) .card__title {
  color: var(--ffop-orange);
}

/*
  Dropdown panels are white, so their links take the ink colour even while the
  bar above them is transparent with white links over the hero photograph
  (Steve, 2026-10-12: they were white on white).
*/
body.skin-ffop .site-header .nav__dropdown :is(.nav__link, .nav__summary),
body.skin-ffop .site-header--overlay:not(.is-solid) .nav__dropdown :is(.nav__link, .nav__summary) {
  color: var(--ffop-text);
}
body.skin-ffop .site-header .nav__dropdown .nav__link:is(:hover, :focus-visible) {
  color: var(--ffop-orange);
}

/*
  Phone: the hero animation goes between the title and the description
  (Steve, 2026-10-12). The content column dissolves into the split's flex
  column so its pieces can be reordered around the widget.
*/
@media (max-width: 760px) {
  .edo-page.skin-ffop #intro.block--two-column .block__inner--split {
    display: flex;
    flex-direction: column;
  }
  .edo-page.skin-ffop #intro.block--two-column .block__col--content { display: contents; }
  .edo-page.skin-ffop #intro.block--two-column .block__col--content > * { order: 3; }
  .edo-page.skin-ffop #intro.block--two-column .block__col--content > :is(.block__eyebrow, .block__heading) { order: 1; }
  .edo-page.skin-ffop #intro.block--two-column .block__col--widget { order: 2; width: 100%; }
}

/* Carousel arrows: orange, square, and they grow on hover. */
.edo-page.skin-ffop .carousel__btn {
  background: var(--ffop-orange);
  border-color: var(--ffop-orange);
  color: #ffffff;
  border-radius: 0;
  transition: transform .2s ease;
}
.edo-page.skin-ffop .carousel__btn:is(:hover, :focus-visible) {
  background: var(--ffop-orange);
  border-color: var(--ffop-orange);
  color: #ffffff;
  transform: scale(1.12);
}

@media (min-width: 900px) {
  .edo-page.skin-ffop .carousel__btn:is(:hover, :focus-visible) {
    transform: translateY(-50%) scale(1.12);
  }
}

/* Footer bar (Jonah, 2026-10-13): campaign blue, white type. */
.edo-page.skin-ffop .site-footer {
  background: var(--ffop-heading);
  color: #ffffff;
}
.edo-page.skin-ffop .site-footer__inner {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
  padding-block: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  font: 500 13px/1.4 var(--font-body);
}
.edo-page.skin-ffop .site-footer__copy { margin: 0; color: #ffffff; }
.edo-page.skin-ffop .site-footer__links {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.edo-page.skin-ffop .site-footer__links a {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.edo-page.skin-ffop .site-footer__links a:is(:hover, :focus-visible) { color: var(--ffop-text); }

/* The mobile menu panel is white too: ink links, orange on hover. */
body.skin-ffop .site-header .site-header__panel :is(.nav__link, .nav__summary, .nav__chevron),
body.skin-ffop .site-header--overlay:not(.is-solid) .site-header__panel :is(.nav__link, .nav__summary, .nav__chevron) {
  color: var(--ffop-text);
}
body.skin-ffop .site-header .site-header__panel :is(.nav__link, .nav__summary):is(:hover, :focus-visible) {
  color: var(--ffop-orange);
}

/*
  Quiz on a phone: title, copy, then the sample-question graphic, then the
  button (Steve, 2026-10-13). Same technique as the hero: the copy column
  dissolves so its pieces can be ordered around the picture.
*/
@media (max-width: 1024px) {
  .edo-page.skin-ffop #quiz .block__inner--split { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .edo-page.skin-ffop #quiz .block__col--content { display: contents; }
  .edo-page.skin-ffop #quiz .block__col--content > * { order: 2; margin: 0; }
  .edo-page.skin-ffop #quiz .block__col--content > :is(.block__eyebrow, .block__heading) { order: 1; }
  .edo-page.skin-ffop #quiz .block__col--content > .block__eyebrow { margin-bottom: -12px; }
  .edo-page.skin-ffop #quiz .block__col--content > .block__actions { order: 4; }
  .edo-page.skin-ffop #quiz .block__col:not(.block__col--content) { order: 3; }
}

/* =====================================================
   Closing CTA — buttons and social layout
   ===================================================== */

/* Center the closing panel */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__panel {
  width: min(100%, 680px);
  margin-inline: auto;
  background: transparent;
}

/* Arrange GIVE and SIGN UP horizontally */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0 0 40px;
}

/* Restore natural button width */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__actions .btn {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 160px;
  min-height: 56px;
  padding: 16px 32px;
  background: var(--ffop-orange);
  color: var(--ffop-gray);
  border: 0;
  border-radius: 0;
  text-align: center;
  text-decoration: none;
}

/* Keep blue background only around social media */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__social {
  width: 100%;
  box-sizing: border-box;
  background: var(--ffop-blue);
  padding: 28px 32px 36px;
  border-radius: 0;
  text-align: center;
}

/* Center FOLLOW US */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__social-label {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

/* Center the social icons */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__social-links {
  justify-content: center;
}

/* Mobile: keep buttons side by side when possible */
@media (max-width: 480px) {
  .edo-page.skin-ffop
  .block--cta-band:has(.block__social) .block__actions {
    gap: 12px;
  }

  .edo-page.skin-ffop
  .block--cta-band:has(.block__social) .block__actions .btn {
    min-width: 0;
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* =====================================================
   Closing CTA — blue panel below H2
   ===================================================== */

/* Preserve the background photograph */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) {
  background-color: transparent;
}

/* Blue rectangle around everything except the heading */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__panel {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 40px 32px;
  box-sizing: border-box;
  background: var(--ffop-blue);
  border-radius: 0;
}

/* Buttons side by side */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0 0 40px;
}

/* White outlined buttons */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__actions .btn {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 160px;
  padding: 16px 32px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
}

/* Reverse colors on hover */
.edo-page.skin-ffop
.block--cta-band:has(.block__social)
.block__actions .btn:is(:hover, :focus-visible) {
  background: #ffffff;
  color: var(--ffop-blue);
  border-color: #ffffff;
}

/* Social section shares the panel background */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__social {
  background: transparent;
  padding: 0;
  text-align: center;
}

/* Center FOLLOW US */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__social-label {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

/* Center the social icons */
.edo-page.skin-ffop
.block--cta-band:has(.block__social) .block__social-links {
  justify-content: center;
}

/* Earth Day 2027 — final form section background */

#support-earth-day-movement {
    background-image: url('/wp-content/uploads/2026/10/ffop-support-bg-scaled-1.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}