/* ── Buttons — the .btn-* pill system ──────────────────────────────
   Every pill = .btn-pill + a variant class setting --btn-bg/--btn-fg. */

.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);
  transition: transform 0.15s ease-out, background-color 0.2s ease, color 0.2s ease;
}
.btn-pill:active { transform: scale(0.93); }

/* ── Size modifier ── */

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


/* ── .btn-square — header CTA: square corners, hover swaps bg/fg ────
   font-weight + line-height override .nav-heading, so buttons.css must
   load after typography.css. */

.btn-square {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.625rem;
  height         : 2.4375rem;
  padding-inline : 1.25rem;
  background     : var(--btn-bg);
  color          : var(--btn-fg);
  font-weight    : 900;
  line-height    : 1.375rem;
  text-decoration: none;
  white-space    : nowrap;
  border-radius  : 0;
  transition     : background-color 0.2s ease, color 0.2s ease, transform 0.15s ease-out;
}

.btn-square:hover,
.btn-square:focus-visible {
  background : var(--btn-fg);
  color      : var(--btn-bg);
}

/* ── Pawspital variants — pill colours from this theme's :root tokens ── */

.btn-book {
  --btn-bg : var(--darker-red);
  --btn-fg : var(--cream);
}


/* ── .btn-arrow — label + generated circled arrow CTA ──────────────
   Anchor-only markup; the circle is ::after and the arrow SVG is
   inlined twice (red + white) because a data URI can't inherit
   currentColor. Hover fills the ring and nudges it right on a loop. */

@keyframes btn-arrow-nudge {
  0%, 100% { transform: translateX(0.5rem); }
  50%      { transform: translateX(0.95rem); }
}

.btn-arrow {
  display        : inline-flex;
  align-items    : center;
  gap            : 1rem;
  color          : var(--darker-red);
  text-decoration: none;
  /* one line only — in a column narrower than the label it overflows */
  white-space    : nowrap;
}

.btn-arrow::after {
  content            : "";
  flex               : 0 0 auto;
  box-sizing         : border-box;
  width              : 2.4375rem;
  height             : 2.4375rem;
  border             : 2px solid currentColor;
  border-radius      : 50%;
  background-color   : transparent;
  background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14.7279'%3E%3Cpath fill='%23D32500' d='M1 6.36396C0.447715 6.36396 0 6.81168 0 7.36396C0 7.91625 0.447715 8.36396 1 8.36396V7.36396V6.36396ZM15.7071 8.07107C16.0976 7.68054 16.0976 7.04738 15.7071 6.65685L9.34315 0.292893C8.95262 -0.097631 8.31946 -0.097631 7.92893 0.292893C7.53841 0.683418 7.53841 1.31658 7.92893 1.70711L13.5858 7.36396L7.92893 13.0208C7.53841 13.4113 7.53841 14.0445 7.92893 14.435C8.31946 14.8256 8.95262 14.8256 9.34315 14.435L15.7071 8.07107ZM1 7.36396V8.36396H15V7.36396V6.36396H1V7.36396Z'/%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : 1rem auto;
  transition         : background-color 0.25s ease, border-color 0.25s ease,
                       transform 0.25s ease;
}

