/* Buttons — the .btn-* system. */

/* Primary button — CTA pill (Figma header "Request an Appointment"). */
.btn-primary {
  display: inline-block;
  text-align: center;
  background: var(--spruce);   /* #008175 — Request Appointment CTA */
  color: var(--white);         /* pure white */
  font-family: var(--font-bogart);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12rem;
  padding: 0.3rem 1.75rem;
  white-space: nowrap;
  border-radius: 2.9375rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-primary:hover { background: color-mix(in srgb, var(--spruce) 88%, #000); color: var(--white); }   /* subtle darken */

/* Mobile — smaller label; drop the "an" (.hdr-btn-optional) → "Request Appointment". */
@media (max-width: 980px) {
  .btn-primary {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.045rem;
  }
  .hdr-btn-optional { display: none; }
}

/* Large variant — mirrors subheading-lg (Aesthet Nova / 500 / 0.13em) for CTAs outside the header.
   Use: class="btn-primary btn-lg". Padding is independent of the header button. */
.btn-primary.btn-lg {
  font-family: var(--font-display);                          /* = subheading-lg (Aesthet Nova) */
  font-size: var(--text-sub-lg);
  font-weight: 500;                                          /* subheading-lg weight — else it inherits the base's mobile 400 */
  letter-spacing: 0.13em;
  text-indent: 0.13em;                                       /* offset the trailing letter-spacing so the label centres evenly */
  padding: clamp(0.3rem, 0.24rem + 0.24vw, 0.5rem) 3.5rem;   /* top/bottom: 0.5rem desktop, clamps down to 0.3rem (primary's mobile); sides 3.5rem */
}
@media (max-width: 980px) {
  .btn-primary.btn-lg { padding-left: 0.75rem; padding-right: 0.75rem; }   /* tighter sides on mobile (top/bottom keep the clamp) */
}

/* Large CTAs (.btn-primary.btn-lg, non-solid) inherit the header's spruce/white fill + hover from
   .btn-primary above — only their size differs. (.btn-solid below opts back to the solid pine.) */

/* Solid pine modifier — the "Call Us" button: a large CTA in the solid pine fill (var(--pine)),
   distinct from the spruce Request-Appointment buttons. Keeps the .btn-lg sizing + its own hover.
   Use: class="btn-primary btn-lg btn-solid". */
.btn-primary.btn-lg.btn-solid {
  background: var(--pine);    /* #105F57 */
  color: var(--ivory);        /* #FBF9F2 */
}
.btn-primary.btn-lg.btn-solid:hover {
  background: var(--jungle-green);
  color: var(--ivory);
}

/* Secondary modifier — recolours a header pill to the pale-green look (Pet Portal / Pharmacy),
   distinct from the spruce Request-Appointment button. Shape/size/hover-fade unchanged.
   Use: class="btn-primary btn-secondary". */
.btn-primary.btn-secondary {
  background: var(--light-green);   /* #E4E8DE */
  color: var(--olive);              /* #4D4C1E */
}
.btn-primary.btn-secondary:hover {
  background: color-mix(in srgb, var(--light-green) 90%, #000);   /* subtle darken */
  color: var(--olive);
}

/* Green button — light-green pill, olive label + auto trailing chevron (apply to an <a>). */
.btn-green {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 1.5rem;
  background: color-mix(in srgb, var(--light-green) 74%, transparent);
  color: var(--olive);
  font-family: var(--font-bogart);
  font-size: 1rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.12rem;
  border-radius: 1.8125rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.btn-green:hover { background: var(--light-green); }
.btn-green::after {
  content: "";
  flex: none;
  width: 1.25em;
  height: 1.25em;
  /* Figma chevron; stroke baked to --olive (#4D4C1E) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D4C1E' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 4 17 12 8 20'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Wrapping modifier — add `btn-wrap` beside any .btn-* to let a long label break onto multiple
   lines (buttons are single-line / white-space: nowrap by default); the text centers when wrapped,
   with a tighter line-height so stacked lines don't spread out. */
.btn-wrap { white-space: normal; text-align: center; line-height: 1.15; }