/* Wave section dividers (WEB-016): one shape (wave.svg), one height, on every full-width band of the site.
   The homepage imports this file (garden-web/src/styles/theme.css); the inner pages link it.
   .wave-band  a band that starts and ends with a wave (the closing wave is the opening one turned over)
   .wave-top   a wave on the top edge only
   .wave-bottom  a wave on the bottom edge only (the session header, which already sits under a band)
   Each wave takes the band's own background, so it follows the colour theme. */
:root { --wave-height: clamp(28px, 3.4vw, 48px); }

.wave-band, .wave-top, .wave-bottom { position: relative; }
.wave-band { z-index: 1; } /* lets the closing wave paint over the section that follows */

.wave-band::before, .wave-band::after, .wave-top::before, .wave-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--wave-height);
  background: inherit;
  pointer-events: none;
  -webkit-mask: url('/wave.svg') center / 100% 100% no-repeat;
  mask: url('/wave.svg') center / 100% 100% no-repeat;
}
.wave-band::before, .wave-top::before { top: calc(1px - var(--wave-height)); }
.wave-band::after, .wave-bottom::after { bottom: calc(1px - var(--wave-height)); transform: scale(-1, -1); }

/* Back-to-back bands read as one band: no waves where they meet. */
.wave-band:has(+ .wave-band)::after, .wave-band + .wave-band::before { display: none; }

/* A band that closes the page flows into the footer, so the footer's top rule would double the edge. */
main:has(> .wave-band:last-child) + .footer { border-top-color: transparent; }