/* ========================================
   Dakota County CDA - Accessibility Styles
   WCAG 2.1 AA Compliant
   ======================================== */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #0055a4;
        --color-text: #000000;
        --color-background: #ffffff;
        --color-border: #000000;
    }

    .btn-primary {
        border: 2px solid #000000;
    }

    a {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
}

/* High Contrast Mode Class Toggle */
body.high-contrast {
    --color-primary: #0055a4;
    --color-secondary: #006644;
    --color-text: #000000;
    --color-text-light: #222222;
    --color-background: #ffffff;
    --color-background-alt: #f0f0f0;
    --color-border: #000000;
}

body.high-contrast a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

body.high-contrast .btn {
    border: 2px solid currentColor;
}

body.high-contrast .program-card,
body.high-contrast .news-card,
body.high-contrast .quick-link-card {
    border: 2px solid var(--color-border);
}

body.high-contrast .dropdown-menu {
    border: 2px solid var(--color-border);
}

/* Font Size Adjustments */
body.font-size-large {
    font-size: 112.5%; /* 18px base */
}

body.font-size-larger {
    font-size: 125%; /* 20px base */
}

body.font-size-small {
    font-size: 87.5%; /* 14px base */
}

/* Focus Indicators - Enhanced for Keyboard Navigation */
*:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

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

*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 119, 182, 0.25);
}

/* High visibility focus for buttons */
.btn:focus-visible,
.nav-link:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.3);
}

/* Form element focus states */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Link visibility */
a:not(.btn):not(.nav-link):not(.logo) {
    text-underline-offset: 3px;
}

a:not(.btn):not(.nav-link):not(.logo):hover {
    text-decoration-thickness: 2px;
}

/* Ensure sufficient color contrast on images */
.news-image::after,
.hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
}

/* Screen reader only content */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Make sure decorative elements are properly hidden */
[aria-hidden="true"] {
    pointer-events: none;
}

/* Ensure minimum touch target size (44x44px) */
.btn,
button,
a.nav-link,
.dropdown-toggle,
.quick-action,
.chatbot-toggle,
.search-toggle,
.mobile-menu-toggle,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* Inline links can be smaller but should have adequate padding */
a:not(.btn):not(.nav-link):not(.card-link) {
    padding: 2px 0;
}

/* Ensure adequate spacing for touch targets */
.nav-list {
    gap: 4px;
}

.footer-nav li {
    margin-bottom: 8px;
}

/* Loading states - ensure visibility */
.loading {
    position: relative;
}

.loading::after {
    content: 'Loading...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-background);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Error states with ARIA */
[aria-invalid="true"] {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.error-message {
    color: var(--color-error);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.error-message::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--color-error);
    color: white;
    border-radius: var(--radius-full);
    font-weight: bold;
    font-size: var(--text-xs);
}

/* Success states */
[aria-describedby*="success"] {
    border-color: var(--color-success) !important;
}

.success-message {
    color: var(--color-success);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

/* Required field indicator */
.required-indicator {
    color: var(--color-error);
    margin-left: 2px;
}

/* Form labels */
label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-2);
}

/* Help text */
.help-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    outline: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Ensure table accessibility */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

th {
    background: var(--color-background-alt);
    font-weight: 600;
}

caption {
    text-align: left;
    font-weight: 600;
    padding: var(--space-3) 0;
}

/* Print styles for accessibility */
@media print {
    .skip-link,
    .a11y-toolbar,
    .chatbot-widget,
    .mobile-menu-toggle,
    .search-toggle {
        display: none !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }
}

/* Animations - respect reduced 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;
    }

    .skip-link {
        transition: none;
    }
}

/* Dark mode support (for users who prefer it) */
@media (prefers-color-scheme: dark) {
    /* Note: Implementing dark mode is optional but can be added here */
    /* For now, we maintain light mode for consistency with government sites */
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
    .btn {
        border: 2px solid currentColor;
    }

    a {
        text-decoration: underline;
    }

    *:focus {
        outline: 3px solid currentColor;
    }

    .program-card,
    .news-card,
    .quick-link-card,
    .chatbot-container {
        border: 2px solid currentColor;
    }
}

/* Ensure proper heading hierarchy is visible */
h1::before { content: ''; } /* Prevents empty heading warning in accessibility tools */

/* Live region styles for screen reader announcements */
[role="alert"],
[role="status"],
[aria-live] {
    position: relative;
}

.live-region-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Tooltip styles with accessibility */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-background-dark);
    color: white;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 100;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
}

/* Language selector improvements */
.language-selector select {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
}

/* External link indicator */
a[target="_blank"]::after {
    content: " (opens in new tab)";
    font-size: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Visible external link icon */
a[target="_blank"]:not(.quick-link-card)::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}