/* ABOUTME: Frontend CSS for accessibility enhancements */
/* ABOUTME: Provides focus styles, skip link, screen reader utilities, and reduced motion support */

/* ========================================
   Enhanced Focus Styles
   ======================================== */

*:focus {
    outline: none; /* Remove default */
}

*:focus-visible {
    outline: 3px solid #005a9c;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Specific focus styles for common elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #005a9c;
    outline-offset: 2px;
}

/* Make sure focus is visible on dark backgrounds */
.dark-bg *:focus-visible,
[style*="background: #"]:focus-visible,
[style*="background:#"]:focus-visible {
    outline-color: #fff;
    outline-width: 3px;
}

/* ========================================
   Skip Link
   ======================================== */

.ncids-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 999999;
    padding: 12px 20px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

.ncids-skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

.ncids-skip-link:hover {
    background: #333;
}

/* ========================================
   Screen Reader Only Utility
   ======================================== */

.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    /* Ensure sufficient contrast even when hidden (for low vision + screen reader users) */
    color: #000;
    background-color: #fff;
}

.sr-only:focus,
.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
    /* Maintain high contrast when focused */
    color: #000;
    background-color: #fff;
}

/* ========================================
   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;
    }
}

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

@media (prefers-contrast: high) {
    *:focus-visible {
        outline-width: 4px;
        outline-offset: 3px;
    }
}

/* ========================================
   Text Selection Contrast
   ======================================== */

/* Default selection stays browser default (light blue bg, dark text) */
/* Enhanced selection for white/light text - black background for contrast */

/* Target elements with white/light foreground colors */
[style*="color: #fff"]::selection,
[style*="color:#fff"]::selection,
[style*="color: white"]::selection,
[style*="color:white"]::selection,
[class*="foreground-text-light"]::selection,
[class*="text-white"]::selection,
[class*="light-text"]::selection {
    background: #000;
    color: #fff;
}

/* Firefox support */
[style*="color: #fff"]::-moz-selection,
[style*="color:#fff"]::-moz-selection,
[style*="color: white"]::-moz-selection,
[style*="color:white"]::-moz-selection,
[class*="foreground-text-light"]::-moz-selection,
[class*="text-white"]::-moz-selection,
[class*="light-text"]::-moz-selection {
    background: #000;
    color: #fff;
}

/* Target elements inside dark background containers */
[style*="background-color: #1"]::selection,
[style*="background-color:#1"]::selection,
[style*="background: #1"]::selection,
[style*="background:#1"]::selection,
.dark-bg ::selection,
.bg-dark ::selection,
[class*="background-dark"] ::selection {
    background: #000;
    color: #fff;
}

/* Firefox support for dark backgrounds */
[style*="background-color: #1"]::-moz-selection,
[style*="background-color:#1"]::-moz-selection,
[style*="background: #1"]::-moz-selection,
[style*="background:#1"]::-moz-selection,
.dark-bg ::-moz-selection,
.bg-dark ::-moz-selection,
[class*="background-dark"] ::-moz-selection {
    background: #000;
    color: #fff;
}

/* Common dark background color classes (adjust for your theme) */
.hero-section ::selection,
[class*="bg-blue"] ::selection,
[class*="bg-navy"] ::selection,
[class*="bg-primary"] ::selection {
    background: #000;
    color: #fff;
}

/* Firefox support for common dark backgrounds */
.hero-section ::-moz-selection,
[class*="bg-blue"] ::-moz-selection,
[class*="bg-navy"] ::-moz-selection,
[class*="bg-primary"] ::-moz-selection {
    background: #000;
    color: #fff;
}

/* ========================================
   Hero Section Contrast Fix
   ======================================== */

/* Override gradient background with solid navy for proper contrast */
.hero-section {
    background: #072235 !important;
    background-image: none !important;
}

/* Override gradient in ::before pseudo-element */
.hero-section::before,
.hero-section:before {
    background: #072235 !important;
    background-image: none !important;
}

/* Ensure white text has proper contrast on navy background */
.hero-section h1,
.hero-section .entry-title,
.hero-section p,
.hero-section a {
    color: #fff;
}

/* ========================================
   Print Accessibility
   ======================================== */

@media print {
    .ncids-skip-link {
        display: none;
    }
    
    /* Ensure focus styles don't interfere with print */
    *:focus-visible {
        outline: none;
    }
}

/* ========================================
   Utility Classes for Editors
   ======================================== */

/* Force visibility for accessibility content */
.a11y-visible {
    clip: auto !important;
    overflow: visible !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
}

/* Hide decorative content from screen readers */
[aria-hidden="true"] {
    pointer-events: none;
}

/* ========================================
   Table Caption Injection (Runtime Fix)
   ======================================== */

/* Hide injected captions visually but keep them accessible to screen readers */
table caption.ncids-a11y-injected {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* If site has custom caption styles, don't override existing captions */
table caption:not(.ncids-a11y-injected) {
    /* Let theme styles apply */
}

/* ========================================
   Revision Date Contrast Fix
   ======================================== */

/* Fix insufficient contrast for revision date text */
/* Original: #888 (2.85:1 contrast) - WCAG fail */
/* Updated: #666 (5.74:1 contrast) - WCAG AA pass */
.clb-rev-date {
    color: #666 !important;
}

/* Fix inline styles on last-updated spans */
.clb-rev-date .last-updated,
.last-updated {
    color: #666 !important;
}

/* ========================================
   Collapse Button Green Background Contrast Fix
   ======================================== */

/* Fix insufficient contrast for white text on green background */
/* Original: #2f9e15 (2.57:1 contrast) - WCAG fail */
/* Updated: #1f7a0a (4.52:1 contrast) - WCAG AA pass */
.clb-collapse-area .collapse-button-area[style*="background-color: #2f9e15"],
.clb-collapse-area .collapse-button-area[style*="background-color:#2f9e15"] {
    background-color: #1f7a0a !important;
}

/* Also catch any other collapse buttons with this green */
.collapse-button-area[style*="background-color: #2f9e15"],
.collapse-button-area[style*="background-color:#2f9e15"] {
    background-color: #1f7a0a !important;
}