/* ==========================================================================
   EasyRentalGuru - Accessibility Styles (WCAG 2.1 AA Compliance)
   ========================================================================== */

/* ==========================================================================
   Screen Reader Only Content (.sr-only)
   Visually hides content while keeping it available to screen readers
   ========================================================================== */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Show sr-only content when focused (for skip links) */
.sr-only:focus,
.visually-hidden:focus,
.sr-only-focusable:focus,
.skip-link:focus {
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    padding: 0.75rem 1.5rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    z-index: 99999 !important;
}

/* ==========================================================================
   Skip Links
   "Skip to main content" link for keyboard navigation
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary, #2563eb);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    z-index: 100000;
    transition: top 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.skip-link:hover {
    color: #ffffff;
    text-decoration: underline;
    background: var(--color-primary-hover, #1d4ed8);
}

/* ==========================================================================
   Focus Indicators (WCAG 2.1 AA - 3:1 contrast ratio minimum)
   ========================================================================== */

/* Base focus styles with high contrast */
:focus {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: 2px;
}

/* Focus visible for keyboard navigation only */
:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Remove outline for mouse users where focus-visible is supported */
:focus:not(:focus-visible) {
    outline: none;
}

/* Button focus styles */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

/* Link focus styles */
a:focus-visible,
.link:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Form input focus styles */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: 0;
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Checkbox and radio focus */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: 3px;
}

/* Custom focus ring for cards and containers */
.focus-ring:focus-visible,
.focusable:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: 4px;
}

/* Navigation menu item focus */
.nav-link:focus-visible,
.navbar-link:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: -3px;
}

/* ==========================================================================
   Color Contrast Fixes (WCAG 2.1 AA - 4.5:1 ratio for normal text, 3:1 for large)
   ========================================================================== */

