/*
 * IntentGuard Shared Marketing Styles — v2.0
 *
 * Loaded by all static HTML marketing pages.
 * Fixes applied in this version:
 *   C1. Footer nav styled by page nav{} CSS
 *   C2. Footer text-align:center from page footer{} CSS
 *   C3. CSS variable cascade breaks dark card text
 *   C4. Semi-transparent cards have invisible light text on white bg
 *   C5. Hardcoded rgba light text on white background
 *   C6. Ghost buttons invisible (text + border)
 *   C7. Inline style overrides (resolved by C3)
 *   C8. Legal page h3/strong hardcoded rgba text
 *   C9. CTA content (handled by separate patch script)
 */

/* ── CORRECTED BRAND TOKENS ─────────────────────────────────────── */
:root {
  --ig-navy:    #1B3A6B;
  --ig-navy-d:  #0D1E3C;
  --ig-teal:    #00838F;
  --ig-teal-lt: #1ECFBE;
  --ig-amber:   #D97706;
  --ig-white:   #FFFFFF;
  --ig-off-w:   #F8FAFC;
  --ig-text:    #1E293B;
  --ig-muted:   #64748B;
  --ig-border:  #E2E8F0;
}

/* ── WHITE BODY — higher specificity than body{} ────────────────── */
body.ig-page {
  background: #FFFFFF;
  color: #1E293B;

  /*
   * Redefine old dark-theme variables to light-theme equivalents.
   * CSS custom properties cascade to all descendants, so every element
   * using color:var(--white) or color:var(--muted) automatically gets
   * readable dark text. Dark containers below restore originals locally.
   */
  --white:    #1E293B;
  --muted:    rgba(30, 41, 59, 0.65);
  --border:   rgba(0, 131, 143, 0.18);
  --teal:     #00838F;       /* darker teal readable on white */
  --teal-dim: rgba(0, 131, 143, 0.07);

  /*
   * --surface override: rgba(15,32,64,0.6) on white = medium grey (#6F798C).
   * Raising opacity to 0.95 gives #1B2B49 — proper dark navy cards on white.
   */
  --surface:  rgba(15, 32, 64, 0.95);

  /* Ghost button variables — overridden in dark containers below */
  --ghost-color:        rgba(30, 41, 59, 0.65);
  --ghost-border:       rgba(30, 41, 59, 0.2);
  --ghost-hover-color:  #1E293B;
  --ghost-hover-border: rgba(30, 41, 59, 0.4);
}

/* Suppress old fixed gradient overlay */
body.ig-page::before { display: none !important; }

/* ── C3: RESTORE LIGHT VARIABLES INSIDE DARK CONTAINERS ─────────
   Dark surface containers (background: var(--surface) or explicit
   dark rgba) need original light variables restored. Without this,
   the body-level variable override would make text dark on dark.    */

body.ig-page .tier-card,
body.ig-page .audit-card,
body.ig-page .overage-card,
body.ig-page .enterprise-card,
body.ig-page .billing-toggle,
body.ig-page .uc-inner,
body.ig-page .uc-nav-item,
body.ig-page .comp-card,
body.ig-page .coming-soon-card,
body.ig-page .toc,
body.ig-page .right-card,
body.ig-page .contact-block {
  --white:    #F0F4FF;
  --muted:    rgba(240, 244, 255, 0.55);
  --border:   rgba(30, 207, 190, 0.15);
  --teal:     #1ECFBE;
  --teal-dim: rgba(30, 207, 190, 0.10);
  --surface:  rgba(15, 32, 64, 0.95);   /* keep solid dark in dark containers */
  /* Restore ghost button variables for dark backgrounds */
  --ghost-color:        rgba(240, 244, 255, 0.55);
  --ghost-border:       rgba(240, 244, 255, 0.18);
  --ghost-hover-color:  #F0F4FF;
  --ghost-hover-border: rgba(240, 244, 255, 0.35);
  color: #F0F4FF;
}

