/*
  WAVE BAND — a full-bleed green banner with a wavy top AND bottom edge, sitting
  at the BOTTOM OF THE HERO (templates/partials/hero.php renders it as the hero's
  sibling; templates/partials/wave-band.php is the markup). It reads like a
  ribbon that "falls over" the hero above and the content below it, carrying one
  line of left-aligned text plus a decorative sprout icon. This file is the
  contract; READ it before changing the shape or the margins.

  ── STRUCTURE ──────────────────────────────────────────────────────────────
    section.wave-band
      span.wave-band-edge--top       wave-band-top.svg     → wavy top
      div.wave-band-body             solid green; .container > .wave-band-text
                                       └ svg.wave-band-text-svg  the line set on an
                                           SVG <textPath> so it undulates along the
                                           same crest as the wavy edges (see below);
                                           the sprout (.wave-band-icon) is a nested
                                           <svg> AFTER the text, riding the line
      span.wave-band-edge--bottom    wave-band-bottom.svg  → wavy bottom
  TEXT SAFETY: the text + icon live in the SOLID body between the two edges,
  never in the wavy overhang, so they can never render outside the wave. The
  body grows with its content, so longer text just makes the band taller.

  ── BAND TEXT (flat) ─────────────────────────────────────────────────────────
  The text is a plain, flat line (.wave-band-text__label) typeset as an .h4, with
  the decorative sprout (.wave-band-icon) sitting just after it on the same flex
  row. It USED to ride an SVG <textPath> so it undulated along the band's wave;
  that is now DEPRECATED — the implementation is kept, unused, in wave-band.php
  (`if (false)`) and in the DEPRECATED section at the bottom of this file, so the
  wavy variant can be restored. The edges + doodles are unaffected; only the text
  stopped undulating.

  ── PARALLEL EDGES (why two SVGs, not one flipped) ───────────────────────────
  Top edge = wave-band-top.svg (fills BELOW the curve). Bottom edge =
  wave-band-bottom.svg — the SAME curve filled ABOVE it. Same curve in phase ⇒
  the green between the edges is a CONSTANT thickness (overhang + body) at every
  x, so the edges run parallel. A scaleY(-1) mirror inverts the phase and makes
  the band bulge fat where the waves peak together and pinch thin where they
  cross — don't use one. The curve dips first, then peaks. These two SVGs are
  band-specific (the footer's wave.svg is a separate, gentler divider — don't
  reuse it here). Both take the band colour via `currentColor`, as does the
  sprout (assets/svg/sprout.svg), so it inherits the dark-green text colour.

  ── WIDTH & OVERFLOW ─────────────────────────────────────────────────────────
  The band fills its parent's width: the hero spans full width (it opens the
  page / is a stretched builder row), so the band beneath it does too. In the
  builder the band sits inside the hero's stretched row; WPBakery puts
  overflow:hidden on stretched rows (.vc_row[data-vc-full-width]) which would
  clip the vertical overhang, so that row is forced back to overflow:visible.

  ── OVERLAP & FLANKING ──────────────────────────────────────────────────────
  Overhang depth is the single token --wave-band-overhang (tokens.css); the
  margins/paddings below all track it. The band laps over the hero (above) and
  the content (below) via a negative margin-block + z-index:1, and:
    1. The HERO gets the overhang as extra BOTTOM PADDING
       (.hero:has(+ .wave-band)) so its bottom-aligned content clears the
       upward wave.
    2. The element AFTER the band clears the downward wave — a default page
       part (.entry-content) cancels the band's negative bottom margin; in the
       builder the NEXT row adds the overhang to its inter-row gap (with a
       .vc_clearfix variant for the empty div WPBakery emits between rows).
*/

.wave-band {
  --wave-band-color: var(--color-green-light);
  position: relative;
  z-index: 1;                              /* lap the overhang over the neighbours */
  color: var(--wave-band-color);           /* drives the wave SVGs' currentColor */
  /* WPBakery stretches the row to full width, so the band just fills it; the
     text inside is re-constrained by .container. */
  /* Fall over the previous and next rows by the overhang height. */
  margin-block: calc(-1 * var(--wave-band-overhang));
}

.wave-band-edge {
  display: block;
  line-height: 0;                          /* kill the inline-SVG descender gap */
  pointer-events: none;
}

.wave-band-edge svg {
  display: block;
  width: 100%;
  /* Fixed height — wave.svg has preserveAspectRatio="none", so it stretches. */
  height: var(--wave-band-overhang);
  fill: currentColor;
}

/* Top = wave-band-top.svg, bottom = wave-band-bottom.svg (same curve, opposite
   fill, in phase) → parallel edges / constant thickness. See header for why. */
.wave-band-body {
  background-color: var(--wave-band-color);
  margin-block: -1px;                      /* overlap the edges to kill sub-pixel seams */
  /* Modest inset so the flat line clears the wavy edges (the overhang itself is
     handled by the edge SVGs / --wave-band-overhang). */
  padding-block: 1.5rem;
}

/* Typeset as an .h4 (markup carries the class); only the layout + the
   dark-green colour are band-specific here. */
.wave-band-text {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin: 0;
  text-align: left;
  color: var(--color-black);               /* pure black on light green — max contrast */
  transform: translateY(.5rem);
}

/* Let a long line wrap inside the flex row instead of forcing overflow. */
.wave-band-text__label {
  min-inline-size: 0;
}

