/**
* Accessibility Fixer — Around the Mountain Dental
* CSS-level WCAG fixes: focus visibility, sticky-header offset.
*/
/* -----------------------------------------------------------------------
1. Sticky header — ensure keyboard focus is never hidden beneath it.
The header height is ~90px; adjust the custom property in your theme
if the header height changes.
----------------------------------------------------------------------- */
html {
scroll-padding-top: var(--atm-header-height, 90px);
}
/* Dynamically set --atm-header-height via JS if needed (see below).
As a safe fallback the 90px above covers the site's fixed header. */
/* -----------------------------------------------------------------------
2. Visible focus outline
Replaces the browser default (often invisible) with a high-contrast ring.
----------------------------------------------------------------------- */
:focus-visible {
outline: 3px solid #4455b2;
outline-offset: 3px;
border-radius: 2px;
}
/* Remove outline only for mouse users (not keyboard) */
:focus:not(:focus-visible) {
outline: none;
}
/* -----------------------------------------------------------------------
3. Skip-to-content link (screen-reader + keyboard users)
Add Skip to main content
as the first child of (the PHP plugin injects #main-content).
----------------------------------------------------------------------- */
.atm-skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 100000;
padding: 0.75rem 1.25rem;
background: #4455b2;
color: #fff;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 4px 0;
transition: top 0.2s;
}
.atm-skip-link:focus {
top: 0;
outline: 3px solid #fff;
outline-offset: 2px;
}
/* -----------------------------------------------------------------------
4. Lightbox / modal focus trap visual aid
When a .hidde-modals panel is open (aria-hidden removed), give it a
visible focus ring context so keyboard users know they are inside.
----------------------------------------------------------------------- */
.hidde-modals:not([aria-hidden='true']) .dm-readmore-wrapper {
outline: 2px solid #4455b2;
outline-offset: -2px;
}
/* -----------------------------------------------------------------------
5. Ensure interactive elements look clickable and
have a pointer cursor (visual parity with real buttons).
----------------------------------------------------------------------- */
a[role='button'] {
cursor: pointer;
}