/* Accessibility Enhancement Styles */

/* Screen Reader Only Content */
.sr-only {
    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;
}

.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background-color: var(--noxfolio-primary-color) !important;
    color: #000 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    z-index: 9999 !important;
}

/* Enhanced Focus Management */
*:focus {
    outline: 2px solid var(--noxfolio-primary-color) !important;
    outline-offset: 2px !important;
}

/* Focus visible for modern browsers */
*:focus-visible {
    outline: 2px solid var(--noxfolio-primary-color) !important;
    outline-offset: 2px !important;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none !important;
}

/* Skip Link Styling */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--noxfolio-primary-color);
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 6px;
}

/* Enhanced Button Focus */
button:focus,
.btn:focus,
.cta-button:focus {
    outline: 2px solid var(--noxfolio-primary-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(201, 243, 29, 0.3) !important;
}

/* Navigation Focus Enhancement */
.nav-menu a:focus {
    background-color: rgba(201, 243, 29, 0.1);
    border-radius: 4px;
    padding: 4px 8px;
    margin: -4px -8px;
}

/* Form Element Focus */
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--noxfolio-primary-color) !important;
    outline-offset: 2px !important;
    border-color: var(--noxfolio-primary-color) !important;
    box-shadow: 0 0 0 3px rgba(201, 243, 29, 0.2) !important;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --noxfolio-primary-color: #ffff00;
        --noxfolio-body-color: #ffffff;
        --noxfolio-headline-color: #ffffff;
        --noxfolio-dark-color: #000000;
    }
    
    .btn-primary {
        background-color: #ffff00 !important;
        color: #000000 !important;
        border: 2px solid #ffffff !important;
    }
}

/* 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;
    }
    
    .animated {
        animation: none !important;
    }
    
    .scroll-content {
        animation: none !important;
    }
}

/* Mobile Menu Accessibility */
.mobile-menu-toggle[aria-expanded="true"] span:first-child {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:last-child {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Color Contrast Improvements */
.section-subtitle {
    color: var(--noxfolio-primary-color) !important;
    font-weight: 700 !important;
}

/* Aria Live Region Styling */
.aria-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Error States */
.form-error {
    color: #ff6b6b;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.form-field.error input,
.form-field.error textarea {
    border-color: #ff6b6b !important;
    background-color: rgba(255, 107, 107, 0.1) !important;
}

/* Success States */
.form-success {
    color: #51cf66;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.form-field.success input,
.form-field.success textarea {
    border-color: #51cf66 !important;
    background-color: rgba(81, 207, 102, 0.1) !important;
}

/* Enhanced Link Accessibility */
a:not(.btn):not(.cta-button) {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

a:hover:not(.btn):not(.cta-button) {
    text-decoration-thickness: 2px;
}

/* Table Accessibility (if tables are added) */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid var(--noxfolio-body-color);
    padding: 0.5rem;
    text-align: left;
}

th {
    background-color: var(--noxfolio-dark-light-color);
    font-weight: 600;
}

/* Print Accessibility */
@media print {
    .skip-link,
    .mobile-menu-toggle,
    .header-cta {
        display: none !important;
    }
    
    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    .sr-only {
        position: static !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        overflow: visible !important;
    }
}

/* Large Text Support */
@media (min-resolution: 120dpi) {
    body {
        font-size: 1.125rem;
        line-height: 1.6;
    }
    
    .btn, .cta-button {
        padding: 14px 28px;
        font-size: 1.1rem;
    }
}

/* Loading State Accessibility */
.loading {
    position: relative;
}

.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid var(--noxfolio-primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Voice Control Support */
[data-voice-command] {
    position: relative;
}

[data-voice-command]::before {
    content: attr(data-voice-command);
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 0.75rem;
    color: var(--noxfolio-primary-color);
    background: var(--noxfolio-dark-color);
    padding: 2px 6px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

[data-voice-command]:focus::before,
[data-voice-command]:hover::before {
    opacity: 1;
}