/* ═══════════════════════════════════════════════════════════════
   Cleanly — Button
   Ellipse via percentage border-radius, per gotoroccos.com.
   No SVG, no clip-path. The shape is one declaration.

   Mirrors the Figma component `Button - Get Free Quote` (1251:2569)
   and its variant axes:
       style  Fill | Outline   →  .btn--fill / .btn--outline
       color  Dark | Light     →  .btn--dark / .btn--light
       size   Big              →  .btn--big
   ═══════════════════════════════════════════════════════════════ */

.btn {
  /* — layout — */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;                    /* Figma: 7.975px @15px = 0.53em (icon slot) */

  /* — type — */
  font-family: var(--font-body, 'PP Neue Montreal', system-ui, sans-serif);
  font-weight: 700;
  font-size: var(--btn-size, min(calc(0.75rem + 0.156vw), 15px));   /* 15px @1920 */
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;

  /* — box —
     Vertical .825em lands the default on ~40px.
     Horizontal 2.4em is deliberately wider than vertical: an ellipse
     curves inward at the cap line, so short padding lets glyphs escape
     the arc. Ratio here is 2.91×; Rocco's ships 2.67×. Never go below ~1.8×. */
  padding: .825em 2.4em;        /* vertical reduced 25% from 1.1em */
  border: 2px solid transparent;
  border-radius: 50%;             /* ← the ellipse. 100% renders identically. */
  overflow: hidden;               /* clips any fill effect to the oval */
  position: relative;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color .25s ease,
    border-color     .25s ease,
    color            .25s ease;
}

/* ── Sizes ───────────────────────────────────────────────────
   Anchored to their Figma values at 1920 and scaled on vw, the same
   way the heading and body tokens are — a fixed px label was the only
   type on the page that stopped adapting below the design width. */
.btn--big { --btn-size: min(calc(1rem + 0.208vw), 20px); }    /* Figma "Big" 20px */
.btn--sm  { --btn-size: min(calc(0.65rem + 0.135vw), 13px); } /* 13px */

/* Mobile: every button takes the small step, Big included — per the
   revisions. 13px is Figma's sm value, and what the case study's mobile
   tabs had already settled on. It is also where the default curve sits at
   640px, so a default button does not jump at the breakpoint; only Big
   ones step down. */
@media (max-width: 640px) {
  .btn, .btn--big, .btn--sm { --btn-size: 13px; }
}

/* ── Dark: navy/blue ink, for cream & white grounds ────────── */
.btn--dark.btn--fill {
  color: var(--cream, #FFFBED);
  background: var(--blue, #3847C3);
  border-color: var(--blue, #3847C3);
}
/* Darkens to navy rather than inverting to cream — the label stays put
   and only the ground changes. The outline variants still invert. */
.btn--dark.btn--fill:hover,
.btn--dark.btn--fill:focus-visible {
  color: var(--cream, #FFFBED);
  background: var(--navy, #151A5A);
  border-color: var(--navy, #151A5A);
}
/* With a burst disc the blue has to stay put underneath — the navy disc
   wipes across it. Letting `.btn--burst:hover` blank it to transparent
   would show the page through until the disc finished growing. */
.btn--dark.btn--fill.btn--burst:hover,
.btn--dark.btn--fill.btn--burst:focus-visible {
  background: var(--blue, #3847C3);
}

.btn--dark.btn--outline {
  color: var(--blue, #3847C3);
  background: transparent;
  border-color: var(--blue, #3847C3);
}
.btn--dark.btn--outline:hover,
.btn--dark.btn--outline:focus-visible {
  color: var(--cream, #FFFBED);
  background: var(--blue, #3847C3);
}

/* ── Light: cream ink, for blue & photographic grounds ──────
   `.btn--light.btn--outline` is the navigation "CALL NOW" button. */
.btn--light.btn--outline {
  color: var(--cream, #FFFBED);
  background: transparent;
  border-color: var(--cream, #FFFBED);
}
.btn--light.btn--outline:hover,
.btn--light.btn--outline:focus-visible {
  color: var(--blue, #3847C3);
  background: var(--cream, #FFFBED);
}

.btn--light.btn--fill {
  color: var(--blue, #3847C3);
  background: var(--cream, #FFFBED);
  border-color: var(--cream, #FFFBED);
}
.btn--light.btn--fill:hover,
.btn--light.btn--fill:focus-visible {
  color: var(--cream, #FFFBED);
  background: transparent;
}

/* ── Accessibility ─────────────────────────────────────────── */
.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.btn[aria-disabled='true'],
.btn:disabled {
  opacity: .45;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Optional: JumpFactory's cursor-aware fill.
   A disc grows from the pointer instead of a flat colour change.
   `overflow:hidden` + border-radius clips it to the ellipse.
   Add .btn--burst and drive --x/--y from JS on mouseenter/mouseleave.
   ═══════════════════════════════════════════════════════════════ */
/* Each variant declares what colour the disc should be — this is the
   colour that variant would otherwise have transitioned its background to. */
.btn--dark.btn--outline  { --btn-burst: var(--blue,  #3847C3); }
.btn--dark.btn--fill     { --btn-burst: var(--navy,  #151A5A); }
.btn--light.btn--outline { --btn-burst: var(--cream, #FFFBED); }
.btn--light.btn--fill    { --btn-burst: var(--blue,  #3847C3); }

/* The disc replaces the flat background fade, so switch that off.

   `.btn` is doubled in on purpose. The outline variants' hover rules
   (`.btn--light.btn--outline:hover`, `.btn--dark.btn--outline:hover`) are
   0-3-0 and set a solid background; against this rule's old 0-2-0 they won,
   so every OUTLINE burst button — the header CTA, the case-study tabs, the
   quote flow's back — snapped to full colour at once and the disc grew
   invisibly behind it. At 0-3-0, and later in the file, this wins. The fill
   variants are untouched: `.btn--dark.btn--fill.btn--burst:hover` is 0-4-0
   and keeps its blue ground under the disc, as intended. */
.btn--burst {
  isolation: isolate;
  transition: color .25s ease, border-color .25s ease;
}
.btn.btn--burst:hover,
.btn.btn--burst:focus-visible { background: transparent; }

.btn--burst::before {
  content: '';
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  width: 0; height: 0;            /* square → border-radius:50% gives a true circle */
  border-radius: 50%;
  background: var(--btn-burst, currentColor);
  transform: translate(-50%, -50%);
  transition: width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1);
  z-index: -1;                    /* above the button's own background, below its text */
  pointer-events: none;
}
.btn--burst:hover::before,
.btn--burst:focus-visible::before {
  width: 60em; height: 60em;      /* 900px at 15px — comfortably covers the ellipse */
}

@media (prefers-reduced-motion: reduce) {
  .btn--burst::before { transition: none; }
}