/*! ─────────────────────────────────────────────────────────────────────────
 *  a11y.css — accessibility layer for benshabat-locks.co.il
 *  Built in-house (no third-party widget). Loaded LAST so it can correct the
 *  page CSS without editing the big inline <style> blocks in each page.
 *
 *  Target: ת"י 5568 level AA (WCAG 2.0/2.1 AA), per reg. 35 of תקנות שוויון
 *  זכויות לאנשים עם מוגבלות (התאמות נגישות לשירות), התשע"ג-2013.
 *
 *  Every colour value below was COMPUTED, not eyeballed — see
 *  tools/audit/probe3.mjs, which re-measures the real rendered contrast.
 * ───────────────────────────────────────────────────────────────────────── */

/* ═══ 1. CONTRAST (WCAG 1.4.3 — 4.5:1 normal, 3:1 large) ═══════════════════
   --text-muted was rgba(240,244,255,0.40) = 3.51–3.59:1 measured across all
   three real backgrounds — the single largest source of failures on the site
   (24 of 39). 0.52 lands it at 5.17–5.26:1 while staying visibly lighter than
   --text-secondary (0.65), so the type hierarchy the design relies on survives. */
:root {
  --text-muted: rgba(240, 244, 255, 0.52);
  /* White-on-blue at #3b82f6 is 3.68:1. Used ONLY where white text sits on a
     solid fill; the brand blue itself is untouched for borders/glows/icons. */
  --cta-blue: #326ed1;   /* 4.87:1 with #fff */
  --cta-red:  #d03b3b;   /* 4.80:1 with #fff */
}

.btn-primary, .btn-em-phone, .cta-btn-primary, .cta-call, .nav-cta,
.btn-emergency, .btn-em-wa.solid { background: var(--cta-blue) !important; }
.btn-emergency { background: var(--cta-red) !important; }

/* Social brand colours as TEXT on the dark card: 4.30:1 / 4.41:1 → lifted just
   enough to pass while staying recognisably Instagram-pink / Facebook-blue. */
