/* =========================================================
   CloudSpark — Features page CSS
   Only loaded on /features/
   ========================================================= */

/* Hero tweaks (reusa tokens globais) */
.features-hero {
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Sticky subnav */
.features-subnav {
  background: color-mix(in srgb, var(--bs-body-bg), transparent 10%);
  border-bottom: 1px solid var(--bs-border-color);
}
.features-subnav .nav-link {
  color: var(--bs-body-color);
  border-radius: 999px;
}
.features-subnav .nav-link:hover {
  background: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
}

/* Optional: active state if you set it via JS/URL hash */
.features-subnav .nav-link.active {
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
}

/* Media frames spacing on this page */
#automation .fr-media,
#hub .fr-media,
#analytics .fr-media {
  margin-top: 0.25rem;
}

/* --- Fix: Features subnav overlapping the header --- */

/* Coloca a subnav logo abaixo do header sticky */
.features-subnav.sticky-top {
  top: var(--nav-h); /* altura do header definida no custom.css */
  z-index: 1010; /* abaixo do header, acima do conteúdo */
}

/* Garante que o header fica por cima de tudo */
.navbar.sticky-top {
  z-index: 1040;
}

/* Quando clicar nos anchors (#automation etc.), compensa header+subnav */
#automation,
#hub,
#analytics {
  scroll-margin-top: calc(var(--nav-h) + 48px);
}