/* =========================================================================
   Valiant Lifecare — Accessibility & UX polish layer (cr2026)
   Loaded on every page by header-new.php. Implements WCAG 2.1 AA basics
   and the small interaction details top studios get right.
   ========================================================================= */

/* ── 1. Focus rings on every interactive element ───────────────────────
   Subtle dual-outline (lime inner, blue outer) that's high-contrast on
   both light and dark surfaces. Only appears for keyboard users via
   :focus-visible — pointer clicks don't trigger it. */
:where(a, button, input, select, textarea, summary, [role="button"], [role="link"], [tabindex]):focus-visible {
  outline: 2px solid #C8F8A9;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0, 69, 170, 0.55);
  border-radius: 4px;
}
/* Strip default focus on elements where the dual-outline is busier than
   a quieter brand outline (e.g. nav links inside the nav). */
.nav-links a:focus-visible,
.nav-mobile-panel a:focus-visible {
  outline: 2px solid #C8F8A9;
  outline-offset: 4px;
  box-shadow: none;
}

/* ── 2. Tap targets: enforce a 44×44 minimum (WCAG 2.5.5) ────────────── */
@media (hover: none) and (pointer: coarse) {
  a, button,
  .btn-hero, .btn-service, .btn-outline, .btn-white-outline,
  .accordion-trigger, .nav-links a, .h2-social-btn,
  .vlc-btn, .btn-primary, .btn-ghost,
  .blog-filter-btn, .blog-read-link {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── 3. Skip-to-content link for keyboard / screen-reader users ─────── */
.vlc-skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: #0045AA;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  z-index: 999999;
}
.vlc-skip-link:focus-visible {
  left: 12px;
  outline: 2px solid #C8F8A9;
  outline-offset: 2px;
}

/* ── 4. Reduced-motion: disable parallax, marquee, twinkle, hero blocks
       so vestibular-sensitive users get a quiet UI. ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep loaders/spinners that signal state — leave them ticking. */
  [role="progressbar"], [aria-busy="true"] {
    animation-duration: 1.5s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ── 5. Selection colour — brand-on-brand instead of default OS blue ── */
::selection {
  background: rgba(200, 248, 169, 0.55);
  color: #0F3D3A;
}
::-moz-selection {
  background: rgba(200, 248, 169, 0.55);
  color: #0F3D3A;
}

/* ── 6. High-contrast type defaults: bump body line-height + colour
       contrast where the existing stylesheet runs a touch thin. ─────── */
body, p, li {
  /* WCAG AA needs ≥4.5:1 on normal text against white. Our previous
     #5A6573 over #FFF is ~5.5:1 — fine. Keep, just enforce here for
     legacy pages that fell through. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 7. Smooth-scroll for in-page anchors with reduced-motion respect ─ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── 8. Visually-hidden helper for ARIA-only labels (Tailwind sr-only) ─ */
.vlc-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── 9. Print stylesheet — keep blog posts readable on paper ─────────── */
@media print {
  #main-nav, #h2-footer, .vlc-side, .vlc-cta, .vlc-final-cta,
  .vlc-related, #vlc-video-widget, .blog-filters {
    display: none !important;
  }
  body { background: #fff !important; }
  .vlc-blog-wrap { padding-top: 0 !important; }
  .vlc-article { max-width: 100%; }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 12px;
    color: #555;
  }
}

/* ── 10. Make form-control errors visible (some pages use HTML5
        validation; ensure user gets brand styling on :invalid). ──────── */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: #DC2626;
  background-color: #FEF2F2;
}
input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
  border-color: #0F3D3A;
}

/* ── 11. Lazy-loaded image placeholder fade-in ──────────────────────── */
img[loading="lazy"] {
  transition: opacity .4s ease;
}
img[loading="lazy"]:not([src]) { opacity: 0; }