/* FastCMS SaaS UX layer — theme-aware (light + dark), all tenants */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Light: solid bands under content (NOT the hero) ---- */
html:not(.dark) .section-band-transparent {
  background-color: #f4f7f5 !important;
  backdrop-filter: none !important;
}
html:not(.dark) .section-band-dark {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
}
/* Hero must stay transparent so BackgroundSlider shows through */
html:not(.dark) .section-band-transparent:has(.min-h-screen),
html:not(.dark) .section-band-transparent:first-child {
  background-color: transparent !important;
}
html:not(.dark) .section-band-transparent + .section-band-dark,
html:not(.dark) .section-band-dark + .section-band-transparent {
  border-top: 1px solid rgba(15, 23, 42, 0.055);
}

/* ---- Dark: solid deep bands (never force white); hero transparent ---- */
html.dark .section-band-transparent {
  background-color: #0c1714 !important;
  backdrop-filter: none !important;
}
html.dark .section-band-dark {
  background-color: #111f1b !important;
  backdrop-filter: none !important;
}
html.dark .section-band-transparent:has(.min-h-screen),
html.dark .section-band-transparent:first-child {
  background-color: transparent !important;
}
html.dark .section-band-transparent + .section-band-dark,
html.dark .section-band-dark + .section-band-transparent {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Fade fixed slider only AFTER leaving the hero */
body.fc-scrolled .fixed.inset-0.z-0 {
  opacity: 0.08 !important;
  transition: opacity 0.5s ease;
}
body:not(.fc-scrolled) .fixed.inset-0.z-0 {
  opacity: 1 !important;
  transition: opacity 0.5s ease;
}

/* Header on scroll */
html:not(.dark) body.fc-scrolled .fixed.top-0.left-0.right-0.z-50 {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(10px);
}
html.dark body.fc-scrolled .fixed.top-0.left-0.right-0.z-50 {
  background: rgba(12, 23, 20, 0.94) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}

/* Cards — light */
html:not(.dark) .section-band-transparent .rounded-2xl,
html:not(.dark) .section-band-dark .rounded-2xl,
html:not(.dark) .section-band-transparent .rounded-xl,
html:not(.dark) .section-band-dark .rounded-xl {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Cards — dark */
html.dark .section-band-transparent .rounded-2xl,
html.dark .section-band-dark .rounded-2xl,
html.dark .section-band-transparent .rounded-xl,
html.dark .section-band-dark .rounded-xl {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.section-band-transparent .rounded-2xl:hover,
.section-band-dark .rounded-2xl:hover,
.section-band-transparent .rounded-xl:hover,
.section-band-dark .rounded-xl:hover {
  transform: translateY(-2px);
}

/* Rhythm — not on hero */
.section-band-transparent:not(:has(.min-h-screen)) > .relative,
.section-band-dark > .relative {
  padding-top: clamp(3rem, 5vw, 4.5rem) !important;
  padding-bottom: clamp(3rem, 5vw, 4.5rem) !important;
}