/* ============================================================================
   VISION MISSION VALUES - DARK MODE TEXT FIXES
   ============================================================================
   
   Purpose: Fix dark text on colored backgrounds that are invisible
   Created: 2025-01-26
   
   Issues Fixed:
   1. Dark headings on blue gradient cards (Regional Leadership, etc.)
   2. Dark headings on orange gradient cards (Reliability First)
   3. Dark text on "How We Live Our Values" blue section
   ============================================================================ */

/* ============================================================================
   VISION SECTION - BLUE GRADIENT CARDS
   ============================================================================ */

/* Force white text on blue gradient backgrounds */
.bg-gradient-to-br.from-c21-vibrant-blue h3,
.bg-gradient-to-br.from-c21-vibrant-blue h2,
.bg-gradient-to-br.from-c21-vibrant-blue h1 {
    color: #FFFFFF !important;
}

.bg-gradient-to-br.from-c21-vibrant-blue p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bg-gradient-to-br.from-c21-vibrant-blue .text-white\/80,
.bg-gradient-to-br.from-c21-vibrant-blue .text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================================================
   MISSION SECTION - ORANGE GRADIENT CARDS
   ============================================================================ */

/* Force white text on orange gradient backgrounds */
.bg-gradient-to-br.from-c21-digital-orange h3,
.bg-gradient-to-br.from-c21-digital-orange h2,
.bg-gradient-to-br.from-c21-digital-orange h1 {
    color: #FFFFFF !important;
}

.bg-gradient-to-br.from-c21-digital-orange p {
    color: rgba(255, 255, 255, 0.95) !important;
}

.bg-gradient-to-br.from-c21-digital-orange .text-white\/90,
.bg-gradient-to-br.from-c21-digital-orange .text-white\/80 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Icon backgrounds on orange cards */
.bg-gradient-to-br.from-c21-digital-orange .bg-white\/10 {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================================================
   HOW WE LIVE OUR VALUES SECTION - BLUE GRADIENT
   ============================================================================ */

/* Blue gradient section text */
.bg-gradient-to-br.from-c21-deep-blue h2,
.bg-gradient-to-br.from-c21-deep-blue h3,
.bg-gradient-to-br.from-c21-deep-blue h1 {
    color: #FFFFFF !important;
}

.bg-gradient-to-br.from-c21-deep-blue .text-2xl {
    color: #FFFFFF !important;
}

/* Cards within the blue gradient section */
.bg-gradient-to-br.from-c21-deep-blue .bg-white\/10 h3 {
    color: #FFFFFF !important;
}

.bg-gradient-to-br.from-c21-deep-blue .bg-white\/10 span,
.bg-gradient-to-br.from-c21-deep-blue .bg-white\/10 li {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Checkmark icons */
.bg-gradient-to-br.from-c21-deep-blue i[data-lucide="check"] {
    color: #FFFFFF !important;
}

/* ============================================================================
   ICON BACKGROUNDS - ENSURE VISIBILITY
   ============================================================================ */

/* Icon containers on gradient backgrounds */
.bg-gradient-to-br .bg-white\/10 {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bg-gradient-to-br .w-12.h-12.bg-white\/10,
.bg-gradient-to-br .w-16.h-16.bg-white\/10 {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Icons inside containers */
.bg-gradient-to-br .bg-white\/10 i {
    color: #FFFFFF !important;
}

/* ============================================================================
   DARK MODE SPECIFIC ADJUSTMENTS
   ============================================================================ */

/* Ensure text remains white in dark mode */
.dark .bg-gradient-to-br.from-c21-vibrant-blue h3,
.dark .bg-gradient-to-br.from-c21-vibrant-blue h2,
.dark .bg-gradient-to-br.from-c21-vibrant-blue p {
    color: #FFFFFF !important;
}

.dark .bg-gradient-to-br.from-c21-digital-orange h3,
.dark .bg-gradient-to-br.from-c21-digital-orange h2,
.dark .bg-gradient-to-br.from-c21-digital-orange p {
    color: #FFFFFF !important;
}

.dark .bg-gradient-to-br.from-c21-deep-blue h2,
.dark .bg-gradient-to-br.from-c21-deep-blue h3,
.dark .bg-gradient-to-br.from-c21-deep-blue span,
.dark .bg-gradient-to-br.from-c21-deep-blue li {
    color: #FFFFFF !important;
}

/* ============================================================================
   CTA SECTION - DARK MODE
   ============================================================================ */

/* Ensure CTA section text is visible in dark mode */
.dark section.bg-white.dark\:bg-c21-dark-surface h2 {
    color: #FFFFFF !important;
}

.dark section.bg-white.dark\:bg-c21-dark-surface p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark section.bg-white.dark\:bg-c21-dark-surface .text-c21-text-secondary {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* CTA buttons in dark mode */
.dark .bookConsultationTrigger {
    background: rgba(42, 55, 75, 0.8) !important;
    border-color: rgba(0, 133, 202, 0.6) !important;
}

.dark .bookConsultationTrigger:hover {
    background: rgba(0, 133, 202, 1) !important;
    border-color: rgba(0, 133, 202, 0.8) !important;
}

/* ============================================================================
   GENERAL TEXT FIXES
   ============================================================================ */

/* Any text-c21-text-primary on colored backgrounds should be white */
section[class*="bg-gradient"] .text-c21-text-primary {
    color: #FFFFFF !important;
}

section[class*="bg-gradient"] .text-c21-text-secondary {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================================
   LIST ITEMS AND CONTENT
   ============================================================================ */

/* Ensure list items are visible on gradient backgrounds */
.bg-gradient-to-br ul li {
    color: rgba(255, 255, 255, 0.95) !important;
}

.bg-gradient-to-br ul li i {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* ============================================================================
   BADGE AND PILL ELEMENTS
   ============================================================================ */

/* Badge elements on gradient backgrounds */
.bg-gradient-to-br .rounded-full,
.bg-gradient-to-br .rounded-xl.flex.items-center {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================================================
   HOVER STATES
   ============================================================================ */

/* Maintain visibility on hover */
.bg-gradient-to-br:hover h3,
.bg-gradient-to-br:hover h2,
.bg-gradient-to-br:hover p {
    color: #FFFFFF !important;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    /* Ensure text remains visible on mobile */
    .bg-gradient-to-br h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    
    .bg-gradient-to-br p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
}