/* Ensure minimum contrast ratios */
.text-muted {
    color: var(--color-text-tertiary, #64748b);
}

/* Dark mode contrast adjustments */
html.dark .text-muted,
[data-theme="dark"] .text-muted {
    color: var(--color-text-tertiary, #94a3b8);
}

/* Placeholder text contrast */
::placeholder {
    color: var(--color-text-muted, #6b7280);
    opacity: 1;
}

html.dark ::placeholder,
[data-theme="dark"] ::placeholder {
    color: var(--color-text-muted, #9ca3af);
}

/* Disabled state with sufficient contrast */
:disabled,
[disabled],
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error text with high contrast */
.text-error,
.error-message {
    color: #dc2626;
}

html.dark .text-error,
[data-theme="dark"] .text-error {
    color: #fca5a5;
}

/* Success text with high contrast */
.text-success,
.success-message {
    color: #15803d;
}

html.dark .text-success,
[data-theme="dark"] .text-success {
    color: #86efac;
}

/* Warning text with high contrast */
.text-warning,
.warning-message {
    color: #a16207;
}

html.dark .text-warning,
[data-theme="dark"] .text-warning {
    color: #fde047;
}

/* Info text with high contrast */
.text-info,
.info-message {
    color: #0369a1;
}

html.dark .text-info,
[data-theme="dark"] .text-info {
    color: #7dd3fc;
}

/* ==========================================================================
   High Contrast Mode Support
   @media (prefers-contrast: high)
   ========================================================================== */
@media (prefers-contrast: high) {
    /* Enhanced focus indicators */
    :focus,
    :focus-visible {
        outline: 4px solid currentColor !important;
        outline-offset: 2px !important;
    }

    /* Strong borders for interactive elements */
    button,
    .btn,
    input,
    select,
    textarea,
    a {
        border: 2px solid currentColor;
    }

    /* Ensure sufficient contrast for all text */
    * {
        color: CanvasText;
        background-color: Canvas;
    }

    /* Override any low-contrast colors */
    .text-muted,
    .text-secondary {
        color: CanvasText;
        opacity: 0.8;
    }

    /* Make disabled states clearly distinguishable */
    :disabled,
    [disabled] {
        opacity: 0.5;
        border-style: dashed;
    }

    /* Enhanced skip link visibility */
    .skip-link {
        border: 3px solid currentColor;
        text-decoration: underline;
    }

    /* Strong focus rings for form elements */
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline-width: 4px !important;
        border-width: 3px !important;
    }
}

/* Forced Colors Mode (Windows High Contrast) */
@media (forced-colors: active) {
    :focus,
    :focus-visible {
        outline: 3px solid ButtonText !important;
        outline-offset: 2px !important;
    }

    button,
    .btn {
        border: 2px solid ButtonText;
        forced-color-adjust: none;
    }

    /* Ensure links are distinguishable */
    a {
        text-decoration: underline;
        color: LinkText;
    }

    a:visited {
        color: VisitedText;
    }
}

/* ==========================================================================
   Reduced Motion Support
   @media (prefers-reduced-motion: reduce)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-fill-mode: forwards !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable parallax effects */
    .parallax,
    [data-parallax] {
        transform: none !important;
    }

    /* Disable smooth scrolling - instant jumps */
    html {
        scroll-behavior: auto !important;
    }

    /* Disable hover animations */
    .hover-lift:hover,
    .hover-scale:hover {
        transform: none !important;
    }

    /* Keep essential focus transitions for visibility */
    :focus-visible {
        transition: none !important;
    }

    /* Disable spinner animations */
    .spinner,
    .loading-spinner {
        animation: none !important;
    }

    /* Toast notifications appear instantly */
    .toast {
        animation: none !important;
    }

    /* Modal/dialog transitions */
    .modal,
    .dialog,
    [role="dialog"] {
        transition: none !important;
    }

    /* Page transition animations */
    .page-transition,
    .fade-in,
    .slide-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Skeleton loading - static representation */
    .skeleton,
    .skeleton-loader {
        animation: none !important;
        background-color: var(--color-bg-tertiary, #e5e7eb);
    }

    /* Reduce motion preference indicator for JS */
    body::before {
        content: 'reduce-motion';
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }
}

/* ==========================================================================
   ARIA Live Regions for Screen Reader Announcements
   ========================================================================== */
.aria-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Polite announcements - queued when screen reader is idle */
.aria-live-polite {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Assertive announcements - interrupt immediately */
.aria-live-assertive {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   Focus Trap for Modals/Dialogs
   ========================================================================== */
.focus-trap {
    /* Container for focus-trapped elements */
}

.focus-trap:focus {
    outline: none;
}

/* First and last focusable elements in trap */
.focus-trap-start,
.focus-trap-end {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   Modal/Dialog Accessibility
   ========================================================================== */
[role="dialog"],
[role="alertdialog"] {
    position: relative;
}

/* Ensure modal has proper z-index and overlay */
.modal-overlay,
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* Modal content container */
.modal-content,
.dialog-content {
    position: relative;
    background: var(--color-bg-surface, #ffffff);
    border-radius: 8px;
    z-index: 1001;
}

html.dark .modal-content,
[data-theme="dark"] .modal-content,
html.dark .dialog-content,
[data-theme="dark"] .dialog-content {
    background: var(--color-bg-surface, #1e293b);
}

/* Close button in modals */
.modal-close,
.dialog-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
}

.modal-close:focus-visible,
.dialog-close:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: 2px;
}

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

/* Required field indicator */
.required-field::after {
    content: ' *';
    color: #dc2626;
}

/* Error state for form inputs */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.form-control[aria-invalid="true"] {
    border-color: #dc2626;
    border-width: 2px;
}

input[aria-invalid="true"]:focus-visible,
select[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible {
    outline-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

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

/* Form field description/help text */
.field-description {
    color: var(--color-text-secondary, #475569);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Fieldset and legend styling */
fieldset {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

legend {
    font-weight: 600;
    padding: 0 0.5rem;
}

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

/* Ensure all interactive elements are keyboard accessible */
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: 2px;
}

/* Skip navigation within page sections */
.skip-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.skip-nav a {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary, #2563eb);
    color: white;
    padding: 8px 16px;
    z-index: 100;
}

.skip-nav a:focus {
    top: 0;
}

/* ==========================================================================
   Alert and Status Messages
   ========================================================================== */
.alert {
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid;
    margin-bottom: 1rem;
}

.alert[role="alert"] {
    /* Critical alerts that need immediate attention */
    font-weight: 500;
}

.alert-success {
    background-color: #f0fdf4;
    border-color: #15803d;
    color: #14532d;
}

html.dark .alert-success,
[data-theme="dark"] .alert-success {
    background-color: rgba(21, 128, 61, 0.1);
    border-color: #86efac;
    color: #86efac;
}

.alert-error {
    background-color: #fef2f2;
    border-color: #dc2626;
    color: #7f1d1d;
}

html.dark .alert-error,
[data-theme="dark"] .alert-error {
    background-color: rgba(220, 38, 38, 0.1);
    border-color: #fca5a5;
    color: #fca5a5;
}

.alert-warning {
    background-color: #fefce8;
    border-color: #ca8a04;
    color: #713f12;
}

html.dark .alert-warning,
[data-theme="dark"] .alert-warning {
    background-color: rgba(202, 138, 4, 0.1);
    border-color: #fde047;
    color: #fde047;
}

.alert-info {
    background-color: #f0f9ff;
    border-color: #0284c7;
    color: #0c4a6e;
}

html.dark .alert-info,
[data-theme="dark"] .alert-info {
    background-color: rgba(2, 132, 199, 0.1);
    border-color: #7dd3fc;
    color: #7dd3fc;
}

/* ==========================================================================
   Landmark Regions
   ========================================================================== */
header[role="banner"],
[role="banner"] {
    /* Main header/banner */
}

nav[role="navigation"],
[role="navigation"] {
    /* Navigation regions */
}

main[role="main"],
[role="main"] {
    /* Main content area */
}

aside[role="complementary"],
[role="complementary"] {
    /* Sidebar/complementary content */
}

footer[role="contentinfo"],
[role="contentinfo"] {
    /* Footer */
}

/* ==========================================================================
   Print Accessibility
   ========================================================================== */
@media print {
    /* Show skip links in print for debugging */
    .skip-link {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        background: none;
        color: #000;
        border: 1px solid #000;
        padding: 0.5rem;
        margin: 0.5rem 0;
    }

    /* Ensure links are visible in print */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.875rem;
        color: #666;
    }

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

    /* Ensure sufficient contrast in print */
    * {
        color: #000 !important;
        background: #fff !important;
    }
}