/**
 * Comprehensive Contrast Fix CSS
 * Created: 2025-09-07
 * Purpose: Fix all text/background contrast issues to meet WCAG AA standards (4.5:1)
 */

/* ========================================================================
   HERO SECTION FIXES - Make H1 and CTAs pop
   ======================================================================== */

/* Hero text should be white with strong text shadow on gradient backgrounds */
.hero-section h1,
.hero-modern h1,
.banner3 h1,
#topp h1,
.hero-modern__title {
    color: #ffffff !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 
                 0 0 20px rgba(0,0,0,0.5) !important;
    font-weight: 700 !important;
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.5rem !important;
}

/* Hero lead text */
.hero-section .lead,
.hero-modern .lead,
.banner3 .lead,
.hero-section p.lead,
.hero-modern p.lead {
    color: #ffffff !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7) !important;
    font-size: clamp(1.125rem, 2vw, 1.5rem) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* CTA Buttons in Hero - Make them pop */
.hero-section .btn,
.hero-modern .btn,
.banner3 .btn,
.cta-buttons .btn {
    /* Primary button style */
    background: #ffffff !important;
    color: #0F75BD !important;
    border: 2px solid #ffffff !important;
    font-weight: 600 !important;
    padding: 14px 32px !important;
    font-size: 1.125rem !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.hero-section .btn:hover,
.hero-modern .btn:hover,
.banner3 .btn:hover,
.cta-buttons .btn:hover {
    background: #0F75BD !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
}

/* Secondary button in hero */
.hero-section .btn-secondary,
.hero-modern .btn-secondary,
.cta-buttons .btn-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}

.hero-section .btn-secondary:hover,
.hero-modern .btn-secondary:hover,
.cta-buttons .btn-secondary:hover {
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* ========================================================================
   FIX INVISIBLE SIGN-UP BUTTON
   ======================================================================== */

/* Fix btn-accent visibility issues */
.btn-accent,
.nav-link.btn-accent,
a.btn-accent {
    background-color: #F72C93 !important;
    color: #ffffff !important;
    border-color: #F72C93 !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;
    box-shadow: 0 2px 8px rgba(247,44,147,0.3) !important;
}

.btn-accent:hover,
.nav-link.btn-accent:hover,
a.btn-accent:hover {
    background-color: #D91872 !important;
    color: #ffffff !important;
    border-color: #D91872 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(247,44,147,0.4) !important;
}

/* Ensure rounded-pill buttons are visible */
.rounded-pill.btn-accent {
    padding: 8px 24px !important;
    min-height: 36px !important;
}

/* ========================================================================
   NAVBAR CONTRAST FIXES
   ======================================================================== */

/* DNA Romance navbar - ensure proper contrast */
[data-site="dnaromance"] .navbar,
[data-site="apps"] .navbar,
.navbar-dnaromance {
    background-color: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

/* Navbar brand text - always dark on light background */
.navbar-brand,
.navbar-light .navbar-brand,
[data-site="dnaromance"] .navbar-brand,
[data-site="apps"] .navbar-brand {
    color: #212529 !important;
    font-weight: 700 !important;
}

.navbar-brand:hover {
    color: #0F75BD !important;
}

/* Navbar links - dark text on light background */
.navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link,
[data-site="dnaromance"] .nav-link,
[data-site="apps"] .nav-link {
    color: #495057 !important;
    font-weight: 500 !important;
}

.navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
    color: #0F75BD !important;
}

/* ========================================================================
   FORM CONTRAST FIXES
   ======================================================================== */

/* All form labels should be dark */
.form-label,
label,
.control-label {
    color: #212529 !important;
    font-weight: 500 !important;
}

/* GenePool specific form fixes */
[data-site="genepool"] .form-label,
[data-site="genepool"] label {
    color: #212529 !important;
    background-color: transparent !important;
}

/* Form inputs */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
    color: #212529 !important;
    background-color: #ffffff !important;
    border-color: #ced4da !important;
}

.form-control:focus,
.form-select:focus {
    color: #212529 !important;
    background-color: #ffffff !important;
    border-color: #86b7fe !important;
}

/* Placeholder text */
::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

/* ========================================================================
   BUTTON CONTRAST FIXES
   ======================================================================== */

/* Primary buttons */
.btn-primary {
    background-color: #0F75BD !important;
    color: #ffffff !important;
    border-color: #0F75BD !important;
}

.btn-primary:hover {
    background-color: #0C5C96 !important;
    color: #ffffff !important;
    border-color: #0C5C96 !important;
}

/* Success buttons */
.btn-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border-color: #28a745 !important;
}

/* Danger buttons */
.btn-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
}

/* Warning buttons - dark text on yellow */
.btn-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border-color: #ffc107 !important;
}

/* Light buttons - dark text */
.btn-light {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #f8f9fa !important;
}

/* Dark buttons - light text */
.btn-dark {
    background-color: #343a40 !important;
    color: #ffffff !important;
    border-color: #343a40 !important;
}

/* Outline buttons */
.btn-outline-primary {
    color: #0F75BD !important;
    border-color: #0F75BD !important;
}

.btn-outline-primary:hover {
    background-color: #0F75BD !important;
    color: #ffffff !important;
}

/* ========================================================================
   CARD CONTRAST FIXES
   ======================================================================== */

