/* ── Buttons — the .btn-* pill system (BASE ONLY) ──────────────────
   Seed for the target's css/global/buttons.css when the site doesn't
   have the system yet. Every pill = .btn-pill + a per-site variant
   class setting --btn-bg/--btn-fg from the SITE'S OWN tokens, e.g.:

     .btn-book     { --btn-bg: var(--accent);  --btn-fg: var(--white); }
     .btn-pharmacy { --btn-bg: var(--light);   --btn-fg: var(--dark);  }

   Variants are per-site by design — define them against the target's
   style.css :root palette; never copy another client's variants. */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 1.5625rem;
  padding: 0.75rem 1.25rem;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease;
}
.btn-pill:hover {
  background: var(--btn-hover-bg, color-mix(in srgb, var(--btn-bg) 86%, #000));
  color: var(--btn-hover-fg, var(--btn-fg));
  transform: scale(0.96);
  /* clean press-in; the springy base transition only plays on release */
  transition: transform 0.15s ease-out, background-color 0.2s ease, color 0.2s ease;
}
.btn-pill:active { transform: scale(0.93); }

/* ── Size modifier ── */
.btn-hug { width: auto; }   /* pill hugs its label */

/* ≤980px — mobile pill metrics */
@media (max-width: 980px) {
  .btn-pill { padding: 0.625rem 1.25rem; letter-spacing: 0.15rem; }
}

/* reduced motion: keep the color swap, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .btn-pill:hover,
  .btn-pill:active { transform: none; }
}

/* ── Header Book Now — square block, full top-bar height, flush to the right edge ── */
.btn-header-book {
  --btn-bg: var(--medium-red);
  --btn-fg: var(--light-cream);
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0.5rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sequoia);
  font-weight: 700;
  font-size: clamp(1rem, 0.861rem + 0.591vw, 1.5rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s ease;
  /* swipe-fill hover shared with the block CTAs below; tan reads on the dark-brown top bar */
  --btn-sweep-bg: var(--tan);
  --btn-sweep-fg: var(--dark-brown);
}

/* ── Block CTAs — square Book Now / Call Us pair ──
   Base = dark fills for light backgrounds (interior hero).
   --light = reversed fills for use over a photo or dark panel (home hero, global CTA).
   Figma Button L: Sequoia Bold 40px, 76px tall, 1rem/2rem padding desktop;
   24px, 52px tall, 0.25rem/1.5rem padding mobile. Size scales fluidly 375→1728. */
.btn-book-now,
.btn-call-us {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.75rem;
  padding: 1rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sequoia);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.223rem + 1.183vw, 2.5rem);
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s ease;
}
/* --btn-sweep-* = the fill that swipes in from the left on hover, and the label colour over it */
.btn-book-now        { --btn-bg: var(--medium-red);  --btn-fg: var(--light-cream); --btn-sweep-bg: var(--dark-brown); --btn-sweep-fg: var(--light-cream); }
.btn-call-us         { --btn-bg: var(--dark-brown);  --btn-fg: var(--light-cream); --btn-sweep-bg: var(--medium-red); --btn-sweep-fg: var(--light-cream); }
.btn-book-now--light { --btn-bg: var(--tan);         --btn-fg: var(--dark-brown);  --btn-sweep-bg: var(--medium-red); --btn-sweep-fg: var(--light-cream); }
.btn-call-us--light  { --btn-bg: var(--light-cream); --btn-fg: var(--dark-brown);  --btn-sweep-bg: var(--medium-red); --btn-sweep-fg: var(--light-cream); }

/* ── Swipe-right hover — fill slides in from the left under the label ── */
.btn-book-now::before,
.btn-call-us::before,
.btn-header-book::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-sweep-bg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-book-now:hover,
.btn-call-us:hover,
.btn-header-book:hover,
.btn-book-now:focus-visible,
.btn-call-us:focus-visible,
.btn-header-book:focus-visible { color: var(--btn-sweep-fg); }
.btn-book-now:hover::before,
.btn-call-us:hover::before,
.btn-header-book:hover::before,
.btn-book-now:focus-visible::before,
.btn-call-us:focus-visible::before,
.btn-header-book:focus-visible::before { transform: scaleX(1); }

/* reduced motion: keep the colour change, drop the sweep */
@media (prefers-reduced-motion: reduce) {
  .btn-book-now::before,
  .btn-call-us::before,
  .btn-header-book::before { transition: none; }
}

@media (max-width: 980px) {
  .btn-book-now,
  .btn-call-us { min-height: 3.25rem; padding: 0.25rem 1.5rem; }
}

/* ── Arrow link — label + arrow; --box draws the bordered outline, --light reverses for dark panels ──
   Figma Button M: FreightText Pro Medium 24px desktop / 20px mobile, 0.5rem/1.5rem
   padding, 1px border, 1rem gap to a 24px arrow. Hover swipes a fill in like the block CTAs. */
.btn-arrow {
  --btn-fg: var(--dark-brown);
  --btn-sweep-bg: var(--dark-brown);
  --btn-sweep-fg: var(--light-cream);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--btn-fg);
  font-family: var(--font-freight-text-pro);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.181rem + 0.296vw, 1.5rem);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.35s ease;
}
.btn-arrow::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 0.75rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h21M17 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h21M17 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.35s ease;
}
.btn-arrow--box { padding: 0.5rem 1.5rem; border: 1px solid currentColor; }
.btn-arrow--light { --btn-fg: var(--tan); --btn-sweep-bg: var(--tan); --btn-sweep-fg: var(--dark-brown); }

.btn-arrow--box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-sweep-bg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-arrow:hover,
.btn-arrow:focus-visible { color: var(--btn-fg); }
.btn-arrow--box:hover,
.btn-arrow--box:focus-visible { color: var(--btn-sweep-fg); }
.btn-arrow--box:hover::before,
.btn-arrow--box:focus-visible::before { transform: scaleX(1); }
.btn-arrow:hover::after,
.btn-arrow:focus-visible::after { transform: translateX(0.25rem); }

@media (prefers-reduced-motion: reduce) {
  .btn-arrow::after,
  .btn-arrow--box::before { transition: none; }
}