/* Buttons — the Redwood .btn-* system.
   Every button is one `divi/code` module holding a single <a class="btn-…">.
   Colours come from two custom properties so a variant is a two-line override:
     --btn-bg  background (or transparent)
     --btn-fg  text, divider line, arrow and outline colour
   Values are style.css :root tokens, never var(--gcid-…). */

/* ── Hover motion timing — shared by the arrow buttons and the text links ── */
.btn-arrow,
.btn-link,
.btn-call-us {
  --btn-dur: 0.35s;
  --btn-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── Arrow button (L) — red fill, label + divider + arrow box ──
   Figma "Desktop/Buttons/L Button": Mr Eaves Sans Bold 20/28, +20 tracking,
   66px tall, 10px radius, 28px inset / gaps, 27×24 arrow. The divider and the
   arrow are one ::after box painted in currentColor through a two-layer mask. */
.btn-arrow {
  --btn-bg: var(--main-red);
  --btn-fg: var(--light-cream);
  --btn-pad: 1.75rem;            /* 28px — inset and both gaps */
  --btn-arrow-w: 1.6875rem;      /* 27px */
  --btn-arrow-h: 1.5rem;         /* 24px */
  display: inline-flex;
  align-items: center;
  gap: var(--btn-pad);
  min-height: 4.125rem;          /* 66px */
  padding-left: var(--btn-pad);
  border: 1px solid var(--btn-border, var(--btn-bg));
  border-radius: 0.625rem;
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  font-family: var(--font-mr-eaves-xl-sans);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  max-width: 100%;               /* label wraps instead of overflowing a narrow column */
  padding-block: 0.5rem;
  /* hover fill sweeps in from the left: a --btn-hover-bg layer grows over --btn-bg */
  background-image: linear-gradient(var(--btn-hover-bg, var(--dark-red)), var(--btn-hover-bg, var(--dark-red)));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size var(--btn-dur) var(--btn-ease), color var(--btn-dur) var(--btn-ease);
}
.btn-arrow::after {
  content: "";
  margin-block: -0.5rem;         /* divider spans the full height despite padding-block */
  flex: 0 0 auto;
  align-self: stretch;
  width: calc(var(--btn-arrow-w) + 2 * var(--btn-pad));
  background-color: currentColor;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 28'%3E%3Cpath d='M13 26 25 14 13 2M25 14H2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / var(--btn-arrow-w) var(--btn-arrow-h) no-repeat,
    linear-gradient(#000 0 0) left / 1px 100% no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 28'%3E%3Cpath d='M13 26 25 14 13 2M25 14H2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / var(--btn-arrow-w) var(--btn-arrow-h) no-repeat,
    linear-gradient(#000 0 0) left / 1px 100% no-repeat;
  transition: -webkit-mask-position var(--btn-dur) var(--btn-ease), mask-position var(--btn-dur) var(--btn-ease);
}
.btn-arrow:hover { background-size: 100% 100%; }
/* hover: the arrow nudges right inside its box (first mask layer = arrow, second = divider) */
.btn-arrow:hover::after {
  -webkit-mask-position: calc(50% + 0.5rem) 50%, left;
          mask-position: calc(50% + 0.5rem) 50%, left;
}

/* ── --sm: the Figma "M" size — "Desktop/Buttons/M Button": 16/24, +25 tracking, 56px, 16px inset ── */
.btn-arrow--sm {
  --btn-pad: 1rem;
  --btn-arrow-w: 1.09375rem;     /* 17.5px */
  --btn-arrow-h: 0.97rem;        /* 15.56px */
  min-height: 3.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.25em;
}

/* ── --lg: tall CTA (Explore Our Services, the Locations buttons) — Figma 88px tall, 30px vertical padding ──
   The 1px border sits outside the padding, so padding is 30px − 1px to land on 88px total. */
.btn-arrow--lg {
  min-height: 5.5rem;                      /* 88px */
  padding-block: calc(1.875rem - 1px);     /* 29px + 1px border = Figma's 30px */
}
.btn-arrow--lg::after { margin-block: calc(1px - 1.875rem); }   /* divider spans the full height */

/* ── Outline — red outline + red label/arrow on a light surface ── */
.btn-arrow--box {
  --btn-bg: transparent;
  --btn-fg: var(--main-red);
  --btn-border: var(--main-red);
  --btn-hover-bg: var(--main-red);   /* sweeps solid red, label + arrow flip to cream */
}
.btn-arrow--box:hover { --btn-fg: var(--light-cream); }

/* ≤980px — Figma "Mobile/Buttons/L Button": 16/24, no vertical padding; one line = 60px,
   each extra line adds 24px (3 lines = 74px). The label wraps instead of padding the box. */
@media (max-width: 980px) {
  .btn-arrow {
    --btn-pad: 1.25rem;            /* Figma 28px; 20px keeps "Book Primary Care & Wellness" to 2 lines at 360–390 */
    min-height: 3.75rem;           /* 60px */
    font-size: 1rem;
    line-height: 1.5rem;
    padding-block: 0;
  }
  .btn-arrow::after { margin-block: 0; }
  /* size modifiers keep their own metrics below 980 (the base rule above would reset them) */
  .btn-arrow--sm { --btn-pad: 1rem; min-height: 3.5rem; padding-block: 0; }   /* M: 56px */
  .btn-arrow--sm::after { margin-block: 0; }
  .btn-arrow--lg { padding-block: calc(1.875rem - 1px); }
  .btn-arrow--lg::after { margin-block: calc(1px - 1.875rem); }
  .btn-arrow--full-mobile { display: flex; width: 100%; justify-content: space-between; }
}


/* ── Text link — label over a 1px underline ──
   .btn-call-us is the canonical call link; .btn-link is any other text CTA.
   L: 20/28 +20 tracking, 16px vertical pad. --sm: 16/24 +25, 12px pad, main red.
   When the label wraps, js/btn-link.js sets the width to the longest line so the
   rule ends at the text (an inline-block alone stretches to its container). */
.btn-link,
.btn-call-us {
  --btn-fg: var(--dark-red);
  display: inline-block;
  padding: 1rem 0;
  border-bottom: 1px solid currentColor;
  color: var(--btn-fg) !important;
  font-family: var(--font-mr-eaves-xl-sans);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-link--sm {
  --btn-fg: var(--main-red);
  padding: 0.75rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.25em;
}
/* ── Text link hover — the underline exits right, then redraws from the left ──
   The 1px rule moves from the border to a background line so it can animate. The
   border stays (transparent) so the box keeps its height. Chevron links have no
   rule and keep the opacity hover. */
.btn-link:not(.btn-link--chevron),
.btn-call-us {
  border-bottom-color: transparent;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  background-origin: border-box;   /* line sits in the border row */
}
.btn-link:not(.btn-link--chevron):hover,
.btn-call-us:hover { animation: rw-line-redraw calc(var(--btn-dur) * 2) var(--btn-ease); }
.btn-link--chevron:hover { opacity: 0.75; }

@keyframes rw-line-redraw {
  0%     { background-size: 100% 1px; background-position: right bottom; }
  50%    { background-size: 0% 1px;   background-position: right bottom; }
  50.01% { background-position: left bottom; }
  100%   { background-size: 100% 1px; background-position: left bottom; }
}

/* ── --chevron: "READ MORE ›" — no underline, dark-red label + small chevron (Figma provider cards) ──
   Use with .btn-link--sm for the size/tracking. */
.btn-link--chevron {
  --btn-fg: var(--dark-red);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0;              /* Figma box is 24px tall: no --sm padding */
  border-bottom: 0;
}
.btn-link--chevron::after {
  content: "";
  flex: 0 0 auto;
  width: 0.375rem;               /* 6px */
  height: 0.625rem;              /* 10px */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 980px) {
  .btn-link,
  .btn-call-us { font-size: 1rem; line-height: 1.5rem; }
  /* centre the call link under full-width mobile buttons (design audit 2026-11-06) */
  .et_pb_column:has(.btn-arrow--full-mobile) .et_pb_code:has(.btn-call-us) { text-align: center; }
}


/* ── Header top-bar buttons — Figma "Desktop/Buttons/Nav": 20/24 regular ──
   Fill the bar's height; the 1px left rule separates neighbouring cells. */
.btn-header-book,
.btn-header-app {
  --btn-bg: var(--main-red);
  --btn-fg: var(--light-cream);
  --btn-rule: var(--light-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;          /* 46px */
  padding: 0.5625rem 1.25rem;
  border-left: 1px solid var(--btn-rule);
  background: var(--btn-bg);
  /* hover fill sweeps in from the left, same motion as .btn-arrow */
  background-image: linear-gradient(var(--btn-hover-bg), var(--btn-hover-bg));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(.22, 1, .36, 1);
  color: var(--btn-fg) !important;
  font-family: var(--font-nav);
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.btn-header-book { --btn-fg: var(--white); --btn-hover-bg: var(--dark-red); }   /* Figma: white label on main red */
.btn-header-app {
  --btn-bg: var(--light-cream);
  --btn-fg: var(--dark-red);
  --btn-rule: var(--dark-red);
  --btn-hover-bg: var(--light-grey);
}
.btn-header-book:hover,
.btn-header-app:hover { background-size: 100% 100%; }

@media (max-width: 980px) {
  .btn-header-book,
  .btn-header-app { min-height: 2.3125rem; padding: 0.5rem; font-size: 0.75rem; line-height: 1.25rem; }   /* Figma mobile: 12px */
}

/* ── Plain — the fill button without the divider/arrow box ("Read Our Google Reviews") ── */
.btn-arrow--plain { padding-right: var(--btn-pad); }
.btn-arrow--plain::after { display: none; }

/* ── Reduced motion — hovers still change colour, nothing moves ── */
@media (prefers-reduced-motion: reduce) {
  .btn-arrow,
  .btn-arrow::after,
  .btn-header-book,
  .btn-header-app,
  .btn-link,
  .btn-call-us { transition: none; animation: none; }
}