/*
  Button — Website Refresh 2026 1e (Figma), Component page, "Button"
  frame (Button Content, Button).
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=20-226

  Requires tokens.css and icons.css to be loaded first.

  Scope: covers Button Content, Button (all Style x Colour x Size
  combinations that exist in Figma), and Promo CTA Button Pair.
  Pagination was moved out of this Figma frame into its own, so it's
  out of scope here too — a separate file when that's tackled.

  Style and Colour are NOT fully orthogonal in Figma — e.g. Outline's
  "Neutral" colour is a different treatment to Solid's "Neutral", and
  Outline has no Purple option at all. So colour modifiers are named
  per Style+Colour pair (--solid-purple, --outline-neutral, etc.)
  rather than composed from separate style/colour classes, matching
  what Figma actually defines instead of inventing untested
  combinations.

  Every Default/Hover/Active value below for every Style x Colour
  combination that exists in Figma has now been confirmed directly
  from the file — nothing here is guessed. Worth remembering for next
  time: several colours disproved a mechanical "darken on hover"
  assumption along the way (Solid/White hovers to a purple tint,
  Icon Only/Primary goes 800(default) -> 600(hover, lighter) ->
  700(active), Outline/White + Navigation/White + Pricing/White all
  flip their text colour at Active once their background goes solid
  white), which is why each state was pulled individually rather than
  computed from a formula.
*/

.rs-button {
  /* Explicit rather than relying on tokens.css's universal
     "*, *::before, *::after { box-sizing: border-box; }" reset — that
     rule's selector has the lowest possible specificity, so it's an
     easy one for a legacy site-wide rule to beat. Without this, the
     12px vertical padding above adds on top of the 48px height
     instead of being included within it, rendering at 72px tall
     (48 + 12 + 12) instead of the intended 48px — confirmed via
     DevTools on the live site, where exactly that math played out. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: var(--space-48);
  padding: var(--space-12) var(--space-16);
  border: none;
  border-radius: var(--space-6);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rs-button__icon {
  width: 20px;
  height: 20px;
}

/* ---------- Sizes ---------- */
/* Default (above) is the implicit base. Large was only sampled on
   White, but size properties (padding/gap/font-size) are layout, not
   colour, so treated as universal across colours. Small was only
   sampled on Outline/Neutral — note it also switches font-weight
   from SemiBold (600) to Medium (500), unlike Large. */

.rs-button--large {
  height: auto;
  padding: var(--space-16) var(--space-20);
  gap: var(--space-8);
  font-size: 22px;
}

.rs-button--small {
  height: var(--space-36);
  padding: var(--space-8) var(--space-12);
  font-size: 14px;
  font-weight: 500;
}

/* ---------- Solid ---------- */

/* :hover/:active explicitly repeat `color` (not just background-color)
   because the legacy sitewide style.css has "a:hover { color:
   #065c80; }" — a bare class alone (.rs-button--solid-purple, 0,1,0)
   loses that specificity fight (type + pseudo-class, 0,1,1) during
   hover even though the base rule "wins" while not hovered, so the
   text was flashing to that legacy teal-blue on hover/active instead
   of staying put. Repeating color here (0,2,0) beats it outright. */
.rs-button--solid-purple {
  background-color: var(--color-purple-700);
  color: var(--color-purple-50);
}
.rs-button--solid-purple:hover {
  background-color: var(--color-purple-800);
  color: var(--color-purple-50);
}
.rs-button--solid-purple:active {
  background-color: var(--color-purple-900);
  color: var(--color-purple-50);
}

.rs-button--solid-green {
  background-color: var(--color-green-300);
  color: var(--color-blue-900);
}
.rs-button--solid-green:hover {
  background-color: var(--color-green-400);
  color: var(--color-blue-900);
}
.rs-button--solid-green:active {
  background-color: var(--color-green-500);
  color: var(--color-blue-900);
}

.rs-button--solid-dark-green {
  background-color: var(--color-green-800);
  color: var(--color-green-200);
}
.rs-button--solid-dark-green:hover {
  background-color: var(--color-green-900);
  color: var(--color-green-300);
}
.rs-button--solid-dark-green:active {
  background-color: var(--color-neutral-900);
  color: var(--color-green-300);
}

.rs-button--solid-neutral {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-white-50);
}
.rs-button--solid-neutral:hover {
  background-color: var(--color-neutral-900);
}
.rs-button--solid-neutral:active {
  background-color: var(--color-neutral-black-1000);
}

