/*
=============================================================================
COMPLETE WEBSITE FIX - All CSS Variables and Visibility Issues Resolved
=============================================================================
*/

/* Define ALL missing CSS variables that were causing text invisibility */
:root {
    /* Corporate Color System */
    --primary-navy: #1a365d;
    --primary-blue: #2b77ad;
    --accent-green: #22c55e;
    --accent-gold: #f59e0b;
    
    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    
    /* Background Colors */
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --bg-gray: #f3f4f6;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-dramatic: 0 20px 40px rgba(0, 0, 0, 0.15);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #1a365d 0%, #2b77ad 100%);
    --gradient-secondary: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Fonts */
    --font-display: 'Inter', system-ui, sans-serif;
}

/* Ensure all text is visible with proper colors */
body {
    color: var(--text-primary);
    font-family: var(--font-display);
    line-height: 1.6;
}

/* Fix invisible text issues in feature cards and sections */
.feature-card-elegant,
.feature-content-elegant,
.feature-title-elegant,
.feature-description-elegant {
    color: var(--text-primary) !important;
}

.feature-title-elegant {
    color: var(--primary-navy) !important;
    font-weight: 700 !important;
}

.feature-description-elegant {
    color: var(--text-secondary) !important;
}

/* Fix badges visibility */
.badge {
    color: white !important;
}

.badge.bg-primary {
    background-color: var(--primary-navy) !important;
}

.badge.bg-success {
    background-color: var(--accent-green) !important;
}

.badge.bg-warning {
    background-color: var(--accent-gold) !important;
    color: #000 !important;
}

/* Fix section titles and subtitles */
.section-title-elegant,
.section-title {
    color: var(--primary-navy) !important;
    font-weight: 800 !important;
}

.section-subtitle {
    color: var(--text-secondary) !important;
}

/* Fix application items text visibility */
.application-item h5 {
    color: var(--text-primary) !important;
}

.application-item p {
    color: var(--text-muted) !important;
}

/* Fix milestone and achievement sections */
.milestone-item,
.achievement-item {
    color: var(--text-primary) !important;
}

.milestone-item h5,
.achievement-item h5 {
    color: var(--primary-navy) !important;
}

.milestone-item p,
.achievement-item p {
    color: var(--text-secondary) !important;
}

/* Fix feature box content */
.feature-box-gradient {
    background: var(--gradient-primary) !important;
    color: white !important;
}

.feature-box-gradient h3,
.feature-box-gradient h4,
.feature-box-gradient h5 {
    color: white !important;
}

.feature-box-gradient p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure proper center alignment for all pages */
.container,
.container-fluid,
.container-modern {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.section-header {
    text-align: center !important;
    margin-bottom: var(--space-2xl) !important;
}

/* Fix header and navigation */
.navbar-nav .nav-link {
    color: var(--primary-navy) !important;
    font-weight: 500 !important;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-blue) !important;
}

.dropdown-menu {
    background: white !important;
    border: 1px solid rgba(26, 54, 93, 0.1) !important;
    box-shadow: 0 10px 25px rgba(26, 54, 93, 0.15) !important;
    border-radius: var(--radius-lg) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
    padding: var(--space-md) var(--space-lg) !important;
    transition: var(--transition-smooth) !important;
}

.dropdown-item:hover {
    background: rgba(26, 54, 93, 0.05) !important;
    color: var(--primary-navy) !important;
}

/* Fix button styling */
.btn-elegant,
.btn-accent {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    padding: var(--space-md) var(--space-xl) !important;
    border-radius: var(--radius-lg) !important;
    font-weight: 600 !important;
    transition: var(--transition-smooth) !important;
}

.btn-elegant:hover,
.btn-accent:hover {
    background: var(--gradient-secondary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

.btn-outline {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: white !important;
}

.btn-outline:hover {
    background: white !important;
    color: var(--primary-navy) !important;
    border-color: white !important;
}

/* Fix card layouts to prevent overlapping */
.blog-card,
.product-card,
.service-card {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition-smooth) !important;
    margin-bottom: var(--space-xl) !important;
    overflow: hidden !important;
}

.blog-card:hover,
.product-card:hover,
.service-card:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-4px) !important;
    border-color: var(--primary-blue) !important;
}

/* Fix blog card content */
.blog-content {
    padding: var(--space-lg) !important;
}

.blog-title {
    color: var(--primary-navy) !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-md) !important;
}

.blog-excerpt {
    color: var(--text-secondary) !important;
    margin-bottom: var(--space-lg) !important;
}

.blog-meta {
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
    margin-bottom: var(--space-md) !important;
}

/* Fix statistics section */
.stats-section {
    background: var(--gradient-primary) !important;
    color: white !important;
    padding: var(--space-2xl) 0 !important;
}

.stat-number {
    color: white !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
}

.stat-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix responsive grid issues */
.row {
    --bs-gutter-x: 1.5rem !important;
    --bs-gutter-y: 1.5rem !important;
}

[class*="col-"] {
    padding-left: calc(var(--bs-gutter-x) / 2) !important;
    padding-right: calc(var(--bs-gutter-x) / 2) !important;
    margin-bottom: var(--bs-gutter-y) !important;
}

/* Ensure proper spacing between sections */
section {
    margin-bottom: 0 !important;
    clear: both !important;
}

section + section {
    margin-top: 0 !important;
}

/* Fix any remaining invisible elements */
* {
    color: inherit;
}

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

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .container,
    .container-modern {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .section-header {
        margin-bottom: var(--space-xl) !important;
    }
    
    .blog-card,
    .product-card,
    .service-card {
        margin-bottom: var(--space-lg) !important;
    }
}