/* Accessibility layer (WCAG 2.2 AA), loaded last on every page by apply_a11y_2026_10_15.py.
   Brand green #50a747 is 3.0:1 on white; text and white-on-green fills use #367f32 (4.95:1 on white,
   4.7:1 on the off-white section backgrounds). Decorative green (icons, borders, rules) is unchanged. */
:root{--v3-btn:#367f32;--jdi-a11y-green:#367f32}

/* Skip link (2.4.1) + main landmark */
.jdi-skip{position:fixed;left:12px;top:-60px;z-index:100000;padding:12px 18px;border-radius:10px;background:#14201a;color:#fff!important;font:600 15px/1.2 "Proxima Nova",ui-sans-serif,system-ui,sans-serif;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:top .15s}
.jdi-skip:focus{top:12px;outline:3px solid #a9e0a2;outline-offset:2px}
#gatsby-focus-wrapper>main{display:block;overflow-x:clip;overflow-y:visible}
main:focus{outline:none}

/* Visible keyboard focus everywhere (2.4.7) */
a:focus-visible,button:focus-visible,[role=button]:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #367f32;outline-offset:2px}

/* Contrast (1.4.3): green text on light backgrounds */
.text-jdi-accent,.jdir-city,.jdi-ba-caption-link,.jdi-calc-summary-eyebrow,.t-eyebrow,.jdi-ba-eyebrow,.v3-eyebrow,.v3h-kick,.mto-eyebrow,
.btn-white,.btn-outline,.fin .grn,.fin .idx,p:not(.jl-lead):not(.v3-form-fine) a[href^="tel:"]:not([class]),
[style*="color:#50A747" i]:not([style*="background-color:#50A747" i]):not([style*="background:#50A747" i]){color:#367f32!important}
/* green text on mint/tinted chips needs the darker shade */
.bg-jdi-mint.text-jdi-accent,.v3b-next a,.v3h-answer .v3h-kick{color:#2f722b!important}
.v3t-filters i{opacity:.85!important}
.text-sm .opacity-60{opacity:.8!important}
p a[href^="tel:"]:not([class]){text-decoration:underline;text-underline-offset:2px}
[style*="color:#8E8E93" i]{color:#6b7280!important}
.v3-hero .v3-eyebrow{color:#a9e0a2!important}
.kg-crumb a{text-decoration:underline;text-underline-offset:2px}

/* Contrast: white text on green fills */
.bg-jdi-accent,a.bg-jdi-accent,button.bg-jdi-accent,.jdi-lenders .jl-btn,.a1,.btn:not(.btn-white):not(.btn-outline),
.fixed.top-0>a.bg-jdi-accent,.fixed.top-0>a.bg-jdi-accent:hover,
[style*="background-color:#50A747" i],[style*="background-color: #50A747" i],[style*="background:#50A747" i]{background-color:#367f32!important}
.bg-jdi-accent:hover,a.bg-jdi-accent:hover,.jdi-lenders .jl-btn:hover,.a1:hover,.btn:not(.btn-white):not(.btn-outline):hover{background-color:#2f722b!important}
a[href^="tel:"].text-white{color:#fff!important}

/* Contrast: light grey text */
[style*="color:#999"]:not([style*="background-color:#999"]),[style*="color: #999"]:not([style*="background-color: #999"]){color:#6b7280!important}
.text-gray-400{color:#6b7280}

/* Target size (2.5.8): share icons */
.react-share__ShareButton{min-width:28px;min-height:28px;display:inline-flex!important;align-items:center;justify-content:center}

/* white text on the (now darker) green warranty band */
.jdiv2 [style*="color:rgba(255,255,255,.9)"]{color:#fff!important}
[style*="color:#9a958a" i]{color:#5c5a52!important}

/* Small phones (launch audit 16 Oct): logo 192px + Call Now + menu did not fit under 392px, so the
   menu button sat off-screen at 320/360 and 1px out at 375. Logo scales with the viewport instead. */
@media (max-width:399px){
  header>div.h-20{padding-left:12px!important;padding-right:12px!important;gap:8px!important}
  header a[aria-label="JDI Construction home"]{width:min(192px,calc(100vw - 186px))!important;height:auto!important;flex-shrink:1!important;min-width:0}
  header a[href^="tel:"].lg\:hidden{padding:8px 12px!important}
  header>div.h-20>div.ml-auto{gap:6px!important}
}