/**
 * Button interaction styling.
 *
 * Loaded after Squarespace's own CSS, so it only adds motion and hover states —
 * the resting appearance of every button is left exactly as the design has it.
 *
 * Covers all three button shapes on the site:
 *   .btn                       header "Book an intro Call"
 *   .sqs-block-button-element  in-page CTAs, primary (filled) and secondary (outlined)
 *   .form-submit-button        the three contact forms
 */

:root {
  --sol-ink: #1a2223;
  /* Short, slightly overshooting curve — quick to respond, settles softly. */
  --sol-ease: cubic-bezier(0.2, 0.8, 0.25, 1);
  --sol-dur: 0.26s;
}

/**
 * The transition is marked important deliberately. Squarespace sets
 * `transition: .1s opacity linear` on these at (0,2,1) — higher than any
 * reasonable selector here — and `transition: none !important` on buttons
 * inside animated blocks. Without this the hover state still applies but jumps
 * instead of easing. Only the transition is forced; every other property below
 * wins on normal cascade rules.
 */
.btn,
.sol-cta,
.sqs-block-button-element,
.form-submit-button {
  transition:
    transform var(--sol-dur) var(--sol-ease),
    box-shadow var(--sol-dur) var(--sol-ease),
    background-color var(--sol-dur) ease,
    border-color var(--sol-dur) ease,
    color var(--sol-dur) ease !important;
}

/* Lift, with a neutral shadow as the base case. */
.btn:hover,
.sol-cta:hover,
.sqs-block-button-element:hover,
.form-submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -12px rgba(26, 34, 35, 0.45);
}

/* Press: settles most of the way back down, so the click feels physical. */
.btn:active,
.sol-cta:active,
.sqs-block-button-element:active,
.form-submit-button:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px -8px rgba(26, 34, 35, 0.4);
  transition-duration: 0.08s;
}

/**
 * The glow takes the button's own colour, read off the element by buttons.js
 * and handed over as --sol-glow.
 *
 * Squarespace's theme variables looked like the obvious source but do not track
 * what is rendered: on the homepage the submit button is pink while
 * --tertiaryButtonBackgroundColor is orange, and on /pricing that variable is
 * dark ink while the button is orange. Using them put a yellow glow under pink
 * buttons. The computed background always matches.
 *
 * Without JavaScript, or in browsers without color-mix (Safari < 16.2), the
 * neutral shadow set above still applies.
 */
.btn:hover,
.sol-cta:hover,
.sqs-block-button-element:hover,
.form-submit-button:hover {
  box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--sol-glow, var(--sol-ink)) 85%, transparent);
}

/**
 * No fill override for outlined buttons. Squarespace already fills them on
 * hover with `--secondaryButtonBackgroundColor`, which is correct per section;
 * forcing a single colour here made them orange even on pink sections.
 */

/* Keyboard focus must stay obvious — never trade this for aesthetics. */
.btn:focus-visible,
.sol-cta:focus-visible,
.sqs-block-button-element:focus-visible,
.form-submit-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  transform: translateY(-2px);
}

/* A disabled submit should not pretend to be interactive. */
.form-submit-button[disabled],
.form-submit-button[aria-disabled='true'] {
  transform: none;
  box-shadow: none;
  opacity: 0.6;
  cursor: progress;
}

/**
 * Anyone who has asked their OS to reduce motion gets the colour changes and
 * the focus ring, but no movement.
 */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .sol-cta,
  .sqs-block-button-element,
  .form-submit-button {
    transition:
      background-color var(--sol-dur) ease,
      border-color var(--sol-dur) ease,
      color var(--sol-dur) ease !important;
  }

  .btn:hover,
  .btn:active,
  .btn:focus-visible,
  .sol-cta:hover,
  .sol-cta:active,
  .sol-cta:focus-visible,
  .sqs-block-button-element:hover,
  .sqs-block-button-element:active,
  .sqs-block-button-element:focus-visible,
  .form-submit-button:hover,
  .form-submit-button:active,
  .form-submit-button:focus-visible {
    transform: none;
  }
}