/* Decorative sprout (assets/svg/sprout.svg), a standalone inline <svg> sitting
   just after the text on the flex row. Height tracks the type (em) so it reads
   as a companion mark; width:auto keeps its aspect; flex:none stops the row from
   squashing it. This rule also recolours it green (its paths use currentColor),
   distinct from the black text beside it. */
.wave-band-icon {
  flex: none;
  block-size: 1.5em;
  inline-size: auto;
  color: var(--color-green-dark);          /* #245C2D — green sprout beside the black text */
}

/* Flanking (see the OVERLAP section in the header for the overview). */

/* The hero grows its bottom padding by the overhang so its bottom-aligned
   content clears the wave that laps up over it. Sibling-scoped, so it works
   both as a default page part and as the builder Hero in a column. */
.hero:has(+ .wave-band) {
  padding-block-end: calc(var(--section-spacing) + var(--wave-band-overhang));
}

/* Default page part (single/index/archive): the content after the band cancels
   the band's negative bottom margin, so the downward wave laps over the
   content's own top padding rather than over its text. */
.wave-band + .entry-content {
  margin-block-start: var(--wave-band-overhang);
}

/* Builder: the band sits inside the hero's stretched row. That row must not clip
   the overhang — WPBakery sets overflow:hidden on stretched rows
   (.vc_row[data-vc-full-width]); the attribute variant out-specifies it. */
.vc_row:has(.wave-band),
.vc_row[data-vc-full-width]:has(.wave-band) {
  overflow: visible;
}

/* Builder: the next row keeps its inter-row gap and ADDS the overhang, so the
   downward wave laps into that gap rather than over the next row. */
.vc_row:has(.wave-band) + .vc_row,
.vc_row:has(.wave-band) + .vc_clearfix + .vc_row {
  margin-block-start: calc(var(--row-spacer) + var(--wave-band-overhang));
}

/*
  ── DOODLES (decorative flight paths) ───────────────────────────────────────
  Two dotted "flight path" flourishes that emanate from the green wave, like a
  bee's flight path in a children's book (markup: templates/partials/wave-band.php):
    --up   : cream arc + gold butterfly (flight-path-butterfly.svg), laps UP
             over the lower-right of the hero, dipping its trail onto the wave.
    --down : muted-green trail + green flower (flight-path-flower.svg), laps
             DOWN out from under the wave across the start of the content, left.

  WHY THEY LIVE IN THE BAND: the band is `position: relative; z-index: 1`, so as
  its children the doodles inherit that stacking context and paint OVER the green
  (a sibling doodle in the hero would sit BEHIND the band). The band's edges
  already overflow it (`overflow: visible`), so the doodles can lap up/down past
  the band box too. All offsets are derived from the Figma frame (1440-wide
  artboard) — they are proportional, so they hold as the full-bleed band scales.
  Purely decorative: non-interactive, and dropped on small screens where the
  full-bleed hero/wave gets too cramped for them to read.
*/
.wave-band-doodle {
  position: absolute;
  z-index: 1;                 /* over the band body, within the band's context */
  pointer-events: none;
}

.wave-band-doodle svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Up: anchored to the right; its bottom sits one overhang below the band's top
   edge, so the trail's dip crosses onto the green while the butterfly rides up
   into the hero. */
.wave-band-doodle--up {
  inset-inline-end: 0;
  inset-block-end: calc(100% - var(--wave-band-overhang));
  inline-size: clamp(22rem, 58%, 52rem);
}

/* Down: bleeds off the left edge (svg starts at frame x −89 ≈ −6.18% of 1440);
   its top sits one overhang above the band's bottom edge so the trail crosses
   onto the green, then sweeps down across the start of the content. */
.wave-band-doodle--down {
  inset-inline-start: -6.18%;
  inset-block-start: calc(100% - var(--wave-band-overhang) + 50px); /* nudged ~50px further below the band */
  inline-size: clamp(20rem, 62.9%, 46rem);
}

/* Too cramped on phones (the full-bleed hero/wave is tight) — drop the flourishes. */
@media (max-width: 48rem) {
  .wave-band-doodle {
    display: none;
  }
}

/*
  ── DEPRECATED — SVG <textPath> "wavy text" ──────────────────────────────────
  Styling for the old undulating text (text set on an SVG <textPath>). The band
  now renders its text flat, so nothing emits the .wave-band-text-svg markup and
  these selectors never match. Kept, unused, alongside the guarded PHP in
  templates/partials/wave-band.php so the wavy variant can be restored together.

  .wave-band-text-svg {
    flex: 1 1 auto;
    min-inline-size: 0;
    inline-size: 100%;
    max-inline-size: 42rem;              (* base cap, scaled inline by width/1700 *)
    block-size: auto;
    overflow: visible;                   (* the sprout rides just above the viewBox top *)
  }
  .wave-band-text-svg text {
    font-size: 64px;                     (* USER UNITS; MUST match $font_size in wave-band.php *)
    fill: currentColor;
  }
  .wave-band-text__path--full { display: none; }   (* mobile shows the flattened crest *)
  @media (min-width: 48rem) {           (* desktop: bolder full-amplitude crest *)
    .wave-band-text__path--flat { display: none; }
    .wave-band-text__path--full { display: inline; }
  }
  (* Sprout was a NESTED <svg> inside the line, sized via x/y/width/height in the
     markup; only its colour lived here: .wave-band-icon { color: var(--color-green-dark); } *)
*/