.ig .s-name { color: #f13374 !important; }
.fb .s-name { color: #197dfe !important; }

/* ── The 27 SEO landing pages ─────────────────────────────────────────────
   Those pages are a separate template with its OWN design tokens (--tm, --blue),
   so none of the fixes above reached them. Measured on the live pages: 204 axe
   AA contrast failures across 27 pages, from just two roots.

   1. --tm, the muted-text token, ships at 0.4 alpha: 3.48-3.54:1 depending on
      which card it sits on. 0.50 is the minimum that clears 4.5:1 on all four
      backgrounds in the template; 0.56 is used so a future background tweak
      does not silently drop it back under.
   2. --blue (#3b82f6) is fine as a fill behind white text, but as SMALL TEXT on
      the dark cards it lands at 4.45:1 (table headings) and 4.19:1 (share
      buttons) — just under. #5d9bff clears both with room (5.93 / 5.57) and is
      still recognisably the same brand blue. The token itself is left alone, so
      borders, glows and icons keep the original colour; only the two text uses
      are lifted. */
:root { --tm: rgba(240, 244, 255, 0.56); }
.price-tbl th { color: #5d9bff !important; }
.share-btn    { color: #5d9bff !important; }

/* ═══ 2. KEYBOARD FOCUS (WCAG 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured)
   The site shipped ZERO :focus styles — it relied on the browser default ring,
   which is low-contrast on this near-black canvas, and .search-input actively
   killed it with outline:none. A single high-contrast ring, on every focusable
   thing, in a colour that reads on both the dark canvas and the blue buttons. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #ffd24a !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
/* Keyboard users who land inside the sticky nav must still see the ring. */
.main-nav :focus-visible { outline-offset: 2px !important; }
/* Undo the explicit suppression on the blog search field. */
.search-input:focus, .search-input:focus-visible {
  outline: 3px solid #ffd24a !important;
  outline-offset: 2px !important;
}
/* Fallback for engines without :focus-visible — never leave a user ringless. */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid #ffd24a !important; outline-offset: 3px !important;
  }
}

/* ═══ 3. SKIP LINK (WCAG 2.4.1 Bypass Blocks) ══════════════════════════════
   Real anchor in the HTML so it works with JS disabled. Off-screen until
   focused — never display:none, which would take it out of the tab order. */
.skip-link {
  position: fixed; top: 0; inset-inline-start: 0; z-index: 2147483601;
  transform: translateY(-120%);
  background: #ffd24a; color: #0a0a0a;
  padding: 12px 22px; font: 700 16px/1.4 'Heebo', sans-serif;
  text-decoration: none; border-radius: 0 0 10px 0;
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid #0a0a0a; outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* Give the skip-link target somewhere to land without the sticky nav covering
   the heading it jumps to (WCAG 2.4.11). */
#main { scroll-margin-top: 90px; }
:target { scroll-margin-top: 90px; }

/* ═══ 4. MOTION (WCAG 2.2.2 Pause/Stop/Hide, 2.3.3 Animation from Interactions)
   The site had NO prefers-reduced-motion support at all: 11 infinite animations
   plus an autoplaying looped hero video kept running for users who had asked
   their OS to stop exactly that. `html.a11y-noanim` is the same kill-switch,
   driven by the toolbar's "עצירת אנימציות" button. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* An infinite animation is NOT stopped by a short duration — it strobes.
     Each one needs an explicit animation:none. (Learned the hard way on
     another build; see brain note "calm-mode strobe".) */
  #scan, .marquee-track, .hero-glow, .avail-ring, .avail-dot, .photo-scan,
  .trust-star, .scroll-progress, .cert-shield, .em-label, .em-eyebrow,
  .intro-layer, #intro-layer, .fade-in-element { animation: none !important; }
  #scan { display: none !important; }
  /* Fade-ins must not leave content stuck at opacity 0 when the JS observer
     is short-circuited. */
  .fade-in-element { opacity: 1 !important; transform: none !important; }
}
html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.a11y-noanim #scan { display: none !important; }
html.a11y-noanim .fade-in-element { opacity: 1 !important; transform: none !important; }

/* ═══ 5. NO-JAVASCRIPT FAIL-OPEN ═══════════════════════════════════════════
   #main-content shipped with inline opacity:0 and was only revealed by the
   intro script — measured: with JS off, all five pages rendered a blank screen
   (48 fade elements at opacity 0, intro overlay at opacity 1). Content must
   never depend on script to become visible. */
.no-js #main-content { opacity: 1 !important; }
.no-js #intro-layer, .no-js #scan, .no-js #bg-hover-canvas { display: none !important; }
.no-js .fade-in-element { opacity: 1 !important; transform: none !important; }

/* ═══ 6. LANDMARKS + FOOTER ════════════════════════════════════════════════ */
.site-footer {
  position: relative; z-index: 10;
  background: #02060a; border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 40px 24px 32px; font: 400 14px/1.7 'Heebo', sans-serif;
  color: rgba(240, 244, 255, 0.72);
}
.site-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  align-items: center; justify-content: space-between;
}
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-footer a { color: #cddcf5; text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-legal { font-size: 12.5px; color: rgba(240, 244, 255, 0.6); width: 100%; }

/* ═══ 7. UTILITIES ═════════════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The hamburger is now a real <button>; strip the UA button chrome so it keeps
   the exact look it had as a <div>. */
button.mobile-menu-toggle {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  /* WCAG 2.5.5/2.5.8 — a 24px hamburger is under the target-size floor. */
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}

/* ═══ 8. REFLOW (WCAG 1.4.10) ══════════════════════════════════════════════
   Measured 332px of horizontal scroll at a 320px viewport on CONTACT.html —
   the hero video and the marquee track were wider than the viewport. */
@media (max-width: 360px) {
  #dynamic-hero-video, #hero-video, video { max-width: 100%; }
  .marquee-container, .area-strip-wrapper, .cities-strip { overflow-x: hidden; }
}
html, body { overflow-x: hidden; }

/* ═══ 9. TEXT SPACING (WCAG 1.4.12) — must survive user-applied spacing ═════ */
.svc-desc, .why-desc, .card-desc, .testi-text, .cta-hint, .article-body p {
  overflow-wrap: break-word;
}

/* ═══ 10. LATE ADDITIONS — found by the post-fix verification run ══════════
   The blog category badges are injected by blog-posts.js, so they only appear
   in a measurement taken AFTER posts.json resolves. Measured 4.44:1 — under
   the 4.5 floor by a hair, and invisible to a static read of the HTML. */
.cat-badge { color: #6fa4fb !important; }
.cat-badge.cat-cars  { color: #7ad4dd !important; }
.cat-badge.cat-smart { color: #f0ae4a !important; }
.cat-badge.cat-tips  { color: #8dd8a4 !important; }
/* The quick-action landmark is layout-neutral: the float keeps position:fixed. */
.a11y-quick-actions { display: contents; }