/* rc-buttons.css — rebrand CTA buttons (M5). Values sampled from Figma "Button States"
   board 17:59 (8er74ZIVSXSuQ4j8kjPHxU) 2026-08-04; tokens from rc-brand.css.
   GATED with rc-brand (RC_REBRAND_ENV / rc_rebrand=1 cookie) — see routinecos-styles.php.

   Figma spec: 192×44 fixed, square corners, uppercase Jost SemiBold 11/14 +3% label.
   Deviations (charter-approved):
   - fluid/min-width instead of fixed 192px (real labels like "SHOP VANILLA CASHMERE & OAK"
     wrap/clip at 192px);
   - active 4px #FF867F border rendered as INSET box-shadow (Figma draws an outside stroke,
     which would shift layout on click).
   Note: the board's "CTA 3 Button Red" frames are mislabeled annotation headers — only two
   CTA component sets exist (CTA1 red, CTA2 white). */

.rc-btn.rc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(192px * var(--rc-scale));   /* box metrics track the --rc-scale dial (rc-brand.css) */
	min-height: calc(44px * var(--rc-scale));
	padding: 0 calc(20px * var(--rc-scale));
	border: 0;
	border-radius: 0;
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-semibold);
	font-size: var(--rc-text-teaser-size);
	line-height: var(--rc-text-teaser-lh);
	letter-spacing: var(--rc-text-teaser-track);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.rc-btn.rc-btn:focus-visible {
	outline: 2px solid var(--rc-navy);
	outline-offset: 2px;
}

/* Legacy theme carries `a:focus { color:#ef4036 !important }` (style.css). On anchor-based .rc-btn
   CTAs it repaints the label red while the button is pressed/focused (e.g. mouse-down then drag
   out), giving red-on-red on the red states (V4 feedback 2026-08-26). <button> CTAs — the footer
   Sign Up — never match `a:focus`, which is why they're unaffected. Re-assert the label colour
   with !important + a type/class selector so it out-weighs the legacy important rule.
   Primary is red-bg in every state → label always white. */
a.rc-btn.rc-btn--primary:hover,
a.rc-btn.rc-btn--primary:focus,
a.rc-btn.rc-btn--primary:focus-visible,
a.rc-btn.rc-btn--primary:active {
	color: var(--rc-white) !important;
}
/* Secondary is white-bg / red-label at rest (keep that on plain focus); only the hover + active
   states flip to the red background, so force the label white there. */
a.rc-btn.rc-btn--secondary:hover,
a.rc-btn.rc-btn--secondary:active {
	color: var(--rc-white) !important;
}

/* ---- CTA 1 — red ---- */
.rc-btn.rc-btn--primary {
	background: var(--rc-btn-red);
	color: var(--rc-white);
}
.rc-btn.rc-btn--primary:hover {
	background: var(--rc-btn-red-hover);
	color: var(--rc-white);
}
.rc-btn.rc-btn--primary:active,
.rc-btn.rc-btn--primary.is-active {
	background: var(--rc-btn-red-hover);
	box-shadow: inset 0 0 0 4px var(--rc-btn-active-border) !important; /* beats global `*{box-shadow:none!important}` */
}
.rc-btn.rc-btn--primary:disabled,
.rc-btn.rc-btn--primary.is-inactive {
	background: var(--rc-btn-inactive);
	color: var(--rc-white);
	cursor: default;
	pointer-events: none;
}

/* ---- CTA 2 — white (1px red outline + red label at rest; red states match CTA 1) ----
   box-shadow carries the outline and must be !important to beat a global
   `*{box-shadow:none!important}` reset (theme/snippet); specificity then wins. */
.rc-btn.rc-btn--secondary {
	background: var(--rc-white);
	color: var(--rc-red);
	box-shadow: inset 0 0 0 1px var(--rc-red) !important;
}
.rc-btn.rc-btn--secondary:hover {
	background: var(--rc-btn-red-hover);
	color: var(--rc-white);
	box-shadow: none !important;
}
.rc-btn.rc-btn--secondary:active,
.rc-btn.rc-btn--secondary.is-active {
	background: var(--rc-btn-red-hover);
	color: var(--rc-white);
	box-shadow: inset 0 0 0 4px var(--rc-btn-active-border) !important;
}
.rc-btn.rc-btn--secondary:disabled,
.rc-btn.rc-btn--secondary.is-inactive {
	background: var(--rc-btn-inactive);
	color: var(--rc-white);
	box-shadow: none;
	cursor: default;
	pointer-events: none;
}