/* Button Components */

/* The shape every site button and button-styled link shares */
.btn-primary,
.btn-secondary,
.btn-danger,
.amazon-add-to-cart-button,
.btn-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 2.5rem;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}

/* Primary Button */
.btn-primary {
  border: none;
  /* Solid, since white on the lighter purples falls below AA and axe cannot rate text on a gradient */
  background: var(--color-action-secondary);
  color: var(--color-text-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: var(--glow-purple);
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Outlined Buttons: secondary and danger */
.btn-secondary,
.btn-danger {
  background: transparent;
}

/* Secondary Button */
.btn-secondary {
  border: var(--border-width-md) solid var(--color-link-primary);
  color: var(--color-link-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-link-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-link-primary);
  box-shadow: var(--glow-purple);
  text-decoration: none;
}

/* Danger Button: outlined, for the one destructive action of a page */
.btn-danger {
  border: var(--border-width-md) solid var(--color-accent-error);
  color: var(--color-accent-error);
}

.btn-danger:hover,
.btn-danger:focus {
  box-shadow: var(--glow-purple);
  color: var(--color-accent-error);
  text-decoration: none;
}

/* Amazon Button */
.amazon-add-to-cart-button {
  border: none;
  background-color: var(--color-amazon-bg);
  color: var(--color-amazon-text);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.amazon-add-to-cart-button:hover {
  background-color: var(--color-amazon-hover);
  color: var(--color-amazon-text-hover);
}

/* Disabled Button */
.btn-disabled {
  font-weight: var(--font-weight-medium);
  text-align: center;
  /* a muted color instead of opacity: faded link purple fails WCAG AA contrast on the cards */
  border-color: var(--color-border-light);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
  transition: none;
}

.btn-disabled:hover,
.btn-disabled:focus {
  transform: none;
  box-shadow: none;
  background-color: inherit;
  border-color: var(--color-border-light);
  color: var(--color-text-tertiary);
}

/* Expand/Collapse Button */
.expand-button {
  background: none;
  border: none;
  color: var(--color-heading-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: var(--space-xs) 0;
  transition: color var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.expand-button:hover,
.expand-button:focus {
  color: var(--color-heading-primary);
}

/* Keeps the site's focus ring from base.css for the keyboard, none after a click */
.expand-button:focus:not(:focus-visible) {
  outline: none;
}

.expand-button i {
  transition: transform var(--transition-normal);
}

.expand-button[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Button Groups */
.card-actions {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: var(--border-width-sm) solid var(--color-border-primary);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.card-actions-vertical {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: var(--border-width-sm) solid var(--color-border-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-end;
}

.card-actions-vertical > * {
  width: auto;
  min-width: 240px;
  max-width: 240px;
  white-space: nowrap;
  text-align: center;
}

.card-actions-vertical .btn-secondary {
  margin-top: var(--space-sm);
}

/* Mobile responsive behavior - center all card action groups */
@media (max-width: 768px) {
  .card-actions-vertical {
    align-items: center;
    padding-top: var(--space-mobile-sm);
    gap: var(--space-mobile-sm);
  }

  .card-actions {
    justify-content: center;
    padding-top: var(--space-mobile-sm);
  }

  /* Maintain touch targets while reducing visual size */
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .amazon-add-to-cart-button {
    padding: var(--space-mobile-sm) var(--space-mobile-md);
    min-height: var(--size-touch-target);
    font-size: var(--font-size-sm);
    gap: var(--space-mobile-sm);
  }

  .expand-button {
    padding: var(--space-mobile-xs) 0;
    font-size: var(--font-size-xs);
    min-height: var(--size-touch-target);
    gap: var(--space-mobile-xs);
  }
}