/* ══════════════════════════════════════════════════════════════════════════
   v2 DESIGN SYSTEM: ACCESSIBILITY LAYER (WCAG 2.2 AA)
   ──────────────────────────────────────────────────────────────────────────
   Linked by BaseLayout AFTER /styles/v2.css, and ONLY when the client's config.json sets
   "accessibility": true on designSystem "v2". Every selector starts with `body[data-a11y]`, so a
   client without the flag never matches anything here.

   Colours are NOT hard-coded. BaseLayout computes them from the client's own v2Palette at build time
   (src/lib/a11y-contrast.ts, resolveV2Colors) and fails the build if a pair cannot reach its ratio.
   Each token equals the ORIGINAL colour when that already passes, so an accessible palette (Alabama's
   red) renders unchanged and only a failing colour is moved, and only as far as needed:
     --lj-a11y-on-field     text on the brand FILL (--lj-field)         --lj-a11y-on-go     text on the CTA fill
     --lj-a11y-forest       brand as TEXT on every light ground          --lj-a11y-muted     grey labels on light grounds
     --lj-a11y-field-on-ink brand as TEXT on dark bands                  --lj-a11y-dim       body copy on dark bands
     --lj-a11y-link / -body-ink   in-text link and the paragraph text around it (3:1 apart, 4.5:1 on the ground)
     --lj-a11y-on-field-62 / -78  the faded ink v2 uses on a field band, raised only if it fails
     --lj-a11y-ring / -ring-dark  focus ring on light / dark grounds
   Rule of thumb: the brand colour stays a FILL. Stars, icons and the brand-signature rule are never recoloured.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- Rebind the shared palette variables to their accessible values. Everything in v2.css that reads
        var(--lj-forest) / --lj-muted / --lj-dim picks this up with no further rules. ---- */
body[data-a11y] .lj2 {
  --lj-forest: var(--lj-a11y-forest);
  --lj-muted: var(--lj-a11y-muted);
  --lj-dim: var(--lj-a11y-dim);
}

/* ---- Text on the brand fill (--lj-field) ---- */
body[data-a11y] .lj2 .lj-band--green,
body[data-a11y] .lj2 .lj-band--green .lj-body,
body[data-a11y] .lj2 .lj-band--green .lj-lede { color: var(--lj-a11y-on-field); }
body[data-a11y] .lj2 .lj-band--green .lj-eyebrow { color: var(--lj-a11y-on-field-62); }
body[data-a11y] .lj2 .lj-step--go .n { color: var(--lj-a11y-on-field-62); }
body[data-a11y] .lj2 .lj-step--go .lj-body,
body[data-a11y] .lj2 .lj-step--go .lj-h3 { color: var(--lj-a11y-on-field-78); }
body[data-a11y] .lj2 .lj-step--go { color: var(--lj-a11y-on-field); }
body[data-a11y] .lj2 .lj-btn--go { color: var(--lj-a11y-on-go); }

