/* =========================================================================
   6 · BUTTONS — primary, gold, ghost, link-arrow
   Reference: V4-BUILD-SPEC §3.6 + NGO-DESIGN-RESEARCH "Donate CTA" patterns
   ========================================================================= */

.jj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-6);
	font-family: var(--jj-font-sans);
	font-weight: 600;
	font-size: var(--fs-base);
	letter-spacing: 0.02em;
	border-radius: var(--radius-md);
	text-decoration: none;
	transition:
		background var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
	border: 1.5px solid transparent;
	white-space: nowrap;
	min-height: 48px;
	cursor: pointer;
}

.jj-btn--sm {
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-sm);
	min-height: 40px;
}
.jj-btn--lg {
	padding: var(--sp-4) var(--sp-8);
	font-size: var(--fs-md);
	min-height: 56px;
}

/* Gold — the donate CTA color */
.jj-btn--gold {
	background: var(--jj-accent-gold);
	color: var(--jj-text);
}
.jj-btn--gold:hover,
.jj-btn--gold:focus-visible {
	background: var(--jj-accent-gold-hover);
	color: var(--jj-text);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

/* Primary — teal */
.jj-btn--primary {
	background: var(--jj-primary);
	color: #fff;
}
.jj-btn--primary:hover,
.jj-btn--primary:focus-visible {
	background: var(--jj-primary-deep);
	color: #fff;
	transform: translateY(-1px);
}

/* Ghost — outline on light backgrounds */
.jj-btn--ghost {
	background: transparent;
	color: var(--jj-primary);
	border-color: var(--jj-primary);
}
.jj-btn--ghost:hover,
.jj-btn--ghost:focus-visible {
	background: var(--jj-primary);
	color: #fff;
}

/* Ghost-light — outline on dark backgrounds (hero, primary section) */
.jj-btn--ghost-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}
.jj-btn--ghost-light:hover,
.jj-btn--ghost-light:focus-visible {
	background: #fff;
	color: var(--jj-primary);
	border-color: #fff;
}

/* Block — full-width (mobile menu CTA, sticky bottom bar) */
.jj-btn--block { width: 100%; }

/* Link-arrow — text link with → icon */
.jj-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 600;
	color: var(--jj-primary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition:
		border-color var(--dur-fast) var(--ease),
		gap var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}
.jj-link-arrow:hover,
.jj-link-arrow:focus-visible {
	border-color: var(--jj-primary);
	gap: var(--sp-3);
}

.jj-link-arrow--white {
	color: #fff;
}
.jj-link-arrow--white:hover,
.jj-link-arrow--white:focus-visible {
	color: #fff;
	border-bottom-color: var(--jj-accent-gold);
}

/* Trust microcopy — small note under CTAs */
.jj-trust-microcopy {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--jj-muted);
}
.jj-trust-microcopy--white {
	color: rgba(255, 255, 255, 0.85);
}