/* Shared site navigation for legacy content pages. */
.universal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  padding: 0 !important;
  color: #faf7ff !important;
  background: rgba(10, 7, 16, .96) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(192, 132, 252, .24) !important;
  backdrop-filter: blur(16px);
}

.universal-header .header-inner {
  position: relative;
  width: min(calc(100% - 40px), 1180px) !important;
  min-height: 82px;
  margin-inline: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px;
}

.universal-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  color: #faf7ff !important;
  text-decoration: none !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 850 !important;
  letter-spacing: -.03em !important;
}

.universal-header .brand img {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: contain;
}

.universal-header .brand > span {
  display: inline-flex !important;
  align-items: baseline !important;
  color: inherit !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1.18em !important;
  font-style: normal !important;
  font-weight: 850 !important;
  letter-spacing: -.055em !important;
  line-height: 1 !important;
}

.universal-header .brand > span > span {
  margin-left: .04em !important;
  color: inherit !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.08em !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -.045em !important;
}

.universal-header .nav-toggle {
  display: block !important;
  width: auto !important;
  min-width: 48px;
  min-height: 48px;
  margin: 0 0 0 auto !important;
  padding: 10px !important;
  border: 1px solid rgba(192, 132, 252, .34) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(168, 85, 247, .13), rgba(73, 37, 101, .16)) !important;
  color: #faf7ff !important;
  box-shadow: none !important;
  cursor: pointer;
}

.universal-header .nav-toggle:hover {
  border-color: #c084fc !important;
  background: rgba(168, 85, 247, .22) !important;
  box-shadow: 0 0 26px rgba(168, 85, 247, .22) !important;
}

.universal-header .nav-toggle span:not(.sr-only) {
  display: block !important;
  width: 26px !important;
  height: 2px !important;
  margin: 5px 0 !important;
  padding: 0 !important;
  background: currentColor !important;
  border: 0 !important;
  transition: transform .18s, opacity .18s;
}

.universal-header .nav-toggle[aria-expanded="true"] span:nth-last-child(3) { transform: translateY(7px) rotate(45deg); }
.universal-header .nav-toggle[aria-expanded="true"] span:nth-last-child(2) { opacity: 0; }
.universal-header .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

.universal-header .primary-nav {
  display: none !important;
  position: absolute !important;
  inset: calc(100% + 10px) 0 auto auto !important;
  width: min(360px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 110px);
  margin: 0 !important;
  padding: 16px !important;
  overflow: auto;
  align-items: stretch !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: linear-gradient(150deg, rgba(30, 19, 43, .99), rgba(10, 8, 15, .99)) !important;
  border: 1px solid rgba(192, 132, 252, .44) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .56), 0 0 40px rgba(126, 34, 206, .12) !important;
}

.universal-header .primary-nav.is-open { display: flex !important; }

.universal-header .primary-nav a {
  display: block !important;
  margin: 0 !important;
  padding: 12px !important;
  color: #eee7f6 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  text-align: left !important;
  text-decoration: none !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

.universal-header .primary-nav a:hover,
.universal-header .primary-nav a[aria-current="page"] {
  color: #f4e8ff !important;
  background: linear-gradient(90deg, rgba(168, 85, 247, .26), rgba(168, 85, 247, .07)) !important;
}

.universal-header .primary-nav .nav-cta {
  margin-top: 8px !important;
  border: 1px solid #c084fc !important;
  color: #fff !important;
  background: linear-gradient(90deg, #6d28d9, #9333ea) !important;
  text-align: center !important;
}

.universal-header .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.universal-header a:focus-visible,
.universal-header button:focus-visible {
  outline: 3px solid #ead7ff !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px rgba(168, 85, 247, .22) !important;
}

/* The video library previously carried a second, site-wide sidebar menu. */
body > .universal-header + .app {
  grid-template-columns: 1fr !important;
  grid-template-rows: 56px 1fr !important;
  grid-template-areas: "header" "main" !important;
  height: calc(100dvh - 82px) !important;
}

body > .universal-header + .app > aside[aria-label="Primary"] { display: none !important; }

@media (max-width: 760px) {
  .universal-header .header-inner {
    width: min(calc(100% - 30px), 1180px) !important;
    min-height: 70px;
  }
  .universal-header .brand img { width: 44px !important; height: 44px !important; }
  .universal-header .primary-nav {
    top: calc(100% + 8px) !important;
    width: min(360px, calc(100vw - 30px)) !important;
  }
  body > .universal-header + .app { height: calc(100dvh - 70px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .universal-header * { transition-duration: .01ms !important; }
}