/* ══ 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.
      --fit (interior and sub-service heroes) fits the text column on phones.
        <a class='body-sm btn-book-now' href='[booking_link]'>Request an Appointment</a>
        <a class='body-sm btn-book-now btn-book-now--fit' 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); }
}

/* ── Book Now --fit — the phone size in the interior and sub-service heroes ──
   The Figma's mobile heroes use a 258px button lined up with the text column,
   narrower than the 269px standard. On phones --fit fills its column up to
   258px with the Figma's 19px start, and eases the label from 16px (402px
   screens) to 14px (360px) so it stays on one line. On narrower phones the
   label wraps instead of spilling out of the card. */
@media (max-width: 767px) {
  .btn-book-now.btn-book-now--fit {
    width           : 100%;
    max-width       : 16.125rem;   /* 258px */
    justify-content : space-between;
    gap             : 0.75rem;
    padding-left    : 1.1875rem;
    font-size       : clamp(0.875rem, 5.256vw - 0.31rem, 1rem);
    white-space     : normal;
  }
}

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

/* # Accessibility Fixes */
/* The top bar is Off-white like the label, so the focus outline takes the
   button's Mid Blue instead of the label colour. */
.btn-header-request:focus-visible,
.btn-header-request.keyboard-navigation-outline {
  outline-color : var(--mid-blue) !important;
}

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

/* # Accessibility Fixes */
/* ── ≤374px — Header Request fits beside the two 48px icon boxes ──
   At 16px the label is 252px wide: it ran 12px off a 360px screen (52px at 320)
   and the whole page scrolled sideways. At 15px it fits a 360px screen, and
   narrower phones wrap it onto two lines; min-height keeps it level with the
   34px icon boxes. */
@media (max-width: 374px) {
  .btn-header-request {
    min-height  : 2.125rem;
    font-size   : 0.9375rem;
    line-height : 1.15;
    white-space : normal;
    text-align  : center;
  }
  .et_pb_code:has(> .et_pb_code_inner > .btn-header-request) {
    min-width : 0;
  }
}

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