/* ============================================================
 * Buttons — the canonical CTA system. Single source of truth.
 *   Variants: --primary (filled red) | --ghost (1px white border)
 *             | --outline (1px hairline — Juventus's white-edged slim CTA)
 *   Size:     --sm (compact rows / dense callouts)
 * Corners follow the site-wide --radius-md rule (rounded 2026-06-10, client).
 * Weight + line-height declared explicitly — the FC United parent leaks
 * --theme-font-button (700/19px) into <button> elements, so without these,
 * <a> CTAs and <button> CTAs render differently (2026-06-10 audit P0).
 * Extracted from site-header.css 2026-06-10 — see design/25.
 * ============================================================ */

.bulls-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* No global box-sizing reset: without border-box the 44px min-height ADDED the
	   24px vertical padding (buttons rendered ~68-76px tall — "doesn't look like a
	   button", client). border-box makes min-height the rendered height. */
	box-sizing: border-box;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-5);
	font-family: var(--ff-display);
	font-size: var(--fs-75);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: var(--radius-md);
	/* Defensive resets — the FC United parent skins <button> with fills/shadows
	   (see the site-header.css icon-rail note); keep <a> and <button> identical. */
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: background var(--motion-fast) var(--ease-out),
		color var(--motion-fast) var(--ease-out),
		border-color var(--motion-fast) var(--ease-out),
		transform var(--motion-base) var(--ease-out);
	min-height: 44px;
}

.bulls-cta-button--primary {
	background: var(--c-bulls-red);
	color: var(--c-white);
}
.bulls-cta-button--primary:hover,
.bulls-cta-button--primary:focus-visible {
	background: var(--c-bulls-red-700);
	color: var(--c-white);
	transform: translateY(-1px);
}

/* Ghost — 1px solid white edge (Juventus's live CTAs run a 1px hairline, not 2px). */
.bulls-cta-button--ghost {
	background: transparent;
	color: var(--c-white);
	border: 1px solid var(--c-white);
}
.bulls-cta-button--ghost:hover,
.bulls-cta-button--ghost:focus-visible {
	background: var(--c-white);
	color: var(--c-ink-900);
	transform: translateY(-1px);
}

/* Hairline outline — slim secondary action (match rows). No lift on hover:
   slim controls invert, they don't levitate. */
.bulls-cta-button--outline {
	background: transparent;
	color: var(--c-white);
	border: 1px solid var(--c-white-50);
}
.bulls-cta-button--outline:hover,
.bulls-cta-button--outline:focus-visible {
	background: var(--c-white);
	color: var(--c-ink-900);
	border-color: var(--c-white);
}

/* Global mobile compaction — every CTA tightens horizontal padding at ≤600px
   (ported from the old site-header.css global rule). Declared BEFORE --sm so
   the size modifier keeps precedence. */
@media (max-width: 600px) {
	/* fs-75 not fs-50: labels computed ~11.3px at small widths (M-3) */
	.bulls-cta-button { padding: var(--space-2) var(--space-3); font-size: var(--fs-75); }
}

/* Compact size — keeps a 36px floor (WCAG 2.2 target-size min is 24px). */
.bulls-cta-button--sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-50);
	min-height: 36px;
}

/* Arrow affordance removed 13 Jun (client: the → / ↗ glyphs render inconsistently
   across devices and aren't wanted). Hidden site-wide rather than editing every CTA
   markup; buttons read on their text label alone. */
.bulls-cta-button__arrow { display: none; }

.bulls-cta-button:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.bulls-cta-button,
	.bulls-cta-button__arrow { transition: none; }
}

/* ============================================================
 * A11Y-09 — FC United parent focus-ring override (systemic fix)
 *
 * The FC United parent theme injects (via body.show_outline — added
 * when keyboard navigation is first detected):
 *   body.show_outline :focus { outline: #888 dotted 1px !important }
 *   body.show_outline button … { outline: dotted thin !important }
 *
 * These !important rules override the design system's 2px solid
 * --c-focus-ring (#fb6770) ring on every interactive control, replacing
 * it with a barely-perceptible dotted 1px grey line.
 *
 * Counter-override at equal specificity + later in the cascade using
 * :focus-visible (which both targets keyboard-only focus AND is still
 * specific enough to beat the parent when declared later). Using
 * !important is unavoidable — the parent rule uses it unconditionally.
 * ============================================================ */
body.show_outline :focus-visible {
	outline: 2px solid var(--c-focus-ring) !important;
	outline-offset: 3px;
}