/* Full-bleed, blue network hero for the homepage.
   The CSS width:100vw / negative-margin trick for breaking a nested
   element out to the viewport edge assumes the page's content column is
   symmetric around the viewport centre -- Quarto's page-columns grid
   doesn't always hold that, so the band was landing short of the true
   left (and right) edge. assets/js/network-header.js instead measures
   the band's actual offset with getBoundingClientRect() and sets an
   exact negative margin + width in JS, which works regardless of
   whatever grid/padding Quarto nests it in. overflow-x:hidden below is
   just a safety net against a stray sub-pixel horizontal scrollbar.

   .network-header-inner re-centres the logo/title at the site's normal
   980px reading width so it lines up with the rest of the page, and
   .network-header-text caps the readable column so the network stays
   clear of the words. The canvas and the gradient mask over it are both
   inserted by the JS: the canvas fills the band edge to edge (sized
   purely by CSS so its backing store never gets stretched out of
   proportion), the mask fades it out behind the text so the network
   reads as prominent on the right and recedes on the left. */

html, body {
  overflow-x: hidden;
}

.network-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #021E45 0%, #03326C 60%);
  text-align: left;
  padding: 4rem 0;
  border-bottom: none;
  min-height: 22rem;
  display: flex;
  align-items: center;
}

/* .network-header-canvas and .network-header-mask are inserted as direct
   children of .hero.network-header, which makes them targets of the base
   stylesheet's ".hero > * { max-width: 42rem; margin: auto }" rule (meant
   for the plain centred hero). Left alone, that shrinks and centres these
   absolutely-positioned, inset:0 layers into a 672px box instead of
   letting them stretch full width -- invisible below 672px, a hard seam
   above it. Overriding max-width/margin here cancels that. */
.network-header-canvas,
.network-header-mask {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.network-header-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

.network-header-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(2, 30, 69, 0.92) 0%,
    rgba(2, 30, 69, 0.55) 45%,
    rgba(2, 30, 69, 0) 75%
  );
}

.network-header-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.network-header-text {
  max-width: 30rem;
}

/* Explicit (not just relying on flex's row default) so this always wins over
   the base theme's ".hero-brand { flex-direction: column }" mobile rule,
   regardless of viewport width -- the icon stays beside the wordmark, never
   stacked above it, anywhere in this header. */
.network-header .hero-brand {
  flex-direction: row;
  justify-content: flex-start;
}

.network-header .hero-tagline {
  color: rgba(255, 255, 255, 0.85);
}

.network-header .hero-brand,
.network-header .brand-title {
  color: #fff;
}

.network-header .brand-subtitle {
  color: var(--tp-ucd-green);
}

@media (prefers-reduced-motion: reduce) {
  .network-header-canvas {
    display: none;
  }
}

@media (max-width: 767px) {
  .network-header {
    padding: 2.6rem 0;
    min-height: 16rem;
  }
}

/* The base .hero-brand/.hero-wordmark rules centre the logo lockup and stack
   the icon above the wordmark at this breakpoint (for the plain centred hero
   design) -- override back to a left-aligned row, since the icon should
   stay beside the text at every width in this header, not above it. */
@media (max-width: 480px) {
  .network-header .hero-brand {
    text-align: left;
    gap: 0.85rem;
  }

  .network-header .hero-wordmark {
    align-items: flex-start;
  }
}