/*!
 * Envano — accessibility overrides
 * Added 2026-09-18 during PowerMapper remediation.
 *
 * WHY THIS FILE EXISTS
 * The theme's style.css is COMPILED output (it ships with style.css.map, whose
 * sources begin style.scss / base/_reset.scss). That SCSS source is not present
 * on the install, so anything written into style.css would be silently reverted
 * by the next theme rebuild. These fixes therefore live in a separate file that
 * is enqueued after style.css and survives a rebuild.
 *
 * If/when the SCSS source is recovered, these rules should be folded into it
 * and this file retired.
 */

/* ---------------------------------------------------------------------------
 * 1. Visible keyboard focus indicator — WCAG 2.4.7 Focus Visible (AA)
 *
 * style.css suppresses focus with `outline:none` (x4) and `outline:0` (x3) and
 * defines no :focus-visible rules at all, so keyboard users get no indicator.
 * PowerMapper flagged this on Gravity Forms radios and on main nav links.
 *
 * :focus-visible is used deliberately: mouse and touch users see NO change,
 * so this is visually inert for the vast majority of visitors.
 *
 * The white box-shadow is a halo so the dark ring stays visible where focusable
 * elements sit on dark backgrounds or background images (the hero, story panels).
 * ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.gform_wrapper :where(input, select, textarea, button):focus-visible,
.gfield-choice-input:focus-visible {
  outline: 3px solid #0b0b0b !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #ffffff !important;
  border-radius: 2px;
}

/* Skip-link style targets often sit inside overflow:hidden wrappers where the
 * halo would clip; fall back to a solid ring with no offset there. */
.slick-slider :where(a, button):focus-visible,
.testimonials :where(a, button):focus-visible {
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. Form control boundary contrast — WCAG 1.4.11 Non-text Contrast (AA)
 *
 * PowerMapper flagged the Gravity Forms textarea (#input_2_10) as failing the
 * 3:1 requirement against its adjacent background. Gravity Forms' default
 * border is too light; #767676 gives 4.54:1 on white, comfortably over the bar.
 *
 * This is a border colour only — no change to layout, spacing or type.
 * ------------------------------------------------------------------------- */
.gform_wrapper :where(input[type="text"], input[type="email"], input[type="tel"],
                     input[type="url"], input[type="number"], input[type="password"],
                     input[type="search"], select, textarea) {
  /* !important is required: style.css carries a higher-specificity `border`
   * shorthand (.gform_wrapper.gravity-theme.gform-theme--no-framework
   * .gform_body textarea.textarea { border: 1px solid #a1a1a1 }) that would
   * otherwise reset this. Only the colour is overridden; width/style/radius
   * from the theme are preserved, so the forms look unchanged apart from a
   * slightly darker edge. */
  border-color: #767676 !important;
}

/* ---------------------------------------------------------------------------
 * 3. Reduced motion — WCAG 2.2.2 Pause, Stop, Hide (Level A)
 *
 * PowerMapper flagged two long-running animations:
 *   - .image-wall__row on /about/ runs 30s/45s/60s infinite linear.
 *   - The Endries story autoplays two looping <video> elements.
 *
 * Only the genuinely long/infinite animations are targeted. The theme's short
 * reveal animations (fadeIn, rubberBand and friends, all <= 1s) are deliberately
 * left alone: they are under the 5s threshold, and several of them animate
 * content from an .isInvisible starting state, so disabling them outright could
 * leave that content permanently hidden.
 *
 * NOTE: this satisfies the spirit of 2.2.2 for people who have asked their OS
 * for reduced motion, but NOT the letter of it — the success criterion wants a
 * pause control available to every user. A visible pause button on the image
 * wall and the Endries videos is a design decision and has been left open.
 * ------------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
  .image-wall__row {
    animation: none !important;
  }
}