/*
 * WFP Buttons Module
 * Extended button variants beyond style.css baseline.
 */

/* =============================================================================
   SIZE VARIANTS
   ============================================================================= */

.wfp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.6em 1.4em;
  border-radius: var(--radius-full);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color var(--transition-2),
    color var(--transition-2),
    border-color var(--transition-2),
    transform var(--transition-1);
  white-space: nowrap;
}

.wfp-btn:active {
  transform: scale(0.97);
}

/* Primary */
.wfp-btn--primary {
  background: var(--accent);
  color: var(--base-3);
  border-color: var(--accent);
}

.wfp-btn--primary:hover,
.wfp-btn--primary:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--base-3);
}

/* Secondary */
.wfp-btn--secondary {
  background: transparent;
  color: var(--accent);
  border-color: currentColor;
}

.wfp-btn--secondary:hover,
.wfp-btn--secondary:focus-visible {
  background: var(--accent);
  color: var(--base-3);
  border-color: var(--accent);
}

/* Ghost (on dark backgrounds) */
.wfp-btn--ghost {
  background: transparent;
  color: var(--base-3);
  border-color: hsl(0 0% 100% / 0.4);
}

.wfp-btn--ghost:hover,
.wfp-btn--ghost:focus-visible {
  background: hsl(0 0% 100% / 0.15);
  border-color: hsl(0 0% 100% / 0.7);
  color: var(--base-3);
}

/* Small */
.wfp-btn--sm {
  font-size: var(--step--1);
  padding: 0.45em 1em;
}

/* Large */
.wfp-btn--lg {
  font-size: var(--step-1);
  padding: 0.7em 1.8em;
}

/* =============================================================================
   ICON BUTTON
   ============================================================================= */

.wfp-btn--icon {
  padding: 0.5em;
  border-radius: var(--radius);
  line-height: 1;
}

/* =============================================================================
   READ MORE LINK
   ============================================================================= */

.wfp-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.wfp-read-more::after {
  content: '→';
  transition: transform var(--transition-1);
}

.wfp-read-more:hover::after {
  transform: translateX(3px);
}

.wfp-read-more:hover {
  color: var(--accent-hover);
}