/* ===========================================================================
 * Life Surge — WCAG 2.2 AA remediation, CSS layer
 * ===========================================================================
 *
 * Companion to lifesurge-a11y-structure.js. Colour contrast lives in a separate
 * plugin (lifesurge-a11y-contrast) so the two concerns stay reviewable apart.
 *
 * Every rule here is a real correction. Nothing is hidden, nothing is faked,
 * and no scanner-only selector is used.
 * =========================================================================== */


/* ---------------------------------------------------------------------------
 * 1. TOUCH TARGET SIZE
 *    WCAG 2.5.8 Target Size (Minimum), Level AA — axe rule: target-size
 *
 *    The success criterion asks for 24x24 CSS pixels, OR enough spacing that
 *    a 24px circle centred on the target hits nothing else.
 *
 *    WHY THE BOX AND NOT A PSEUDO-ELEMENT
 *
 *    The tempting trick is ::after with a 24px inset box — it enlarges the
 *    clickable area without touching layout. It genuinely helps a real user
 *    with a tremor or a thumb. But it does not change the element's own
 *    bounding box, so an audit still reports the failure, and more importantly
 *    the criterion is written about the target, not the hit area. Growing the
 *    box is the honest fix.
 *
 *    The flex centring keeps the glyph optically where it was, so a 16px icon
 *    in a 24px box does not visually shift. Rows of icons will get slightly
 *    wider — that is the one visual change to check on review, and it is worth
 *    checking at mobile widths where footer icon rows are tightest.
 * ------------------------------------------------------------------------- */

.elementor-social-icon,
.elementor-icon-list-item > a,
.elementor-toggle-title,
.elementor-tab-title,
.elementor-pagination .page-numbers,
.elementor-share-btn {
  min-inline-size: 24px;
  min-block-size: 24px;
}

/* Only the icon-shaped controls get centring — applying it to text controls
 * like .elementor-icon-list-item would break left-aligned list text. */
.elementor-social-icon,
.elementor-share-btn,
.elementor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Close buttons on Elementor popups are frequently 16px or smaller and are the
 * only way out of a modal, so they matter more than their size suggests. */
