/* a11y.css — accessibility fixes for dentistdonmills.com (2026-10-09, SOP-A11Y-WIDGET-ROLLOUT).
   Colours are the closest shade of the site's own colour that reaches WCAG AA. Scoped rules only. */

/* utilities */
.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}
.a11y-skip{position:absolute;left:8px;top:-60px;z-index:1000000;background:#152851;color:#fff!important;padding:10px 16px;border-radius:4px;font-weight:700;text-decoration:none}
.a11y-skip:focus{top:8px}
#main:focus{outline:none}

/* visible keyboard focus everywhere (site navy; white ring on the dark bars) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #152851;outline-offset:2px}
#top-header a:focus-visible,#top-menu a:focus-visible,.columnbottom a:focus-visible,.a11y-mini-footer a:focus-visible,.et_pb_blurb a:focus-visible{outline-color:#fff;box-shadow:0 0 0 5px #152851}
.mobile_nav:focus-visible{outline:3px solid #152851;outline-offset:2px}

/* link colour: Divi default a{#2ea3f2} is 2.7:1 on white / 2.3:1 on the #ededed footer band.
   Same hue, darker: #0b6eb2 = 5.4:1 on white, 4.6:1 on #ededed. Only replaces the theme default
   (same specificity, loaded later) — links that carry their own colour keep it. */
a{color:#0b6eb2}
/* the black legal bar keeps the original light blue (7.6:1 on black) */
.columnbottom a,.a11y-mini-footer a{color:#2ea3f2}

/* links inside running text: underline so they are not identified by colour alone */
.et_pb_text_inner p a:not(.et_pb_button),.et_pb_text_inner li a,.entry-content p a:not(.et_pb_button),.entry-content li a,.textwidget p a,[itemprop="suggestedAnswer"] a,#main .et_pb_text_inner>a:not(.et_pb_button){text-decoration:underline}

/* main menu: current item #2ea3f2 on #3f7093 was 1.9:1 -> pale tint of the same blue (4.5:1) + underline */
#et-top-navigation #top-menu li.current-menu-item>a,#et-top-navigation #top-menu li.current-menu-ancestor>a{color:#dbeffd;text-decoration:underline;text-underline-offset:5px}
.et_mobile_menu li.current-menu-item>a{color:#0b6eb2!important}

/* gallery slider dots: 7px targets -> 24px hit area, dot drawn the same size */
.et-pb-controllers a{box-sizing:content-box;padding:8.5px;background-clip:content-box;margin-right:2px}
.et-pb-arrow-prev,.et-pb-arrow-next{min-width:24px;min-height:24px}

/* footer credit (CLAUDE.md standard) */
.ft-credit{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px;justify-content:center}
.ft-credit svg{flex:none}
.columnbottom .ft-credit,.a11y-mini-footer .ft-credit{color:#cccccc}

/* footer for the two pages whose theme footer is empty (appointment, dental-services) */
.a11y-mini-footer{background:#000;padding:14px 0;text-align:center;font-size:14px;color:#cccccc}
.a11y-mini-footer p{padding:2px 0;margin:0}
.a11y-mini-footer .container{text-align:center}

/* Divi resets outline on buttons and slider arrows -> restore a visible ring for keyboard users */
.et_pb_button:focus-visible,.et-pb-arrow-prev:focus-visible,.et-pb-arrow-next:focus-visible,.et-pb-controllers a:focus-visible{outline:3px solid #152851!important;outline-offset:2px;box-shadow:0 0 0 6px #fff!important}
/* links that only wrap a floated image have a 0x0 box, so their own ring is invisible: ring the image */
a:focus-visible>img,a:focus-visible>span>img{outline:3px solid #152851;outline-offset:2px}
/* mobile 4-icon bar: enlarged text (widget 150% / browser text size) must wrap inside its cell, not overlap the next one */
.mo_call a{overflow-wrap:anywhere;hyphens:auto}
/* ...and the bar grows with it instead of spilling over the hero (80px stays the minimum, so default look is unchanged) */
.mobile_cmenu{height:auto!important;min-height:80px}
.mobile_cmenu::after{content:"";display:table;clear:both}
.mobile_cmenu .mo_call{height:auto!important;min-height:80px}