/*
 * dual-accent.css — Tari Electra
 * Wires dark-green (#0B5F2A) and lime-green (#4DFF88) together
 * across every shared UI component sitewide.
 *
 * Rule: dark-green = structure & primary actions
 *       lime-green  = energy, highlights, active states, CTAs
 */

/* ── Scroll-progress bar ────────────────────────────────────────── */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #0B5F2A 0%, #4DFF88 100%);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ── Global section-header centring ────────────────────────────── */
/*
 * Targets every section heading block sitewide.
 * Pattern used throughout: .section-badge followed by h2 inside a .page-shell child div.
 * The hero h1 is excluded because it sits inside .max-w-3xl without .section-badge.
 */
.section-padding .page-shell > div > .section-badge,
.section-padding .page-shell > div.fade-in-on-scroll > .section-badge,
.section-padding .page-shell > .fade-in-on-scroll > .section-badge {
    display: inline-flex !important; /* keeps badge width to content */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Centre the wrapper div that holds badge + heading */
.section-padding .page-shell > div.fade-in-on-scroll,
.section-padding .page-shell > div > div.fade-in-on-scroll {
    text-align: center !important;
}

/* Ensure h2/h3 inside those wrappers follow suit */
.section-padding .page-shell .section-badge ~ h2,
.section-padding .page-shell .section-badge ~ h3 {
    text-align: center !important;
}

/* Also catch the mb-12 header blocks used on most sections */
.section-padding .page-shell > div[class*="mb-"] .section-badge,
.section-padding .page-shell > div[class*="mb-"] h2 {
    text-align: center !important;
}
.section-padding .page-shell > div[class*="mb-"] {
    text-align: center !important;
}

/* ── CSS custom properties (extend what header.php already sets) ─ */
:root {
    --lime:       #4DFF88;
    --lime-dim:   rgba(77,255,136,0.12);
    --lime-glow:  rgba(77,255,136,0.25);
    --dg:         #0B5F2A;
    --dg-dim:     rgba(11,95,42,0.08);
    --dg-border:  rgba(11,95,42,0.18);
}

/* ── Section badge ──────────────────────────────────────────────── */
.section-badge {
    background: var(--dg-dim) !important;
    border-left: 3px solid var(--lime) !important;
    color: var(--dg) !important;
}

/* ── Gradient helper classes ────────────────────────────────────── */
.tari-gradient {
    background: linear-gradient(135deg, var(--dg) 0%, #0E141B 60%, var(--dg) 100%);
}
.tari-gradient-lime {
    background: linear-gradient(135deg, var(--dg) 0%, var(--lime) 100%);
}
.tari-stripe-lime {
    border-left: 3px solid var(--lime) !important;
}
.tari-stripe-dg {
    border-left: 3px solid var(--dg) !important;
}

/* ── Enterprise card — lime hover accent ────────────────────────── */
.enterprise-card:hover {
    border-color: var(--lime) !important;
    box-shadow: 0 8px 28px var(--lime-glow), 0 2px 8px var(--dg-dim) !important;
}

/* ── Stat / KPI numbers — lime ──────────────────────────────────── */
[data-count],
.kpi-value {
    color: var(--lime) !important;
    text-shadow: 0 0 24px var(--lime-glow);
}

/* ── Step number boxes — alternate dark-green / lime ────────────── */
/*  01, 03 → dark green  |  02, 04 → lime */
.step-num-dg {
    background: var(--dg) !important;
    color: #fff !important;
}
.step-num-lime {
    background: var(--lime) !important;
    color: var(--dg) !important;
}

/* ── "Get Started" / lime CTA buttons ─ enforced sitewide ──────── */
.btn-lime,
a.btn-lime {
    background: var(--lime) !important;
    color: #0E141B !important;
    font-weight: 900 !important;
}
.btn-lime:hover,
a.btn-lime:hover {
    background: #3de878 !important;
    box-shadow: 0 6px 20px var(--lime-glow) !important;
    transform: translateY(-1px) !important;
}

/* ── Primary (dark-green) button hover → lime glow ─────────────── */
.btn-enterprise-primary:hover,
a[class*="bg-[#0B5F2A]"]:hover {
    box-shadow: 0 6px 20px var(--lime-glow) !important;
}

/* ── Outline buttons — lime border on hover ─────────────────────── */
a[class*="border-[#0B5F2A]"]:hover {
    box-shadow: 0 0 0 2px var(--lime-glow) !important;
}

/* ── Section headings — accent word already uses #0B5F2A in HTML;
       this makes the inline green spans glow slightly on scroll ─── */
h2 span[class*="text-[#0B5F2A]"],
h1 span[class*="text-[#0B5F2A]"] {
    background: linear-gradient(90deg, var(--dg), var(--lime));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Marquee ticker — icon strokes get lime tint ───────────────── */
.marquee-item svg {
    color: var(--lime) !important;
    stroke: var(--lime) !important;
}
.marquee-item {
    color: rgba(255,255,255,0.85) !important;
}

/* ── Trust bar pills ────────────────────────────────────────────── */
.trust-pill-dot {
    background: var(--lime) !important;
}

/* ── Pillar / feature cards — every 2nd icon box gets lime ──────── */
.pillar-icon-lime {
    background: var(--lime) !important;
}
.pillar-icon-lime svg {
    color: var(--dg) !important;
}

/* ── Testimonial quote mark ─────────────────────────────────────── */
.testimonial-quote {
    background: linear-gradient(135deg, var(--dg), var(--lime));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Timeline gradient line ─────────────────────────────────────── */
.timeline-line {
    background: linear-gradient(to bottom, var(--dg), var(--lime)) !important;
}
.timeline-dot {
    background: var(--lime) !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 3px var(--dg) !important;
}

/* ── Navbar — active link & CTA ─────────────────────────────────── */
#main-header a.nav-active,
#main-header a[aria-current="page"] {
    color: var(--lime) !important;
    border-bottom: 2px solid var(--lime) !important;
}
/* Nav CTA gets lime on hover */
#main-header a[class*="bg-[#0B5F2A]"]:hover {
    background: var(--lime) !important;
    color: #0E141B !important;
}

/* ── Footer contact icons ────────────────────────────────────────── */
footer svg,
.site-footer svg {
    color: var(--lime) !important;
}

/* ── Progress / stats pill divider line ─────────────────────────── */
.stat-divider {
    border-color: var(--lime) !important;
    opacity: 0.3;
}

/* ── Loading screen pulse — use lime glow ───────────────────────── */
@keyframes loaderPulse {
    from { opacity: 0.7;  transform: scale(0.96); filter: drop-shadow(0 0 0px var(--lime)); }
    to   { opacity: 1;    transform: scale(1);    filter: drop-shadow(0 0 16px var(--lime-glow)); }
}

/* ── "Get Started" CTA in How It Works section ──────────────────── */
/* Already has the right inline classes; add glow on hover */
a[href*="free-estimate"]:hover {
    box-shadow: 0 8px 28px var(--lime-glow) !important;
}

/* ── Acceptance / "Accepted" block in terms ─────────────────────── */
.acceptance-check {
    background: var(--lime) !important;
}
.acceptance-check svg {
    color: #0E141B !important;
}

/* ── Dual-accent divider bar ────────────────────────────────────── */
.tari-divider {
    height: 3px;
    background: linear-gradient(90deg, var(--dg) 0%, var(--lime) 50%, var(--dg) 100%);
    border: none;
    margin: 0;
}

/* ── Step CTA row — lime bar above "Get Started" ────────────────── */
.step-cta-section::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--lime), transparent);
    margin-bottom: 2rem;
}

/* ── Input focus / form elements ────────────────────────────────── */
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--lime) !important;
    border-color: var(--lime) !important;
}

/* ── Scrollbar (webkit) — subtle brand colours ───────────────────── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: var(--dg);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--lime);
}

/* ── Pulsing lime dot used in hero badge / nav ──────────────────── */
@keyframes limePulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 var(--lime-glow); }
    50%       { opacity: 0.8; box-shadow: 0 0 0 6px transparent; }
}
.lime-dot {
    background: var(--lime) !important;
    animation: limePulse 2s ease-in-out infinite;
}

/* ── Section number badges on terms / structured pages ──────────── */
.section-num-badge {
    background: var(--lime) !important;
    color: var(--dg) !important;
    font-weight: 900;
}

/* ── Hover shimmer on dark backgrounds ──────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
.bg-\[#0E141B\] a:hover,
.bg-dark a:hover {
    color: var(--lime) !important;
}

/* ── Responsive: keep lime readable on all viewports ────────────── */
@media (prefers-color-scheme: dark) {
    .section-badge {
        background: rgba(77,255,136,0.08) !important;
        color: var(--lime) !important;
    }
}