/*
 * Designbyklein funnel components.
 * Shared styles for the reusable sales-funnel Blade components:
 * x-cta-band, x-service-card, x-case-study-card, x-related-work,
 * x-case-study-intro and x-tech-details.
 *
 * Layout/spacing is handled by Bootstrap 5 utilities; this file is theme only.
 */

:root {
    --dbk-funnel-surface: #1f2937;
    --dbk-funnel-surface-2: #374151;
    --dbk-funnel-border: rgba(255, 255, 255, 0.10);
    --dbk-funnel-text: #f9fafb;
    --dbk-funnel-text-muted: #d1d5db;
    --dbk-funnel-text-meta: #9ca3af;
    --dbk-funnel-accent: #fe8d00;
}

/* ---------------------------------------------------------------- Hero */

.funnel-hero {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.92) 0%, rgba(31, 41, 55, 0.92) 100%);
    border: 1px solid var(--dbk-funnel-border);
    border-left: 4px solid var(--dbk-funnel-accent);
    border-radius: 12px;
}

.funnel-hero__title {
    color: var(--dbk-funnel-text);
    line-height: 1.15;
}

.funnel-hero__lead {
    color: var(--dbk-funnel-text-muted);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 62ch;
}

.funnel-hero__support {
    color: var(--dbk-funnel-text-muted);
    max-width: 68ch;
}

/* ------------------------------------------------------------ Section headings */

.funnel-section__intro {
    color: var(--dbk-funnel-text-muted);
    max-width: 72ch;
}

/* ------------------------------------------------------------- Service cards */

.service-card-dbk__points {
    color: var(--dbk-funnel-text-muted);
}

/* ---------------------------------------------------------- Case study cards */

.case-study-card {
    background: var(--dbk-funnel-surface);
    border: 1px solid var(--dbk-funnel-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.case-study-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(254, 141, 0, 0.45);
}

.case-study-card__title,
.case-study-card__title a {
    color: var(--dbk-funnel-text);
    text-decoration: none;
    line-height: 1.35;
}

.case-study-card__title a:hover,
.case-study-card__title a:focus {
    color: var(--dbk-funnel-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.case-study-card__outcome {
    color: var(--dbk-funnel-text-muted);
    line-height: 1.55;
}

.case-study-card__tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(254, 141, 0, 0.45);
    border-radius: 999px;
    color: var(--dbk-funnel-accent);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.case-study-card__meta {
    color: var(--dbk-funnel-text-meta);
}

.case-study-card__footer {
    border-color: var(--dbk-funnel-border) !important;
}

/* -------------------------------------------------------------- Filter bar */

.case-study-filters .btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--dbk-funnel-text-muted);
}

.case-study-filters .btn:hover,
.case-study-filters .btn:focus {
    border-color: var(--dbk-funnel-accent);
    color: var(--dbk-funnel-text);
}

.case-study-filters .btn.is-active {
    background-color: var(--dbk-funnel-accent);
    border-color: var(--dbk-funnel-accent);
    color: #fff;
}

/* ---------------------------------------------------------------- CTA band */

.cta-band .btn-outline-light:hover,
.cta-band .btn-outline-light:focus {
    color: #111827;
}

/* ------------------------------------------------------------ Tech details */

.tech-details {
    border-top: 1px solid var(--dbk-funnel-border);
    padding-top: 1.5rem;
}

.tech-details__header small {
    color: var(--dbk-funnel-text-meta) !important;
}

/* --------------------------------------------------------- Symptom / problem list */

.symptom-list {
    background: var(--dbk-funnel-surface);
    border: 1px solid var(--dbk-funnel-border);
    border-radius: 12px;
}

.symptom-list li {
    color: var(--dbk-funnel-text-muted);
    line-height: 1.5;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 767.98px) {
    .funnel-hero__title {
        font-size: 1.9rem;
    }

    .funnel-hero__lead {
        font-size: 1.05rem;
    }

    .case-study-card__title {
        font-size: 1.05rem;
    }

    .cta-band .card-body {
        padding: 1.25rem !important;
    }
}

@media (max-width: 575.98px) {
    .case-study-card__footer .btn,
    .cta-band .btn {
        min-height: 2.75rem;
    }
}

/* ------------------------------------------------ Brand outline button + borders
 * `.btn-outline-orange`, `.border-yellow` and `.border-red` are used across the
 * service and case study pages but Bootstrap only ships outline/border variants for
 * its own theme colours, so they are defined here to match the brand palette.
 */

.btn-outline-orange {
    --bs-btn-color: var(--text-orange, #fe8d00);
    --bs-btn-border-color: var(--text-orange, #fe8d00);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--text-orange, #fe8d00);
    --bs-btn-hover-border-color: var(--text-orange, #fe8d00);
    --bs-btn-focus-shadow-rgb: 254, 141, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--text-red, #f04300);
    --bs-btn-active-border-color: var(--text-red, #f04300);
    --bs-btn-disabled-color: var(--text-orange, #fe8d00);
    --bs-btn-disabled-border-color: var(--text-orange, #fe8d00);
    --bs-btn-bg: transparent;
    --bs-gradient: none;
    color: var(--bs-btn-color);
    border: 2px solid var(--bs-btn-border-color);
    background-color: transparent;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.border-yellow {
    border-color: var(--text-yellow, #feb300) !important;
    border-width: 2px;
}

.border-red {
    border-color: var(--text-red, #f04300) !important;
    border-width: 2px;
}

/* -------------------------------------------------- In-body link discoverability
 * The global `p a` rule renders body links white with no underline, which makes
 * them hard to spot. Brand-coloured links inside copy get an underline back.
 */

p a.text-orange,
li a.text-orange,
span a.text-orange,
.funnel-section__intro a,
.symptom-list a {
    color: var(--text-orange, #fe8d00);
    text-decoration: underline;
    text-underline-offset: 3px;
}

p a.text-orange:hover,
li a.text-orange:hover,
span a.text-orange:hover,
.funnel-section__intro a:hover,
.symptom-list a:hover {
    color: var(--text-yellow, #feb300);
}