/* Accessibility Styles for Pawspect - ADA/WCAG 2.1 AA Compliance */

/* ===== SKIP LINKS ===== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1976d2;
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

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

/* ===== FOCUS INDICATORS - Enhanced for visibility ===== */
*:focus {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

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

*:focus-visible {
    outline: 3px solid #1976d2;
    outline-offset: 2px;
}

/* High contrast focus for dark mode */
@media (prefers-color-scheme: dark) {
    *:focus-visible {
        outline-color: #90caf9;
    }
    
    .skip-link {
        background: #90caf9;
        color: #000;
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: more) {
    /* Enhance text contrast */
    body {
        color: #000 !important;
        background-color: #fff !important;
    }

    /* Enhanced border visibility */
    .mud-paper,
    .mud-card,
    .mud-input,
    .mud-button,
    .mud-chip {
        border: 2px solid currentColor !important;
    }

    /* Enhanced focus states */
    *:focus-visible {
        outline: 3px solid #000 !important;
        outline-offset: 3px;
    }

    /* Ensure links are distinguishable */
    a, .mud-link {
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }

    /* Enhanced button visibility */
    .mud-button-filled {
        border: 2px solid #000 !important;
    }

    /* Form field borders */
    .mud-input-outlined .mud-input-control-input-container {
        border-width: 2px !important;
    }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
    .skip-link {
        background: Canvas;
        color: LinkText;
        border: 2px solid LinkText;
    }

    .mud-button {
        border: 2px solid ButtonText !important;
    }

    .mud-icon-button {
        border: 1px solid ButtonText;
        border-radius: 4px;
    }

    *:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px;
    }

    .mud-chip {
        border: 2px solid currentColor !important;
    }
}

/* ===== LARGE FONT SCALING SUPPORT ===== */
html {
    /* Allow text to scale with user preferences */
    font-size: 100%;
}

/* Ensure text scales appropriately */
body {
    font-size: 1rem;
    line-height: 1.5;
}

/* Support for large font preferences (up to 200% as per WCAG) */
@media (min-resolution: 1dppx) {
    /* Layout adjustments for larger text */
    .mud-container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Responsive typography - ensure text doesn't break layout */
.mud-typography {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Ensure cards and containers can accommodate larger text */
.mud-card,
.mud-paper {
    min-height: fit-content;
    overflow: visible;
}

/* Form fields should expand with text size */
.mud-input {
    min-height: 2.5em;
}

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

    .loading-progress circle {
        animation: none !important;
    }

    .mud-progress-circular {
        animation-duration: 0.01ms !important;
    }

    .skip-link {
        transition: none;
    }
}

/* ===== KEYBOARD NAVIGATION ENHANCEMENTS ===== */

/* Enhanced focus styles for interactive elements */
.mud-button:focus-visible,
.mud-icon-button:focus-visible,
.mud-fab:focus-visible {
    outline: 3px solid #1976d2;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.2);
}

.mud-nav-link:focus-visible {
    outline: 3px solid #1976d2;
    outline-offset: 2px;
    background-color: rgba(25, 118, 210, 0.1);
}

/* Ensure tab navigation is visible in forms */
.mud-input-control:focus-within {
    outline: 2px solid #1976d2;
    outline-offset: 1px;
    border-radius: 4px;
}

/* Card focus states for clickable cards */
.mud-card[tabindex]:focus-visible,
.cursor-pointer:focus-visible {
    outline: 3px solid #1976d2;
    outline-offset: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Dialog focus trap indicator */
.mud-dialog:focus-visible {
    outline: 3px solid #1976d2;
    outline-offset: 4px;
}

/* ===== SCREEN READER ONLY TEXT ===== */
.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;
}

/* Screen reader only, but focusable */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ===== TOUCH TARGET SIZES ===== */
/* Ensure minimum touch target size of 44x44px for mobility support */
.mud-icon-button,
.mud-button {
    min-width: 44px;
    min-height: 44px;
}

.mud-chip {
    min-height: 44px;
    padding: 0 12px;
}

/* Ensure adequate spacing between clickable elements */
.mud-nav-link {
    min-height: 48px;
    padding: 12px 16px;
}

/* ===== COLOR CONTRAST ADJUSTMENTS ===== */
/* Ensure secondary text meets 4.5:1 contrast ratio */
.mud-secondary-text,
.mud-typography-secondary {
    color: rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
    .mud-secondary-text,
    .mud-typography-secondary {
        color: rgba(255, 255, 255, 0.8);
    }
}

/* Error message visibility */
.validation-message,
.mud-input-error {
    font-weight: 500;
}

/* ===== FORM ACCESSIBILITY ===== */
/* Required field indicator */
.mud-input-required::after {
    content: " *";
    color: #d32f2f;
}

/* Error state visibility */
.mud-input-error .mud-input-control-input-container {
    border-width: 2px;
}

/* Helper text visibility */
.mud-input-helper-text {
    font-size: 0.875rem;
    line-height: 1.4;
}

/* ===== LINK ACCESSIBILITY ===== */
/* Ensure links are distinguishable from regular text */
a:not(.mud-button):not(.mud-nav-link):not(.skip-link) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:not(.mud-button):not(.mud-nav-link):not(.skip-link):hover {
    text-decoration-thickness: 2px;
}

/* ===== LIVE REGION STYLES ===== */
[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}

/* Status messages */
.mud-snackbar {
    font-weight: 500;
}

/* ===== DIALOG ACCESSIBILITY ===== */
.mud-dialog-content {
    max-height: 80vh;
    overflow-y: auto;
}

/* ===== PRINT ACCESSIBILITY ===== */
@media print {
    .skip-link,
    .mud-drawer,
    .mud-appbar {
        display: none !important;
    }

    body {
        color: #000 !important;
        background: #fff !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }
}