/* ============================================
   THEME VISIBILITY CRITICAL FIXES
   Fix WCAG AA contrast failures identified in QA audit
   Date: 2025-11-09
   ============================================ */

/* ====================================
   DARK THEME FIXES
   ==================================== */

/* FIX 1: H1 Main Heading - Ensure gradient renders with sufficient contrast */
html[data-theme="dark"] h1,
html[data-theme="dark"] h1 a {
    /* Fallback solid color in case gradient fails */
    color: #f9fafb !important;
    /* Brighter gradient for dark theme - increased saturation */
    background: linear-gradient(135deg, #00d4ff 0%, #ff8001 50%, #64ffda 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    /* Ensure gradient fills properly */
    background-size: 200% 200% !important;
}

/* FIX 2: Footer Links - Remove semi-transparent background that causes low contrast */
html[data-theme="dark"] .footer-link {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .footer-link:hover {
    background: rgba(100, 255, 218, 0.1) !important;
    color: var(--primary-cyan) !important;
}

/* FIX 3: Disclaimer Text - Use proper dark theme color variable */
html[data-theme="dark"] .disclaimer-text {
    color: var(--text-muted) !important; /* #d1d5db - 8.2:1 contrast */
}

html[data-theme="dark"] .disclaimer-text strong {
    color: var(--primary-cyan) !important;
}

/* FIX 4: Links on colored backgrounds - Ensure dark text for sufficient contrast */
html[data-theme="dark"] [style*="linear-gradient"] a,
html[data-theme="dark"] .btn-primary a,
html[data-theme="dark"] nav a[style*="background"] {
    color: #0a0e27 !important;
    text-decoration: none !important;
}

/* FIX 5: Pagination Info - Replace semi-transparent background with solid color */
html[data-theme="dark"] .pagination-info {
    color: var(--text-secondary) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* ====================================
   LIGHT THEME FIXES
   ==================================== */

/* FIX 6: Links on colored backgrounds - Use white text for sufficient contrast */
html[data-theme="light"] [style*="linear-gradient"] a,
html[data-theme="light"] .btn-primary a,
html[data-theme="light"] nav a[style*="background"] {
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* FIX 7: Pagination Buttons - Proper light theme styling with adequate contrast */
html[data-theme="light"] .pagination-btn {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
}

html[data-theme="light"] .pagination-btn:hover:not(:disabled) {
    background: var(--bg-tertiary) !important;
    border-color: var(--accent-orange) !important;
}

html[data-theme="light"] .pagination-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* FIX 8: Pagination Page Numbers - Consistent light theme styling */
html[data-theme="light"] .pagination-page {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
}

html[data-theme="light"] .pagination-page:hover:not(.active) {
    background: var(--bg-tertiary) !important;
    border-color: var(--accent-orange) !important;
    transform: translateY(-2px);
}

html[data-theme="light"] .pagination-page.active {
    color: #ffffff !important;
    background: var(--accent-orange) !important;
    border-color: var(--accent-orange) !important;
}

/* FIX 9: Pagination Info - Proper light theme color from variables */
html[data-theme="light"] .pagination-info {
    color: var(--text-secondary) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* ====================================
   ADDITIONAL PREVENTIVE FIXES
   Ensure consistency across themes
   ==================================== */

/* Ensure all footer text elements use theme variables */
html[data-theme="dark"] .footer-description,
html[data-theme="dark"] .footer-stat,
html[data-theme="dark"] .footer-column p,
html[data-theme="dark"] .footer-column li {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .footer-description,
html[data-theme="light"] .footer-stat,
html[data-theme="light"] .footer-column p,
html[data-theme="light"] .footer-column li {
    color: var(--text-secondary) !important;
}

/* Ensure pagination container respects theme */
html[data-theme="dark"] .pagination-container {
    background: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
}

html[data-theme="light"] .pagination-container {
    background: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
}

/* Ensure all navigation links on gradient backgrounds have proper contrast */
html[data-theme="dark"] nav[aria-label="Main navigation"] a {
    /* These buttons have gradient backgrounds */
    color: #0a0e27 !important;
    font-weight: 600 !important;
}

html[data-theme="light"] nav[aria-label="Main navigation"] a {
    /* These buttons have gradient backgrounds */
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Ensure ellipsis in pagination uses theme colors */
html[data-theme="dark"] .pagination-ellipsis {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .pagination-ellipsis {
    color: var(--text-muted) !important;
}

/* ====================================
   VERIFICATION MARKERS
   For QA testing - these should render correctly
   ==================================== */

/* Ensure these critical elements always pass WCAG AA (4.5:1 minimum) */
html[data-theme="dark"] h1 {
    /* Minimum 4.5:1 contrast against --bg-primary (#0a0a1a) */
    min-height: 1em; /* Ensure gradient has room to render */
}

html[data-theme="light"] h1 {
    /* Should already pass - verify contrast */
    color: var(--text-primary) !important;
}

/* Footer links should be clearly visible in both themes */
html[data-theme="dark"] .footer-link,
html[data-theme="light"] .footer-link {
    /* Ensure minimum touch target and visibility */
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Disclaimer must be readable in both themes */
html[data-theme="dark"] .disclaimer-text,
html[data-theme="light"] .disclaimer-text {
    /* Ensure sufficient line height for readability */
    line-height: 1.6;
}