/**
 * Buttons.
 *
 * One treatment shared by `.button` links and by form submit controls, so a CTA
 * and a form submit never drift apart.
 *
 * Variants:
 *   .button            solid, brand fill
 *   .button--outline   outline, transparent fill
 *   .button--on-dark   for use over dark panels and photography
 *   .button--full      full width at any viewport
 *
 * Buttons go full width below --bp-button-stack automatically. A 44px target
 * that spans the screen is easier to hit than one that does not, and centred
 * short buttons look stranded on a narrow column.
 */

.button,
.form-submit,
.webform-button--submit,
input[type="submit"],
button[type="submit"] {
  --_bg: var(--color-brand-strong);
  --_fg: var(--color-surface);
  --_border: var(--color-brand-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);

  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-l);

  border: 2px solid var(--_border);
  border-radius: var(--radius-button);

  background-color: var(--_bg);
  color: var(--_fg);

  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-align: center;

  cursor: pointer;
  transition: background-color var(--duration) var(--easing),
              color var(--duration) var(--easing),
              border-color var(--duration) var(--easing);
}

/* Beats the global `a, a:visited` colour rule without !important. */
a.button,
a.button:visited {
  color: var(--_fg);
  text-decoration: none;
}

.button:hover,
.form-submit:hover,
.webform-button--submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
a.button:hover {
  --_bg: var(--color-accent-strong);
  --_border: var(--color-accent-strong);
  --_fg: var(--color-surface);
}

.button:focus-visible,
.form-submit:focus-visible,
.webform-button--submit:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.button:disabled,
input[type="submit"]:disabled,
button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------
   Outline

   Border colour carries the meaning, so the border is 2px rather than 1px.
   A 1px outline button at this size reads as a disabled state.
   ---------------------------------------------------------------------- */

.button--outline,
a.button--outline,
a.button--outline:visited {
  --_bg: transparent;
  --_fg: var(--color-brand-strong);
  --_border: var(--color-brand-strong);
}

.button--outline:hover,
a.button--outline:hover {
  --_bg: var(--color-brand-strong);
  --_fg: var(--color-surface);
  --_border: var(--color-brand-strong);
}

/* ----------------------------------------------------------------------
   On dark

   For the footer and over banner photography. White on transparent has no
   guaranteed contrast against an image, so pair this with a scrim.
   ---------------------------------------------------------------------- */

.button--on-dark,
a.button--on-dark,
a.button--on-dark:visited {
  --_bg: transparent;
  --_fg: var(--color-surface);
  --_border: var(--color-surface);
}

.button--on-dark:hover,
a.button--on-dark:hover {
  --_bg: var(--color-surface);
  --_fg: var(--color-ink-strong);
  --_border: var(--color-surface);
}

.button--on-dark:focus-visible {
  outline-color: var(--color-surface);
}

/* ----------------------------------------------------------------------
   Width
   ---------------------------------------------------------------------- */

.button--full {
  display: flex;
  inline-size: 100%;
}

@media (max-width: 30rem) {
  .button,
  a.button,
  .form-submit,
  .webform-button--submit,
  input[type="submit"],
  button[type="submit"] {
    display: flex;
    inline-size: 100%;
  }

  /* Opt out where a button genuinely should stay inline on a phone. */
  .button--inline {
    display: inline-flex;
    inline-size: auto;
  }
}