/* border-color explicit — currentColor would go white and halo the fill */
.btn-arrow:hover::after,
.btn-arrow:focus-visible::after {
  background-color: var(--darker-red);
  border-color    : var(--darker-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14.7279'%3E%3Cpath fill='%23FFFFFF' d='M1 6.36396C0.447715 6.36396 0 6.81168 0 7.36396C0 7.91625 0.447715 8.36396 1 8.36396V7.36396V6.36396ZM15.7071 8.07107C16.0976 7.68054 16.0976 7.04738 15.7071 6.65685L9.34315 0.292893C8.95262 -0.097631 8.31946 -0.097631 7.92893 0.292893C7.53841 0.683418 7.53841 1.31658 7.92893 1.70711L13.5858 7.36396L7.92893 13.0208C7.53841 13.4113 7.53841 14.0445 7.92893 14.435C8.31946 14.8256 8.95262 14.8256 9.34315 14.435L15.7071 8.07107ZM1 7.36396V8.36396H15V7.36396V6.36396H1V7.36396Z'/%3E%3C/svg%3E");
  transform       : translateX(0.5rem);
  animation       : btn-arrow-nudge 1.1s ease-in-out 0.28s infinite;
}

/* ≤980px — Figma steps the circle down */
@media (max-width: 980px) {
  .btn-arrow { gap: 0.75rem; }
  .btn-arrow::after {
    width: 1.875rem;
    height: 1.875rem;
    background-size: 0.75rem auto;
  }
}

/* reduced motion: keep the colour change, drop all movement */
@media (prefers-reduced-motion: reduce) {
  .btn-arrow:hover::after,
  .btn-arrow:focus-visible::after { transform: none; animation: none; }
}


/* ── Home-hero pair: .btn-hero-book + .btn-hero-call ───────────────
   Solid pill + bare text on desktop; both change shape ≤980px. Pair
   each with .button-lg for type. Alignment is owned by the hero. */


/* ── Book Now ── */

.btn-hero-book {
  --btn-bg : var(--darker-red);
  --btn-fg : var(--white);

  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.625rem;
  box-sizing     : border-box;
  max-width      : 100%;
  min-height     : 5.4375rem;       /* min-, not fixed — a longer label would clip */
  padding-block  : 1rem;
  /* fluid gutter — 5.875rem at 1728 down to 2.5rem at 981 */
  padding-inline : clamp(2.5rem, -1.932rem + 7.229vw, 5.875rem);
  background     : var(--btn-bg);
  color          : var(--btn-fg);
  text-align     : center;
  text-decoration: none;
  /* rounded left, square right — sits flush to the hero panel edge */
  border-radius  : 1.25rem 0 0 1.25rem;
  transition     : background-color 0.2s ease, color 0.2s ease, transform 0.15s ease-out;
}

.btn-hero-book:hover,
.btn-hero-book:focus-visible {
  background : var(--btn-fg);
  color      : var(--btn-bg);
}

@media (max-width: 980px) {
  .btn-hero-book {
    min-height    : 0;
    /* shorthand — also resets the fluid inline padding above */
    padding       : 0.75rem 1.75rem;
    border-radius : 3.125rem;
  }
}


/* ── Call Us at ── */

.btn-hero-call,
.btn-call {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.625rem;
  box-sizing     : border-box;
  /* desktop ink only — the ≤980px ring version ignores it, stays Darker-Red */
  color          : var(--btn-call-ink, var(--darker-red));
  text-align     : center;
  text-decoration: none;
  /* desktop is bare text — no background, no ring */
  background     : transparent;
  border         : 0;
  border-radius  : 0;
  padding        : 0;
  transition     : background-color 0.2s ease, color 0.2s ease, transform 0.15s ease-out;
}

/* ── Hover underline — drawn rule, scaleX from the centre ── */
/* the ::after must stay absolute, or it becomes a flex item beside the label */

.btn-hero-call,
.btn-call {
  position : relative;
}

.btn-hero-call::after,
.btn-call::after {
  content    : "";
  position   : absolute;
  left       : 0;
  right      : 0;
  bottom     : -0.15em;
  height     : 2px;
  background : currentColor;
  transform  : scaleX(0);
  transform-origin : center;
  transition : transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events : none;
}

.btn-hero-call:hover::after,   .btn-hero-call:focus-visible::after,
.btn-call:hover::after,        .btn-call:focus-visible::after {
  transform : scaleX(1);
}

@media (max-width: 980px) {
  .btn-hero-call,
  .btn-call {
    width         : 100%;
    padding       : 1rem 1.25rem;
    /* pinned, not --btn-call-ink — every ringed variant is Darker-Red */
    color         : var(--darker-red);
    /* --btn-ring overrides the ring width — 3px in body sections */
    border        : var(--btn-ring, 4px) solid var(--darker-red);
    border-radius : 3.125rem;
  }
  /* ring variant is a filled box — underline off, fills on interaction */
  .btn-hero-call::after,
  .btn-call::after { content: none; }

  .btn-hero-call:hover,   .btn-hero-call:focus-visible,
  .btn-call:hover,        .btn-call:focus-visible {
    background      : var(--darker-red);
    color           : var(--white);
    text-decoration : none;
  }
}


/* ── Interior-hero pair: .btn-ihero-book + .btn-ihero-call ─────────
   For the interior hero's RED panel: white pill with Medium-Red text
   on desktop, solid / ringed Darker-Red ≤980px. Pair with .button-lg;
   width comes from the padding, not a fixed frame. */

.btn-ihero-book,
.btn-ihero-call {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.625rem;
  box-sizing     : border-box;
  max-width      : 100%;
  min-height     : 4.4375rem;
  padding        : 1rem 2.25rem;
  background     : var(--white);
  color          : var(--medium-red);
  border         : 0;
  border-radius  : 3.125rem;
  text-align     : center;
  text-decoration: none;
  transition     : background-color 0.2s ease, color 0.2s ease, transform 0.15s ease-out;
}

.btn-ihero-book:hover,   .btn-ihero-book:focus-visible,
.btn-ihero-call:hover,   .btn-ihero-call:focus-visible {
  background : var(--darker-red);
  color      : var(--white);
}

@media (max-width: 980px) {

  .btn-ihero-book {
    min-height : 0;
    padding    : 0.75rem 2rem;
    background : var(--darker-red);
    color      : var(--off-white);
  }
  .btn-ihero-book:hover,
  .btn-ihero-book:focus-visible {
    background : var(--off-white);
    color      : var(--darker-red);
  }

  .btn-ihero-call {
    width      : 100%;
    min-height : 0;
    padding    : 1rem 1.25rem;
    background : transparent;
    border     : 4px solid var(--darker-red);
    color      : var(--darker-red);
  }
  .btn-ihero-call:hover,
  .btn-ihero-call:focus-visible {
    background : var(--darker-red);
    color      : var(--white);
  }
}


/* ── .btn-cta — solid pill CTA for body sections ────────────────────
   Carries no colours — pair it with a variant and a type class:
     <a class="btn-cta btn-book button-lg" href="…">Book Now</a> */

.btn-cta {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.625rem;
  box-sizing     : border-box;
  max-width      : 100%;
  padding        : 1rem 2.25rem;
  background     : var(--btn-bg);
  color          : var(--btn-fg);
  border         : 0;
  border-radius  : 3.125rem;
  text-align     : center;
  text-decoration: none;
  transition     : background-color 0.2s ease, color 0.2s ease, transform 0.15s ease-out;
}

/* darkens the background instead of inverting; --btn-hover-bg overrides */

.btn-cta:hover,
.btn-cta:focus-visible {
  background : var(--btn-hover-bg, color-mix(in srgb, var(--btn-bg) 86%, #000));
  color      : var(--btn-hover-fg, var(--btn-fg));
}


/* ── Press-down — nudge + scale on hover/focus, deeper on :active ────
   Each button must list `transform` in its own transition, or it snaps.
   Do NOT copy onto anything Divi centres with translate(-50%, -50%) —
   this transform overwrites it. */

.btn-cta:hover,          .btn-cta:focus-visible,
.btn-ihero-book:hover,   .btn-ihero-book:focus-visible,
.btn-ihero-call:hover,   .btn-ihero-call:focus-visible {
  transform : translateY(2px) scale(0.95);
}

.btn-cta:active,
.btn-ihero-book:active,
.btn-ihero-call:active {
  transform : translateY(3px) scale(0.93);
}

@media (prefers-reduced-motion: reduce) {
  .btn-cta:hover,          .btn-cta:focus-visible,          .btn-cta:active,
  .btn-ihero-book:hover,   .btn-ihero-book:focus-visible,   .btn-ihero-book:active,
  .btn-ihero-call:hover,   .btn-ihero-call:focus-visible,   .btn-ihero-call:active { transform: none; }

  .btn-hero-call::after,
  .btn-call::after { transition: none; }
}