/* =========================================================================
   TWL Accessibility (WCAG 2.2 AA) — twl-a11y.css
   European Accessibility Act compliance layer. Front-end only.
   NOTE: Contrast is handled separately in twl-contrast-fix.css — NOT here.
   Uses @layer so it overrides legacy CSS without adding new !important.
   ========================================================================= */

@layer twl-a11y {

  /* ---- Visible keyboard focus (consistent, orange/light) ---------------- */
  /* Only show the ring for keyboard users (:focus-visible), never on mouse. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible,
  [role="button"]:focus-visible,
  [role="tab"]:focus-visible,
  [role="slider"]:focus-visible,
  [role="menuitem"]:focus-visible,
  .twl-glass-accordion__trigger:focus-visible,
  .twl-dz__head:focus-visible,
  .service-card:focus-visible,
  .twl-ba:focus-visible,
  .twl-ba__wrapper:focus-visible {
    outline: 3px solid #ff7a18;
    outline-offset: 2px;
    border-radius: 4px;
    box-shadow: 0 0 0 5px rgba(255, 122, 24, .25);
  }

  /* Dark hero / image surfaces: keep the ring readable on bright photos. */
  .twl-ba:focus-visible,
  .twl-ba__wrapper:focus-visible,
  .service-card:focus-visible {
    outline-color: #ffffff;
    box-shadow: 0 0 0 5px rgba(255, 122, 24, .55);
  }

  /* Inputs: a softer inner ring so it never clips inside dark fields. */
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline-offset: 1px;
  }

  /* Remove the legacy non-visible outline jump for pointer users. */
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible),
  .twl-dz__head:focus:not(:focus-visible),
  .twl-glass-accordion__trigger:focus:not(:focus-visible) {
    outline: none;
  }

  /* ---- Target size (WCAG 2.2 §2.5.8 — minimum 24x24 CSS px) ------------- */
  /* Small icon controls: pad the hit area without changing visual size. */
  .services-slider-indicator .arrow,
  .twl-dz__chev,
  .twl-glass-accordion__icon,
  button.twl-a11y-min,
  a.twl-a11y-min,
  [role="button"].twl-a11y-min {
    min-width: 24px;
    min-height: 24px;
  }

  /* Carousel arrow buttons (injected role=button) get a real tap target. */
  .services-slider-indicator [role="button"],
  .services-slider-indicator .arrow[tabindex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* ---- Screen-reader-only utility (matches WP core .screen-reader-text) - */
  .twl-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* Become visible when focused (e.g. an injected skip target link). */
  .twl-sr-only.twl-sr-focusable:focus {
    position: static !important;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip: auto; white-space: normal;
  }

}

/* ---- prefers-reduced-motion: global fallback (outside @layer so it always
   wins regardless of cascade-layer ordering) ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Pause decorative looping/auto-playing motion components. */
  .twl-dz__halo,
  .twl-dz__gauge,
  .twl-dz__hud,
  .twl-particles-bg,
  [data-twl-animate],
  [data-twl-stagger] {
    animation: none !important;
    transition: none !important;
  }
  html:focus-within {
    scroll-behavior: auto !important;
  }
}