/* Accessibility fixes — added 2026-10-08 with the accessibility widget rollout.
   Site-level only; scoped to the specific elements an accessibility scan flagged. */

/* visually hidden, still read by screen readers */
.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}

/* skip link: hidden until focused */
.a11y-skip{position:absolute;left:12px;top:-200px;z-index:1000000;padding:12px 18px;background:#252f39;color:#fff!important;font:600 16px/1.2 "Open Sans",Arial,sans-serif;border-radius:4px;text-decoration:underline}
.a11y-skip:focus{top:12px;outline:3px solid #fff;outline-offset:2px}
#main-content:focus{outline:none}

/* Divi contact forms hid their <label>s (display:none) and relied on placeholder text, which vanishes
   as soon as you type. Show a real label above every field (Leonard 2026-10-09). */
html body.et-db #et-boc .et-l .et_pb_contact_form_label,.et_pb_contact_form_label{display:block!important;position:static!important;width:auto!important;height:auto!important;margin:0 0 6px!important;padding:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important;border:0!important;font-family:"Open Sans",Arial,sans-serif;font-size:14px;font-weight:600;line-height:1.3;color:#252f39;text-align:left}

/* visible keyboard focus: white gap + blue ring, readable on the black header and on white */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible,.et_pb_toggle_title:focus-visible{outline:3px solid #0a64ad!important;outline-offset:2px!important;box-shadow:0 0 0 2px #fff!important}

/* contrast: brand link blue #0c71c3 is 3.89:1 on #e2e2e2 and 4.19:1 on #eaeaea.
   #0a64ad (same hue, darker) is 4.71:1 and 5.08:1. */
.cosmetic_row a,.sec_bullets a{color:#0a64ad!important}

/* text over photos (axe cannot measure these; judged from screenshots): on narrow screens the
   inner-page banner title and subtitle run across faces/hands in the photo. A soft white halo
   keeps the black text readable without changing the photo or the type. */
.sec_banner .et_pb_text_0 h1,.sec_banner .et_pb_text_0 h2{text-shadow:0 0 2px #fff,0 0 6px #fff,0 0 12px rgba(255,255,255,.9)}
/* homepage hero: the white welcome text crosses the white blouse in the photo on mobile */
.home .menuwidth .et_pb_text_inner h1,.home .menuwidth .et_pb_text_inner h2,.home .menuwidth .et_pb_text_inner p{text-shadow:0 0 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.75)}

/* keyboard-operable FAQ toggles (button injected by /a11y-fixes.js) — looks exactly like the title text */
.et_pb_toggle_title .a11y-toggle-btn{all:unset;display:block;width:100%;cursor:pointer;box-sizing:border-box}

/* form fields: the light-grey boxes (#eee on white, 1.15:1) had no edge. A #767676 border gives the
   field outline 3.9:1 against the box and 4.5:1 against the page (WCAG 1.4.11). */
.et_pb_contact_form .et_pb_contact_field .input{border:1px solid #767676!important}

/* FAQ toggle +/- icons are icon-font letters in ::before, which screen readers read as part of each
   question heading. Same glyphs, empty alternative text (browsers without the "/ alt" syntax keep Divi's rule). */
html body.et-db #et-boc .et-l .et_pb_toggle_title:before{content:"\E050" / ""}
html body.et-db #et-boc .et-l .et_pb_toggle_open .et_pb_toggle_title:before{content:"\E04F" / ""}

/* Tablet widths (768-980px): the desktop menu bar's contents are hidden by the theme, but a script
   still pins the empty 60px black bar mid-screen while scrolling, covering text and focused links.
   It has nothing visible inside it at these widths, so remove it there. (Same on the live WordPress site.) */
@media (max-width:980px){.et_pb_section_1_tb_header.menutop{display:none!important}}
/* keep focused links clear of the accessibility button in the bottom-left corner */
html{scroll-padding-bottom:72px}

/* footer credit — CLAUDE.md standard ("Designed By" + monitor icon + MyPracticeOnline.com), never nowrap.
   The old credit drew its monitor as a background image on the blurb; the SVG replaces it. */
html body.et-db #et-boc .et-l .et_pb_blurb_5_tb_footer.et_pb_blurb{background-image:none!important;padding-left:0!important}
.ft-credit{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}
.ft-credit svg{flex:none}

/* legal pages (MPO _templates/legal): contents links were 21.8px tall and tightly stacked on phones (WCAG 2.5.8) */
.lg-toc li a{display:inline-block;padding:3px 0;min-height:24px}
/* the label now sits above each field; hide the duplicate placeholder text (Divi's validation still reads it) */
html body.et-db #et-boc .et-l .et_pb_contact_form .input::placeholder,.et_pb_contact_form .input::placeholder{color:transparent!important;opacity:0!important}