/* =========================================================
   WILLIAMS PLUMBING — HEADER FOUNDATION V6
   This file defines ONLY the header foundation.
   Do not change these foundation values when adding components.
   ========================================================= */

.wp-header-v6 {
  --wp-header-height-desktop: 520px;
  --wp-header-height-mobile: 430px;
  --wp-header-blue: #092b50;
  --wp-wave-blue: #2698df;
  --wp-wave-light: #9edcf5;

  position: relative;
  width: 100%;
  height: var(--wp-header-height-desktop);
  min-height: var(--wp-header-height-desktop);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.07) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 66%, rgba(255,255,255,.045) 0 1px, transparent 2px),
    linear-gradient(135deg, #061f3b 0%, var(--wp-header-blue) 55%, #103b69 100%);
  background-size: 120px 120px, 170px 170px, 210px 210px, 100% 100%;
}

.wp-header-v6,
.wp-header-v6 * {
  box-sizing: border-box;
}

.wp-header-v6__inner {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
}

.wp-header-v6__waves {
  position: absolute;
  z-index: 3;
  left: -5%;
  bottom: -1px;
  width: 110%;
  height: 145px;
  pointer-events: none;
}

.wp-header-v6__wave {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 50% 50% 0 0 / 35% 35% 0 0;
  transform-origin: center bottom;
}

.wp-header-v6__wave--back {
  bottom: 0;
  height: 92px;
  background: #123e70;
  transform: rotate(-1.5deg) translateY(10px);
}

.wp-header-v6__wave--mid {
  bottom: -3px;
  height: 78px;
  background: var(--wp-wave-blue);
  transform: rotate(2deg) translateY(8px);
}

.wp-header-v6__wave--front {
  bottom: -8px;
  height: 55px;
  background: var(--wp-wave-light);
  transform: rotate(-2deg) translateY(12px);
}

@media (max-width: 700px) {
  .wp-header-v6 {
    --wp-header-height-desktop: var(--wp-header-height-mobile);
    height: var(--wp-header-height-mobile);
    min-height: var(--wp-header-height-mobile);
  }

  .wp-header-v6__inner {
    width: calc(100% - 28px);
  }

  .wp-header-v6__waves {
    height: 125px;
  }

  .wp-header-v6__wave--back {
    height: 82px;
  }

  .wp-header-v6__wave--mid {
    height: 68px;
  }

  .wp-header-v6__wave--front {
    height: 48px;
  }
}

@media (max-width: 380px) {
  .wp-header-v6 {
    --wp-header-height-mobile: 400px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
}