/* Launch accessibility fundamentals.
 * Keep keyboard focus obvious across navigation, intake controls and calls to
 * action without changing mouse/touch presentation or booking behavior.
 */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #0b5fff;
  outline-offset: 3px;
}

:where(.fx-primary, .fx-secondary-button, .fx-request-cta, .fx-mobile-request):focus-visible {
  outline-color: currentColor;
  box-shadow: 0 0 0 4px #fff;
}

:where(input, textarea, select):focus-visible {
  border-color: #0b5fff;
}

.fx-mobile-menu > summary:focus-visible {
  border-radius: 8px;
}

/* Keep repeated navigation out of the way for keyboard users. The bypass link
 * is visually quiet until focused, then becomes an obvious first action. */
.fx-skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: #fff;
  color: #0b5fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}

.fx-skip-link:focus-visible {
  transform: translateY(0);
}

/* Public hierarchy mobile touch targets.
 * Keep the customer's next action forgiving on narrow screens: section
 * navigation, the menu control, mobile menu rows, primary help CTAs and
 * related-page links all receive a minimum 44px interaction height. This is
 * presentation-only; classification/routing/provider choice still stays
 * behind the request.
 */
@media (max-width: 760px) {
  .fx-mobile-menu > summary {
    min-width: 44px;
    min-height: 44px;
  }

  .fx-mobile-menu nav a,
  .fx-subnav a,
  .fx-page-public .fx-page-hero-action a,
  .fx-page-public .fx-page-cta a,
  .fx-page-public .fx-related-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .fx-page-public .fx-page-hero-action a,
  .fx-page-public .fx-page-cta a {
    justify-content: center;
  }
}

/* Respect the visitor's operating-system motion preference across the public
 * website. This keeps the interface calm for motion-sensitive visitors while
 * leaving ordinary presentation and booking behavior unchanged. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, textarea, select, summary):focus-visible {
    outline: 2px solid CanvasText;
    box-shadow: none;
  }

  .fx-skip-link {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}