/* ---------------------------------------------------------------------------
   Local overrides, loaded after the Webflow stylesheet.

   This file is hand-maintained and is the canonical copy; tools/postprocess.mjs
   copies it into static-site/ so the mirror and the app stay in sync.
   --------------------------------------------------------------------------- */

/* This site has been migrated off Webflow - hide the "Made in Webflow" badge. */
.w-webflow-badge {
  display: none !important;
}

/* ---------------------------------------------------------------- nav ----- */

/*
  The dropdown list is absolutely positioned with the Webflow default `top: 0`,
  so it opened flush with the TOP of its toggle and covered the "Solutions"
  label. Anchor it to the bottom of the toggle instead.

  Desktop only: below 992px Webflow switches the list to `position: static` and
  renders it inline inside the mobile menu, where `top` must not apply.
*/
@media screen and (min-width: 992px) {
  .navbar1_dropdown-list {
    top: 100%;
  }

  /*
    Absolute positioning leaves no hit area between the toggle and the list, so
    the menu closed while the pointer crossed the gap. This pseudo-element
    bridges it without shifting anything visually.
  */
  .navbar1_dropdown-list.w--open::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
  }
}

/* -------------------------------------------------------------- footer ---- */

/*
  Above 767px the legal links are a single non-wrapping grid row
  (`grid-auto-flow: column; grid-auto-columns: max-content`). At 768px exactly -
  before the 767px stacking rule applies - that row is wider than the viewport
  and scrolls the whole page sideways by ~7px.

  Flex with wrapping lays out identically while there is room, and wraps instead
  of overflowing when there is not.
*/
@media screen and (min-width: 768px) {
  .footer2_legal-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
  }
}

/* ------------------------------------------------------ page transitions -- */

/*
  Route changes swap the DOM with no visual cue, which reads as a flicker. The
  main wrapper is keyed on the pathname in Layout.tsx, so it remounts on every
  navigation and replays this animation.
*/
@keyframes pronted-page-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.main-wrapper {
  animation: pronted-page-enter 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Smooth scrolling for in-page anchor links. Route changes jump instantly (see
   ScrollToTop) - animating those would scroll the outgoing page before the
   swap, which looks worse than an instant reset. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .main-wrapper {
    animation: none;
  }
}