/**
 * Capital Chronicle Accessibility Styles
 * 
 * These styles enhance the accessibility of the theme
 * to meet WCAG 2.1 Level AA standards.
 */

/* ============================
    Utility Classes
============================ */

/* Visually hidden elements (available to screen readers) */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Make focus styles more prominent for keyboard users */
:focus {
    outline: 3px solid #0077D8 !important; /* Primary accent blue */
    outline-offset: 2px !important;
    box-shadow: none !important; /* Remove shadow to match specifications */
}

/* High contrast focus indicator for dark backgrounds */
.dark-bg :focus,
[class*="--dark"] :focus,
.site-header :focus,
footer :focus {
    outline-color: #ffffff !important;
}

/* Match focus-visible to the standard focus style */
:focus-visible {
    outline: 3px solid #0077D8 !important;
    outline-offset: 2px !important;
}

/* Global focus indicator for all interactive elements */
*:focus-visible {
    outline: 3px solid #0077D8;
    outline-offset: 2px;
}

/* ============================
    Interactive Elements
============================ */

/* Buttons should never lose focus styles */
button:focus:not(:focus-visible) {
    outline: 3px solid #0077D8 !important;
    outline-offset: 2px !important;
}

/* Ensure all interactive elements have enough contrast */
a, 
button, 
input, 
select, 
textarea {
    color: inherit;
}

/* Improve hover states to be perceivable by all users */
a:hover,
button:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Ensure all interactive elements can receive focus */
a,
button,
input,
select,
textarea,
[role="button"],
[tabindex="0"] {
    cursor: pointer;
}

/* ============================
    Form Elements
============================ */

/* Group related form elements */
.form-group {
    margin-bottom: 1rem;
}

/* Ensure proper spacing between form elements */
label {
    display: block;
    margin-bottom: 0.5rem;
}

/* Improve form field accessibility */
input, 
select, 
textarea {
    padding: 0.5rem;
    width: 100%;
    border: 1px solid #9ca3af; /* WCAG 2.1 AA compliant border color (4.1:1 contrast) */
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
}

/* Error state for form fields */
.field-error {
    border-color: #dc2626 !important;
    border-width: 2px !important;
}

/* Error message styling */
.error-message {
    color: #dc2626;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* ============================
    Skip Links
============================ */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0077D8; /* Updated to match focus color */
    color: white;
    padding: 8px;
    z-index: 1001;
    transition: top 0.2s ease-in-out;
}

.skip-link:focus {
    top: 0;
}

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

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .market-ticker-container ul {
        animation: none !important;
    }
    
    .swiper-container {
        --swiper-animation-duration: 0.01ms;
    }
}

/* ============================
    Color Contrast Helpers
============================ */

.high-contrast-text {
    color: #111827;
}

.high-contrast-text-on-dark {
    color: #f9fafb;
}

/* Ensure link colors always have 4.5:1 contrast ratio */
a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

[aria-live="polite"],
[aria-live="assertive"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================
    Component-Specific Enhancements
============================ */

/* Card cluster accessibility enhancements */
.card-cluster article {
    height: 100%;
}

.card-cluster .text-category-tag {
    text-decoration: none;
}

/* Video carousel accessibility */
.video-carousel-section .video-card {
    height: 100%;
}

/* For keyboard navigation in scroll carousels */
.scroll-carousel:focus {
    outline: 3px solid #0077D8;
    outline-offset: 2px;
}

/* Carousel navigation buttons should be focusable */
.swiper-button-next,
.swiper-button-prev,
.scroll-indicator--left,
.scroll-indicator--right {
    display: flex !important; /* Ensure visibility */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Fix for ARIA hidden elements that should not be focusable */
[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
}