/* Odoo Implementation Services Page */

/* Hero Section - Override default gradient */
.section.hero--odoo {
    background: linear-gradient(135deg, #002b5c 0%, #001a3d 100%) !important;
}

.section.hero--odoo .hero__badge {
    color: #ffffff !important;
}

.section.hero--odoo .hero__title {
    color: #ffffff !important;
}

.section.hero--odoo .hero__subtitle {
    color: #ffffff !important;
}

.section.hero--odoo .hero__meta {
    color: #ffffff !important;
}

.section.hero--odoo .hero__meta__item {
    color: #ffffff !important;
}

.section.hero--odoo .hero__meta__item strong {
    color: #ffffff !important;
}

.section.hero--odoo .metric__value {
    color: #ffffff !important;
}

.section.hero--odoo .metric__label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Service Cards */
.service-card {
    transition: transform 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 43, 92, 0.15);
}

.service-card__header {
    background: linear-gradient(135deg, #002b5c 0%, #001a3d 100%);
    color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem 0.5rem 0 5rem 0;
}

.service-card__title {
    color: #ffffff;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.service-card__features {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0 375rem;
}

.service-card__features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-card__features-list li {
    margin-bottom: 0.75rem;
    padding-left: 2rem;
    position: relative;
}

.service-card__features-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
}

/* Metrics in Hero */
.metric {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.metric__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.metric__label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* AI Capabilities */
.ai-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.ai-capability-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid #002b5c;
}

.ai-capability-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 43, 92, 0.15);
}

.ai-capability-card__icon {
    color: #002b5c;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.ai-capability-card__title {
    color: #002b5c;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.ai-capability-card__description {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Use Cases */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.use-case-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.use-case-card__title {
    color: #002b5c;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.use-case-card__description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.use-case-card__benefits h4 {
    color: #333;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.use-case-card__benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.use-case-card__benefits li {
    padding: 0.25rem 0;
    color: #555;
}

.use-case-card__benefits li i {
    color: #10b981;
    margin-right: 0.5rem;
}

/* Comparison Table */
.comparison-table {
    background: #ffffff;
    border-radius: 0.5rem;
    overflow: hidden;
}

