/* ===== URGENT DESIGN FIXES ===== */
/* Critical typography, color, and accessibility improvements */

/* === TYPOGRAPHY SYSTEM FIX === */
/* Establish clear hierarchy with medical-appropriate fonts */

/* Primary Headers - Emergency Context */
h1, h2, .page-title, .choice h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 700 !important; /* Bolder for emergency readability */
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

/* Body Text - High Readability */
p, .choice p, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.01em !important;
}

/* Override ALL Playfair Display fonts with Inter */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* === COLOR CONTRAST FIXES === */
/* Fix accessibility and readability issues */

/* Fix ALL poor contrast text */
.choice p, p {
    color: #374151 !important; /* Much better contrast than #666 */
    font-weight: 500 !important; /* Slightly bolder for readability */
}

/* Emergency section text - high contrast */
.emergency-choice p {
    color: #1f2937 !important; /* Very high contrast for emergency */
    font-weight: 600 !important;
}

/* Fix any remaining #666 colors */
* {
    color: #374151 !important;
}

/* Override specific poor contrast instances */
.choice p,
.page-subtitle,
.tagline {
    color: #374151 !important;
}

/* === BRAND COLOR CONSISTENCY === */
/* Align all colors with medical red theme */

/* Fix ALL green colors to match medical theme */
.hero-choice .choice-icon-wrap,
.donor-choice .choice-icon-wrap {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark)) !important;
    box-shadow: 0 8px 20px rgba(107, 139, 123, 0.4) !important;
}

.hero-choice h2,
.donor-choice h2 {
    color: var(--accent-color) !important; /* Use brand accent instead of random green */
}

/* Fix green border */
.hero-choice,
.donor-choice {
    border-left: 6px solid var(--accent-color) !important;
}

/* Override any remaining green colors */
* {
    color: var(--text-primary) !important;
}

/* Restore proper colors for specific elements */
.emergency-choice h2 {
    color: var(--primary-color) !important;
}

.hero-choice h2 {
    color: var(--accent-color) !important;
}

/* === FONT WEIGHT IMPROVEMENTS === */
/* Strengthen visual hierarchy for emergency context */

/* Emergency headers - maximum impact */
.emergency-choice h2 {
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    text-shadow: 0 2px 4px rgba(198, 40, 40, 0.2) !important;
}

/* Hero headers - strong but approachable */
.hero-choice h2 {
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(107, 139, 123, 0.2) !important;
}

/* Button text - clear and actionable */
.choice-btn {
    font-weight: 600 !important;
    font-size: clamp(0.9rem, 2.5vmin, 1.1rem) !important;
    letter-spacing: 0.5px !important;
}

/* === LOGO TYPOGRAPHY FIX === */
/* Ensure logo text is properly weighted */
.logo-main .donate {
    font-weight: 600 !important;
    color: var(--primary-color) !important;
}

.logo-main .blood {
    font-weight: 700 !important;
    color: var(--primary-color) !important;
}

.logo-main .now {
    font-weight: 600 !important;
    color: var(--accent-color) !important;
}

/* === TAGLINE TYPOGRAPHY === */
/* Make tagline more readable and elegant */
.tagline {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(0.85rem, 2vmin, 1rem) !important;
    letter-spacing: 0.5px !important;
    color: var(--text-secondary) !important;
}

/* === MOBILE TYPOGRAPHY OPTIMIZATION === */
@media (max-width: 768px) {
    /* Ensure mobile text is readable in emergency situations */
    .choice h2 {
        font-size: clamp(1.4rem, 4.5vmin, 1.8rem) !important;
        font-weight: 700 !important;
    }

    .choice p {
        font-size: clamp(1rem, 3.2vmin, 1.2rem) !important;
        font-weight: 500 !important;
        color: #1f2937 !important;
    }

    .choice-btn {
        font-size: clamp(0.95rem, 3vmin, 1.15rem) !important;
        font-weight: 600 !important;
    }

    /* CRITICAL: Fix page header contrast on mobile screens */
    .page-title {
        color: var(--primary-color) !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .page-subtitle {
        color: var(--text-secondary) !important;
        background: transparent !important;
    }

    /* CRITICAL: Fix mobile content centering for all pages */
    .main-content {
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* CRITICAL: Fix ALL paragraph text contrast on mobile - ULTRA HIGH SPECIFICITY */
    p, .page-subtitle, .subtitle, .description {
        color: #374151 !important;
        background: transparent !important;
    }

    /* Fix header section text contrast - ULTRA HIGH SPECIFICITY */
    .page-header p, .page-header .page-subtitle {
        color: #374151 !important;
        background: transparent !important;
    }

    /* NUCLEAR OPTION: Override ALL text in main content and headers */
    .main-content p,
    .main-content .page-subtitle,
    .header-section p,
    .header-section .page-subtitle,
    body .main-content p,
    body .header-section p,
    html body .main-content p,
    html body .header-section p {
        color: #374151 !important;
        background: transparent !important;
    }
}

/* === HIGH CONTRAST MODE SUPPORT === */
@media (prefers-contrast: high) {
    .choice p {
        color: #000000 !important;
        font-weight: 600 !important;
    }
    
    .choice h2 {
        font-weight: 800 !important;
    }
}

/* === FINAL OVERRIDES === */
/* Ensure critical elements have proper styling */

/* FORCE override remaining problematic colors in index.css */
.hero-choice,
.donor-choice {
    border-left: 6px solid var(--accent-color) !important;
}

.hero-choice .choice-icon-wrap,
.donor-choice .choice-icon-wrap {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark)) !important;
    box-shadow: 0 8px 20px rgba(107, 139, 123, 0.4) !important;
}

.hero-choice h2,
.donor-choice h2 {
    color: var(--accent-color) !important;
}

/* Fix any remaining #666 colors */
* {
    color: inherit !important;
}

.choice p {
    color: #374151 !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* Paragraphs */
p {
    font-family: 'Inter', sans-serif !important;
    color: #374151 !important;
    font-weight: 400 !important;
}

/* Links - exclude button classes */
a:not(.sos-button):not(.contact-button):not(.menu-btn):not(.menu-btn-left):not(.choice-btn) {
    color: var(--primary-color) !important;
}

/* Buttons */
button, .btn, .choice-btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}