/* Professional Theme Fixes - Version 3.2.4 */
/* Fixing contrast, readability, and professional appearance */

/* Override problematic blue backgrounds */
.bg-gradient-to-r.from-navy.to-medical-blue {
    background: linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 100%) !important;
}

/* Fix header banner */
.professional-banner,
#launchBanner {
    background: #1e3a5f !important;
    color: #ffffff !important;
    padding: 12px 20px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Fix the hero section title */
h2 span.bg-gradient-to-r {
    background: linear-gradient(135deg, #1e3a5f 0%, #4a90e2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fix the broken "You're Not Alone" text */
h2.text-4xl.md\:text-6xl {
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
}

h2 span.text-3xl.md\:text-4xl {
    display: block !important;
    margin-top: 0.5rem !important;
    color: #4b5563 !important; /* Professional gray */
}

/* Fix blue tagline bubble */
.inline-block.px-8.py-3.bg-gradient-to-r.from-navy.to-medical-blue {
    background: #1e3a5f !important;
    color: #ffffff !important;
    border: 2px solid #1e3a5f;
    font-weight: 600;
}

/* Fix "How AppealArmor Works" section */
.bg-gradient-to-r.from-navy.to-medical-blue:not(footer) {
    background: #f8f9fa !important; /* Light gray background */
    color: #2c3e50 !important; /* Dark text for readability */
    border: 1px solid #e0e0e0;
}

/* Fix the three-column section */
.bg-gradient-to-br.from-navy.to-medical-blue {
    background: #ffffff !important;
    border: 2px solid #1e3a5f !important;
    color: #1e3a5f !important;
}

/* Fix text on blue backgrounds */
.from-navy.to-medical-blue h3,
.from-navy.to-medical-blue h4,
.from-navy.to-medical-blue p {
    color: #2c3e50 !important; /* Dark gray for readability */
}

/* Fix icon containers in "How it Works" */
.w-20.h-20.bg-gradient-to-br.from-navy.to-medical-blue {
    background: #1e3a5f !important;
}

.w-20.h-20.bg-gradient-to-br.from-medical-blue.to-light-blue {
    background: #4a90e2 !important;
}

.w-20.h-20.bg-gradient-to-br.from-trust-gray.to-professional-gray {
    background: #6b7280 !important;
}

/* Ensure white text on dark backgrounds */
.w-20.h-20 i.text-white {
    color: #ffffff !important;
}

/* Fix June's message box */
.bg-white.rounded-2xl.p-8.shadow-lg {
    background: #ffffff !important;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}

/* Fix the main CTA button */
.btn-hope {
    background: #1e3a5f !important;
    color: #ffffff !important;
    border: none;
    padding: 1rem 2rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.25);
    transition: all 0.3s ease;
}

.btn-hope:hover {
    background: #2a4a6f !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.35);
}

/* Fix the test mode button */
.bg-success-green {
    background: #10b981 !important;
    color: #ffffff !important;
}

.bg-success-green:hover {
    background: #059669 !important;
}

/* Fix privacy section */
.bg-white.rounded-2xl.border-2.border-green-500 {
    background: #f0fdf4 !important;
    border-color: #10b981 !important;
}

/* Fix footer to ensure readability */
footer.bg-gradient-to-r.from-navy.to-medical-blue {
    background: linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 100%) !important;
}

footer p,
footer span {
    color: #ffffff !important;
    opacity: 1 !important;
}

footer a {
    color: #60a5fa !important;
}

/* Fix any remaining blue-on-blue text issues */
.text-navy {
    color: #1e3a5f !important;
}

.text-medical-blue {
    color: #4a90e2 !important;
}

/* Ensure all paragraph text is readable */
p.text-gray-600,
p.text-gray-700 {
    color: #4b5563 !important;
    line-height: 1.6;
}

/* Fix the "How AppealArmor Works" header */
h3.text-2xl.font-bold.text-center {
    color: #1e3a5f !important;
    margin-bottom: 1.5rem;
}

/* Professional card styling */
.rounded-2xl {
    border-radius: 12px !important;
}

.shadow-lg {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}

/* Fix trust signals section */
.flex.flex-wrap.justify-center.items-center.gap-6 .text-navy {
    color: #1e3a5f !important;
}

/* Remove any animation that looks unprofessional */
.animate-pulse {
    animation: none !important;
}

/* Ensure forms look professional */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    border: 2px solid #e5e7eb !important;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #1e3a5f !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* Fix loading spinner colors */
.fa-circle-notch.fa-spin.text-navy {
    color: #1e3a5f !important;
}

/* Ensure all headers are readable */
h1, h2, h3, h4, h5, h6 {
    color: #1e3a5f !important;
    font-weight: 600;
}

/* Fix any gradient text that might be unreadable */
.bg-clip-text.text-transparent {
    -webkit-text-fill-color: initial !important;
    color: #1e3a5f !important;
}

/* Override any remaining purple/pink */
.text-purple-700,
.bg-purple-50,
.border-purple-500,
.from-purple-100,
.to-purple-50 {
    color: #1e3a5f !important;
    background-color: #f8f9fa !important;
    border-color: #1e3a5f !important;
}

/* ============================================================
   CRITICAL FIX: GREEN CTA BUTTONS - MAKE THEM LOOK CLICKABLE!
   These buttons MUST look like buttons, not flat boxes.
   ============================================================ */

/* Primary green CTA buttons - UNMISTAKABLY CLICKABLE */
#startAppealBtn,
button.bg-green-600,
button.bg-green-700,
.bg-green-600[onclick],
.bg-green-700[onclick] {
    /* 3D button effect with border and shadow */
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
    border: 3px solid #15803d !important;
    border-bottom-width: 5px !important;
    box-shadow:
        0 6px 0 #14532d,
        0 8px 20px rgba(21, 128, 61, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    position: relative !important;
    transform: translateY(0) !important;
    transition: all 0.15s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    /* Make it look raised/3D */
    border-radius: 16px !important;
}

/* Hover state - button lifts up */
#startAppealBtn:hover,
button.bg-green-600:hover,
button.bg-green-700:hover,
.bg-green-600[onclick]:hover,
.bg-green-700[onclick]:hover {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 9px 0 #14532d,
        0 12px 30px rgba(21, 128, 61, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Active/pressed state - button pushes down */
#startAppealBtn:active,
button.bg-green-600:active,
button.bg-green-700:active,
.bg-green-600[onclick]:active,
.bg-green-700[onclick]:active {
    transform: translateY(3px) !important;
    box-shadow:
        0 2px 0 #14532d,
        0 4px 10px rgba(21, 128, 61, 0.3),
        inset 0 2px 0 rgba(0, 0, 0, 0.1) !important;
    border-bottom-width: 3px !important;
}

/* Focus state for accessibility */
#startAppealBtn:focus,
button.bg-green-600:focus,
button.bg-green-700:focus {
    outline: 4px solid rgba(34, 197, 94, 0.5) !important;
    outline-offset: 4px !important;
}

/* Ensure button text is always white and bold */
#startAppealBtn,
button.bg-green-600,
button.bg-green-700 {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* Add a subtle arrow animation hint */
#startAppealBtn i.fa-arrow-right,
button.bg-green-600 i.fa-arrow-right,
button.bg-green-700 i.fa-arrow-right {
    transition: transform 0.2s ease !important;
}

#startAppealBtn:hover i.fa-arrow-right,
button.bg-green-600:hover i.fa-arrow-right,
button.bg-green-700:hover i.fa-arrow-right {
    transform: translateX(5px) !important;
}

/* ============================================================
   CRITICAL FIX: BLUE BOX TEXT CONTRAST
   Gray text on blue background is UNREADABLE - fix it!
   ============================================================ */

/* Founder story box - SPECIFICALLY TARGET the founder section
   Use the parent container structure to be precise */
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}

/* ALL text inside the FOUNDER blue box must be WHITE */
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl h3,
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl p,
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl span,
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl .text-gray-600,
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl .text-gray-700,
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl .text-gray-800,
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl .text-gray-900,
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl .text-xl,
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl .text-xs {
    color: #ffffff !important;
}

/* Icon in founder box - make visible */
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl .bg-gray-200 {
    background: rgba(255, 255, 255, 0.2) !important;
}

#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl .text-gray-600 i,
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl i.fas {
    color: #ffffff !important;
}

/* Trust icons should stay green but be visible */
#heroSection > .max-w-6xl > .bg-blue-50.rounded-2xl .text-green-600 {
    color: #4ade80 !important;
}

/* ALTERNATIVE: Simpler class-based approach - add this class to founder box via HTML */
.founder-box {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}

.founder-box h3,
.founder-box p,
.founder-box span,
.founder-box .text-gray-600,
.founder-box .text-gray-700,
.founder-box .text-gray-900,
.founder-box .text-xs {
    color: #ffffff !important;
}

.founder-box .bg-gray-200 {
    background: rgba(255, 255, 255, 0.2) !important;
}

.founder-box i.fas {
    color: #ffffff !important;
}

.founder-box .text-green-600 {
    color: #4ade80 !important;
}

/* ============================================================
   ADDITIONAL READABILITY FIXES
   ============================================================ */

/* Ensure pulse animation doesn't interfere with button visibility */
@keyframes button-pulse {
    0%, 100% {
        box-shadow:
            0 6px 0 #14532d,
            0 8px 20px rgba(21, 128, 61, 0.4),
            inset 0 2px 0 rgba(255, 255, 255, 0.2),
            0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow:
            0 6px 0 #14532d,
            0 8px 20px rgba(21, 128, 61, 0.4),
            inset 0 2px 0 rgba(255, 255, 255, 0.2),
            0 0 0 15px rgba(34, 197, 94, 0);
    }
}

#startAppealBtn.pulse-animation {
    animation: button-pulse 2s ease-in-out infinite !important;
}

/* Stop animation on hover for better UX */
#startAppealBtn.pulse-animation:hover {
    animation: none !important;
}