/* Marketing chrome layout — loaded on all Jinja marketing pages before React hydrates. */
:root {
  --marketing-navbar-height: 5.0625rem; /* fallback until JS measures the live navbar */
  /*
   * Prefer large viewport height (lvh), not svh. On mobile Safari/Chrome, svh
   * tracks the URL-bar show/hide while scrolling, so a full-bleed object-cover
   * video re-crops and looks like a zoom. lvh stays stable (Maple-style locked
   * hero). Fall back to 100vh when lvh is unsupported.
   */
  --marketing-hero-height: max(520px, calc(100vh - var(--marketing-navbar-height)));
}

@supports (height: 100lvh) {
  :root {
    --marketing-hero-height: max(520px, calc(100lvh - var(--marketing-navbar-height)));
  }
}

@media (max-width: 768px) {
  :root {
    /* Floor matches Maple's phone hero min-height (~480px). */
    --marketing-hero-height: max(480px, calc(100vh - var(--marketing-navbar-height)));
  }

  @supports (height: 100lvh) {
    :root {
      --marketing-hero-height: max(480px, calc(100lvh - var(--marketing-navbar-height)));
    }
  }
}

#marketing-chrome-header {
  /* Fixed nav lives here; wrapper must not reserve extra document flow height. */
  height: 0;
  overflow: visible;
}

/* Reserve space for the fixed navbar once; heroes and page content start below it. */
main.flex-1,
#marketing-root > main {
  padding-top: var(--marketing-navbar-height, 5.0625rem);
}

.marketing-navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
}

html {
  scroll-padding-top: var(--marketing-navbar-height, 5.0625rem);
}