/* ==========================================================================
   Fusion - locked futuristic theme inspired by helionenergy.com (loaded
   AFTER vanilla). Cool off-white page, deep-navy ink, electric-blue accent,
   near-black sections. The navbar is a transparent fixed header carrying a
   dark-navy rounded pill of uppercase Inter links with a slide-up hover.
   Palette lifted from the live site:
     bg #eef2f5  ink #1c2b44  pill #192738  soft-blue #6290cc  black #0f0f15
   ========================================================================== */

.theme-fusion {
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --color-accent: #0063c6;          /* electric blue (white text passes) */
    --color-accent-hover: #00509e;
    --fz-blue: #6290cc;               /* Helion soft blue (decorative) */
    --fz-pill: #192738;               /* the dark navy nav pill */

    --color-bg: #eef2f5;
    --color-surface: #ffffff;
    --color-surface-dark: #0f0f15;     /* near-black sections (footer/stats) */
    --color-border: #dde3ea;

    --color-text: #1c2b44;
    --color-text-secondary: #5b6b82;
    --color-text-muted: #2f3e57;
    --color-text-on-dark: #eef2f5;
    --color-text-on-dark-muted: #9fb0c4;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
}

body.theme-fusion { background: var(--color-bg); }

/* Tight, technical type. */
.theme-fusion h1,
.theme-fusion h2,
.theme-fusion h3,
.theme-fusion h4 { font-weight: 700; letter-spacing: -0.022em; }

/* ===== NAVBAR (inherited vanilla markup, Fusion styling) =====
   Transparent fixed bar + a dark-navy rounded "pill" around the links, with
   uppercase Inter links and a growing soft-blue underline on hover. */
.theme-fusion .c-nav {
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.theme-fusion .c-nav__logo { color: var(--color-text); font-weight: 700; letter-spacing: -0.02em; }

/* The links list becomes the dark pill (hidden on mobile by vanilla). */
.theme-fusion .c-nav__links {
    background: var(--fz-pill);
    border-radius: var(--radius-md);
    padding: 11px 22px;
    gap: 30px;
}
.theme-fusion .c-nav__link {
    position: relative;
    color: var(--color-text-on-dark);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.25s;
}
.theme-fusion .c-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1.5px;
    background: var(--fz-blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}
.theme-fusion .c-nav__link:hover { opacity: 1; color: #fff; }
.theme-fusion .c-nav__link:hover::after { transform: scaleX(1); }

/* CTA menu item: an electric-blue chip inside the pill (no underline). */
.theme-fusion .c-nav__link--button {
    background: var(--color-accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
}
.theme-fusion .c-nav__link--button::after { display: none; }
.theme-fusion .c-nav__link--button:hover { background: var(--color-accent-hover); color: #fff; }

/* Hamburger (mobile) in navy ink on the light page. */
.theme-fusion .c-nav__hamburger span { background: var(--color-text); }
.theme-fusion .c-nav__mobile { background: rgba(238, 242, 245, 0.98); }
.theme-fusion .c-nav__mobile a {
    color: var(--color-text);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom-color: var(--color-border);
}

/* ===== BUTTONS: electric blue, white label ===== */
.theme-fusion .btn-primary,
.theme-fusion .btn--primary { color: #fff; }
.theme-fusion .btn-primary:hover,
.theme-fusion .btn--primary:hover { background: var(--color-accent-hover); }

/* Eyebrows: electric blue, uppercase. */
.theme-fusion .c-hero__label,
.theme-fusion .c-section-head__label,
.theme-fusion .c-services__label,
.theme-fusion .c-label { color: var(--color-accent); letter-spacing: 0.14em; }
.theme-fusion .c-hero--image .c-hero__label { color: rgba(238, 242, 245, 0.92); }

/* White cards on the cool page; blue hover edge. */
.theme-fusion .c-service-card,
.theme-fusion .c-pricing-index__card,
.theme-fusion .oh-dept { background: var(--color-surface); }
.theme-fusion .c-service-card:hover { border-color: var(--color-accent); box-shadow: 0 16px 40px rgba(28, 43, 68, 0.12); }
.theme-fusion .c-pricing-index__card:hover { border-color: var(--color-accent); }
.theme-fusion .c-services,
.theme-fusion .c-tabs { background: var(--color-surface); }

/* Near-black bands (footer/stats/quote-cta). */
.theme-fusion .c-footer,
.theme-fusion .c-stats,
.theme-fusion .c-quote-cta { background-color: var(--color-surface-dark); }
.theme-fusion .c-quote-cta .btn-primary,
.theme-fusion .c-quote-cta .btn--primary { background: var(--color-accent); color: #fff; }
.theme-fusion .c-quote-cta .btn-primary:hover,
.theme-fusion .c-quote-cta .btn--primary:hover { background: var(--color-accent-hover); }

/* Blue focus ring. */
.theme-fusion .field input:focus,
.theme-fusion .field select:focus,
.theme-fusion .field textarea:focus,
.theme-fusion .bk-search input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 99, 198, 0.18); }
.theme-fusion .slot-btn.is-selected { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ===== HERO: dark navy→black gradient "banner", electric-blue CTA ===== */
.theme-fusion .c-hero--banner {
    background: linear-gradient(120deg, var(--color-text) 0%, var(--color-surface-dark) 100%);
    color: #fff;
}
.theme-fusion .c-hero--banner .c-hero__title,
.theme-fusion .c-hero--banner .c-hero__desc { color: #fff; }
.theme-fusion .c-hero--banner .c-hero__label { color: var(--fz-blue); }
.theme-fusion .c-hero--banner .btn-primary,
.theme-fusion .c-hero--banner .btn--primary { background: var(--color-accent); color: #fff; }
.theme-fusion .c-hero--banner .btn-primary:hover,
.theme-fusion .c-hero--banner .btn--primary:hover { background: var(--color-accent-hover); }