/* Spectra Portal Site Components
   Site-level composition built on Spectra Framework components/tokens.
   Keep page-specific hero/editor/roadmap styling in page CSS.
*/

html{
  scroll-behavior:smooth;
}

body.sp-web-shell{
  min-inline-size:0;
  min-block-size:var(--sp-page-min-h, 100svh);
  margin:var(--sp-0, 0);
  overflow-x:hidden;
  color:var(--sp-text);
  background:var(--sp-bg);
  font-family:var(--sp-font, system-ui, sans-serif);
}

body.sp-web-shell--ambient{
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--sp-accent) 10%, transparent), transparent calc(var(--sp-container-narrow, 42rem) / 3.05)),
    radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--sp-info) 7%, transparent), transparent calc(var(--sp-container-narrow, 42rem) / 3.2)),
    linear-gradient(180deg, color-mix(in srgb, var(--sp-bg) 88%, var(--sv-shell-blue, var(--sp-info)) 5%) 0%, color-mix(in srgb, var(--sp-bg) 91%, var(--sp-accent) 4%) 48%, color-mix(in srgb, var(--sp-bg) 90%, black) 100%);
}

.sp-web-shell a{
  color:inherit;
}

.sp-web-shell__skipLink{
  position:fixed;
  inset-block-start:var(--sp-3, .75rem);
  inset-inline-start:var(--sp-3, .75rem);
  z-index:var(--sp-layer-toast, 1000);
  transform:translateY(calc(var(--sp-10, 2.5rem) * -1));
  padding:var(--sp-2, .5rem) var(--sp-4, 1rem);
  border:var(--sp-border-w-1, 1px) solid var(--sv-border-soft, color-mix(in srgb, var(--sp-accent) 20%, transparent));
  border-radius:var(--sp-radius-round, 999px);
  background:var(--sp-surface);
  color:var(--sp-text);
  text-decoration:none;
  opacity:var(--sp-opacity-0, 0);
  pointer-events:none;
}

.sp-web-shell__skipLink:focus,
.sp-web-shell__skipLink:focus-visible{
  transform:translateY(var(--sp-0, 0));
  opacity:var(--sp-opacity-100, 1);
  pointer-events:auto;
}

.sp-header--ambient{
  --sp-header-bg:
    linear-gradient(90deg,
      color-mix(in srgb, var(--sp-surface) 70%, var(--sp-info) 22%),
      color-mix(in srgb, var(--sp-surface) 62%, var(--sv-shell-violet, var(--sp-accent)) 24%));
  --sp-header-backdrop-filter:blur(calc(var(--sp-6, 1.5rem) - var(--sp-2, .5rem)));

  background:var(--sp-header-bg);
  color:var(--sp-text);
  border-bottom:var(--sp-border-1, 1px solid color-mix(in srgb, var(--sp-text) 10%, transparent));
  backdrop-filter:var(--sp-header-backdrop-filter);
}

.sp-web-shell__header{
  --sp-header-min-block-size:var(--sv-header-h, 4.5rem);
  position:relative;
  z-index:var(--sp-layer-sticky, 100);
}

.sp-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4, 1rem);
  min-block-size:var(--sp-header-min-block-size, auto);
  padding-block:var(--sp-3, .75rem);
}

.sp-header__actions{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2, .5rem);
}

.sp-web-shell__container,
.sp-web-shell__headerInner,
.sp-web-shell__main,
.sp-web-shell__footer{
  width:min(var(--sv-page-max, 76rem), calc(100% - var(--sv-page-pad, 2rem)));
  margin-inline:auto;
}

.sp-web-shell__main{
  padding-block:var(--sp-0, 0) calc(var(--sp-8, 2rem) + var(--sp-4, 1rem));
}

.sp-web-shell__main--centered{
  min-block-size:calc(100svh - var(--sv-header-h, 0px));
  display:grid;
  place-items:center;
  padding-block:clamp(var(--sp-5, 1.25rem), 8svh, var(--sp-10, 2.5rem));
}

.sp-web-shell__section{
  padding-block:var(--sv-section-pad, clamp(3rem, 7vh, 6rem));
}

.sp-web-shell__sectionHeader{
  max-width:calc(var(--sp-content-max, 44rem) + var(--sp-6, 1.5rem));
}

.sp-web-shell__sectionHeader > :first-child{
  margin-block-start:var(--sp-0, 0);
}

.sp-web-shell__sectionHeader > :last-child{
  margin-block-end:var(--sp-0, 0);
}

.sp-web-shell__sectionHeader p{
  color:var(--sp-text-muted);
  line-height:var(--sp-lh-3, 1.7);
}

.sp-web-shell__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap:var(--sp-4, 1rem);
}

.sp-footer--framed{
  display:block;
  margin-block:var(--sp-6, 1.5rem) var(--sp-4, 1rem);
  padding:var(--sp-0, 0);
  border:0;
  background:transparent;
  color:color-mix(in srgb, var(--sp-text-muted) 86%, var(--sp-text) 14%);
}

