/*
  theme-bridge.css

  Purpose:
  The MVP template has an existing "site.css" (dark, compact). The CVG Neuron
  Universal Theme is a larger design system with its own layout primitives.

  This bridge file lets us gradually adopt the theme without breaking existing
  MVP pages:
  - Load CVG theme CSS variables + components
  - Keep the MVP's layout classes working
*/

@import url('/themes/cvg-neuron-universal/assets/css/cvg-main.css');
@import url('/themes/cvg-neuron-universal/assets/css/cvg-components.css');

/* Optional dark-mode layer (enabled by theme config, safe to include) */
@import url('/themes/cvg-neuron-universal/assets/css/cvg-dark-mode.css');

/* Map MVP UI classes -> theme fonts/colors (minimal) */
:root {
  /* Bridge MVP variables onto the live-site palette (navy + blue + green CTA) */
  --bg: var(--cvg-gray-50);
  --panel: var(--cvg-white);
  --card: var(--cvg-white);
  /* Slightly stronger defaults for readability */
  --text: var(--cvg-gray-950);
  --muted: var(--cvg-gray-700);

  /* Links + accents */
  --accent: var(--cvg-primary-light);
  --accent2: var(--cvg-accent);

  /* Buttons */
  --cvg-mvp-primary-start: var(--cvg-secondary);
  --cvg-mvp-primary-end: #059669;

  /* MVP bridge type scale (compact, content-first) */
  --cvg-mvp-font-size-sm: 0.95rem;
  --cvg-mvp-font-size-base: 1rem;
  --cvg-mvp-font-size-lg: 1.125rem;
  --cvg-mvp-font-size-xl: 1.55rem;
  --cvg-mvp-font-size-2xl: 1.9rem;
  --cvg-mvp-font-size-3xl: 2.25rem;
}

body {
  font-family: var(--cvg-font-sans);
}

/* Make the MVP page background match the live sites (light, airy) */
body {
  background: var(--bg);
  color: var(--text);
}

/* -------------------------------------------------------------------------
   Focus styles (unify between legacy MVP + CVG theme)
   - The theme includes a global outline; the MVP includes a box-shadow ring.
   - Prefer the ring for a modern, less-jumpy focus experience.
   ------------------------------------------------------------------------- */

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

/* -------------------------------------------------------------------------
   Typography polish
   ------------------------------------------------------------------------- */

.hero h1 {
  font-size: var(--cvg-mvp-font-size-3xl);
  letter-spacing: -0.02em;
}

.hero p {
  font-size: var(--cvg-mvp-font-size-base);
  color: rgba(15, 23, 42, 0.72);
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: var(--cvg-mvp-font-size-2xl);
  }
}

/* -------------------------------------------------------------------------
   Text visibility + contrast fixes for the MVP base styles
   The base site.css uses dark translucent backgrounds for nav/pills/etc.
   When we switch to the light theme bridge, those dark backgrounds can reduce
   contrast (dark text on dark background). These overrides keep the UI light
   and readable.
   ------------------------------------------------------------------------- */

.topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(26, 54, 93, 0.14);
}

#cvg-global-nav,
#cvg-info-strip {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(26, 54, 93, 0.14);
}

.cvg-header-cta,
.cvg-nav-toggle,
.nav-link,
.cvg-global-nav__link,
.cvg-global-nav__more-btn,
.cvg-info-strip__item {
  background: rgba(26, 54, 93, 0.06);
  border: 1px solid rgba(26, 54, 93, 0.16);
  color: var(--text);
}

/* Primary header nav: compact + more "product" feel */
.nav-link,
.cvg-nav-group__summary {
  font-size: var(--cvg-mvp-font-size-sm);
  font-weight: 700;
  padding: 9px 11px;
}

.cvg-nav-group {
  background: rgba(26, 54, 93, 0.05);
  border: 1px solid rgba(26, 54, 93, 0.14);
}

.cvg-nav-group__summary {
  gap: 8px;
}

.cvg-nav-group__summary::after {
  content: "▾";
  font-size: 0.9em;
  opacity: 0.75;
}

/* If a group is rendered as a normal link (single-link group), don't show the chevron */
.cvg-header__nav > .nav-link::after {
  content: none;
}

/* Dropdown panel contrast */
.cvg-nav-group__panel {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(26, 54, 93, 0.14);
}

.cvg-nav-group__panel .nav-link {
  background: rgba(26, 54, 93, 0.04);
  border: 1px solid rgba(26, 54, 93, 0.10);
  justify-content: flex-start;
}

.cvg-nav-group__panel .nav-link:hover {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.26);
}

.cvg-info-strip__item {
  color: rgba(15, 23, 42, 0.82);
}

.cvg-header-cta__sub {
  color: rgba(15, 23, 42, 0.62);
}

.nav-link.is-active,
.cvg-global-nav__link[aria-current="page"] {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14);
}

.pill {
  background: rgba(26, 54, 93, 0.06);
  border: 1px solid rgba(26, 54, 93, 0.14);
  color: rgba(15, 23, 42, 0.72);
}

/* Improve default MVP “hero” container to look like the live header blocks */
.hero {
  border-radius: 18px;
  border: 1px solid rgba(26, 54, 93, 0.12);
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.06), rgba(42, 82, 152, 0.06));
}

/* Primary buttons: green CTA (like cleargeo.tech/cvg-nexus.com) */
button, .button {
  border: 1px solid rgba(16, 185, 129, 0.24);
  background: linear-gradient(135deg, var(--cvg-mvp-primary-start), var(--cvg-mvp-primary-end));
  color: #062016;
}

.button.secondary,
button.secondary {
  background: rgba(26, 54, 93, 0.06);
  border: 1px solid rgba(26, 54, 93, 0.16);
  color: var(--text);
}

/* Cards should look like the live “panels” */
.card,
.product-card,
.feature,
.cart-bar {
  background: var(--card);
  border: 1px solid rgba(26, 54, 93, 0.12);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/* Footer contrast for light theme bridge */
.site-footer {
  background: rgba(15, 23, 42, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.site-footer .footer-title {
  color: rgba(255, 255, 255, 0.94);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.92);
}

.site-footer a:hover {
  color: var(--accent);
}

.site-footer .muted {
  color: rgba(255, 255, 255, 0.72);
}

/* Inputs: lighter */
input, select {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  border: 1px solid rgba(26, 54, 93, 0.18);
}

code, pre {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.10);
}