/* =========================================================================
   Component: fm-btn
   Variants: primary (black), accent (orange), ghost, invert.
   Sizes:    default, sm, lg.
   ========================================================================= */

.fm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fm-sp-2);
  padding: 0.75rem 1.5rem;
  font-family: var(--fm-font-body);
  font-size: var(--fm-fs-base);
  font-weight: var(--fm-fw-bold);
  line-height: 1;
  color: var(--fm-white);
  background: var(--fm-black);
  border: 2px solid var(--fm-black);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fm-dur-fast) var(--fm-ease),
              color var(--fm-dur-fast) var(--fm-ease),
              border-color var(--fm-dur-fast) var(--fm-ease);
  text-align: center;
  white-space: nowrap;
}

.fm-btn:hover {
  background: var(--fm-accent);
  border-color: var(--fm-accent);
  color: var(--fm-white);
}

/* Variants */
.fm-btn--accent {
  background: var(--fm-accent);
  border-color: var(--fm-accent);
}
.fm-btn--accent:hover {
  background: var(--fm-black);
  border-color: var(--fm-black);
}

.fm-btn--ghost {
  background: transparent;
  color: var(--fm-black);
}
.fm-btn--ghost:hover {
  background: var(--fm-black);
  color: var(--fm-white);
}

.fm-btn--invert {
  background: var(--fm-white);
  color: var(--fm-black);
  border-color: var(--fm-white);
}
.fm-btn--invert:hover {
  background: transparent;
  color: var(--fm-white);
  border-color: var(--fm-white);
}

/* Outline on dark backgrounds: white border+text, fills white on hover. */
.fm-btn--outline-white {
  background: transparent;
  color: var(--fm-white);
  border-color: var(--fm-white);
}
.fm-btn--outline-white:hover {
  background: var(--fm-white);
  color: var(--fm-black);
  border-color: var(--fm-white);
}

/* Sizes */
.fm-btn--sm { padding: 0.5rem 1rem; font-size: var(--fm-fs-sm); }
.fm-btn--lg { padding: 1rem 2rem; font-size: var(--fm-fs-md); }

/* Text link with arrow (Freedom's signature CTA style) */
.fm-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--fm-black);
  font-weight: var(--fm-fw-bold);
  position: relative;
  padding-right: 1.5em;
}

.fm-link::after {
  content: '';
  position: absolute;
  right: 0.4em;
  top: 50%;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--fm-accent);
  border-bottom: 2px solid var(--fm-accent);
  transform: translateY(-50%) rotate(-45deg);
  transition: transform var(--fm-dur-fast) var(--fm-ease),
              right var(--fm-dur-fast) var(--fm-ease);
}

.fm-link:hover::after { right: 0; transform: translateY(-50%) rotate(-45deg) translate(0.15em, 0.15em); }
.fm-link:hover { color: var(--fm-accent); }
.fm-link--invert { color: var(--fm-white); }
.fm-link--invert:hover { color: var(--fm-accent); }