.rs-button--solid-light {
  background-color: var(--color-neutral-white-50);
  color: var(--color-neutral-900);
}
.rs-button--solid-light:hover {
  background-color: var(--color-neutral-100);
}
.rs-button--solid-light:active {
  background-color: var(--color-neutral-200);
}

.rs-button--solid-white {
  background-color: var(--color-neutral-white-50);
  color: var(--color-neutral-900);
}
.rs-button--solid-white:hover {
  background-color: var(--color-purple-50);
}
.rs-button--solid-white:active {
  background-color: var(--color-purple-100);
}

.rs-button--solid-light-on-purple {
  background-color: var(--color-neutral-white-50);
  color: var(--color-purple-700);
}
.rs-button--solid-light-on-purple:hover {
  background-color: var(--color-purple-25);
}
.rs-button--solid-light-on-purple:active {
  background-color: var(--color-purple-50);
}

/* ---------- Outline ---------- */
/* White's Active state goes solid white and flips its text from
   white to dark neutral-900 to stay legible — same text-colour flip
   Navigation/White does below. Its border also effectively
   disappears at Active (Figma's Active instance has no border at
   all, since border and bg are the same white). */

.rs-button--outline-neutral {
  background-color: var(--color-neutral-white-50);
  color: var(--color-neutral-900);
  border: 1px solid var(--color-form-field-border);
}
.rs-button--outline-neutral:hover {
  background-color: var(--color-neutral-100);
}
.rs-button--outline-neutral:active {
  background-color: var(--color-neutral-200);
}

.rs-button--outline-light {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-900);
  border: 1px solid var(--color-form-field-border);
}
.rs-button--outline-light:hover {
  background-color: var(--color-neutral-200);
}
.rs-button--outline-light:active {
  background-color: var(--color-neutral-300);
}

/* :hover repeats `color` for the same reason solid-purple/solid-green
   do above — the legacy sitewide style.css's "a:hover { color:
   #065c80; }" otherwise wins that property during hover. */
.rs-button--outline-white {
  background-color: transparent;
  color: var(--color-neutral-white-50);
  border: 1px solid var(--color-neutral-white-50);
}
.rs-button--outline-white:hover {
  background-color: var(--color-transparency-light-20);
  color: var(--color-neutral-white-50);
}
.rs-button--outline-white:active {
  background-color: var(--color-neutral-white-50);
  border-color: var(--color-neutral-white-50);
  color: var(--color-neutral-900);
}

/* ---------- Navigation ---------- */
/* This is the inner clickable "Nav Button Content" box only (48px
   tall). Figma wraps it in an outer 72px container — presumably a
   larger hit/hover zone specific to how it sits in the nav bar, not
   part of the Button component itself, so it's left out of this
   file's scope. Includes a trailing chevron-down icon.

   Figma's Hover state on Light is literally named "Hover/Current" —
   i.e. it doubles as the "current page" indicator style, not purely
   a mouse-hover effect. White's Active state goes solid white and
   flips text to dark, same pattern as Outline/White above. */

.rs-button--navigation-light,
.rs-button--navigation-white {
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16);
  gap: var(--space-8);
}

.rs-button--navigation-light {
  background-color: transparent;
  color: var(--color-neutral-900);
}
.rs-button--navigation-light:hover,
.rs-button--navigation-light.is-current {
  background-color: var(--color-neutral-200);
}
.rs-button--navigation-light:active {
  background-color: var(--color-neutral-300);
}

.rs-button--navigation-white {
  background-color: transparent;
  color: var(--color-neutral-white-50);
}
.rs-button--navigation-white:hover {
  background-color: var(--color-transparency-dark-40);
}
.rs-button--navigation-white:active {
  background-color: var(--color-neutral-white-50);
  color: var(--color-neutral-900);
}

