/* Range Pharma shared components
 *
 * Extracted from patterns that already appeared three or more times with the
 * same intent: the pill action (compounding, careers, home, product detail),
 * the bordered card (compounding capability + dosage-form cards, careers
 * openings, product cards), the label chip (compounding ingredients, product
 * suitable-for tags) and the icon tile.
 *
 * Prefixed `rp-` and never applied to Elementor markup implicitly, so adopting
 * a component is always an explicit change to a page.
 */

/* ---- action -------------------------------------------------------------
 * Adoption rule: an element takes `rp-btn` INSTEAD of `elementor-button`, never
 * alongside it. Elementor paints its buttons from per-post sheets with selectors
 * like `.elementor-18550 .elementor-element.elementor-element-faa0dc8
 * .elementor-button` — four classes, which no sane component selector should try
 * to outrank. Dropping the widget class is both the fix and the point: the
 * scraped layer loses a page every time a component replaces it.
 */
.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--rp-target);
  padding: 14px 26px;
  border: 0;
  border-radius: var(--rp-r-pill);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rp-dur-fast) var(--rp-ease),
              background var(--rp-dur-fast),
              color var(--rp-dur-fast),
              box-shadow var(--rp-dur-fast);
}

.rp-btn--solid {
  background: var(--rp-ink);
  color: var(--rp-paper);
}
.rp-btn--solid:hover {
  background: var(--rp-blue-deep);
  color: var(--rp-white);
  transform: translateY(-2px);
  box-shadow: var(--rp-shadow-action);
}

.rp-btn--ghost {
  background: transparent;
  color: var(--rp-ink);
  box-shadow: inset 0 0 0 1.5px var(--rp-ink);
}
.rp-btn--ghost:hover {
  background: var(--rp-ink);
  color: var(--rp-paper);
  transform: translateY(-2px);
}

.rp-btn--quiet {
  background: var(--rp-white);
  color: var(--rp-ink);
  box-shadow: inset 0 0 0 1px var(--rp-line);
}
.rp-btn--quiet:hover {
  background: var(--rp-ink);
  color: var(--rp-white);
  box-shadow: none;
  transform: translateY(-2px);
}

/* On a dark ground — the homepage hero sits on #0f213a — the ink-filled and
   ink-outlined variants disappear into it. These two are the same shapes with
   the values inverted. */
.rp-btn--light {
  background: var(--rp-white);
  color: var(--rp-ink);
}
.rp-btn--light:hover {
  background: var(--rp-blue-soft);
  color: var(--rp-blue-deep);
  transform: translateY(-2px);
}

.rp-btn--ghost-light {
  background: transparent;
  color: var(--rp-white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
}
.rp-btn--ghost-light:hover {
  background: var(--rp-white);
  color: var(--rp-ink);
  box-shadow: inset 0 0 0 1.5px var(--rp-white);
  transform: translateY(-2px);
}

/* Scraped Elementor buttons wrap their label in .elementor-button-text, which
   carries its own colour from the widget CSS. The component owns the colour; the
   label inherits it. */
.rp-btn .elementor-button-content-wrapper,
.rp-btn .elementor-button-text,
.rp-btn .elementor-button-icon { color: inherit; }

/* The arrow is decorative and always marked aria-hidden in markup. */
.rp-btn .rp-arw,
.rp-link .rp-arw { transition: transform var(--rp-dur-fast); }
.rp-btn:hover .rp-arw,
.rp-link:hover .rp-arw { transform: translateX(4px); }

/* ---- underlined text link ---------------------------------------------- */
.rp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--rp-target);
  padding-block: 8px;
  color: var(--rp-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #c9c9c9;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--rp-dur-fast);
}
.rp-link:hover { text-decoration-color: var(--rp-ink); }

/* ---- card -------------------------------------------------------------- */
.rp-card {
  background: var(--rp-card);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r-lg);
  padding: clamp(22px, 2.6vw, 30px);
  transition: transform var(--rp-dur) var(--rp-ease),
              border-color var(--rp-dur),
              box-shadow var(--rp-dur);
}
.rp-card--lift:hover {
  transform: translateY(-3px);
  border-color: var(--rp-ink);
  box-shadow: var(--rp-shadow-card);
}

/* ---- chip: a label, never a control ----------------------------------- */
.rp-chip {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--rp-line-soft);
  border-radius: var(--rp-r-pill);
  background: var(--rp-paper-2);
  color: var(--rp-ink-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
}

/* ---- icon tile -------------------------------------------------------- */
.rp-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--rp-r-md);
  background: var(--rp-blue-soft);
  color: var(--rp-blue-deep);
}
.rp-tile--mint {
  background: var(--rp-mint-soft);
  color: var(--rp-mint);
}

/* ---- eyebrow ---------------------------------------------------------- */
.rp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rp-blue-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.rp-eyebrow::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background: var(--rp-blue);
}

/* ---- visually hidden, but read aloud ---------------------------------- */
.rp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Matched to the base rules above, which set these transitions. */
  .rp-btn,
  .rp-link,
  .rp-card,
  .rp-btn .rp-arw,
  .rp-link .rp-arw { transition: none; }
  .rp-btn:hover,
  .rp-card--lift:hover { transform: none; }
}