/* ── C4: SEMI-TRANSPARENT CARDS — dark text required ─────────────
   Near-zero-opacity backgrounds: on dark body = appeared dark.
   On white body = appear white. Text must be dark.
   Specificity: body.ig-page + .class.class > body.ig-page + .class
   so this correctly overrides the dark container restoration above
   for .tier-card.featured (which is both .tier-card and .featured). */

body.ig-page .tier-card.featured,
body.ig-page .trial-card,
body.ig-page .cta-card,
body.ig-page .callout-teal,
body.ig-page .callout-gold {
  --white:    #1E293B;
  --muted:    rgba(30, 41, 59, 0.7);
  --teal:     #00838F;
  color: #1E293B;
}
/* NOTE: .uc-price-note, .uc-quote, .cs-session-note are inside dark containers
   (.uc-inner, .coming-soon-card) — they inherit restored light variables. */

/* ── C5 + C8: HARDCODED rgba OVERRIDES ───────────────────────────
   Some elements use rgba(240,244,255,X) instead of CSS variables.
   Variable override cannot reach them. Direct overrides required.   */

/* pricing.html — comparison table sits directly on white body */
body.ig-page .comparison-table th                 { color: #1E293B; }
body.ig-page .comparison-table th:first-child     { color: rgba(30, 41, 59, 0.55); }
body.ig-page .comparison-table td                 { color: rgba(30, 41, 59, 0.75) !important; }
body.ig-page .comparison-table td:first-child     { color: rgba(30, 41, 59, 0.9) !important; }
body.ig-page .comparison-table thead tr           { background: rgba(0, 131, 143, 0.04); }
body.ig-page .comparison-table tbody tr:hover td  { background: rgba(0, 131, 143, 0.03); }
body.ig-page .comparison-table .section-row td    { color: #00838F !important; }
body.ig-page .no                                  { color: rgba(30, 41, 59, 0.18) !important; }

/* pricing.html — featured tier card has hardcoded rgba on feature items */
body.ig-page .tier-card.featured .tier-features li { color: rgba(30, 41, 59, 0.8) !important; }
body.ig-page .tier-card.featured .tier-tagline      { color: rgba(30, 41, 59, 0.7) !important; }
/* .annual-price NOT overridden — uses var(--gold) = #FFBC42 (gold/amber) ✓ */

/* pricing.html — trial card has hardcoded rgba on feature items */
body.ig-page .trial-feat      { color: rgba(30, 41, 59, 0.85) !important; }
body.ig-page .trial-card p    { color: rgba(30, 41, 59, 0.7) !important; }
body.ig-page .trial-note      { color: rgba(30, 41, 59, 0.55) !important; }
body.ig-page .cta-meta        { color: rgba(30, 41, 59, 0.55) !important; }
body.ig-page .cta-meta span   { color: rgba(30, 41, 59, 0.55) !important; }

/* privacy.html + all legal pages — hardcoded rgba in section body text */
/* Scoped to .section to avoid affecting dark containers like .contact-block */
body.ig-page .section h3          { color: #1E293B; }
/* Scope to p/li to avoid overriding .callout strong {color:var(--teal)} labels */
body.ig-page .section p > strong,
body.ig-page .section li > strong { color: rgba(30, 41, 59, 0.85) !important; }
body.ig-page .doc-header strong   { color: rgba(30, 41, 59, 0.85) !important; }
body.ig-page .sp-table td         { color: rgba(30, 41, 59, 0.65) !important; }
body.ig-page .sp-table td:first-child { color: rgba(30, 41, 59, 0.85) !important; }

/* use-cases.html — heading styles above comparison strip (no container) */
body.ig-page .comparison-strip h2 { color: #1E293B; }

/* ── C6: GHOST BUTTONS AND OUTLINE CTAs ─────────────────────────
   Ghost/outline CTAs use invisible muted text and transparent borders
   on white. Override to dark readable alternatives.                  */

body.ig-page .cta-ghost {
  /* Use CSS variables so dark containers restore light values contextually */
  color: var(--ghost-color) !important;
  border-color: var(--ghost-border) !important;
}
body.ig-page .cta-ghost:hover {
  color: var(--ghost-hover-color) !important;
  border-color: var(--ghost-hover-border) !important;
}
body.ig-page .tier-cta.outline {
  color: #00838F !important;
  border-color: rgba(0, 131, 143, 0.35) !important;
  background: transparent;
}
body.ig-page .tier-cta.outline:hover {
  background: rgba(0, 131, 143, 0.06) !important;
}
body.ig-page .audit-cta {
  color: #00838F !important;
  border-color: rgba(0, 131, 143, 0.35) !important;
}
body.ig-page .uc-cta-secondary {
  color: rgba(30, 41, 59, 0.65) !important;
}
body.ig-page .uc-cta-secondary:hover {
  color: #1B3A6B !important;
}


/* ── SECTION BACKGROUND ALTERNATION ────────────────────────────────
   Alternating light-grey sections create visual rhythm on white pages.
   Applied to pricing.html and use-cases.html only.               */
.ig-alt-bg {
  background: #F8FAFC;
  display: flow-root; /* contain floats, establish block formatting context */
}
/* ── NAVIGATION ──────────────────────────────────────────────────
   .ig-nav class selector wins over page nav{} element selector
   for all properties. Nav always stays dark regardless of page bg. */

.ig-nav {
  position: sticky !important;
  top: 0;
  z-index: 200 !important;
  background: rgba(13, 30, 60, 0.97) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(0, 131, 143, 0.2) !important;
  height: 64px !important;
  display: flex !important;
  align-items: center;
  padding: 0 24px !important;
}

.ig-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.ig-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.ig-nav-logo img {
  width: 30px;
  height: 30px;
  display: block;
}

.ig-nav-wordmark {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #FFFFFF !important;
  letter-spacing: -0.3px;
  line-height: 1;
}

.ig-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.ig-nav-link {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  transition: color 0.15s;
  white-space: nowrap;
}

.ig-nav-link:hover { color: #FFFFFF !important; }

.ig-nav-link.ig-active { color: #1ECFBE !important; }

.ig-nav-cta {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  background: #00838F !important;
  color: #FFFFFF !important;
  padding: 9px 20px;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
  border: none !important;
  height: auto !important;
}

.ig-nav-cta:hover { background: #006d78 !important; }

@media (max-width: 640px) {
  .ig-nav-links { display: none; }
  .ig-nav-wordmark { font-size: 16px; }
}

/* ── C1 + C2: FOOTER ─────────────────────────────────────────────
   C1: .ig-footer div.ig-footer-links uses div not nav — avoids
       page nav{} CSS entirely. Belt-and-suspenders reset included.
   C2: text-align: left overrides page footer{text-align:center}.   */

.ig-footer {
  background: #0D1E3C;
  border-top: 1px solid rgba(0, 131, 143, 0.15) !important;
  padding: 56px 24px 32px !important;
  text-align: left !important;             /* C2: override page footer{} */
  position: relative !important;
}

.ig-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.ig-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.ig-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 280px;
}

.ig-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}

.ig-footer-logo img {
  width: 26px;
  height: 26px;
  display: block;
}

.ig-footer-logo span {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #FFFFFF !important;
  letter-spacing: -0.2px;
}

.ig-footer-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.6;
  margin: 0;
}

/* C1: .ig-footer-links is a div (not nav), reset any inherited styles */
.ig-footer-links {
  display: flex !important;
  gap: 48px;
  flex-wrap: wrap;
  /* Defensive resets in case any page CSS targets divs inside footer */
  position: static !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  height: auto !important;
  padding: 0 !important;
  z-index: auto !important;
  align-items: flex-start !important;
}

.ig-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 140px;
}

.ig-footer-col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1ECFBE !important;
  margin-bottom: 4px;
  background: none !important;
  display: block;
  padding: 0 !important;
  border: none !important;
  height: auto !important;
  line-height: 1.5;
}

.ig-footer-col a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  transition: color 0.15s;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  display: inline !important;
}

.ig-footer-col a:hover { color: #FFFFFF !important; }

.ig-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.ig-footer-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3) !important;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 640px) {
  .ig-footer-top   { flex-direction: column; gap: 32px; }
  .ig-footer-links { gap: 32px; }
  .ig-footer-brand { max-width: 100%; }
}