/*
 * ============================================================
 * WAVE DIVIDERS  —  wave.css
 * ============================================================
 * Curved "river" transitions between homepage sections, in
 * place of hard horizontal edges. Ties every section together
 * as one continuous flow instead of stacked blocks.
 *
 * How to add a wave between two sections
 * -----------------------------------------
 * Call the helper right after the section that should appear
 * to flow into the next one:
 *
 *   <?php regreen_wave_divider( 'light-to-dark' ); ?>
 *
 * Available directions (set the fill on each end to match the
 * sections it sits between):
 *   light-to-dark   →  --rg-bg          into  --rg-green-dark
 *   dark-to-light   →  --rg-green-dark  into  --rg-bg
 *   light-to-card   →  --rg-bg          into  --rg-card
 *
 * The wave itself lives in regreen_wave_divider() in
 * functions.php — edit the curve there, edit color/height here.
 * ============================================================
 */

.rg-wave {
  display: block;
  width: 100%;
  height: var(--rg-wave-height);
  margin: -1px 0;
  position: relative;
  z-index: 2;
}

.rg-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Fill colors per direction — matches the sections the wave
   sits between. Add a new modifier here if a new color pairing
   is needed; don't hardcode colors inline in the PHP helper. */
.rg-wave--light-to-dark svg { fill: var(--rg-green-dark); }
.rg-wave--dark-to-light svg { fill: var(--rg-bg); }
.rg-wave--light-to-card svg { fill: var(--rg-card); }

@media (max-width: 640px) {
  .rg-wave {
    height: var(--rg-wave-height-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rg-wave svg path {
    transition: none;
  }
}