.sp-footer--minimal{
  display:block;
  margin:var(--sp-0, 0);
  padding:var(--sp-4, 1rem) var(--sp-0, 0);
  border:0;
  background:transparent;
  color:color-mix(in srgb, var(--sp-text-muted) 86%, var(--sp-text) 14%);
}

.sp-footer__panel{
  border:var(--sp-footer-panel-border, var(--sp-border-w-1, 1px) solid color-mix(in srgb, var(--sp-accent) 16%, transparent));
  border-radius:var(--sp-footer-panel-radius, var(--sp-radius-4, 1rem));
  background:var(--sp-footer-panel-bg, linear-gradient(90deg, color-mix(in srgb, var(--sp-surface) 88%, var(--sp-info) 6%), color-mix(in srgb, var(--sp-surface) 92%, var(--sp-accent) 4%)));
  box-shadow:var(--sp-footer-panel-shadow, inset 0 1px 0 color-mix(in srgb, var(--sp-text) 5%, transparent), 0 var(--sp-2, .5rem) var(--sp-8, 2rem) color-mix(in srgb, black 16%, transparent));
}

.sp-web-shell__footerPanel{
  --sp-footer-panel-border:var(--sp-border-w-1, 1px) solid color-mix(in srgb, var(--sv-shell-blue, var(--sp-info)) 16%, var(--sp-accent) 14%);
  --sp-footer-panel-bg:
    linear-gradient(90deg,
      color-mix(in srgb, var(--sp-surface) 86%, var(--sv-shell-blue, var(--sp-info)) 8%),
      color-mix(in srgb, var(--sp-surface) 90%, var(--sp-accent) 4%));
}

.sp-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4, 1rem);
  padding:var(--sp-3, .75rem) var(--sp-4, 1rem);
}

.sp-footer--minimal .sp-footer__inner{
  justify-content:center;
  gap:var(--sp-2, .5rem);
  padding:var(--sp-0, 0);
}

.sp-footer__brand,
.sp-footer__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-2, .5rem);
  min-inline-size:0;
  color:inherit;
  font-size:var(--sp-fs-2, .875rem);
  line-height:var(--sp-lh-2, 1.4);
}

.sp-footer--minimal .sp-footer__meta{
  justify-content:center;
}

.sp-footer__dot{
  color:color-mix(in srgb, var(--sp-text-muted) 56%, transparent);
}

.sp-footer__legalLinks{
  display:flex;
  align-items:center;
  gap:var(--sp-4, 1rem);
  flex:0 0 auto;
  margin-left:auto;
  color:inherit;
  font-size:var(--sp-fs-2, .875rem);
  line-height:var(--sp-lh-2, 1.4);
}

.sp-footer--framed .sp-footer__legalLinks{
  color:color-mix(in srgb, var(--sp-accent) 68%, var(--sp-text-muted) 32%);
}

.sp-footer--minimal .sp-footer__legalLinks{
  gap:var(--sp-2, .5rem);
  flex:0 1 auto;
  margin-left:var(--sp-0, 0);
  color:color-mix(in srgb, var(--sp-accent) 58%, var(--sp-text-muted) 42%);
}

.sp-footer__link,
.sp-footer__legalLinks a{
  color:inherit;
  text-decoration:none;
}

.sp-footer__link:hover,
.sp-footer__legalLinks a:hover{
  color:var(--sp-text);
}

@media (max-width:52rem){
  .sp-web-shell__grid--four{
    grid-template-columns:repeat(2, minmax(var(--sp-0, 0), 1fr));
  }
}

@media (max-width:40rem){
  .sp-header__inner--stack-sm,
  .sp-web-shell__headerInner{
    align-items:flex-start;
    flex-direction:column;
    padding-block:var(--sp-3, .75rem);
  }

  .sp-web-shell__nav{
    width:100%;
    justify-content:space-between;
    gap:var(--sp-2, .5rem);
    font-size:var(--sp-fs-2, .875rem);
  }

  .sp-web-shell__main{
    padding-block-end:var(--sp-8, 2rem);
  }

  .sp-web-shell__main--centered{
    align-items:start;
    min-block-size:calc(100svh - var(--sp-10, 2.5rem));
    padding-block:var(--sp-6, 1.5rem);
  }

  .sp-web-shell__grid,
  .sp-web-shell__grid--four{
    grid-template-columns:1fr;
  }

  .sp-footer__inner{
    align-items:flex-start;
    flex-direction:column;
  }

  .sp-footer--minimal .sp-footer__inner{
    align-items:center;
  }

  .sp-footer__legalLinks{
    flex-wrap:wrap;
    margin-left:0;
  }

  .sp-footer--minimal .sp-footer__legalLinks{
    justify-content:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .sp-web-shell *,
  .sp-web-shell *::before,
  .sp-web-shell *::after{
    scroll-behavior:auto!important;
  }
}