/* ══ Buttons — the .btn-* system ══════════════════════════════════════════
   Every button is ONE Divi Code module holding one <a>; the type comes from a
   type class on the same <a> (body-sm / subheading-sm). Colors come from the
   style.css :root tokens, never var(--gcid-…). Three archetypes:

   1. Book Now — appointment CTA (hero, bottom CTA). Split pill: Off-white
      outer pill, Mid Blue inner pill behind the label, arrow at the right.
        <a class='body-sm btn-book-now' href='[booking_link]'>Request an Appointment</a>

   2. Arrow — label + circled arrow. --box draws the outlined pill (About Us,
      Meet the Doctor, Get Directions); --light reverses it for dark sections.
        <a class='body-sm btn-arrow btn-arrow--box' href='…'>About Us</a>
        <a class='body-sm btn-arrow btn-arrow--box btn-arrow--light' href='…'>Meet the Doctor</a>

   3. Header Request — the top bar's "Request an appointment" (10px corners).
        <a class='subheading-sm btn-header-request' href='[booking_link]'>Request an appointment</a>

   Motion is shared (--btn-dur / --btn-ease): hover answers in 0.3s, a press
   dips to 97% (Header Request pushes down instead, see 3), and reduced-motion
   keeps the color changes but drops movement.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared — motion, the arrow icon, link resets ─────────────────────────── */

.btn-book-now,
.btn-arrow,
.btn-header-request {
  --btn-dur  : 0.3s;
  --btn-ease : cubic-bezier(0.22, 0.61, 0.36, 1);   /* quick to answer, soft to land */
  /* Circled arrow from the Figma (19px incl. its 2px stroke), drawn as a mask
     so it always takes the color it's given. */
  --btn-icon : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.1L12.9 9.5L9.5 12.9M12.9 9.5H6.1M18 9.5C18 14.1944 14.1944 18 9.5 18C4.80558 18 1 14.1944 1 9.5C1 4.80558 4.80558 1 9.5 1C14.1944 1 18 4.80558 18 9.5Z'/%3E%3C/svg%3E");
  text-decoration : none;
  white-space     : nowrap;
  cursor          : pointer;
  transition      : background-color var(--btn-dur) var(--btn-ease),
                    color var(--btn-dur) var(--btn-ease),
                    transform 0.15s ease-out;
}
.btn-book-now:active,
.btn-arrow--box:active { transform: scale(0.97); }

.btn-book-now:focus-visible,
.btn-arrow:focus-visible,
.btn-header-request:focus-visible {
  outline        : 2px solid currentColor;
  outline-offset : 3px;
}

/* ══ 1. Book Now — appointment CTA ═══════════════════════════════════════
   Figma: 269×47 Off-white pill; the Mid Blue inner pill sits 4px inside it
   and stops 36px short of the right edge, leaving room for the arrow.
   Hover: the inner pill sweeps across and the arrow turns Off-white and
   nudges right.
   The Mid Blue is the link's own background, and the Off-white is painted
   over it as two inset shadows: a rim, and the end that holds the arrow.
   Contrast checkers compare the label with the element's background and
   can't see a ::before layer. With this setup they read 7.6:1, not 1:1. */

.btn-book-now {
  --btn-bg   : var(--off-white);   /* outer pill */
  --btn-fill : var(--mid-blue);    /* inner pill behind the label */
  --btn-fg   : var(--off-white);   /* label */
  --btn-ink  : var(--mid-blue);    /* arrow, while it sits on the outer pill */
  --btn-rim  : 0.25rem;            /* Off-white rim around the inner pill */
  display          : inline-flex;
  align-items      : center;
  gap              : 1.5625rem;
  padding          : 0.75rem 0.625rem 0.75rem 1.375rem;
  border-radius    : 999px;
  background-color : var(--btn-fill);
  color            : var(--btn-fg);
  /* rim on every side + the 36px arrow end (offset = end width − rim) */
  box-shadow       : inset 0 0 0 var(--btn-rim) var(--btn-bg),
                     inset -2rem 0 0 var(--btn-rim) var(--btn-bg);
  transition       : background-color var(--btn-dur) var(--btn-ease),
                     color var(--btn-dur) var(--btn-ease),
                     box-shadow var(--btn-dur) var(--btn-ease),
                     transform 0.15s ease-out;
}
.btn-book-now::after {
  content          : "";
  flex             : 0 0 auto;
  width            : 1.1875rem;
  height           : 1.1875rem;
  background-color : var(--btn-ink);
  -webkit-mask     : var(--btn-icon) center / contain no-repeat;
          mask     : var(--btn-icon) center / contain no-repeat;
  transition       : background-color var(--btn-dur) var(--btn-ease),
                     transform var(--btn-dur) var(--btn-ease);
}
.btn-book-now:hover { color: var(--btn-fg); }
@media (hover: hover) {
  .btn-book-now:hover {   /* the arrow end collapses, so the inner pill sweeps across */
    box-shadow : inset 0 0 0 var(--btn-rim) var(--btn-bg),
                 inset -0.0625rem 0 0 var(--btn-rim) var(--btn-bg);
  }
  .btn-book-now:hover::after  { background-color: var(--btn-fg); transform: translateX(0.1875rem); }
}