.comparison-table th {
    background: linear-gradient(135deg, #002b5c 0%, #001a3d 100%);
    color: #ffffff;
    font-weight: 600;
    border: none;
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.comparison-table td {
    padding: 1rem;
    vertical-align: middle;
}

.comparison-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.comparison-table tbody tr:hover {
    background: #f1f3f5;
}

.comparison-cell {
    font-size: 0.875rem;
    padding: 0.5rem;
}

.comparison-cell.highlight {
    font-weight: 600;
    color: #002b5c;
    background: rgba(0, 43, 92, 0.1);
    border-radius: 0.25rem;
}

/* Process Steps */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.process-step {
    background: #ffffff;
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1.5rem;
    position: relative;
}

.process-step::before {
    content: counter(step);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: #002b5c;
    color: #ffffff;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
}

.process-step__title {
    margin-left: 4rem;
    margin-bottom: 0.75rem;
    color: #333333;
}

.process-step__description {
    margin-left: 4rem;
    color: #666666;
    line-height: 1.6;
}

.process-step__duration {
    margin-left: 4rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #10b981;
}

.process-step__label {
    color: #999;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Results Cards */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.results-card {
    background: #ffffff;
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.results-card__title {
    color: #002b5c;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.results-card__list {
    list-style: none;
    padding: 0;
}

.results-card__list li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.results-card__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
}

/* Summary Grid */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.summary-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.summary-item__label {
    color: #002b5c;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.summary-item__text {
    color: #333333;
    line-height: 1.5;
}

/* Section Transitions */
.section {
    padding: 5rem 0;
}

.section--gray {
    background: #f8f9fa;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .process-steps {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .comparison-table-wrapper {
        overflow-x: auto;
    }
}

/* CTA Section - Brand blue gradient */
.section--cta {
    background: linear-gradient(135deg, #002b5c 0%, #001a3d 100%);
    color: #ffffff;
}

.section--cta .cta__title {
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
}

.section--cta .cta__subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

.section--cta .cta__features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.section--cta .cta__feature {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
}

.section--cta .cta__feature i {
    color: #10b981;
}

.section--cta .cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.section--cta .cta__buttons .btn--primary {
    background: #ffffff;
    color: #002b5c;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.section--cta .cta__buttons .btn--primary:hover {
    background: #f8f9fa;
}

.section--cta .cta__buttons .btn-outline-secondary {
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    background: transparent;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.section--cta .cta__buttons .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

/* ---- Force white headings on dark-gradient containers (override global h1/h2/h3 dark color) ---- */
.section--cta h1, .section--cta h2, .section--cta h3, .section--cta h4,
.section--cta .cta__title, .section--cta .cta__subtitle,
.pricing-card__header h1, .pricing-card__header h2, .pricing-card__header h3, .pricing-card__header h4,
.pricing-card__header .pricing-card__name, .pricing-card__header .pricing-card__price, .pricing-card__header .pricing-card__timeline,
.platform-card__header h1, .platform-card__header h2, .platform-card__header h3, .platform-card__header h4,
.platform-card__header .platform-card__name,
.service-card__header h1, .service-card__header h2, .service-card__header h3, .service-card__header h4,
.service-card__header .service-card__title,
.workflow-card__header h1, .workflow-card__header h2, .workflow-card__header h3, .workflow-card__header h4,
.integration-card__header h1, .integration-card__header h2, .integration-card__header h3, .integration-card__header h4,
.comparison-table th {
    color: #ffffff !important;
}

/* ==========================================================================
   /odoo-implementation: Hero CTA + anchor nav + best-fit + after-contact + FAQ
   ========================================================================== */

/* Hero CTA buttons (after metrics) */
.section.hero--odoo .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.section.hero--odoo .hero__cta .btn--primary {
    background: #ffffff;
    color: #002b5c;
    border: none;
    padding: 0.875rem 1.75rem;
    font-weight: 700;
    border-radius: 0.375rem;
    text-decoration: none;
    display: inline-block;
}
.section.hero--odoo .hero__cta .btn--primary:hover {
    background: #f8fafc;
}
.section.hero--odoo .hero__cta .btn-outline-light {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.6);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 0.375rem;
    text-decoration: none;
    display: inline-block;
}
.section.hero--odoo .hero__cta .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

/* Anchor navigation strip */
.oi-anchor-nav {
    background: #f8fafc;
    border-bottom: 1px solid #e7eef7;
    padding: 0.875rem 0;
    position: sticky;
    top: 75px;
    z-index: 90;
}
.oi-anchor-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    justify-content: center;
}
.oi-anchor-nav a {
    color: #002b5c;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.oi-anchor-nav a:hover {
    background: #e7eef7;
}

/* Best fit / Not a fit grid */
.oi-bestfit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .oi-bestfit-grid { grid-template-columns: 1fr; }
}
.oi-bestfit {
    padding: 1.75rem 1.75rem;
    border-radius: 8px;
    border: 1px solid #e7eef7;
    background: #ffffff;
}
.oi-bestfit--good {
    border-left: 4px solid #10b981;
    background: #f0fdf4;
}
.oi-bestfit--bad {
    border-left: 4px solid #c8102e;
    background: #fef2f2;
}
.oi-bestfit h3 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #002b5c;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.oi-bestfit--good h3 i { color: #10b981; }
.oi-bestfit--bad h3 i { color: #c8102e; }
.oi-bestfit ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.oi-bestfit li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: #1a2a3a;
    line-height: 1.55;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.oi-bestfit li:last-child { border-bottom: none; }
.oi-bestfit--good li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
}
.oi-bestfit--bad li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #c8102e;
    font-weight: 700;
}

/* What happens after you reach out */
.oi-after-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}
.oi-after-contact__item {
    background: #ffffff;
    border: 1px solid #e7eef7;
    border-top: 4px solid #002b5c;
    padding: 1.25rem 1.25rem;
    border-radius: 0 0 6px 6px;
}
.oi-after-contact__step {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c8102e;
    margin-bottom: 0.5rem;
}
.oi-after-contact__text {
    color: #1a2a3a;
    line-height: 1.55;
    font-size: 0.9375rem;
}

/* FAQ */
.oi-faq__item {
    border: 1px solid #e7eef7;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    background: #ffffff;
}
.oi-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    color: #1a2a3a;
    list-style: none;
    position: relative;
    padding-right: 2rem;
    font-size: 1rem;
}
.oi-faq__item summary::-webkit-details-marker { display: none; }
.oi-faq__item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #c8102e;
    line-height: 1;
}
.oi-faq__item[open] summary::after { content: '−'; }
.oi-faq__answer {
    margin-top: 0.75rem;
    color: #475569;
    line-height: 1.65;
}
.oi-faq__answer p:last-child { margin-bottom: 0; }
.oi-faq__answer a { color: #002b5c; text-decoration: underline; }

/* Fix for the process-step counter issue mentioned in review:
   The original CSS used `content: counter(step)` without `counter-reset` setup.
   The template renders the number directly in .process-step__number, so we don't
   need the ::before pseudo-element. Suppress the broken counter rule. */
.process-step::before {
    content: none !important;
}