/* ── Buttons — the .btn-* system ────────────────────────────────────
   Base seeded from templates/divi-templates/global-header/buttons-base.css
   during the global-header import.

   THE CONTRACT — every button is `.btn-pill` + one colour variant, and the
   variant sets ONLY these four custom properties (plus padding/shape where
   the design differs):

       --btn-bg   --btn-fg   --btn-hover-bg   --btn-hover-fg

   Never set `background` or `color` directly on a variant. The base's
   :hover paints from the properties, so a direct value leaves hover
   reading undefined vars — an invalid colour that paints the button out of
   existence. That is exactly what happened to .btn-call-us: it went fully
   transparent on hover.

   Colours come from style.css :root, never var(--gcid-…) — Divi only emits
   a --gcid-* property for palette colours a module on that page uses.

   ORDER MATTERS: every variant (and its media block) must sit after
   .btn-pill's max-width:980px block — they share its specificity, so only
   source order lets them win. Same for a modifier vs the class it refines.

   ONE CLASS PER BUTTON IS ENOUGH — and that is deliberate. Behaviour is
   hooked onto the colourway classes themselves rather than kept behind a
   second opt-in class in the markup, because the Divi builder OWNS module
   content: it loads the Theme Builder header/footer alongside whatever page
   is open and re-saves its own cached copy on save. Any behaviour that
   depends on an extra class in the markup is silently reverted the next
   time an editor saves an unrelated page. Observed live: a two-class
   .btn-textlink .btn-call-us survived 6 minutes before an About Us save
   rolled the footer layout back. Keep behaviour in CSS, keyed to the one
   class an editor is likely to keep.

   ── the pieces ──────────────────────────────────────────────────────
     .btn-pill      base: layout, paint, transition
     .btn-square    squared, pale-on-teal   (header CTA, hero primary)
     .btn-hero      hero primary — .btn-square + wider inset + press
     .btn-book-now  squared, teal fill      (CTA primary) + press
     .btn-call-us   text on desktop -> filled button at ≤980, site-wide CTA
     .btn-call-hero same behaviour, hero colourway (over the photo)
     .btn-fill      solid teal pill   (interior hero) + lift
     .btn-outline   ringed teal pill  (interior hero) + lift
     .btn-textlink  the text-link behaviour as an explicit opt-in
     .btn-swap      1px underline, always on, wipes+swaps on hover (Home)
     .btn-swap-invert  the same in white, for the darker-teal panel
     .btn-press     the press-in as an explicit opt-in
     .btn-hug       width: auto */

.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      : background-color 0.2s ease, color 0.2s ease;
}

/* Hover falls back to the REST colours, so a variant that defines no hover
   simply doesn't change — rather than auto-darkening or computing something
   invalid. No transform here: movement is opt-in, see the press block. */
.btn-pill:hover,
.btn-pill:focus-visible {
  background : var(--btn-hover-bg, var(--btn-bg));
  color      : var(--btn-hover-fg, var(--btn-fg));
}


/* ── The press-in ────────────────────────────────────────────────────
   On the hero and CTA primaries. The header CTA is .btn-square WITHOUT
   .btn-hero, so it deliberately gets none of this and changes colour only —
   it must never shift inside the 42px top bar.
   .btn-press is the same behaviour as a hand-applied opt-in. */
