/**
 * SML Buttons — responsive
 */
.sl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sl-space-2); padding: var(--sl-space-2) var(--sl-space-5);
  font-size: var(--sl-text-sm); font-weight: var(--sl-weight-medium);
  border-radius: var(--sl-radius-sm); cursor: pointer;
  text-decoration: none; border: 0.5px solid transparent; white-space: nowrap;
  transition: background var(--sl-transition), color var(--sl-transition), border-color var(--sl-transition), box-shadow var(--sl-transition);
  -webkit-tap-highlight-color: transparent;
}
.sl-btn:focus-visible { outline: 2px solid var(--sl-navy-mid); outline-offset: 2px; }
.sl-btn--primary  { background: var(--sl-teal); color: #fff; border-color: var(--sl-teal); }
.sl-btn--primary:hover { background: var(--sl-teal-dark); border-color: var(--sl-teal-dark); color: #fff; text-decoration: none; }
.sl-btn--secondary{ background: var(--sl-navy); color: #fff; border-color: var(--sl-navy); }
.sl-btn--secondary:hover { background: var(--sl-navy-dark); color: #fff; text-decoration: none; }
.sl-btn--outline  { background: transparent; color: var(--sl-navy-light); border-color: var(--sl-navy-mid); }
.sl-btn--outline:hover { background: rgba(33,150,243,0.10); color: #fff; text-decoration: none; }
.sl-btn--ghost    { background: transparent; color: var(--sl-navy); border-color: var(--sl-color-border); }
.sl-btn--ghost:hover { background: var(--sl-navy-ghost); text-decoration: none; }
.sl-btn--sm  { padding: var(--sl-space-1) var(--sl-space-3); font-size: var(--sl-text-xs); }
.sl-btn--lg  { padding: var(--sl-space-3) var(--sl-space-6); font-size: var(--sl-text-md); }

/* Drupal core button overrides */
.button, .button--primary, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sl-space-2) var(--sl-space-5);
  font-size: var(--sl-text-sm); font-weight: var(--sl-weight-medium);
  border-radius: var(--sl-radius-sm); cursor: pointer;
  border: 0.5px solid transparent; transition: background var(--sl-transition);
  background: var(--sl-teal); color: #fff;
}
.button:hover, .button--primary:hover, input[type="submit"]:hover { background: var(--sl-teal-dark); color: #fff; }

/* Touch targets — minimum 44px on mobile */
@media (max-width: 767px) {
  .sl-btn { min-height: 44px; }
  .sl-btn--sm { min-height: 36px; }
}