/**
 * Novixa — glassmorphism layer
 * Tunable tokens live on :root. Load this stylesheet LAST.
 */

:root {
  /* Brand mesh */
  --glass-brand-green: #8cb369;
  --glass-brand-green-deep: #72964e;
  --glass-brand-navy: #161c2d;
  --glass-brand-mist: #e8f0df;

  /* Glass recipe — panel tint raised from 0.12 for WCAG AA body text (#24272c) */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-bg-hover: rgba(255, 255, 255, 0.88);
  --glass-bg-solid: rgba(255, 255, 255, 0.92);
  --glass-bg-navbar: rgba(255, 255, 255, 0.82);
  --glass-blur: 14px;
  --glass-saturate: 160%;
  --glass-border: 1px solid rgba(255, 255, 255, 0.22);
  --glass-radius: 16px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-lift: translateY(-4px);
  --glass-ease: 250ms ease;

  /* Mesh / orbs */
  --glass-mesh: linear-gradient(
    135deg,
    var(--glass-brand-mist) 0%,
    #f5f7f2 28%,
    #dce9d0 52%,
    #c5d9b0 72%,
    #e7eef8 100%
  );
  --glass-orb-a: rgba(140, 179, 105, 0.45);
  --glass-orb-b: rgba(22, 28, 45, 0.18);
  --glass-orb-c: rgba(114, 150, 78, 0.35);
}

/* -------------------------------------------------------------------------
   Fixed mesh + orbs behind content
   ------------------------------------------------------------------------- */

body {
  background-color: transparent;
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 12% 18%, var(--glass-orb-a), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 12%, var(--glass-orb-c), transparent 68%),
    radial-gradient(ellipse 60% 50% at 70% 78%, var(--glass-orb-b), transparent 72%),
    var(--glass-mesh);
  background-color: var(--glass-brand-mist);
}

/* Let the mesh read through section fills without touching hero/footer/images */
body > section.section,
body > section.section.bg-light,
#service .features-absolute.bg-white {
  background-color: transparent !important;
  background-image: none !important;
}

/* Service card descriptions only — stronger contrast, layout unchanged */
#service .features.feature-primary p.text-muted {
  color: #5b6573 !important;
}

/* -------------------------------------------------------------------------
   Shared glass surface
   ------------------------------------------------------------------------- */

.glass-surface,
#navbar.navbar,
#service .features.feature-primary,
#pricing .engagement-card,
#project .card.project,
#blog .card.blog,
#contact .contact-form-card {
  background-color: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* Desktop blur — kept off dense/image surfaces to stay near ≤8 active blurs */
@media (min-width: 768px) {
  #navbar.navbar,
  #pricing .engagement-card,
  #blog .card.blog,
  #contact .contact-form-card {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }

  /* Service cards: solid glass tint (many visible at once — no blur) */
  #service .features.feature-primary {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--glass-bg-solid);
  }

  /* Industry tiles: chrome only — images stay untouched, no frosted fill over photos */
  #project .card.project {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: transparent;
    background-image: none;
  }
}

/* Mobile / narrow: solid tint, no backdrop-filter */
@media (max-width: 767.98px) {
  #navbar.navbar,
  #service .features.feature-primary,
  #pricing .engagement-card,
  #blog .card.blog,
  #contact .contact-form-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--glass-bg-solid);
  }

  #project .card.project {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: transparent;
  }
}

/* Unsupported backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #navbar.navbar,
  #service .features.feature-primary,
  #pricing .engagement-card,
  #blog .card.blog,
  #contact .contact-form-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--glass-bg-solid);
  }

  #project .card.project {
    background-color: transparent;
  }
}

/* -------------------------------------------------------------------------
   Surface-specific polish
   ------------------------------------------------------------------------- */

#navbar.navbar {
  background-color: var(--glass-bg-navbar) !important;
  border-radius: 0 0 var(--glass-radius) var(--glass-radius);
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

#navbar.navbar.nav-sticky,
#navbar.navbar:not(.nav-light) {
  background-color: var(--glass-bg-navbar) !important;
}

/* Desktop (and open mobile menu): charcoal links on light glass header */
#navbar.navbar .navbar-nav .nav-item .nav-link,
#navbar.navbar.nav-light .navbar-nav .nav-item .nav-link,
#navbar.navbar.nav-light.nav-sticky .navbar-nav .nav-item .nav-link {
  color: #263238 !important;
  transition: color 0.2s ease;
}

#navbar.navbar .navbar-nav .nav-item .nav-link:hover,
#navbar.navbar .navbar-nav .nav-item .nav-link:focus,
#navbar.navbar.nav-light .navbar-nav .nav-item .nav-link:hover,
#navbar.navbar.nav-light .navbar-nav .nav-item .nav-link:focus,
#navbar.navbar .navbar-nav .nav-item .nav-link:active,
#navbar.navbar .navbar-nav .nav-item .nav-link.active,
#navbar.navbar.nav-light .navbar-nav .nav-item .nav-link:active,
#navbar.navbar.nav-light .navbar-nav .nav-item .nav-link.active,
#navbar.navbar .navbar-nav .nav-item.active .nav-link,
#navbar.navbar.nav-light .navbar-nav .nav-item.active .nav-link {
  color: #8cb369 !important;
}

#pricing .engagement-card {
  background-image: none !important;
}

#blog .card.blog {
  background-image: none !important;
}

#blog .card.blog img,
#project .card.project img {
  /* Images remain opaque and unfiltered */
  filter: none;
  opacity: 1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#contact .contact-form-card {
  background-image: none !important;
}

/* -------------------------------------------------------------------------
   Hover lift (cards only — not navbar)
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  #service .features.feature-primary,
  #pricing .engagement-card,
  #project .card.project,
  #blog .card.blog,
  #contact .contact-form-card {
    transition:
      transform var(--glass-ease),
      background-color var(--glass-ease),
      box-shadow var(--glass-ease);
  }

  #service .features.feature-primary:hover,
  #pricing .engagement-card:hover,
  #project .card.project:hover,
  #blog .card.blog:hover,
  #contact .contact-form-card:hover {
    transform: var(--glass-lift);
    background-color: var(--glass-bg-hover);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), var(--glass-highlight);
  }

  #project .card.project:hover {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  #service .features.feature-primary,
  #pricing .engagement-card,
  #project .card.project,
  #blog .card.blog,
  #contact .contact-form-card {
    transition: none;
  }

  #service .features.feature-primary:hover,
  #pricing .engagement-card:hover,
  #project .card.project:hover,
  #blog .card.blog:hover,
  #contact .contact-form-card:hover {
    transform: none;
  }
}

/* Hero + footer intentionally untouched */

/* -------------------------------------------------------------------------
   Service detail pages: softer, off-white mesh (green as ambient only)
   ------------------------------------------------------------------------- */

body:has(.service-hero) {
  --glass-brand-mist: #f6f7f5;
  --glass-mesh: linear-gradient(
    160deg,
    #f8f9f7 0%,
    #f4f5f3 35%,
    #eef2ea 62%,
    #f5f6f8 100%
  );
  --glass-orb-a: rgba(140, 179, 105, 0.14);
  --glass-orb-b: rgba(22, 28, 45, 0.05);
  --glass-orb-c: rgba(114, 150, 78, 0.1);
}

body:has(.service-hero)::before {
  background-color: #f7f8f6;
}

body:has(.service-hero) > section.section {
  background-color: rgba(252, 252, 251, 0.72) !important;
}