/* =========================================================================
   ASHBORN PARTNERS — Smart Sticky Header
   Paired with assets/smart-header.js. The header stays at the top of the
   screen, slides out of view while the visitor scrolls DOWN (more room to
   read), and slides back the moment they scroll UP.

   Works with the headers the site already has — nothing about their links,
   buttons or menus changes:
     #siteHeader     homeowners, partners, blogs, FAQ, authors, Pennsylvania
     .gateway-header home, about, approach, resources, business articles
     .hwa-header     Home Water Analyzer

   Layering: z-index 40 keeps the header above page content, heroes and
   forms, but BELOW pop-ups (funnel / analyzer windows use 60–300), so it can
   never cover a form someone is filling in.
   ========================================================================= */

/* The site sets overflow-x: hidden on <html>/<body> to stop sideways
   scrolling. A side effect of "hidden" is that NO header can stick to the
   top of the screen. "clip" stops sideways scrolling exactly the same way
   without that side effect. Browsers too old to know "clip" keep "hidden"
   (their header simply scrolls away, as it always has). */
/* In-page jumps (e.g. "#contact", the Resources state picker) and form
   fields reached with the Tab key stop just below the header instead of
   underneath it. The script keeps --smart-header-h up to date. */
:root {
  scroll-padding-top: calc(var(--smart-header-h, 72px) + 8px);
}

@supports (overflow-x: clip) {
  :root,
  :root body {
    overflow-x: clip;
  }
}

/* "header" in front of each name makes these rules outrank a page's own
   header styles (Partners, for example, sets position: relative). */
header#siteHeader,
header.gateway-header,
header.hwa-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

/* Hidden while scrolling down. The extra 16px also tucks away the shadow
   and the gateway header's background strip (below). */
header.smart-header--hidden {
  transform: translateY(calc(-100% - 16px));
}

/* A soft shadow once the page has scrolled, so the header reads as a bar
   floating over the content. */
header#siteHeader.smart-header--scrolled,
header.hwa-header.smart-header--scrolled {
  box-shadow: 0 4px 20px rgba(16, 36, 28, 0.08);
}

/* The gateway header is a centred block (max 1320px) with no background of
   its own. Paint the page colour across the full screen width behind it, so
   page content never shows through or beside it while it is stuck. */
header.gateway-header {
  background: var(--bg, #F7F6F1);
  box-shadow: 0 0 0 100vmax var(--bg, #F7F6F1);
  clip-path: inset(0 -100vmax);
}
header.gateway-header.smart-header--scrolled {
  box-shadow: 0 0 0 100vmax var(--bg, #F7F6F1), 0 1px 0 100vmax var(--border, #E2DFD4);
  clip-path: inset(0 -100vmax -1px);
}
/* On phones the gateway header has no bottom padding; once stuck, extend
   its background 12px down (no layout change, so nothing jumps). */
@media (max-width: 900px) {
  header.gateway-header.smart-header--scrolled {
    box-shadow: 0 12px 0 100vmax var(--bg, #F7F6F1), 0 13px 0 100vmax var(--border, #E2DFD4);
    clip-path: inset(0 -100vmax -13px);
  }
}

/* The gateway phone menu sits just below the header in the page, so it
   sticks directly under the header (the script measures the height). */
.gateway-mobile-nav {
  position: -webkit-sticky;
  position: sticky;
  top: var(--smart-header-h, 64px);
  z-index: 39;
}

@media (prefers-reduced-motion: reduce) {
  header#siteHeader,
  header.gateway-header,
  header.hwa-header {
    transition: none;
  }
}

@media print {
  header#siteHeader,
  header.gateway-header,
  header.hwa-header {
    position: static;
    transform: none;
    box-shadow: none;
  }
}