/* Accessibility Fixes - Color Contrast Improvements */
/* WCAG AA compliant color contrast ratios */

:root {
    /* Updated gold colors with better contrast on white backgrounds */
    --gold-accessible: #B8860B;  /* DarkGoldenrod - 3.5:1 contrast on white */
    --gold-accessible-dark: #996515;  /* Darker gold - 4.5:1 contrast on white */
    --gold-accessible-light: #DAA520;  /* Goldenrod - still bright but better contrast */
    
    /* Updated text colors for better contrast */
    --text-muted-accessible: #595959;  /* 7.5:1 contrast on white (AA compliant) */
    --text-light-accessible: #666666;  /* 6.5:1 contrast on white */
}

/* Fix gold text color for better contrast */
.text-gold,
.text-gold.text-gold {
    color: var(--gold-accessible-dark) !important;  /* 4.5:1 contrast ratio */
}

/* Fix navbar brand gold text */
.navbar-brand .text-gold {
    color: var(--gold-accessible-dark) !important;
}

/* Fix warning text colors */
.text-warning {
    color: var(--gold-accessible-dark) !important;
}

/* Fix stat labels for better contrast */
.stat-label {
    color: var(--text-muted-accessible) !important;
    font-weight: 500;  /* Slightly bolder for better readability */
}

/* Fix symbol ticker text */
.symbol-ticker {
    color: var(--text-muted-accessible) !important;
    font-weight: 500;
}

/* Fix muted text throughout */
.text-muted {
    color: var(--text-muted-accessible) !important;
}

/* Fix change badges contrast */
.change.positive,
.change-positive {
    background-color: #0d6832 !important;  /* Darker green for better contrast */
    color: white !important;
    font-weight: 600;
}

.change.negative,
.change-negative {
    background-color: #a71e34 !important;  /* Darker red for better contrast */
    color: white !important;
    font-weight: 600;
}

.change.neutral {
    background-color: #495057 !important;  /* Darker gray for better contrast */
    color: white !important;
    font-weight: 600;
}

/* Fix hero section text contrast */
.hero-title {
    color: #212529 !important;  /* Ensure dark text on light background */
    text-shadow: none !important;
}

.hero-subtitle {
    color: var(--text-muted-accessible) !important;
}

/* Fix button contrast for gold buttons */
.btn-gold,
.bg-gold {
    background-color: var(--gold-accessible-dark) !important;
    border-color: var(--gold-accessible-dark) !important;
    color: white !important;
}

.btn-gold:hover,
.bg-gold:hover {
    background-color: var(--gold-accessible) !important;
    border-color: var(--gold-accessible) !important;
    color: white !important;
}

.btn-outline-gold {
    color: var(--gold-accessible-dark) !important;
    border-color: var(--gold-accessible-dark) !important;
}

.btn-outline-gold:hover {
    background-color: var(--gold-accessible-dark) !important;
    border-color: var(--gold-accessible-dark) !important;
    color: white !important;
}

/* Fix mobile-specific contrast issues */
@media (max-width: 768px) {
    .is-mobile .stat-label,
    .is-mobile .symbol-ticker {
        color: var(--text-muted-accessible) !important;
        font-weight: 500;
    }
    
    .is-mobile .text-gold {
        color: var(--gold-accessible-dark) !important;
    }
    
    .is-mobile .hero-title {
        color: #212529 !important;
    }
    
    /* Ensure touch targets are large enough on mobile */
    .is-mobile .btn,
    .is-mobile button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Fix link contrast in navigation */
.nav-link {
    color: #495057 !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    color: var(--gold-accessible-dark) !important;
}

/* Fix dropdown item contrast */
.dropdown-item {
    color: #212529 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f8f9fa !important;
    color: var(--gold-accessible-dark) !important;
}

/* Fix price card contrast */
.modern-price-card .price-label,
.price-card .price-label {
    color: var(--text-muted-accessible) !important;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Fix stats bar labels */
.stats-bar .stat-label {
    color: var(--text-muted-accessible) !important;
    font-weight: 500;
}

/* Fix cookie consent contrast */
.cookie-consent-bar {
    background-color: #212529 !important;
    color: white !important;
}

.cookie-consent-bar a {
    color: var(--gold-accessible-light) !important;
    text-decoration: underline;
}

/* Fix notification badge contrast */
.notification-badge {
    background-color: var(--gold-accessible-dark) !important;
    color: white !important;
    font-weight: bold;
}

/* Ensure focus indicators are visible */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 2px solid var(--gold-accessible-dark) !important;
    outline-offset: 2px !important;
}

/* Fix search input placeholder contrast */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted-accessible) !important;
    opacity: 1;
}

/* Fix breadcrumb contrast */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted-accessible) !important;
}

.breadcrumb-item a {
    color: var(--gold-accessible-dark) !important;
}

/* Fix table text contrast */
.table td,
.table th {
    color: #212529 !important;
}

.table-muted {
    color: var(--text-muted-accessible) !important;
}

/* Fix card subtitle contrast */
.card-subtitle,
.text-subtitle {
    color: var(--text-muted-accessible) !important;
}

/* Ensure all small text meets contrast requirements */
small,
.small {
    color: var(--text-muted-accessible) !important;
    font-weight: 500;
}

/* Fix symbol card universal contrast */
.symbol-card-universal .symbol-ticker {
    color: var(--text-muted-accessible) !important;
    font-weight: 600;
    font-size: 0.85rem;
}

.symbol-card-universal .stat-label {
    color: var(--text-muted-accessible) !important;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Improve visibility of positive/negative changes */
.symbol-card-universal .change {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

/* Fix d-sm-none span contrast */
.d-sm-none,
.d-none {
    /* These are hidden elements, but ensure if shown they have contrast */
    color: var(--text-muted-accessible) !important;
}

/* Fix gradient backgrounds to ensure text readability */
.hero-section {
    background: linear-gradient(135deg, 
        rgba(184, 134, 11, 0.05) 0%, 
        rgba(218, 165, 32, 0.05) 100%) !important;
}

/* Ensure all interactive elements have proper contrast */
.btn:not(.btn-gold):not(.btn-outline-gold) {
    min-height: 38px;
}

/* Fix hover states for better visibility */
.modern-price-card:hover,
.price-card:hover,
.symbol-card-universal:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Fix heading hierarchy - use div with h5/h6 classes for visual styling */
.symbol-name.h5 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.symbol-name.h6 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

/* Ensure symbol cards maintain their visual hierarchy without semantic headings */
.symbol-card .symbol-name,
.symbol-card-large .symbol-name,
.symbol-card-universal .symbol-name {
    display: block;
    font-weight: 600;
}

/* Print styles for better accessibility */
@media print {
    .text-gold,
    .text-warning {
        color: black !important;
        font-weight: bold !important;
    }
    
    .stat-label,
    .symbol-ticker,
    .text-muted {
        color: #333 !important;
    }
}