/* granadahillsdermatology.com — accessibility fixes (a11y rollout 2026-10-09).
   Loaded last by src/layouts/BaseLayout.astro. Each rule is scoped to the element it fixes. */

/* Screen-reader-only text (sr-only h1, 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 */
.a11y-skip{position:absolute;left:8px;top:-60px;z-index:100000;padding:10px 16px;background:#00172c;color:#fff!important;font:600 16px/1.2 'Open Sans',Arial,sans-serif;text-decoration:none;border-radius:4px}
.a11y-skip:focus{top:8px;outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #00172c}

/* Visible keyboard focus ring (navy outline + white halo so it shows on light and dark bands) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{outline:3px solid #00172c!important;outline-offset:2px!important;box-shadow:0 0 0 5px #fff!important}

/* Divi slider arrows: "Previous"/"Next" text was display:none, so the links had no name */
.et-pb-arrow-prev span,.et-pb-arrow-next span{display:inline-block!important;position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}

/* Links inside body text must not rely on colour alone (link-in-text-block) */
#main-content p a:not(.et_pb_button),#main-content li a:not(.et_pb_button),#main-content td a{text-decoration:underline}

/* Contrast: sticky bottom bar (white text on #59a195 = 3.0:1) -> closest darker teal #478077 = 4.54:1 */
html:is(#a11y-hi,html) body:is(#a11y-hi,body) .et_pb_section_1_tb_footer.et_pb_section{background-color:#478077!important}
.et_pb_text_3_tb_footer .ft-credit,.et_pb_text_3_tb_footer .ft-credit a{color:#fff!important}

/* Contrast: mobile "Menu" label teal #59a195 on #f3f3f3 = 2.7:1 -> #42786f = 4.56:1 */
html:is(#a11y-hi,html) body .menu_text,html:is(#a11y-hi,html) body .tresio-nav.type-hamburger .tresio-nav__hamburger[aria-expanded="true"] .menu_text{color:#42786f!important}

/* Contrast: phone sticky header "Call / Appointment / Location" labels + their icons, teal #59a195 on #f3f3f3
   (2.7:1) -> #42786f (4.56:1). Same breakpoint as the site's own rule. */
@media only screen and (max-width:980px){html:is(#a11y-hi,html) body:is(#a11y-hi,body) .mbo_header .et_pb_blurb .et_pb_blurb_description a,html:is(#a11y-hi,html) body:is(#a11y-hi,body) .mbo_header .et-pb-icon{color:#42786f!important}}

/* Contrast: Make A Payment buttons (white on #59a195) -> #478077 */
html:is(#a11y-hi,html) body.page-id-33602 .et_pb_button_0,html:is(#a11y-hi,html) body.page-id-33602 .et_pb_button_1,html:is(#a11y-hi,html) body.page-id-33602 .et_pb_button_2,html:is(#a11y-hi,html) body.page-id-33602 .et_pb_button_3{background-color:#478077!important}

/* Hover contrast: footer Book Appointment / Blog buttons turn white-on-#6488dd (3.4:1) on hover -> #4872d7 (4.5:1) */
html:is(#a11y-hi,html) body .et_pb_button_0_tb_footer:hover,html:is(#a11y-hi,html) body .et_pb_button_1_tb_footer:hover{background-color:#4872d7!important}

/* Footer credit may wrap (CLAUDE.md, no nowrap) */
.ft-credit{flex-wrap:wrap;white-space:normal}

/* Reflow at phone width: these text modules are set to width:200% for the desktop two-column layout,
   (or a -145px right margin), which pushed them 100-320px off-screen once the columns stack. Desktop is unchanged. */
@media (max-width:980px){
  html:is(#a11y-hi,html) body.postid-5513 .et_pb_text_6,html:is(#a11y-hi,html) body.postid-31199 .et_pb_text_6,html:is(#a11y-hi,html) body.postid-5504 .et_pb_text_6,
  html:is(#a11y-hi,html) body.term-14 .et_pb_text_86,html:is(#a11y-hi,html) body.term-14 .et_pb_text_37{width:auto!important;margin-right:0!important;max-width:100%!important}
}

/* Reflow at 200% zoom (~683px): the Medical Dermatology tab lists are a fixed-height (330px) column-wrapping
   flex box that spills sideways between 768-980px; use the site's own phone layout (block, auto height) there. */
@media (max-width:980px){html:is(#a11y-hi,html) body ul.disflex{display:block!important;height:auto!important}}

/* Focus not obscured (2.4.11): keep focused items clear of the fixed header (140px, 100px <=980px)
   and the 45px fixed bottom bar */
html{scroll-padding-top:150px;scroll-padding-bottom:60px}
@media (max-width:980px){html{scroll-padding-top:110px}}

/* BEGIN generated by _a11y/icon-alt-css.js — icon-font glyphs keep their look but get empty alt text */
html:is(#a11y-hi,html) body:is(#a11y-hi,body) .et_pb_button[data-icon="$"]::after{content:"$" / ""!important}
html:is(#a11y-hi,html) body:is(#a11y-hi,body) .et_pb_toggle_0_tb_footer.et_pb_toggle_close .et_pb_toggle_title::before{content:"C" / ""!important}
html:is(#a11y-hi,html) body:is(#a11y-hi,body) .et_pb_toggle_0_tb_footer.et_pb_toggle_open .et_pb_toggle_title::before{content:"" / ""!important}
html:is(#a11y-hi,html) body:is(#a11y-hi,body) .et-pb-arrow-prev::before{content:"4" / ""!important}
html:is(#a11y-hi,html) body:is(#a11y-hi,body) .et-pb-arrow-next::before{content:"5" / ""!important}
html:is(#a11y-hi,html) body:is(#a11y-hi,body) .et_pb_button[data-icon="E"]::after{content:"E" / ""!important}
/* END generated */