/* Accessibility fixes — torontoortho.net, 2026-10-09 (a11y rollout, SOP Step 5/5a).
   Loaded after the page's own Divi CSS. Each rule is scoped to the element that failed. */

/* Skip link (visible on keyboard focus only) */
.a11y-skip{position:absolute;left:-9999px;top:0;z-index:100000;background:#423d72;color:#fff;padding:10px 16px;font:600 16px/1.2 'Open Sans',Arial,sans-serif;text-decoration:underline}
.a11y-skip:focus{position:fixed;z-index:2147483000;left:8px;top:8px;outline:3px solid #fff;outline-offset:2px}
.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}
main#main-content{display:block}
main#main-content:focus{outline:none}
footer.a11y-footer{display:block}

/* Footer credit (CLAUDE.md standard): the old blurb drew its monitor icon as a background image;
   the credit now carries the real monitor SVG, so the background icon and its indent go. Wraps (no nowrap). */
.columnbottom .et_pb_blurb:has(.ft-credit){background-image:none!important;padding-left:0!important}
.ft-credit{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px;white-space:normal}
.ft-credit svg{flex:none}
/* Footer legal row: same white divider between every link (theme only drew it after the first) */
.middelfooterbar a:not(:last-child){border-right:1px solid #fff}
.middelfooterbar p{line-height:1.9}

/* Contrast: page headings #0086af on white 4.17:1 / on #f4f4f4 toggles 3.79:1 -> #00779c (5.10 / 4.64) */
#left-area h1,#left-area h2,#left-area h3,#left-area h4,#left-area h5,#left-area h6{color:#00779c}
/* Contrast: sidebar contact links #248cc8 on #f6f6f6 = 3.43:1 -> #1e76a9 = 4.61:1 */
.contact_sidebar a,.et_pb_widget_area .et_pb_widget a{color:#1e76a9}
/* Contrast: current/ancestor menu item on the purple bar #2ea3f2 (3.56:1) / #3484cc (2.48:1) -> #62baf5 (4.60:1) */
#top-menu li.current-menu-item>a,#top-menu li.current_page_item>a,#top-menu li.current-menu-ancestor>a,#top-menu li.current-menu-parent>a,#top-menu>li>a.a11y-current{color:#62baf5!important}

/* Visible keyboard focus (site navy/purple) */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #423d72!important;outline-offset:2px}
#main-header .customenu a:focus-visible,#top-header a:focus-visible,.columnbottom a:focus-visible,.mobile_nav[role="button"]:focus-visible{outline-color:#fff!important}
/* Desktop dropdowns open for keyboard users too */
#top-menu li:focus-within>.sub-menu{visibility:visible!important;opacity:1!important;display:block}

/* Contrast: footer credit link #0c71c3 on the black bar = 4.16:1 -> #0d78cf = 4.60:1 */
.columnbottom .ft-credit a{color:#0d78cf}
/* Contrast: Divi fades nav links to 70% on hover; the light-blue current item then drops to 3.08:1 on purple.
   No fade, underline instead (hover state stays readable). */
#top-menu li>a:hover{opacity:1!important;text-decoration:underline}
/* Contrast (homepage): "SCHEDULE YOUR APPOINTMENT TODAY" white on #6f8fab = 3.39:1 -> band #577895 = 4.64:1 */
body.home #page-container .et_pb_section_4.et_pb_section{background-color:#577895!important}
/* Contrast (homepage): "Enhancing Smiles in Toronto" #6f8fab on #282828 = 4.34:1 -> #7594ae = 4.64:1 */
body.home .et_pb_text_12 h1,body.home .et_pb_text_12 h2{color:#7594ae!important}

/* Target size (2.5.8): footer legal links wrap onto several rows at 375px -> 24px+ tall hit areas */
.middelfooterbar a{display:inline-block;padding-top:3px;padding-bottom:3px}
/* Target size: legal/statement contents links get a 24px-tall hit area */
.lg-toc li a{display:inline-block;min-height:24px;padding:2px 0}

/* Contrast (axe "incomplete", measured from screenshots): text over images/gradients.
   Footer contact band links #0c71c3 on the grey radial gradient (#c8c8ca at the darkest) = 3.02:1 -> #095593 = 4.60:1 */
.a11y-footer .footeraddress a{color:#095593}
/* Homepage hero over the grey photo: subtitle #008c62 (23px on phones = normal text) 2.99:1 on #d8d8d8 -> #006a4a 4.66:1;
   title #0c71c3 2.82:1 on the darkest patch -> #0a60a6 3.62:1 (large text) */
body.home .et_pb_text_0 h2{color:#006a4a!important}
body.home .et_pb_text_0 h1{color:#0a60a6!important}
/* Homepage hexagon links: white text where it crosses the lighter lower half of the hexagon image (~3.0:1)
   -> stronger shadow behind the letters (same look, darker edge) */
body.home .recbackimg .et_pb_text_inner p{text-shadow:0 0 6px rgba(0,0,0,.6),2.72px 2.72px 2.72px rgba(0,0,0,.4)!important}

/* Hover contrast (homepage buttons): "Meet The Team" hover #00c3f4 + white = 2.08:1 -> #007f9f = 4.63:1;
   "Appointment" hover #6f8f9a + white = 3.46:1 -> #5c7983 = 4.65:1 */
body.home #page-container .et_pb_section .et_pb_button_1:hover{background-color:#007f9f!important}
body.home #page-container .et_pb_section .et_pb_button_3:hover{background-color:#5c7983!important}
/* Hover contrast (homepage "SCHEDULE YOUR APPOINTMENT TODAY" band): .fullwidth-cta:hover #6f8f9a + white = 3.46:1 -> #5c7983 = 4.65:1 */
body.home .fullwidth-cta:hover{background:#5c7983!important}

/* Divi icon-font glyphs are CSS content letters ("3", "5", "E"); screen readers read them
   ("Education Center 3", "Schedule A Consultation 5"). Same glyph, empty alternative text. */
#top-menu .menu-item-has-children>a:first-child::after,.et-menu .menu-item-has-children>a:first-child::after{content:"3" / ""}
#page-container .et_pb_button:not([data-icon])::after{content:"5" / ""!important}
#page-container .et_pb_button[data-icon]::after{content:attr(data-icon) / ""!important}

/* Focus not obscured (2.4.11): on phones the fixed accessibility launcher (bottom-left) sat over the wrapped
   legal links at the very end of the page. Room below the last footer row lets them scroll clear. */
@media (max-width:767px){#page-container .columnbottom.et_pb_section{padding-bottom:72px!important}}