/*
 * Accessibility Styles (extracted from inline styles)
 * - Skip links visibility and focus
 * - Screen reader text helpers
 * - Keyboard focus outlines
 * - High contrast and reduced motion support
 */

/* Skip link hidden by default but visible on focus */
.skip-link.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
    position: absolute !important;
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
    background-color: #f1f1f1;
    color: #007cba;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    left: 5px;
    z-index: 100000;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

/* Screen reader text helper */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    position: absolute !important;
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
    background-color: #f1f1f1;
    color: #007cba;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    left: 5px;
    z-index: 100000;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

/* Focus styles for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-pink);
    outline-offset: 2px;
}

/* Extend focus-visible to all interactive header controls and menu links */
.site-header__toggle:focus-visible,
.header-v3-toggle:focus-visible,
.header-v4-toggle:focus-visible,
.site-header__menu a:focus-visible,
.header-v3-menu a:focus-visible,
.header-v4-menu a:focus-visible,
.site-header__mobile-menu a:focus-visible,
.search-button:focus-visible {
    outline: 2px solid var(--color-pink);
    outline-offset: 2px;
}

/* Ensure summary elements get focus-visible outlines */
summary:focus-visible {
    outline: 2px solid var(--color-pink);
    outline-offset: 2px;
}

/* Tiles, cards, and pagination focus-visible */
.tiles .tile a:focus-visible,
.tile__item a:focus-visible,
.tiles-module a:focus-visible,
.archive-navigation a:focus-visible,
.nav-links a:focus-visible,
.page-numbers:focus-visible {
    outline: 2px solid var(--color-pink);
    outline-offset: 2px;
}

/* Focus-visible styles for modern browsers */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-pink);
    outline-offset: 2px;
}

/* Focus-visible polyfill for older browsers */
.keyboard-navigation a:focus,
.keyboard-navigation button:focus,
.keyboard-navigation input:focus,
.keyboard-navigation select:focus,
.keyboard-navigation textarea:focus,
.keyboard-navigation .focus-visible {
    outline: 2px solid var(--color-pink);
    outline-offset: 2px;
}

/* Ensure polyfill works with all interactive elements */
.keyboard-navigation .site-header__toggle:focus,
.keyboard-navigation .site-header__menu a:focus,
.keyboard-navigation .site-header__mobile-menu a:focus,
.keyboard-navigation .search-button:focus,
.keyboard-navigation .tiles .tile a:focus,
.keyboard-navigation .tile__item a:focus,
.keyboard-navigation .archive-navigation a:focus,
.keyboard-navigation .nav-links a:focus,
.keyboard-navigation .page-numbers:focus {
    outline: 2px solid var(--color-pink);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid #000;
        outline-offset: 2px;
    }
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 4px solid #000;
        outline-offset: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}/* Reduced motion: disable smooth scroll and heavy transitions (extended) */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }
  .smooth-scroll { scroll-behavior: auto !important; }
  .site-header, .site-navigation, .site-header__overlay { transition: none !important; animation: none !important; }
}