/* Vexiva One — accessibility baseline.
   Added 2026-10-10 (Stage 9 / F1). Loaded by every page next to /fonts.css.

   Design rule for this file: nothing here paints anything in the default state.
   Every rule waits for a keyboard focus, an OS "reduce motion" preference, or a
   finger. The page looks byte-for-byte the same to a mouse user who has not
   asked for reduced motion. The only intentional exception is documented in
   section 3 and is layout-neutral by construction. */


/* ─── 1. Visible keyboard focus ─────────────────────────────────────────────
   31 of the 40 pages already carried this exact rule inline; 9 did not, and no
   page covered <select>. Declaring it once here closes both gaps with the same
   gold ring the site already used, so nothing changes for pages that had it.
   :focus-visible only matches keyboard / assistive-tech focus — a mouse click
   still shows no ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #FFC107;
  outline-offset: 2px;
}


/* ─── 2. Reduced motion ─────────────────────────────────────────────────────
   Before this, 39 of 40 pages animated regardless of the OS setting. That was
   not only a comfort problem: [data-reveal] elements start at opacity 0 and are
   revealed by script, so a visitor who asks for reduced motion could be left
   looking at content that never appears. The reveal state is forced on here so
   the content is present either way. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ─── 3. Touch target size — WCAG 2.2 AA, 2.5.8 ─────────────────────────────
   Footer navigation links render 16px tall at 390px, below the 24px minimum.

   The hit area is grown with an invisible, absolutely-positioned ::after rather
   than with padding. A padding + negative-margin pair was tried first and
   rejected: these links carry their spacing as inline styles, and an inline
   `margin-top:12px` (the footer phone link) beats a stylesheet `margin-block`,
   so the cancellation only applied on one side and the page grew 4px. An
   out-of-flow pseudo-element cannot be defeated that way — it adds no height,
   no width and no margin, so the layout is identical by construction.

   Links set in running text are deliberately left alone: WCAG exempts inline
   targets, and growing them risks visible reflow for no compliance gain.

   .foot a        — the full footer on the home page and 5 others
   .vx-tap-list>a — the compact footer link row on the remaining pages
   .vx-tap        — individual links that needed it (e.g. "See all service areas") */
.foot a,
.vx-tap,
.vx-tap-list > a {
  position: relative;
}

.foot a::after,
.vx-tap::after,
.vx-tap-list > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 24px;
  margin-top: -12px;
}