/* Site chrome - the navigation bar and the footer - restyled in the same
 * language as the index banner.
 *
 * Every rule is scoped under .nav-space, a body class set by the page (see
 * layout.html's body_class block), so this can be tried on a page or two
 * before it goes site-wide. To roll it out, put nav-space on the body in
 * layout.html itself - nothing here needs to change.
 */

.nav-space .navbar {
  /* Fully opaque, on purpose, after trying both alternatives:
   *   - a translucent fill reads as a grey slab over a white panel, and
   *     turning its opacity DOWN only makes the grey lighter;
   *   - a fading scrim has no edge, but then content scrolls up through it.
   * An opaque bar has neither problem. It is the darkest stop of the page
   * gradient rather than pure black, so it belongs to the same sky.
   */
  background-color: #04060e;
  background-image: linear-gradient(180deg, #070c20 0%, #04060e 100%);
  /* layout.css forces 1440px, which puts a horizontal scrollbar on any
     narrower window. The bar's content is a single flex row and copes without
     it. */
  min-width: 0;
  gap: 0.25rem;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.95);
  /* Contains the wordmark's glow: the bar holds only links, so there is
     nothing here that needs to overflow. */
  overflow: hidden;
}

/* Note: deliberately NO override of <main class="pt-5">'s 48px padding. The
   bar is 75px, so that looks like a 27px overlap, but every page already
   budgets its own offset on top of it (.main-container has margin-top: 50px,
   the spatial viewer's .controls-container has 25px). Forcing 75px here just
   pushed every panel 27px further down. */

/* A hairline of light along the bottom edge, brightest in the middle - the
   same flourish as the section headings and galaxy labels. Legible now that
   the bar is solid: it reads as the bar's own edge, not as a line drawn over
   the page. */
.nav-space .navbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(150, 180, 255, 0.5) 50%, transparent);
}

/* ---------- links ---------- */

.nav-space .navbar .nav-link {
  padding: 0.55rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(206, 220, 255, 0.82);
  transition: color 180ms ease, text-shadow 180ms ease;
}

.nav-space .navbar .nav-link:hover {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 18px rgba(150, 185, 255, 0.85);
}

/* The underline: hidden until hovered or current, rather than permanently
   drawn under every item (which is why layout.css's bar had no usable hover
   state and no way to show the current page). */
.nav-space .nav-item::after {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(160, 195, 255, 0.95), transparent);
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 200ms ease, transform 200ms ease;
}

.nav-space .nav-item:hover::after {
  background: linear-gradient(90deg,
    transparent, rgba(200, 222, 255, 1), transparent);
  opacity: 1;
  transform: scaleX(1);
}

/* ---------- current page ---------- */

.nav-space .navbar .nav-link.is-active {
  color: #fff;
}

.nav-space .nav-item.is-active::after {
  opacity: 1;
  transform: scaleX(1);
  background: linear-gradient(90deg,
    transparent, #ffffff, transparent);
  box-shadow: 0 0 12px 1px rgba(150, 185, 255, 0.9);
}

/* ---------- wordmark ---------- */

.nav-space .navbar .nav-item-1 {
  /* Sits apart from the links, as a mark rather than another menu entry. */
  margin-right: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 20px;
  color: #fff;
  position: relative;
  /* Own stacking context, so the glow below can sit at z-index -1 and mean
     "behind my text, above the bar" rather than dropping behind the navbar's
     own background. */
  isolation: isolate;
}

/* One soft light behind the wordmark - the banner's idiom of a single glowing
   core, and the only decoration in the bar. Stars are deliberately not used
   here: they would either line up with the fixed field behind the bar, making
   the opaque bar look transparent again, or fail to line up, which reads as a
   rendering fault.
 *
 * The first attempt at this put the gradient on the link's own background,
 * where it was clipped to the box and read as a soft-edged lozenge. This one
 * is a pseudo-element that extends WELL past the text and reaches full
 * transparency before its own edges, so there is no boundary to see. */
.nav-space .navbar .nav-item-1::before {
  content: '';
  position: absolute;
  /* Bigger than the mark in every direction; the fade finishes inside. Kept
     modest vertically, and the bar clips anyway (see overflow below), so the
     light cannot bleed out onto the page under the navbar. */
  inset: -75% -45%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side ellipse,
    rgba(120, 150, 255, 0.30) 0%,
    rgba(120, 150, 255, 0.13) 42%,
    rgba(120, 150, 255, 0) 72%);
}