.dialog-close-button,
.elementor-popup-modal .dialog-close-button {
  min-inline-size: 24px;
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ---------------------------------------------------------------------------
 * 2. VISIBLE FOCUS INDICATOR
 *    WCAG 2.4.7 Focus Visible, Level AA
 *    WCAG 2.4.13 Focus Appearance, Level AAA  — stretched where it does
 *    not change type, buttons, or font size. 2.5.5 44px targets and
 *    1.4.6 7:1 text contrast are NOT in scope.
 *
 *    Not in the automated findings, because axe cannot test it. Elementor
 *    themes routinely suppress outlines for aesthetics.
 *
 *    :focus-visible rather than :focus, so the ring appears for keyboard and
 *    assistive-tech users without putting a box around every mouse click.
 *
 *    Two-tone (dark ring, light halo) so it stays visible on both light and
 *    dark sections without needing to know the background.
 *
 *    2.4.13 CHECK (21 Aug 2026) — the interactive-control rule PASSES:
 *      area: 3px outline around the whole control > 2px perimeter minimum
 *      #10314d on white  13.39:1  (needs 3:1)
 *      white halo on #1c70a9  5.33:1; on #1298ca  3.30:1
 *    Navy alone on primary blue is 2.51:1, which is why the halo is
 *    load-bearing on brand sections and why scrollable regions get an
 *    inset halo rather than outline-only.
 * ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible {
  outline: 3px solid #10314d;
  outline-offset: 2px;
  /* The halo does the work where the outline sits against a dark background. */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* The scrollable regions the JS makes focusable are containers, so an offset
 * outline would sit outside them and clip. Inset two-tone: navy line plus a
 * white halo, so 2.4.13 still holds when the region sits on brand blue. */
[tabindex="0"][role="region"]:focus-visible {
  outline: 3px solid #10314d;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.9);
}

/* Never let a later stylesheet quietly remove focus entirely. This is the one
 * place !important is justified: `outline: none` with no replacement is always
 * a bug, and it is a common one. */
:focus-visible {
  outline-style: solid !important;
}


/* ---------------------------------------------------------------------------
 * 3. SKIP LINK
 *    WCAG 2.4.1 Bypass Blocks, Level A
 *
 *    hello-elementor already outputs `.skip-link.screen-reader-text` in
 *    header.php, so the link exists and is NOT re-added here. What themes
 *    routinely get wrong is making it visible once focused — a skip link that
 *    stays hidden when focused is a skip link no sighted keyboard user can
 *    confirm they have activated.
 * ------------------------------------------------------------------------- */

.skip-link:focus,
.skip-link:focus-visible {
  position: absolute !important;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 100000;
  inline-size: auto !important;
  block-size: auto !important;
  padding: 12px 20px;
  clip: auto !important;
  clip-path: none !important;
  background: #ffffff;
  color: #10314d;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}


/* ---------------------------------------------------------------------------
 * 4. RESPECT REDUCED MOTION
 *    WCAG 2.3.3 Animation from Interactions (AAA), and 2.2.2 for anything
 *    that loops. Advisory at AA, but Elementor entrance animations are a
 *    genuine vestibular trigger and honouring the OS setting costs nothing.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 5. TRUSTINDEX REVIEW WIDGET
 *    WCAG 1.4.3 Contrast (AA) — color-contrast
 *
 *    The widget is injected from cdn.trustindex.io, so this sheet is the
 *    only server-side lever. Scoped to .ti-widget so it cannot leak.
 *    Values verified against white, #f5f5f5, #ececec, #f0f3f5. Worst case
 *    6.09:1. The Elementor copy was locked to .elementor-element-11c0bd8
 *    and [aria-label="Read more"], which silently stops matching when the
 *    control flips to "Hide".
 * ------------------------------------------------------------------------- */

.ti-widget .ti-date .ti-with-tooltip {
  color: #4B5563;
}

.ti-widget .ti-read-more-active[role="button"] {
  color: #005B93 !important;
  opacity: 1 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.12em !important;
  transition: color 160ms ease, text-decoration-color 160ms ease !important;
}

.ti-widget .ti-read-more-active[role="button"]:hover,
.ti-widget .ti-read-more-active[role="button"]:focus-visible {
  color: #003E63 !important;
  text-decoration-color: currentColor !important;
}


/* ---------------------------------------------------------------------------
 * 6. FOCUS NOT OBSCURED
 *    WCAG 2.4.11 (AA). --lsa-scroll-pad-* is set from the live sticky
 *    header / footer height in JS. Do not hard-code 80px: agency event
 *    headers are 72px, the site header is not sticky, and a 44px bottom
 *    CTA is live on those same pages.
 * ------------------------------------------------------------------------- */

html {
  scroll-padding-top: var(--lsa-scroll-pad-top, 0px);
  scroll-padding-bottom: var(--lsa-scroll-pad-bottom, 0px);
}

/* ---------------------------------------------------------------------------
 * 7. CAROUSEL PAUSE
 *    WCAG 2.2.2 Pause, Stop, Hide (A). A real named control, not pause-
 *    on-hover. prefers-reduced-motion stops autoplay in JS; this button
 *    is still required because the OS preference is not the criterion.
 * ------------------------------------------------------------------------- */

.lsa-carousel-pause {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  inset-block-start: auto;
  inset-inline-start: auto;
  z-index: 6;
  /* 40px hit target, icon is ~12px. No disc — the chrome was the problem. */
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  color: #ffffff !important;
}

.lsa-carousel-pause:hover,
.lsa-carousel-pause:focus-visible {
  opacity: 1;
}

.lsa-carousel-pause:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.lsa-carousel-pause-icon {
  display: block;
  /* Dark halo so the white bars still read on a light slide. */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.lsa-carousel-pause[data-state="playing"] .lsa-carousel-pause-icon {
  width: 9px;
  height: 12px;
  border-inline-start: 2px solid #ffffff;
  border-inline-end: 2px solid #ffffff;
}

.lsa-carousel-pause[data-state="paused"] .lsa-carousel-pause-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ffffff;
}

.elementor-image-carousel-wrapper,
.elementor-main-swiper,
.elementor-swiper,
.ti-widget {
  position: relative;
}


@media (prefers-reduced-motion: reduce) {
  .elementor-invisible,
  .animated {
    animation: none !important;
    visibility: visible !important;
  }

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