/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
/* CSS to support accessibility improvements and fix Lighthouse issues */

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

/* Fieldset styling for radio button groups */
.config-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.config-fieldset .config-label {
    /* Legend styling already handled by existing .config-label */
}

/* Focus indicators for better keyboard navigation */
*:focus {
    outline: 2px solid var(--focus-color, var(--preview-primary, var(--primary-color)));
    outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-color);
    color: #fff !important;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10000;
    font-weight: 600;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 10px;
    outline: 2px solid #fff;
    color: #fff !important;
}

/* Force skip-link color - override any other link styles */
a.skip-link,
a.skip-link:visited,
a.skip-link:hover,
a.skip-link:active,
a.skip-link:focus {
    color: #fff !important;
}

/* Keyboard navigation indicator */
.keyboard-navigation *:focus {
    outline: 2px solid var(--focus-color, var(--preview-primary, var(--primary-color)));
    outline-offset: 2px;
}

/* Better button focus states */
button:focus-visible,
.btn:focus-visible,
.toggle-track:focus-visible {
    outline: 2px solid var(--focus-color, var(--preview-primary, var(--primary-color)));
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring-color, var(--preview-primary-alpha, var(--primary-color-alpha)));
}

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

/* Toggle switches - better ARIA support */
[role="switch"][aria-pressed="true"] .toggle-thumb {
    transform: translateX(20px);
}

