/* Accessibility fixes — jareddastrupdds.com (a11y rollout 2026-10-09).
   Loaded by src/layouts/BaseLayout.astro after each page's own Divi CSS.
   Source: _a11y/a11y-fixes.base.css (copied by _a11y/apply-a11y.py); the pinned-heading block at the end is generated by _a11y/headings.py. */

/* screen-reader-only text */
.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: first thing on every page, visible only when focused */
a.a11y-skip{position:absolute;left:12px;top:-200px;z-index:1000000;background:#fff;color:#45351C!important;border:2px solid #45351C;
  padding:12px 20px;border-radius:6px;font:700 16px/1.2 'Open Sans',Arial,sans-serif;text-decoration:none}
a.a11y-skip:focus{top:12px;outline:3px solid #fff!important;outline-offset:2px!important;box-shadow:0 0 0 5px #45351C}
#main-content:focus{outline:none}

/* visible keyboard focus everywhere: brand brown on light grounds, white on the dark header/footer/bars */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,.et_pb_toggle_title:focus-visible{outline:3px solid #45351C!important;outline-offset:2px!important}
header a:focus-visible,footer a:focus-visible,footer [tabindex]:focus-visible,.et_pb_bg_layout_dark a:focus-visible,
.tresio-nav a:focus-visible,.sticky-contact a:focus-visible{outline-color:#fff!important}

/* footer credit (CLAUDE.md standard: "Designed By" + monitor icon + MyPracticeOnline.com; wraps, never nowrap) */
.ft-credit{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:700;line-height:1.4;color:#fff}
.ft-credit svg{flex:none}
.ft-credit a{color:#fff!important}
.sticky-contact .ft-credit{line-height:1.4;vertical-align:middle}

/* contrast: link lists on the grey .sec_bullets bands (#0c71c3 on #e2e2e2/#eaeaea = 3.9-4.2:1) -> #0b64ad (4.7:1+) */
.ulRow li a{color:#0b64ad!important}

/* Divi gallery slider: arrows were opacity:0 until mouse hover and their text was hidden;
   show them to keyboard users and give them a name; dots get a 24px hit area (dot still looks 7px) */
.et_pb_slider:focus-within .et-pb-arrow-prev{left:22px;opacity:1}
.et_pb_slider:focus-within .et-pb-arrow-next{right:22px;opacity:1}
.et-pb-arrow-prev span,.et-pb-arrow-next span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;display:block!important;font-size:12px!important}
.et-pb-controllers a{width:24px!important;height:24px!important;border:8.5px solid transparent!important;background-clip:padding-box!important;
  box-sizing:border-box!important;border-radius:50%!important;margin-right:3px!important}
.et-pb-controllers a:last-child{margin-right:0!important}

/* footer credit visible at every width: >980px it lives in the sticky bottom bar, which the theme only shows
   after scrolling (inline display:block). While that bar is not shown, show the footer-row copy instead. */
@media (min-width:981px){
  body:not(:has(.sticky-contact[style*="display: block"])) #et-boc .et-l .et_pb_row_2_tb_footer.mobilerow_c,
  body:not(:has(.sticky-contact[style*="display: block"])) #et-boc .et-l .et_pb_row_2_tb_footer .et_pb_column_4_tb_footer{display:block!important}
  body:not(:has(.sticky-contact[style*="display: block"])) #et-boc .et-l .et_pb_text_1_tb_footer{text-align:center}
}

/* header/footer contact blurbs were mouse-only (Divi et_clickable divs); they now hold real links — keep their look */
a.a11y-blurb-link,html body #page-container #et-boc .et-l .et_pb_blurb_description a.a11y-blurb-link{color:inherit!important;text-decoration:none!important;font:inherit}
/* Divi toggle titles now contain a real button (keyboard + screen reader); it must look like the old title text */
button.a11y-toggle-btn{all:unset;display:block;width:100%;box-sizing:border-box;cursor:pointer;font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:inherit;line-height:inherit;text-align:inherit}
button.a11y-toggle-btn:focus-visible{outline:3px solid #45351C!important;outline-offset:2px!important}
footer button.a11y-toggle-btn:focus-visible{outline-color:#fff!important}

/* long unbroken strings (e.g. a pasted URL) wrap instead of pushing the page sideways at 320px */
#main-content{overflow-wrap:break-word}
/* pause control for the auto-rotating logo carousel (WCAG 2.2.2) */
button.a11y-carousel-pause{display:block;margin:8px auto 0;padding:6px 14px;min-height:32px;background:#fff;color:#45351C;
  border:1px solid #45351C;border-radius:4px;font:600 13px/1.2 'Open Sans',Arial,sans-serif;cursor:pointer}
button.a11y-carousel-pause:hover{background:#45351C;color:#fff}
/* Divi toggle +/- glyphs: same glyph, empty alternative text, so headings/buttons are not announced as "C Office Hours" */
html body .et_pb_toggle_close .et_pb_toggle_title:before{content:"\e050" / ""!important}
html body .et_pb_toggle_open .et_pb_toggle_title:before{content:"\e04f" / ""!important}
html body .et_pb_toggle_0_tb_footer.et_pb_toggle_close .et_pb_toggle_title:before{content:"C" / ""!important}
/* button hover: white on #6488dd was 3.4:1 -> closest darker shade of that blue, #4570d6 (4.6:1) */
html body.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_button_0_tb_footer:hover,
html body #page-container .et_pb_section .et_pb_button_0_tb_footer:hover,
html body.home #page-container .et_pb_section a.et_pb_button_0:hover{background-color:#4570d6!important}

/* focused elements are never hidden under the fixed header or the fixed bottom "Schedule an Appointment" bar (2.4.11) */
html{scroll-padding-top:100px;scroll-padding-bottom:70px}

/* ===== text over photos (pixel-measured; axe cannot judge text on images) — strengthen the backing, never change the photo ===== */
/* service-page hero: black heading/subtitle over the photo -> soft white halo behind the letters */
#main-content .et_pb_section_0 .et_pb_text_0 :is(h1,h2,h3,p){text-shadow:0 0 10px #fff,0 0 4px #fff,0 0 2px #fff}
/* emergency hero: the red word "Emergency" on the dark photo -> dark halo */
#main-content .et_pb_section_0 .et_pb_text_0 h1:has(span[style*="#ff0000"]),#main-content h1 span[style*="#ff0000"]{text-shadow:0 0 8px #000,0 0 3px #000,0 0 1px #000}
/* homepage service squares: dark text running over the photos -> white halo; buttons get a white fill */
.square-content :is(h3,p){text-shadow:0 0 8px #fff,0 0 4px #fff,0 0 2px #fff}
.square-content a.button{background-color:rgba(255,255,255,.92)!important;text-shadow:none}
/* homepage "Dental Solutions" tiles: white text on the darkened photo was 4.4:1 at worst -> dark halo */
.et_pb_text_5 :is(h3,h4),.et_pb_text_6 :is(h3,h4),.et_pb_text_7 :is(h3,h4){text-shadow:0 0 6px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.85)}
/* links inside blurb lists on tinted cards (#0c71c3 on light blue = 3.7:1) -> darker shade of the same blue */
.et_pb_blurb_description ul li a{color:#0a4f8a!important}

/* ===== pinned h1->h2 look (generated by _a11y/headings.py) ===== */
@media (min-width:981px){h2.a11y-h1p-home-1{font-size:73px!important;font-weight:300!important;line-height:73px!important;color:rgb(221, 183, 139)!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-home-1{font-size:73px!important;font-weight:300!important;line-height:73px!important;color:rgb(221, 183, 139)!important}}
@media (max-width:767px){h2.a11y-h1p-home-1{font-size:30px!important;font-weight:300!important;line-height:30px!important;color:rgb(221, 183, 139)!important}}
@media (min-width:981px){h2.a11y-h1p-patient-info-1{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-patient-info-1{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (max-width:767px){h2.a11y-h1p-patient-info-1{font-size:18px!important;line-height:27px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:981px){h2.a11y-h1p-patient-info-2{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-patient-info-2{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (max-width:767px){h2.a11y-h1p-patient-info-2{font-size:18px!important;line-height:27px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:981px){h2.a11y-h1p-patient-info-3{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-patient-info-3{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (max-width:767px){h2.a11y-h1p-patient-info-3{font-size:18px!important;line-height:27px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:981px){h2.a11y-h1p-patient-info-4{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-patient-info-4{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (max-width:767px){h2.a11y-h1p-patient-info-4{font-size:18px!important;line-height:27px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:981px){h2.a11y-h1p-patient-info-5{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-patient-info-5{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (max-width:767px){h2.a11y-h1p-patient-info-5{font-size:18px!important;line-height:27px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:981px){h2.a11y-h1p-patient-info-6{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-patient-info-6{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (max-width:767px){h2.a11y-h1p-patient-info-6{font-size:18px!important;line-height:27px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:981px){h2.a11y-h1p-patient-info-7{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-patient-info-7{font-size:24px!important;line-height:28.8px!important;color:rgb(12, 113, 195)!important}}
@media (max-width:767px){h2.a11y-h1p-patient-info-7{font-size:18px!important;line-height:27px!important;color:rgb(12, 113, 195)!important}}
@media (min-width:981px){h2.a11y-h1p-referral-pro-1{font-size:30px!important;line-height:30px!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-referral-pro-1{font-size:30px!important;line-height:30px!important}}
@media (max-width:767px){h2.a11y-h1p-referral-pro-1{font-size:30px!important;line-height:30px!important}}
@media (min-width:981px){h2.a11y-h1p-template-1-1{font-size:50px!important;font-weight:700!important;line-height:55px!important}}
@media (min-width:768px) and (max-width:980px){h2.a11y-h1p-template-1-1{font-size:50px!important;font-weight:700!important;line-height:55px!important}}
@media (max-width:767px){h2.a11y-h1p-template-1-1{font-size:24px!important;font-weight:700!important;line-height:26.4px!important;padding-bottom:3px!important}}