/* ==========================================================================
  FTS: a11y.css
  Purpose:
  - Skip navigation link
  - Focus ring for public UI
  - Content link underline system (hover + keyboard focus)
  - Reduced motion
  - Builder editing exceptions
  ========================================================================== */


/* --------------------------------------------------------------------------
  Skip navigation link
  Visually hidden until focused. Required for WCAG 2.1 AA 2.4.1.
  PHP outputs <a class="fts-skip-nav" href="#content"> as first body element.
  Target #content is the Beaver Builder Theme main content wrapper ID.
  -------------------------------------------------------------------------- */
.fts-skip-nav {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  text-decoration: none;
}

.fts-skip-nav:focus,
.fts-skip-nav:focus-visible {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  clip: auto;
  white-space: normal;
  overflow: visible;
  z-index: 999999;

  background: var(--midnight);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  padding: 14px 24px;
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: 0;
}


/* --------------------------------------------------------------------------
  Focus ring for public UI
  -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus {
  outline: none;
}

:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

:where(*):focus-visible {
  scroll-margin-top: var(--fts-focus-scroll-offset);
}

@media (forced-colors: active) {
  :where(a, button, input, textarea, select, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid CanvasText !important;
  }
}


/* --------------------------------------------------------------------------
  Reduced motion
  -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
  Content link underline: grows from center on hover and keyboard focus.
  This file is the canonical owner of this behavior.
  Excludes component anchors that intentionally use background images
  (.fts-link-card, etc.).
  -------------------------------------------------------------------------- */
:where(main, .entry-content, .fl-builder-content, .fl-rich-text, .fl-module-content)
a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link):not(.fts-link-card) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 0.05em);
  background-size: 0% var(--fts-link-underline-thickness);
  transition: background-size 220ms ease;
}

:where(main, .entry-content, .fl-builder-content, .fl-rich-text, .fl-module-content)
a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link):not(.fts-link-card):hover,
:where(main, .entry-content, .fl-builder-content, .fl-rich-text, .fl-module-content)
a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link):not(.fts-link-card):focus-visible {
  background-size: 100% var(--fts-link-underline-thickness) !important;
}

@media (forced-colors: active) {
  :where(main, .entry-content, .fl-builder-content, .fl-rich-text, .fl-module-content)
  a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link):not(.fts-link-card) {
    background-image: none;
    text-decoration-line: underline !important;
  }
}

/* Never underline controls */
:where(a.fl-button, .fl-button-wrap a, .fl-button-group a, .fl-module-button a) {
  text-decoration: none;
  background-image: none;
}

:where(nav, footer, .fl-page-nav, .fl-page-footer-wrap, .fl-theme-builder-footer) a {
  text-decoration: none;
  background-image: none;
}


/* --------------------------------------------------------------------------
  BB editor canvas: suppress underline animation and focus rings.
  Editors interact with the canvas differently from end users.
  Components using background-image intentionally (cards, tiles) are
  excluded to preserve their appearance in the editor.
  -------------------------------------------------------------------------- */
:where(body.fl-builder, body.fl-builder-edit, body.fl-builder-preview)
:where(.fl-builder-content, .fl-rich-text, .fl-module-content)
a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link):not(.fts-link-card) {
  background-image: none !important;
  text-decoration: none !important;
}

/* Keep focus rings off in the canvas only */
:where(body.fl-builder, body.fl-builder-edit, body.fl-builder-preview)
:where(.fl-builder-content, .fl-rich-text, .fl-module-content)
:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]) {
  outline: none !important;
  box-shadow: none !important;
}