/* ==========================================================================
   FTS: buttons.css
   DS-owned button styling for BB Button and Button Group modules.
   All button tokens are defined in tokens.css.

   :is() collapses the five context selectors BB requires — same specificity
   result as listing them individually, significantly fewer lines.
   ========================================================================== */

/* Base button ------------------------------------------------------------- */
:is(
  .fl-builder-content,
  .fl-page-content,
  .fl-theme-builder-header,
  .fl-theme-builder-footer,
  .entry-content
) :is(.fl-module-button, .fl-button-wrap) a.fl-button,
.fl-builder-content .fl-module-button 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;
}

/* .fl-button-text is a BB-generated child span — ensure it inherits */
:is(
  .fl-builder-content,
  .fl-page-content,
  .fl-theme-builder-header,
  .fl-theme-builder-footer,
  .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;
}

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

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

/* Uses DS tokens — not hardcoded values — so focus ring updates globally */
:is(
  .fl-builder-content,
  .fl-page-content,
  .fl-theme-builder-header,
  .fl-theme-builder-footer,
  .entry-content
) a.fl-button:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring) !important;
  outline-offset: var(--fts-focus-offset) !important;
}

/* Button group ------------------------------------------------------------ */
:is(
  .fl-builder-content,
  .fl-page-content,
  .fl-theme-builder-header,
  .fl-theme-builder-footer,
  .entry-content
) .fl-module-button-group .fl-button-group-button { display: flex; }

:is(
  .fl-builder-content,
  .fl-page-content,
  .fl-theme-builder-header,
  .fl-theme-builder-footer,
  .entry-content
) .fl-module-button-group .fl-button-wrap { width: 100%; }

:is(
  .fl-builder-content,
  .fl-page-content,
  .fl-theme-builder-header,
  .fl-theme-builder-footer,
  .entry-content
) .fl-module-button-group a.fl-button {
  width: 100%;
  min-height: 44px; /* WCAG 2.5.5 minimum touch target */
}

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

  :is(
    .fl-builder-content,
    .fl-page-content,
    .fl-theme-builder-header,
    .fl-theme-builder-footer,
    .entry-content
  ) .fl-module-button-group.fl-button-group-layout-horizontal {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem;
  }

  :is(
    .fl-builder-content,
    .fl-page-content,
    .fl-theme-builder-header,
    .fl-theme-builder-footer,
    .entry-content
  ) .fl-module-button-group .fl-button-group-button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Variants — support class on anchor OR on wrap --------------------------- */

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

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

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

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

:is(.fl-builder-content, .fl-page-content)
:is(a.fl-button.fts-btn--small, .fts-btn--small a.fl-button) {
  padding: 8px 20px !important;
  font-size: var(--fts-text-sm) !important;
}

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