/* ══ 2. Arrow — label + circled arrow ════════════════════════════════════
   Plain: a text link with the arrow. --box: the outlined pill (2px border).
   --light: Off-white for photos and dark sections.
   Hover: the arrow nudges right; a --box also fills and inverts its text. */

.btn-arrow {
  --btn-fg       : var(--dark-blue);
  --btn-hover-fg : var(--off-white);   /* text color once a --box fills */
  display     : inline-flex;
  align-items : center;
  gap         : 0.75rem;
  color       : var(--btn-fg);
}
.btn-arrow:hover { color: var(--btn-fg); }
.btn-arrow::after {
  content          : "";
  flex             : 0 0 auto;
  width            : 1.1875rem;
  height           : 1.1875rem;
  background-color : currentColor;
  -webkit-mask     : var(--btn-icon) center / contain no-repeat;
          mask     : var(--btn-icon) center / contain no-repeat;
  transition       : transform var(--btn-dur) var(--btn-ease);
}
@media (hover: hover) {
  .btn-arrow:hover::after { transform: translateX(0.1875rem); }
}

.btn-arrow--light {
  --btn-fg       : var(--off-white);
  --btn-hover-fg : var(--dark-blue);
}

.btn-arrow--box {
  padding       : 0.625rem 1.125rem;
  border        : 2px solid currentColor;
  border-radius : 999px;
}
@media (hover: hover) {
  .btn-arrow--box:hover {
    background-color : var(--btn-fg);
    color            : var(--btn-hover-fg);
  }
}

/* ══ 3. Header Request — the top bar's "Request an appointment" ══════════
   Its own component, not a pill: 10px corners, Mid Blue. The type (Nexa
   Extra Bold, uppercase) comes from .subheading-sm on the same <a>.
   Hover: darkens and pushes down. The button sinks 1px under an inner shadow
   and a press sinks it 2px, which keeps it inside the 2–3px gap above the
   nav band. */

.btn-header-request {
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  padding          : 0.375rem 1.25rem;
  border-radius    : 0.625rem;
  background-color : var(--mid-blue);
  color            : var(--off-white);
  transition       : background-color var(--btn-dur) var(--btn-ease),
                     color var(--btn-dur) var(--btn-ease),
                     transform 0.15s ease-out,
                     box-shadow 0.15s ease-out;
}
.btn-header-request:hover {
  background-color : color-mix(in srgb, var(--mid-blue) 86%, #000);
  color            : var(--off-white);
}
@media (hover: hover) {
  .btn-header-request:hover {
    transform  : translateY(1px);
    box-shadow : inset 0 2px 4px rgb(0 0 0 / 0.28);
  }
}
.btn-header-request:active {
  transform  : translateY(2px);
  box-shadow : inset 0 3px 6px rgb(0 0 0 / 0.38);
}

/* ── ≤980px — mobile metrics ──────────────────────────────────────────── */

@media (max-width: 980px) {
  .btn-arrow           { gap: 0.5rem; }
  .btn-arrow--box      { padding: 0.375rem 0.75rem; }        /* 39px tall, as in the mobile frame */
  .btn-header-request  { padding: 0.3125rem 0.75rem; }
  /* Book Now keeps its desktop metrics — the mobile frame uses the same 269×47 pill. */
}

/* ── Reduced motion — keep the color changes, drop the movement ─────────── */

@media (prefers-reduced-motion: reduce) {
  .btn-book-now,
  .btn-arrow,
  .btn-book-now::after,
  .btn-arrow::after { transition-property: background-color, color; }
  .btn-header-request { transition-property: background-color, color, box-shadow; }   /* the inner shadow still reads as pressed */
  .btn-book-now:active,
  .btn-arrow--box:active,
  .btn-header-request:hover,
  .btn-header-request:active,
  .btn-book-now:hover::after,
  .btn-arrow:hover::after { transform: none; }
}