/* Fitline theme overrides on top of Bulma v1.0.
   Palette (health & fitness color psychology):
     teal/green #0d9488 = health + trust + growth (primary)
     orange #f97316     = energy + action (CTA, used sparingly)
     light bg #ffffff / #f8fafc = clean, fresh, readable

   IMPORTANT: Bulma 1.0 auto-darkens via `prefers-color-scheme`. We pin the
   site to LIGHT so a dark OS/browser theme can't invert the wellness palette. */
:root {
  color-scheme: light;

  /* Force Bulma's light theme regardless of OS scheme */
  --bulma-preferred-color-scheme: light;
  --bulma-scheme-main: #ffffff;
  --bulma-scheme-main-bis: #f8fafc;
  --bulma-scheme-main-ter: #f1f5f9;
  --bulma-scheme-invert: #0f172a;
  --bulma-scheme-invert-bis: #1e293b;
  --bulma-scheme-invert-ter: #334155;
  --bulma-text: #0f172a;
  --bulma-text-strong: #0f172a;
  --bulma-text-weak: #475569;

  /* Brand: teal/green primary, orange for CTA */
  --bulma-primary-h: 172;
  --bulma-primary-s: 66%;
  --bulma-primary-l: 33%;
  --bulma-scheme-h: 172;
  --bulma-scheme-s: 66%;
  --bulma-scheme-l: 33%;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #ffffff;

  /* Sticky footer: body fills viewport, main grows, footer pinned to bottom */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* Cards reach equal height in the grid; button pinned to the bottom */
.columns.is-multiline .column { display: flex; }
.columns.is-multiline .card {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.card .card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card .card-content .button {
  margin-top: auto;
  align-self: flex-start;
}

/* Card text stays dark on the always-light card surface */
.card { background: #ffffff; }
.card .content { color: #475569; }
.card .title,
.card .subtitle { color: #0f172a; }

/* Article quote: white text on teal, so it reads as a deliberate callout */
.content blockquote {
  background: #0f766e;
  border-left: 5px solid #f97316;
  color: #ffffff;
  border-radius: 8px;
  padding: 1.25em 1.5em;
}
.content blockquote p { color: #ffffff; }

/* Table of contents — hidden for short articles (no .has-toc class) */
.article-toc.has-toc { margin-bottom: 2rem; }
.article-toc:not(.has-toc) { display: none; }
.article-toc ul { margin: 0.75rem 0 0 1.25rem; list-style: disc; }
.article-toc a { color: #0f766e; text-decoration: none; }
.article-toc a:hover { text-decoration: underline; }

/* Parallax: hero image stays fixed while content scrolls over it.
   Deliberately on the hero + article banners only. */
.hero-parallax {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* Smart product placement callout: small teal note inside article body */
.product-note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: #f0fdfa;
  border-left: 4px solid #f97316;
  border-radius: 8px;
  color: #0f766e;
  font-weight: 500;
}
.product-note a { color: #f97316; font-weight: 700; text-decoration: underline; }

/* Classic parallax hero: background layer lags behind the page on scroll */
.hero#hero { min-height: 40vh; }
.hero#hero .hero-body { padding: 3.5rem 1.5rem; }
.hero#hero .hero-layer {
  position: absolute; inset: 0;
  background-position: center; background-size: cover;
  opacity: 0; transition: opacity 0.6s ease;
  will-change: transform, opacity;
}
.hero#hero .hero-layer:first-child { opacity: 1; }
.hero#hero .hero-content { position: relative; z-index: 1; }

/* Warm bright hero buttons */
.hero .button.is-warning {
  background: #f97316;
  border-color: #f97316;
  color: #ffffff;
}

/* Equal-height, vertically-centred hero CTAs */
.hero .buttons {
  align-items: center;
  justify-content: center;
}
.hero .buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.1rem;
  line-height: 1;
  padding: 0 1.8rem;
}