/**
 * Accessibility Enhancements
 * BMCA Theme - WCAG AA Compliance
 *
 * @package BMCA_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Focus Indicators - Visible and Consistent
   ========================================================================== */

/* Enhanced focus styles for all interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Focus visible for keyboard navigation only (removes focus for mouse clicks) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Card focus states */
.event-card:focus-within,
.article-card:focus-within,
.person-card:focus-within,
.value-card:focus-within {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

/* Navigation focus states */
.primary-menu a:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.menu-toggle:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
}

/* Button focus states */
.btn:focus,
.hero-button:focus,
.event-card-button:focus,
.article-card-link:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* Form element focus states */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(51, 128, 204, 0.1);
}

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

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-4) var(--spacing-6);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    z-index: 100000;
    border-radius: 0 0 var(--radius-md) 0;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-white);
    outline-offset: -3px;
}

/* ==========================================================================
   Screen Reader Text
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: var(--color-primary);
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    height: auto;
    left: var(--spacing-2);
    line-height: normal;
    padding: var(--spacing-4) var(--spacing-6);
    text-decoration: none;
    top: var(--spacing-2);
    width: auto;
    z-index: 100000;
}

/* Only display content to screen readers */
.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;
}

/* ==========================================================================
   Keyboard Navigation Enhancements
   ========================================================================== */

/* Ensure all interactive elements are keyboard accessible */
[role="button"],
[role="link"] {
    cursor: pointer;
}

[role="button"]:focus,
[role="link"]:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Ensure minimum touch target size (44x44px) for mobile */
@media (max-width: 767px) {

    a,
    button,
    input[type="submit"],
    input[type="button"],
    .btn,
    .hero-button,
    .event-card-button,
    .article-card-link,
    .menu-toggle {
        /* min-height: 44px; */
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Exception for inline text links */
    .entry-content a,
    .footer-menu a,
    p a {
        min-height: auto;
        min-width: auto;
        display: inline;
    }
}

/* ==========================================================================
   Color Contrast Enhancements
   ========================================================================== */

/* Ensure text meets WCAG AA contrast ratios */
/* Primary text on white background: #111827 on #ffffff = 16.1:1 (AAA) */
/* Secondary text on white background: #6b7280 on #ffffff = 5.74:1 (AA) */
/* Primary blue on white: #3380cc on #ffffff = 3.94:1 (AA Large) */

/* Enhance contrast for links */
a {
    color: var(--color-primary);
    text-decoration-skip-ink: auto;
}

a:hover {
    color: var(--color-primary-darker);
}

/* Exception: Buttons should never have underlines */
.btn,
.button,
.hero-button,
.card-button,
.event-card-button,
.about-cta-button {
    text-decoration: none !important;
}

.btn:hover,
.button:hover,
.hero-button:hover,
.card-button:hover,
.event-card-button:hover,
.about-cta-button:hover {
    text-decoration: none !important;
}

/* Ensure placeholder text has sufficient contrast */
::placeholder {
    color: var(--color-gray-500);
    opacity: 1;
}

/* Ensure disabled elements are clearly distinguishable */
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

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

/* Ensure labels are properly associated with inputs */
label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* Required field indicator */
.required,
.required-field-indicator {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
    margin-left: var(--spacing-1);
}

/* Error messages */
.error-message,
.form-error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2);
    display: block;
}

/* Success messages */
.success-message,
.form-success {
    color: var(--color-success);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2);
    display: block;
}

/* Form field with error */
input.error,
textarea.error,
select.error {
    border-color: var(--color-error);
}

input.error:focus,
textarea.error:focus,
select.error:focus {
    outline-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

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

[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}

/* Status messages */
.status-message {
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.status-message.info {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 4px solid var(--color-info);
    color: var(--color-text-primary);
}

.status-message.success {
    background-color: rgba(16, 185, 129, 0.1);
    border-left: 4px solid var(--color-success);
    color: var(--color-text-primary);
}

.status-message.warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-left: 4px solid var(--color-warning);
    color: var(--color-text-primary);
}

.status-message.error {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--color-error);
    color: var(--color-text-primary);
}

/* ==========================================================================
   Image Accessibility
   ========================================================================== */

/* Ensure decorative images are hidden from screen readers */
img[alt=""],
img[role="presentation"],
img[aria-hidden="true"] {
    /* These images should have empty alt or role="presentation" in HTML */
}

/* Ensure images have proper loading states */
img {
    background-color: var(--color-gray-100);
}

img[loading="lazy"] {
    /* Native lazy loading support */
}

/* ==========================================================================
   Table Accessibility
   ========================================================================== */

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: var(--spacing-6);
}

th {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-3);
    border: 1px solid var(--color-border-medium);
}

td {
    padding: var(--spacing-3);
    border: 1px solid var(--color-border-light);
}

caption {
    font-weight: var(--font-weight-semibold);
    text-align: left;
    padding: var(--spacing-3);
    caption-side: top;
}

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

    /* Disable transforms on hover */
    .event-card:hover,
    .article-card:hover,
    .person-card:hover,
    .value-card:hover,
    .btn:hover,
    .hero-button:hover {
        transform: none !important;
    }
}

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

@media (prefers-contrast: high) {

    /* Increase border visibility */
    .event-card,
    .article-card,
    .person-card,
    .value-card {
        border: 2px solid var(--color-border-dark);
    }

    /* Increase button contrast */
    .btn,
    .hero-button,
    .event-card-button {
        border: 2px solid currentColor;
    }

    /* Increase focus indicator visibility */
    *:focus {
        outline-width: 4px;
    }
}

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

@media print {

    /* Ensure links are visible in print */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }

    /* Don't print navigation */
    .site-header,
    .site-footer,
    .skip-link,
    .menu-toggle,
    .mobile-menu-overlay {
        display: none;
    }

    /* Ensure good contrast in print */
    body {
        color: #000;
        background: #fff;
    }

    div {
        padding: 1px;
    }

}

/* ==========================================================================
   Language and Direction Support
   ========================================================================== */

/* RTL language support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .primary-menu {
    flex-direction: row-reverse;
}

[dir="rtl"] .footer-content {
    direction: rtl;
}

/* ==========================================================================
   Semantic HTML Enhancements
   ========================================================================== */

/* Ensure semantic elements are properly styled */
main {
    display: block;
    min-height: 50vh;
}

article {
    display: block;
}

section {
    display: block;
}

nav {
    display: block;
}

header {
    display: block;
}

footer {
    display: block;
}

aside {
    display: block;
}

/* ==========================================================================
   Focus Management for Modals and Overlays
   ========================================================================== */

/* Trap focus within mobile menu when open */
body.mobile-menu-open .site-main,
body.mobile-menu-open .site-footer {
    visibility: hidden;
}

/* Ensure mobile menu is keyboard accessible */
@media (max-width: 767px) {
    .menu-wrapper.active {
        visibility: visible;
    }

    .menu-wrapper:not(.active) {
        visibility: hidden;
    }
}

/* ==========================================================================
   Accessible Animations
   ========================================================================== */

/* Ensure animations respect user preferences */
@media (prefers-reduced-motion: no-preference) {

    /* Smooth scroll for skip links */
    html {
        scroll-behavior: smooth;
    }

    /* Smooth transitions for interactive elements */
    a,
    button,
    .btn,
    .card {
        transition: all var(--transition-base);
    }
}