/* Global Fixes for Common Issues - Phase 5 */

/* Ensure all basic elements use CSS variables */
body {
    background: var(--bg-primary);
    color: var(--text-secondary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Fix any remaining hardcoded colors */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-secondary);
}

p, li, span {
    color: var(--text-muted);
}

/* Links */
a {
    color: var(--primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
}

/* Forms */
input, textarea, select {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}

/* Buttons - removed global styles, using component-specific styles */

/* Cards and containers */
.card, .content-section, .info-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* Tables */
table {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

th {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

td {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

/* Code blocks */
code, pre {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* Blockquotes */
blockquote {
    background: var(--bg-secondary);
    border-left: 4px solid var(--primary);
    color: var(--text-muted);
}

/* Fix white text on white background issues - OVERRIDE modern-style.css */
div.toc,
.toc {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    padding: 1.5rem !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border-left: 4px solid var(--primary) !important;
    margin-bottom: 3rem !important;
}

div.toc h2,
.toc h2 {
    color: var(--text-secondary) !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
}

div.toc ul,
.toc ul {
    list-style: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    list-style-type: none !important;
}

div.toc li,
.toc li {
    margin: 0.5rem 0 !important;
    margin-bottom: 1rem !important;
    padding-left: 0 !important;
}

div.toc li::before,
.toc li::before {
    display: none !important;
}

div.toc a,
.toc a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    padding: 0.25rem 0 !important;
    border-left: 3px solid transparent !important;
    padding-left: 0.75rem !important;
    display: block !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

div.toc a:hover,
.toc a:hover {
    color: var(--primary) !important;
    border-left-color: var(--primary) !important;
    background: var(--primary-light) !important;
    text-decoration: underline !important;
}

/* Override .hero * white color for TOC and other elements - HIGHEST SPECIFICITY */
.hero div.toc,
.hero .toc,
.container .hero div.toc,
.container .hero .toc,
div.hero .toc,
section.hero ~ .toc,
.container section.hero ~ .toc,
.hero + .toc,
.container .hero + .toc {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #2d3748 !important;
}

.hero div.toc h2,
.hero .toc h2,
.container .hero div.toc h2,
.container .hero .toc h2,
div.hero .toc h2,
section.hero ~ .toc h2,
.container section.hero ~ .toc h2,
.hero + .toc h2,
.container .hero + .toc h2 {
    color: #1a202c !important;
}

.hero div.toc a,
.hero .toc a,
.container .hero div.toc a,
.container .hero .toc a,
div.hero .toc a,
section.hero ~ .toc a,
.container section.hero ~ .toc a,
.hero + .toc a,
.container .hero + .toc a {
    color: #4a5568 !important;
}

.hero div.toc a:hover,
.hero .toc a:hover,
.container .hero div.toc a:hover,
.container .hero .toc a:hover,
div.hero .toc a:hover,
section.hero ~ .toc a:hover,
.container section.hero ~ .toc a:hover,
.hero + .toc a:hover,
.container .hero + .toc a:hover {
    color: #c41e3a !important;
    background: rgba(196, 30, 58, 0.1) !important;
}

/* Fix step-item white on white issue */
.hero .step-item,
.container .hero .step-item,
div.hero .step-item,
section.hero ~ .step-item,
.container section.hero ~ .step-item,
.hero + .step-item,
.container .hero + .step-item,
.step-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #2d3748 !important;
}

.hero .step-item h3,
.container .hero .step-item h3,
div.hero .step-item h3,
section.hero ~ .step-item h3,
.container section.hero ~ .step-item h3,
.hero + .step-item h3,
.container .hero + .step-item h3,
.step-item h3,
.hero .steps-container h3,
.container .hero .steps-container h3,
div.hero .steps-container h3,
section.hero ~ .steps-container h3,
.container section.hero ~ .steps-container h3,
.hero + .steps-container h3,
.container .hero + .steps-container h3,
.steps-container h3 {
    color: #1a202c !important;
}

.hero .step-item p,
.container .hero .step-item p,
div.hero .step-item p,
section.hero ~ .step-item p,
.container section.hero ~ .step-item p,
.hero + .step-item p,
.container .hero + .step-item p,
.step-item p {
    color: #4a5568 !important;
}

.hero .step-item .step-number,
.container .hero .step-item .step-number,
div.hero .step-item .step-number,
section.hero ~ .step-item .step-number,
.container section.hero ~ .step-item .step-number,
.hero + .step-item .step-number,
.container .hero + .step-item .step-number,
.step-item .step-number {
    background: #c41e3a !important;
    color: white !important;
}

/* Enhanced contrast for light mode with high specificity */
[data-theme="light"] div.toc,
[data-theme="light"] .toc,
[data-theme="light"] .step-item,
[data-theme="light"] .meta-item,
[data-theme="light"] .reading-time {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #2d3748 !important;
}

[data-theme="light"] div.toc h2,
[data-theme="light"] .toc h2,
[data-theme="light"] .step-item h3,
[data-theme="light"] .step-item h4 {
    color: #1a202c !important;
}

[data-theme="light"] div.toc a,
[data-theme="light"] .toc a,
[data-theme="light"] .step-item p,
[data-theme="light"] .meta-item {
    color: #4a5568 !important;
}

[data-theme="light"] div.toc a:hover,
[data-theme="light"] .toc a:hover {
    color: #c41e3a !important;
    background: rgba(196, 30, 58, 0.1) !important;
}

[data-theme="light"] .step-item .step-number {
    background: #c41e3a !important;
    color: white !important;
}

/* Default light mode (auto) with high specificity */
@media (prefers-color-scheme: light) {
    div.toc,
    .toc {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
        color: #2d3748 !important;
    }

    div.toc h2,
    .toc h2 {
        color: #1a202c !important;
    }

    div.toc a,
    .toc a {
        color: #4a5568 !important;
    }

    div.toc a:hover,
    .toc a:hover {
        color: #c41e3a !important;
        background: rgba(196, 30, 58, 0.1) !important;
    }
}

/* Reading time fixes */
.reading-time,
.meta-item {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color);
}

/* Page meta fixes */
.page-meta .meta-item {
    color: var(--text-muted);
}

.page-meta .icon {
    color: var(--primary);
}

/* Alert and notification fixes */
.alert {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: var(--text-secondary);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: var(--text-secondary);
}

.alert-danger {
    background: rgba(220, 38, 38, 0.1);
    border-color: #dc2626;
    color: var(--text-secondary);
}

.alert-success {
    background: rgba(5, 150, 105, 0.1);
    border-color: #059669;
    color: var(--text-secondary);
}

/* Section headers */
.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.section-header h2 {
    color: var(--text-secondary);
    margin: 0;
}

.section-icon {
    font-size: 2rem;
    color: var(--primary);
}

/* Fix any remaining contrast issues */
.highlight {
    background: var(--primary-light);
    color: var(--text-secondary);
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
}


/* Fix sidebar and overlay content */
.sidebar, .overlay-content {
    background: var(--bg-primary);
    color: var(--text-secondary);
}

/* Responsive text scaling */
@media (max-width: 768px) {
    body {
        font-size: 0.9rem;
    }
}

/* Light mode contrast fixes - General */
[data-theme="light"] {
    --text-primary: #1a202c;
    --text-secondary: #2d3748;
    --text-muted: #4a5568;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --border-color: #e2e8f0;
}

[data-theme="light"] body,
[data-theme="light"] .container,
[data-theme="light"] .content-section,
[data-theme="light"] .card,
[data-theme="light"] .info-card,
[data-theme="light"] .feature-card {
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] span {
    color: var(--text-muted) !important;
}

/* Dark mode contrast fixes */
[data-theme="dark"] {
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #cbd5e0;
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --border-color: #4a5568;
}

[data-theme="dark"] body,
[data-theme="dark"] .container,
[data-theme="dark"] .content-section,
[data-theme="dark"] .card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .step-item {
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .step-item h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] .step-item p {
    color: var(--text-muted) !important;
}

/* Step items specific fixes for both themes */
.step-item {
    border: 2px solid transparent !important;
}

[data-theme="light"] .step-item {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .step-item h4 {
    color: #1a202c !important;
}

[data-theme="light"] .step-item p {
    color: #4a5568 !important;
}

[data-theme="light"] .steps-container h3 {
    color: #1a202c !important;
}

[data-theme="dark"] .step-item {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

[data-theme="dark"] .step-item h4,
[data-theme="dark"] .steps-container h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .step-item p {
    color: #cbd5e0 !important;
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    .card, .content-section {
        border-width: 2px;
    }

    a {
        text-decoration: underline;
    }

    /* Button styles handled in component CSS */
}

/* Print mode fixes */
@media print {
    * {
        background: white !important;
        color: black !important;
    }

    .nav-overlay, .back-to-top {
        display: none !important;
    }
}