/* Flopify-specific layout offsets for the shared Sync Inc chrome.

   The chrome itself — markup and styling — lives in /site-chrome.js and
   /site-chrome.css. All this file does is make room for it on this one
   page, which is unusual in having a second nav bar of its own stacked
   directly beneath the site nav. */

/* Line the shared footer up with Flopify's .section width. */
:root {
  --sc-footer-max: 1000px;
}

/* Push Flopify's own nav down below the Sync Inc nav. */
#flopify-nav {
  top: 56px !important;
}

/* Scoped to body's direct child so this doesn't also match the unrelated
   inner <main> that the React app renders inside #chart-container.
   #chart-container is position:absolute with no explicit top, so its
   static position is derived from this padding — bumping it here (rather
   than setting an explicit top on #chart-container) reproduces the same
   layout math the original single-nav page already relied on. */
body > main {
  padding-top: calc(5rem + 56px);
}

.section {
  scroll-margin-top: calc(6rem + 56px);
}