/*
 * The ground system — the best idea in the original codebase, carried over
 * unchanged.
 *
 * Sections are transparent and <main> carries the colour, so a change sweeps
 * the whole viewport at once instead of scrolling in as a hard edge. The
 * ground-shift module flips `data-ground` as each section arrives; the
 * transition does the blending.
 *
 * This cannot be expressed in theme.json: it is a state-dependent runtime
 * theme, not a palette.
 *
 * One improvement over the Next site: the first section's ground is rendered
 * onto <main> server-side (see blocks/main/render.php), so with JavaScript off
 * the page opens on the right colour instead of showing black and lime modules
 * on a green field.
 */

main {
  --ground: var(--green);
  --ink-on-ground: var(--white);
  --eyebrow-tick: var(--lime);

  position: relative;
  z-index: 1;
  background-color: var(--ground);
  color: var(--ink-on-ground);
  transition:
    background-color 700ms ease,
    color 700ms ease;
}

main[data-ground="green"] {
  --ground: var(--green);
  --ink-on-ground: var(--white);
}

main[data-ground="black"] {
  --ground: var(--black);
  --ink-on-ground: var(--white);
}

main[data-ground="lime"] {
  --ground: var(--lime);
  --ink-on-ground: var(--charcoal);
  /* The lime tick would vanish into a lime ground. */
  --eyebrow-tick: currentColor;
  /* And so would the lime focus ring — this is the fix for the one WCAG
     failure the audit found in the original. */
  --focus-ring: var(--ink);
}

/*
 * Interior pages end on type rather than on the hero's full-bleed photography,
 * so the last module needs a defined gap before the footer reveals from behind
 * it. Replaces that module's own bottom padding instead of adding to it —
 * otherwise the total depends on which component happens to be last.
 */
main[data-inner] > section:last-child {
  padding-bottom: var(--space-9);
}

@media (prefers-reduced-motion: reduce) {
  main {
    transition: none;
  }
}