/* Site accessibility fixes — westoncosmeticdentist.com, a11y rollout 2026-10-09.
   Loaded after each page's own head CSS by BaseLayout.astro. Scoped rules only.
   Olive #5a690f = the site's #849916 darkened to 6:1 on white. */

/* visually hidden text (sr-only h1 on archive/form pages) */
.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 everywhere (only shows for keyboard users) */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #5a690f!important;outline-offset:2px!important}
.et-l--footer a:focus-visible,.et-l--footer [tabindex]:focus-visible,
.sticky-contact a:focus-visible{outline-color:#ffffff!important}

/* links inside body text are underlined so they don't rely on colour (WCAG 1.4.1) */
#main-content .et_pb_text_inner :is(p,li,td) a:not(.et_pb_button),
#main-content .entry-content :is(p,li,td) a:not(.et_pb_button),
#main-content .et_pb_blurb_description :is(p,li) a:not(.et_pb_button){text-decoration:underline}

/* "Designed By" credit link: 24px-high tap target (WCAG 2.5.8) */
.ft-credit a{display:inline-block;padding:5px 0;line-height:14px}

/* Divi slider (office tour): arrow labels readable by screen readers, 24px dot targets */
.et-pb-slider-arrows a span{display:block!important;position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}
.et-pb-controllers a{width:24px!important;height:24px!important;padding:8px!important;margin-right:0!important;box-sizing:border-box!important;background-clip:content-box!important;border-radius:50%!important}

/* homepage gallery buttons: translucent blue (2.9:1) -> the same blue, opaque (5.0:1) */
body.home .et_pb_button_1.et_pb_button,body.home .et_pb_button_9.et_pb_button{background-color:#0c71c3!important}

/* focus not obscured (WCAG 2.4.11): keep focused items clear of the fixed header (80px)
   and the fixed bottom contact bar (45px) when the browser scrolls them into view */
html{scroll-padding-top:90px;scroll-padding-bottom:60px}
/* the last footer row (credit + Sitemap) could never scroll out from under the fixed bottom bar
   on tablet/desktop; phones already have 52px of room there */
@media (min-width:768px){.et-l--footer .et_pb_section_3_tb_footer{padding-bottom:45px!important}}

/* phones: the header phone-icon link had font-size:0 (a 0x0 focus stop with no visible ring);
   stretch it over its icon so keyboard focus and taps land on what is seen */
@media (max-width:767px){
  .et_pb_blurb_4_tb_header{position:relative}
  .et_pb_blurb_4_tb_header .et_pb_blurb_description a{position:absolute;inset:0;z-index:1}
}

/* fixed bottom contact bar: white text on #849916 was 3.2:1 -> closest darker olive, 4.5:1 */
html body .et-l--footer .et_pb_section_5_tb_footer.et_pb_section,html body #et-boc .et-l .et_pb_section_5_tb_footer.et_pb_section,html body.et-db #et-boc .et-l .et_pb_section_5_tb_footer.et_pb_section{background-color:#6d7e12!important}

/* /weston-cosmetic-dentist/ testimonial slider: the 2 pagination dots are the only keyboard
   controls; give each a 24px target (visual dot unchanged) instead of Swiper's shrinking dots */
.page-id-30036566 .swiper-pagination-bullets-dynamic{width:auto!important;left:50%!important;transform:translateX(-50%)!important;white-space:nowrap}
.page-id-30036566 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{position:static!important;transform:none!important;width:24px!important;height:24px!important;padding:8px!important;margin:0 2px!important;box-sizing:border-box!important;background-clip:content-box!important}

/* Divi buttons draw their arrow with an icon-font letter ("5", or the data-icon letter); give
   the generated text an empty alternative so screen readers stop announcing "Meet Dr. Thanos 5" */
.et_pb_button:not([data-icon])::after,.et_pb_button:not([data-icon])::before{content:"5" / ""}
.et_pb_button[data-icon]::after,.et_pb_button[data-icon]::before{content:attr(data-icon) / ""}

/* homepage "Dental Solutions" cards: headings were white-space:nowrap, so enlarged text
   (widget 150% / browser zoom) pushed them out of the card and scrolled the page sideways */
body .main_box h2{white-space:normal!important}

/* phones, scrolled: the fixed blue header bar (Menu / Call / Appointment / Location) had white
   15px labels on #0798bc = 3.4:1 -> closest darker shade of the same blue, 4.5:1 */
html body #et-boc .et-l .et_pb_section.header_tra.moboSetting.mbo_header,
html body.et-db #et-boc .et-l .et_pb_section.header_tra.moboSetting.mbo_header{background-color:#06819f!important}