/* ============================================================
   waves.css — Footer Wave Transition
   axsysTek V4 "Controlled Velocity"

   SELECTOR NOTE (Phase 1 temporary):
   Uses `section#cta` and `footer` because Drupal renders the
   CTA Band as <section id="cta"> and footer as plain <footer>.
   Phase 2: Replace with .section-cta and .section-footer once
   page--front.html.twig adds those classes.
   ============================================================ */

/* ── CTA Band wave transition ─────────────────────────────── */
section#cta {
  position: relative;
  padding-bottom: calc(var(--space-16, 4rem) + 80px);
}

section#cta::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: url('../img/wave-bottom.svg');
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  pointer-events: none;
  z-index: 1;
}

/* ── Footer SVG background ────────────────────────────────── */
footer {
  background-color: #3A6FE8;
  background-image: url('../img/footer-bg-v2.svg');
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  min-height: 240px;
  color: rgba(255, 255, 255, 0.80);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

footer .container {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

footer hr {
  margin-top: 1.25rem !important;
  margin-bottom: 0.75rem !important;
}

/* ── Responsive wave height ───────────────────────────────── */
@media (max-width: 767px) {
  section#cta {
    padding-bottom: calc(var(--space-12, 3rem) + 48px);
  }
  section#cta::after {
    height: 48px;
  }
}

@media (max-width: 575px) {
  section#cta {
    padding-bottom: calc(var(--space-10, 2.5rem) + 32px);
  }
  section#cta::after {
    height: 32px;
  }
}