/**
 * Kerrigan — Global button system
 *
 * Derived from every button instance in pages/homepage/figma/section-specs.json
 * and spec.md. Flat hyphenated variants, applied alongside `.btn`.
 *
 * Section stylesheets may set a button's POSITION and OUTER SPACING only.
 * Appearance (bg, border, radius, padding, type, hover) lives here.
 *
 * NOTE ON RADIUS: every solid CTA in this design reports borderRadius "0px".
 * The 25/30 radii in the token set belong to avatar circles and the round
 * slider arrows, not to the CTA buttons. `.btn` is therefore square.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Label-to-arrow gap. Every CTA in the design measures 15px from the end of
	 * the label to the arrow's ink; the arrow ships in a 12px box with a 1px
	 * inset path (see .btn-arrow below), so 14 here renders the designed 15.
	 * Surveyed across every Button frame in the .fig: 15 everywhere except the
	 * header CTA (11) and the hero submit (16). */
	gap: 14px;
	border: 0;
	border-radius: var(--radius-0);

	/* Default size = the most common instance: hero form submit + CTA banner.
	 * Figma: Roboto 18 / 500, padding 20px 60px. */
	padding: var(--space-20) var(--space-60);
	background: transparent;
	color: inherit;
	font-family: var(--font-body);
	font-size: var(--fs-18);
	font-weight: 500;
	line-height: var(--lh-18-20);
	text-align: center;
	text-decoration: none;
	transition: var(--transition);
	cursor: pointer;
	appearance: none;
}

/* -------------------------------------------------------------------
 * .btn-primary — solid green, white label.
 * Used by: header CTA, hero form submit, CTA banner, intro (06).
 * Figma: bg #01963A, text #FFFFFF.
 * ------------------------------------------------------------------- */
.btn-primary {
	background-color: var(--primary-green);
	color: var(--white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--primary-black);
	color: var(--white);
}

/* Exceptions to the black hover, for buttons whose ground is already black.
 * They are listed individually rather than driven off one "on dark" variant,
 * because the call is not the same everywhere black meets a green button: the
 * homepage's transparent header CTA and its hero form submit sit on black and
 * were both signed off with the standard black hover, while the three below
 * were not. Each is a decision, not a rule.
 *
 *   - the black CTA banner (Get a Quote, Metal Roofs)
 *   - the header CTA on every inner page, where the bar is solid #010101
 *     (the homepage's is transparent over the hero and keeps black)
 *   - the warranty cards band (Warranties section 3), black behind a
 *     "LEARN MORE" button whose black hover read as the button vanishing
 *
 * All of them resolve to the same white-pill-with-green-label that
 * `.btn-white` / `.btn-ghost` use on the green CTA band. */
.cta-banner.section-black .btn-primary:hover,
.cta-banner.section-black .btn-primary:focus-visible,
.warranty-cards.section-black .btn-primary:hover,
.warranty-cards.section-black .btn-primary:focus-visible,
.site-header--default .btn-primary:hover,
.site-header--default .btn-primary:focus-visible {
	background-color: var(--white);
	color: var(--primary-green);
}

/* -------------------------------------------------------------------
 * .btn-bold — the 700-weight, 5% tracked, uppercase voice.
 * Used by: intro (06) "LEARN MORE ABOUT US", services cards "LEARN MORE".
 * Figma: Roboto 18 / 700, letter-spacing 5%, uppercase, padding 20px 40px.
 * ------------------------------------------------------------------- */
