/* ==========================================================================
   FTS: buttons.css
   Purpose:
   - Fuller Design System default button styling
   - Beaver Builder Button module support
   - Stable variants
   Notes:
   - DS owns the default button appearance.
   - Use stronger selectors than BB theme skin and cached layout CSS.
   - Scope to front-end surfaces only, never Beaver Builder UI chrome.
   ========================================================================== */

:root {
  --fts-btn-radius: 0px;
  --fts-btn-font-weight: 600;
  --fts-btn-line-height: 1.1;
  --fts-btn-pad-y: 10px;
  --fts-btn-pad-x: 40px;
  --fts-btn-border: 2px;
  --fts-btn-transition: 160ms;
}

/* --------------------------------------------------------------------------
   Base button
   -------------------------------------------------------------------------- */
.fl-builder-content .fl-module-button a.fl-button,
.fl-builder-content .fl-button-wrap a.fl-button,
.fl-page-content .fl-button-wrap a.fl-button,
.fl-theme-builder-header .fl-button-wrap a.fl-button,
.fl-theme-builder-footer .fl-button-wrap a.fl-button,
.entry-content a.fl-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;

  font-family: var(--font-sans) !important;
  font-weight: var(--fts-btn-font-weight) !important;
  line-height: var(--fts-btn-line-height) !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;

  padding: var(--fts-btn-pad-y) var(--fts-btn-pad-x) !important;
  border-radius: var(--fts-btn-radius) !important;

  border-width: var(--fts-btn-border) !important;
  border-style: solid !important;
  border-color: var(--ocean) !important;

  background-color: var(--ocean) !important;
  color: var(--white) !important;

  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;

  transition:
    transform var(--fts-btn-transition) ease,
    background-color var(--fts-btn-transition) ease,
    border-color var(--fts-btn-transition) ease,
    color var(--fts-btn-transition) ease,
    box-shadow var(--fts-btn-transition) ease !important;
}

