/* B Well Dental Studio — accessibility fixes (a11y rollout 2026-10-09).
   Loaded after the theme + mirror-fixes CSS. Specific rules only; the theme tokens
   (--color-accenta etc.) are untouched, so gold on the dark footer/bands keeps its look.
   Gold #cfa75d fails on light backgrounds, so:
     gold as a BACKGROUND under white text  #cfa75d 2.24:1 -> #936f2c 4.61:1
     gold as TEXT on white/cream            #cfa75d 2.04-2.24:1 -> #876628 4.6-5.3:1  */

.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}

/* sidr off-canvas copy of the desktop menu: parked off-screen but still readable and
   tabbable. Hide it from keyboard + screen readers while it is closed. */
body:not(.sidr-open) #sidr-main{visibility:hidden!important}

/* ---- gold buttons / badges with white text -------------------------------------------- */
html body .btn.color-accent1:not(:hover):not(:focus-visible),
html body #main #et-boc .btn.color-accent1:not(:hover):not(:focus-visible),
html body .btn.color-accenta-btn:not(:hover):not(:focus-visible),
html body #main #et-boc .btn.color-accenta-btn:not(:hover):not(:focus-visible),
html body #main #et-boc .video-popup-list .video-button:not(:hover):not(:focus-visible),
html body .video-popup-list .video-button:not(:hover):not(:focus-visible),
html body a.ph-icon,
html body .bwaf-tab,
html body .btn-container > a.btn:not([class*="color-"]):not(:hover):not(:focus-visible),
html body a[style*="background:#cfa75d"],
html body .tmjt.tmjt-light a.tmjt-btn{background-color:#936f2c!important;border-color:#936f2c!important}
html body a.ph-icon,html body .bwaf-tab{color:#fff!important}
/* hover/focus keep the theme's own ghost state (transparent, gold border, white or dark text) */

/* ---- gold text on white / cream --------------------------------------------------------- */
/* bottom bar is dark (#1e1e1e): gold links pass contrast but match the cream text too closely -> underline */
html body .bttm-footer a{text-decoration:underline!important}
html body .cv-linkcol a{color:#876628!important}
html body .cv-linkcol h4{color:#866a3f!important}
html body .cat-link,
html body .single-post .entry-content a,
html body .blog-content a{color:#876628!important}
html body .bwty-eyebrow,html body .bwaf-eyebrow,html body .bwaf-price>span{color:#876628!important}
html body a[style*="color:#cfa75d"]{color:#876628!important;border-color:#876628!important}
html body .tmjt-light .tmjt-eyebrow{color:#886b35!important}
html body .smv-eyebrow,html body .smgal-eyebrow{color:#84632e!important}

/* gold text links on the light bands */
html body #main #et-boc .band-light-alt .et_pb_text_inner a:not(.btn),
html body #main #et-boc .band-light .et_pb_text_inner a:not(.btn),
html body .band-light .post-content a:not(.btn),
html body .band-light .post-content .author a{color:#876628!important}
/* links inside body copy: underline so they don't rely on colour alone */
html body #main .et_pb_text_inner p a:not(.btn),
html body #main .et_pb_text_inner li a:not(.btn),
html body #main .entry-content p a:not(.btn),
html body #main .entry-content li a:not(.btn),
html body #main .et_pb_text_inner .heading-tertiary a:not(.btn),
html body .post-content a:not(.btn):not([aria-hidden="true"]){text-decoration:underline}

/* ---- heading demotions (one h1 per page) — look pinned to the measured h1 values ----- */
html body h2.np-h1{font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:500!important;color:#2b2926!important;font-size:clamp(38px,4.6vw,62px)!important;line-height:1.04!important;letter-spacing:.5px!important;margin:0!important;padding:0 0 10px!important;text-transform:none!important}
html body h2.np-h1 em{display:block;font-style:italic;font-weight:500;color:#a28452!important} /* #a98a55 2.85 -> 3.09 (large text) */
html body .et-db #et-boc .et-l h2.a11y-was-h1,html body h2.a11y-was-h1{font-family:"Old Standard TT",serif!important;font-weight:500!important;color:#000!important;font-size:36px!important;line-height:36px!important;letter-spacing:normal!important;text-transform:none!important;margin:0!important;padding:0 0 10px!important}
@media only screen and (max-width:767px){html body .et-db #et-boc .et-l h2.a11y-was-h1,html body h2.a11y-was-h1{font-size:18px!important;line-height:27px!important}}

/* ---- homepage + inner custom sections (inline <style> blocks in content-html) --------- */
html body .np-card-title,html body .npx-eyebrow,html body .lbl{color:#84632e!important}      /* #a67c3a 3.12 -> 4.58 on #efe9e1 */
html body .af-lead em,html body .af-video-cap,html body .t2{color:#806329!important}        /* #8a6a2c 4.1-4.4 -> 4.59+ */
html body a.af-btn{background-color:#8c6529!important;color:#fff!important}                 /* white on #a67c3a 3.77 -> 5.24 */
html body .et_pb_text_inner u[style*="color: red"]{color:#ed0000!important}                 /* 3.99 -> 4.56 */
html body.page-id-48708 .et_pb_text_7 .et_pb_text_inner p,html body.page-id-48708 .et_pb_text_7 .et_pb_text_inner p strong{color:#0c6dbc!important} /* 4.34 -> 4.61 on #eee */
/* video slider caption overlay on photos: rgba(0,0,0,.5) -> .6 (white text 4.29 -> 5.3+) */
html body.home .et_pb_video_popup_slider_5 .video-popup-list__description{background-color:rgba(0,0,0,.6)!important}

/* ---- slider pagination: 24px targets (WCAG 2.5.8), dot drawn inside ------------------- */
html body .swiper-pagination-bullet{width:24px!important;height:24px!important;background-clip:content-box!important;padding:8px!important;box-sizing:border-box!important;margin:0 2px!important}
/* active dot was white on the white testimonial band (1:1, invisible) -> site ink #2e2e2e (13:1); inactive #888 is 3.5:1 */
html body .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color:#2e2e2e!important;opacity:1!important}

/* ---- keyboard focus: visible ring in the site's dark ink, gold halo for dark bands ----- */
html body a:focus-visible,html body button:focus-visible,html body [tabindex]:focus-visible,html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible,html body summary:focus-visible{outline:3px solid #2e2e2e!important;outline-offset:2px!important;box-shadow:0 0 0 5px #fff!important}
html body footer a:focus-visible,html body #v2-sticky-bar a:focus-visible,html body #v2-sticky-bar button:focus-visible,html body #v2-drawer a:focus-visible,html body #v2-drawer button:focus-visible{outline-color:#cfa75d!important;box-shadow:0 0 0 5px #232323!important}
html body .a11y-statement a:focus-visible{outline:3px solid #2e2e2e!important;outline-offset:3px!important}
/* skip link: visible when focused */
html body .skip-link:focus{position:fixed!important;top:8px!important;left:8px!important;width:auto!important;height:auto!important;clip:auto!important;padding:10px 16px!important;background:#2e2e2e!important;color:#fff!important;z-index:100000!important;font-size:16px!important}

html body .tmjt.tmjt-light a.tmjt-btn:hover{background-color:#8f7138!important} /* white on #b8924a 2.9 -> 4.58 */

/* footer social icons: 16px -> 24px targets (WCAG 2.5.8) */
html body .sb-link{display:inline-flex!important;align-items:center;justify-content:center;min-width:24px;min-height:24px}
/* legal-page contents rail links: 24px targets */
html body .lg-toc a{display:inline-block;min-height:24px;padding:2px 0}


/* profile/insurance form pages: heading teal #1badcf 2.64 -> #148099 4.59 (closest darker shade) */
html body .bwp-h1{color:#148099!important}

/* homepage mobile hero background video: pause/play control (WCAG 2.2.2) */
html body .et_pb_row_21.video{position:relative}
html body .a11y-vidpause{position:absolute;right:12px;bottom:12px;z-index:20;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.7);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
html body .a11y-vidpause:hover{background:#000}

/* desktop dropdowns open on hover only -> also while keyboard focus is inside (2.1.1) */
html body .fullheader #navigation .nav .gasoline-alley li:focus-within > .sub-menu{display:block!important;visibility:visible!important;opacity:1!important}

/* focus not obscured (2.4.11): the GHL chat bubble/prompt sits over the bottom-right corner of the page, so the
   last footer links (credit, back-to-top) scrolled under it. Room below the bottom bar + scroll padding. */
html{scroll-padding-bottom:110px;scroll-padding-top:136px}  /* top: fixed 120px desktop header */
@media (max-width:980px){ html{scroll-padding-top:80px} }  /* 64px mobile bar */
html body p.back-to-top{bottom:180px!important}  /* was 70px: under the chat prompt */
@media (min-width:981px){
  /* desktop: the chat prompt covers the bottom-right ~340x170px -> keep the bottom-bar text out of that strip */
  html body .bttm-footer{padding-right:340px!important}
}
/* phones/tablets: the chat prompt spans almost the full width of the bottom ~180px -> room below the bottom bar */
@media (max-width:980px){ html body .bttm-footer-wrap{padding-bottom:190px!important} }

/* hover/focus states measured with real hover()/focus():
   desktop nav: gold #cfa75d at 70% opacity on the cream bar 1.95 -> #876628, full opacity 4.61 */
html body .fullheader #navigation .nav .gasoline-alley > li > a:hover,
html body .fullheader #navigation .nav .gasoline-alley > li > a:focus-visible,
html body .fullheader #navigation .nav .gasoline-alley > li > a:hover span,
html body .fullheader #navigation .nav .gasoline-alley > li > a:focus-visible span{color:#876628!important;opacity:1!important}
html body .fullheader #navigation .nav .gasoline-alley .sub-menu a:hover,html body .fullheader #navigation .nav .gasoline-alley .sub-menu a:focus-visible{opacity:1!important}  /* gold on #404040 4.61 at full opacity */
/* cards that turn dark (#404040) on hover: links go back to the theme gold (4.61) instead of the light-band shade */
html body #main #et-boc .text-boxes-with-hover .et_pb_column:hover .et_pb_text_inner a:not(.btn){color:#cfa75d!important}
html body #main #et-boc .text-boxes-with-hover .et_pb_column:hover .et_pb_text_inner a:not(.btn):hover{color:#dbdad4!important}
/* back-to-top: black chevron on the dark bar when hovered (1.26) -> gold (6+) */
html body .back-to-top-btn:hover,html body .back-to-top-btn:focus-visible{color:#cfa75d!important}