/* Solution Pages - Theme Override to Match Homepage */

:root {
    /* Override any old gradient CSS variables */
    --gradient-hero: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
    --gradient-subtle: #F9FAFB;
    --gradient-accent: linear-gradient(135deg, #1aa4be 0%, #158499 100%);
    --primary-teal: #1aa4be;
}

/* Hero Section */
#solution-hero,
section#solution-hero,
section[id="solution-hero"] {
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%) !important;
    background-color: #F9FAFB !important;
    padding-top: 120px !important;
    padding-bottom: 80px !important;
}

#solution-hero h1,
#solution-hero .display-4,
#solution-hero .gradient-text,
section#solution-hero h1,
section#solution-hero .display-4 {
    color: #111827 !important;
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: #111827 !important;
    -webkit-background-clip: text !important;
    background-clip: border-box !important;
}

#solution-hero .lead,
#solution-hero p,
section#solution-hero .lead,
section#solution-hero p {
    color: #4B5563 !important;
}

#solution-hero .solution-hero-image {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px;
    box-shadow: var(--shadow-card) !important;
}

#solution-hero .solution-hero-image i {
    color: var(--primary-blue) !important;
}

/* Buttons */
.btn-accent,
a.btn-accent {
    background: #1aa4be !important;
    background-color: #1aa4be !important;
    color: #ffffff !important;
    border: none !important;
    border-color: #1aa4be !important;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(26, 164, 190, 0.25) !important;
}

.btn-accent:hover,
a.btn-accent:hover {
    background: #158499 !important;
    background-color: #158499 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 164, 190, 0.35) !important;
}

.btn-outline-light,
a.btn-outline-light {
    background: transparent !important;
    background-color: transparent !important;
    color: #1aa4be !important;
    border: 2px solid #1aa4be !important;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-light:hover,
a.btn-outline-light:hover {
    background: #1aa4be !important;
    background-color: #1aa4be !important;
    color: #ffffff !important;
}

/* White buttons in CTA */
#cta .btn-light,
#cta a.btn-light {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1aa4be !important;
    border: none !important;
}

#cta .btn-outline-light,
#cta a.btn-outline-light {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

#cta .btn-outline-light:hover,
#cta a.btn-outline-light:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1aa4be !important;
}

/* Overview Section */
#overview {
    background: var(--bg-white) !important;
}

#overview .section-title {
    color: var(--text-primary) !important;
}

#overview .text-secondary {
    color: var(--text-secondary) !important;
}

/* Feature Cards */
.feature-card {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover) !important;
    border-color: var(--primary-blue) !important;
}

.feature-card h4 {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.feature-card p {
    color: var(--text-secondary) !important;
}

.feature-card i,
.text-primary-teal {
    color: var(--primary-blue) !important;
}

/* Features Section */
#features {
    background: var(--bg-gray-50) !important;
}

#features .section-title {
    color: var(--text-primary) !important;
}

#features .text-secondary {
    color: var(--text-secondary) !important;
}

/* Glass Effect Override */
.glass-effect {
    background: var(--bg-white) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--border-light) !important;
}

/* Benefits Section */
#benefits {
    background: var(--bg-white) !important;
}

#benefits .section-title {
    color: var(--text-primary) !important;
}

/* Technical Specs */
#specs {
    background: var(--bg-gray-50) !important;
}

#specs .section-title {
    color: var(--text-primary) !important;
}

/* Use Cases */
#use-cases {
    background: var(--bg-white) !important;
}

#use-cases .section-title {
    color: var(--text-primary) !important;
}

/* CTA Section */
#cta {
    background: var(--bg-gray-50) !important;
}

#cta .section-title {
    color: var(--text-primary) !important;
}

#cta .text-secondary {
    color: var(--text-secondary) !important;
}

/* List Items */
ul li {
    color: var(--text-secondary) !important;
}

/* Section Padding */
.padding-large {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Icon Colors */
.bi,
i[class*="bi-"],
i.bi {
    color: #1aa4be !important;
}

/* Checkmark Icons */
.bi-check-circle-fill,
i.bi-check-circle-fill {
    color: #1aa4be !important;
}

/* Arrow Icons */
.bi-arrow-right,
i.bi-arrow-right {
    color: #1aa4be !important;
}

/* Override text-primary-teal class */
.text-primary-teal,
span.text-primary-teal,
i.text-primary-teal {
    color: #1aa4be !important;
}

/* Card Hover Effects */
.card {
    border: 1px solid var(--border-light) !important;
    background: var(--bg-white) !important;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover) !important;
}

/* Fix gradient text */
.gradient-text {
    background: none !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
}

/* Section Headers */
.section-title,
h2.section-title {
    color: #111827 !important;
    font-size: 2.5rem;
    font-weight: 700;
}

/* All headings should be dark */
h1, h2, h3, h4, h5, h6 {
    color: #111827 !important;
}

/* Paragraphs should be readable */
p {
    color: #4B5563 !important;
}

/* List items */
li {
    color: #4B5563 !important;
}

/* Exception: White text in CTA and footer */
#cta h1, #cta h2, #cta h3, #cta h4, #cta h5, #cta h6,
#cta p, #cta li,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer p, #footer li,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer li {
    color: #ffffff !important;
}

/* Remove old gradient backgrounds - override inline styles */
section[style*="gradient-hero"],
section[style*="var(--gradient-hero)"],
#solution-hero[style*="gradient"] {
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%) !important;
    background-color: #F9FAFB !important;
}

section[style*="gradient-subtle"],
section[style*="var(--gradient-subtle)"] {
    background: #F9FAFB !important;
    background-color: #F9FAFB !important;
}

section[style*="gradient-accent"],
section[style*="var(--gradient-accent)"],
#cta[style*="gradient"] {
    background: linear-gradient(135deg, #1aa4be 0%, #158499 100%) !important;
    background-color: #1aa4be !important;
}

/* CTA Section specific overrides */
#cta,
section#cta {
    background: linear-gradient(135deg, #1aa4be 0%, #158499 100%) !important;
    background-color: #1aa4be !important;
}

#cta h1, #cta h2, #cta h3, #cta h4,
section#cta h1, section#cta h2, section#cta h3, section#cta h4 {
    color: #ffffff !important;
}

#cta p, #cta .lead,
section#cta p, section#cta .lead {
    color: #ffffff !important;
}

/* Alternating section backgrounds - except for those with specific IDs */
section:not(#solution-hero):not(#cta):not(#footer):nth-child(even) {
    background: #F9FAFB !important;
}

section:not(#solution-hero):not(#cta):not(#footer):nth-child(odd) {
    background: #FFFFFF !important;
}

/* Footer on solution pages */
footer {
    background: var(--text-primary) !important;
}

/* Responsive */
@media (max-width: 768px) {
    #solution-hero {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }

    .section-title {
        font-size: 2rem;
    }

    .padding-large {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}