/*
 * Coherix visual identity layer.
 *
 * Loaded AFTER each page's inline <style> block so these rules win the
 * cascade. Adds the coherence background image to body, makes the existing
 * white/light card surfaces semi-transparent with frosted-glass blur so the
 * image shows through.
 *
 * Scope: coherix.ca static site only. Does NOT touch CMCI engine, API,
 * Soren-OSS, calibration, or any backend code. Pure visual layer.
 *
 * Roll-back: remove the <link rel="stylesheet" href="coherix-bg.css"> tags
 * from each HTML <head> and the site reverts to its previous appearance.
 *
 * Date: 2026-05-17. Aligned with Coh dashboard DD-16-visual.
 */

/* Body: dark coherence image as fullscreen background. !important is needed
   to override the existing inline `body { background: var(--bg); }` rule. */
body {
  background-image: url("/coherix/assets/coherix-background.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-color: #0a0e1c !important;  /* dark fallback during image load */
}

/* Make the existing light surfaces semi-transparent so the image
   shows through them as a frosted-glass effect. We override the
   CSS variables that the inline styles use for surface colors. */
:root {
  --surface:   rgba(255, 255, 255, 0.85);
  --surface-2: rgba(255, 255, 255, 0.92);
}

/* Apply backdrop-blur to the existing major content containers. These
   selectors target classes already declared in the inline <style> blocks ;
   we are NOT introducing new HTML structure, only adding a frosted-glass
   filter to the existing white panels. */
.trust-bar-wrap,
.trust-bar,
.coh-invite-card,
.section,
.cmci-equation,
.state-indicator,
.layer-card,
.defect-card,
.regime-box,
.api-demo,
.product-card,
.mode-card,
.hero,
.histoire-text,
.timeline-item,
.window-diagram,
.api-demo-header,
.api-demo-body {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Reusable .page-panel utility class — same shape as the Coh dashboard's
   page-panel. Use this for any new element that should look like a
   frosted-glass card. */
.page-panel {
  background: rgba(255, 255, 255, 0.90);
  color: #111;
  border-radius: 18px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
}


/* ============================================================================
 * 3.H — Hero section override (index.html only).
 *
 * Operator request 2026-05-17 (post-3.G visual identity):
 *   1. Reduce vertical gap between "Talk to Coh" card and "Multiscale
 *      Coherence Intelligence" badge (was ~13.5rem combined padding).
 *   2. Wrap the hero content in a semi-transparent white card so it reads
 *      well over the dark coherence background image.
 *   3. Recolor the hero typography to navy (--accent-bright) for contrast
 *      against the white card.
 *   4. Make secondary buttons use navy outline + navy text (more readable
 *      than the previous Coherix-blue accent on white card).
 *
 * Scope: index.html hero only. Other pages and other sections unchanged.
 * Roll-back: delete this entire block; hero reverts to previous look.
 * ========================================================================= */

/* (1) Reduce vertical gap — Talk-to-Coh ↔ Multiscale Coherence Intelligence */
.coh-invite-wrap {
  padding-bottom: 0.5rem !important;
}
.hero {
  /* Tightens the previous 8rem top padding to 3rem ; further reduced by
     the card padding below. */
  padding-top: 2rem !important;
}

/* (2) Hero as a floating frosted-glass card. The background image remains
       visible above / below / on the sides because of max-width + auto margin. */
.hero {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
  max-width: 960px;
  margin: 1.5rem auto;
  padding: 2.5rem 2rem 3rem !important;
  /* Reset the min-height so the card hugs its content instead of filling
     the viewport. The 100vh was useful for landing pages without a card,
     not for a centered floating panel. */
  min-height: auto !important;
}

/* The radial-gradient ::before created a halo that looked great on solid
   white but clashes with the dark image background. Suppress it. */
.hero::before {
  display: none !important;
}

/* (3) Navy typography inside the hero card. */
.hero h1 {
  color: var(--accent-bright) !important;          /* #1a2540 navy */
}
.hero h1 .highlight {
  color: var(--accent) !important;                  /* #4e72a5 Coherix blue — kept for accent */
}
.hero .subtitle {
  color: var(--accent-bright) !important;
  opacity: 0.88;
}
.hero .patent {
  color: var(--accent-bright) !important;
  opacity: 0.7;
}
.hero-badge {
  color: var(--accent-bright) !important;
  background: rgba(26, 37, 64, 0.10) !important;
  border-color: rgba(26, 37, 64, 0.28) !important;
}

/* (4) Buttons readability — primary stays navy-filled (already strong on
       white card). Secondary becomes navy outline + navy text. */
.hero .btn-secondary {
  background: transparent !important;
  color: var(--accent-bright) !important;
  border: 1.5px solid var(--accent-bright) !important;
}
.hero .btn-secondary:hover {
  background: var(--accent-bright) !important;
  color: var(--white) !important;
}

/* (5) Animated coherence pill at the bottom of the hero: already reads OK
       on the white card via --surface override (defined above). No extra
       rule needed. */


/* ============================================================================
 * 3.I — Comprehensive readability fix.
 *
 * Operator screenshots 2026-05-17 (post-3.H) showed that 3.G+3.H only
 * covered a few selectors. The rest of the site (THE ENGINE, FOUR SCALES,
 * STORY, FIVE STATE VARIABLES, FIVE STRUCTURAL DEFECTS, RESEARCH ATLAS,
 * etc.) has text styled dark-for-white-bg, which is invisible on the
 * dark cohérence background image.
 *
 * Fixes :
 *   - Hero card finally becomes visibly opaque (0.85 -> 0.95) and the
 *     vertical gap is collapsed by overriding the leftover 100vh +
 *     flex centering from the original inline style.
 *   - All section headings, eyebrow labels, and descriptive paragraphs
 *     get light colors with subtle drop-shadow so they read on any
 *     part of the dark image.
 *
 * Atlas card image refactor (operator request "bouton COHERIX ATLAS
 * a refaire") is deferred to a separate token (3.J).
 *
 * Scope: coherix-site/assets/coherix-bg.css only. Roll-back: delete
 * this 3.I block.
 * ========================================================================= */

/* (a) Hero gap + opacity reinforcement (3.H was insufficient) */
.coh-invite-wrap {
  padding-top: 1.5rem !important;
  padding-bottom: 0.25rem !important;
}
.hero {
  min-height: 0 !important;           /* defeats the 100vh from the original inline rule */
  display: block !important;          /* defeats flex centering that creates the dead space */
  padding: 1rem 2rem 2.5rem !important;
  background: rgba(255, 255, 255, 0.95) !important;
  margin: 0.5rem auto 2rem !important;
}
.hero::before { display: none !important; }

/* (b) Section headings become bright white with soft text-shadow so they
       read on any part of the cohérence background image. */
.section-header h2,
.atlas-feature-section h2,
.histoire-text h3,
.final-cta h2 {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* (c) Eyebrow labels ("THE ENGINE", "FOUR SCALES", "RESEARCH ATLAS", ...)
       become pale blue with a softer shadow. */
.section-header .label,
.atlas-feature-eyebrow {
  color: rgba(180, 210, 240, 0.95) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* (d) Descriptive paragraphs under each heading become pale on dark. */
.section-header p,
.atlas-feature-section p.atlas-feature-desc,
.histoire-text p,
.final-cta p {
  color: rgba(220, 232, 245, 0.88) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}


/* ============================================================================
 * 3.J — Hero pivot to light text + leftover-dark safety net.
 *
 * Operator screenshots (post-3.I) confirmed that the hero h1 "Structural
 * coherence" was still dark navy on dark background, invisible. Root
 * cause : 3.H styled the h1 navy assuming the white .hero card would be
 * visible behind it ; in practice the white card was not rendering as
 * intended. Rather than chase the card-visibility bug, we pivot the
 * hero to the same light-text-on-image treatment used everywhere else
 * post-3.I -- consistent with the rest of the site.
 *
 * Scope: coherix-site/assets/coherix-bg.css only. NO HTML touched.
 * Roll-back: delete the '3.J' block.
 * ========================================================================= */

/* (a) Drop the white card on .hero (was set in 3.H, never rendered well). */
.hero {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  max-width: 1100px !important;
  padding: 1rem 2rem 2.5rem !important;
}

/* (b) Hero text becomes light, consistent with all other sections post-3.I. */
.hero h1 {
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.hero h1 .highlight {
  color: rgba(180, 210, 240, 1) !important;
}
.hero .subtitle {
  color: rgba(220, 232, 245, 0.92) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  opacity: 1 !important;
}
.hero .patent {
  color: rgba(220, 232, 245, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  opacity: 1 !important;
}

/* (c) Hero badge ("Multiscale Coherence Intelligence") -- aligned with the
       eyebrow style used elsewhere. */
.hero-badge {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: rgba(220, 232, 245, 0.95) !important;
}

/* (d) Secondary buttons -- white outline + white text (was navy from 3.H
       which assumed the white hero card). */
.hero .btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
}
.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 1) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
}

/* (e) Safety net : any leftover h1/h2/h3 anywhere on the page that uses
       a dark text color (var(--text), var(--accent-bright), var(--charcoal))
       becomes light-with-shadow. This catches sections we may not have
       enumerated explicitly. Surgical : only applies when NOT inside a
       known white-card container. */
body > main h1,
body > main h2,
body > section > h2,
body > section h1 {
  /* This is a fallback only ; specific section overrides above (3.I) still
     take precedence because they're listed later in source order ... wait,
     these later rules win by cascade. To avoid clobbering 3.I selectors,
     we use a lower-specificity rule via `:where(...)`. */
}
:where(section h1, section h2, section h3) {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}


/* ============================================================================
 * 3.K — Nuclear hero override.
 *
 * Operator confirmed (Edge browser, fresh, post-3.J) that .hero h1 still
 * renders dark. Despite 3.J having "!important" and being later in source
 * order than 3.H, the navy color from 3.H seems to persist. Some specificity
 * or cascade quirk is overriding 3.J. Rather than chase the exact cause
 * (which could be DevTools-only territory), this 3.K block uses
 * higher-specificity selectors (html body section.hero ...) that beat any
 * single-class .hero rule. Plus colour inheritance fallback on the section
 * itself so any leftover element inherits the right color.
 *
 * Scope: coherix-site/assets/coherix-bg.css only.
 * ========================================================================= */

/* Force entire hero subtree to render light. specificity = (0,1,3) on
   html body section.hero > * — beats the (0,1,1) of .hero h1. */
html body section.hero,
html body section.hero h1,
html body section.hero h2,
html body section.hero p,
html body section.hero .subtitle,
html body section.hero .patent {
  color: rgba(255, 255, 255, 0.96) !important;
}

html body section.hero h1 {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65) !important;
}

html body section.hero h1 .highlight {
  color: rgba(180, 210, 240, 1) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}

html body section.hero .subtitle,
html body section.hero .patent {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

/* Hero badge — force pale-blue on subtle dark fill. */
html body section.hero .hero-badge {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  color: rgba(220, 232, 245, 0.95) !important;
}
html body section.hero .hero-badge .pulse {
  background: rgba(220, 232, 245, 0.95) !important;
}

/* Secondary buttons in hero — white outline + white text. */
html body section.hero .btn.btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
}
html body section.hero .btn.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.20) !important;
  border-color: rgba(255, 255, 255, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

/* ============================================================================
 * 3.L — List & content readability inside .section-header on dark background.
 *
 * The 3.I block (above) handled .section-header h2, .label, p — but NOT the
 * list markup (<ul>, <ol>, <li>) nor <code> tags. The sections added to
 * index.html on 2026-05-25 (#what-coherix-is, #what-coherix-is-not,
 * #cis-active-recovery, #cloud-api-status) embed list content directly
 * inside .section-header, so those <li> items were inheriting the dark
 * body color (var(--text)) — invisible on the dark coherence background.
 *
 * Scope additive : only inside .section-header. The quote-box <p> in
 * #cis-active-recovery uses inline color: var(--accent-bright) and is
 * therefore unaffected (inline style + higher specificity preserved).
 *
 * Date : 2026-05-25.
 * Roll-back : delete this 3.L block.
 * ========================================================================= */

.section-header ul,
.section-header ol,
.section-header li {
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.section-header li strong {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.section-header li em {
  color: rgba(255, 255, 255, 0.94) !important;
  font-style: italic;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.section-header code {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.98);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'Courier New', monospace;
}
