@charset "UTF-8";
/**
 * CAI Button — styles for the cai_button widget's variants.
 *
 * Values mirror the atomic btn-primary / btn-secondary / btn-tertiary global
 * classes so a CAI Button looks identical to those today. Token fallbacks are
 * used where a design token clearly maps; button-specific colors are literal.
 * To add or restyle a variant, edit here + the matching option in
 * class-cai-button-widget.php.
 *
 * Specificity / naming notes:
 * - Single-dash modifiers (cai-btn-primary, not cai-btn--primary) avoid
 *   Automatic.css's global `[class*="btn--"]` utility hijacking our styles.
 * - Variant rules are scoped under `.cai-btn-wrap` (the widget's own wrapper)
 *   giving 0,3,0 specificity so `color` beats the theme's hrefless-anchor
 *   reset `a:not([href]):not([tabindex])` (0,2,1) without needing !important.
 */
.cai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

/* -------------------------------------------------------------------------
 * Variants
 * ---------------------------------------------------------------------- */
.cai-btn.cai-btn-primary,
.cai-btn-wrap .cai-btn.cai-btn-primary {
  /* 2026-07-19: primary CTA is electric blue in the new layouts (was the
     near-black #191a18 — that look now lives on the tertiary variant). */
  background: var(--cai-color-action, #6A6BD4);
  border-color: var(--cai-color-action-hover, #2f2951);
  color: #fff;
}

.cai-btn.cai-btn-primary:hover,
.cai-btn-wrap .cai-btn.cai-btn-primary:hover {
  background: var(--cai-color-action-hover, #2f2951);
  color: #fff;
}

.cai-btn.cai-btn-primary:active,
.cai-btn-wrap .cai-btn.cai-btn-primary:active {
  background: var(--cai-color-action-active);
  color: #fff;
}

.cai-btn-wrap .cai-btn.cai-btn-secondary {
  background: var(--cai-color-action-soft, #d3e7ff);
  color: var(--cai-color-ink, #141414);
}

.cai-btn-wrap .cai-btn.cai-btn-secondary:hover {
  background: #c2ddff;
  color: var(--cai-color-ink, #141414);
}

.cai-btn-wrap .cai-btn.cai-btn-secondary-light {
  background: var(--cai-color-white, #ffffff);
  border-color: var(--cai-color-action, #6A6BD4);
  color: var(--cai-color-ink, #141414);
}

.cai-btn-wrap .cai-btn.cai-btn-secondary-light:hover {
  background: var(--cai-color-action-hover, #2f2951);
  border-color: var(--cai-color-action-hover, #2f2951);
  color: var(--cai-color-white, #fff);
}

.cai-btn-wrap .cai-btn.cai-btn-tertiary {
  /* Was the old purple (#736dd2); the new layouts have no purple, so
     tertiary inherits the dark fill the old primary wore. */
  background: var(--cai-color-carbon, #191a18);
  color: #fff;
}

.cai-btn-wrap .cai-btn.cai-btn-tertiary:hover {
  opacity: 0.9;
  color: #fff;
}

.cai-btn-wrap .cai-btn.cai-btn-link {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cai-color-action, #6A6BD4);
  text-decoration: underline;
}

.cai-btn-wrap .cai-btn.cai-btn-link:hover {
  opacity: 0.8;
  color: var(--cai-color-action, #6A6BD4);
  text-decoration: underline;
}

.cai-solutions-grid-card .cai-btn-wrap .cai-btn.cai-btn-link {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cai-purple-dark, #2f2951);
  text-decoration: none;
}

.cai-solutions-grid-card .cai-btn-wrap .cai-btn.cai-btn-link:hover {
  text-decoration: underline;
  opacity: 1;
}

.cai-btn-wrap .cai-btn.cai-btn-link-icon {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cai-purple-dark, #2f2951);
  text-decoration: none;
}

.cai-btn-wrap .cai-btn.cai-btn-link-icon:hover {
  text-decoration: underline;
  opacity: 1;
}

.cai-industry-card .cai-btn-wrap .cai-btn.cai-btn-link-icon {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cai-color-action, #6A6BD4);
  text-decoration: none;
}

.cai-industry-card .cai-btn-wrap .cai-btn.cai-btn-link-icon:hover {
  color: var(--cai-purple-dark, #2f2951);
  text-decoration: underline;
  opacity: 1;
}

/* -------------------------------------------------------------------------
 * Sizes (link variant ignores padding sizing)
 * ---------------------------------------------------------------------- */
.cai-btn-wrap .cai-btn.cai-btn-small {
  padding: 8px 16px;
  font-size: 14px;
}

.cai-btn-wrap .cai-btn.cai-btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

.cai-btn-wrap .cai-btn.cai-btn-link.cai-btn-small,
.cai-btn-wrap .cai-btn.cai-btn-link.cai-btn-large {
  padding: 0;
}

/* -------------------------------------------------------------------------
 * Full width
 * ---------------------------------------------------------------------- */
.cai-btn-wrap .cai-btn.cai-btn-full {
  width: 100%;
}

/* Optional inline icon (icon / icon_position controls). */
.cai-btn .cai-btn-icon {
  display: inline-flex;
  align-items: center;
  margin-inline: 0 8px;
  line-height: 0;
}

.cai-btn .cai-btn-icon:last-child {
  margin-inline: 8px 0;
}

.cai-btn .cai-btn-icon svg {
  width: 18px;
  height: 18px;
}

/* Video lightbox overlay (video_lightbox control, assets/js/button.js). */
.cai-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(13, 24, 34, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.cai-lightbox-frame {
  width: min(960px, 100%);
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.cai-lightbox-frame iframe,
.cai-lightbox-frame video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.cai-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}