/* ================================================================
   SUNSHINE PRESSURE WASHING — SELECTED FULL HEADER REDESIGN
   Header only. No body/page styling is changed.
   ================================================================ */

.topbar.sunshine-header-v2{
  --hdr-navy:#0b3b68;
  --hdr-blue:#078fc6;
  --hdr-teal:#00a6ad;
  --hdr-green:#239b4d;
  --hdr-yellow:#ffca0a;
  position:sticky !important;
  top:0 !important;
  z-index:950 !important;
  padding:0 !important;
  color:#102846 !important;
  overflow:visible !important;
  background:
    radial-gradient(circle at 29% -35%,rgba(255,255,255,.98) 0 25%,rgba(255,255,255,.74) 39%,transparent 55%),
    linear-gradient(101deg,#c6effa 0%,#e8f8fd 20%,#ffffff 47%,#e4f7f2 66%,#08a0b0 83%,#2aa147 100%) !important;
  border-top:3px solid #0b4675 !important;
  border-bottom:3px solid #08629b !important;
  box-shadow:0 5px 18px rgba(8,46,78,.16) !important;
}

/* Decorative blue/teal wave across the bottom, like the selected mockup. */
.topbar.sunshine-header-v2::after{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  bottom:0;
  height:34px;
  pointer-events:none;
  background:linear-gradient(90deg,#0660a8 0%,#0787c4 31%,#46b7d0 58%,#15a9a2 77%,#269e54 100%);
  clip-path:polygon(0 34%,14% 46%,30% 49%,49% 77%,64% 62%,80% 43%,100% 55%,100% 100%,0 100%);
  opacity:.97;
}

.topbar.sunshine-header-v2 .nav-wrap{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  max-width:none !important;
  height:166px !important;
  min-height:166px !important;
  margin:0 !important;
  padding:8px 25px 24px !important;
  display:grid !important;
  grid-template-columns:260px minmax(510px,1fr) 330px 170px !important;
  align-items:center !important;
  gap:22px !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* ------------------------------------------------
   LOGO
   ------------------------------------------------ */
.topbar.sunshine-header-v2 .brand{
  width:250px !important;
  height:142px !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:0 !important;
  margin:0 !important;
  flex:none !important;
  border:0 !important;
  background:transparent !important;
}

.topbar.sunshine-header-v2 .brand img{
  width:100% !important;
  height:100% !important;
  max-width:250px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:drop-shadow(0 3px 4px rgba(2,57,91,.10));
}

/* ------------------------------------------------
   CENTER NAVIGATION
   ------------------------------------------------ */
.topbar.sunshine-header-v2 .nav{
  min-width:0 !important;
  height:88px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 7px !important;
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(255,255,255,.70) !important;
  border-radius:18px !important;
  box-shadow:0 5px 18px rgba(16,74,105,.06) !important;
  white-space:nowrap !important;
}

.topbar.sunshine-header-v2 .nav>a,
.topbar.sunshine-header-v2 .nav-dropdown{
  height:62px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
  flex:1 1 0 !important;
}

.topbar.sunshine-header-v2 .nav>a,
.topbar.sunshine-header-v2 .nav-dropdown>.nav-parent{
  min-height:62px !important;
  height:62px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:0 18px !important;
  color:#102846 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  font-size:17px !important;
  font-weight:850 !important;
  line-height:1 !important;
  text-shadow:none !important;
  transition:color .16s ease,transform .16s ease !important;
}

.topbar.sunshine-header-v2 .nav>a + *,
.topbar.sunshine-header-v2 .nav-dropdown + *{
  border-left:1px solid rgba(21,73,104,.18) !important;
}

.topbar.sunshine-header-v2 .header-nav-icon{
  width:28px !important;
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 28px !important;
  color:#0797b5 !important;
}

.topbar.sunshine-header-v2 .header-nav-icon svg{
  width:27px !important;
  height:27px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.topbar.sunshine-header-v2 .nav>a:hover,
.topbar.sunshine-header-v2 .nav-dropdown>.nav-parent:hover{
  color:#0879a9 !important;
  transform:translateY(-1px) !important;
}

.topbar.sunshine-header-v2 .nav>a::after,
.topbar.sunshine-header-v2 .nav-dropdown>.nav-parent::before{
  content:"" !important;
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  bottom:1px !important;
  height:3px !important;
  border-radius:3px !important;
  background:var(--hdr-yellow) !important;
  transform:scaleX(0) !important;
  transform-origin:center !important;
  transition:transform .16s ease !important;
}

.topbar.sunshine-header-v2 .nav>a:hover::after,
.topbar.sunshine-header-v2 .nav>a.active::after,
.topbar.sunshine-header-v2 .nav-dropdown:hover>.nav-parent::before,
.topbar.sunshine-header-v2 .nav-dropdown>.nav-parent.active::before{
  transform:scaleX(1) !important;
}

/* Keep the small dropdown chevron. */
.topbar.sunshine-header-v2 .nav-dropdown>.nav-parent::after{
  content:"" !important;
  width:8px !important;
  height:8px !important;
  margin:0 0 5px 2px !important;
  border:0 !important;
  border-right:2px solid #102846 !important;
  border-bottom:2px solid #102846 !important;
  transform:rotate(45deg) !important;
  opacity:1 !important;
}

/* Services dropdown remains clean white and functional. */
.topbar.sunshine-header-v2 .nav-dropdown-menu{
  top:calc(100% + 12px) !important;
  left:50% !important;
  z-index:999 !important;
  min-width:235px !important;
  padding:10px !important;
  transform:translateX(-50%) translateY(8px) !important;
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid rgba(13,47,87,.13) !important;
  border-radius:12px !important;
  box-shadow:0 18px 38px rgba(12,47,72,.17) !important;
}

.topbar.sunshine-header-v2 .nav-dropdown:hover .nav-dropdown-menu,
.topbar.sunshine-header-v2 .nav-dropdown:focus-within .nav-dropdown-menu{
  transform:translateX(-50%) translateY(0) !important;
}

.topbar.sunshine-header-v2 .nav-dropdown-menu a,
.topbar.sunshine-header-v2 .nav-dropdown-menu a:visited{
  color:#102846 !important;
  background:transparent !important;
  font-size:.92rem !important;
  font-weight:700 !important;
}

.topbar.sunshine-header-v2 .nav-dropdown-menu a:hover,
.topbar.sunshine-header-v2 .nav-dropdown-menu a:focus{
  color:#0879a9 !important;
  background:#edf8fc !important;
}

/* ------------------------------------------------
   ESTIMATE / PHONE / LICENSED AREA
   ------------------------------------------------ */
.topbar.sunshine-header-v2 .nav-actions{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

.topbar.sunshine-header-v2 .header-phone{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  margin:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

.topbar.sunshine-header-v2 .header-phone small{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#ffffff !important;
  font-family:"Brush Script MT","Segoe Script",cursive !important;
  font-size:28px !important;
  font-weight:700 !important;
  font-style:normal !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  text-shadow:0 2px 3px rgba(0,70,79,.24) !important;
}

.topbar.sunshine-header-v2 .header-phone strong{
  display:block !important;
  margin:3px 0 8px !important;
  padding:0 !important;
  color:#ffffff !important;
  font-size:34px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:-.025em !important;
  text-shadow:0 3px 4px rgba(0,70,79,.22) !important;
  -webkit-text-stroke:0 !important;
}

.topbar.sunshine-header-v2 .header-phone span{
  width:100% !important;
  max-width:305px !important;
  min-width:0 !important;
  min-height:48px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:11px !important;
  margin:0 !important;
  padding:8px 20px !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#ffd62c,#ffc400) !important;
  box-shadow:0 4px 10px rgba(4,78,80,.17) !important;
  color:#10345d !important;
  font-size:15px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
}

.topbar.sunshine-header-v2 .header-phone span::before{
  content:"✓" !important;
  width:28px !important;
  height:32px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 28px !important;
  margin:0 !important;
  padding:0 !important;
  background:#0a4e83 !important;
  color:#ffcc0a !important;
  font-size:17px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  clip-path:polygon(50% 0,91% 17%,84% 67%,50% 100%,16% 67%,9% 17%) !important;
}

/* ------------------------------------------------
   VISITOR COUNTER
   ------------------------------------------------ */
.topbar.sunshine-header-v2 .header-visit-column{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
}

.topbar.sunshine-header-v2 .site-visitor-counter.ept-style-counter{
  width:150px !important;
  max-width:150px !important;
  height:122px !important;
  min-height:122px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  margin:0 !important;
  padding:9px 13px 10px !important;
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #e1e8ed !important;
  border-radius:18px !important;
  box-shadow:0 6px 16px rgba(10,48,71,.15) !important;
  color:#173e69 !important;
  text-align:center !important;
  text-shadow:none !important;
}

.topbar.sunshine-header-v2 .visit-trend-icon{
  width:45px !important;
  height:45px !important;
  flex:0 0 45px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#e7f7f9 !important;
  color:#078a9a !important;
  box-shadow:none !important;
}

.topbar.sunshine-header-v2 .visit-trend-icon svg{
  width:27px !important;
  height:27px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.7 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.topbar.sunshine-header-v2 .visit-counter-copy{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  margin:0 !important;
  padding:7px 0 0 !important;
  border-top:1px solid #c9dbe2 !important;
  background:transparent !important;
  text-align:center !important;
}

.topbar.sunshine-header-v2 .visit-counter-label{
  width:100% !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#087e89 !important;
  background:transparent !important;
  font-size:12px !important;
  font-weight:950 !important;
  line-height:1.05 !important;
  letter-spacing:.12em !important;
  text-align:center !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.topbar.sunshine-header-v2 [data-site-counter]{
  width:100% !important;
  display:block !important;
  margin:1px 0 0 !important;
  padding:0 !important;
  color:#10345d !important;
  background:transparent !important;
  border:0 !important;
  font-size:31px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-shadow:none !important;
}

/* ------------------------------------------------
   RESPONSIVE DESKTOP
   ------------------------------------------------ */
@media (max-width:1450px) and (min-width:981px){
  .topbar.sunshine-header-v2 .nav-wrap{
    height:150px !important;
    min-height:150px !important;
    padding:7px 18px 22px !important;
    grid-template-columns:220px minmax(450px,1fr) 275px 145px !important;
    gap:14px !important;
  }

  .topbar.sunshine-header-v2 .brand{
    width:210px !important;
    height:126px !important;
  }

  .topbar.sunshine-header-v2 .brand img{
    max-width:210px !important;
  }

  .topbar.sunshine-header-v2 .nav{
    height:76px !important;
  }

  .topbar.sunshine-header-v2 .nav>a,
  .topbar.sunshine-header-v2 .nav-dropdown>.nav-parent{
    padding:0 12px !important;
    font-size:15px !important;
    gap:7px !important;
  }

  .topbar.sunshine-header-v2 .header-nav-icon{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
  }

  .topbar.sunshine-header-v2 .header-nav-icon svg{
    width:23px !important;
    height:23px !important;
  }

  .topbar.sunshine-header-v2 .header-phone small{
    font-size:23px !important;
  }

  .topbar.sunshine-header-v2 .header-phone strong{
    font-size:28px !important;
  }

  .topbar.sunshine-header-v2 .header-phone span{
    max-width:260px !important;
    min-height:43px !important;
    padding:7px 14px !important;
    font-size:12px !important;
  }

  .topbar.sunshine-header-v2 .site-visitor-counter.ept-style-counter{
    width:132px !important;
    max-width:132px !important;
    height:108px !important;
    min-height:108px !important;
  }

  .topbar.sunshine-header-v2 .visit-trend-icon{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }

  .topbar.sunshine-header-v2 [data-site-counter]{
    font-size:27px !important;
  }
}

/* ------------------------------------------------
   MOBILE / TABLET
   Keep the existing functional hamburger menu.
   ------------------------------------------------ */
@media (max-width:980px){
  .topbar.sunshine-header-v2{
    background:linear-gradient(100deg,#dff5fb 0%,#eafafd 48%,#0aa1a9 100%) !important;
    border-top:2px solid #0b4675 !important;
    border-bottom:2px solid #08629b !important;
  }

  .topbar.sunshine-header-v2::after{
    height:18px !important;
  }

  .topbar.sunshine-header-v2 .nav-wrap{
    height:96px !important;
    min-height:96px !important;
    padding:5px 18px 13px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  .topbar.sunshine-header-v2 .brand{
    width:150px !important;
    height:78px !important;
    flex:0 0 150px !important;
  }

  .topbar.sunshine-header-v2 .brand img{
    max-width:150px !important;
  }

  .topbar.sunshine-header-v2 .nav,
  .topbar.sunshine-header-v2 .nav-actions,
  .topbar.sunshine-header-v2 .header-visit-column{
    display:none !important;
  }

  .topbar.sunshine-header-v2 .mobile-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:48px !important;
    height:48px !important;
    margin-left:auto !important;
    border:1px solid rgba(9,68,96,.20) !important;
    border-radius:11px !important;
    background:#ffffff !important;
    color:#0b5278 !important;
    box-shadow:0 3px 10px rgba(10,48,71,.10) !important;
    font-size:25px !important;
  }

  .topbar.sunshine-header-v2 .mobile-menu{
    width:100% !important;
    margin:0 !important;
    padding:10px 22px 24px !important;
    border-radius:0 !important;
    background:#0b5278 !important;
    color:#ffffff !important;
    box-shadow:0 16px 24px rgba(0,0,0,.16) !important;
  }

  .topbar.sunshine-header-v2 .mobile-menu a,
  .topbar.sunshine-header-v2 .mobile-menu strong{
    color:#ffffff !important;
  }
}