/* ============================================================
   LifeARC Option 1 "Moments" — sitewide brand overlay (D-?/d7)
   STAGED 2026-10-26 — NOT deployed. Preview = injected over live
   pages headlessly; deploy = one enqueue in lifearc-marketing.php
   AFTER overrides.css (trivially reversible by removing it).
   Source of truth: Brand/tokens.css + components.css + styleguide.
   Rules honored: coral CTAs ALWAYS ink text (ADA) · waveform only
   gold/pine/cream, never full-opacity behind text · one serif
   (IBM Plex Serif) + one sans (Rethink Sans).
   ============================================================ */
/* Fonts (IBM Plex Serif + Rethink Sans) load via the lifearc-fonts enqueue in lifearc-marketing.php — no @import here. */

/* ---------- 1. Tokens: retarget the existing custom properties ----------
   The site defines its tokens on .marketing-page / .legal-page (not :root),
   so the remap targets those scopes too; brand.css loads last and wins the tie. */
:root, .marketing-page, .legal-page {
  --brand: #0F4535;             /* Deep Green 900 (was #114734) */
  --brand-dark: #0F4535;
  --bg-main: #F8F6F2;           /* Cream (was #F7FAF9 cool-white) */
  --bg-soft: #F1ECE2;           /* warm tint (was #EEF4F1) */
  --brand-soft: #EDE5D4;        /* warm chip (was #E3EBE7) */
  --line: rgba(15, 69, 53, 0.16);
  --text-main: #1A1A1A;         /* Ink (was slate #0f172a) */
  --text-muted: #4A5551;        /* Ink-soft (was slate #334155) */
  --persona-long: #577B70;      /* Green 600 */
  --persona-short: #C59F6D;     /* Gold 500 */
  --tn-serif: "IBM Plex Serif", Georgia, serif;
}

/* ---------- 2. Typography ---------- */
body,
.marketing-page,
button, input, select, textarea {
  font-family: "Rethink Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
/* Mirrors (and out-cascades) the Marcellus !important block in overrides.css. */
h1, h2, h3, h4,
.marketing-page h1, .marketing-page h2, .marketing-page h3, .marketing-page h4,
.legal-page h1, .legal-page h2, .legal-page h3, .legal-page h4,
.marketing-page .footer-brand, .legal-page .footer-brand,
.marketing-page .calculator-section-title, .marketing-page .cardTitle,
.hero-tagline,
.two-neighbors-heading,
.section-heading,
.showcase-title,
.calculator-page-intro h1,
.contact-intro h1 {
  font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif !important;
  font-weight: 400;
}
/* eyebrows / kickers wear Gold 500, caps, sans */
.showcase-kicker, .section-kicker, .hero-market-badge, .footer-kicker {
  font-family: "Rethink Sans", "Segoe UI", sans-serif;
  color: #C59F6D;
  letter-spacing: 0.12em;
}

/* ---------- 3. CTAs: coral fill, INK text (ADA ruling) ----------
   !important throughout: the hero-calc button carries an inline style attribute
   (hero-calc.js styles.btn), and the Salient THEME's salient-dynamic-styles.css
   loads AFTER this overlay and paints <button> elements its own blue (#3452FF)
   — caught live on the calculator + contact forms 2026-10-27. */
.hero-primary-btn,
.navbar-login-btn,
.calculator-submit-btn,
.contact-submit-btn,
.tn-cta-primary,
.le-final-cta-btn,
.le-medical-cta-btn,
.hc-btn {
  background: #EF966E !important;
  color: #1A1A1A !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 10px 20px rgba(221, 126, 83, 0.28) !important;
}
.hero-primary-btn:hover:not(:disabled),
.navbar-login-btn:hover:not(:disabled),
.calculator-submit-btn:hover:not(:disabled),
.contact-submit-btn:hover:not(:disabled),
.tn-cta-primary:hover:not(:disabled),
.le-final-cta-btn:hover:not(:disabled),
.le-medical-cta-btn:hover:not(:disabled),
.hc-btn:hover:not(:disabled) {
  background: #DD7E53 !important;
  color: #1A1A1A !important;
  box-shadow: 0 12px 22px rgba(221, 126, 83, 0.32) !important;
}
/* secondary / ghost on dark surfaces: cream text, gold line (styleguide ghost) */
.hero-secondary-btn {
  color: #F8F6F2;
  border-color: rgba(209, 171, 100, 0.8);
  background: rgba(209, 171, 100, 0.12);
}
.hero-secondary-btn:hover {
  color: #F8F6F2;
  background: rgba(209, 171, 100, 0.24);
}

/* ---------- 4. Waveform motif (new element, within guidelines) ----------
   Gold strip anchored to the hero's bottom edge, decorative, 35% opacity,
   repeat-x at natural bar height so there is no hard crop line. Pine strip
   available for light sections via .la-wave-light (markup opt-in later). */
.hero-section {
  position: relative;
}
.hero-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 110px;
  background: url('/wp-content/uploads/lifearc-brand/waveform-gold.svg') bottom left / auto 100% repeat-x;
  opacity: 0.35;
  pointer-events: none;
  z-index: 3; /* above the video media layer, below interactive content */
}
.la-wave-light { position: relative; overflow: hidden; }
.la-wave-light::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: url('/wp-content/uploads/lifearc-brand/waveform-pine.svg') bottom left / auto 100% repeat-x;
  opacity: 0.12;
  pointer-events: none;
}

/* calculator pages carry a literal cool-white wrapper — warm it to cream */
.calculators-page {
  background: #F8F6F2;
  color: #1A1A1A;
}

/* ---------- 5. Gold alignment: #CDAD71 remnants -> brand golds ---------- */
.hero-watch-link { color: #D1AB64; }
.hero-watch-link:hover { color: #C59F6D; }

/* ---------- 6. Cards & surfaces: warm, soft-radius (components.css feel) --- */
.calc-index-card,
.content-card,
.security-card,
.evidence-card {
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 69, 53, 0.10);
}

/* ---------- 8. Section heading accents: blue gradient underlines -> gold ----
   Covers How It Works and the home featured-film section (added 2026-10-27;
   the film section carries its own inline base styles in the page content). */
.how-it-works-section > h2::after,
.home-film-section > h2::after {
  background: linear-gradient(90deg, rgba(197, 159, 109, 0.25), rgba(197, 159, 109, 0.95), rgba(197, 159, 109, 0.25));
  box-shadow: 0 6px 16px rgba(197, 159, 109, 0.28);
}
.home-film-section > h2 { color: #0F4535; font-weight: 500; }
.home-film-section > p { color: #4A5551; }

/* ---------- 7. Phone display (new element; renders once markup ships) ---- */
.navbar-phone {
  font-weight: 700;
  color: #0F4535;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 16px;
  align-self: center;
}
.navbar-phone:hover { color: #577B70; }
.footer-phone {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: #D1AB64;
  text-decoration: none;
  white-space: nowrap;
}
.footer-phone:hover { color: #F8F6F2; }
.contact-phone {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: #0F4535;
  text-decoration: none;
}
.contact-phone:hover { color: #577B70; }