.nav-space .navbar .nav-item-1:hover {
  text-shadow: 0 0 22px rgba(150, 185, 255, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .nav-space .nav-item::after,
  .nav-space .navbar .nav-link { transition: none; }
}

/* ======================= footer ======================= */

.nav-space .footer-spec {
  position: relative;
  /* Makes the footer its own stacking context, so the star layer's z-index of
     -1 means "behind my content, above my background". Without this, position
     relative + z-index auto is NOT a stacking context, the pseudo-element
     joins the root's instead, and the footer's opaque fill paints over it -
     which is why the stars were invisible. */
  isolation: isolate;
  /* Matches the navbar: the same opaque near-black, mirrored so the darkest
     edge is at the bottom of the page. */
  background-color: #04060e;
  background-image: linear-gradient(180deg, #04060e 0%, #070c20 100%);
  color: rgba(206, 220, 255, 0.8);
  /* Was 175px of fixed height, most of it empty below the logos. */
  min-height: 0;
  padding: 1.6rem 1rem 1.8rem;
  /* Same 1440px scrollbar trap as the navbar had. */
  min-width: 0;
}

/* The navbar's hairline, mirrored onto the footer's top edge, so the two bars
   bracket the page with the same detail. */
.nav-space .footer-spec::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(150, 180, 255, 0.5) 50%, transparent);
}

.nav-space .footer-spec span {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* Institutional logos: settled back a little, so they read as credits rather
   than competing with the page, and lit on hover. */
.nav-space .footer-logos {
  gap: 1.6rem;
  margin-bottom: 0.9rem;
}

.nav-space .ku_logo {
  max-width: 84px;
  height: 84px !important;
  opacity: 0.72;
  transition: opacity 200ms ease, filter 200ms ease;
}

.nav-space .ku_logo:hover {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(150, 185, 255, 0.55));
}

/* layout.css gives .footer-spec .link white text, then .link:hover sends it to
   #000 with !important - black on near-black. Same bug as the body links. */
.nav-space .footer-spec .link {
  color: rgba(157, 192, 255, 0.95) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(157, 192, 255, 0.3);
  transition: color 160ms ease, border-color 160ms ease;
}

.nav-space .footer-spec .link:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .nav-space .ku_logo { transition: none; }
}

/* A sparse scatter of stars in the footer, so the page ends in the same sky it
 * sits in. Deliberately about a third of space-background.css's density and
 * dimmer than its faintest tier: the footer is a terminus with a lot of empty
 * space, and anything denser competes with the copyright line.
 *
 * Not applied to the navbar on purpose. Those stars would either line up with
 * the fixed field behind the bar - making the opaque bar look transparent
 * again - or fail to line up, which reads as a rendering fault. The bar keeps
 * a single light source behind the wordmark instead (see above).
 *
 * z-index -1 puts it above the footer's own background and behind its content,
 * the same arrangement as the page-wide field on <body>.
 */
.nav-space .footer-spec::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 212px 67px, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 199px 194px, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 94px 263px, rgba(255,255,255,0.31) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 240px 80px, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 243px 61px, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 258px 72px, rgba(255,255,255,0.23) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 62px 87px, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 291px 119px, rgba(255,255,255,0.41) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 31px 140px, rgba(255,255,255,0.27) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 163px 86px, rgba(255,255,255,0.31) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 182px 201px, rgba(255,255,255,0.29) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 157px 85px, rgba(255,255,255,0.27) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.4px 1.4px at 496px 274px, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.4px 1.4px at 489px 262px, rgba(255,255,255,0.41) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.4px 1.4px at 170px 288px, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.4px 1.4px at 86px 103px, rgba(255,255,255,0.59) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.4px 1.4px at 440px 477px, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.4px 1.4px at 506px 229px, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.4px 1.4px at 457px 424px, rgba(255,255,255,0.54) 0%, rgba(255,255,255,0) 100%);
  background-size:
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    520px 520px,
    520px 520px,
    520px 520px,
    520px 520px,
    520px 520px,
    520px 520px,
    520px 520px;
  background-repeat: repeat;
}