/* ===========================================================================
 * IMPACT Class Reviews — WCAG 2.2 AA remediation, CSS layer
 * ===========================================================================
 *
 * Companion to icr-a11y-structure.js. Color contrast lives in a separate
 * plugin (icr-a11y-contrast) so the two concerns stay reviewable apart.
 * =========================================================================== */


/* ---------------------------------------------------------------------------
 * 1. PAUSE / PLAY CONTROL FOR AUTOPLAYING SLIDERS
 *    WCAG 2.2.2 Pause, Stop, Hide (A). Button inserted by
 *    icr-a11y-structure.js (fixSwiperAutoplay).
 *
 *    A translucent dark disc (rgba(17,24,39,.6)).
 *    Worst case is a white background, where the disc composites to
 *    #70747D: white icon on it and disc on white are both 4.68:1, so
 *    1.4.11 Non-text Contrast holds on any background, including the blue
 *    band. !important on the box properties, because Hello Elementor styles
 *    every <button> with a pink border, padding and hover fill.
 * ------------------------------------------------------------------------- */

.icr-pause-toggle {
  position: absolute !important;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  inset-block-start: auto;
  inset-inline-start: auto;
  z-index: 20;
  inline-size: 32px !important;
  block-size: 32px !important;
  min-inline-size: 32px;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 50% !important;
  background: rgba(17, 24, 39, 0.6) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.icr-pause-toggle:hover {
  background: rgba(17, 24, 39, 0.85) !important;
}

.icr-pause-toggle-icon {
  display: block;
  box-sizing: content-box;
}

.icr-pause-toggle[data-state="playing"] .icr-pause-toggle-icon {
  inline-size: 3px;
  block-size: 10px;
  border-inline-start: 2px solid #ffffff;
  border-inline-end: 2px solid #ffffff;
}

.icr-pause-toggle[data-state="paused"] .icr-pause-toggle-icon {
  inline-size: 0;
  block-size: 0;
  margin-inline-start: 3px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #ffffff;
}


/* ---------------------------------------------------------------------------
 * 2. FOCUS RING ON THE PAUSE CONTROL
 *    WCAG 2.4.7 Focus Visible (AA)
 *    The button sits over blue, white and photo backgrounds, so it gets a
 *    layered ring: white gap, navy ring, white outer edge. One layer always
 *    clears 3:1 (navy on white 13.39:1, white on the blue band 4.58:1).
 *    The disc also turns solid while focused.
 * ------------------------------------------------------------------------- */

.icr-pause-toggle:focus-visible {
  outline: 3px solid #10314d !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 7px #ffffff !important;
  background: rgba(17, 24, 39, 0.9) !important;
}


/* ---------------------------------------------------------------------------
 * 3. PAUSE BUTTON — SHOWN ON HOVER OR KEYBOARD FOCUS
 *    WCAG 2.2.2 (A), 2.4.7 (AA)
 *    On mouse devices the button appears while the pointer is over the
 *    slider or keyboard focus is inside it, and stays visible once paused.
 *    On touch screens there is no hover, so it is always visible.
 * ------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .icr-pause-toggle {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  :hover > .icr-pause-toggle,
  :focus-within > .icr-pause-toggle,
  .icr-pause-toggle[data-state="paused"] {
    opacity: 1;
  }
}


/* ---------------------------------------------------------------------------
 * 4. VIDEO PLAYLIST — VISIBLE FOCUS ON THE VIDEO LIST
 *    WCAG 2.4.7 Focus Visible (AA)
 *    The Elementor Pro Video Playlist shows no focus indicator on its video
 *    tabs, so keyboard users moving with Tab or the arrow keys cannot see
 *    which video they are on. Same navy ring as the pause control (13.39:1
 *    on white, well over 3:1 on the gray selected row). It is drawn inside
 *    the row because the list scrolls and would clip a ring drawn outside.
 * ------------------------------------------------------------------------- */

.elementor-widget-video-playlist .e-tab-title[role="tab"]:focus-visible {
  outline: 3px solid #10314d !important;
  outline-offset: -3px !important;
}


/* ---------------------------------------------------------------------------
 * 5. ICON BUTTONS — FOCUS RING AROUND THE ICON
 *    WCAG 2.4.7 Focus Visible (AA)
 *    The "What people are saying" Previous / Next arrows are Elementor Icon
 *    widgets that the slider script turns into buttons (role="button"). The
 *    browser drew the focus ring around the whole widget box, which is wider
 *    than the round icon, so the ring sat off to one side. The ring is moved
 *    onto the icon itself and follows its circle. Same navy ring as the other
 *    controls (13.39:1 on white).
 * ------------------------------------------------------------------------- */

.elementor-widget-icon[role="button"]:focus-visible {
  outline: none !important;
}

.elementor-widget-icon[role="button"]:focus-visible .elementor-icon {
  outline: 3px solid #10314d;
  outline-offset: 3px;
  border-radius: 50%;
}


/* ---------------------------------------------------------------------------
 * 6. ROYAL TESTIMONIAL SLIDER ARROWS — FOCUS RING
 *    WCAG 2.4.7 Focus Visible (AA)
 *    The arrows became keyboard buttons in icr-a11y-structure.js
 *    (fixTestimonialSliderArrows) but kept the browser's default ring, which
 *    Royal's arrow box bent into an odd notched shape. They get the same
 *    navy ring as the site's other controls, with plain rounded corners.
 * ------------------------------------------------------------------------- */

.wpr-testimonial-arrow:focus-visible {
  outline: 3px solid #10314d !important;
  outline-offset: 4px !important;
  border-radius: 4px;
}