/* ==========================================================================
   Accessibility: focus indicators and reduced motion
   Healing Hands Holistic Care

   ADDITIVE ONLY. Linked immediately before </head> on all 66 pages, so it
   loads after the Elementor kit. Note that Elementor still injects further
   stylesheets from the body after this one (page CSS, widget CSS, icon
   fonts), which is why the focus rules below carry !important.

   Do NOT edit post-14.css - it is a generated artifact and any change there
   is lost when the kit is re-exported.

   This file changes NO default rendering. It only adds states that were
   previously invisible:

   1. The kit declares button:hover / button:focus with values IDENTICAL to
      the default state, so keyboard users got no focus indicator anywhere.
   2. input:focus likewise repeats the default, leaving the field border
      (#EFF0F7) invisible against the page background (#EFF0F7).
   3. No reduced-motion handling existed.

   Colours are existing design tokens only - no new values introduced.
   See _mind/wiki/design/component-styles.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Visible focus indicator - WCAG 2.1 SC 2.4.7

   A two-layer "sandwich" ring: light inner, dark outer.

   A single-colour ring cannot work here. Measured in the browser, buttons on
   this site render on three different backgrounds - navy #130B56, gold
   #CD9430, and transparent - and sections alternate between near-white
   #EFF0F7, pale lavender #DEE1FA and deep navy panels. Gold was tried first
   and was invisible on the gold buttons, which are the majority.

   Approximate contrast of each layer against each background:

     dark outer (#05022E) on gold        ~6.6:1   PASS
     dark outer (#05022E) on near-white ~15.0:1   PASS
     light inner (#EFF0F7) on navy      ~15.0:1   PASS

   Whatever the element sits on, at least one layer contrasts strongly, so the
   indicator is always visible.

   !important is used deliberately. Elementor injects seven further
   stylesheets after this one (page CSS, widget CSS, icon fonts), and an
   accessibility indicator must not be defeated by cascade order.

   :focus-visible means mouse users see no ring, keyboard users do.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.elementor-button:focus-visible,
.elementor-tab-title:focus-visible,
.ekit-menu-nav-link:focus-visible {
  outline: 2px solid var(--e-global-color-secondary, #EFF0F7) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px var(--e-global-color-77ed54a, #05022E) !important;
}

/* Older engines without :focus-visible still get an indicator. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  textarea:focus,
  select:focus,
  .elementor-button:focus {
    outline: 2px solid var(--e-global-color-secondary, #EFF0F7) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px var(--e-global-color-77ed54a, #05022E) !important;
  }
}

/* --------------------------------------------------------------------------
   2. Form fields - make the focused field distinguishable

   Default is a #EFF0F7 border on a #EFF0F7 background, so the field boundary
   is invisible focused or not. Only the focused state is changed here.
   -------------------------------------------------------------------------- */
input:not([type="button"]):not([type="submit"]):focus,
textarea:focus,
.elementor-field-textual:focus {
  border-color: var(--e-global-color-accent, #130B56);
}

/* --------------------------------------------------------------------------
   3. Link hover - add a non-colour affordance

   The kit sets a:hover to #EFF0F7, which equals the page background, so a
   hovered link on a default-background section renders invisible (~1:1).
   That pale colour is presumably intended for links inside the dark navy
   panels, and this stylesheet cannot reliably tell which section a link is
   in - so the colour is deliberately left alone and an underline is added
   instead. The underline is visible regardless of the colour resolved.

   Resolving the colour properly is a design decision, not a CSS patch.
   Tracked in _mind/wiki/design/component-styles.md.
   -------------------------------------------------------------------------- */
a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Buttons and icon links are not text links - keep them clean. */
.elementor-button:hover,
.elementor-button:focus-visible,
.elementor-social-icon:hover,
.elementor-social-icon:focus-visible,
.elementor-icon:hover,
.elementor-icon:focus-visible {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Reduced motion

   The site uses 0.3s transitions throughout plus fadeInLeft / fadeInRight /
   zoomIn entrance animations on 34 elements. Honour the OS preference.

   Elementor hides animated elements with .elementor-invisible until its JS
   runs; if animation is suppressed that class must be neutralised or the
   content stays invisible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
  }
}