/* ==========================================================================
   Supplement Practice — sitewide design system
   --------------------------------------------------------------------------
   Ported from the /get-started landing page in the Nuxt app
   (WholenessAI-Client/pages/get-started.vue). That page is the reference
   implementation; this file is the static-site translation of it.

   Load order matters: this must come AFTER the Webflow export's shared
   stylesheet, because it deliberately overrides Webflow's palette and
   chrome (nav, footer, buttons) without touching the markup those pages
   already ship. Nothing here changes any page's content, headings, links
   or alt text — it is presentation only, so the SEO surface is untouched.
   ========================================================================== */

:root {
  /* ── Palette (cream + earthy multicolor) ───────────────────────────── */
  --sp-cream:      #f5f1ea;
  --sp-cream-2:    #ebe6dc;
  --sp-ink:        #2a1a0f;
  --sp-ink-soft:   #4a3328;
  --sp-muted:      #8a7c70;

  --sp-sky:        #b5dcff;
  --sp-sky-deep:   #7fa8d6;
  --sp-sky-wash:   #eaf3ff;
  --sp-moss:       #a9b670;
  --sp-moss-deep:  #5b7028;
  --sp-moss-wash:  #eef1df;
  --sp-rust:       #c97a4d;
  --sp-rust-wash:  #fbe9db;
  --sp-earth:      #7a4f2d;
  --sp-sand:       #e8d9c2;
  --sp-sand-wash:  #f5ecdb;

  --sp-white:      #ffffff;
  --sp-hairline:   rgb(0 0 0 / 6%);
  --sp-hairline-2: rgb(42 26 15 / 12%);

  /* ── Type ──────────────────────────────────────────────────────────── */
  --sp-font: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sp-font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  /* ── Shape ─────────────────────────────────────────────────────────── */
  --sp-radius-sm: 14px;
  --sp-radius:    22px;
  --sp-radius-lg: 32px;
  --sp-radius-pill: 999px;

  /* Shadows are warm and very soft — the design leans on tone and
     generous radius for depth, not on dark drop shadows. */
  --sp-shadow-sm: 0 10px 24px -18px rgb(42 26 15 / 40%);
  --sp-shadow:    0 30px 60px -40px rgb(42 26 15 / 35%);
  --sp-shadow-lg: 0 50px 80px -50px rgb(42 26 15 / 35%);
}

/* ── Base ────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
  background: var(--sp-cream);
  color: var(--sp-ink);
  font-family: var(--sp-font);
  /* ss01/cv11 are the Work Sans stylistic sets used on the landing page —
     single-storey g and straight-tail l. Harmless where unsupported. */
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The Webflow export paints white on several wrappers, which shows through
   as bright rectangles against the cream ground. */
body .page-wrapper,
body .main-wrapper,
body .section,
body .w-layout-blockcontainer { background-color: transparent; }

h1, h2, h3, h4, h5, h6 {
  color: var(--sp-ink);
  letter-spacing: -0.025em;
  font-weight: 700;

  /* The Webflow export paints every h1 and h2 with a black gradient via
     `background-clip: text` + `-webkit-text-fill-color: transparent`. That
     makes `color` inert — the heading renders black no matter what you set,
     which is invisible on any coloured band. Neutralising it here makes
     `color` authoritative again, sitewide. Pages that deliberately re-apply
     a gradient (or their own text-fill) still win on specificity. */
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentcolor;
}

p { color: var(--sp-ink-soft); }

a { color: inherit; }

::selection { background: var(--sp-sky); color: var(--sp-ink); }

/* Keyboard focus — visible against cream, and never on mouse click. */
:focus-visible {
  outline: 2px solid var(--sp-sky-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Serif accent ────────────────────────────────────────────────────── */
/* The signature move of this design: an italic garamond phrase in earth
   brown, set against the sans headline. */
.sp-serif {
  font-family: var(--sp-font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--sp-earth);
}

/* ── Eyebrow ─────────────────────────────────────────────────────────── */
.sp-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-muted);
  margin: 0 0 0.75rem;
}

/* ── Pill buttons ────────────────────────────────────────────────────── */
.sp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.78rem 1.4rem;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-sky);
  color: var(--sp-ink);
  font-family: var(--sp-font);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--sp-hairline);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease,
              background 0.25s ease;
  box-shadow: 0 1px 0 rgb(255 255 255 / 60%) inset,
              0 8px 18px -10px rgb(127 168 214 / 60%);
}

.sp-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 60%) inset,
              0 14px 26px -14px rgb(127 168 214 / 70%);
}

.sp-pill:active { transform: translateY(0); }

.sp-pill-outline {
  background: transparent;
  border: 1.5px solid var(--sp-hairline-2);
  box-shadow: none;
}

.sp-pill-outline:hover {
  background: rgb(255 255 255 / 60%);
  box-shadow: none;
}

.sp-pill-lg { padding: 1rem 1.6rem; font-size: 1rem; }
.sp-pill-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }

/* ── Card ────────────────────────────────────────────────────────────── */
.sp-card {
  background: var(--sp-white);
  border-radius: var(--sp-radius-lg);
  border: 1px solid var(--sp-hairline);
  box-shadow: var(--sp-shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}

/* Tonal card washes — the landing page alternates these down the feature
   column so consecutive cards never read as a uniform grid. */
.sp-tone-sky  { background: linear-gradient(180deg, var(--sp-sky-wash)  0%, #fff 60%); }
.sp-tone-moss { background: linear-gradient(180deg, var(--sp-moss-wash) 0%, #fff 60%); }
.sp-tone-rust { background: linear-gradient(180deg, var(--sp-rust-wash) 0%, #fff 60%); }
.sp-tone-sand { background: linear-gradient(180deg, var(--sp-sand-wash) 0%, #fff 60%); }

/* ── Decorative leaves ───────────────────────────────────────────────── */
/* Purely ornamental; hidden from assistive tech at the markup level. */
.sp-leaf {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
  z-index: 0;
}

@media (max-width: 860px) {
  /* The leaves crowd a phone hero and cost paint time on the fold. */
  .sp-leaf { display: none; }
}

/* ==========================================================================
   Shared chrome — nav
   The markup is Webflow's; only the skin changes.
   ========================================================================== */

.navbar-container.w-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease,
              backdrop-filter 0.35s ease;
}

/* Applied by assets/js/sp-nav.js once the page scrolls past the fold. */
.navbar-container.w-nav.sp-nav-scrolled {
  background: rgb(245 241 234 / 78%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--sp-hairline);
}

/* Webflow ships a blurred plate behind the bar; the scrolled state above
   replaces it, so it would otherwise double up. */
.navbar-container.w-nav .background-blur { display: none; }

.navbar-container.w-nav .navlink h6,
.navbar-container.w-nav .nav-link {
  color: var(--sp-ink);
  font-family: var(--sp-font);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  transition: color 0.2s ease;
}

.navbar-container.w-nav .navlink:hover h6,
.navbar-container.w-nav .nav-link:hover { color: var(--sp-sky-deep); }

/* Sign-up CTA becomes a sky pill. Webflow's gradient/sparkle spans are
   flattened to plain ink so the pill reads cleanly. */
.navbar-container.w-nav .nav-link.sub-button {
  background: var(--sp-sky);
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-pill);
  padding: 0.55rem 1.15rem;
  box-shadow: 0 1px 0 rgb(255 255 255 / 60%) inset,
              0 8px 18px -10px rgb(127 168 214 / 60%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.navbar-container.w-nav .nav-link.sub-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 60%) inset,
              0 14px 26px -14px rgb(127 168 214 / 70%);
}

.navbar-container.w-nav .nav-link.sub-button .color-green,
.navbar-container.w-nav .nav-link.sub-button .gradient,
.navbar-container.w-nav .nav-link.sub-button span {
  color: var(--sp-ink) !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--sp-ink) !important;
  font-weight: 600;
}

/* Webflow's rotating gradient border fights the flat pill. */
.navbar-container.w-nav .rotate-border::before,
.navbar-container.w-nav .rotate-border::after,
.navbar-container.w-nav .sparkle-rotate::before,
.navbar-container.w-nav .sparkle-rotate::after { display: none !important; }

.navbar-container.w-nav .menu.w-nav-button { color: var(--sp-ink); }

/* Mobile drawer */
.navbar-container.w-nav .w-nav-overlay .nav-menu,
.navbar-container.w-nav .nav-menu.w--nav-menu-open {
  background: var(--sp-cream);
  border-left: 1px solid var(--sp-hairline);
}

/* ==========================================================================
   Shared chrome — footer
   ========================================================================== */

.section_footer {
  background: var(--sp-cream-2);
  border-top: 1px solid var(--sp-hairline);
  color: var(--sp-ink);
}

.section_footer h1, .section_footer h2, .section_footer h3,
.section_footer h4, .section_footer h5, .section_footer h6 { color: var(--sp-ink); }

.section_footer p,
.section_footer .text-dark-grey { color: var(--sp-ink-soft); }

.footer-nav-link {
  color: var(--sp-ink-soft);
  font-family: var(--sp-font);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-nav-link:hover { color: var(--sp-ink); }

.footer-nav-link.footer-cta-link {
  background: var(--sp-sky);
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-pill);
  padding: 0.5rem 1.1rem;
  color: var(--sp-ink);
  font-weight: 600;
}

.footer-nav-link.footer-cta-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -12px rgb(127 168 214 / 70%);
}

.sub-footer.sub-footer-new {
  border-top: 1px solid var(--sp-hairline);
  color: var(--sp-muted);
}

._2024-wellness-ai-all-rights-reserved {
  color: var(--sp-muted);
  font-size: 0.82rem;
}

.footer-email-link p { color: var(--sp-ink-soft); }
.footer-email-link:hover p { color: var(--sp-earth); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .sp-pill,
  .navbar-container.w-nav,
  .navbar-container.w-nav .nav-link.sub-button,
  .footer-nav-link.footer-cta-link {
    transition: none;
  }

  .sp-pill:hover,
  .navbar-container.w-nav .nav-link.sub-button:hover,
  .footer-nav-link.footer-cta-link:hover { transform: none; }
}