/* === Skip to Main Content Link === */

.skip-link {

position: absolute;

top: -40px;

left: 0;

background: var(--primary-color);

color: white;

padding: 8px 16px;

text-decoration: none;

font-weight: 600;

z-index: 10000;

border-radius: 0 0 4px 0;

}

.skip-link:focus {

top: 0;

outline: 3px solid var(--accent-color);

outline-offset: 2px;

}

/* === Focus Indicators === */

a:focus,

button:focus,

input:focus,

textarea:focus,

select:focus {

outline: 3px solid var(--accent-color);

outline-offset: 2px;

}

/* Remove default outline and replace with custom */

*:focus {

outline: none;

}

*:focus-visible {

outline: 3px solid var(--accent-color);

outline-offset: 2px;

}

/* === High Contrast Support === */

@media (prefers-contrast: high) {

:root {

--primary-color: #000080;

--accent-color: #ff4500;

--text-dark: #000000;

--text-light: #333333;

}

.btn-primary,
.btn-secondary {
    border: 2px solid currentColor;
}

}

/* === Reduced Motion Support === */

@media (prefers-reduced-motion: reduce) {

*,

*::before,

*::after {

animation-duration: 0.01ms !important;

animation-iteration-count: 1 !important;

transition-duration: 0.01ms !important;

scroll-behavior: auto !important;

}

}

/* === Screen Reader Only Content === */

.sr-only {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect(0, 0, 0, 0);

white-space: nowrap;

border-width: 0;

}

.sr-only-focusable:focus {

position: static;

width: auto;

height: auto;

padding: inherit;

margin: inherit;

overflow: visible;

clip: auto;

white-space: normal;

}

/* === Minimum Touch Target Size (44x44px) === */

.btn-primary,

.btn-secondary,

button,

a.btn-primary,

a.btn-secondary {

min-height: 44px;

min-width: 44px;

}

.hamburger {

min-width: 44px;

min-height: 44px;

}

/* === Text Contrast Improvements === */

.hero-subtitle {

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

}

/* === Link Underlines for Clarity === */

.about-text a,

.bio-text a,

.faq-item a {

text-decoration: underline;

}

.about-text a:hover,

.bio-text a:hover,

.faq-item a:hover {

text-decoration-thickness: 2px;

}

/* === ARIA Live Regions === */

[aria-live="polite"] {

position: absolute;

left: -10000px;

width: 1px;

height: 1px;

overflow: hidden;

}

/* === Form Accessibility === */

input[type="text"],

input[type="email"],

input[type="tel"],

textarea,

select {

border: 2px solid var(--border-color);

padding: 0.75rem;

font-size: 1rem;

border-radius: 4px;

}

input[type="text"]:focus,

input[type="email"]:focus,

input[type="tel"]:focus,

textarea:focus,

select:focus {

border-color: var(--primary-color);

}

/* === Ensure Sufficient Color Contrast === /

/ All text meets WCAG AA contrast ratio of 4.5:1 minimum /

/ Primary color (navy blue) on white: 11.37:1 ✓ /

/ Accent color (orange) on white: 4.52:1 ✓ /

/ White on primary: 11.37:1 ✓ /

/ White on accent: 4.52:1 ✓ */

/* === Language Attribute === */

html[lang] {

scroll-behavior: smooth;

}

@media (prefers-reduced-motion: reduce) {

html[lang] {

scroll-behavior: auto;

}

}

/* === Keyboard Navigation Highlights === */

.nav-menu a:focus,

.footer a:focus {

background-color: rgba(249, 115, 22, 0.1);

border-radius: 4px;

}

/* === Dark Mode Support (Optional Enhancement) === /

@media (prefers-color-scheme: dark) {

/ Respect user's system preference if desired /

/ Currently maintaining light theme for brand consistency /

/ Uncomment below to enable dark mode */

/*
:root {
    --primary-color: #3b82f6;
    --accent-color: #fb923c;
    --text-dark: #f9fafb;
    --text-light: #d1d5db;
    --bg-light: #1f2937;
    --bg-white: #111827;
    --border-color: #374151;
}

body {
    background: var(--bg-white);
    color: var(--text-dark);
}
*/

}

/* === Ensure Images Have Alt Text === /

/ All <img> tags in HTML include descriptive alt attributes */

/* === Semantic HTML === /

/ Using proper heading hierarchy (h1 → h2 → h3) /

/ Using <main>, <nav>, <footer>, <section> landmarks /

/ Using <button> instead of <div> for interactive elements */

/* === Accessible Navigation === /

nav[role="navigation"] {

/ Navigation already uses semantic <nav> element */

}

/* === Focus Management for Modal/Overlay Content === /

.calendly-inline-widget {

/ Calendly widget is keyboard accessible by default */

}

/* === Print Styles for Accessibility === */

@media print {

.skip-link,

.hamburger,

.nav-menu {

display: none;

}

a[href]:after {
    content: " (" attr(href) ")";
}

a[href^="#"]:after,
a[href^="javascript:"]:after {
    content: "";
}

}