/* Williams Plumbing Header V8 — V6 foundation retained; V8 only positions the independent 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: 6;
  width: min(1200px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
}

.wp-header-v6__waves {
  position: absolute;
  z-index: 7;
  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); }

html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }

/* Independent bubble overlay: positioned only by V8. */
.wp-header-v8__bubbles {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  opacity: .20;
}

.wp-header-v8__bubbles img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* Independent copper-pipe component: positioned only by V8. */
.wp-header-v8__pipe {
  position: absolute;
  z-index: 5;
  left: 690px;
  top: 185px;
  width: 700px;
  pointer-events: none;
}

.wp-header-v8__pipe img {
  display: block;
  width: 100%;
  height: auto;
}

/* HTML branding: kept as real text rather than baked into the logo image. */
.wp-header-v8__brand-text {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 65px;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
}

.wp-header-v8__brand-name {
  font-size: 76px;
  line-height: .95;
  font-weight: 800;
  letter-spacing: -2px;
  color: #ffffff;
}

.wp-header-v8__brand-subtitle {
  margin-top: 8px;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #2698df;
}

.wp-header-v8__features {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 218px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  color: #ffffff;
  white-space: nowrap;
}

.wp-header-v8__features span + span {
  border-left: 1px solid rgba(255,255,255,.7);
  padding-left: 18px;
}

/* MenuV1 is included unchanged; this wrapper only controls its placement. */
.wp-header-v8__menu {
  position: absolute;
  top: 70px;
  left: 430px;
  right: auto;
  z-index: 8;
}

/* Logo is an independent image; V8 controls only its placement. */
.wp-header-v8__logo {
  position: absolute;
  top: 45px;
  left: -300px;
  z-index: 8;
  width: 230px;
}

.wp-header-v8__logo img { display: block; width: 100%; height: auto; }

/* Right-hand contact information is HTML, not part of the artwork. */
.wp-header-v8__contact {
  position: absolute;
  z-index: 8;
  top: 48px;
  right: 0;
  padding-left: 28px;
  border-left: 1px solid rgba(255,255,255,.7);
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-align: left;
}

.wp-header-v8__phone {
  font-size: 22px;
  line-height: 1.05;
  font-weight: 700;
  white-space: nowrap;
}

.wp-header-v8__coverage {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #2698df;
  white-space: nowrap;
}

.wp-header-v8__quote {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 24px;
  background: #2698df;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* .wp-header-v6__inner is kept in the markup (its own rule is untouched,
   per the V6 lock) but is now empty - its former children live in
   .wp-header-v8__row instead. Take it out of normal flow here, via a new
   rule rather than editing the locked one, so its own height:100% doesn't
   push the row (and everything in it) below the visible header. */
.wp-header-v6__inner {
  display: none;
}

@media (max-width: 700px) {
  .wp-header-v6 {
    --wp-header-height-mobile: 350px;
    --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); }

  /* New v8-owned positioning context, replacing inner as the offset parent.
     Replicates inner's old mobile inset exactly, so nothing below changes on mobile. */
  .wp-header-v8__row {
    position: relative;
    width: calc(100% - 28px);
    margin: 0 auto;
    height: 100%;
  }

  .wp-header-v8__top,
  .wp-header-v8__left-top,
  .wp-header-v8__text-col,
  .wp-header-v8__nav-contact {
    display: contents;
  }
  .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; }

  .wp-header-v8__menu {
    top: 24px;
    right: 0;
    left: 0;
    width: 100%;
  }

  .wp-header-v8__logo {
    top: 18px;
    left: -8px;
    width: 90px;
  }

  .wp-header-v8__brand-text {
    left: 88px;
    top: 14px;
  }

  .wp-header-v8__brand-name { font-size: 43px; }
  .wp-header-v8__brand-subtitle { font-size: 19px; margin-top: 5px; }

  .wp-header-v8__features {
    left: 0;
    top: 115px;
    font-size: 14px;
    gap: 10px;
  }

  .wp-header-v8__features span + span { padding-left: 10px; }

  .wp-header-v8__pipe {
    left: 90px;
    top: 155px;
    width: 520px;
  }

  .wp-header-v8__bubbles img {
    object-fit: cover;
  }

  .wp-header-v8__contact { display: none; }
}

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

/* Desktop layout: fluid row, decoupled from the 1200px inner container.
   V6 foundation rules above are untouched; this only repositions V8 components. */
@media (min-width: 701px) {
  /* Rebuilt from precise pixel measurements of the ChatGPT wide-desktop
     target (1536px mockup): header ~292px tall, logo ~150px wide, nav +
     contact all on ONE row beside the logo (not wrapped below), pipe
     large and positioned starting ~50% down the header. This replaces
     the previous guessed proportions entirely rather than patching them
     again. */
  .wp-header-v6 {
    --wp-header-height-desktop: 420px;
  }

  .wp-header-v8__row {
    position: relative;
    z-index: 6;
    width: 100%;
    height: 100%;
    padding: 14px clamp(20px, 2.5vw, 32px) 0;
    display: flex;
    flex-direction: column;
  }

  .wp-header-v8__top {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 16px;
  }

  .wp-header-v8__text-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .wp-header-v8__left-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .wp-header-v8__logo {
    position: static;
    width: 130px;
  }

  .wp-header-v8__brand-text { position: static; }
  .wp-header-v8__features { position: static; }

  /* Nav + contact sit together on one line beside the logo, matching the
     mockup - not forced below it. Still wraps below (via .top's own
     flex-wrap) if a narrower width genuinely can't fit everything, as a
     safety net - see the render at 1000px to check whether that ever
     triggers in practice. */
  .wp-header-v8__nav-contact {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px 14px;
  }

  .wp-header-v8__menu {
    position: static;
  }

  /* Contact is now a single row (icon + phone/coverage + button all
     side by side) matching the mockup, instead of the button stacked
     below - the mockup's contact block is compact enough to fit this way
     even beside the nav pill. */
  .wp-header-v8__contact {
    position: static;
    z-index: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .wp-header-v8__contact-top {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .wp-header-v8__phone-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .wp-header-v8__phone-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .wp-header-v8__phone-block {
    text-align: right;
  }

  /* Follows directly after .top in normal flow (small fixed margin-top),
     instead of being bottom-anchored - that left a large dead gap once
     the header height was shortened, since bottom-anchoring measures
     from the header's bottom edge, not from where the content actually
     ends. This keeps the pipe close to the content regardless of header
     height. */
  .wp-header-v8__pipe {
    position: static;
    align-self: flex-end;
    margin-top: 18px;
    margin-right: -1%;
    width: clamp(360px, 34vw, 560px);
    pointer-events: none;
  }
}

/* sync-check: isolated single-file commit to verify deploy pipeline */