/* =====================================================================
   INTERVISSER — custom override layer
   ---------------------------------------------------------------------
   This file is YOURS. It is NOT under assets/_hs/ (which HubSpot resets on
   every build) and NOT a React bundle (which caches hard). It deploys
   reliably via `hs project upload` and is loaded in base.hubl.html AFTER
   Elevate's own CSS — so anything here overrides the theme.

   Put all custom INTERVISSER styling here: button effects, colour tweaks,
   layout overrides, spacing. One file, one source of truth.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Button hover wipe (universal)
   A 200%-wide gradient (hover colour | base colour) parked to the right;
   on hover it slides left, reading as a smooth left-to-right fill.
   Applies to every theme button variant — header, CTAs, anywhere the
   .hs-elevate-button--{variant} classes are used.
   --------------------------------------------------------------------- */

.hs-elevate-button {
  transition: color 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              border-color 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              background-position 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.hs-elevate-button.hs-elevate-button--primary {
  background-image: linear-gradient(
    to right,
    var(--hsElevate--button--primary__hover--backgroundColor, #ffffff) 0%,
    var(--hsElevate--button--primary__hover--backgroundColor, #ffffff) 50%,
    var(--hsElevate--button--primary__backgroundColor, #DFFD0A) 50%,
    var(--hsElevate--button--primary__backgroundColor, #DFFD0A) 100%
  );
  background-size: 200% 100%;
  background-position: right center;
  background-repeat: no-repeat;
}
.hs-elevate-button.hs-elevate-button--primary:hover { background-position: left center; }

.hs-elevate-button.hs-elevate-button--secondary {
  background-image: linear-gradient(
    to right,
    var(--hsElevate--button--secondary__hover--backgroundColor, #ffffff) 0%,
    var(--hsElevate--button--secondary__hover--backgroundColor, #ffffff) 50%,
    var(--hsElevate--button--secondary__backgroundColor, transparent) 50%,
    var(--hsElevate--button--secondary__backgroundColor, transparent) 100%
  );
  background-size: 200% 100%;
  background-position: right center;
  background-repeat: no-repeat;
}
.hs-elevate-button.hs-elevate-button--secondary:hover { background-position: left center; }

.hs-elevate-button.hs-elevate-button--accent {
  background-image: linear-gradient(
    to right,
    var(--hsElevate--button--accent__hover--backgroundColor, #ffffff) 0%,
    var(--hsElevate--button--accent__hover--backgroundColor, #ffffff) 50%,
    var(--hsElevate--button--accent__backgroundColor, currentColor) 50%,
    var(--hsElevate--button--accent__backgroundColor, currentColor) 100%
  );
  background-size: 200% 100%;
  background-position: right center;
  background-repeat: no-repeat;
}
.hs-elevate-button.hs-elevate-button--accent:hover { background-position: left center; }