/* Bhaav Sadhana pages (/bhaav-sadhana/, /hi/bhaav-sadhana/).
   Loaded after naam-jaap-counter.css. Re-skins the shared layout in the app's own look:
   deep indigo-purple fading to rose, white type, frosted-glass cards and pills. */
:root {
  --bs-ink: #FFFFFF;
  --bs-text: rgba(255,255,255,0.88);
  --bs-muted: rgba(255,255,255,0.72);
  --bs-lavender: #D9C8FF;
  --bs-glass: rgba(255,255,255,0.09);
  --bs-glass-strong: rgba(255,255,255,0.14);
  --bs-line: rgba(255,255,255,0.20);
  --bs-deep: #2C1153;
  --bs-shadow: rgba(20,6,45,0.35);
  --ff-display: 'DM Sans', system-ui, sans-serif;
}

html { background: var(--bs-deep); }
body { color: var(--bs-text); background: var(--bs-deep); }
/* Fixed gradient layer: avoids background-attachment: fixed, which iOS ignores. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(150,110,230,0.30) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(190,110,140,0.35) 0%, transparent 70%),
    linear-gradient(180deg, #2C1153 0%, #45207A 32%, #5E3291 62%, #74428F 85%, #844C85 100%);
}

/* Nav */
.site-nav { background: rgba(44,17,83,0.62); border-color: var(--bs-line); box-shadow: 0 12px 32px var(--bs-shadow); }
.brand { color: var(--bs-ink); }
.nav-links a { color: var(--bs-muted); }
.nav-links a:hover { color: var(--bs-ink); }
.nav-links .nav-cta, .hero-button.primary {
  background: linear-gradient(135deg, #F4EEFF, #D6C4FF); color: var(--bs-deep);
  box-shadow: 0 10px 28px rgba(160,120,255,0.35);
}
.nav-links .nav-cta:hover, .hero-button.primary:hover { background: #FFFFFF; }

/* Hero */
.nj-breadcrumb, .nj-breadcrumb a { color: var(--bs-muted); }
.nj-breadcrumb a:hover, .nj-breadcrumb span[aria-current] { color: var(--bs-ink); }
.eyebrow { background: var(--bs-glass-strong); color: var(--bs-lavender); border: 1px solid var(--bs-line); }
.nj-hero h1 { color: var(--bs-ink); font-weight: 700; letter-spacing: -0.01em; }
.nj-hero p { color: var(--bs-text); }
strong { color: var(--bs-ink); }

/* Screenshots */
.bs-shots { display: grid; gap: 14px; margin: 36px auto 0; max-width: 920px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.bs-shots img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--bs-line); box-shadow: 0 12px 32px var(--bs-shadow); }
.bs-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* Content cards */
.nj-content section {
  background: var(--bs-glass); border-color: var(--bs-line); box-shadow: 0 12px 32px var(--bs-shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nj-content section h2, .nj-content section h3, .nj-faq-item h3, .nj-mantra-card h3 { color: var(--bs-ink); font-weight: 700; }
.nj-content section h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.nj-content section p, .nj-content section li, .nj-faq-item p { color: var(--bs-text); }
.nj-content a { color: var(--bs-lavender); text-decoration-color: rgba(217,200,255,0.5); text-underline-offset: 3px; }
.nj-content a:hover { color: var(--bs-ink); }

.nj-mantra-card { background: var(--bs-glass-strong); border-color: var(--bs-line); border-radius: 18px; }
.nj-compare-table th, .nj-compare-table td { border-bottom-color: var(--bs-line); color: var(--bs-text); }
.nj-compare-table th { color: var(--bs-lavender); }
.nj-compare-table tr:nth-child(even) { background: rgba(255,255,255,0.05); }
.nj-faq-item { border-bottom-color: var(--bs-line); }

/* Closing CTA */
.nj-cta-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  border-color: var(--bs-line); color: var(--bs-text);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nj-cta-panel h2 { color: var(--bs-ink); }

:focus-visible { outline: 2px solid var(--bs-lavender); outline-offset: 3px; }