/* ── Buttons — .btn-arrow (pill + circle-arrow) and .btn-link (text + line-arrow) ──
   Both theme their colours through CSS vars so a Code module can override base
   and hover inline — no new class needed. The arrow glyph is a CSS mask on
   ::after (coloured by the var), so the markup is just the link + label. */


/* ── .btn-arrow — orange pill, label + outlined circle-arrow ──────────
   Overridable vars: --btn-bg/--btn-hover-bg (background),
   --btn-text/--btn-hover-text (label), --btn-icon/--btn-hover-icon (circle+arrow).
   Label font/size comes from the label's own type class (body-md/body-lg…). */
.btn-arrow {
  --btn-bg   : var(--orange-2);
  --btn-text : var(--blue-1);
  --btn-icon : var(--blue-1);
  --btn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3Cpath d='M7.5 12H15.5M12.5 9L15.5 12L12.5 15'/%3E%3C/svg%3E");

  display: inline-flex;
  align-items: center;
  gap: 1.25rem;                          /* label → circle */
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.75rem 1.5rem 0.75rem 2rem;  /* .75rem top/bottom (→ .5rem mobile); circle sits in the right padding */
  border-radius: 100px;
  transition: background-color 0.2s ease, color 0.2s ease,
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-arrow__label { color: inherit; }

/* circle-arrow icon — coloured by --btn-icon */
.btn-arrow::after {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--btn-icon);
  -webkit-mask: var(--btn-glyph) center / contain no-repeat;
          mask: var(--btn-glyph) center / contain no-repeat;
}

/* hover — colour swap (all overridable inline) + a simple press-down */
.btn-arrow:hover {
  background: var(--btn-hover-bg,   var(--btn-bg));
  color:      var(--btn-hover-text, var(--btn-text));
  transform: scale(0.96);
  transition: transform 0.12s ease-out, background-color 0.2s ease, color 0.2s ease;
}
.btn-arrow:active { transform: scale(0.94); }
.btn-arrow:hover::after { background-color: var(--btn-hover-icon, var(--btn-icon)); }

/* opt-in: let the label wrap instead of staying single-line (max-width keeps it
   inside its column so it wraps rather than overflows). Use as: class="btn-arrow btn-arrow--wrap". */
.btn-arrow--wrap { white-space: normal; max-width: 100%; }

/* header variant — flush to the nav's right edge on desktop (rounded left, flat
   right); full pill on tablet/mobile. Colour-only hover, NO press-down. */
.btn-arrow--header { border-radius: 100px 0 0 100px; }
.btn-arrow--header:hover  { background: var(--btn-hover-bg, var(--orange-3)); transform: none; }
.btn-arrow--header:active { transform: none; }

/* tablet/mobile — tighter top/bottom padding; header button becomes a full pill */
@media (max-width: 980px) {
  .btn-arrow { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .btn-arrow--header { border-radius: 100px; }
}


/* ── .btn-link — text link + bare line-arrow that slides right on hover ─────
   Themeable via one colour (label + arrow move together): --btn-text/--btn-hover-text.
   Label font/size comes from the label's own type class (body-lg/body-md…). */
.btn-link {
  --btn-text : var(--blue-1);
  --btn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 6H19.5M14.5 1L19.5 6L14.5 11'/%3E%3C/svg%3E");

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;                           /* label → arrow */
  color: var(--btn-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.btn-link__label { color: inherit; }

.btn-link::after {
  content: "";
  flex: none;
  width: 1.375rem;
  height: 0.75rem;
  background-color: var(--btn-text);
  -webkit-mask: var(--btn-glyph) center / contain no-repeat;
          mask: var(--btn-glyph) center / contain no-repeat;
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.btn-link:hover        { color: var(--btn-hover-text, var(--btn-text)); }
.btn-link:hover::after {
  background-color: var(--btn-hover-text, var(--btn-text));
  transform: translateX(0.35rem);        /* arrow slides right */
}


/* reduced motion — keep the colour swap, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .btn-arrow:hover, .btn-arrow:active,
  .btn-link:hover::after { transform: none; }
}