/**
 * Hi-Kataloog™ Accessibility Styles
 * 
 * @package Hi-Kataloog
 * @version 1.3.0
 */

/* ============================================================================
   SCREEN READER ONLY
   ============================================================================ */

.hk-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;
}

.hk-sr-only-focusable:focus,
.hk-sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}


/* ============================================================================
   SKIP LINKS
   ============================================================================ */

.hk-skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

.hk-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 12px 24px;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    transition: none;
}

.hk-skip-link:focus {
    left: 0;
    outline: 3px solid #667eea;
    outline-offset: 2px;
}


/* ============================================================================
   FOCUS INDICATORS
   ============================================================================ */

*:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Better focus for specific elements */
.hk-btn:focus,
.hk-tool-btn:focus,
button:focus,
a:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

.hk-catalog-card:focus-within {
    outline: 3px solid #667eea;
    outline-offset: 4px;
}

.hk-search-input:focus,
.hk-filter-select:focus {
    outline: 3px solid #667eea;
    outline-offset: 0;
    border-color: #667eea;
}

/* Remove default outline for mouse users */
.hk-btn:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure visible focus for keyboard users */
.hk-btn:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}


/* ============================================================================
   KEYBOARD HELP MODAL
   ============================================================================ */

.hk-shortcut-list {
    display: grid;
    gap: 16px;
    margin: 0;
}

.hk-shortcut-list dt {
    display: flex;
    gap: 8px;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
}

.hk-shortcut-list dd {
    margin: 0;
    color: #666;
    font-size: 14px;
    padding-left: 20px;
}

kbd {
    display: inline-block;
    padding: 4px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #111;
    background: #f5f5f5;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* ============================================================================
   HIGH CONTRAST FOCUS (Windows High Contrast Mode)
   ============================================================================ */

@media (prefers-contrast: high) {
    *:focus {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }
    
    .hk-skip-link:focus {
        outline: 3px solid currentColor;
    }
}


/* ============================================================================
   REDUCED MOTION ACCESSIBILITY
   ============================================================================ */

@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;
    }
    
    .hk-catalog-card:hover {
        transform: none;
    }
}


/* ============================================================================
   ARIA LIVE REGIONS
   ============================================================================ */

[aria-live="polite"],
[aria-live="assertive"] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ============================================================================
   DISABLED STATES
   ============================================================================ */

button:disabled,
.hk-btn:disabled,
[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

button:disabled:focus,
.hk-btn:disabled:focus {
    outline: none;
}


/* ============================================================================
   LOADING STATE INDICATORS
   ============================================================================ */

[aria-busy="true"] {
    position: relative;
    pointer-events: none;
}

[aria-busy="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================================
   FORM ERRORS (ARIA)
   ============================================================================ */

[aria-invalid="true"] {
    border-color: #ef4444 !important;
    outline-color: #ef4444 !important;
}

[aria-invalid="true"]:focus {
    outline: 3px solid #ef4444;
    outline-offset: 2px;
}

.hk-error-message {
    color: #ef4444;
    font-size: 14px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hk-error-message::before {
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 3.5L19.53 19H4.47L12 5.5zM11 10v4h2v-4h-2zm0 5v2h2v-2h-2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}


/* ============================================================================
   TOOLTIPS (Accessible)
   ============================================================================ */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 6px 12px;
    background: #111;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 9999;
}

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


/* ============================================================================
   EXPANDED/COLLAPSED STATES
   ============================================================================ */

[aria-expanded="false"] .hk-collapse-content {
    max-height: 0;
    overflow: hidden;
}

[aria-expanded="true"] .hk-collapse-content {
    max-height: none;
}


/* ============================================================================
   PROGRESS INDICATORS
   ============================================================================ */

[role="progressbar"] {
    position: relative;
    overflow: hidden;
}

[role="progressbar"]::after {
    content: attr(aria-valuenow) '%';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 600;
    color: #111;
}


/* ============================================================================
   COLOR BLINDNESS SUPPORT
   ============================================================================ */

/* Ensure status colors are not relied on alone */
.hk-status-success::before,
.hk-status-error::before,
.hk-status-warning::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.hk-status-success {
    color: #059669;
}

.hk-status-success::before {
    background: #059669;
}

.hk-status-error {
    color: #dc2626;
}

.hk-status-error::before {
    background: #dc2626;
}

.hk-status-warning {
    color: #d97706;
}

.hk-status-warning::before {
    background: #d97706;
}


/* ============================================================================
   TEXT SPACING (WCAG 1.4.12)
   ============================================================================ */

.hk-readable-text {
    line-height: 1.5;
    letter-spacing: 0.12em;
    word-spacing: 0.16em;
}

.hk-readable-text p {
    margin-bottom: 2em;
}


/* ============================================================================
   TARGET SIZE (WCAG 2.5.5)
   ============================================================================ */

@media (pointer: coarse) {
    button,
    a,
    .hk-btn,
    .hk-tool-btn,
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 44px;
        min-height: 44px;
    }
}


/* ============================================================================
   PRINT ACCESSIBILITY
   ============================================================================ */

@media print {
    /* Show URLs for links */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    /* Hide skip links in print */
    .hk-skip-links {
        display: none;
    }
    
    /* Ensure good contrast */
    * {
        color: #000 !important;
        background: #fff !important;
    }
}


/* ============================================================================
   DARK MODE ACCESSIBILITY
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    *:focus {
        outline-color: #a78bfa;
    }
    
    .hk-btn:focus,
    button:focus,
    a:focus {
        outline-color: #a78bfa;
    }
    
    kbd {
        background: #3a3a3a;
        border-color: #4a4a4a;
        color: #e5e5e5;
    }
}