/*
 * Buttons. Orange = primary/rationed accent; navy = secondary structure.
 * theme.json styles the core wp-block-button; these are the .fd-btn utilities
 * patterns/blocks use directly.
 */

.fd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85rem 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	border: 2px solid transparent;
	border-radius: var(--fd-r-md);
	cursor: pointer;
	transition: transform var(--fd-transition), background var(--fd-transition), border-color var(--fd-transition), color var(--fd-transition);
}
.fd-btn:hover { transform: translateY(-1px); }
.fd-btn:active { transform: translateY(0); }

/* Primary — the one place orange floods. Reserve for the main action. */
/* Navy text (not white) on orange: white-on-orange-500 fails WCAG AA (2.5:1);
   navy-900 on orange-500 is 6.9:1 and keeps the vibrant brand orange. */
.fd-btn--primary { background: var(--fd-orange-500); color: var(--fd-navy-900); }
.fd-btn--primary:hover { background: var(--fd-orange-400); color: var(--fd-navy-900); }

/* Secondary — navy solid. */
.fd-btn--navy { background: var(--fd-navy-800); color: var(--fd-white); }
.fd-btn--navy:hover { background: var(--fd-navy-700); color: var(--fd-white); }

/* Outline — for use on white and on navy (inherits currentColor). */
.fd-btn--outline { background: transparent; border-color: currentColor; color: var(--fd-navy-800); }
.fd-btn--outline:hover { background: var(--fd-navy-800); color: var(--fd-white); border-color: var(--fd-navy-800); }
.fd-section--navy .fd-btn--outline { color: var(--fd-white); }
.fd-section--navy .fd-btn--outline:hover { background: var(--fd-white); color: var(--fd-navy-800); border-color: var(--fd-white); }

/* Ghost — low-emphasis text action. */
.fd-btn--ghost { background: transparent; color: var(--fd-navy-700); padding-inline: 0.75rem; }
.fd-btn--ghost:hover { color: var(--fd-orange-700); transform: none; }

/* Sizes. */
.fd-btn--lg { padding: 1.05rem 2rem; font-size: var(--wp--preset--font-size--base); }
.fd-btn--sm { padding: 0.6rem 1rem; font-size: var(--wp--preset--font-size--xs); }
.fd-btn--block { width: 100%; }