/* ===========================================================================
 * THE SURGE — WCAG 2.2 AA STRUCTURE REMEDIATION (STYLES)
 * Companion to ts-a11y-structure.php and ts-a11y-structure.js.
 * ======================================================================== */


/* ---------------------------------------------------------------------------
 * 1. PAUSE / PLAY CONTROL FOR AUTOPLAYING CAROUSELS
 *    WCAG 2.2.2 Pause, Stop, Hide (A), 1.4.11 Non-text Contrast (AA)
 *    Button inserted by ts-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 it holds on any photo.
 *    24px in from the corner so it sits clear of the card edge and under
 *    the Next arrow. !important on the box properties, because Hello
 *    Elementor styles every <button> with a border, padding and hover fill.
 * ------------------------------------------------------------------------- */

.ts-pause-toggle {
  position: absolute !important;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  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;
}

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

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

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

.ts-pause-toggle[data-state="paused"] .ts-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)
 *    Layered ring (white gap, navy ring, white edge) so one layer always
 *    clears 3:1 over any photo. The disc also turns solid while focused.
 * ------------------------------------------------------------------------- */

.ts-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
 *    carousel or keyboard focus is inside it, and stays visible once paused
 *    so Play can be found again. Touch screens have no hover, so there it is
 *    always visible.
 * ------------------------------------------------------------------------- */

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

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


/* ---------------------------------------------------------------------------
 * 4. ELEMENTOR POPUPS — FIT SMALL SCREENS
 *    WCAG 1.4.10 Reflow (AA)
 *    The "Never miss an update" popup has a fixed width, so on a phone it
 *    runs past the right edge and its heading and Close button are cut off.
 *    Popups are capped at the screen width with a 16px gutter each side, and
 *    their inner containers may not be wider than the popup. Wider screens
 *    where the popup already fits are unaffected.
 * ------------------------------------------------------------------------- */

.elementor-popup-modal .dialog-widget-content,
.elementor-popup-modal .dialog-message {
  max-inline-size: calc(100vw - 32px) !important;
}

.elementor-popup-modal .elementor-location-popup,
.elementor-popup-modal .elementor-location-popup .e-con,
.elementor-popup-modal .elementor-location-popup .e-con-inner {
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
}


/* ---------------------------------------------------------------------------
 * 5. ACCORDION TITLES — FOCUS RING NOT COVERED BY THE PANEL
 *    WCAG 2.4.7 Focus Visible (AA)
 *    On some pages an open accordion's panel sits directly under its title
 *    and paints over the bottom edge of the title's focus ring. Titles are
 *    always kept above their panel (not only while focused), so the ring is
 *    not cut off even while the panel animates open. The ring's own color
 *    and style are left to the site.
 *
 *    While a panel opens or closes, Elementor sets overflow: hidden on the
 *    accordion item, which clips the top and sides of the title's ring for
 *    the length of the animation. During that time the item clips with a
 *    4px margin instead, so the ring stays whole. The animation itself is
 *    unchanged. Browsers without overflow-clip-margin keep today's behavior.
 * ------------------------------------------------------------------------- */

.e-n-accordion-item > .e-n-accordion-item-title {
  position: relative;
  z-index: 1;
}

.e-n-accordion-item[style*="overflow"] {
  overflow: clip !important;
  overflow-clip-margin: 4px;
}


/* ---------------------------------------------------------------------------
 * 6. ELEMENTOR FORM FIELDS — VISIBLE KEYBOARD FOCUS
 *    WCAG 2.4.7 Focus Visible (AA), 1.4.11 Non-text Contrast (AA)
 *    The form fields show no focus change: text fields only show the
 *    blinking cursor, and the State / Subject dropdowns and the consent
 *    checkboxes show nothing at all.
 *
 *    The field's border turns the site blue #1D7BB9 with a 1px ring and a
 *    faint halo (checkboxes and buttons get a 2px ring, as 1px is too small
 *    to see on a checkbox).
 *    The ring is 4.58:1 on the white Contact form and about 4:1 on the dark
 *    Get Updates hero, so it clears 3:1 on both (a lighter blue would not).
 *    Text fields and dropdowns show it on any focus, as browsers do;
 *    checkboxes and buttons only for keyboard focus.
 *
 *    The theme animates all field properties, so the ring briefly showed
 *    as the browser's dark default outline before turning blue. The
 *    transition is turned off on focus so it appears in blue right away.
 * ------------------------------------------------------------------------- */

.elementor-form .elementor-field-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.elementor-form .elementor-field-group select:focus,
.elementor-form .elementor-field-group textarea:focus {
  border-color: #1d7bb9 !important;
  outline: 1px solid #1d7bb9 !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 3px rgba(29, 123, 185, 0.15) !important;
  transition: none !important;
}

.elementor-form .elementor-field-group input[type="checkbox"]:focus-visible,
.elementor-form .elementor-field-group input[type="radio"]:focus-visible,
.elementor-form .elementor-button:focus-visible {
  outline: 2px solid #1d7bb9 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  transition: none !important;
}


/* ---------------------------------------------------------------------------
 * 7. ELEMENTOR FORM ERRORS
 *    WCAG 3.3.1 Error Identification (A), 1.4.3 Contrast (AA)
 *    Messages added under invalid fields by ts-a11y-structure.js
 *    (fixFormErrors). Forms sit on both white (Contact) and dark
 *    (Get Updates hero) backgrounds, so the message has its own white
 *    background: dark red #B3261E on white is 6.5:1 wherever it appears.
 * ------------------------------------------------------------------------- */

.ts-field-error {
  display: inline-block;
  margin-block-start: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #ffffff;
  color: #b3261e;
  font-size: 14px;
  line-height: 1.4;
}