/* ============================================================
   CAAT Button — Component CSS
   AEM client library: caat/components/button/clientlibs/css
   Depends on: tokens.css (consumes SEMANTIC tokens)
   ============================================================ */

.caat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .7rem 1.15rem;
  max-width: 20rem;
  border-radius: var(--caat-radius, .75rem);
  font-family: var(--caat-font-body, "Libre Franklin", Arial, sans-serif);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
}

/* ── Primary ───────────────────────────────────────────────── */
.caat-button--primary {
  background: var(--caat-color-action-primary);
  border-color: var(--caat-color-action-primary);
  color: var(--caat-color-text-inverse);
}
.caat-button--primary:hover,
.caat-button--primary.is-hover {
  background: var(--caat-color-action-primary-hover);
  border-color: var(--caat-color-action-primary-hover);
  color: var(--caat-color-text-inverse);
  transform: translateY(-1px);
}
.caat-button--primary:active,
.caat-button--primary.is-active {
  background: var(--caat-color-action-primary-active);
  border-color: var(--caat-color-action-primary-active);
  transform: none;
}
.caat-button--primary:disabled,
.caat-button--primary[aria-disabled="true"],
.caat-button--primary.is-disabled {
  background: var(--caat-color-state-disabled-bg);
  border-color: var(--caat-color-state-disabled-bg);
  color: var(--caat-color-text-disabled);
  pointer-events: none;
}

/* ── Secondary ───────────────────────────────────────────────
   --caat-color-action-secondary is AA-safe (resolves to green-700,
   4.95:1 with white text); hover/active go darker. */
.caat-button--secondary {
  background: var(--caat-color-action-secondary);
  border-color: var(--caat-color-action-secondary);
  color: var(--caat-color-text-inverse);
}
.caat-button--secondary:hover,
.caat-button--secondary.is-hover {
  background: var(--caat-color-action-secondary-hover);
  border-color: var(--caat-color-action-secondary-hover);
  color: var(--caat-color-text-inverse);
  transform: translateY(-1px);
}
.caat-button--secondary:active,
.caat-button--secondary.is-active {
  background: var(--caat-color-action-secondary-active);
  border-color: var(--caat-color-action-secondary-active);
  transform: none;
}

/* ── Outline primary ───────────────────────────────────────── */
.caat-button--outline-primary {
  background: transparent;
  border-color: var(--caat-color-action-primary);
  color: var(--caat-color-action-primary);
}
.caat-button--outline-primary:hover,
.caat-button--outline-primary:active,
.caat-button--outline-primary.is-hover,
.caat-button--outline-primary.is-active {
  background: var(--caat-color-action-primary);
  border-color: var(--caat-color-action-primary);
  color: var(--caat-color-text-inverse);
}

/* ── Outline secondary ─────────────────────────────────────── */
.caat-button--outline-secondary {
  background: transparent;
  border-color: var(--caat-color-action-secondary);
  color: var(--caat-color-action-secondary);
}
.caat-button--outline-secondary:hover,
.caat-button--outline-secondary:active,
.caat-button--outline-secondary.is-hover,
.caat-button--outline-secondary.is-active {
  background: var(--caat-color-action-secondary);
  border-color: var(--caat-color-action-secondary);
  color: var(--caat-color-text-inverse);
}

/* ── Outline white (for dark backgrounds: hero, blue sections) ──
   #fff is intentional here — a white control on a dark surface. */
.caat-button--outline-white {
  background: transparent;
  border-color: #fff;
  color: var(--caat-color-text-inverse);
}
.caat-button--outline-white:hover,
.caat-button--outline-white:active,
.caat-button--outline-white.is-hover,
.caat-button--outline-white.is-active {
  background: #fff;
  border-color: #fff;
  color: var(--caat-color-action-primary);
}

/* ── Text link ─────────────────────────────────────────────── */
.caat-button--link {
  background: transparent;
  border-color: transparent;
  color: var(--caat-color-text-link);
  text-decoration: none;
  padding-left: 0;
  padding-right: 0;
}
.caat-button--link:hover,
.caat-button--link.is-hover {
  color: var(--caat-color-text-link-hover);
  text-decoration: underline;
}

/* ── Focus ───────────────────────────────────────────────────
   .is-focus mirrors :focus-visible so the focus ring can be shown
   statically (Figma export, docs) where pseudo-classes don't fire. */
.caat-button:focus-visible,
.caat-button.is-focus {
  box-shadow: var(--caat-color-focus-ring);
  outline: 0;
}

/* ── Loading / busy ────────────────────────────────────────────
   Set aria-busy="true" (or add .caat-button--loading) while an async
   action is in flight: a leading spinner appears in the button's own
   text colour, the width is preserved, and clicks are blocked. The
   global prefers-reduced-motion rule freezes the spin. See the
   Interaction States foundation. */
.caat-button--loading,
.caat-button[aria-busy="true"] {
  pointer-events: none;
  cursor: default;
}
.caat-button--loading::before,
.caat-button[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: caat-button-spin var(--caat-duration-slow) linear infinite;
}
@keyframes caat-button-spin { to { transform: rotate(360deg); } }

/* ── Sizes ─────────────────────────────────────────────────── */
.caat-button--sm {
  padding: .48rem .9rem;
  min-height: 2.25rem;
  font-size: var(--caat-font-size-xs);
}
.caat-button--lg {
  padding: .875rem 1.35rem;
  min-height: 3.25rem;
  font-size: 1.125rem; /* not a type-scale step — left as-is */
}

/* ── Full width on mobile ──────────────────────────────────── */
@media (max-width: 575.98px) {
  .caat-button--full-mobile {
    width: 100%;
  }
}

/* ── Icon inside button ────────────────────────────────────── */
.caat-button__icon {
  font-size: 1.1em;
  line-height: 1;
}
.caat-button__icon[aria-hidden="true"] {
  pointer-events: none;
}