.btn-bold {
	padding: var(--space-20) var(--space-40);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------
 * .btn-link — transparent, green label, no horizontal padding.
 * Used by: services cards "LEARN MORE" (with .btn-bold).
 * Figma: text #01963A, no background, padding 20px 0.
 * Declared after .btn-bold so the zero inline padding wins.
 *
 * Top only, at the developer's instruction: the 20 is the gap above the label
 * (below the rule the cards draw there), and a matching 20 underneath was
 * pushing every card that ends on this link 20px taller than it needs to be.
 * ------------------------------------------------------------------- */
.btn-link {
	gap: 9px; /* the card text link measures 10 to the arrow ink */
	padding: var(--space-20) 0 0;
	background: transparent;
	color: var(--primary-green);
}

.btn-link:hover,
.btn-link:focus-visible {
	background: transparent;
	color: var(--primary-black);
}

/* -------------------------------------------------------------------
 * .btn-sm — compact header CTA.
 * Figma: Roboto 16 / 700, uppercase, padding 15px 30px, height 50px.
 * ------------------------------------------------------------------- */
.btn-sm {
	gap: 10px; /* header CTA measures 11 to the arrow ink */
	padding: var(--space-15) var(--space-30);
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------
 * .btn-compact — the service-page CTA box.
 * Every button on Residential Roofing ("REQUEST SERVICE", "VIEW FULL
 * GALLERY", "CONTACT US", "SUBMIT") measures 50px tall with 15/30 padding
 * and an 18/700 uppercase label at 5% tracking. Pair with .btn-bold for the
 * voice; this rule only owns the box.
 * ------------------------------------------------------------------- */
.btn-compact {
	padding: var(--space-15) var(--space-30);
	line-height: var(--lh-18-20);
}

/* -------------------------------------------------------------------
 * .btn-white / .btn-ghost — the pair used on the full-bleed CTA band,
 * where a green fill would disappear into the gradient.
 * Figma: "GET INSTANT QUOTE" is #FFFFFF on green text, "SEE FINANCING
 * OPTIONS" is a 1px white outline with a white label.
 * ------------------------------------------------------------------- */
.btn-white {
	background-color: var(--white);
	color: var(--primary-green);
}

/* Stays white on hover. Inverting it to a green fill put a green pill on the
 * green CTA band — the very thing the note above says this pair exists to
 * avoid — so the button all but vanished under the cursor. The label deepens to
 * the overlay green and `.btn-arrow` moves the arrow, which is the feedback;
 * `.btn-ghost` resolves to the same white-pill-with-green-label on hover, so
 * the two read as a matched pair. */
.btn-white:hover,
.btn-white:focus-visible {
	background-color: var(--white);
	color: var(--overlay-green);
}

.btn-ghost {
	/* Figma draws this outline with strokeAlign INSIDE, so the 1px must come out
	 * of the padding or the button lands 2px taller and wider than its solid
	 * twin (design: both 49x, 274 and 315 wide). */
	padding: 14px 29px;
	border: 1px solid var(--white);
	background: transparent;
	color: var(--white);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
	background-color: var(--white);
	color: var(--primary-green);
}

/* -------------------------------------------------------------------
 * .btn-row — horizontal group of CTAs, used wherever a block renders a
 * button repeater rather than a single link.
 * ------------------------------------------------------------------- */
.btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-20);
}

/* -------------------------------------------------------------------
 * .btn-arrow — trailing ↗ glyph. Present on every CTA in the design
 * (header, hero submit, CTA banner, intro, services cards).
 * ------------------------------------------------------------------- */
/**
 * The arrow is a constant 10x10 in Figma regardless of button size or label
 * — verified pixel-identical against the 1:1 design export across all five
 * CTA variants. It must NOT be em-relative: the SVG scales as a unit, so a
 * larger box also thickens the 2px stroke. At the previous 1em (16px) the
 * ink coverage was 2.94x the design's, which read as a heavier, blockier
 * arrow.
 */
.btn-arrow .btn-arrow-icon {
	flex: 0 0 auto;
	/* 12px box, 1px inset path — the visible ink stays the designed 10x10
	 * while the round stroke caps clear the edge. Still NOT em-relative. */
	width: 12px;
	height: 12px;
	transition: var(--transition);
}

.btn-arrow:hover .btn-arrow-icon,
.btn-arrow:focus-visible .btn-arrow-icon {
	transform: translate(2px, -2px);
}

/* .btn-round was the circular icon button the slider arrows were built from.
 * Both carousels now share one arrow component — .slider-arrow in
 * css/components/slider-arrows.css, driven by the --slider-arrow-* tokens — and
 * nothing else on the site used it, so the variant is gone. Its black hover was
 * the reason the team slider's arrows did not match the testimonials block's.
 */

/* .btn-on-dark used to invert the header CTA's hover to white so it stayed
 * legible over the hero video. It now takes the standard .btn-primary black
 * hover like every other button, so the variant has no rules left and the class
 * has been dropped from the markup. The one deliberate exception is the black
 * CTA banner — see .cta-banner.section-black above. */

@media (max-width: 767px) {

	.btn {
		/* 16 at the developer's instruction. --fs-18 floors at 17, which is
		 * still wide for a two-line label in a stacked column. */
		padding: var(--space-15) var(--space-30);
		font-size: 16px;
	}

	.btn-bold {
		padding: var(--space-15) var(--space-25);
	}

	/* Bottom stays 0 here too, or the link would regain the inset below 767
	 * that the base rule deliberately drops. */
	.btn-link {
		padding: var(--space-15) 0 0;
	}
}

/**
 * Label-to-arrow gap, measured per context from the design. The base .btn
 * gap is 10px; these override where Figma differs.
 */
/* Selectors match each real class combination exactly, so no two rules of
 * equal specificity fight over the same button. */
.btn-primary.btn-sm.btn-arrow {
	gap: 11px; /* header "GET A FREE QUOTE" */
}

.btn-bold.btn-link.btn-arrow {
	gap: 12px; /* service card "LEARN MORE" */
}

.btn-primary.btn-bold.btn-arrow {
	gap: 15px; /* intro "LEARN MORE ABOUT US" */
}

.btn-primary.btn-arrow {
	gap: 16px; /* CTA banner "GET MY ESTIMATE" */
}