/* Wishingstep static-site custom overrides */

/* Footer social icons: the Squarespace sprite renders as icon glyph + mask.
   Show the white glyph, hide the mask, so the icons are visible (white). */
.sqs-svg-icon--social .sqs-use--mask,
.sqs-svg-icon--social .svg-mask { display: none; }
.sqs-svg-icon--social .sqs-use--icon,
.sqs-svg-icon--social .svg-icon,
.sqs-svg-icon--social .svg-icon path { fill: #ffffff !important; }

/* Screen-reader-only SEO heading (visually hidden, still read by crawlers/AT) */
.wsp-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Sticky header: pin the nav bar to the top so pages scroll underneath.
   The header is otherwise position:absolute (scrolls away). It already overlays
   the top of the content, so switching to fixed keeps the same top-of-page look
   and only changes scroll behavior. Its white background keeps content legible. */
#header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* Sticky-header scrolled state: hairline bottom border + slight height/logo
   shrink once the page is scrolled. The `.wsp-scrolled` class is toggled by
   wsp-overrides.js. Transitions live on the base state so both directions animate. */
#header{ border-bottom: 1px solid transparent; transition: transform .14s ease-in-out, border-color .22s ease; }
#header .header-announcement-bar-wrapper{ transition: padding .22s ease; }
#header img[src*="Logo"]{ transition: max-height .22s ease; }

#header.wsp-scrolled{ border-bottom-color: rgba(0, 0, 0, .12); }
#header.wsp-scrolled .header-announcement-bar-wrapper{ padding-top: 12px !important; padding-bottom: 12px !important; }
#header.wsp-scrolled img[src*="Logo"]{ max-height: 44px !important; }