/* ============================================================================
   Informed Software Solutions — Informed Investigations page styles
   ----------------------------------------------------------------------------
   Page-specific styles for product-investigations.html ONLY. Loaded AFTER the
   shared cascade (tokens.css → base.css → components.css → product.css → this).
   The page sets body.theme-investigations, so --product-accent (navy) and
   --product-accent-2 (teal spark) are resolved — consume the vars, never hex.
   Shared product.css is FROZEN — add Investigations-only rules here.

   Ridge metaphor: concentric rings expanding outward from a focal point —
   discovery, scope, following the thread. The teal spark (--accent-iv-spark)
   marks the discovered connection; used sparingly, never as a field of colour.
   ========================================================================== */

.theme-investigations {
  /* Local aliases so the inline row/ridge SVGs can read theme colours without
     hardcoding hex (raw values live only in tokens.css). */
  --iv-spark: var(--accent-iv-spark);
  --iv-line: rgba(143, 168, 194, 0.22); /* navy-300 hairline on dark vignettes */
}

/* ===========================================================================
   HERO — ridge motif behind the UI panel
   (Breadcrumb is now the standard 3-level trail — no back-link to style.
   The "Visit site ↗ coming soon" affordance is unified in product.css.)
   =========================================================================== */

/* Ridge slot: let the concentric rings bleed beyond the visual card and sit
   BEHIND the raised UI panel. The slot is absolutely positioned (inset:0) by
   product.css; we scale the drawing out so the outer rings frame the mock. */
.theme-investigations .product-hero__ridge {
  inset: -14% -20% -14% -24%;
  /* On the navy void the IV rings (raw accent is navy) must read as a luminous
     ridge-line object — mix toward navy-300 so the drawn stroke END-STATE is
     clearly visible. The teal spark threads/nodes carry the identity glint. */
  color: color-mix(in srgb, var(--product-accent) 30%, var(--navy-300));
}

.theme-investigations .product-hero__ridge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The rings inherit `currentColor` (the muted navy set above). The discovered
   thread + spark nodes are tinted with the teal spark via dedicated classes
   (no brittle attribute selectors). The spark is used sparingly — only the
   single followed thread and the two focal/discovered nodes carry it. */
.theme-investigations .iv-ridge__thread {
  stroke: var(--accent-iv-spark);
}

.theme-investigations .iv-ridge__spark {
  fill: var(--accent-iv-spark);
  stroke: none;
}

.theme-investigations .iv-ridge__spark-ring {
  stroke: var(--accent-iv-spark);
}

/* Soft glow on the discovered connection only (focal thread + spark nodes). */
.theme-investigations .iv-ridge__thread,
.theme-investigations .iv-ridge__spark,
.theme-investigations .iv-ridge__spark-ring {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-iv-spark) 55%, transparent));
}

/* ===========================================================================
   FEATURE CARDS — Investigations accent flourishes
   The mono index sits above the title; give the icon + index a tighter rhythm
   and let the spark tint the index numeral as a quiet forensic glint.
   =========================================================================== */
.theme-investigations .feature-card {
  /* a faint accent rule appears on the left as the card lifts */
  overflow: hidden;
}

.theme-investigations .feature-card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--product-accent),
    var(--accent-iv-spark));
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: transform var(--dur-med) var(--ease-out);
}

.theme-investigations .feature-card:hover::after,
.theme-investigations .feature-card:focus-within::after {
  transform: scaleY(1);
}

/* ===========================================================================
   FEATURE-ROW VIGNETTES — the inline SVG "mini panels" on the media side.
   They are dark (navy void) cards that echo the product UI mock at small size.
   product.css already styles .feature-row__media (radius, border, shadow);
   here we just constrain proportion and tidy the embedded svg.
   =========================================================================== */
.theme-investigations .iv-vignette {
  background-color: var(--navy-900);
  border-color: rgba(143, 168, 194, 0.22);
}

.theme-investigations .iv-vignette svg {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
}

/* ===========================================================================
   CTA BAND — dark navy moment. The page is NOT .theme-operations, so the
   shared .btn-ghost reads as navy-on-navy here. Re-tone the ghost + primary
   for the dark band. (product.css already accents .product-cta .btn-primary
   with --product-accent; we only need the ghost + a brighter primary text.)
   =========================================================================== */
.theme-investigations .product-cta .btn-ghost {
  color: var(--paper);
  border-color: rgba(143, 168, 194, 0.45);
  background-color: transparent;
}

.theme-investigations .product-cta .btn-ghost:hover {
  color: var(--accent-iv-spark);
  border-color: var(--accent-iv-spark);
  background-color: color-mix(in srgb, var(--accent-iv-spark) 10%, transparent);
}

/* The product accent (navy) on the navy band would be low-contrast; lift the
   primary fill so "Request a demo" stays legible on the dark CTA. */
.theme-investigations .product-cta .btn-primary {
  background-color: var(--accent-iv-spark);
  border-color: var(--accent-iv-spark);
  color: var(--navy-900);
}

.theme-investigations .product-cta .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-iv-spark) 82%, white);
  border-color: color-mix(in srgb, var(--accent-iv-spark) 82%, white);
  color: var(--navy-900);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--accent-iv-spark) 42%, transparent);
}

/* CTA kicker: shared product.css colours it beacon; nudge to the spark so the
   Investigations identity carries through to the final dark moment. */
.theme-investigations .product-cta__kicker {
  color: var(--accent-iv-spark);
}

.theme-investigations .product-cta__kicker.kicker--dot::before {
  background-color: var(--accent-iv-spark);
}

/* ===========================================================================
   RESPONSIVE — the ridge gets a touch more presence at desktop where the hero
   splits two-up and the visual has room to breathe.
   =========================================================================== */
@media (min-width: 900px) {
  .theme-investigations .product-hero__ridge {
    inset: -18% -26% -18% -30%;
  }
}

/* Smallest screens: rein the ridge bleed in so it never causes overflow beyond
   the visual column (the hero is single-column here). */
@media (max-width: 899.98px) {
  .theme-investigations .product-hero__ridge {
    inset: -8% -10%;
    opacity: 0.85;
  }
}

/* ---------------------------------------------------------------------------
   REDUCED-MOTION / NO-MOTION — parity with product-ims.css. The ridge spark
   glows (drop-shadow on the discovered thread + spark nodes) are decorative;
   drop the filters so nothing implies motion that won't play.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .theme-investigations .iv-ridge__thread,
  .theme-investigations .iv-ridge__spark,
  .theme-investigations .iv-ridge__spark-ring {
    filter: none;
  }
}