/* SpaceOpsLab shared primary navigation — unified v11
   Load AFTER each page's main stylesheet:
   <link rel="stylesheet" href="/assets/css/site-nav.css?v=11">

   Required HTML:
   <div id="siteNav" data-active="activity|weather|iss|tracker|passes|about"></div>

   Required script:
   <script src="/assets/js/site-nav.js?v=11"></script>
*/

.sol-site-header{
  --sol-nav-text:#9fb0cc;
  --sol-nav-text-strong:#f7fbff;
  --sol-nav-icon:#8ddfff;
  --sol-nav-active:#7ee787;
  --sol-nav-border:rgba(154,215,255,.18);
  --sol-nav-bg-top:rgba(8,16,31,.88);
  --sol-nav-bg-bottom:rgba(5,11,24,.78);
  --sol-nav-hover:rgba(89,195,255,.08);
  --sol-nav-active-bg:rgba(89,195,255,.11);

  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 8px!important;
  padding:0!important;
  position:relative!important;
  z-index:1000!important;
  isolation:isolate;
  color-scheme:dark;
}

/* Use the same light navigation treatment on every page. */
:root[data-theme="light"] .sol-site-header,
body[data-theme="light"] .sol-site-header{
  --sol-nav-text:#354a63;
  --sol-nav-text-strong:#0f2137;
  --sol-nav-icon:#159bc4;
  --sol-nav-active:#1eaa59;
  --sol-nav-border:rgba(50,79,111,.26);
  --sol-nav-bg-top:rgba(211,219,228,.94);
  --sol-nav-bg-bottom:rgba(190,201,213,.92);
  --sol-nav-hover:rgba(18,82,119,.10);
  --sol-nav-active-bg:rgba(255,255,255,.30);

  color-scheme:light;
}

.sol-site-header *,
.sol-site-header *::before,
.sol-site-header *::after{
  box-sizing:border-box;
}

.sol-site-header .sol-nav{
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  margin:0!important;
  padding:0 6px 0 9px!important;
  border:1px solid var(--sol-nav-border)!important;
  border-radius:11px!important;
  background:
    linear-gradient(180deg,var(--sol-nav-bg-top),var(--sol-nav-bg-bottom))!important;
  box-shadow:0 8px 22px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(12px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
  overflow:hidden!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  line-height:1!important;
}

:root[data-theme="light"] .sol-site-header .sol-nav,
body[data-theme="light"] .sol-site-header .sol-nav{
  box-shadow:0 6px 18px rgba(31,49,70,.16)!important;
}

.sol-site-header .sol-brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
  height:38px!important;
  margin:0 10px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  text-decoration:none!important;
  font-size:13px!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.sol-site-header .sol-brand:hover,
.sol-site-header .sol-brand:focus,
.sol-site-header .sol-brand:focus-visible{
  background:transparent!important;
  color:inherit!important;
  text-decoration:none!important;
  outline:none!important;
  box-shadow:none!important;
}

.sol-site-header .sol-brand-mark{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:23px!important;
  height:23px!important;
  flex:0 0 23px!important;
  margin:0!important;
  padding:0!important;
  filter:drop-shadow(0 0 5px rgba(126,231,135,.22))!important;
}

.sol-site-header .sol-brand-mark svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
}

/* Subtle SpaceOpsLab radio pulse used by the shared navigation logo. */
.sol-site-header .sol-orbit-radiation{
  opacity:0;
  stroke:#7ee787;
  stroke-width:3.2;
  stroke-linecap:round;
  fill:none;
  transform-origin:76px 43px;
  filter:drop-shadow(0 0 8px rgba(126,231,135,.45));
  pointer-events:none;
}

.sol-site-header .sol-orbit-radiation-1{
  animation:solOrbitRadiationPulse 5.5s ease-out .8s infinite;
}

.sol-site-header .sol-orbit-radiation-2{
  animation:solOrbitRadiationPulse 5.5s ease-out 1.25s infinite;
}

@keyframes solOrbitRadiationPulse{
  0%{
    opacity:0;
    transform:scale(.72);
  }
  10%{
    opacity:.95;
    transform:scale(1.02);
  }
  22%{
    opacity:0;
    transform:scale(1.35);
  }
  100%{
    opacity:0;
    transform:scale(1.35);
  }
}

.sol-site-header .sol-brand-name{
  display:inline-flex!important;
  align-items:baseline!important;
  font-size:13px!important;
  line-height:1!important;
}

