/* ==========================================================================
   COMPONENT: Button
   --------------------------------------------------------------------------
   .c-btn--donate is the ONLY place marigold appears in the interface.
   Marigold measures 1.73:1 on plaster and 2.04:1 on white, so it can never be
   a letterform — it is a surface carrying ink text (8.91:1, AAA). That
   constraint is what keeps the donate colour reserved.
   ========================================================================== */

.c-btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-border: transparent;
  --btn-pad-i: var(--sp-5);
  --btn-pad-b: var(--sp-3);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--btn-pad-b) var(--btn-pad-i);
  min-height: 44px;               /* touch target floor */
  font-family: var(--ff-utility);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-full);   /* the one soft form in an angular system,
                                     so the touchable thing reads as touchable */
  cursor: pointer;
  transition:
    background-color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    transform var(--d-fast) var(--e-out);
}

.c-btn:disabled,
.c-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.c-btn__icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* --------------------------------------------------------------------------
   VARIANTS
   -------------------------------------------------------------------------- */

/* DONATE — reserved marigold. Never restyle, never reuse this class. */
.c-btn--donate {
  --btn-bg: var(--c-marigold);
  --btn-fg: var(--c-ink);
  --btn-border: var(--c-marigold);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c-btn--donate:hover {
  --btn-bg: var(--c-marigold-deep);
  --btn-border: var(--c-marigold-deep);
}

.c-btn--donate:active { transform: translateY(1px); }

.c-btn--donate:disabled,
.c-btn--donate[aria-disabled="true"] {
  --btn-bg: var(--c-marigold-dim);
  --btn-border: var(--c-marigold-dim);
}

/* PRIMARY — every non-donate primary action. Ink, not marigold. */
.c-btn--primary {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-text-inv);
  --btn-border: var(--c-ink);
}

.c-btn--primary:hover {
  --btn-bg: var(--c-indigo);
  --btn-border: var(--c-indigo);
}

/* SECONDARY — outlined. */
.c-btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-border: var(--c-line-strong);
}

.c-btn--secondary:hover {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-text-inv);
  --btn-border: var(--c-ink);
}

/* GHOST — for use over imagery and on ink grounds. */
.c-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-text-inv);
  --btn-border: rgb(255 255 255 / 0.45);
}

.c-btn--ghost:hover {
  --btn-bg: rgb(255 255 255 / 0.12);
  --btn-border: var(--c-white);
}

/* QUIET — text-level action with an underline affordance. */
.c-btn--quiet {
  --btn-pad-i: var(--sp-2);
  --btn-fg: var(--c-verdigris-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.c-btn--quiet:hover { text-decoration-thickness: 3px; }

/* ICON-ONLY — must always carry an aria-label. */
.c-btn--icon {
  --btn-pad-i: var(--sp-3);
  --btn-pad-b: var(--sp-3);
  min-width: 44px;
  border-radius: var(--r-full);
}

/* --------------------------------------------------------------------------
   SIZES
   -------------------------------------------------------------------------- */

.c-btn--sm {
  --btn-pad-i: var(--sp-4);
  --btn-pad-b: var(--sp-2);
  min-height: 38px;
  font-size: var(--fs-xs);
}

/* 38px is a fine mouse target and a poor thumb one, and --sm is not a rare
   variant: it is the cookie bar's three actions, the "next page" links at the
   foot of every /about/ page and the compact donate buttons in the nav panels —
   so on a touch device it was the most-tapped button on the site sitting 6px
   under the 44px floor. Raised by pointer type rather than by width, because a
   1280px tablet has thumbs and a 400px desktop window does not. */
@media (pointer: coarse) {
  .c-btn--sm { min-height: 44px; }
}

.c-btn--lg {
  --btn-pad-i: var(--sp-6);
  --btn-pad-b: var(--sp-4);
  min-height: 56px;
  font-size: var(--fs-base);
}

.c-btn--block {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   MAGNETIC — motion.js applies the transform via --mx/--my custom properties
   so the hover translate and the magnetic pull never fight over `transform`.
   Pointer-fine devices only; motion.js does not initialise otherwise.
   -------------------------------------------------------------------------- */

.c-btn--magnetic {
  will-change: auto;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
}

/* --------------------------------------------------------------------------
   ARROW — nudges on hover. transform only.
   -------------------------------------------------------------------------- */

.c-btn__arrow {
  display: inline-block;
  transition: transform var(--d-fast) var(--e-out);
}

.c-btn:hover .c-btn__arrow { transform: translateX(3px); }