.btn-hero,
.btn-book-now,
.btn-press {
  transition : background-color 0.2s ease, color 0.2s ease,
               transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-hero:hover,
.btn-book-now:hover,
.btn-press:hover {
  transform  : scale(0.96);
  /* clean press-in; the springy base curve only plays on release */
  transition : transform 0.15s ease-out, background-color 0.2s ease, color 0.2s ease;
}

.btn-hero:active,
.btn-book-now:active,
.btn-press:active { transform: scale(0.93); }

@media (prefers-reduced-motion: reduce) {
  .btn-hero:hover,    .btn-hero:active,
  .btn-book-now:hover, .btn-book-now:active,
  .btn-press:hover,   .btn-press:active { transform: none; }
}

/* ── Size modifier ── */
.btn-hug { width: auto; }   /* pill hugs its label */

/* ≤980px — base pill metrics.
   NOTE: this rule used to also set `letter-spacing: 0.15rem`. Removed — the
   base must not dictate tracking; it silently beat the type class on every
   button below 980 and forced variants to re-assert it. */
@media (max-width: 980px) {
  .btn-pill { padding: 0.625rem 1.25rem; }
}


/* ── .btn-square — squared, pale-on-teal. Header CTA + hero primary ──
   Figma: #F2F7FA fill, #3D5A63 label. Hovers to white, the only safe
   direction on the teal bar — a darker fill sits at 1.20:1 against it and
   the button appears to vanish. */
.btn-square {
  --btn-bg       : var(--lightest-blue);
  --btn-fg       : var(--darker-teal);
  --btn-hover-bg : var(--white);
  --btn-hover-fg : var(--darker-teal);
  border-radius  : 0;
  padding        : 0.5rem 1.25rem;
}

/* Below 980 the side inset scales rather than stepping once: 1.25rem at the
   980 boundary down to 1rem at 375. Vertical stays 0.5rem.

   nowrap is released here too. It was pinning the document at a fixed 464px
   wide on EVERY narrower viewport: the header CTA starts at x=134 (icons +
   gaps) and its label measures 330px unwrapped, so a 375px phone overflowed
   by ~89px and scrolled sideways. Wrapping only engages when the label
   genuinely runs out of room — no max-width — so the bar stays one line
   wherever it fits (down to ~500px), and the button grows taller instead of
   the page growing wider where it doesn't. */
@media (max-width: 980px) {
  .btn-square {
    padding     : 0.5rem clamp(1rem, 0.845rem + 0.661vw, 1.25rem);
    white-space : normal;
    text-align  : center;
  }
}


/* ── .btn-hero — the hero primary ────────────────────────────────────
   Same colours and shape as .btn-square, which it is used alongside; the
   hero runs a wider side inset (Figma 28px) and carries the press-in.
   Must follow .btn-square's media block. */
.btn-hero { padding: 1rem 1.75rem; }

@media (max-width: 980px) {
  .btn-hero { padding: 1rem 1.25rem; }   /* Figma 15/20 */
}


/* ── .btn-book-now — squared, teal fill. CTA primary ─────────────────
   Figma: #3D5A63 fill, #FFFFFF label, padding 15/20. Carries the press-in. */
.btn-book-now {
  --btn-bg       : var(--darker-teal);
  --btn-fg       : var(--white);
  --btn-hover-bg : var(--darkest-teal);
  --btn-hover-fg : var(--white);
  border-radius  : 0;
  padding        : 1rem 1.25rem;
  /* .btn-pill is nowrap. Released at EVERY breakpoint, not just ≤980 — the
     CTA sits in a narrower column than the top bar, so the label has to be
     able to wrap on desktop too. Still no max-width, so it only wraps when
     it genuinely runs out of room. */
  white-space    : normal;
  text-align     : center;
}


/* ── Text-link behaviour — text on desktop, filled button at ≤980 ─────
   Hooked onto the two colourways as well as .btn-textlink itself, so one
   class in the markup is sufficient (see ONE CLASS PER BUTTON above). The
   colourway rules that follow set ONLY the four properties.

   A transparent desktop fill still goes through --btn-bg so the base's
   hover stays valid. */
.btn-textlink,
.btn-call-us,
.btn-call-hero {
  --btn-bg       : transparent;
  --btn-hover-bg : transparent;
  position       : relative;
  display        : inline-block;
  border-radius  : 0;
  padding        : 0;
  white-space    : normal;   /* released at every breakpoint — see .btn-book-now */
}

/* drawn underline — 2px, matching the hero's vertical rule */
.btn-textlink::after,
.btn-call-us::after,
.btn-call-hero::after {
  content          : '';
  position         : absolute;
  left             : 0;
  right            : 0.2em;        /* trims the trailing letter-spacing */
  bottom           : -0.25rem;
  height           : 2px;
  background       : currentColor;
  transform        : scaleX(0);
  transform-origin : left center;
  transition       : transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

@media (prefers-reduced-motion: reduce) {
  .btn-textlink::after,
  .btn-call-us::after,
  .btn-call-hero::after { transition: none; }
}

@media (max-width: 980px) {
  .btn-textlink,
  .btn-call-us,
  .btn-call-hero {
    display     : inline-flex;
    padding     : 1rem 1.25rem;
    text-align  : center;
    /* Deliberately no max-width — the Figma pins these at ~215px, which
       forces two lines even where one comfortably fits. */
  }
  /* underline is desktop-only — below 980 these are filled buttons */
  .btn-textlink::after,
  .btn-call-us::after,
  .btn-call-hero::after { display: none; }
}


/* ── Colourways ──────────────────────────────────────────────────────
   Must follow the text-link media block above. */

/* site-wide CTA — teal text on a light ground, dark-blue button at ≤980 */
.btn-call-us {
  --btn-fg       : var(--darker-teal);
  --btn-hover-fg : var(--darker-teal);
}
@media (max-width: 980px) {
  .btn-call-us {
    --btn-bg       : var(--dark-blue);
    --btn-hover-bg : var(--darkest-teal);
    --btn-fg       : var(--white);
    --btn-hover-fg : var(--white);
  }
}

/* hero — white text over the photo, pale-blue button at ≤980 */
.btn-call-hero {
  --btn-fg       : var(--white);
  --btn-hover-fg : var(--white);
}
@media (max-width: 980px) {
  .btn-call-hero {
    --btn-bg       : var(--light-blue);
    --btn-hover-bg : var(--lightest-blue);
    --btn-fg       : var(--darkest-teal);
    --btn-hover-fg : var(--darkest-teal);
  }
}


/* ── Interior hero pair — .btn-fill / .btn-outline ───────────────────
   The two buttons under an interior page's hero heading. Figma: a pill
   (radius 2.5rem) with 1.25rem/2.5rem padding, Buttons L type, one solid
   in --darker-teal and one ringed in the same colour.

   Type is `.button-lg`, unchanged: --text-btn-lg already clamps
   1.125rem -> 1.25rem, which is exactly the Figma's mobile/desktop pair,
   and its 0.2em tracking resolves to the Figma's 0.225rem and 0.25rem at
   those two sizes. Nothing to add.

   Placed last so both beat .btn-pill's own padding, including the one in
   its max-width:980px block — a media query adds no specificity, so a
   later rule at the same weight wins at every breakpoint. */
.btn-fill,
.btn-outline {
  border-radius : 2.5rem;
  padding       : 1.25rem 2.5rem;
  gap           : 0.625rem;   /* Figma; only bites if an icon is added */
  /* .btn-pill is nowrap; the Figma wraps "Request an Appointment" to two
     lines on mobile, so release it and centre the result. */
  white-space   : normal;
  text-align    : center;
}

/* solid.
   Hover drops to --dark-blue rather than --darkest-teal: measured against
   the #3D5A63 rest fill, darkest-teal is only a 1.20:1 step and reads as no
   change at all, where dark-blue is 2.20:1 — an unmistakable darkening that
   is still in the brand family (it is already this site's deepest
   interaction colour, used by the CTA call button below 980). The white
   label sits at 16.26:1 on it, so legibility improves rather than suffers. */
.btn-fill {
  --btn-bg       : var(--darker-teal);
  --btn-fg       : var(--white);
  --btn-hover-bg : var(--dark-blue);
  --btn-hover-fg : var(--white);
}

/* ringed, inverting to the solid treatment on hover */
.btn-outline {
  --btn-bg       : transparent;
  --btn-fg       : var(--darker-teal);
  --btn-hover-bg : var(--darker-teal);
  --btn-hover-fg : var(--white);
  border         : 2px solid var(--darker-teal);
  /* The ring is 2px on each side and these buttons are shrink-to-fit, so
     without this they would stand 4px taller and wider than .btn-fill and
     the pair would not line up. Subtracting it keeps both boxes identical. */
  padding        : calc(1.25rem - 2px) calc(2.5rem - 2px);
}

/* ── The lift ──
   Keyed to the variants rather than a separate opt-in class, for the same
   reason .btn-press's behaviour is folded into .btn-hero and .btn-book-now:
   the Divi builder owns module content and re-saves its own cached copy, so
   an extra class in the markup gets silently reverted the next time an
   editor saves an unrelated page. One class per button is the contract. */
.btn-fill,
.btn-outline {
  transition : background-color 0.2s ease, color 0.2s ease,
               border-color 0.2s ease,
               transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-fill:hover,
.btn-outline:hover {
  transform  : translateY(-2px);
  /* clean lift on the way up; the springy base curve plays on release */
  transition : transform 0.15s ease-out, background-color 0.2s ease,
               color 0.2s ease, border-color 0.2s ease;
}

.btn-fill:active,
.btn-outline:active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .btn-fill:hover,  .btn-fill:active,
  .btn-outline:hover, .btn-outline:active { transform: none; }
}


/* ── .btn-swap — "wipe and swap" underline link ──────────────────────
   Home only, so far: "ABOUT US" and "MEET THE DOCTOR" under their blocks
   (black), and "SERVICES" on the darker-teal panel (white). Figma nodes
   4011:575 / 4208:800 / 4011:559, plus the three mobile twins.

   The underline is visible AT REST. On hover the resting line slides out
   right while an identical one slides in from the left, 120ms behind it, so
   the link is never without a line — that overlap is the whole point of the
   effect and is why it is two pseudo-elements rather than one.

   NOT .btn-textlink. That one looks similar and is not: it draws a 2px line
   in from scaleX(0) on hover, is absent at rest, and is switched off below
   980px where those links become filled buttons. This one is 1px, always
   present, and present at both 1728 and 402 in the design. Folding them
   together would have broken the existing links.

   TYPE IS NOT SET HERE. The markup carries `button-lg` alongside, which
   already resolves to the Figma's Pacaembu 400 / 0.2em / uppercase and
   clamps 18px→20px across exactly the 375→1728 range the design uses — so
   no breakpoint of our own is needed. Only line-height is pinned below:
   Figma is 24px at BOTH sizes, while .button-lg's 1.2 would give 21.6px at
   18px and shift the underline 2.4px up the phone.

   The design carries only the resting state — no variants, no interactions
   on those nodes — so the timing here (400ms, 120ms stagger, that easing) is
   from the build handoff, not from Figma. */

.btn-swap,
.btn-swap-invert {
  position        : relative;
  display         : inline-block;
  overflow        : hidden;          /* clips both lines to the link's box */
  /* Figma's auto-layout is a uniform 10px, and it stays a uniform 10px here.
     The design's "9px gap + 1px rule" describes a BORDER, which would sit
     outside the padding — these lines are positioned pseudo-elements sitting
     INSIDE it, so the 10th pixel is the rule and the clear space above it is
     9px on its own. Setting 9px here instead measures 43px against the
     design's 44px and squeezes the gap to 8px. */
  padding         : 0.625rem;
  line-height     : 1.5rem;          /* 24px — see the note above */
  color           : var(--black);
  text-decoration : none;
}

/* The only difference between the two Figma variants is the colour, and the
   line reads it from currentColor — so a colourway sets exactly one thing.
   White exists because that instance sits on a --darker-teal panel. */
.btn-swap-invert { color: var(--white); }

.btn-swap::before,  .btn-swap::after,
.btn-swap-invert::before, .btn-swap-invert::after {
  content    : '';
  position   : absolute;
  left       : 0;
  right      : 0;
  bottom     : 0;
  height     : 1px;
  background : currentColor;
}

/* Deliberately full-width, unlike .btn-textlink's `right: 0.2em` trim. Two
   reasons: the browser's trailing letter-spacing (4px at 20px) lands inside
   the padding box, so full width renders a 14px overhang against the 13px
   measured off the Figma render — within a pixel; and the 102% below only
   clears the box if the line IS the box. Inset it and a hairline of the
   outgoing line stays parked at the right edge. */

/* resting line — exits right */
.btn-swap::after,
.btn-swap-invert::after {
  transition : transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* incoming line — parked off to the left, follows 120ms behind */
.btn-swap::before,
.btn-swap-invert::before {
  transform  : translateX(-102%);
  transition : transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.12s;
}

/* The colour shift rides the same 400ms as the wipe, so the two read as one
   gesture rather than a colour change and then a line change. Both lines are
   currentColor, so they travel with the text automatically — which is also
   why the colourway above only ever needs to set `color`. */
.btn-swap,
.btn-swap-invert {
  transition : color 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* hover: hover keeps iOS from latching the swapped state after a tap — on
   touch the link just keeps its resting line, which is correct. */
@media (hover: hover) {
  .btn-swap:hover::after,
  .btn-swap-invert:hover::after  { transform: translateX(102%); }
  .btn-swap:hover::before,
  .btn-swap-invert:hover::before { transform: translateX(0); }

  .btn-swap:hover        { color: var(--darker-teal); }
  .btn-swap-invert:hover { color: var(--light-blue); }
}

/* Focus is NOT inside that query on purpose: a keyboard user on a
   touch-capable laptop should still get the animation. */
.btn-swap:focus-visible::after,
.btn-swap-invert:focus-visible::after  { transform: translateX(102%); }
.btn-swap:focus-visible::before,
.btn-swap-invert:focus-visible::before { transform: translateX(0); }

.btn-swap:focus-visible        { color: var(--darker-teal); }
.btn-swap-invert:focus-visible { color: var(--light-blue); }

.btn-swap:focus-visible,
.btn-swap-invert:focus-visible {
  outline        : 2px solid currentColor;
  outline-offset : 4px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-swap::before,  .btn-swap::after,
  .btn-swap-invert::before, .btn-swap-invert::after {
    transition-duration : 1ms;
    transition-delay    : 0ms;
  }
}


/* ── .btn-outline-square — the "Read Our Reviews" button ──────────────
   Under the testimonial on Home. A SQUARE ringed button, not the pill
   .btn-outline above: Figma gives it no corner radius, tighter insets
   (1rem/1.75rem against the pill's 1.25rem/2.5rem) and Buttons M type
   rather than Buttons L.

   Read straight off the dev panel: display inline-flex, padding 1rem 1.75rem,
   justify/align center, gap 0.625rem, border 1px solid --darkest-teal, no
   fill. Total height comes out at 3.5rem — 1.38rem of text plus 2rem of
   padding plus the two 1px borders — which is what the design measures.

   TYPE IS NOT SET HERE. The markup carries `button-md`, which already
   resolves to the Figma's Desktop/Buttons/Buttons M exactly: Pacaembu 300 at
   --text-btn-md (16 -> 20px), line-height normal, uppercase, and 0.2em
   tracking that lands on the design's 0.25rem at 20px.

   One deviation, and it is in the design rather than in this file: the
   MOBILE style (Mobile/Buttons/Mobile Buttons M) specifies 0.1rem tracking
   and a 1.375rem line-height where .button-md gives 0.2em and normal. It is
   a hair's difference at 16px and shared with every other button on the
   site, so it is left alone rather than special-cased here.

   The design carries only the resting state — no hover on the node — so the
   hover below is ours, matching what .btn-outline already does: the ring
   fills and the label knocks out. */

.btn-outline-square {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.625rem;      /* Figma; only bites if an icon is added */
  padding         : 1rem 1.75rem;
  /* Pinned, and the design contradicts itself here. Its type style says
     `line-height: normal`, which a browser resolves to ~30px for Pacaembu at
     20px and gives a 64px-tall button; but the dev panel's own layer box
     measures the content at 1.38rem and the button at 56px, and the mobile
     style states 1.375rem outright. The layer box matches what is drawn, so
     that is what is used — 22px + 2rem of padding + two 1px borders = 56px,
     exactly the design's box. Set here rather than on the shared .button-md,
     which other buttons rely on. */
  line-height     : 1.375rem;
  border          : 1px solid var(--darkest-teal);
  border-radius   : 0;
  background      : transparent;
  /* Figma's desktop label is --darker-teal while its border is
     --darkest-teal; that is the design, not a transcription slip. */
  color           : var(--darker-teal);
  text-decoration : none;
  /* Released, and centred, so a longer label can wrap on a phone rather than
     forcing the section wider — the mistake that put a horizontal scroll on
     this very page from a different element. */
  white-space     : normal;
  text-align      : center;
  transition      : background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .btn-outline-square:hover {
    background : var(--darkest-teal);
    color      : var(--white);
  }
}

.btn-outline-square:focus-visible {
  outline        : 2px solid var(--darkest-teal);
  outline-offset : 3px;
}