/* =====================================================================
   INTERVISSER — custom override layer
   ---------------------------------------------------------------------
   This file is YOURS. It is NOT under assets/_hs/ (Elevate system CSS,
   never touched) and NOT a React bundle. It deploys via `hs project upload`
   and is loaded in base.hubl.html AFTER Elevate's main.hubl.css — so
   anything here overrides the theme. Paired with assets/js/intervisser.js
   for behaviour that needs scripting.

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

/* ---------------------------------------------------------------------
   Button hover wipe (site-wide, all variants)
   A 250%-wide diagonal gradient (hover colour | base colour) parked to the
   right; on hover background-position slides left, reading as a smooth
   diagonal fill. The edge angle is var(--wipe-angle): intervisser.js swaps
   it to 120deg ("/") on hover-in and 60deg ("\") on hover-out. With no JS it
   falls back to 120deg, giving a clean "/" wipe both ways.
   --------------------------------------------------------------------- */

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

.hs-elevate-button.hs-elevate-button--primary {
  background-image: linear-gradient(
    var(--wipe-angle, 120deg),
    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: 250% 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(
    var(--wipe-angle, 120deg),
    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: 250% 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(
    var(--wipe-angle, 120deg),
    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: 250% 100%;
  background-position: right center;
  background-repeat: no-repeat;
}
.hs-elevate-button.hs-elevate-button--accent:hover { background-position: left center; }

/* ---------------------------------------------------------------------
   Header ↔ hero alignment (default content grid)
   The homepage hero is the standalone Hero module (.hero), which uses its own
   64px inset. To put its content on the EXACT same grid as the SiteHeader (and
   dnd sections) — logo directly above the headline, menu above the content's
   right edge — we pin the hero slide's horizontal inset to the same formula the
   header uses: centre a contentWrapper--wide column, with the section gutter as
   the minimum on narrow viewports.

   Enforced from this override layer (ships via hs project upload) so we don't
   have to cms-upload the standalone module. !important because we're overriding
   the module's own .hero--container-* padding. The header's "Full" option is the
   intentional opt-out and will widen past this grid.
   --------------------------------------------------------------------- */
.hero .hero__slide {
  padding-inline: max(
    var(--hsElevate--section--horizontalPadding, 32px),
    calc((100% - var(--hsElevate--contentWrapper--wide__maxWidth)) / 2)
  ) !important;
}