/* Accessibility fixes — smilesbysmolarek.com, 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.
   Source of truth: /opt/site-builder/_in-progress/smilesbysmolarek.com/_a11y/a11y-fixes.css (40-layout.py copies it to public/). */

/* Skip link (visible on keyboard focus only) */
.a11y-skip{position:absolute;left:-9999px;top:0;z-index:100001;background:#014365;color:#fff;padding:10px 16px;font:600 16px/1.2 "Open Sans",Arial,sans-serif;text-decoration:underline}
.a11y-skip:focus{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-site-footer{display:block}

/* Second h1s are now h2s: look pinned to the old h1 (30px/30px, 500, #333; homepage call line 26px/1.5em on phones) */
#page-container h2.a11y-h1look-tb,#page-container h2.a11y-h1look-et,#page-container h2.a11y-h1look-call{font-size:30px;line-height:30px;font-weight:500;color:#333;padding-bottom:10px}
@media only screen and (max-width:980px){body.home #page-container .et_pb_text_9 h2.a11y-h1look-call{line-height:1.4em}}
@media only screen and (max-width:767px){body.home #page-container .et_pb_text_9 h2.a11y-h1look-call{font-size:26px;line-height:1.5em}}

/* Contrast: footer contact band, white text on #89b7dc (2.08:1) -> site navy #014365 text (4.95:1); band colour unchanged
   (darkening the band instead would have pushed the existing dark headings below 3:1) */
#page-container .a11y-site-footer .et_pb_section:has(h4.et_pb_module_header) .et_pb_blurb_description,#page-container .a11y-site-footer .et_pb_section:has(h4.et_pb_module_header) .et_pb_blurb_description a{color:#014365!important}
/* Contrast: Divi link colour #2ea3f2 on white (2.75:1) -> #0c7bc6 (4.5:1) inside page content */
#main-content a:not(.et_pb_button):not(.button):not(.learnmore){color:#0c7bc6}
/* Links inside body text must not rely on colour alone (link-in-text-block) */
#main-content .et_pb_text_inner p a:not(.et_pb_button),#main-content .et_pb_text_inner li a:not(.et_pb_button),#main-content .entry-content p a,#main-content .entry-content li a,#main-content .pagination a{text-decoration:underline;text-underline-offset:2px}
/* Contrast: current menu item #2ea3f2 on the #3f7093 menu bar (1.9:1) -> white (5.32:1), underlined to stay distinct */
#top-menu li.current-menu-item>a,#top-menu li.current-menu-ancestor>a,#top-menu li.current-menu-parent>a{color:#fff!important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
/* Contrast: homepage "SCHEDULE YOUR APPOINTMENT TODAY" and "See for yourself" bands, white on #6f8fab (3.39:1) -> #587a97 (4.52:1) */
body.home #page-container .et_pb_section_2.et_pb_section,body.home #page-container .et_pb_section_4.et_pb_section{background-color:#587a97!important}
/* Contrast: homepage "Enhancing Smiles across Erie County" #6f8fab on #282828 (4.34:1) -> #7392ad (4.52:1) */
body.home #page-container .et_pb_text_3 h2{color:#7392ad!important}
/* Contrast: contact form submit button text #2ea3f2 on white (2.75:1) -> #0c7bc6 (4.5:1) */
#page-container .et_pb_contact_form_container .et_pb_contact_submit{color:#0c7bc6!important;border-color:#0c7bc6!important}

/* Forms (decision 5): visible labels, required marked in text, field borders with 3:1 contrast, readable placeholder */
.et_pb_contact_form .et_pb_contact_form_label{display:block!important;margin:0 0 6px;font-weight:600;font-size:15px;line-height:1.4;color:#333}
.et_pb_contact_form .a11y-req{font-weight:400;color:#595959}
.et_pb_contact_form .input,.et_pb_contact_form select.input,.et_pb_contact_form textarea.input{border:1px solid #767676!important}
.et_pb_contact_form .input::placeholder{color:#6c6c6c;opacity:1}
.et_pb_contact_form .input,.et_pb_contact_form select.input{color:#4f4f4f}
.et_pb_contact_form .et-pb-contact-message,.et_pb_contact_form_container .et-pb-contact-message{color:#a00000}

/* Visible keyboard focus (site navy); white on the dark top bar, menu bar, footer band and credits bar */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #014365!important;outline-offset:2px}
#top-header a:focus-visible,#top-menu a:focus-visible,[aria-label="Footer links"] a:focus-visible,body.home .et_pb_section_2 a:focus-visible,body.home .et_pb_section_4 a:focus-visible,#main-header .mo_call a: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}
/* Mobile menu toggle (hamburger) is keyboard-operable (see BaseLayout script) */
.mobile_menu_bar[role="button"]:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* 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}

/* Divi icon-font glyphs are CSS content letters; screen readers read them. Same glyph, empty alternative text. */
#top-menu .menu-item-has-children>a:first-child::after{content:"3" / ""}
#top-header #et-info-phone::before{content:"\e090" / ""}
.mobile_menu_bar::before{content:"a" / ""}
#page-container .et_pb_button:not(.et_pb_custom_button_icon)::after,#page-container .et_pb_button:not(.et_pb_custom_button_icon)::before{content:"\35" / ""}
#page-container .et_pb_custom_button_icon.et_pb_button::after,#page-container .et_pb_custom_button_icon.et_pb_button::before{content:attr(data-icon) / ""}

/* Floating buttons: the Simplifeye "Schedule Appointment" button sits bottom-left (site CSS flipped it there 2026-06-24),
   exactly where the accessibility launcher is (44px at 12px from the corner). Lift the scheduler button above the launcher. */
iframe[id^="self-scheduling-widget-button-iframe-"]{bottom:62px!important}
/* Target size (2.5.8): Dental Services archive card titles were 20px tall on phones -> 24px hit area */
.service_title h3 a{display:inline-block;padding:2px 0}
/* Contrast: homepage service cards "Learn More" #2ea3f2 on white (2.75:1) -> #0c7bc6 (4.5:1); axe could not compute it (card background image) */
#page-container .mycustomposts a.learnmore{color:#0c7bc6}
/* Contrast: header address #666 over the hero photo sky (3.9-4.1:1) -> #4f4f4f */
#main-header #et-top-navigationn>p{color:#4f4f4f}
/* Contrast: homepage "Learn more about CEREC" button #2ea3f2 (1.4-2.6:1 over its background) -> #0c7bc6 */
body.home #page-container .et_pb_section .et_pb_button_1{color:#0c7bc6!important}
/* Contrast: homepage treatment squares (Sleep Apnea / Cosmetic / Invisalign / Implants) had #666 text straight on the
   photos (faces, hair, foliage). Give the existing text block a light backing panel; on hover the existing blue overlay
   turns the text white, so the panel turns navy with it. */
body.home .squares .square-content{background:rgba(255,255,255,.9);padding:14px 18px 18px;border-radius:4px;display:flow-root}
body.home .squares .square .square-content,body.home .squares .square .square-content h3,body.home .squares .square .square-content p{color:#333}
body.home .squares .square:hover .square-content{background:rgba(1,67,101,.9)}
body.home .squares .square:hover .square-content,body.home .squares .square:hover .square-content h3,body.home .squares .square:hover .square-content p{color:#fff}
/* Non-text contrast: mobile hamburger icon #2ea3f2 on the #3f7093 menu bar (1.93:1) -> white (5.32:1), like its "Menu" label */
#main-header .mobile_menu_bar::before{color:#fff}
/* Focus ring inside the black mobile menu: navy ring on black was invisible -> white */
#main-header .et_mobile_menu a:focus-visible{outline-color:#fff!important;outline-offset:-3px}
/* Homepage "SCHEDULE YOUR APPOINTMENT TODAY" band: the whole band is a transparent (opacity 0) Divi button,
   so its own focus ring cannot be seen. Draw the ring on the band while the button has keyboard focus. */
body.home #page-container .et_pb_section_2:has(.et_pb_button:focus-visible){outline:3px solid #fff;outline-offset:-6px}
/* Forms: a field the visitor left empty/invalid after trying to submit gets a dark-red border (not colour alone:
   the browser also shows and announces its validation message) */
.et_pb_contact_form .input:user-invalid{border:2px solid #a00000!important}