/* =====================================================================
 * BUTTON HOVER — the single sitewide treatment for every CTA button.
 * Added 2026-09-21.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * Button hover was inconsistent across the site. An audit of all 33
 * stylesheets plus a live forced-:hover probe of 13 pages found:
 *
 *   - 3 different SHADOW/GLOW hovers, which the user asked to remove:
 *       .site-header__cta        drop-shadow 6px/.64 -> 10px/.82
 *       11 amber page CTAs       none -> drop-shadow 14px/.92
 *       shopify-cta__button,     none -> box-shadow 0 6px 18px
 *       svcl-insights__all
 *   - 17 hover rules left as EMPTY stubs by the 2026-09-18 "remove the
 *     zoom" pass, so those buttons had no hover at all;
 *   - 16 rules that already did a colour change, but with no agreed
 *     direction — amber brightened (#ffef5c), one purple darkened
 *     (#5f04c6) while another lightened (#8a2bff).
 *
 * THE RULE NOW, EVERYWHERE
 * ------------------------
 * A button lightens its own fill on hover. Nothing else moves: no
 * shadow, no glow, no scale, no lift. Same 0.2s ease and the same
 * :focus-visible parity on every button, so keyboard and pointer agree.
 *
 * Lightening rather than darkening is the theme's own existing
 * convention, not a new invention: `.contact-cta__button` already went
 * #f7e934 -> #ffef5c and `.rec-test__cta-submit` #7605f5 -> #8a2bff.
 * Most of this site is dark, where a darker hover reads as the button
 * switching off.
 *
 * WHY THIS FILE AND NOT hover-system.css
 * --------------------------------------
 * hover-system.css is gated to 54 templates (hire / service / 5 AI
 * pages) because its CARD rules are scoped to those families. Buttons
 * exist on every page, including home, about, blog, portfolio, careers,
 * contact, resources, 404 and the 8 /ai/* hub pages. This file is
 * enqueued sitewide and LAST, so it settles the cascade on load order;
 * the `body.tbi-btn-fx` scope (added by tbi_ai_btn_fx_body_class()) puts
 * it at 0,3,1 so it also beats the body-scoped page rules such as
 * `body.page-template-about-us .abt-life__btn:hover`.
 *
 * ADDING A BUTTON
 * ---------------
 * Put its class in the family below whose RESTING fill it already uses.
 * Do not add a new family unless the button genuinely introduces a new
 * resting colour, and do not give one button its own special hover —
 * that is the inconsistency this file exists to end.
 *
 * NOT IN SCOPE, deliberately
 * --------------------------
 * Text links and icon links (.hero__cta, .notfound__link,
 * .primary-nav__link, footer newsletter arrow), tabs and chips
 * (.sub-header__tab, .portfolio-jumpnav__link, .contact-info__nav-btn,
 * .nav-dropdown__tag), carousel arrows, video play buttons, FAQ
 * toggles, social links, and the CookieYes plugin's own .cky-* buttons.
 * Those are not CTA buttons; they carry their own state affordances and
 * are left exactly as they were. CARD hover is likewise untouched — it
 * lives in hover-system.css and the request was about buttons.
 * ===================================================================== */

body.tbi-btn-fx {
  /* Each token is its family's resting fill lightened. Kept here rather
     than inline so the relationship between the families stays visible
     and a future button cannot quietly invent a 12th colour. */
  --tbi-btn-amber-hover: #ffef5c;   /* from #f7e934 / #f6e339 */
  --tbi-btn-purple-hover: #8a2bff;  /* from #7605f5            */
  --tbi-btn-deep-hover: #6b45a3;    /* from #543582            */
  --tbi-btn-violet-hover: #b184fc;  /* from #9a60fb            */
  --tbi-btn-plum-hover: #8f16e6;    /* from #7500c0            */
  --tbi-btn-ink-hover: #2e2e2e;     /* from #171717            */
  --tbi-btn-ghost-hover: rgba(255, 255, 255, 0.12); /* transparent on dark  */
  --tbi-btn-ghost-light-hover: rgba(118, 5, 245, 0.08); /* transparent on light */
  --tbi-btn-outline-hover: rgba(23, 23, 23, 0.06);  /* #171717 outline on white */
}

/* ---------------------------------------------------------------------
 * The shared mechanic. One transition list for every button, so the
 * timing cannot drift per family. `filter` is in the list only so the
 * header CTA's resting glow does not jump if anything ever animates it.
 * ------------------------------------------------------------------ */
