/* ==========================================================================
   Wave pattern component
   Draws the wave along the bottom edge of any <header class="hdr">.
   Usage:  <link rel="stylesheet" href="wave-base.css">     (that's all)
   Needs wave-desktop.svg and wave-mobile.svg in the same folder as this file.

   Layering: the wave sits in front of ordinary header content, so anything that extends down
   into the wave area goes behind it. A component that must stay in front of the wave
   (e.g. a dropdown menu) should give itself  z-index: 2  or higher.
   ========================================================================== */

.hdr{
  position: relative;     /* so the wave can sit on the bottom edge */
  isolation: isolate;     /* keeps the wave's layering inside the header */
}

.hdr::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  aspect-ratio: 1536 / 158;                    /* wave-desktop.svg proportions */
  z-index: 1;                                  /* in front of normal content, so things running down the header (e.g. the pipe) go behind the wave */
  pointer-events: none;
  background: url("wave-desktop.svg") center bottom / 100% 100% no-repeat;
}

@media (max-width: 768px){
  .hdr::after{
    aspect-ratio: 785 / 100;                   /* wave-mobile.svg proportions */
    background-image: url("wave-mobile.svg");
  }
}