/* a11y-fixes.css — dentistinloveland.com accessibility fixes (a11y rollout 2026-10-09).
   Source of truth: _a11y/a11y-fixes.css (copied to public/css/ by 01-widget-legal-footer.py).
   Linked from all three page shells: BaseLayout (legacy 1:1 pages), PremiumInner, index.astro.
   Scoped rules only — no global token is changed. */

/* ---- skip link + screen-reader-only text ---- */
.skip-link{position:absolute;left:-10000px;top:0;z-index:2147483000;background:#1c2430;color:#fff!important;padding:12px 18px;font:600 16px/1.2 Arial,sans-serif;text-decoration:underline;border-radius:0 0 8px 0}
.skip-link:focus{left:0;outline:3px solid #8fd3da;outline-offset:0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---- visible keyboard focus (2.4.7): white inner ring + navy outer ring reads on light AND dark bands ---- */
html body a:focus-visible,html body button:focus-visible,html body summary:focus-visible,
html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible,html body [tabindex]:focus-visible{
  outline:3px solid #1c2430;outline-offset:2px;box-shadow:0 0 0 2px #fff}

/* ---- footer credit (CLAUDE.md standard; never nowrap) ---- */
.ft-credit{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}
.ft-credit svg{flex:none}

/* ---- premium footer: legal row ---- */
.ftr-bottom .ftr-legal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.ftr-bottom .ftr-legal span{color:rgba(255,255,255,.45)}

/* ---- premium desktop menus: open on keyboard focus too (hover-only before), Esc closes (a11y-fixes.js) ---- */
.nav-svc:focus-within .nav-svc-panel,.nav-mu:focus-within .nav-mu-panel{opacity:1;visibility:visible}
.nav-svc.a11y-closed .nav-svc-panel,.nav-mu.a11y-closed .nav-mu-panel{opacity:0;visibility:hidden}

/* ---- service pages (content-html/services): restore the template's own dark teal for text on light rows.
        PremiumInner's :root --teal (#4c9ba4) overrode it: 3.2:1 on white, 2.9:1 on paper.
        #33777f (= site --teal-deep) is 5.1:1 on white / 4.7:1 on paper / 4.6:1 on teal-pale.
        Hover went to #6db5bd (2.3:1) -> darker teal. ---- */
.sp-hero,.sp-breadcrumb,.sp-row{--teal:#33777f;--teal-light:#24585e}

/* ---- links inside running text must not rely on colour alone (1.4.1 link-in-text-block) ---- */
html body main p a:not([class*="btn"]),html body main .sp-list li a{text-decoration:underline;text-underline-offset:2px}

/* ===================== legacy 1:1 pages (BaseLayout) ===================== */
/* menus: open on keyboard focus, readable hover/focus state (white on #C99446 was 2.7:1) */
#menutop li.top-hassub:focus-within > .mnav-root{display:block}
#menutop .mnav-item:focus-within > .mnav-sub{display:block}
html body #menutop .mnav-item a:hover,html body #menutop .mnav-item a:focus-visible{color:#000!important}
#top-wrapper.a11y-menu-closed #menutop .mnav-root,#top-wrapper.a11y-menu-closed #menutop .mnav-sub{display:none!important}

/* footer: white text on the khaki footer_bg (#C1B988) was 2.0:1 -> dark brown, 6.3:1 */
html body #footer,html body #footer .footer-text,html body #footer .white-links a,html body #footer .footer-text a{color:#3d331a}
html body #footer font[color]{color:#3d331a}

/* duplicate page title demoted to h2 (one h1 per page) — look pinned to the legacy h1 */
.body-left h2.a11y-h1look{font-family:"Trajan Pro"!important;font-size:32px;color:#6f5e36;font-weight:normal;padding:25px 0 0 0;line-height:40px}

/* ===================== round 2 (axe sweep 1 residue) ===================== */
/* homepage "Book Your Appointment" + smile-gallery "After" tag: white on #4c9ba4 = 3.2:1 -> #33777f = 5.1:1 */
html body a.btn.btn-accent{background:#33777f}
html body a.btn.btn-accent:hover{background:#24585e}
html body span.sg-tag.sg-tag-after{background:#33777f}
/* list links inside service copy (link-in-text-block) */
html body main .sp-row ul li a:not([class]){text-decoration:underline;text-underline-offset:2px}
/* legal/statement contents rail: tap targets >= 24px tall (2.5.8) */
.lg-toc li a{display:inline-block;padding:2px 0;min-height:24px}
/* emergency page phone buttons overflowed a 375px screen (1.4.10 reflow) */
html body main a.sp-hero-phone,html body main a.sp-phone-btn{max-width:100%;white-space:normal;box-sizing:border-box;text-align:center}
@media (max-width:600px){html body main a.sp-hero-phone,html body main a.sp-phone-btn{padding-left:20px;padding-right:20px}}

/* ===================== round 3 (pixel-measured contrast over images/gradients) ===================== */
/* premium footer small text rgba(255,255,255,.55) over the photo-tinted ink = 4.1-4.3:1 -> .75 */
html body footer.ftr .ftr-areas,html body footer.ftr .ftr-bottom,html body footer.ftr .ftr-bottom > p,html body footer.ftr .ft-credit{color:rgba(255,255,255,.75)}
html body .ftr-bottom .ftr-legal span{color:rgba(255,255,255,.7)}
/* legal/statement eyebrow over the tinted band: 4.49:1 at worst -> darker teal */
html body .lg-page .lg-eyebrow{color:#24585e}
/* service hero on phones: the copy spans the full width, so the left-only gradient left the subtitle over
   the bright half of the photo (2.4:1 worst) -> bottom-up overlay under 768px */
@media (max-width:768px){html body .sp-hero-overlay{background:linear-gradient(to top,rgba(26,43,69,.9) 0%,rgba(26,43,69,.72) 50%,rgba(26,43,69,.35) 100%)}}
/* legacy pages: body text #7a745c on the khaki page texture = 3.1:1 -> #4d4838; sub-service link grey #999 -> #4d4d4d */
html body .body-left{color:#4d4838}
html body #subserviceurl{color:#4d4d4d}
/* legacy top nav: white labels on the light teal texture = 3.0:1 -> darken the bar (same hue) under the labels */
html body #nav-bg{box-shadow:inset 0 0 0 9999px rgba(22,66,70,.5)}
html:has(header.hdr){scroll-padding-top:110px}
/* service card grids overflowed a 320px screen / 375px with text spacing (1.4.10, 1.4.12): let cards shrink, wrap long words */
html body .sp-cards-grid > .sp-card{min-width:0;overflow-wrap:break-word}
/* legacy sidebar form: borderless #f0efdb fields on the khaki sidebar were ~1.1:1 — add a visible field border (1.4.11) */
html body .contact-form input.contact-form-box,html body .contact-form textarea{border:1px solid #6f6248;box-sizing:border-box}
/* homepage hero "Request Your Appointment" (white on #4c9ba4 = 3.2:1) and reviews intro copy (.85 white over the teal photo band = 4.2:1) */
html body a.btn.btn-hero-fill{background:#33777f}
html body .reviews p.rev-copy{color:#fff}

/* ===================== round 4 (pixel pass over every axe "incomplete" text node) ===================== */
/* teal-deep (#33777f) text measured 4.1-4.5:1 over the dotted/tinted paper bands -> #2b6a71 (5.0:1 worst pixel, 6.2:1 on white).
   Light bands only; the dark bands keep their own colours. :not(#a11y) lifts specificity over Astro's scoped rules. */
html body main :is(.eyebrow,.doc-cred,.dp-cred,.team-cred,.tm-role,.glance-label,.lic-num,.tl-org,.tl-year,.com-areas-label,.jumps-label,.link-go,.topic-go,.team-more,.tlink,.doc-cv a,.dp-cv a,.appt-links a,.contactp-links a,.plan-note a,.lead a,p > a:not([class*="btn"])):not(:is(.tech,.reviews,.hero,.info-card,.fin-card,.sp-cta,.sp-hero,.cta-band,#body) *):not(#a11y){color:#2b6a71}
/* teal gradient buttons/badges (white text on the light #4c9ba4 end = 3.2:1) -> same gradient one step darker */
html body :is(a.btn-docs,.btn-review,.doc-mono):not(#a11y){background:linear-gradient(135deg,#33777f,#24585e)}
/* homepage service tiles: glass chip and the lower title over bright photos */
html body .svc-tile .svc-chip:not(#a11y){background:rgba(15,23,32,.72)}
html body .svc-tile:not(#a11y)::after{background:linear-gradient(185deg,rgba(15,23,32,.12) 22%,rgba(15,23,32,.9) 72%)}
/* smile photos: "View the smile gallery" caption + Before/After tags over light photos */
html body .smile-tag:not(#a11y){background:linear-gradient(180deg,rgba(15,23,32,.55),rgba(15,23,32,.92))}
html body .sg-tag:not(#a11y){background:rgba(15,23,32,.92)}
html body .sg-tag.sg-tag-after:not(#a11y){background:#24585e}
/* insurance page: teal card headings on the dark financing cards -> light teal */
html body .fin-card h3:not(#a11y){color:#8fd3da}
/* legacy pages: orange h2 (#d68800) on the khaki page = 2.0:1 -> dark amber 5.2:1 */
html body .body-left h2:not(.a11y-h1look),html body .body-left h2 strong{color:#7a4b00}
/* review stars are a graphic (role=img + label): gold #e9a13b on white = 2.2:1 -> deeper gold 3.7:1 (1.4.11) */
html body :is(.rev-stars,.rv-stars):not(#a11y){color:#b8770a}
/* homepage service tiles on phones: start the dark scrim higher so the tile title clears 4.5:1 */
@media (max-width:768px){html body .svc-tile:not(#a11y)::after{background:linear-gradient(185deg,rgba(15,23,32,.25) 10%,rgba(15,23,32,.94) 50%)}}