/* =========================================================================
   Boyle Built — Shared Button System (interior pages)

   Extracted from the visual language already established by the homepage
   buttons (.hero__button, .cta-banner__button, .guide-card__button,
   .service-card__action): font-body 700 weight, 11px uppercase, 2px
   radius (var(--radius-button)), focus-visible ring. This file does NOT
   replace or restyle any of those existing classes — they stay exactly as
   approved. It exists so new interior components (Internal Hero,
   Consultation CTA Strip, and future interior page content) share ONE
   button implementation instead of each redefining its own.

   Rendered via boyle_built_render_button() in inc/template-helpers.php.

   Variants:
     .btn--primary       filled olive/primary-green (same colour as every
                          existing "Schedule A Consultation" button)
     .btn--outline-light transparent, light border + text — for use over a
                          dark/photo background (same treatment as the
                          existing .hero__button--secondary)
     .btn--outline-dark  transparent, dark border + text — for use on a
                          light background (new: no light-background
                          secondary button existed before this phase)
     .btn--outline-gold  transparent, gold border + text — for use on a
                          light background where the action is gold-
                          accented rather than the primary olive/ink
                          treatment (Phase I8, confirmed by the About
                          page's "Our Process" / "Meet the Team" links)
     .btn--text-arrow    text + trailing arrow icon, reproduces the
                          existing .service-card__action pattern exactly
     .btn--download       filled gold, matches .guide-card__button exactly

   icon='download' (assets/icons/resource-download.svg, added Phase I2 from
   the actual Buying Guide Figma frame) pairs with EITHER variant. Note the
   Buying Guide's own "Download the Guide (PDF)" button is .btn--primary
   with icon='download', not .btn--download — the real Figma evidence
   showed that action in the olive/primary colour, not gold. .btn--download
   (gold) is kept for parity with the homepage's .guide-card__button but
   wasn't the right fit for this particular Buying Guide button.
   ========================================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1.5px solid transparent;
	border-radius: var(--radius-button);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	padding: 14px 24px;
	transition: background-color 150ms ease, border-color 150ms ease, filter 150ms ease;
}

.btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.btn__icon {
	display: block;
	width: 12px;
	height: 12px;
	transition: transform 150ms ease;
}

/* -------------------------------------------------------------------------
   Variants
   ------------------------------------------------------------------------- */

.btn--primary {
	background-color: var(--color-primary-green);
	color: var(--color-text-light);
}

.btn--primary:hover {
	filter: brightness(0.9);
}

.btn--outline-light {
	background-color: transparent;
	border-color: var(--color-text-light);
	color: var(--color-text-light);
}

.btn--outline-light:hover {
	background-color: rgba(250, 248, 245, 0.12);
}

.btn--outline-dark {
	background-color: transparent;
	border-color: var(--color-ink);
	color: var(--color-ink);
}

.btn--outline-dark:hover {
	background-color: rgba(28, 32, 24, 0.08);
}

.btn--outline-gold {
	background-color: transparent;
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.btn--outline-gold:hover {
	background-color: rgba(143, 127, 87, 0.08);
}

.btn--download {
	background-color: var(--color-gold);
	color: var(--color-text-light);
}

.btn--download:hover {
	filter: brightness(0.92);
}

.btn--text-arrow {
	padding: 0;
	border: none;
	background: none;
	gap: 6px;
	color: var(--color-ink);
}

.btn--text-arrow:hover .btn__icon {
	transform: translateX(2px);
}

/* "on-dark" modifier: recolors the text-arrow variant (text + the
   otherwise dark-stroked arrow-right.svg icon) for use over a dark/photo
   background. The icon recolor uses a CSS filter rather than a second
   icon export — there's no light-stroke version of arrow-right.svg yet;
   see the Phase I1 report. */
.btn--text-arrow.btn--on-dark {
	color: var(--color-text-light);
}

.btn--text-arrow.btn--on-dark .btn__icon {
	filter: brightness(0) invert(1);
}

/* "gold" modifier (Phase I7): recolors the text-arrow variant's text to
   gold for the Projects Featured Project's "VIEW PROJECT" link — pairs
   with icon='arrow-gold' (assets/icons/arrow-right-gold.svg), which is
   already gold, so no filter is needed on the icon itself. */
.btn--text-arrow.btn--gold {
	color: var(--color-gold);
}

/* -------------------------------------------------------------------------
   Tablet (601–1024px)
   ------------------------------------------------------------------------- */

@media (min-width: 601px) {
	.btn {
		padding: 13px 32px;
	}

	.btn--text-arrow {
		padding: 0;
	}
}

/* -------------------------------------------------------------------------
   Desktop (1025px+)
   ------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.btn {
		padding: 15px 40px;
	}

	.btn--text-arrow {
		padding: 0;
	}
}