.sol-site-header .sol-brand-space,
.sol-site-header .sol-brand-lab{
  color:#7ee787!important;
  font-weight:900!important;
}

.sol-site-header .sol-brand-ops{
  color:#59c3ff!important;
  font-weight:850!important;
}

:root[data-theme="light"] .sol-site-header .sol-brand-space,
:root[data-theme="light"] .sol-site-header .sol-brand-lab,
body[data-theme="light"] .sol-site-header .sol-brand-space,
body[data-theme="light"] .sol-site-header .sol-brand-lab{
  color:#168d49!important;
}

:root[data-theme="light"] .sol-site-header .sol-brand-ops,
body[data-theme="light"] .sol-site-header .sol-brand-ops{
  color:#087da6!important;
}

.sol-site-header .sol-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:2px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  height:38px!important;
  margin:0!important;
  padding:0!important;
}

.sol-site-header .sol-link{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  flex:0 0 auto!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0 9px!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--sol-nav-text)!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  font-size:12px!important;
  font-weight:720!important;
  line-height:1!important;
  letter-spacing:.005em!important;
  text-shadow:none!important;
  transform:none!important;
  transition:color .15s ease,background-color .15s ease!important;
}

.sol-site-header .sol-link::after{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  bottom:1px!important;
  width:auto!important;
  height:2px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--sol-nav-active)!important;
  opacity:0!important;
  transform:scaleX(.45)!important;
  transform-origin:center!important;
  transition:opacity .15s ease,transform .15s ease!important;
}

.sol-site-header .sol-link:hover,
.sol-site-header .sol-link:focus-visible{
  color:var(--sol-nav-text-strong)!important;
  background:var(--sol-nav-hover)!important;
  text-decoration:none!important;
  outline:none!important;
  transform:none!important;
}

.sol-site-header .sol-link:hover::after,
.sol-site-header .sol-link:focus-visible::after{
  opacity:.45!important;
  transform:scaleX(1)!important;
}

.sol-site-header .sol-link[aria-current="page"]{
  color:var(--sol-nav-text-strong)!important;
  background:var(--sol-nav-active-bg)!important;
  border:0!important;
  box-shadow:none!important;
}

.sol-site-header .sol-link[aria-current="page"]::after{
  opacity:1!important;
  transform:scaleX(1)!important;
}

.sol-site-header .sol-link-icon{
  display:inline-grid!important;
  place-items:center!important;
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
  margin:0!important;
  padding:0!important;
  color:var(--sol-nav-icon)!important;
  line-height:0!important;
}

.sol-site-header .sol-link-icon svg,
.sol-site-header .sol-link-icon img{
  display:block!important;
  width:14px!important;
  height:14px!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
}

.sol-site-header .sol-link-icon img{
  filter:none!important;
  opacity:.95!important;
}

.sol-site-header .sol-link[aria-current="page"] .sol-link-icon{
  color:var(--sol-nav-active)!important;
}

.sol-site-header .sol-nav-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  flex:0 0 auto!important;
  width:42px!important;
  height:30px!important;
  margin:0!important;
  padding:0!important;
}

/* Theme switch geometry is fully owned here so page CSS cannot shift it. */
.sol-site-header .theme-toggle{
  appearance:none!important;
  -webkit-appearance:none!important;
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  min-width:42px!important;
  height:28px!important;
  min-height:28px!important;
  margin:0!important;
  padding:3px!important;
  border:1px solid rgba(154,215,255,.22)!important;
  border-radius:999px!important;
  background:rgba(3,9,20,.48)!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transform:none!important;
}

:root[data-theme="light"] .sol-site-header .theme-toggle,
body[data-theme="light"] .sol-site-header .theme-toggle{
  border-color:rgba(74,112,151,.20)!important;
  background:rgba(236,241,246,.64)!important;
}

.sol-site-header .theme-toggle:hover{
  border-color:rgba(126,231,255,.42)!important;
}

.sol-site-header .theme-toggle:focus-visible{
  outline:2px solid rgba(89,195,255,.50)!important;
  outline-offset:2px!important;
}