/* Cards should have white background with dark text */
.card {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

.card-header {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-bottom-color: #dee2e6 !important;
}

.card-title {
    color: #212529 !important;
}

/* Transparent cards in hero sections */
.hero-modern .card-glass,
.hero-modern .card-glass-transparent,
.banner3 .card-glass {
    background: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* ========================================================================
   TEXT CONTRAST FIXES
   ======================================================================== */

/* Body text should always have good contrast */
body {
    color: #212529 !important;
    background-color: #ffffff !important;
}

/* Dark backgrounds should have light text */
.bg-dark,
.bg-primary,
.bg-secondary,
.bg-success,
.bg-danger {
    color: #ffffff !important;
}

.bg-dark *,
.bg-primary *,
.bg-secondary * {
    color: #ffffff !important;
}

/* Light backgrounds should have dark text */
.bg-light,
.bg-white,
.bg-warning,
.bg-info {
    color: #212529 !important;
}

.bg-light *,
.bg-white *,
.bg-warning * {
    color: #212529 !important;
}

/* Text utility classes */
.text-dark {
    color: #212529 !important;
}

.text-light,
.text-white {
    color: #ffffff !important;
}

.text-muted {
    color: #6c757d !important;
}

/* Links */
a {
    color: #0F75BD !important;
}

a:hover {
    color: #0C5C96 !important;
}

/* Links on dark backgrounds */
.bg-dark a,
.bg-primary a,
.hero-section a:not(.btn) {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* ========================================================================
   MODAL CONTRAST FIXES
   ======================================================================== */

.modal-content {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.modal-header {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-bottom-color: #dee2e6 !important;
}

.modal-title {
    color: #212529 !important;
}

/* ========================================================================
   DROPDOWN CONTRAST FIXES
   ======================================================================== */

.dropdown-menu {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

.dropdown-item {
    color: #212529 !important;
}

.dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #0F75BD !important;
}

/* ========================================================================
   ALERT CONTRAST FIXES
   ======================================================================== */

.alert-primary {
    background-color: #cfe2ff !important;
    color: #052c65 !important;
    border-color: #9ec5fe !important;
}

.alert-success {
    background-color: #d1e7dd !important;
    color: #0a3622 !important;
    border-color: #a3cfbb !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    color: #58151c !important;
    border-color: #f1aeb5 !important;
}

.alert-warning {
    background-color: #fff3cd !important;
    color: #664d03 !important;
    border-color: #ffe69c !important;
}

.alert-info {
    background-color: #cff4fc !important;
    color: #055160 !important;
    border-color: #9eeaf9 !important;
}

/* ========================================================================
   BADGE CONTRAST FIXES
   ======================================================================== */

.badge {
    font-weight: 600 !important;
}

.badge-primary,
.bg-primary.badge {
    background-color: #0F75BD !important;
    color: #ffffff !important;
}

.badge-secondary,
.bg-secondary.badge {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.badge-success,
.bg-success.badge {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

.badge-warning,
.bg-warning.badge {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* ========================================================================
   PAGINATION CONTRAST FIXES
   ======================================================================== */

.page-link {
    color: #0F75BD !important;
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

.page-link:hover {
    color: #0C5C96 !important;
    background-color: #e9ecef !important;
}

.page-item.active .page-link {
    background-color: #0F75BD !important;
    color: #ffffff !important;
    border-color: #0F75BD !important;
}

/* ========================================================================
   TABLE CONTRAST FIXES
   ======================================================================== */

.table {
    color: #212529 !important;
    background-color: #ffffff !important;
}

.table th {
    color: #212529 !important;
    font-weight: 600 !important;
    background-color: #f8f9fa !important;
}

.table-dark {
    color: #ffffff !important;
    background-color: #212529 !important;
}

.table-dark th {
    color: #ffffff !important;
    background-color: #1c1f23 !important;
}

/* ========================================================================
   OVERRIDE INLINE STYLES
   ======================================================================== */

/* Force override inline styles that break contrast */
[style*="color: rgba(0, 0, 0, 0.6)"] {
    color: #212529 !important;
}

[style*="color: rgba(255, 255, 255, 0.6)"] {
    color: #ffffff !important;
}

/* ========================================================================
   MOBILE RESPONSIVE CONTRAST
   ======================================================================== */

@media (max-width: 768px) {
    /* Ensure mobile nav has proper contrast */
    .navbar-collapse {
        background-color: #ffffff !important;
    }
    
    .navbar-toggler {
        border-color: #212529 !important;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(33, 37, 41, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    }
}

/* ========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================================================== */

/* Focus indicators */
*:focus {
    outline: 3px solid #0F75BD !important;
    outline-offset: 2px !important;
}

/* Skip links */
.skip-link:focus {
    background-color: #0F75BD !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }
    
    .btn {
        border-width: 3px !important;
    }
}

/* ========================================================================
   EXPERIENCE SECTION FIX - Remove dark background
   ======================================================================== */

.experience {
    background-color: transparent !important;
    border: none !important;
}

/* Ensure text remains readable */
.experience .section-title,
.experience h2,
.experience h3,
.experience h4 {
    color: #212529 !important;
}

.experience p {
    color: #495057 !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .experience {
        background-color: transparent !important;
    }
}

/* ========================================================================
   DEBUG MODE - Uncomment to highlight contrast issues
   ======================================================================== */

/*
.contrast-debug-low {
    border: 3px solid red !important;
}

.contrast-debug-medium {
    border: 3px solid orange !important;
}

.contrast-debug-good {
    border: 3px solid green !important;
}
*/