/* ── 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; }
}


/* ══ Revity variants ═══════════════════════════════════════════════
   Everything below is client-specific and defined against this site's
   style.css tokens.

   Letter-spacing is in rem, not em: Figma gives these as absolute px
   values, so a fixed unit tracks the design where an em would drift with
   the fluid font size. Where Figma does change the value per breakpoint
   (.btn-book: 2.7px → 3.6px) that's an explicit override below, not a
   side effect of the font scaling. */

/* Consultation button (Figma Nav): square, not a pill. */
.btn-book {
  --btn-bg       : var(--lightest-green);
  --btn-fg       : var(--brown);
  --btn-hover-bg : var(--light-green);
  --btn-hover-fg : var(--brown);
  border-radius  : 0;
  font-size      : clamp(0.75rem, 0.646rem + 0.443vw, 1.125rem);  /* 12px → 18px */
  letter-spacing : 0.16875rem;                                    /* 2.7px */
}

/* Interior-hero recolor: light-green base, pale-gold hover. */
.btn-book-green {
  --btn-bg       : var(--light-green);
  --btn-hover-bg : var(--lightest-green);
}

/* CTA recolor: deepest-green fill, cream label. The hover derives from the
   fill, so changing --btn-bg alone re-tunes both states.
   The hover vars MUST be spelled out. .btn-book is always co-applied and
   sets --btn-hover-bg to light-green, so .btn-pill's var() fallback never
   fires (a fallback only applies when the property is unset, not when a
   sibling class set it) — omit these and the button hovers pale gold. */
