/* Accessibility fixes for schrockdental.com — 2026-10-09 (SOP-A11Y-WIDGET-ROLLOUT Step 5/5a).
   Loaded after the page's own Divi CSS. Every rule is scoped to the element it fixes; colours are
   the closest darker shade of the site's own colour that reaches 4.5: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}

/* contrast: top contact bar (white 12px text on #7aa9bb = 2.55:1 -> #497b8e = 4.66:1) */
.et_secondary_nav_enabled #page-container #top-header,
.et_fixed_nav #page-container .et-fixed-header#top-header{background-color:#497b8e!important}
/* contrast: mobile Call / Appointment / Location / Menu bar (white on #777d8b = 4.12:1 -> #707583 = 4.6:1) */
@media only screen and (max-width:1000px){.container.clearfix.et_menu_container.customenu{background:#707583}}
/* contrast: Content Views excerpts (#8e8c9a on #f2f2f2 = 2.95:1 -> #6d6a79 = 4.7:1) */
body .pt-cv-content{color:#6d6a79}

/* links inside running text are distinguishable without colour (WCAG 1.4.1) */
#main-content .entry-content p a:not(.et_pb_button),
#main-content .entry-content li a:not(.et_pb_button),
#main-content .et_pb_text_inner p a:not(.et_pb_button),
#main-content .et_pb_text_inner li a:not(.et_pb_button),
.a11y-site-footer .et_pb_text_inner p a{text-decoration:underline;text-underline-offset:2px}

/* focus: the theme sets a:focus{color:#000!important}, which hides white links on the dark bars */
#top-header a:focus,#top-header a:focus span,.columnbottom a:focus,.mo_call a:focus{color:#fff!important}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #132968!important;outline-offset:2px}
#top-header a:focus-visible,.columnbottom a:focus-visible,.mo_call a:focus-visible,.et_pb_slider a:focus-visible,.et_pb_gallery a:focus-visible{outline-color:#fff!important;box-shadow:0 0 0 5px #132968}
#main-content{outline:none}

/* target size: slider dots get a 24px hit area, dot look unchanged */
.et-pb-controllers a{width:10px;height:10px;padding:7px;background-clip:content-box;box-sizing:content-box;margin-right:2px}
.et_pb_main_blurb_image > a{display:inline-block;min-width:24px;min-height:24px}

/* forms: visible labels (placeholders are not labels) */
.et_pb_contact_form .et_pb_contact_form_label{display:block!important;margin:0 0 4px;font-weight:600;color:#1b1b1b;font-size:15px}
.et_pb_contact_form .input{border:1px solid #6b6b6b!important}

/* slider pause control (added by a11y-fixes.js) */
.a11y-slider-pause{position:absolute;right:12px;bottom:12px;z-index:20;min-width:44px;min-height:44px;padding:8px 14px;border:2px solid #fff;border-radius:22px;background:rgba(19,41,104,.85);color:#fff;font:600 14px/1 'Open Sans',Arial,sans-serif;cursor:pointer}
.a11y-slider-pause:hover{background:#132968}

/* mobile menu toggle exposed as a real button (a11y-fixes.js) */
.mobile_nav[role="button"]{cursor:pointer}

/* header 981-1440px: the logo overlapped the first menu items (Home / Contact unreadable).
   Keep the logo at a fixed size and start the menu after it; the menu may wrap to two rows. */
@media only screen and (min-width:981px) and (max-width:1440px){
  .et_header_style_left #logo{max-height:60px!important;width:auto}
  .et_header_style_left #main-header #et-top-navigation{padding-left:256px!important}
}

/* legal pages: contents-rail links get a 24px target */
.lg-toc a{display:inline-block;min-height:24px;padding:2px 0}

/* contrast: current-page menu item (#2ea3f2 on #eaeaea = 2.29:1 -> #0b6bad = 4.69:1) */
#top-menu li.current-menu-item > a,#top-menu li.current-menu-ancestor > a,#top-menu li.current_page_item > a{color:#0b6bad!important}
/* contrast: footer contact links over the paper-texture image (#666 vs its darkest tone #d1d1d1 = 3.7:1 -> #4f4f4f) */
.a11y-site-footer .darkc a{color:#4f4f4f}

/* footer credit = CLAUDE.md standard (monitor SVG only): the old 55px device-group background icon
   sat under the 42px text inset and covered the "D" of "Designed By" */
.columnbottom .et_pb_blurb_4.et_pb_blurb{background-image:none!important;padding-left:0!important}
/* bottom bar: .removeafter kills the row clearfix, so below 981px the floated legal-links and
   copyright columns hung below the black bar as white text on the white page. Contain the floats. */
.columnbottom .et_pb_row.removeafter{display:flow-root}
/* the fixed accessibility launcher (bottom-left, 44px) covered the last footer links at the end of
   the page: leave room below them so every link can scroll clear of it */
.et_pb_section.columnbottom{padding-bottom:68px!important}
/* non-text contrast: inactive slider dots were 30% black at 50% opacity (~1.3:1 on the light photo)
   -> solid #767676 (3.9:1 on #e8e8e8); the active dot stays #333 */
.et-pb-controllers a{opacity:1!important}
.et-pb-controllers a:not(.et-pb-active-control){background-color:#767676!important}
/* hover/focus contrast: Divi fades links to 70% opacity on hover (top bar 3.2:1, current menu item 2.85:1).
   Keep full colour and show the state with an underline instead */
#top-header a:hover,#top-header a:focus,#top-menu-nav>ul>li>a:hover,#top-menu-nav>ul>li>a:focus{opacity:1!important;text-decoration:underline;text-underline-offset:3px}
#top-header #et-info a:hover *,#top-header #et-info a:focus *,#top-header #et-info span:hover{opacity:1!important}

/* Divi icon-font glyphs ("5" arrow on buttons, "3" dropdown caret) were read as part of link names
   ("Schedule an Appointment 5"). Same glyph, empty alternative text. */
.et_pb_button:after{content:"\35" / ""!important}
.et_pb_button[data-icon]:not([data-icon=""]):after{content:attr(data-icon) / ""!important}
#top-menu .menu-item-has-children>a:first-child:after,#et-secondary-nav .menu-item-has-children>a:first-child:after{content:"3" / ""!important}