/* Lever Dentistry — accessibility fixes (2026-10-09). Loaded after each page's own Divi CSS.
   Every colour is the closest shade of the site's own colour that reaches WCAG AA, scoped to the
   rule that failed (never a global token). Ratios are against the measured background. */

/* Divi scopes its rules as ".et-db #et-boc .et-l …" / "body #page-container …", so the fixes below
   are prefixed "html body #page-container #et-boc .et-l" to outrank them without !important. */

/* screen-reader-only text + skip link */
.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}
.mpo-skip{position:absolute;left:8px;top:-60px;z-index:1000000;background:#323863;color:#fff!important;padding:10px 16px;font-size:16px;font-weight:600;text-decoration:none;border-radius:0 0 4px 4px}
.mpo-skip:focus{top:0;outline:3px solid #fff;outline-offset:-5px}
#main-content:focus{outline:none}

/* footer contact links: #0c71c3 on #ededed 4.31:1 -> #0b67b2 4.99:1 */
html body #page-container #et-boc .et-l--footer .et_pb_blurb_description a{color:#0b67b2}
/* in-page jump-link boxes (grey #e2e2e2-#eaeaea): #0c71c3 3.89-4.19:1 -> #0b67b2 4.51-4.85:1 */
html body #page-container #et-boc .et-l .ulRow a,html body #page-container #et-boc .et-l .et_pb_section.sec_bullets a{color:#0b67b2}

/* "Map & Directions" (26px text): white on #e09900 2.41:1 -> #c88800 3.01:1 (large text) */
html body #page-container #et-boc .et-l .et_pb_section .et_pb_button.et_pb_button_0_tb_footer.mapsd{background-color:#c88800}
/* homepage "Meet The Team" (16px bold): white on #00aded 2.56:1 -> #007fae 4.52:1 */
html body.home #page-container #et-boc .et-l .et_pb_section .et_pb_button.et_pb_button_0{background-color:#007fae}
/* homepage gold "Schedule Appointment" (18-20px): white on #dbab1a 2.13:1 -> logo-navy text 5.24:1 (gold kept) */
html body.home #page-container #et-boc .et-l .et_pb_section .et_pb_button.et_pb_button_1{color:#323863!important}

/* phone/tablet header, page top: white "Menu" + bars on the light-teal band (#6ac1d2) 2.06:1 -> logo navy #323863 5.41:1 */
@media only screen and (max-width:980px){
  body .et_pb_section_0_tb_header:not(.mbo_header) .tresio-nav.type-hamburger .tresio-nav__hamburger:not([aria-expanded="true"]) .menu_text{color:#323863!important}
  body .et_pb_section_0_tb_header:not(.mbo_header) .tresio-nav.type-hamburger .tresio-nav__hamburger:not([aria-expanded="true"]):before,
  body .et_pb_section_0_tb_header:not(.mbo_header) .tresio-nav.type-hamburger .tresio-nav__hamburger:not([aria-expanded="true"]):after,
  body .et_pb_section_0_tb_header:not(.mbo_header) .tresio-nav.type-hamburger .tresio-nav__hamburger:not([aria-expanded="true"]) span{background:#323863!important}
  /* scrolled (sticky .mbo_header): white Menu/Call/Appointment/Location on #0798b7 3.39:1 -> band #06819b 4.54:1 */
  html body #page-container #et-boc .et-l .et_pb_section.mbo_header .et_pb_row.et_pb_row_1_tb_header,
  html body #page-container #et-boc .et-l .et_pb_section.mbo_header .et_pb_column.et_pb_column_0_tb_header{background-color:#06819b!important}
}

/* fixed bottom bar: white on #59a195 3.02:1 -> #478077 4.54:1 */
html body #page-container #et-boc .et-l .et_pb_section_2_tb_footer.et_pb_section{background-color:#478077!important}
/* the orange bar underneath is always fully covered by the teal one; it only duplicated the credit for screen readers */
html body #page-container #et-boc .et-l .et_pb_section_1_tb_footer.sticky-contact{display:none!important}

/* "Designed By" credit — CLAUDE.md standard, wraps (never nowrap) */
.ft-credit{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}
.ft-credit svg{flex:none}
html body #page-container #et-boc .et-l .sticky-contact .ft-credit,html body #page-container #et-boc .et-l .sticky-contact .ft-credit a{color:#fff!important;font-weight:600}
.sticky-contact .ft-credit{line-height:1.3}

/* footer legal row (Privacy | Terms | Accessibility) + the credit on phones/tablets */
.mpo-legal-section{background-color:#ededed;padding:0}
.mpo-legal-row{clear:both;width:80%;max-width:1080px;margin:0 auto;padding:18px 0 62px;text-align:center;font-size:15px;line-height:1.6;color:#333}
.mpo-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 12px}
html body #page-container #et-boc .et-l .mpo-legal a{display:inline-block;padding:3px 2px;color:#0b67b2;text-decoration:underline}
.mpo-legal span{color:#555}
@media only screen and (max-width:600px){.mpo-legal{gap:2px 22px}.mpo-legal span{display:none}}
.mpo-credit-row{margin:10px 0 0;padding:0;color:#333}
.mpo-credit-row .ft-credit{justify-content:center}
html body #page-container #et-boc .et-l .mpo-credit-row .ft-credit a{display:inline-block;padding:3px 0;color:#0b67b2;text-decoration:underline}
@media only screen and (min-width:981px){.mpo-credit-row{display:none}}

/* keyboard focus rings (the theme forces "a:focus{outline:auto!important}", hence !important) */
.mpo-legal a:focus-visible,.mpo-credit-row a:focus-visible{outline:2px solid #323863!important;outline-offset:2px}
.sticky-contact a:focus-visible{outline:2px solid #fff!important;outline-offset:2px}
.a11y-statement a:focus-visible{outline:3px solid #323863!important;outline-offset:3px}
.et_clickable[role="link"]:focus-visible,.swiper-pagination-bullet:focus-visible,.free-swiper-prev:focus-visible,.free-swiper-next:focus-visible,.dsm_image_carousel [data-mpo-btn]:focus-visible{outline:3px solid #323863!important;outline-offset:2px}
/* 2.4.11: keep a focused control clear of the fixed header and the 45px fixed bottom bar */
html{scroll-padding-top:100px;scroll-padding-bottom:60px}  /* + the fixed 90px (desktop) / 70px (phone) header */

/* target size (2.5.8): slider dots keep their look; the clickable box grows to 24px with a transparent border */
html body #page-container .et_pb_slider .et-pb-controllers a{box-sizing:content-box;width:7px;height:7px;border:9px solid transparent;background-clip:padding-box;border-radius:50%;margin:0 1px}
.db-swiper-init .swiper-pagination-bullet{box-sizing:content-box!important;border:8px solid transparent!important;background-clip:padding-box!important}
/* the current-review dot was white on the white band (invisible, 1.4.11) -> logo navy; the others stay #888 (3.54:1) */
html body .db-swiper-init .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color:#323863!important;background-clip:padding-box!important}

/* Pause/Play for auto-rotating carousels (added by a11y-fixes.js) */
.mpo-pause{position:absolute;right:8px;bottom:8px;z-index:20;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:2px solid #fff;border-radius:50%;background:#323863;color:#fff;cursor:pointer;line-height:1}
.mpo-pause:focus-visible{outline:3px solid #323863;outline-offset:2px}

/* FAQ toggles: Divi draws the +/- with an icon-font glyph in ::before, which Chrome adds to the heading's
   name ("\e050 How long does…"). Same glyphs, empty alternative text. */
html body .et_pb_toggle .et_pb_toggle_title:before,html body.et-db #et-boc .et-l .et_pb_toggle .et_pb_toggle_title:before{content:"\e050" / ""}
html body .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before,html body.et-db #et-boc .et-l .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before{content:"\e04f" / ""}

/* Hero headline over the photo (axe "incomplete" -> measured on every hero's pixels). On phones and tablets the
   headline runs across the photo (down to 1.07:1 on /dental-services/zoom-whitening-don-mills/ at 375px):
   a light backing behind the text block. Desktop text sits on the photo's own pale fade and passes. */
@media only screen and (max-width:980px){
  html body:not(.postid-26329) #page-container .sec_banner .et_pb_module.et_pb_text{background-color:rgba(255,255,255,.8);padding:8px 12px;border-radius:4px}
}
/* /dental-services/emergency-dentist-in-don-mills/: white + red headline on a grey photo (red 1.5-1.7:1) ->
   darker overlay on that hero only */
html body.postid-26329 #page-container .sec_banner{position:relative}
html body.postid-26329 #page-container .sec_banner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.55);pointer-events:none;z-index:0}
html body.postid-26329 #page-container .sec_banner>.et_pb_row{position:relative;z-index:1}