/* Inner text inherits the anchor style */
.fl-builder-content a.fl-button .fl-button-text,
.fl-page-content a.fl-button .fl-button-text,
.fl-theme-builder-header a.fl-button .fl-button-text,
.fl-theme-builder-footer a.fl-button .fl-button-text,
.entry-content a.fl-button .fl-button-text {
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Hover + active */
.fl-builder-content a.fl-button:hover,
.fl-page-content a.fl-button:hover,
.fl-theme-builder-header a.fl-button:hover,
.fl-theme-builder-footer a.fl-button:hover,
.entry-content a.fl-button:hover {
  transform: translateY(-1px);
  background-color: var(--sky) !important;
  border-color: var(--sky) !important;
  color: var(--white) !important;
}

.fl-builder-content a.fl-button:active,
.fl-page-content a.fl-button:active,
.fl-theme-builder-header a.fl-button:active,
.fl-theme-builder-footer a.fl-button:active,
.entry-content a.fl-button:active {
  transform: translateY(0);
}

/* Focus */
.fl-builder-content a.fl-button:focus-visible,
.fl-page-content a.fl-button:focus-visible,
.fl-theme-builder-header a.fl-button:focus-visible,
.fl-theme-builder-footer a.fl-button:focus-visible,
.entry-content a.fl-button:focus-visible {
  outline: 3px solid var(--sky) !important;
  outline-offset: 3px !important;
}

/* Mobile full-width */
@media (max-width: 767.98px) {
  .fl-builder-content .fl-module-button a.fl-button,
  .fl-builder-content .fl-button-wrap a.fl-button,
  .fl-page-content .fl-button-wrap a.fl-button,
  .fl-theme-builder-header .fl-button-wrap a.fl-button,
  .fl-theme-builder-footer .fl-button-wrap a.fl-button,
  .entry-content a.fl-button {
    display: flex !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Variants
   Pattern:
   - Support class on anchor OR on wrap.
   - Use background-color (not shorthand) so overrides are predictable.
   -------------------------------------------------------------------------- */

/* Secondary (filled) */
.fl-builder-content a.fl-button.fts-btn--secondary,
.fl-builder-content .fts-btn--secondary a.fl-button,
.fl-page-content a.fl-button.fts-btn--secondary,
.fl-page-content .fts-btn--secondary a.fl-button {
  background-color: var(--midnight) !important;
  color: var(--white) !important;
  border-color: var(--midnight) !important;
}
.fl-builder-content a.fl-button.fts-btn--secondary:hover,
.fl-builder-content .fts-btn--secondary a.fl-button:hover,
.fl-page-content a.fl-button.fts-btn--secondary:hover,
.fl-page-content .fts-btn--secondary a.fl-button:hover {
  background-color: var(--denim) !important;
  border-color: var(--denim) !important;
}

/* Outline primary */
.fl-builder-content a.fl-button.fts-btn--outline,
.fl-builder-content .fts-btn--outline a.fl-button,
.fl-page-content a.fl-button.fts-btn--outline,
.fl-page-content .fts-btn--outline a.fl-button {
  background-color: transparent !important;
  color: var(--ocean) !important;
  border-color: var(--ocean) !important;
}
.fl-builder-content a.fl-button.fts-btn--outline:hover,
.fl-builder-content .fts-btn--outline a.fl-button:hover,
.fl-page-content a.fl-button.fts-btn--outline:hover,
.fl-page-content .fts-btn--outline a.fl-button:hover {
  background-color: transparent !important;
  color: var(--sky) !important;
  border-color: var(--sky) !important;
}

/* Outline secondary */
.fl-builder-content a.fl-button.fts-btn--outline-secondary,
.fl-builder-content .fts-btn--outline-secondary a.fl-button,
.fl-page-content a.fl-button.fts-btn--outline-secondary,
.fl-page-content .fts-btn--outline-secondary a.fl-button {
  background-color: transparent !important;
  color: var(--midnight) !important;
  border-color: var(--midnight) !important;
}
.fl-builder-content a.fl-button.fts-btn--outline-secondary:hover,
.fl-builder-content .fts-btn--outline-secondary a.fl-button:hover,
.fl-page-content a.fl-button.fts-btn--outline-secondary:hover,
.fl-page-content .fts-btn--outline-secondary a.fl-button:hover {
  background-color: transparent !important;
  color: var(--ocean) !important;
  border-color: var(--ocean) !important;
}

/* Outline white */
.fl-builder-content a.fl-button.fts-btn--outline-white,
.fl-builder-content .fts-btn--outline-white a.fl-button,
.fl-page-content a.fl-button.fts-btn--outline-white,
.fl-page-content .fts-btn--outline-white a.fl-button {
  background-color: transparent !important;
  color: var(--white) !important;
  border-color: var(--white) !important;
}
.fl-builder-content a.fl-button.fts-btn--outline-white:hover,
.fl-builder-content .fts-btn--outline-white a.fl-button:hover,
.fl-page-content a.fl-button.fts-btn--outline-white:hover,
.fl-page-content .fts-btn--outline-white a.fl-button:hover {
  background-color: transparent !important;
  color: var(--sky) !important;
  border-color: var(--sky) !important;
}

/* Small */
.fl-builder-content a.fl-button.fts-btn--small,
.fl-builder-content .fts-btn--small a.fl-button,
.fl-page-content a.fl-button.fts-btn--small,
.fl-page-content .fts-btn--small a.fl-button {
  padding: 8px 20px !important;
  font-size: 0.875rem !important;
}

/* Clear */
.fl-builder-content a.fl-button.fts-btn--clear,
.fl-builder-content .fts-btn--clear a.fl-button,
.fl-page-content a.fl-button.fts-btn--clear,
.fl-page-content .fts-btn--clear a.fl-button {
  background-color: transparent !important;
  color: var(--ocean) !important;
  border-color: transparent !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
}
.fl-builder-content a.fl-button.fts-btn--clear:hover,
.fl-builder-content .fts-btn--clear a.fl-button:hover,
.fl-page-content a.fl-button.fts-btn--clear:hover,
.fl-page-content .fts-btn--clear a.fl-button:hover {
  background-color: transparent !important;
  color: var(--sky) !important;
}