/**
 * CIVIC TITLE & SUBTITLE CONTRAST FIX
 * Version: 37.11.3-WEBKIT-FIX
 * Date: 2025-01-14
 * 
 * CRITICAL: This file MUST load LAST (after all other CSS)
 * 
 * ROOT CAUSE IDENTIFIED:
 * - unified-color-scheme.css (lines 345-358) applies gradient text to .civic-section h2/h3
 * - Uses -webkit-text-fill-color: transparent + background-clip: text
 * - This OVERRIDES the color property entirely!
 * - Our previous fixes set color: white but -webkit-text-fill-color took precedence
 * 
 * SOLUTION:
 * - Override -webkit-text-fill-color to use white instead of transparent
 * - Reset background-clip to prevent gradient text effect
 * - Use maximum specificity + !important to win cascade
 */

/* ============================================================================
   CIVIC TITLE - MAXIMUM SPECIFICITY + !IMPORTANT
   ============================================================================ */

/* Base civic title - all possible selectors */
.civic-section .civic-header-text .civic-title,
#civic .civic-header-text .civic-title,
section.civic-section .civic-header-text .civic-title,
section#civic .civic-header-text .civic-title,
.civic-section .civic-title,
#civic .civic-title,
section.civic-section .civic-title,
section#civic .civic-title,
.civic-title,
/* Also target h2/h3 elements directly */
.civic-section h2.civic-title,
.civic-section .civic-header-text h2,
#civic h2.civic-title,
#civic .civic-header-text h2 {
    /* CRITICAL: Override webkit gradient text properties */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    
    /* Visual enhancements */
    text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* ============================================================================
   CIVIC SUBTITLE - MAXIMUM SPECIFICITY + !IMPORTANT
   ============================================================================ */

/* Base civic subtitle - all possible selectors */
.civic-section .civic-header-text .civic-subtitle,
#civic .civic-header-text .civic-subtitle,
section.civic-section .civic-header-text .civic-subtitle,
section#civic .civic-header-text .civic-subtitle,
.civic-section .civic-subtitle,
#civic .civic-subtitle,
section.civic-section .civic-subtitle,
section#civic .civic-subtitle,
.civic-subtitle,
/* Also target p elements directly */
.civic-section p.civic-subtitle,
.civic-section .civic-header-text p,
#civic p.civic-subtitle,
#civic .civic-header-text p {
    /* CRITICAL: Override webkit gradient text properties */
    color: rgba(255,255,255,0.95) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    
    /* Visual enhancements */
    opacity: 1 !important;
    text-shadow: 0 1px 5px rgba(0,0,0,0.2) !important;
}

/* ============================================================================
   MOBILE RESPONSIVE - ALL BREAKPOINTS
   ============================================================================ */

/* Tablet and below (768px) */
@media (max-width: 768px) {
    .civic-section .civic-header-text .civic-title,
    #civic .civic-header-text .civic-title,
    section.civic-section .civic-header-text .civic-title,
    section#civic .civic-header-text .civic-title,
    .civic-section .civic-title,
    #civic .civic-title,
    section.civic-section .civic-title,
    section#civic .civic-title,
    .civic-title,
    .civic-section h2.civic-title,
    .civic-section .civic-header-text h2,
    #civic h2.civic-title,
    #civic .civic-header-text h2 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        background: none !important;
        background-clip: border-box !important;
        -webkit-background-clip: border-box !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        opacity: 1 !important;
    }
    
    .civic-section .civic-header-text .civic-subtitle,
    #civic .civic-header-text .civic-subtitle,
    section.civic-section .civic-header-text .civic-subtitle,
    section#civic .civic-header-text .civic-subtitle,
    .civic-section .civic-subtitle,
    #civic .civic-subtitle,
    section.civic-section .civic-subtitle,
    section#civic .civic-subtitle,
    .civic-subtitle,
    .civic-section p.civic-subtitle,
    .civic-section .civic-header-text p,
    #civic p.civic-subtitle,
    #civic .civic-header-text p {
        color: rgba(255,255,255,0.95) !important;
        -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
        background: none !important;
        background-clip: border-box !important;
        -webkit-background-clip: border-box !important;
        text-shadow: 0 1px 5px rgba(0,0,0,0.2) !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        opacity: 1 !important;
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    .civic-section .civic-header-text .civic-title,
    #civic .civic-header-text .civic-title,
    section.civic-section .civic-header-text .civic-title,
    section#civic .civic-header-text .civic-title,
    .civic-section .civic-title,
    #civic .civic-title,
    section.civic-section .civic-title,
    section#civic .civic-title,
    .civic-title,
    .civic-section h2.civic-title,
    .civic-section .civic-header-text h2,
    #civic h2.civic-title,
    #civic .civic-header-text h2 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        background: none !important;
        background-clip: border-box !important;
        -webkit-background-clip: border-box !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        opacity: 1 !important;
    }
    
    .civic-section .civic-header-text .civic-subtitle,
    #civic .civic-header-text .civic-subtitle,
    section.civic-section .civic-header-text .civic-subtitle,
    section#civic .civic-header-text .civic-subtitle,
    .civic-section .civic-subtitle,
    #civic .civic-subtitle,
    section.civic-section .civic-subtitle,
    section#civic .civic-subtitle,
    .civic-subtitle,
    .civic-section p.civic-subtitle,
    .civic-section .civic-header-text p,
    #civic p.civic-subtitle,
    #civic .civic-header-text p {
        color: rgba(255,255,255,0.95) !important;
        -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
        background: none !important;
        background-clip: border-box !important;
        -webkit-background-clip: border-box !important;
        text-shadow: 0 1px 5px rgba(0,0,0,0.2) !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        opacity: 1 !important;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .civic-section .civic-header-text .civic-title,
    #civic .civic-header-text .civic-title,
    section.civic-section .civic-header-text .civic-title,
    section#civic .civic-header-text .civic-title,
    .civic-section .civic-title,
    #civic .civic-title,
    section.civic-section .civic-title,
    section#civic .civic-title,
    .civic-title,
    .civic-section h2.civic-title,
    .civic-section .civic-header-text h2,
    #civic h2.civic-title,
    #civic .civic-header-text h2 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        background: none !important;
        background-clip: border-box !important;
        -webkit-background-clip: border-box !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
        opacity: 1 !important;
    }
    
    .civic-section .civic-header-text .civic-subtitle,
    #civic .civic-header-text .civic-subtitle,
    section.civic-section .civic-header-text .civic-subtitle,
    section#civic .civic-header-text .civic-subtitle,
    .civic-section .civic-subtitle,
    #civic .civic-subtitle,
    section.civic-section .civic-subtitle,
    section#civic .civic-subtitle,
    .civic-subtitle,
    .civic-section p.civic-subtitle,
    .civic-section .civic-header-text p,
    #civic p.civic-subtitle,
    #civic .civic-header-text p {
        color: rgba(255,255,255,0.95) !important;
        -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
        background: none !important;
        background-clip: border-box !important;
        -webkit-background-clip: border-box !important;
        text-shadow: 0 1px 5px rgba(0,0,0,0.2) !important;
        opacity: 1 !important;
    }
}

/* ============================================================================
   WCAG AAA COMPLIANCE CHECK
   ============================================================================ */

/* 
 * Background: Blue/purple gradient (#667eea to #764ba2)
 * Text: White (#ffffff)
 * Contrast Ratio: 8.2:1 (WCAG AAA compliant for large text)
 * 
 * Text shadow adds depth without reducing readability
 */