/* ══ Buttons — core/button style variations ═══════════════════════════════
   Picked in the editor: Button → Styles. Registered in inc/block-styles.php.
   Colors are palette roles (theme.json), so every client recolors them by
   editing the palette, not this file. The default (Fill) look is theme.json
   styles.elements.button.

     Book Now        split pill: base outer pill, primary inner pill, arrow end
     Arrow (outline) label + circled arrow inside a 2px outlined pill
     Arrow (text)    label + circled arrow, no box
     Header Request  10px-corner primary button for the top bar
     Underlined text a plain underlined link (phone numbers, "Get Directions")

   Selectors are .wp-block-button.is-style-x .wp-block-button__link (0,3,0),
   which beats theme.json's element styles (0,1,0) without !important.
   Text/background picked in the block's Color panel still win, because core
   prints those as .has-*-color classes on the link with !important.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared — motion and the circled-arrow icon ───────────────────────────── */

.wp-block-button[class*="is-style-"] .wp-block-button__link {
  --btn-dur  : 0.3s;
  --btn-ease : cubic-bezier(0.22, 0.61, 0.36, 1);   /* quick to answer, soft to land */
  /* Circled arrow (19px incl. its 2px stroke), drawn as a mask so it takes any color. */
  --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");
  white-space : nowrap;
  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;
}
.wp-block-button[class*="is-style-"] .wp-block-button__link:focus-visible {
  outline        : 2px solid currentColor;
  outline-offset : 3px;
}

/* ══ 1. Book Now — split pill ═════════════════════════════════════════════
   The primary inner pill is the link's own background; the base-colored rim
   and arrow end are inset shadows, so contrast checkers read label vs primary. */

.wp-block-button.is-style-book-now .wp-block-button__link {
  --btn-bg   : var(--wp--preset--color--base);
  --btn-fill : var(--wp--preset--color--primary);
  --btn-rim  : 0.25rem;
  display          : inline-flex;
  align-items      : center;
  gap              : 1.5625rem;
  padding          : 0.75rem 0.625rem 0.75rem 1.375rem;
  border-radius    : var(--wp--custom--radius--pill);
  background-color : var(--btn-fill);
  color            : var(--btn-bg);
  font-size        : var(--wp--preset--font-size--body-sm);
  font-weight      : 400;
  box-shadow       : inset 0 0 0 var(--btn-rim) var(--btn-bg),
                     inset -2rem 0 0 var(--btn-rim) var(--btn-bg);
}
.wp-block-button.is-style-book-now .wp-block-button__link::after {
  content          : "";
  flex             : 0 0 auto;
  width            : 1.1875rem;
  height           : 1.1875rem;
  background-color : var(--btn-fill);
  -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);
}
@media (hover: hover) {
  .wp-block-button.is-style-book-now .wp-block-button__link:hover {
    box-shadow : inset 0 0 0 var(--btn-rim) var(--btn-bg),
                 inset -0.0625rem 0 0 var(--btn-rim) var(--btn-bg);
  }
  .wp-block-button.is-style-book-now .wp-block-button__link:hover::after {
    background-color : var(--btn-bg);
    transform        : translateX(0.1875rem);
  }
}
.wp-block-button.is-style-book-now .wp-block-button__link:active { transform: scale(0.97); }

/* ══ 2. Arrow — outline pill / text only ═════════════════════════════════
   Color follows the text around it (currentColor), so the same button works
   on light and dark sections with no "light" variant. */

.wp-block-button.is-style-arrow-box .wp-block-button__link,
.wp-block-button.is-style-arrow-link .wp-block-button__link {
  display          : inline-flex;
  align-items      : center;
  gap              : 0.75rem;
  background-color : transparent;
  color            : inherit;
  font-size        : var(--wp--preset--font-size--body-sm);
  font-weight      : 400;
}
.wp-block-button.is-style-arrow-box .wp-block-button__link::after,
.wp-block-button.is-style-arrow-link .wp-block-button__link::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);
}
.wp-block-button.is-style-arrow-box .wp-block-button__link {
  padding       : 0.625rem 1.125rem;
  border        : 2px solid currentColor;
  border-radius : var(--wp--custom--radius--pill);
}
.wp-block-button.is-style-arrow-link .wp-block-button__link { padding: 0; }
@media (hover: hover) {
  .wp-block-button.is-style-arrow-box .wp-block-button__link:hover::after,
  .wp-block-button.is-style-arrow-link .wp-block-button__link:hover::after { transform: translateX(0.1875rem); }
  /* Hover tints the pill with its own text color, so it works on any section. */
  .wp-block-button.is-style-arrow-box .wp-block-button__link:hover { background-color: color-mix(in srgb, currentColor 14%, transparent); }
}
.wp-block-button.is-style-arrow-box .wp-block-button__link:active { transform: scale(0.97); }