body.tbi-btn-fx .site-header__cta,
body.tbi-btn-fx .primary-nav__cta,
body.tbi-btn-fx .mobile_footer__cta,
body.tbi-btn-fx .contact-cta__button,
body.tbi-btn-fx .abt-final__btn,
body.tbi-btn-fx .crr-form__submit,
body.tbi-btn-fx .automate__btn,
body.tbi-btn-fx .hrf-cta2__btn,
body.tbi-btn-fx .hrf-ai__cta-btn,
body.tbi-btn-fx .aiaa-lm__cta-btn,
body.tbi-btn-fx .aiaa-midcta__btn,
body.tbi-btn-fx .aiaa-final__btn,
body.tbi-btn-fx .reqcta__btn,
body.tbi-btn-fx .waf-cta__btn,
body.tbi-btn-fx .aib-btn,
body.tbi-btn-fx .aud-form__submit,
body.tbi-btn-fx .aids-btn,
body.tbi-btn-fx .automation-platform__cta--primary,
body.tbi-btn-fx .aibusiness-opportunities__cta-button,
body.tbi-btn-fx .notfound__cta,
body.tbi-btn-fx .abt-life__btn,
body.tbi-btn-fx .blog-promo__cta,
body.tbi-btn-fx .wp-block-button__link,
body.tbi-btn-fx .ecom-why__cta-btn,
body.tbi-btn-fx .casestudy__cta,
body.tbi-btn-fx .promo-cta__button,
body.tbi-btn-fx .our-work-cta__btn,
body.tbi-btn-fx .rec-test__cta-submit,
body.tbi-btn-fx .shopify_service-stats__cta,
body.tbi-btn-fx .shopify-stats__cta,
body.tbi-btn-fx .aichat-cta__button,
body.tbi-btn-fx .aibusiness-cta__button,
body.tbi-btn-fx .automation-cta__button,
body.tbi-btn-fx .dms-cta__button,
body.tbi-btn-fx .ecom-cta__button,
body.tbi-btn-fx .rec-cta__button,
body.tbi-btn-fx .shopify_service-cta__button,
body.tbi-btn-fx .shopify-cta__button,
body.tbi-btn-fx .portfolio-cta .content .btn_common,
body.tbi-btn-fx .cat_section_headings .cat_link a,
body.tbi-btn-fx .automation-platform__cta--secondary,
body.tbi-btn-fx .svcl-insights__all {
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

/* ---------------------------------------------------------------------
 * FAMILY 1 — amber CTA, resting #f7e934 (a couple sit on #f6e339)
 * The most common button on the site: the header CTA, the sticky mobile
 * CTA, and the closing CTA of nearly every page family.
 * ------------------------------------------------------------------ */
body.tbi-btn-fx .site-header__cta:hover,
body.tbi-btn-fx .site-header__cta:focus-visible,
body.tbi-btn-fx .primary-nav__cta:hover,
body.tbi-btn-fx .primary-nav__cta:focus-visible,
body.tbi-btn-fx .mobile_footer__cta:hover,
body.tbi-btn-fx .mobile_footer__cta:focus-visible,
body.tbi-btn-fx .contact-cta__button:hover,
body.tbi-btn-fx .contact-cta__button:focus-visible,
body.tbi-btn-fx .abt-final__btn:hover,
body.tbi-btn-fx .abt-final__btn:focus-visible,
body.tbi-btn-fx .crr-form__submit:hover,
body.tbi-btn-fx .crr-form__submit:focus-visible,
body.tbi-btn-fx .automate__btn:hover,
body.tbi-btn-fx .automate__btn:focus-visible,
body.tbi-btn-fx .hrf-cta2__btn:hover,
body.tbi-btn-fx .hrf-cta2__btn:focus-visible,
body.tbi-btn-fx .hrf-ai__cta-btn:hover,
body.tbi-btn-fx .hrf-ai__cta-btn:focus-visible,
body.tbi-btn-fx .aiaa-lm__cta-btn:hover,
body.tbi-btn-fx .aiaa-lm__cta-btn:focus-visible,
body.tbi-btn-fx .aiaa-midcta__btn:hover,
body.tbi-btn-fx .aiaa-midcta__btn:focus-visible,
body.tbi-btn-fx .aiaa-final__btn:hover,
body.tbi-btn-fx .aiaa-final__btn:focus-visible,
body.tbi-btn-fx .reqcta__btn:hover,
body.tbi-btn-fx .reqcta__btn:focus-visible,
body.tbi-btn-fx .waf-cta__btn:hover,
body.tbi-btn-fx .waf-cta__btn:focus-visible,
body.tbi-btn-fx .aib-btn:hover,
body.tbi-btn-fx .aib-btn:focus-visible,
body.tbi-btn-fx .aud-form__submit:hover,
body.tbi-btn-fx .aud-form__submit:focus-visible,
body.tbi-btn-fx .aids-btn:hover,
body.tbi-btn-fx .aids-btn:focus-visible,
body.tbi-btn-fx .automation-platform__cta--primary:hover,
body.tbi-btn-fx .automation-platform__cta--primary:focus-visible,
body.tbi-btn-fx .aibusiness-opportunities__cta-button:hover,
body.tbi-btn-fx .aibusiness-opportunities__cta-button:focus-visible {
  background-color: var(--tbi-btn-amber-hover);
  /* `background-image` is reset because .site-header__cta paints its fill
     with a radial gradient (Figma 1146:11267) that would otherwise sit on
     top of the hover colour and swallow it. */
  background-image: none;
}

/* ---------------------------------------------------------------------
 * FAMILY 2 — bright purple CTA, resting #7605f5
 * ------------------------------------------------------------------ */
body.tbi-btn-fx .notfound__cta--primary:hover,
body.tbi-btn-fx .notfound__cta--primary:focus-visible,
body.tbi-btn-fx .abt-life__btn--solid:hover,
body.tbi-btn-fx .abt-life__btn--solid:focus-visible,
body.tbi-btn-fx .blog-promo__cta:hover,
body.tbi-btn-fx .blog-promo__cta:focus-visible,
body.tbi-btn-fx .wp-block-button__link:hover,
body.tbi-btn-fx .wp-block-button__link:focus-visible,
body.tbi-btn-fx .ecom-why__cta-btn:hover,
body.tbi-btn-fx .ecom-why__cta-btn:focus-visible,
body.tbi-btn-fx .casestudy__cta--primary:hover,
body.tbi-btn-fx .casestudy__cta--primary:focus-visible,
body.tbi-btn-fx .promo-cta__button--purple:hover,
body.tbi-btn-fx .promo-cta__button--purple:focus-visible,
body.tbi-btn-fx .our-work-cta__btn--purple:hover,
body.tbi-btn-fx .our-work-cta__btn--purple:focus-visible,
body.tbi-btn-fx .rec-test__cta-submit:hover,
body.tbi-btn-fx .rec-test__cta-submit:focus-visible,
body.tbi-btn-fx .shopify_service-stats__cta:hover,
body.tbi-btn-fx .shopify_service-stats__cta:focus-visible,
body.tbi-btn-fx .shopify-stats__cta:hover,
body.tbi-btn-fx .shopify-stats__cta:focus-visible {
  background-color: var(--tbi-btn-purple-hover);
}

/* ---------------------------------------------------------------------
 * FAMILY 3 — deep purple CTA, resting #543582
 * The closing CTA band on the legacy/ACF page families.
 * ------------------------------------------------------------------ */
body.tbi-btn-fx .aichat-cta__button:hover,
body.tbi-btn-fx .aichat-cta__button:focus-visible,
body.tbi-btn-fx .aibusiness-cta__button:hover,
body.tbi-btn-fx .aibusiness-cta__button:focus-visible,
body.tbi-btn-fx .automation-cta__button:hover,
body.tbi-btn-fx .automation-cta__button:focus-visible,
body.tbi-btn-fx .dms-cta__button:hover,
body.tbi-btn-fx .dms-cta__button:focus-visible,
body.tbi-btn-fx .ecom-cta__button:hover,
body.tbi-btn-fx .ecom-cta__button:focus-visible,
body.tbi-btn-fx .rec-cta__button:hover,
body.tbi-btn-fx .rec-cta__button:focus-visible,
body.tbi-btn-fx .shopify_service-cta__button:hover,
body.tbi-btn-fx .shopify_service-cta__button:focus-visible,
body.tbi-btn-fx .shopify-cta__button:hover,
body.tbi-btn-fx .shopify-cta__button:focus-visible {
  background-color: var(--tbi-btn-deep-hover);
}

/* ---------------------------------------------------------------------
 * FAMILY 4 — violet pills, resting #9a60fb and #7500c0
 * ------------------------------------------------------------------ */
body.tbi-btn-fx .portfolio-cta .content .btn_common:hover,
body.tbi-btn-fx .portfolio-cta .content .btn_common:focus-visible {
  background-color: var(--tbi-btn-violet-hover);
}

body.tbi-btn-fx .cat_section_headings .cat_link a:hover,
body.tbi-btn-fx .cat_section_headings .cat_link a:focus-visible {
  background-color: var(--tbi-btn-plum-hover);
}

/* ---------------------------------------------------------------------
 * FAMILY 5 — near-black CTA, resting #171717
 * Lightens, because #171717 has nowhere darker to go on a dark page.
 * ------------------------------------------------------------------ */
body.tbi-btn-fx .promo-cta__button--dark:hover,
body.tbi-btn-fx .promo-cta__button--dark:focus-visible,
body.tbi-btn-fx .our-work-cta__btn--dark:hover,
body.tbi-btn-fx .our-work-cta__btn--dark:focus-visible {
  background-color: var(--tbi-btn-ink-hover);
}

/* ---------------------------------------------------------------------
 * FAMILY 6 — ghost buttons. There is no fill to lighten, so the hover
 * IS the fill arriving: a translucent wash of the surrounding ink, which
 * keeps the border and label exactly as they were.
 * ------------------------------------------------------------------ */
body.tbi-btn-fx .casestudy__cta--ghost:hover,
body.tbi-btn-fx .casestudy__cta--ghost:focus-visible,
body.tbi-btn-fx .abt-life__btn--ghost:hover,
body.tbi-btn-fx .abt-life__btn--ghost:focus-visible,
body.tbi-btn-fx .automation-platform__cta--secondary:hover,
body.tbi-btn-fx .automation-platform__cta--secondary:focus-visible {
  background-color: var(--tbi-btn-ghost-hover);
  /* content.css:6286 flipped this one to a solid white fill with near
     black text, which was the loudest hover on the site and the reason
     the set read as unrelated. Holding the label colour keeps it in
     step with every other ghost button. */
  color: var(--color-text-light, #ffffff);
}

/* Purple outline on a light surface (404). */
body.tbi-btn-fx .notfound__cta--secondary:hover,
body.tbi-btn-fx .notfound__cta--secondary:focus-visible {
  background-color: var(--tbi-btn-ghost-light-hover);
}

/* Near-black outline on white (service landing "view all"). */
body.tbi-btn-fx .svcl-insights__all:hover,
body.tbi-btn-fx .svcl-insights__all:focus-visible {
  background-color: var(--tbi-btn-outline-hover);
}

/* ---------------------------------------------------------------------
 * REDUCED MOTION — the colour still changes, it just arrives at once.
 * The hover is the affordance; only the fade is motion.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.tbi-btn-fx .site-header__cta,
  body.tbi-btn-fx .primary-nav__cta,
  body.tbi-btn-fx .mobile_footer__cta,
  body.tbi-btn-fx .contact-cta__button,
  body.tbi-btn-fx .abt-final__btn,
  body.tbi-btn-fx .crr-form__submit,
  body.tbi-btn-fx .automate__btn,
  body.tbi-btn-fx .hrf-cta2__btn,
  body.tbi-btn-fx .hrf-ai__cta-btn,
  body.tbi-btn-fx .aiaa-lm__cta-btn,
  body.tbi-btn-fx .aiaa-midcta__btn,
  body.tbi-btn-fx .aiaa-final__btn,
  body.tbi-btn-fx .reqcta__btn,
  body.tbi-btn-fx .waf-cta__btn,
  body.tbi-btn-fx .aib-btn,
  body.tbi-btn-fx .aud-form__submit,
  body.tbi-btn-fx .aids-btn,
  body.tbi-btn-fx .automation-platform__cta--primary,
  body.tbi-btn-fx .aibusiness-opportunities__cta-button,
  body.tbi-btn-fx .notfound__cta,
  body.tbi-btn-fx .abt-life__btn,
  body.tbi-btn-fx .blog-promo__cta,
  body.tbi-btn-fx .wp-block-button__link,
  body.tbi-btn-fx .ecom-why__cta-btn,
  body.tbi-btn-fx .casestudy__cta,
  body.tbi-btn-fx .promo-cta__button,
  body.tbi-btn-fx .our-work-cta__btn,
  body.tbi-btn-fx .rec-test__cta-submit,
  body.tbi-btn-fx .shopify_service-stats__cta,
  body.tbi-btn-fx .shopify-stats__cta,
  body.tbi-btn-fx .aichat-cta__button,
  body.tbi-btn-fx .aibusiness-cta__button,
  body.tbi-btn-fx .automation-cta__button,
  body.tbi-btn-fx .dms-cta__button,
  body.tbi-btn-fx .ecom-cta__button,
  body.tbi-btn-fx .rec-cta__button,
  body.tbi-btn-fx .shopify_service-cta__button,
  body.tbi-btn-fx .shopify-cta__button,
  body.tbi-btn-fx .portfolio-cta .content .btn_common,
  body.tbi-btn-fx .cat_section_headings .cat_link a,
  body.tbi-btn-fx .automation-platform__cta--secondary,
  body.tbi-btn-fx .svcl-insights__all {
    transition: none;
  }
}