.sol-site-header .toggle-track{
  position:relative!important;
  display:block!important;
  width:34px!important;
  min-width:34px!important;
  height:20px!important;
  min-height:20px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(3,8,18,.56)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

:root[data-theme="light"] .sol-site-header .toggle-track,
body[data-theme="light"] .sol-site-header .toggle-track{
  background:rgba(119,142,165,.38)!important;
}

.sol-site-header .toggle-icon{
  position:absolute!important;
  top:0!important;
  z-index:1!important;
  display:grid!important;
  place-items:center!important;
  width:17px!important;
  height:20px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif!important;
  font-size:9px!important;
  font-weight:400!important;
  line-height:1!important;
  color:inherit!important;
  transform:none!important;
  pointer-events:none!important;
}

.sol-site-header .toggle-icon:first-child{
  left:0!important;
}

.sol-site-header .toggle-icon:nth-child(2){
  right:0!important;
}

.sol-site-header .toggle-thumb{
  position:absolute!important;
  top:2px!important;
  left:2px!important;
  z-index:2!important;
  display:block!important;
  width:16px!important;
  height:16px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#ffffff,#d9e8ff)!important;
  box-shadow:0 2px 7px rgba(0,0,0,.24)!important;
  transform:translateX(0)!important;
  transition:transform .18s ease,background .18s ease!important;
  pointer-events:none!important;
}

:root[data-theme="light"] .sol-site-header .toggle-thumb,
body[data-theme="light"] .sol-site-header .toggle-thumb{
  background:#ffffff!important;
  transform:translateX(14px)!important;
}

/* Optional heading helpers retained for pages that still use them. */
.sol-site-header .sol-page-heading{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:0 4px!important;
}

.sol-site-header .sol-page-heading h1{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(18px,1.7vw,25px)!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:.01em!important;
  text-shadow:0 2px 12px rgba(0,0,0,.34)!important;
}

.sol-site-header .sol-page-kicker{
  color:rgba(199,210,254,.74)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

@media (max-width:980px){
  .sol-site-header .sol-nav{
    gap:5px!important;
  }

  .sol-site-header .sol-brand-name{
    display:none!important;
  }

  .sol-site-header .sol-link{
    padding-inline:8px!important;
  }
}

@media (max-width:760px){
  .sol-site-header .sol-nav{
    overflow:hidden!important;
    padding-right:5px!important;
  }

  .sol-site-header .sol-links{
    justify-content:flex-start!important;
    flex:1 1 auto!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }

  .sol-site-header .sol-links::-webkit-scrollbar{
    display:none!important;
  }

  .sol-site-header .sol-link{
    font-size:12px!important;
  }

  .sol-site-header .sol-link-icon{
    display:none!important;
  }

  .sol-site-header .sol-nav-actions{
    position:relative!important;
    right:auto!important;
    z-index:4!important;
    margin-left:0!important;
    flex:0 0 50px!important;
    background:linear-gradient(90deg,transparent 0,var(--sol-nav-bg-bottom) 18%)!important;
    padding-left:8px!important;
    width:50px!important;
  }

  .sol-site-header .sol-page-kicker{
    display:none!important;
  }
}

@media (max-width:520px){
  .sol-site-header .sol-nav{
    border-radius:10px!important;
  }

  .sol-site-header .sol-brand-mark{
    width:21px!important;
    height:21px!important;
    flex-basis:21px!important;
  }

  .sol-site-header .sol-link{
    padding-inline:8px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .sol-site-header .sol-link,
  .sol-site-header .sol-link::after,
  .sol-site-header .toggle-thumb{
    transition:none!important;
  }

  .sol-site-header .sol-orbit-radiation-1,
  .sol-site-header .sol-orbit-radiation-2{
    animation:none!important;
    opacity:0!important;
  }
}

/* vNext2 — readable theme symbols above the moving thumb.
   Text symbols are used instead of colour-emoji so their contrast is reliable. */
.sol-site-header .toggle-icon{
  z-index:3!important;
  font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif!important;
  font-weight:800!important;
  text-shadow:none!important;
}

.sol-site-header .toggle-icon-moon{
  color:#274766!important;
  font-size:15px!important;
}

.sol-site-header .toggle-icon-sun{
  color:#ff9f0a!important;
  font-size:14px!important;
  text-shadow:0 0 5px rgba(255,159,10,.28)!important;
}

:root[data-theme="light"] .sol-site-header .toggle-icon-moon,
body[data-theme="light"] .sol-site-header .toggle-icon-moon{
  color:#173a5e!important;
}

:root[data-theme="light"] .sol-site-header .toggle-icon-sun,
body[data-theme="light"] .sol-site-header .toggle-icon-sun{
  color:#e56f00!important;
  text-shadow:none!important;
}

