/* ==========================================================================
   omnihealth-refresh.css
   Site-wide visual refresh aligning with the 2026 redesign.

   The base stylesheet (omnihealth-site.css) already defines the correct design
   tokens (navy #081a3d, teal #078b9a, aqua #4fd1c5, line #dceced, soft #f6fbfb,
   28px radius, 1180px container, Inter). This layer only closes the gap between
   that base and the redesign:

     1. Actually LOADS Inter (the base declared the family but never loaded it).
     2. Brighter primary gradient (teal -> aqua) with an aqua glow.
     3. Hover-lift micro-interaction on buttons and cards.
     4. A few utilities the refreshed home page uses.

   Loaded AFTER omnihealth-site.css so it overrides. Purely additive — no
   existing markup needs to change.
   ========================================================================== */

:root {
  /* Redesign gradient + glow */
  --oh-grad-primary: linear-gradient(135deg, #078b9a, #4fd1c5);
  --oh-glow-teal: 0 8px 20px rgba(79, 209, 197, 0.30);
  --oh-glow-teal-strong: 0 12px 28px rgba(79, 209, 197, 0.45);
  --oh-lift: translateY(-2px);
  --oh-radius-btn: 13px;

  /* Accent tints used by the refreshed sections */
  --oh-tint-mint: #ccfbf1;
  --oh-tint-sky: #e0f2fe;
  --oh-tint-violet: #f3e8ff;
  --oh-tint-panel: #e6f4f4;
  --oh-ink-sky: #0284c7;
  --oh-ink-violet: #7c3aed;
  --oh-ink-green: #047857;
}

/* --- Typography: load the family the base already asked for ---------------- */
body,
.theme-omni {
  font-family: var(--oh-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Redesign uses tight tracking on display type */
h1, h2, .oh-hero-copy h1 {
  letter-spacing: -0.035em;
}

/* --- Primary button: brighter gradient + aqua glow + lift ----------------- */
.oh-btn-primary {
  background: var(--oh-grad-primary);
  box-shadow: var(--oh-glow-teal);
  border-radius: var(--oh-radius-btn);
}
.oh-btn-primary:hover,
.oh-btn-primary:focus-visible {
  box-shadow: var(--oh-glow-teal-strong);
  transform: var(--oh-lift);
}

/* --- Secondary / ghost buttons: lift on hover ----------------------------- */
.oh-btn-secondary:hover,
.oh-btn-ghost:hover,
.oh-btn-outline:hover,
.oh-btn-light:hover,
.oh-btn-secondary:focus-visible,
.oh-btn-ghost:focus-visible {
  transform: var(--oh-lift);
  box-shadow: var(--oh-shadow-soft);
}

/* --- Cards: subtle lift, matching the redesign's hover behaviour ---------- */
.oh-benefit-card,
.oh-article-card,
.oh-dashboard-card,
.oh-feature-card,
.oh-card {
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.oh-benefit-card:hover,
.oh-article-card:hover,
.oh-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--oh-shadow);
}

/* --- Eyebrow / pill chips: redesign's outlined capsule -------------------- */
.oh-eyebrow {
  border: 1px solid var(--oh-line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--oh-teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 0.72rem;
  border-radius: var(--oh-radius-pill);
}

/* --- Gradient CTA banner (bottom of home) -------------------------------- */
.oh-cta-card {
  background: var(--oh-grad-primary);
  box-shadow: var(--oh-shadow);
  border: 0;
}
.oh-cta-card h2,
.oh-cta-card p {
  color: #fff;
}
.oh-cta-card p { opacity: 0.92; }
.oh-cta-card .oh-btn-light,
.oh-cta-card .oh-btn-secondary {
  background: #fff;
  color: var(--oh-teal);
  border-color: transparent;
  font-weight: 800;
}

/* --- Soft tinted panel (professionals section) ---------------------------- */
.oh-professional-card {
  background: var(--oh-tint-panel);
  border-radius: 30px;
}

/* --- Feature icon tiles: redesign's rounded-square tints ------------------ */
.oh-feature-icon {
  border-radius: 15px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.oh-feature-icon.teal   { background: var(--oh-tint-mint);   color: var(--oh-teal); }
.oh-feature-icon.blue   { background: var(--oh-tint-sky);    color: var(--oh-ink-sky); }
.oh-feature-icon.purple { background: var(--oh-tint-violet); color: var(--oh-ink-violet); }
.oh-feature-icon.green  { background: var(--oh-tint-mint);   color: var(--oh-ink-green); }

/* --- Trust row under the hero -------------------------------------------- */
.oh-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--oh-muted);
}
.oh-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.oh-trust-row .oh-trust-ico { color: var(--oh-ink-green); font-size: 1.05rem; }

/* --- Focus visibility (accessibility) ------------------------------------ */
.oh-btn:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--oh-focus);
}

/* --- Ambient particle background ----------------------------------------
   Only engages on pages carrying [data-oh-ambient] (the script adds
   .oh-has-ambient). The page background moves to <html> so the fixed canvas
   at z-index:-1 can show through a transparent <body>. Scoped by the class,
   so no other page is affected.
   ------------------------------------------------------------------------ */
html.oh-has-ambient { background: var(--oh-soft); }
body.oh-has-ambient { background: transparent; }

#oh-ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.75;
}

/* The site paints opaque section bands (white / soft) which would completely
   cover a z-index:-1 canvas. On ambient pages we let those bands go
   transparent so the constellation shows through, while CARDS and PANELS stay
   solid so text keeps its contrast. Scoped to .oh-has-ambient — other pages
   keep their banded backgrounds. */
body.oh-has-ambient .oh-benefits,
body.oh-has-ambient .oh-section,
body.oh-has-ambient .oh-river-section,
body.oh-has-ambient .oh-ecosystem-section,
body.oh-has-ambient .oh-professionals-section,
body.oh-has-ambient .oh-library-section,
body.oh-has-ambient .oh-security-section,
body.oh-has-ambient .oh-final-cta,
body.oh-has-ambient .oh-hero {
  background: transparent;
  background-image: none;
}

/* Keep the readable surfaces opaque. */
body.oh-has-ambient .oh-benefit-card,
body.oh-has-ambient .oh-article-card,
body.oh-has-ambient .oh-dashboard-card,
body.oh-has-ambient .oh-panel,
body.oh-has-ambient .oh-card,
body.oh-has-ambient .oh-site-footer {
  background: #fff;
}
body.oh-has-ambient .oh-professional-card { background: var(--oh-tint-panel); }
body.oh-has-ambient .oh-cta-card { background: var(--oh-grad-primary); }

/* Never let the decoration bleed over real content on small screens. */
@media (max-width: 640px) {
  #oh-ambient-canvas { opacity: 0.45; }
}

/* --- Respect reduced-motion preferences ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #oh-ambient-canvas { display: none; }
  .oh-btn-primary:hover,
  .oh-btn-secondary:hover,
  .oh-btn-ghost:hover,
  .oh-benefit-card:hover,
  .oh-article-card:hover,
  .oh-feature-card:hover {
    transform: none;
  }
}