/* V7.1 — header alignment and scroll-behaviour repair.
 * Loaded after ui-v7-candy.css. Keep this layer intentionally small.
 */

/* The live foundation header is not a permanently pinned app bar.
   Let both header rows move as one normal document block. */
.foundation-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

.module-nav {
  position: relative !important;
  top: auto !important;
}

/* Center both rows on the same rail. This fixes the logo being flush to the viewport
   while the fundraising navigation starts further in. */
.foundation-header__inner,
.module-nav__inner {
  width: min(1320px, calc(100% - 48px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.foundation-header__inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.module-nav__inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* module-nav.css already drew a red dot with ::before. V7 added a real span,
   which produced the double-dot visible in the preview. Keep only the semantic span. */
.module-nav__brand::before {
  content: none !important;
  display: none !important;
}

.module-nav__brand > span {
  flex: 0 0 7px !important;
}

/* Once the header scrolls naturally, anchor the menu to its trigger instead of
   pinning the panel to viewport coordinates. */
.foundation-menu__panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  max-height: min(620px, calc(100vh - 96px)) !important;
}

@media (max-width: 820px) {
  .foundation-header__inner,
  .module-nav__inner {
    width: calc(100% - 28px) !important;
  }
}

@media (max-width: 560px) {
  .foundation-header__inner,
  .module-nav__inner {
    width: calc(100% - 20px) !important;
  }
}