/* ---------- Pricing ---------- */
/* Same box shape as Navigation minus the chevron — but unlike
   Navigation, Pricing has no trailing icon to visually absorb
   Navigation's pl-16/pr-12 asymmetry (that offset exists there to
   balance the chevron's own weight), so it read as lopsided once
   actually rendered. Padding here is the plain symmetric
   var(--space-12) var(--space-16) the base .rs-button already uses,
   not a copy of Navigation's icon-specific values.

   White's Hover/Active follow the exact same pattern as Navigation/
   White (dark overlay on hover, solid white + text-colour flip on
   active).

   Light's Default sample came back as a solid white box (not
   transparent like Navigation/Light) — it's meant to blend into an
   already-white header bar until interacted with. Only that Default
   state was sampled; Hover/Active below follow Solid/Light's already-
   confirmed pattern (white -> neutral-100 -> neutral-200) since this
   is functionally the same "light surface" treatment, not
   independently sampled for Pricing specifically. */

.rs-button--pricing-white {
  background-color: transparent;
  color: var(--color-neutral-white-50);
  padding: var(--space-12) var(--space-16);
  gap: var(--space-8);
}
.rs-button--pricing-white:hover {
  background-color: var(--color-transparency-dark-40);
}
.rs-button--pricing-white:active {
  background-color: var(--color-neutral-white-50);
  color: var(--color-neutral-900);
}

.rs-button--pricing-light {
  background-color: var(--color-neutral-white-50);
  color: var(--color-neutral-900);
  padding: var(--space-12) var(--space-16);
  gap: var(--space-8);
}
.rs-button--pricing-light:hover {
  background-color: var(--color-neutral-100);
}
.rs-button--pricing-light:active {
  background-color: var(--color-neutral-200);
}

/* ---------- Icon Only ---------- */
/* Square, no text — just a centred icon. Not a simple monotonic
   darken: Primary goes 800(default) -> 600(hover, lighter) ->
   700(active) — order confirmed from Figma, not assumed. Light's
   Active state also flips to a dark bg with a light icon, so colour
   (which the icon inherits via currentColor) is overridden there
   too, not just background-color. */

.rs-button--icon-only {
  padding: 0;
}

.rs-button--icon-only.rs-button {
  height: var(--space-48);
  width: var(--space-48);
}

.rs-button--icon-only.rs-button--small {
  height: 36px;
  width: 36px;
}

.rs-button--icon-only-primary {
  background-color: var(--color-purple-800);
  color: var(--color-neutral-white-50);
}
.rs-button--icon-only-primary:hover {
  background-color: var(--color-purple-600);
}
.rs-button--icon-only-primary:active {
  background-color: var(--color-purple-700);
}

.rs-button--icon-only-light {
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-900);
}
.rs-button--icon-only-light:hover {
  background-color: var(--color-neutral-300);
}
.rs-button--icon-only-light:active {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-white-50);
}

/* ---------- Promo CTA Button Pair ---------- */
/* A Button + Text Link pairing, in two layouts. Both variants pair
   their Button with an already-confirmed Solid colour (--solid-green
   for Default, --solid-dark-green for CTA), so those classes are
   reused directly rather than duplicated. The Text Link is bolder
   (700) than Text Link's own base weight (400), and Default's link
   colour (solid neutral-900) doesn't match either of Text Link's
   existing confirmed colours (purple-700 / 80%-transparent dark) —
   it's specific to this composition, so it's set here rather than
   added as a new general-purpose Text Link modifier Figma doesn't
   actually define. CTA's link colour does match Text Link's existing
   --dark modifier, hover included, so that state carries over as-is;
   Default's link has no confirmed hover (only one static instance
   existed in Figma) and doesn't get one invented here. */

.rs-promo-cta {
  display: inline-flex;
}

.rs-promo-cta--default {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.rs-promo-cta--cta {
  align-items: center;
  justify-content: space-between;
  width: 272px;
}

.rs-promo-cta__link {
  font-weight: 700;
}

.rs-promo-cta--default .rs-promo-cta__link {
  color: var(--color-neutral-900);
}

.rs-promo-cta--cta .rs-promo-cta__link {
  color: var(--color-transparency-dark-80);
}
.rs-promo-cta--cta .rs-promo-cta__link:hover {
  color: var(--color-neutral-900);
}