/* ---- Brand colour as TEXT on dark bands (topbar phone, eyebrows, closing line, footer hover) ---- */
body[data-a11y] .lj2 .lj-topbar .lj-topbar-phone a,
body[data-a11y] .lj2 .lj-band--ink .lj-eyebrow:not(.lj-eyebrow--dark),
body[data-a11y] .lj2 .lj-close .lj-green,
body[data-a11y] .lj2 .lj-band--ink .lj-green,
body[data-a11y] .lj2 .lj-footer li a:is(:hover, :focus-visible),
body[data-a11y] .lj2 .lj-mc__tog { color: var(--lj-a11y-field-on-ink); }
body[data-a11y] .lj2 .lj-topbar .lj-topbar-phone a:is(:hover, :focus-visible) { color: #fff; }

/* ---- Contrast fixes found by the 2026-10-10 whole-site audit (colour-flow rollout) ----
   1. Reveal: v2RevealSoft starts a section at 60% opacity and fades it in, which makes every muted label and eyebrow read
      2.3 to 3.9:1 to a contrast checker (and a low-vision visitor) until the fade ends. Start fully opaque; the 6px rise stays,
      so layout and motion are unchanged. Reduced-motion already sets opacity 1.
   2. Phone interior hero: the eyebrow is a filled ink band, and the colour-flow rule paints it brand red (2.76:1). Use the brand
      red lightened only as far as 4.5:1 needs (--lj-a11y-forest-on-ink). Brand red stays the FILL everywhere else.
   3. Services index "By Neighborhood & City": the eyebrow sits on a light band without the --dark modifier, so it inherited the
      cream field colour (1.11:1). Give it the accessible brand text colour. ---- */
body[data-a11y] .lj2--reveal-armed [data-lj-reveal] { opacity: 1; }
@media (max-width: 720px) {
  body[data-a11y] .lj2.lj2--colorflow .lj-phero-split .lj-eyebrow--dark { color: var(--lj-a11y-forest-on-ink); }
}
body[data-a11y] .lj2 .lj-city-dir .lj-eyebrow:not(.lj-eyebrow--dark) { color: var(--lj-a11y-forest); }

/* ---- Body copy: in-text links (Brett 2026-10-10; supersedes the 2026-10-02 "links look like plain text" call
        and Alabama rule D8 for flagged sites).
        Link colour differs from the surrounding text by >= 3:1 and is >= 4.5:1 on the ground. No underline at rest;
        underline on hover and keyboard focus. Buttons, cards, nav and the footer are not in-text links. ---- */
body[data-a11y] .lj2 :is(.lj-prose, .lj-body, .lj-lede, .lj-faq .a, .callnote, .lj-callnote) :is(p, li, td, dd, blockquote, span):has(> a:not(.lj-btn)),
body[data-a11y] .lj2 :is(.lj-body, .lj-lede, .lj-faq .a, .callnote, .lj-callnote):has(> a:not(.lj-btn)) { color: var(--lj-a11y-body-ink); }
body[data-a11y] .lj2 :is(.lj-prose, .lj-body, .lj-lede, .lj-faq .a, .callnote, .lj-callnote) a:not(.lj-btn, [class*="btn"], [class*="card"], [role="button"]):not(:has(img, svg)) {
  color: var(--lj-a11y-link);
  text-decoration: none;
  font-weight: inherit;
  text-underline-offset: 3px;
}
body[data-a11y] .lj2 :is(.lj-prose, .lj-body, .lj-lede, .lj-faq .a, .callnote, .lj-callnote) a:not(.lj-btn, [class*="btn"], [class*="card"], [role="button"]):not(:has(img, svg)):is(:hover, :focus-visible) {
  color: var(--lj-a11y-link);
  text-decoration: underline;
}
/* On dark bands a light link cannot sit 3:1 from light text, so these keep an underline at rest (WCAG 1.4.1 allows
   any non-colour cue). The one exception to "no underline at rest". */
body[data-a11y] .lj2 :is(.lj-band--ink, .lj-close) :is(.lj-prose, .lj-body, .lj-lede, p) a:not(.lj-btn, [class*="btn"]) {
  color: var(--lj-a11y-field-on-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Keyboard: visible focus ring everywhere, ring colour flips on dark grounds ---- */
body[data-a11y] .lj2 :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--lj-a11y-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
body[data-a11y] .lj2 :is(.lj-topbar, .lj-band--ink, .lj-close, .lj-footer, .lj-drawer, .lj-phero, .lj-stickybar, .lj-shotband) :is(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--lj-a11y-ring-dark);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .55);   /* keeps the white ring visible over a light photo or fill */
}
body[data-a11y] [data-a11y-scroll]:focus-visible { outline: 3px solid var(--lj-a11y-ring); outline-offset: 2px; }
body[data-a11y] .lj2 .lj-band--ink [data-a11y-scroll]:focus-visible { outline-color: var(--lj-a11y-ring-dark); }

/* ---- 24px minimum targets (WCAG 2.5.8) without moving a pixel: padding grows the hit area, the negative margin
        gives the space back. Links inside a sentence are exempt by the rule and are left alone. ---- */
body[data-a11y] .lj2 .lj-topbar .lj-topbar-phone a,
body[data-a11y] .lj2 .lj-footer .disclaimer a,
body[data-a11y] .lj2 .lj-city-dir__city a,
body[data-a11y] .lj2 .lj-contact-rows .v a,
body[data-a11y] .lj2 .pp-contact a,
body[data-a11y] .lj2 .callnote a,
body[data-a11y] .lj2 :is(nav[aria-label="Breadcrumb" i], .lj-crumbs, .breadcrumb, [class*="crumb"]) a {
  display: inline-block;
  min-height: 24px;
  box-sizing: border-box;
  padding-block: 3px;
  margin-block: -3px;
  line-height: 1.35;
}
/* Footer link lists: phones already give each row a 12px pad in v2.css (>= 40px targets), so this is desktop only. */
@media (min-width: 721px) {
  body[data-a11y] .lj2 .lj-footer li a {
    display: inline-block; min-height: 24px; box-sizing: border-box;
    padding-block: 4px; margin-block: -4px; line-height: 1.35;
  }
}

/* ---- Footer legal row wraps cleanly and the Accessibility link sits with Privacy and Terms ---- */
body[data-a11y] .lj2 .lj-footer .base .push { row-gap: 0; }
/* Real padding here (not the negative-margin trick): these links wrap onto several rows, and overlapping boxes would fail 2.5.8. */
body[data-a11y] .lj2 .lj-footer .base a,
body[data-a11y] .lj2 .lj-footer .base .lj-privacy-choices { display: inline-block; min-height: 24px; box-sizing: border-box; padding-block: 4px; line-height: 1.35; }
body[data-a11y] .lj2 .lj-footer .base .push > * { white-space: nowrap; }

/* ---- Footer legal block (Stanley look-and-feel run, 2026-10-10): the image disclaimer and "Site by" line were 11px on phones
        (colour-flow shrinks them), left-aligned and 4.5:1 only by a hair. Centre the whole legal block (copyright + links row,
        disclaimer, Site by), floor the type at 12px, and use the accessible light-on-dark text colour. The wrap rules below
        (nowrap items, no overlapping boxes) still apply, so no orphan dots and every link stays >= 24px tall. ---- */
body[data-a11y] .lj2 .lj-footer .disclaimer { color: var(--lj-a11y-dim); text-align: center; margin-inline: auto; line-height: 1.5; }
@media (max-width: 720px) { body[data-a11y] .lj2 .lj-footer .disclaimer { font-size: 13px; } }
body[data-a11y] .lj2 .lj-footer .base { justify-content: center; text-align: center; }
body[data-a11y] .lj2 .lj-footer .base .push { margin-left: 0; justify-content: center; }

/* ---- Cookie banner links follow the same link rule. The factory bar is white (#cc-wrap); the original bar is
        dark (#cc-root), so it gets the on-dark colours. ---- */
body[data-a11y] #cc-wrap #cc-bar #cc-bar-text, body[data-a11y] #cc-wrap #cc-bar #cc-bar-text :not(a, .cc-link-btn, .cc-sep),
body[data-a11y] #cc-wrap #cc-bar #cc-gpc-notice, body[data-a11y] #cc-wrap #cc-bar #cc-gpc-notice :not(a) { color: var(--lj-a11y-body-ink) !important; }
body[data-a11y] #cc-wrap #cc-bar #cc-bar-text a,
body[data-a11y] #cc-wrap #cc-bar #cc-gpc-notice a,
body[data-a11y] #cc-wrap #cc-bar #cc-bar-text #cc-manage-btn {
  color: var(--lj-a11y-link) !important; text-decoration: none !important;
  display: inline-block; min-height: 24px; box-sizing: border-box; padding-block: 1px !important; margin-block: -1px !important;
}
body[data-a11y] #cc-wrap #cc-bar #cc-bar-text a:is(:hover, :focus, :focus-visible),
body[data-a11y] #cc-wrap #cc-bar #cc-gpc-notice a:is(:hover, :focus, :focus-visible),
body[data-a11y] #cc-wrap #cc-bar #cc-bar-text #cc-manage-btn:is(:hover, :focus, :focus-visible) { text-decoration: underline !important; }
body[data-a11y] #cc-root:not(:has(#cc-wrap)) #cc-bar #cc-bar-text,
body[data-a11y] #cc-root:not(:has(#cc-wrap)) #cc-bar #cc-gpc-notice { color: #cbd5e1 !important; }
body[data-a11y] #cc-root:not(:has(#cc-wrap)) #cc-bar #cc-bar-text a,
body[data-a11y] #cc-root:not(:has(#cc-wrap)) #cc-bar #cc-gpc-notice a {
  color: var(--lj-a11y-field-on-ink) !important; text-decoration: underline !important;
  display: inline-block; min-height: 24px; box-sizing: border-box; padding-block: 1px; margin-block: -1px;
}
@media (min-width:721px){ body[data-a11y] .lj2 .lj-footer .base{flex-direction:column; align-items:center; gap:8px} }