/*────────────────────────────────────────────────────────── ACCESSIBILITY & SHARED INTEGRATION Small, sitewide, non-visual-redesign additions needed once the Services system turns former static
s into real links and adds real sub-pages alongside the one-page homepage — plus a couple of tiny cross-cutting components (breadcrumbs) that appear on more than one page type and aren't worth a dedicated conditional stylesheet. Kept separate from style.css so the original landing page file stays untouched. ──────────────────────────────────────────────────────────*/ /* Skip link: invisible until keyboard-focused. */ .skip-link { position: absolute; top: -3rem; left: 1rem; z-index: 10002; background: var(--blue); color: var(--white); padding: .75rem 1.25rem; border-radius: 8px; font-size: .85rem; font-weight: 600; text-decoration: none; transition: top .25s var(--ease-expo); } .skip-link:focus { top: 1rem; } /* Visible keyboard focus ring (the custom cursor replaces hover cues for mouse users, but keyboard users still need a clear indicator). */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; border-radius: 4px; } /* Screen-reader-only text. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* .svc-row was originally a non-interactive
; it's now a real link to the service's page, so it needs the usual anchor reset. */ a.svc-row { text-decoration: none; color: inherit; } /* Returning visitor in this browser session: skip the preloader, no flash, no animation — see the synchronous check in header.php's and the matching skip in assets/js/core.js. */ html.returning-visitor .loader { display: none; } /* Breadcrumbs — shared by the services archive and single service pages. */ .breadcrumbs { padding: 0 0 1.5rem; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .78rem; color: var(--gray-500); } .breadcrumbs li { display: flex; align-items: center; gap: .5rem; } .breadcrumbs li:not(:last-child)::after { content: '/'; color: var(--gray-400); } .breadcrumbs a { color: var(--gray-500); text-decoration: none; transition: color .3s; } .breadcrumbs a:hover { color: var(--white); } .breadcrumbs li[aria-current="page"] { color: var(--gray-600); }