/* ==========================================================================
   FTS: buttons.css
   Purpose: Button defaults and variants, including Beaver Builder native buttons.
   ========================================================================== */

:root {
  --fts-btn-radius: 0px;
  --fts-btn-font-weight: 700;
  --fts-btn-line-height: 1.1;

  --fts-btn-pad-y: 10px;
  --fts-btn-pad-x: 30px;

  --fts-btn-border: 2px;
  --fts-btn-transition: 160ms;
}


/* --- Base Button Reset (Beaver Builder) --- */
:where(.fl-builder-content) :where(a.fl-button, a.fl-button:visited, .fl-button) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  font-family: inherit;
  font-weight: var(--fts-btn-font-weight) !important;
  line-height: var(--fts-btn-line-height) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;

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

  border: var(--fts-btn-border) solid transparent !important;
  text-decoration: 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;
}

/* Keep BB inner span from messing with layout */
:where(.fl-builder-content) :where(a.fl-button, .fl-button) .fl-button-text {
  display: inline-block;
}


/* --- Default Button (Solid Ocean --- */

:where(.fl-builder-content) :where(a.fl-button, .fl-button):not(.fts-btn--secondary):not(.fts-btn--outline):not(.fts-btn--outline-secondary) {
  background: var(--ocean);
  color: var(--white);
}

/* Hover + active motion (applies to all button variants) */
:where(.fl-builder-content) :where(a.fl-button, .fl-button):hover {
  transform: translateY(-1px);
}

:where(.fl-builder-content) :where(a.fl-button, .fl-button):active {
  transform: translateY(0);
}

/* Default hover */
:where(.fl-builder-content) :where(a.fl-button, .fl-button):not(.fts-btn--secondary):not(.fts-btn--outline):not(.fts-btn--outline-secondary):hover {
  background: var(--sky);
}


/* --- Variants (support class on anchor OR wrapper) --- */

/* Solid Primary stays as the default, no class needed */

/* Solid Secondary: Midnight */
:where(.fl-builder-content) :where(.fl-button.fts-btn--secondary, .fts-btn--secondary .fl-button) {
  background: var(--midnight) !important;
  color: var(--white) !important;
}

:where(.fl-builder-content) :where(.fl-button.fts-btn--secondary, .fts-btn--secondary .fl-button):hover {
  background: var(--denim) !important;
}

/* Outline Primary: Ocean */
:where(.fl-builder-content) :where(.fl-button.fts-btn--outline, .fts-btn--outline .fl-button) {
  background: transparent !important;
  color: var(--ocean) !important;
  border-color: var(--ocean) !important;
}
:where(.fl-builder-content) :where(.fl-button.fts-btn--outline, .fts-btn--outline .fl-button) .fl-button-text {
  color: var(--ocean) !important;
}

:where(.fl-builder-content) :where(.fl-button.fts-btn--outline, .fts-btn--outline .fl-button):hover {
  /* background: color-mix(in srgb, var(--ocean) 12%, transparent) !important; */
  background: transparent !important;
  color: var(--sky) !important;
  border-color: var(--sky) !important;
}
:where(.fl-builder-content) :where(.fl-button.fts-btn--outline, .fts-btn--outline .fl-button):hover .fl-button-text {
  color: var(--sky) !important;
}

/* Outline Secondary: Midnight */
:where(.fl-builder-content) :where(.fl-button.fts-btn--outline-secondary, .fts-btn--outline-secondary .fl-button) {
  background: transparent !important;
  color: var(--midnight) !important;
  border-color: var(--midnight) !important;
}
:where(.fl-builder-content) :where(.fl-button.fts-btn--outline-secondary, .fts-btn--outline-secondary .fl-button) .fl-button-text {
  color: var(--midnight) !important;
}

:where(.fl-builder-content) :where(.fl-button.fts-btn--outline-secondary, .fts-btn--outline-secondary .fl-button):hover {
  /* background: color-mix(in srgb, var(--sky) 10%, transparent) !important; */
  color: var(--sky) !important;
  border-color: var(--sky) !important;
}
:where(.fl-builder-content) :where(.fl-button.fts-btn--outline-secondary, .fts-btn--outline-secondary .fl-button):hover .fl-button-text {
  color: var(--sky) !important;
}

/* Outline Tertiary: White */
:where(.fl-builder-content) :where(.fl-button.fts-btn--outline-white, .fts-btn--outline-white .fl-button) {
  background: transparent !important;
  color: var(--white) !important;
  border-color: var(--white) !important;
}
:where(.fl-builder-content) :where(.fl-button.fts-btn--outline-white, .fts-btn--outline-white .fl-button) .fl-button-text {
  color: var(--white) !important;
}

:where(.fl-builder-content) :where(.fl-button.fts-btn--outline-white, .fts-btn--outline-white .fl-button):hover {
  /* background: color-mix(in srgb, var(--sky) 10%, transparent) !important; */
  color: var(--sky) !important;
  border-color: var(--sky) !important;
}
:where(.fl-builder-content) :where(.fl-button.fts-btn--outline-white, .fts-btn--outline-white .fl-button):hover .fl-button-text {
  color: var(--sky) !important;
}

/* Focus */
:where(.fl-builder-content) :where(a.fl-button, .fl-button):focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}

/* --- Mobile Button Layout --- */
/* Notes:
   - Buttons are full-width on mobile for accessibility and tap targets
   - Desktop/tablet behavior remains unchanged
*/

@media (max-width: 767.98px) {
  :where(.fl-builder-content) :where(a.fl-button, .fl-button) {
    display: flex !important;
    width: 100% !important;
  }
}