/**
 * Teton Troutfitters — Canonical Buttons
 *
 * The ROOT primary/secondary button styling for the whole site, derived
 * from the footer "Ready to fish the Snake River?" CTA buttons.
 *
 *   .tt-btn                 base (inline-flex, uppercase, pill radius)
 *   .tt-btn--primary        solid gold — reads on any background
 *   .tt-btn--secondary      outline — auto-flips light/dark by context
 *
 * Secondary defaults to LIGHT backgrounds (navy outline). Inside any dark
 * container it flips to a cream outline — no modifier needed. The dark
 * context is detected from the site's dark section wrappers, or add the
 * utility class .tt-on-dark to any dark ancestor.
 */

.tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--tt-font-body);
	font-size: 0.75rem;
	font-weight: var(--tt-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	padding: 0.8125rem 1.5rem;
	border-radius: var(--tt-radius-sm);
	border: 1px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ── Primary — gold on any background ─────────────────── */
.tt-btn--primary {
	background: var(--tt-gold);
	color: var(--tt-navy-dark);
	border-color: var(--tt-gold);
}
.tt-btn--primary:hover,
.tt-btn--primary:focus-visible {
	background: var(--tt-gold-hover);
	border-color: var(--tt-gold-hover);
}

/* ── Secondary — outline, LIGHT background (default) ───── */
.tt-btn--secondary {
	background: transparent;
	color: var(--tt-navy);
	border-color: rgba(11, 26, 44, 0.3);
}
.tt-btn--secondary:hover,
.tt-btn--secondary:focus-visible {
	background: var(--tt-navy);
	color: var(--tt-cream);
	border-color: var(--tt-navy);
}

/* ── Secondary — DARK background (auto-flip) ───────────── */
.tt-on-dark .tt-btn--secondary,
.tt-footer .tt-btn--secondary,
.tt-hero .tt-btn--secondary,
.tt-home__section--dark .tt-btn--secondary,
.tt-home__conditions .tt-btn--secondary,
.tt-about__section--dark .tt-btn--secondary {
	color: var(--tt-cream);
	border-color: rgba(242, 237, 226, 0.4);
}
.tt-on-dark .tt-btn--secondary:hover,
.tt-on-dark .tt-btn--secondary:focus-visible,
.tt-footer .tt-btn--secondary:hover,
.tt-footer .tt-btn--secondary:focus-visible,
.tt-hero .tt-btn--secondary:hover,
.tt-hero .tt-btn--secondary:focus-visible,
.tt-home__section--dark .tt-btn--secondary:hover,
.tt-home__section--dark .tt-btn--secondary:focus-visible,
.tt-home__conditions .tt-btn--secondary:hover,
.tt-home__conditions .tt-btn--secondary:focus-visible,
.tt-about__section--dark .tt-btn--secondary:hover,
.tt-about__section--dark .tt-btn--secondary:focus-visible {
	background: var(--tt-cream);
	color: var(--tt-navy);
	border-color: var(--tt-cream);
}

/* Focus ring for keyboard users */
.tt-btn:focus-visible {
	outline: 2px solid var(--tt-gold);
	outline-offset: 2px;
}