[role="switch"][aria-pressed="false"] .toggle-thumb {
    transform: translateX(0);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000;
        --text-color: #000;
        --bg-color: #fff;
        --button-hover: #000;
    }
    
    button, .btn {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Better color contrast for text */
.minimal-hex-value,
.minimal-accessibility-full,
.minimal-score-circle,
.minimal-tests {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
}

/* Dark theme adjustments */
.dark-theme .minimal-hex-value,
.dark-theme .minimal-accessibility-full,
.dark-theme .minimal-score-circle,
.dark-theme .minimal-tests {
    background-color: rgba(255, 255, 255, 0.95);
    color: #000000;
}

/* Ensure proper contrast for all text elements - use CSS variables */
.app-subtitle,
.config-label,
.toggle-label,
.sticky-control-label {
    color: var(--label-color);
    font-weight: 600;
}

.dark-theme .app-subtitle,
.dark-theme .config-label,
.dark-theme .toggle-label,
.dark-theme .sticky-control-label {
    color: var(--label-color);
}

/* Better contrast for muted text - use CSS variables */
.preview-muted,
.footer-text {
    color: var(--preview-muted, var(--subtitle-color));
    font-weight: 400;
}

.dark-theme .preview-muted,
.dark-theme .footer-text {
    color: var(--preview-muted, var(--subtitle-color));
}

/* Enhanced contrast for links - allow preview links to use their own colors */
a:not(.btn):not(.button):not(.buy-coffee-btn):not(.floating-coffee-btn):not(.skip-link):not(.preview-link):not(.nav-link) {
    color: var(--primary-color);
    font-weight: 600;
}

.dark-theme a:not(.btn):not(.button):not(.buy-coffee-btn):not(.floating-coffee-btn):not(.skip-link):not(.preview-link):not(.nav-link) {
    color: var(--primary-color);
}

/* Specific fix for learn-more-link */
.learn-more-link {
    color: var(--primary-color);
    font-weight: 600;
}

.dark-theme .learn-more-link {
    color: var(--primary-color) !important;
}

/* Remove button contrast overrides - let preview system handle colors */
/* These overrides were preventing preview buttons from using generated colors */

/* High contrast error messages - use CSS variables */
.error-message {
    color: var(--error-color);
    background-color: var(--error-bg);
    border: 1px solid var(--error-color);
    padding: 8px 12px;
    border-radius: 4px;
}

.dark-theme .error-message {
    color: var(--error-color);
    background-color: var(--error-bg);
    border-color: var(--error-color);
}

/* Ensure proper heading hierarchy with explicit font sizes */
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

/* Live region for announcements */
#live-announcements {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Loading states for screen readers */
[aria-busy="true"]::after {
    content: " (Loading...)";
    color: var(--muted-color);
    font-style: italic;
}

/* Form validation styles - use CSS variables */
.form-field.error input,
.form-field.error select,
.form-field.error textarea {
    border-color: var(--error-color);
    background-color: var(--error-bg);
}

.form-field.error .field-error {
    color: var(--error-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Better link styling - exclude preview and nav links */
a:not(.btn):not(.button):not(.buy-coffee-btn):not(.floating-coffee-btn):not(.skip-link):not(.preview-link):not(.nav-link) {
    color: var(--primary-color);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:not(.btn):not(.button):not(.buy-coffee-btn):not(.floating-coffee-btn):not(.skip-link):not(.preview-link):not(.nav-link):hover {
    text-decoration-thickness: 2px;
}

/* Coffee button accessibility fixes - Override all link styles */
a.buy-coffee-btn,
a.floating-coffee-btn,
.buy-coffee-btn,
.floating-coffee-btn {
    color: #000 !important; /* Force dark text on yellow background */
    text-decoration: none !important;
}

a.buy-coffee-btn:hover,
a.buy-coffee-btn:focus,
a.buy-coffee-btn:visited,
a.buy-coffee-btn:active,
a.floating-coffee-btn:hover,
a.floating-coffee-btn:focus,
a.floating-coffee-btn:visited,
a.floating-coffee-btn:active,
.buy-coffee-btn:hover,
.buy-coffee-btn:focus,
.buy-coffee-btn:visited,
.buy-coffee-btn:active,
.floating-coffee-btn:hover,
.floating-coffee-btn:focus,
.floating-coffee-btn:visited,
.floating-coffee-btn:active {
    color: #000 !important; /* Maintain dark text in all states */
    text-decoration: none !important;
}

/* Tables accessibility (if any) */
table caption {
    font-weight: 600;
    text-align: left;
    margin-bottom: 0.5rem;
}

th {
    font-weight: 600;
    text-align: left;
}

/* Error messages - use CSS variables */
.error-message {
    color: var(--error-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-message::before {
    content: "⚠";
    flex-shrink: 0;
}

/* Success messages - use CSS variables */
.success-message {
    color: var(--success-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.success-message::before {
    content: "✓";
    flex-shrink: 0;
}

/* Loading spinner accessibility */
.loading-spinner {
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

[aria-hidden="true"] {
    display: none !important;
}

/* Additional contrast improvements - use CSS variables */
.sticky-control-label,
.export-label,
.control-label {
    color: var(--label-color);
    font-weight: 600;
}

.dark-theme .sticky-control-label,
.dark-theme .export-label,
.dark-theme .control-label {
    color: var(--label-color);
}

/* Improve select dropdown contrast - use CSS variables */
.sticky-scale-select,
.export-select,
.algorithm-select {
    background-color: var(--input-bg);
    border: 2px solid var(--input-border);
    color: var(--text-color);
}

.dark-theme .sticky-scale-select,
.dark-theme .export-select,
.dark-theme .algorithm-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
}

/* Enhanced focus indicators */
.sticky-scale-select:focus,
.export-select:focus,
.algorithm-select:focus,
.color-picker:focus,
.color-picker-text:focus {
    outline: 3px solid var(--focus-color, var(--primary-color));
    outline-offset: 2px;
    border-color: var(--focus-color, var(--primary-color));
}

/* Improve toast notifications contrast - use CSS variables */
.toast-container .toast {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.toast-container .toast.success {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--success-color);
}

.toast-container .toast.error {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--error-color);
}

.toast-container .toast.warning {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--warning-color);
}

/* Ensure proper text contrast in all states - use CSS variables */
.segment-label {
    color: var(--label-color);
    font-weight: 600;
}

.segment-label.active,
.segment-input:checked + .segment-label {
    color: #ffffff;
    background-color: var(--primary-color);
    outline: none;
}

/* Override outline:none for focus states */
.segment-input:focus + .segment-label,
.segment-input:focus-visible + .segment-label {
    outline: 2px solid var(--focus-color, var(--preview-primary, var(--primary-color))) !important;
    outline-offset: 4px !important;
}

.dark-theme .segment-label {
    color: var(--label-color);
}

.dark-theme .segment-label.active,
.dark-theme .segment-input:checked + .segment-label {
    color: #ffffff;
    background-color: var(--primary-color);
    outline: none;
}

/* Dark theme focus states */
.dark-theme .segment-input:focus + .segment-label,
.dark-theme .segment-input:focus-visible + .segment-label {
    outline: 2px solid var(--focus-color, var(--preview-primary, var(--primary-color))) !important;
    outline-offset: 4px !important;
}

/* Fix accessibility indicator colors - use CSS variables */
.accessibility-indicator.not-accessible {
    background-color: var(--error-color) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
}

.accessibility-indicator.accessible {
    background-color: var(--success-color) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
}

/* Fix header contrast issues - use CSS variables */
.app-header,
.header#appHeader {
    background-color: var(--header-bg);
    color: var(--title-color);
}

.dark-theme .app-header,
.dark-theme .header#appHeader {
    background-color: var(--header-bg);
    color: var(--title-color);
}

/* Fix body text contrast - use CSS variables */
body {
    color: var(--text-color);
    background-color: var(--primary-bg);
}

/* Ensure minimum font size for accessibility (12px minimum) */
/* Target small font elements specifically */
.color-level,
.color-hex,
.color-name,
.minimal-hex-value,
.minimal-accessibility-full,
.minimal-score-circle,
.minimal-tests,
.segment-label,
.export-label,
.toggle-label,
.accessibility-indicator,
.footer-text,
.preview-muted-font-size {
    font-size: max(0.75rem, 12px);
}

/* Fix any remaining low contrast elements - use CSS variables */
.base-color-explanation,
.explanation-text,
.feature-block p,
.technical-block {
    color: var(--text-color);
    font-weight: 500;
}

.dark-theme .base-color-explanation,
.dark-theme .explanation-text,
.dark-theme .feature-block p,
.dark-theme .technical-block {
    color: var(--text-color);
}