/* ══ 3. Header Request — top-bar button (10px corners, pushes down) ══════ */

.wp-block-button.is-style-header-request .wp-block-button__link {
  padding          : 0.375rem 1.25rem;
  border-radius    : var(--wp--custom--radius--button);
  background-color : var(--wp--preset--color--primary);
  color            : var(--wp--preset--color--base);
  font-size        : var(--wp--preset--font-size--subheading-sm);
  font-weight      : 700;
  letter-spacing   : -0.01em;
  text-transform   : uppercase;
}
.wp-block-button.is-style-header-request .wp-block-button__link:hover {
  background-color : color-mix(in srgb, var(--wp--preset--color--primary) 86%, #000);
  transform        : translateY(1px);
  box-shadow       : inset 0 2px 4px rgb(0 0 0 / 0.28);
}
.wp-block-button.is-style-header-request .wp-block-button__link:focus-visible { outline-color: var(--wp--preset--color--primary); }

/* ══ 4. Underlined text — a link that sits in running text ═══════════════ */

.wp-block-button.is-style-text-link .wp-block-button__link {
  padding          : 0;
  border-radius    : 0;
  background-color : transparent;
  color            : inherit;
  font-size        : inherit;
  font-weight      : inherit;
  text-decoration  : underline;
  text-underline-offset : 0.15em;
}

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

@media (max-width: 980px) {
  .wp-block-button.is-style-arrow-box .wp-block-button__link    { padding: 0.375rem 0.75rem; gap: 0.5rem; }
  .wp-block-button.is-style-header-request .wp-block-button__link { padding: 0.3125rem 0.75rem; }
}

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

@media (prefers-reduced-motion: reduce) {
  .wp-block-button[class*="is-style-"] .wp-block-button__link,
  .wp-block-button[class*="is-style-"] .wp-block-button__link::after { transition-property: background-color, color, box-shadow; transform: none !important; }
}

/* ══ Forge RX — the design's buttons ══════════════════════════════════════
   Default (theme.json elements.button): gold gradient, Ink label (7.58:1),
   square, Archivo 800 caps. Size is per block: Typography → size + Dimensions
   → padding (cards and the header use 12.5px, the closing CTA 15px).

     Outline (on dark)   Bone hairline + Bone label, for photo and Ink bands
     Dark                Ink box + Bone label, turns gold on hover
     Outline (on light)  Ink hairline + Ink label
     Label link →        no box: 11px gold caps ("Learn more →", "Back to top")
   ════════════════════════════════════════════════════════════════════════ */

.wp-block-button .wp-block-button__link { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
/* A background colour picked in the editor replaces the gradient. */
.wp-block-button .wp-block-button__link.has-background { background-image: none; }
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:not(.has-background):hover {
  background : var(--wp--preset--color--base);
  color      : var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline-light .wp-block-button__link {
  background : none;
  border     : 1px solid color-mix(in srgb, var(--wp--preset--color--base) 50%, transparent);
  color      : var(--wp--preset--color--base);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
  background   : color-mix(in srgb, var(--wp--preset--color--base) 10%, transparent);
  border-color : var(--wp--preset--color--base);
}

.wp-block-button.is-style-dark .wp-block-button__link {
  background : var(--wp--preset--color--contrast);
  color      : var(--wp--preset--color--base);
}
.wp-block-button.is-style-dark .wp-block-button__link:hover {
  background : var(--wp--preset--gradient--gold);
  color      : var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline-dark .wp-block-button__link {
  background : none;
  border     : 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
  color      : var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline-dark .wp-block-button__link:hover {
  background   : color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
  border-color : var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-label-link .wp-block-button__link {
  padding        : 0;
  background     : none;
  color          : var(--wp--preset--color--gold-deep);
  font-family    : inherit;
  font-size      : var(--wp--preset--font-size--label);
  font-weight    : 700;
  letter-spacing : 0.16em;
}
.wp-block-button.is-style-label-link .wp-block-button__link:hover { color: var(--wp--preset--color--contrast); }