/* Accessibility fixes — aventurabrightsmiles.com, a11y widget rollout 2026-10-09.
   Source of truth: /opt/site-builder/_in-progress/aventurabrightsmiles.com/_a11y/a11y-fixes.css
   (apply-a11y.py copies it to public/). Each rule is scoped to the one component it fixes.
   The Divi rules these override live inline in each page body, AFTER this file, so overrides
   use an `html body` prefix for specificity rather than relying on source order. */

/* Screen-reader-only text (sr-only page titles, link context) */
.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 */
.abs-skip{position:absolute;left:-9999px;top:0;z-index:1000000;background:#fff;color:#1d2425;padding:10px 16px;font:600 16px/1.2 'Open Sans',Helvetica,Arial,sans-serif;border-radius:0 0 6px 0;text-decoration:underline}
.abs-skip:focus{left:0;outline:3px solid #2e818a;outline-offset:0}

/* Keyboard focus ring: teal outline + white inner ring, visible on dark, white and teal grounds */
html body a:focus-visible,html body button:focus-visible,html body [role="button"]:focus-visible,
html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible,
html body summary:focus-visible,html body [tabindex]:focus-visible{outline:3px solid #2e818a!important;outline-offset:2px!important;box-shadow:0 0 0 2px #fff!important}
.a11y-statement a:focus-visible{outline:3px solid #2e818a;outline-offset:3px;border-radius:2px}

/* Focus not obscured (WCAG 2.4.11): fixed header on top, fixed contact bar at the bottom */
html{scroll-padding-top:110px;scroll-padding-bottom:55px}

/* Header "Same Day Appointments Available" band: was an <h1> (one h1 per page), now a <p>.
   Look pinned to the old h1 (22px / 16px on phones, Open Sans 500, line-height 1em). */
html body #page-container #et-boc .et-l .et_pb_text_0_tb_header p.abs-sameday{font-family:'Open Sans',Helvetica,Arial,Lucida,sans-serif!important;font-size:22px!important;font-weight:500!important;line-height:1em!important;color:#fff!important;margin:0!important;padding:0!important;letter-spacing:normal;text-transform:none}
@media only screen and (max-width:767px){html body #page-container #et-boc .et-l .et_pb_text_0_tb_header p.abs-sameday{font-size:16px!important}}
/* Band contrast: white on #4ab7c3 was 2.37:1 -> closest darker shade of the same teal, 4.54:1 */
html body #page-container #et-boc .et-l .et_pb_section.et_pb_section_1_tb_header{background-color:#2e818a!important}

/* Fixed bottom contact bar: white on #59a195 was 3.02:1 -> same green darkened, 4.54:1 */
html body #page-container #et-boc .et-l .et_pb_section.et_pb_section_1_tb_footer{background-color:#478077!important}
html body #page-container #et-boc .et-l .et_pb_text_2_tb_footer .ft-credit,html body #page-container #et-boc .et-l .et_pb_text_2_tb_footer .ft-credit a{color:#fff!important;font-weight:600}
html body #page-container #et-boc .et-l .et_pb_text_2_tb_footer .ft-credit a{font-size:13px}

/* Second <h1> demoted to <h2> (privacy-policy "Terms & Conditions", teeth-whitening "July & August
   Specials!") — look pinned to the old h1: 30px, 500, line-height 1em, black, 10px bottom padding. */
html body #page-container h2.abs-h1look{font-family:'Open Sans',Helvetica,Arial,Lucida,sans-serif!important;font-size:30px!important;font-weight:500!important;line-height:1em!important;color:#000!important;padding:0 0 10px!important;margin:0!important;letter-spacing:normal!important;text-transform:none!important}

/* Service-page bullet sections (.sec_bullets, Divi rule sets every link #0c71c3) and the .ulRow link
   lists (theme link colour #0c71c3): on the grey jump-link rows that was 3.89-4.19:1 -> #0b67b2 (4.51:1 on #e2e2e2, 5.84:1 on white) */
html body #page-container #et-boc .et-l .et_pb_section.sec_bullets a{color:#0b67b2}
html body #page-container #et-boc .et-l ul.ulRow li a{color:#0b67b2}

/* Homepage "Read our reviews" button: white on #00aded was 2.56:1 -> #007fae (4.52:1). Hover keeps #0C71C3. */
html body.home #page-container #et-boc .et-l .et_pb_button_3:not(:hover){background-color:#007fae!important;border-color:#007fae!important}

/* Keyboard access to Divi "et_clickable" modules (header Book Now / location / phone, the Same Day band,
   footer address / phone): real links added inside them; they inherit the module's existing look. */
html body #page-container #et-boc .et-l a.abs-keylink{color:inherit!important;font-size:inherit!important;font-weight:inherit!important;text-decoration:none!important}
html body #page-container #et-boc .et-l .et_pb_blurb_4_tb_header{position:relative}
html body #page-container #et-boc .et-l a.abs-cover{position:absolute;inset:0;z-index:2}

/* Mobile/tablet header once scrolled (.mbo_header, Divi rule is <=980px only): white 13-15px text on #0798BC
   was 3.37:1 -> #06819f (4.52:1) */
@media only screen and (max-width:980px){html body #page-container #et-boc .et-l .mbo_header .et_pb_row.menu_row{background:#06819f}}

/* Pause/play button for the auto-rotating Divi sliders (added by a11y-fixes.js) */
.et_slider_auto .abs-slider-toggle{position:absolute;right:12px;top:12px;z-index:20;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:rgba(29,36,37,.78);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.et_slider_auto .abs-slider-toggle:hover{background:#1d2425}

/* Text over photos (judged by eye; axe could not compute):
   - Footer: white text over the city photo; the existing dark gradient fades to 46% at the bottom, where the
     photo is bright (golf course / white buildings). Same gradient, bottom stop raised to 65% so white text
     stays >= 4.5:1 even over a white pixel. Photo unchanged. */
html body #page-container #et-boc .et-l div.et_pb_section.et_pb_section_0_tb_footer:not(.perfmatters-lazy-css-bg),
html body #page-container #et-boc .et-l div.et_pb_section.et_pb_section_0_tb_footer.perfmatters-lazy-css-bg.entered{background-image:linear-gradient(180deg,#222222 0%,rgba(34,34,34,0.65) 100%),url(/wp-content/uploads/2025/06/aventura.webp)!important}
/* - Porcelain veneers pages: black text runs over the dark hair in the section photo -> light backing */
html body #page-container #et-boc .et-l .abs-backing{background-color:rgba(255,255,255,.86);box-shadow:0 0 0 14px rgba(255,255,255,.86)}

/* Footer "Book Appointment" button hover: white on #6488dd was 3.44:1 -> same blue darkened, #456fd6 (4.67:1) */
html body #page-container #et-boc .et-l .et_pb_section .et_pb_button_0_tb_footer:hover,html body #page-container #et-boc .et-l .et_pb_section .et_pb_button_0_tb_footer:focus-visible{background-color:#456fd6!important}

/* Keep the bottom-left accessibility button from covering the fixed contact bar's first label when text is
   enlarged (150%): reserve 56px on the left of the bar's first visible column. */
html body #page-container #et-boc .et-l .et_pb_section_1_tb_footer .et_pb_column_5_tb_footer{padding-left:56px}
@media only screen and (max-width:767px){html body #page-container #et-boc .et-l .et_pb_section_1_tb_footer .et_pb_column_6_tb_footer{padding-left:56px}}

/* When the accessibility tool enlarges text (html.a11y-text-1 / -2), let the fixed 45px contact bar grow
   instead of clipping its labels (WCAG 1.4.4). At normal size nothing changes. */
html.a11y-text-1 body #page-container #et-boc .et-l .et_pb_section.sticky-contact.make-sticky,
html.a11y-text-2 body #page-container #et-boc .et-l .et_pb_section.sticky-contact.make-sticky{height:auto!important;min-height:45px;line-height:1.3!important;padding:6px 0!important}
html.a11y-text-1 body #page-container #et-boc .et-l .et_pb_section.sticky-contact.make-sticky a.et_pb_button.scheduleButton,
html.a11y-text-2 body #page-container #et-boc .et-l .et_pb_section.sticky-contact.make-sticky a.et_pb_button.scheduleButton{line-height:1.3!important;white-space:normal!important}
html.a11y-text-1 body #page-container #et-boc .et-l .et_pb_section.et_pb_section_0_tb_header,html.a11y-text-2 body #page-container #et-boc .et-l .et_pb_section.et_pb_section_0_tb_header,
html.a11y-text-1 body #page-container #et-boc .et-l .et_pb_row.et_pb_row_0_tb_header,html.a11y-text-2 body #page-container #et-boc .et-l .et_pb_row.et_pb_row_0_tb_header{height:auto!important;min-height:70px}