/* ── Buttons — the .btn-* pill system ──────────────────────────────
   Every pill = .btn-pill + a variant setting --btn-bg/--btn-fg.
   Hover presses in (springs back out) with a slight darken of the
   pill's own color; set --btn-hover-bg/-fg for a tuned shift instead.
   .btn-fill keeps its own rising-fill effect (excluded from the press;
   pair with .btn-press for its press-in). */

.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:not(.btn-fill):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:not(.btn-fill):active { transform: scale(0.93); }

/* ── Variants — resting tokens (+ geometry where the comp differs) ── */
.btn-book     { --btn-bg: var(--red-brown);     --btn-fg: var(--white); }              /* header + CTA Book Now */
.btn-pharmacy { --btn-bg: var(--light-green);   --btn-fg: var(--darkest-green); }      /* header Pharmacy */
.btn-tan      { --btn-bg: var(--tan);           --btn-fg: var(--darkest-green); }      /* intake-section Book Now */
.btn-dark     { --btn-bg: var(--forrest-green); --btn-fg: var(--white);
                --btn-hover-bg: var(--jungle-green); --btn-hover-fg: var(--white);     /* inverse is invisible on the tan cards */
                border-radius: 3.125rem; padding: 0.75rem 2rem; }                      /* home cards: Services / Meet The Doctors */
.btn-white    { --btn-bg: var(--white);         --btn-fg: var(--darkest-green);
                --btn-hover-bg: var(--light-green);                                    /* darkened white reads grey */
                border-radius: 3.125rem; width: 13.375rem; max-width: 100%;
                padding: 0.625rem 1.25rem; }                                           /* Visit Website; + .btn-hug = About Us */
.btn-footer   { --btn-bg: var(--forrest-green); --btn-fg: var(--white);
                --btn-hover-bg: var(--jungle-green);                                   /* forrest pills deepen to jungle */
                border-radius: 6.25rem; width: 17.25rem; max-width: 100%;
                padding: 0.6rem 1.25rem; letter-spacing: 0.15rem; }                    /* footer nav pills */
.btn-pharmacy-wide {
  --btn-bg: var(--forrest-green); --btn-fg: var(--white);
  --btn-hover-bg: var(--jungle-green); --btn-hover-fg: var(--white);                   /* inverse washes out on cream */
  border-radius: 3.125rem; width: 16.3125rem; max-width: 100%; padding: 0.5rem 1.25rem;
}

/* ── .btn-call — hero "Call Us at …" tel link ─────────────────────
      ≤980px: standard forrest pill (press + jungle deepen from base).
      Desktop: no background — a white text link whose underline sweeps
      in left-to-right on hover; press/darken disabled. ── */
.btn-call { --btn-bg: var(--forrest-green); --btn-fg: var(--white); --btn-hover-bg: var(--jungle-green); }
/* interior heroes: the <=1024px pill goes light-green/darkest-green
   (desktop text link identical — the desktop block below outranks this) */
.btn-call--light {
  --btn-bg: var(--light-green);
  --btn-fg: var(--darkest-green);
  --btn-hover-bg: color-mix(in srgb, var(--light-green) 86%, #000);
  --btn-hover-fg: var(--darkest-green);
}
@media (max-width: 1024px) {
  .btn-call { padding: 0.625rem 1.75rem; max-width: 100%; }
}
@media (min-width: 1025px) {
  .btn-pill.btn-call {
    --btn-bg: transparent; --btn-hover-bg: transparent;
    --btn-fg: var(--white); --btn-hover-fg: var(--white);
    padding: 0;
    border-radius: 0;
    position: relative;
  }
  .btn-pill.btn-call:hover,
  .btn-pill.btn-call:active { transform: none; }
  .btn-pill.btn-call::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.2em;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
  }
  .btn-pill.btn-call:hover::after { transform: scaleX(1); }
  /* CTA on light backgrounds: desktop link text (and its sweep) in forrest green */
  .btn-pill.btn-call.btn-call--green {
    --btn-fg: var(--forrest-green);
    --btn-hover-fg: var(--forrest-green);
  }
}

/* ── Size modifiers ── */
.btn-hug  { width: auto; }                       /* pill hugs its label */
.btn-hero { width: 19.75rem; max-width: 100%; }  /* hero Book Now — pair with subheading-md */
@media (max-width: 980px) { .btn-hero { width: auto; } }

/* ── .btn-fill — hover fill: med-green rises from the pill bottom
      (CTA + hero Book Now). Needs <span class='label'> around the text;
      .btn-press adds its press-in (base pills press natively). ── */
.btn-fill {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(87, 42, 28, 0.2);
  transition: box-shadow 0.4s ease, transform 0.12s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn-fill::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: var(--med-green);
  transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.btn-fill:hover::before { height: 100%; }
.btn-fill:hover { box-shadow: 0 9px 22px rgba(83, 120, 80, 0.32); }
.btn-fill .label { position: relative; z-index: 1; }
.btn-fill.btn-press:active { transform: scale(0.96); }

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

/* reduced motion: keep the color swap, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .btn-pill:not(.btn-fill):hover,
  .btn-pill:not(.btn-fill):active,
  .btn-fill.btn-press:active { transform: none; }
  .btn-pill.btn-call::after { transition: none; }   /* underline appears without the sweep */
}