/* Bee Happy Pediatric Dentistry — accessibility fixes (2026-10-09, SOP-A11Y-WIDGET-ROLLOUT 5/5a).
   Loaded last from BaseLayout so it wins over the baked theme CSS. Every rule is scoped to the element it fixes;
   colours are the nearest darker shade of the site's own colour that reaches 4.5:1. */

/* utilities */
.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}
.a11y-skip{position:absolute;left:12px;top:-200px;z-index:100000;background:#434841;color:#fff!important;padding:10px 16px;border-radius:6px;font:600 16px/1.2 "Cabin Variablefont Wdth Wght",sans-serif;text-decoration:none}
.a11y-skip:focus{top:12px;outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #434841}

/* footer credit — CLAUDE.md standard, wraps (no nowrap) */
.ft-credit{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}
.ft-credit svg{flex:none}

/* --- colour contrast --- */
/* top bar: white text/icons on tan #b09887 (2.73:1) -> #8a6f5b (4.66:1) */
.et_pb_section_0_tb_header{background-color:#8a6f5b!important}
/* desktop menu: #70786d on #f6f2ec (4.09:1) -> #676f65 (4.66:1); Pediatric Emergencies keeps its red */
#menu-header > li:not(.pediatric_emergencies) > a{color:#676f65!important}
/* mobile header "Same Day Care": #ff6600 on white (2.93:1) -> #c44f00 (4.70:1) */
.et_pb_text_1_tb_header span[style*="ff6600"]{color:#c44f00!important}
/* sage cards with light text (#70786d, 4.06:1 / 3.55:1 under the 8% white card) -> #5d645b (5.44:1 / 4.61:1) */
.card[data-theme="invert"],.card[data-theme="dark"]{background-color:#5d645b!important}
/* homepage "Why choose us" card headings: #646b61 on #e3e7e1 (4.39:1) -> #5d645b */
.item_card[data-theme="light"] .card_heading-text{color:#5d645b!important}
/* membership "Get started" secondary button: #70786d on #f5f1ea (4.05:1) -> #676f65 */
.card_pricing a[data-button-style="secondary"]{color:#676f65!important;border-color:#676f65!important}
/* CV page tan labels: #a58876 on white (3.28:1) -> #8c6e5c (4.67:1) */
.cv-date,.cv-h4{color:#8c6e5c!important}

/* --- links inside body text must not rely on colour alone --- */
#main-content :is(p,li,dd,td) > a:not([class]),
#main-content article header a:not([class]){text-decoration:underline!important;text-underline-offset:2px}

/* --- slider dots: 24px spacing between 16px targets (WCAG 2.5.8) --- */
.swiper-bullet-wrapper{gap:8px!important;flex-wrap:wrap}

/* --- demoted duplicate h1s: look pinned identical to the old h1 --- */
h2.a11y-was-h1-post{font-family:"Cabin Variablefont Wdth Wght",sans-serif!important;font-size:80px!important;line-height:80px!important;font-weight:400!important;margin:0!important;padding:0!important;color:#000!important;letter-spacing:normal!important;text-transform:none!important}
@media (max-width:991px){h2.a11y-was-h1-post{font-size:64px!important;line-height:64px!important}}
@media (max-width:767px){h2.a11y-was-h1-post{font-size:48px!important;line-height:48px!important}}
h2.a11y-was-h1-hero{font-family:beverly-drive-right,sans-serif!important;font-size:48px!important;line-height:64.8px!important;font-weight:400!important;margin:0!important;padding:0!important;color:#f5f1ea!important;letter-spacing:normal!important;text-transform:none!important}

/* --- second sweep --- */
/* top bar: Divi's rule is .et_pb_section_0_tb_header.et_pb_section — match its specificity */
html body .et_pb_section_0_tb_header.et_pb_section{background-color:#8a6f5b!important}
/* more body-text links (blog posts) */
#main-content .entry-content a:not([class]){text-decoration:underline!important;text-underline-offset:2px}
/* target size >= 24px (2.5.8): footer credit link, legal-page contents links */
.ft-credit a{display:inline-block;padding:3px 0;line-height:18px}
.lg-toc a{display:inline-block;padding:2px 0;min-height:24px}
/* contact page on phones: the hero band is hidden (mobile form-first), which also hid the page's only h1.
   Keep it out of sight but in the accessibility tree. */
@media (max-width:767px){
  section.section_header.mf-hero{display:block!important;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;border:0!important}
}

/* --- text over photos (axe "incomplete", measured): the #404040 overlay at 55% left white body text on light
   photo areas at ~3:1. 72% brings the brightest photo pixel behind white text to ~4.5:1. */
.section_header .image_overlay,.cta_container .image_overlay{opacity:.72!important}

/* --- keyboard focus (2.4.7): the theme removes outlines; two-tone ring reads on light and dark bands --- */
:is(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid #434841!important;outline-offset:2px!important;box-shadow:0 0 0 5px #fff!important}
/* focus not obscured (2.4.11): fixed "Schedule an Appointment" bar (45px, bottom) and the phone header (70px, top) */
html{scroll-padding-bottom:60px}
@media (max-width:980px){html{scroll-padding-top:80px}}

/* --- mobile menu (also on live): the open panel sat under the logo/"Same Day Care" row, was 90% see-through, and the
   X/"Menu" toggle covered the HOME item. Panel on top, opaque, items start below the toggle. --- */
@media (max-width:980px){
  .et_pb_column_5_tb_header{z-index:20!important}
  .tresio-nav__main.tresio-nav__list{z-index:100!important;background-color:#111!important;padding-top:108px!important;max-height:100vh;overflow-y:auto}
  .tresio-nav__hamburger{position:relative;z-index:101!important}
}

/* --- desktop dropdowns open for keyboard users too (2.1.1): hover-only before, sub-pages were unreachable by Tab --- */
#menu-header li.menu-item-has-children:focus-within > ul.sub-menu{visibility:visible!important;opacity:1!important}
#menu-header ul.sub-menu a{color:#676f65!important}

/* --- interaction states / non-text contrast --- */
/* membership "Get started" hover: #676f65 on #ccdfee (3.80:1) -> #5b6259 (4.60:1) */
.card_pricing a[data-button-style="secondary"]:hover{color:#5b6259!important;border-color:#5b6259!important}
/* slider dots: the current dot was filled #f5e8e1 on white (1.1:1, indistinguishable) -> filled sage #646b61 */
.swiper-bullet.is-active{background-color:#646b61!important}

/* --- reflow (1.4.10): the card slider on myofunctional-therapy / pediatric-emergencies pushed the page to 620px wide
   at 320-375px (also on live). Clip at the full-width section edge, so nothing visible inside the viewport changes. --- */
section:has(.slider-main_component){overflow-x:clip}

/* --- icon-font arrows were read out as part of the link name ("Services 3"): keep the glyph, give it empty alt --- */
#menu-header li.menu-item-has-children > a::after{content:"3" / ""}
.tresio-nav__link.level-1::after,.tresio-nav__dropdown::after{content:"L" / ""}