/* NOTE ON THE NON-OBVIOUS PROPERTIES BELOW (the same in all eight button-*.css sheets).
   `--button-height` is a MINIMUM, not a fixed height, so a label that wraps grows the
   button instead of spilling out of it: a narrow card, a phone, a long label, or one
   composed at render time ("Pay {amount}", "Make Your Donation - $104.50 CAD").
   Until v5.4.31 the height was fixed, the label could not wrap, and a long one ran out
   of the button.
   `--button-padding` is deliberately 2px heavier on top (`8px 40px 6px`): the label sits
   1px below centre, which reads as centred in most faces. A one-line label never reaches
   the padding (it is centred in the min-height by inline-flex + align-items), so the
   padding only shapes a button that has grown. Keep the top-bottom difference at 2px and
   a one-line button stays exactly where it was.
   Override `display` on a .button and the centring goes with it, in a way that looks like
   a padding bug but is not. */
.button{
  background: var(--button-bg);
  color: var(--button-color);
  border-radius: var(--button-radius);
  padding: var(--button-padding);
  min-height: var(--button-height);
  margin: var(--button-margin);
  font-family: var(--button-font-family);
  text-transform: var(--button-text-transform);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--button-bg);
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: var(--animate-medium);
}
.button:hover{
  border: 1px solid var(--color-navy);
  background: transparent;
  color: var(--color-navy);
  box-shadow: var(--shadow);
  transform: translate(0 , -4px);
}
.light .button{
  background: var(--button-bg-light);
  border-color: var(--button-bg-light);
  color: var(--button-color-light);
}
.light .button:hover{
  border: 1px solid var(--color-navy);
  background: transparent;
  color: var(--color-navy);
}
.main .button{
  background: var(--button-bg-main);
  color: var(--button-color-main);
  border-color: var(--button-bg-main);
}
.main .button:hover{
  background: transparent;
  border-color: white;
  color: white;
}
.dark .button{
  background: var(--button-bg-dark);
  color: var(--button-color-dark);
  border-color: var(--button-bg-dark);
}
.dark .button:hover{
  background: transparent;
  border-color: white;
  color: white;
}
.button:focus,
.button:focus-within,
.button:focus-visible,
.button:target{
  box-shadow: var(--shadow);
}
.button.ghost-btn{
  border-color: var(--color-bg);
  background: var(--color-bg);
  color: var(--color-navy);
}
.button.ghost-btn:hover{
  background: transparent;
  border-color: white;
  color: white;
}
.btn-wrapper{
  margin: 2.4rem 0 0;
  display: flex;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.btn-wrapper .button{
  margin: 0;
}