Light the Stream

<style>
/* ---------- Strong mobile overrides ---------- */
@media (max-width: 500px) {
  /* Cap the header and keep everything inside it */
  .section-instance-879aa8c4-19c7-49b9-87a8-08b44f8e8301.amplify-header {
    height: 72px !important;
    overflow: hidden !important;
  }

  /* Some themes set min-heights on the inner container */
  .amplify-header .container {
    min-height: 72px !important;
  }

  /* Force the logo to be small and fully contained */
  .amplify-header .container h1 img {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    margin: 0 !important;            /* kill the negative pull-down */
    display: block !important;
  }

  /* Reset any nav offset/hamburger spacing */
  nav#amplify-navigation .sl-modern-menu,
  .amplify-navigation .sl-modern-menu {
    margin-left: 0 !important;
  }
}
/* ---------- Tablet safety (optional) ---------- */
@media (min-width: 501px) and (max-width: 1023px) {
  .section-instance-879aa8c4-19c7-49b9-87a8-08b44f8e8301.amplify-header { 
    height: 96px !important; 
    overflow: hidden !important; 
  }
  .amplify-header .container h1 img {
    height: 80px !important;
    max-height: 80px !important;
    margin: 0 !important;
  }
  nav#amplify-navigation .sl-modern-menu,
  .amplify-navigation .sl-modern-menu {
    margin-left: 0 !important;
  }
}

/* ---------- Desktop only ---------- */
@media (min-width: 1024px) {
  /* Cap header height, allow overlapping elements to show */
  .section-instance-879aa8c4-19c7-49b9-87a8-08b44f8e8301.amplify-header {
    height: 150px;        /* hard cap */
    overflow: visible;    /* let the logo hang down */
    position: relative;
    z-index: 2;
  }
.splide__slide {
    -webkit-tap-highlight-color: #225faf; /*adjust to your quicklinks bar color*/
    background: #225faf;
}
@media (min-width: 1024px) {
  .amplify-header .container h1 img {
    height: 220px;
    /* 50px = 200 (logo) - 150 (header cap) */
    /* Pull it down by that 50px plus the tiny bleed */
    margin-bottom: calc(-50px - var(--logo-bleed, 6px));
  }
}

@media (min-width: 1024px) {
  /* De-seam the carousel stack */
  .amplify-carousel,
  .amplify-carousel .splide,
  .amplify-carousel .splide__track,
  .amplify-carousel .splide__list,
  .amplify-carousel .carousel-slide-image {
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Hide any subpixel gap at the bottom of the carousel */
  .amplify-carousel {
    margin-bottom: -1px;
  }

  /* If the line is from the section *after* the carousel having a top border: */
  .amplify-carousel + .amplify-target-locator {
    border-top: 0 !important;
    box-shadow: none !important;
  }
}

  /* Nav sits below the header */
  nav#amplify-navigation.section-instance-7bc2e19f-c46a-49d9-89fc-fd7d1f2b9930.amplify-navigation,
  .section-instance-7bc2e19f-c46a-49d9-89fc-fd7d1f2b9930.amplify-navigation {
    position: relative;
    z-index: 1;
  }

  /* Push links right by actual logo width (JS sets --logo-w). */
  nav#amplify-navigation .sl-modern-menu,
  .amplify-navigation .sl-modern-menu {
    margin-left: var(--logo-w, 180px);
  }

  /* Make sure the carousel renders behind the logo */
  .carousel-slide-image {
    position: relative;
    z-index: 0;
  }
}

/* Mobile unchanged (hamburger etc.) */
</style>

<script>
(function () {
  const nav =
    document.getElementById('amplify-navigation') ||
    document.querySelector('.section-instance-7bc2e19f-c46a-49d9-89fc-fd7d1f2b9930.amplify-navigation');
  const logo = document.querySelector('.amplify-header .container h1 img');

  if (!nav || !logo) return;

  // tweak this if you want more/less bleed onto the carousel (CSS uses it)
  nav.style.setProperty('--logo-bleed', '6px');

  function setNavOffset() {
    if (window.innerWidth < 1024) {
      nav.style.removeProperty('--logo-w');
      return;
    }
    const w = Math.ceil(logo.getBoundingClientRect().width);
    nav.style.setProperty('--logo-w', w + 'px');
  }

  if (logo.complete) setNavOffset();
  else logo.addEventListener('load', setNavOffset);

  window.addEventListener('resize', setNavOffset);
})();
</script>