.btn-book-olive {
  --btn-bg       : var(--deepest-green);
  --btn-fg       : var(--cream);
  --btn-hover-bg : color-mix(in srgb, var(--deepest-green) 86%, #000);
  --btn-hover-fg : var(--cream);
}

/* Hero-size consultation button (Figma Desktop/Buttons/M Button):
   fills its column, larger label, fixed pill padding. */
.btn-book-lg {
  width          : 100%;
  padding        : 0.75rem 1.5rem;
  font-size      : clamp(0.875rem, 0.702rem + 0.739vw, 1.5rem);   /* 14px → 24px */
  letter-spacing : 0.3rem;                                        /* 4.8px */
  line-height    : 1.167;
  white-space    : normal;   /* label may wrap in narrow columns */
  text-align     : center;
}

/* Interior-hero consultation button (Figma Desktop/Buttons/XS Button):
   16px at every breakpoint — Figma gives the same value on desktop and
   mobile — hugging its label rather than filling the column.
   width:fit-content + white-space:normal means it sits on one line
   wherever there's room (as Figma shows it) and only wraps once the
   column is narrower than the label, instead of overflowing. */
.btn-book-xs {
  width          : fit-content;
  max-width      : 100%;
  margin-inline  : auto;
  padding        : 0.75rem 1.25rem;                               /* 12px 20px */
  font-size      : 1rem;                                          /* 16px, fixed */
  letter-spacing : 0.3rem;                                        /* 4.8px (30% of 16) */
  line-height    : 1.25;                                          /* 20px */
  white-space    : normal;
  text-align     : center;
}

/* Call-us: plain cream text on desktop (Figma Desktop/Buttons/L Button)
   with the drawn-underline + diamond hover; ≤980px it becomes a cream
   block button. */
.btn-call {
  position       : relative;
  display        : inline-block;
  color          : var(--cream);
  text-decoration: none;
  font-family    : var(--font-parabolica);
  font-weight    : 400;
  font-size      : var(--text-sub-lg);                            /* 16px → 32px */
  letter-spacing : 0.2rem;                                        /* 3.2px */
  line-height    : 1.188;
  text-transform : uppercase;
  padding-bottom : 0.375rem;
}

/* Interior-hero call-us (Figma Desktop/Buttons/M Button): one size step
   down from the L Button above — 24px Medium with wider tracking.
   --text-sub-md is already the 16px→24px ramp this needs. */
.btn-call-md {
  font-size      : var(--text-sub-md);                            /* 16px → 24px */
  font-weight    : 500;
  letter-spacing : 0.3rem;                                        /* 4.8px (20% of 24) */
  line-height    : 1.167;                                         /* 28px */
}

/* Footer-CTA call-us: brown text on desktop (the underline follows via
   currentColor); brown block button at tablet/mobile. */
.btn-call-solid { color: var(--brown); }

/* Arrow-in-circle button (Figma Desktop/Buttons/L Buttons Medium):
   label + circled arrow. Sizes in em so the circle tracks the label. */
.btn-arrow {
  display        : inline-flex;
  align-items    : center;
  gap            : 0.875em;
  color          : var(--white);
  text-decoration: none;
  font-size      : var(--text-sub-lg);                     /* 16px → 32px */
  letter-spacing : 0.3rem;                                 /* 4.8px */
  line-height    : 1.188;
}
/* overflow:visible is load-bearing — the circle sits 1 unit inside a 74-unit
   viewBox, but vector-effect="non-scaling-stroke" keeps its stroke a constant
   2px however small the SVG renders. Below ~24px the stroke outgrows that
   margin and the default SVG clip flattens the circle's edges. */
.btn-arrow svg    { width: 2.3em; height: 2.3em; flex-shrink: 0; overflow: visible; }
.btn-arrow circle { fill: none; stroke: currentColor; stroke-width: 2; transition: fill 0.3s ease; }
.btn-arrow .arr   { fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.3s ease, stroke 0.3s ease; }
.btn-arrow .lbl   { position: relative; }


/* ── Drawn-underline + diamond hover ───────────────────────────────
   Shared by .btn-call and .btn-arrow's label: draws a line left → right,
   then lands a diamond at its end. --ul-bottom is where the line sits
   relative to the text box; the diamond tracks it. */
.btn-call       { --ul-bottom: 0px; }
.btn-arrow .lbl { --ul-bottom: -0.2em; }

.btn-call::after,
.btn-arrow .lbl::after {
  content    : "";
  position   : absolute;
  left       : 0;
  bottom     : var(--ul-bottom);
  width      : 100%;
  height     : 1px;
  background : currentColor;
  transform  : scaleX(0);
  transform-origin: left center;
  transition : transform 0.4s ease;
}
.btn-call::before,
.btn-arrow .lbl::before {
  content    : "";
  position   : absolute;
  right      : -14px;
  bottom     : calc(var(--ul-bottom) - 3px);
  width      : 7px;
  height     : 7px;
  border     : 1px solid currentColor;
  transform  : rotate(45deg) scale(0);
  transition : transform 0.25s ease 0.3s;
}
.btn-call:hover::after,
.btn-arrow:hover .lbl::after  { transform: scaleX(1); }
.btn-call:hover::before,
.btn-arrow:hover .lbl::before { transform: rotate(45deg) scale(1); }

/* circle fills white, arrow turns brown and nudges forward */
.btn-arrow:hover circle { fill: var(--white); }
.btn-arrow:hover .arr   { transform: translateX(0.12em); stroke: var(--brown); }


/* ── ≤980px — variant mobile metrics ───────────────────────────────
   Rule order matches the source order these had when they lived in
   separate blocks, so the cascade is unchanged. */
@media (max-width: 980px) {
  .btn-book { letter-spacing: 0.225rem; }   /* 3.6px */

  /* re-declared for the same reason as .btn-book-lg below: .btn-pill and
     .btn-book above are the same specificity and land later in the file */
  .btn-book-xs { letter-spacing: 0.3rem; }

  .btn-book-lg {
    width         : fit-content;
    margin-inline : auto;
    padding       : 0.75rem 1.25rem;
    /* NOT redundant with the base 0.3rem: .btn-book's 0.225rem above is
       the same specificity and would otherwise win inside this block */
    letter-spacing: 0.3rem;
  }

  .btn-call {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : fit-content;
    margin-inline  : auto;
    background     : var(--cream);
    color          : var(--brown);
    font-weight    : 500;
    padding        : 0.75rem 1.25rem;
    text-align     : center;
  }
  .btn-call::after,
  .btn-call::before { display: none; }

  .btn-call-solid {
    width      : 100%;
    background : var(--brown);
    color      : var(--cream);
    font-weight: 400;
  }
}

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