/**
 * TextAllure Accessibility Styles
 * WCAG 2.1 AA Compliance
 * Version: 1.0.5
 */

/* ========================================
   Focus Indicators
   ======================================== */
*:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

/* ========================================
   Skip Links
   ======================================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-md);
    background-color: var(--color-primary);
    color: var(--color-background);
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--spacing-md);
    outline: 2px solid var(--color-background);
    outline-offset: 2px;
}

/* ========================================
   Screen Reader Only Text
   ======================================== */
.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-width: 0;
}

.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ========================================
   Color Contrast
   ======================================== */
/* Ensure all text meets WCAG AA contrast ratio of 4.5:1 */

/* High contrast links */
a {
    color: var(--color-primary);
}

a:hover,
a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Readable text on colored backgrounds */
.button,
.pagination-list .is-current,
.search-submit {
    color: #FFFFFF;
}

/* Ensure meta text is readable */
.message-meta,
.post-meta,
.breadcrumb {
    color: #6B7280; /* Meets contrast requirement */
}

/* ========================================
   Touch Target Sizes
   ======================================== */
/* Ensure interactive elements are at least 44x44px (WCAG 2.5.5) */

button,
.button,
a.button,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
}

.nav-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.social-links a {
    min-width: 44px;
    min-height: 44px;
}

.pagination-list a,
.pagination-list span {
    min-width: 44px;
    min-height: 44px;
}

/* ========================================
   Keyboard Navigation
   ======================================== */
/* Visible focus for keyboard users */
:focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-primary);
}

/* Tab order should follow visual order */
.header-inner {
    display: flex;
}

/* Interactive elements must be keyboard accessible */
[tabindex="-1"]:focus {
    outline: none;
}

/* ========================================
   Form Accessibility
   ======================================== */
/* All inputs must have labels */
input:not([type="submit"]):not([type="button"]),
textarea,
select {
    min-height: 44px;
    border: 2px solid var(--color-border);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
}

/* Required field indicators */
.required::after {
    content: " *";
    color: var(--color-error);
}

/* Error messages */
.error-message,
.form-error {
    color: var(--color-error);
    font-weight: 600;
    role: alert;
}

/* Success messages */
.success-message {
    color: var(--color-success);
    font-weight: 600;
    role: status;
}

/* ========================================
   ARIA Live Regions
   ======================================== */
[aria-live="polite"],
[aria-live="assertive"],
[role="alert"],
[role="status"] {
    position: relative;
}

/* ========================================
   Image Accessibility
   ======================================== */
/* All images must have alt text */
img:not([alt]) {
    border: 3px dashed var(--color-error);
}

/* Decorative images */
img[alt=""],
img[role="presentation"] {
    border: none;
}

/* ========================================
   Motion Preferences
   ======================================== */
@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
   ======================================== */
@media (prefers-contrast: high) {
    :root {
        --color-border: #000000;
    }

    .message-card,
    .category-card,
    .related-card {
        border-width: 2px;
    }

    button,
    .button {
        border: 2px solid currentColor;
    }
}

/* ========================================
   Dark Mode Support
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #1F2937;
        --color-text: #F9FAFB;
        --color-text-light: #D1D5DB;
        --color-border: #374151;
    }

    .message-card,
    .category-card,
    .related-card {
        background-color: #374151;
    }

    .post-content blockquote {
        background-color: #374151;
    }

    .tag-list a {
        background-color: #4B5563;
        color: #F9FAFB;
    }

    .no-results {
        background-color: #374151;
    }
}

/* ========================================
   Text Spacing (WCAG 2.1.4.12)
   ======================================== */
/* Allow users to override text spacing */
* {
    line-height: var(--line-height-base) !important;
}

p {
    margin-bottom: var(--spacing-md);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

/* ========================================
   Language Support
   ======================================== */
/* Ensure proper text direction for RTL languages */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .breadcrumb,
[dir="rtl"] .message-meta,
[dir="rtl"] .post-meta {
    flex-direction: row-reverse;
}

/* ========================================
   Print Accessibility
   ======================================== */
@media print {
    /* Ensure links are visible when printed */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.875em;
        color: #666;
    }

    /* Don't show link URLs for internal navigation */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* Ensure proper page breaks */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    blockquote,
    pre,
    img {
        page-break-inside: avoid;
    }
}

/* ========================================
   Zoom and Text Resize
   ======================================== */
/* Ensure content is usable at 200% zoom */
@media (min-width: 1280px) {
    html {
        font-size: 100%;
    }
}

/* Responsive font sizes for better zoom */
@media (max-width: 640px) {
    html {
        font-size: 100%;
    }
}

/* ========================================
   Table Accessibility
   ======================================== */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: left;
    font-weight: 600;
}

th, td {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
}

/* Ensure table headers are announced */
caption {
    font-weight: 600;
    padding: var(--spacing-md);
    text-align: left;
}

/* ========================================
   List Accessibility
   ======================================== */
/* Ensure lists are properly announced */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Navigation lists */
nav ul {
    list-style: none;
}

/* ========================================
   Button States
   ======================================== */
button:disabled,
.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button[aria-pressed="true"] {
    background-color: var(--color-primary-dark);
}

button[aria-expanded="true"]::after {
    content: " (expanded)";
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   Modal and Dialog Accessibility
   ======================================== */
[role="dialog"],
[role="alertdialog"] {
    position: fixed;
    z-index: 9999;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
}

/* Trap focus within modal */
.modal-open {
    overflow: hidden;
}

/* ========================================
   Status Messages
   ======================================== */
.toast,
.notification {
    role: status;
    aria-live: polite;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
}

.toast.success,
.notification.success {
    background-color: var(--color-success);
    color: #FFFFFF;
}

.toast.error,
.notification.error {
    background-color: var(--color-error);
    color: #FFFFFF;
    role: alert;
    aria-live: assertive;
}