/*
=================================================================
The Eco Works — Accessibility CSS
File: accessibility.css
INSTALLATION:
1. Upload into your /css/ folder
2. Add to index.html as the LAST stylesheet link:
Adding it last ensures these rules take priority.
=================================================================
*/
/* ── Skip navigation link ────────────────────────────────────── */
/* Hidden visually but available to screen readers and keyboard */
/* users — becomes visible when focused via Tab key */
.skip-nav {
position: absolute;
top: -100px;
left: 0;
background: #0F6E56;
color: #ffffff;
padding: 12px 24px;
font-family: 'Century Gothic', sans-serif;
font-size: 14px;
font-weight: 700;
text-decoration: none;
border-radius: 0 0 8px 0;
z-index: 9999;
transition: top 0.2s ease;
}
.skip-nav:focus {
top: 0;
outline: 3px solid #5DCAA5;
outline-offset: 2px;
}
/* ── Focus rings — visible keyboard navigation ───────────────── */
/* Restores visible focus for keyboard-only users */
/* Bootstrap and the template suppress these by default */
*:focus-visible {
outline: 2px solid #1D9E75;
outline-offset: 3px;
border-radius: 2px;
}
/* Specific overrides for elements that need cleaner focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid #1D9E75;
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.15);
}
/* Nav links need a tighter focus ring to work within the header */
#templatemo_banner_menu a:focus-visible {
outline: 2px solid #5DCAA5;
outline-offset: 2px;
border-radius: 2px;
}
/* Service card CTAs */
.service-cta-link:focus-visible {
outline: 2px solid #1D9E75;
outline-offset: 3px;
border-radius: 3px;
}
/* Resource cards are links — need focus state */
.resource-card:focus-visible {
outline: 2px solid #1D9E75;
outline-offset: 3px;
border-radius: 16px;
}
/* ── Contact form label styling ──────────────────────────────── */
/* Styles the