/* GE HealthCare CI4Ops chrome — header + footer.
   Implemented from Figma (GEHC Design Documentation):
     desktop header  81-9952     mobile header  81-9956
     desktop footer  85-6641     mobile footer  85-6672
   Tokens: brand #6022a6 (header bar), footer surface #3f1966,
   footer stroke #512286, text-secondary #f4f1f8. Mobile breakpoint 768px. */

@font-face {
  font-family: "Source Sans Pro";
  src: url("../assets/fonts/SourceSansPro-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../assets/fonts/SourceSansPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../assets/fonts/SourceSansPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ge-brand: #6022a6;          /* header bar */
  --ge-footer-surface: #3f1966; /* footer bar */
  --ge-footer-stroke: #512286;  /* footer divider */
  --ge-text-primary: #ffffff;
  --ge-text-secondary: #f4f1f8; /* copyright, rendered at 60% opacity */
  --ge-radius-md: 8px;          /* button corner */
  --ge-radius-pill: 999px;      /* login avatar */
  --chrome-frame: 1440px;       /* Figma design-frame width */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #202020;
  background: #fff;
}

/* keep these scoped to the page chrome so the advisor manages its own */
.site-header img,
.site-footer img { display: block; }

.site-header :focus-visible,
.site-footer :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============================ HEADER ============================ */
.site-header { background: var(--ge-brand); }

.header-inner {
  max-width: var(--chrome-frame);
  margin: 0 auto;
  padding: 12px clamp(16px, 4.3vw, 62px);
  min-height: 64px; /* hold the design bar height now that the login avatar is gone */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo { display: inline-flex; align-items: center; }
.header-logo img { height: 32px; width: auto; } /* white logo asset; no recolor needed */

@media (min-width: 835px) and (max-width: 1024px) {
  .header-inner { padding: 12px 40px; }
}

@media (max-width: 767.98px) {
  .header-inner { padding: 8px 16px; min-height: 56px; }
  .header-logo img { height: 27.5px; }
}

/* placed after the mobile block so it wins in the 577–767.98px overlap */
@media (min-width: 577px) and (max-width: 834.98px) {
  .header-inner { padding: 12px 40px; }
}

/* ============================ MAIN ============================ */
.page-main { min-height: 40vh; }

/* full-bleed: the Zoovu advisor manages its own inner width/centering */
.content-slot {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ============================ FOOTER ============================ */
.site-footer {
  background: var(--ge-footer-surface);
  color: var(--ge-text-primary);
}

.footer-inner {
  max-width: var(--chrome-frame);
  margin: 0 auto;
  padding: 64px clamp(24px, 4.44vw, 62px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.footer-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.footer-logo img { height: 31px; width: auto; }

.footer-contact {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-contact-text {
  width: 251px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ge-text-primary);
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid #fff;
  border-radius: var(--ge-radius-md);
  background: transparent;
  color: var(--ge-text-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.footer-contact-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* the chrome-wide white focus outline doubles this button's own white border;
   replace it with a thin black line just inside the border (negative offset
   pulls the outline inward from the border box) */
.footer-contact-btn:focus-visible {
  outline: 1px solid #000;
  outline-offset: -3px;
}

.footer-legal {
  border-top: 1px solid var(--ge-footer-stroke);
  padding-top: 40px;
  /* stack links above copyright; gap (not margin) survives the advisor reset */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* shared by the <a> links and the Cookie Preferences <button> */
.footer-link {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ge-text-secondary);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.footer-link:hover { opacity: 0.8; }

.footer-copyright {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ge-text-secondary);
  opacity: 0.6;
}

@media (min-width: 835px) and (max-width: 1024px) {
  .footer-inner { padding: 64px 40px; }
}

@media (max-width: 767.98px) {
  .footer-inner { padding: 80px 24px; }
  .footer-main { flex-direction: column; align-items: flex-start; gap: 40px; }
  .footer-contact { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-contact-text { width: auto; }
}

/* sides only — vertical padding keeps its per-range value (64px desktop / 80px mobile) */
@media (min-width: 577px) and (max-width: 834.98px) {
  .footer-inner { padding-left: 64px; padding-right: 64px; }
}

/* ======================= LEGAL / REFERENCES (Vscan) =======================
   Fine print between the assistant's contact module and the footer — client
   Figma (legal.png, measured against the 12px copyright: 1440 frame).
   Continues the assistant's last slot (#fbf9fd surface, 64px bottom padding
   = the Figma card-to-divider gap), so the section opens with the divider.
   Gutters + 1312px content cap mirror the assistant's .zv-container
   (16 / 40 / 64px tiers) so divider and text align with the contact card.
   Spacing is grid tracks + gap only — no margin/padding/max-width — so the
   advisor theme's page-wide margin/padding reset (see guards below) can't
   collapse it. */
.page-legal {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) minmax(0, 1312px) minmax(64px, 1fr);
  grid-template-rows: 1px 24px auto 60px; /* divider, gap, content, bottom */
  background: #fbf9fd;
}

.page-legal::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  background: #f4f0f9;
}

.page-legal-inner {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.page-legal-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-legal-heading {
  margin: 0;
  font-family: "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #4d4d4d;
}

.page-legal-refs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-legal-ref {
  display: flex;
  gap: 3px;
}

.page-legal-mark,
.page-legal-link,
.page-legal-text {
  font-family: "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #4d4d4d;
}

.page-legal-link {
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.page-legal-link:hover { text-decoration: underline; }
.page-legal-link:focus-visible {
  outline: 2px solid #6022a6;
  outline-offset: 2px;
  text-decoration: underline;
}

.page-legal-text { margin: 0; }

@media (min-width: 835px) and (max-width: 1024.98px) {
  .page-legal { grid-template-columns: 40px minmax(0, 1fr) 40px; }
}

@media (max-width: 834.98px) {
  .page-legal { grid-template-columns: 16px minmax(0, 1fr) 16px; }
}

/* ============== Zoovu StandaloneStarterTheme guards ==============
   The advisor's StandaloneStarterTheme remote component (injected at runtime,
   AFTER this sheet) ships a ':root { & *, & ::after, & ::before { ... } }'
   reset that zeroes margin AND padding (plus max-width / flex) on every element
   on the page — not just the advisor's own. Its specificity beats our class
   rules and wins on source order, collapsing the header/footer centering,
   width caps, and ALL their padding (logo/copyright/button jam against the
   edges). Re-assert everything we rely on with !important. This block can be
   deleted if the StandaloneStarterTheme component is removed from the advisor
   configuration in Zoovu. (The header/footer flex layouts rely only on
   justify-content + gap, which the reset leaves untouched.) */
.header-inner { margin: 0 auto !important; max-width: var(--chrome-frame) !important; }
.footer-inner { margin: 0 auto !important; max-width: var(--chrome-frame) !important; }

/* padding the reset zeroed — restore the design spacing (values mirror the
   .header-inner / .footer-inner / .footer-legal / .footer-contact-btn rules
   above, incl. their 768px mobile variants) */
.header-inner       { padding: 12px clamp(16px, 4.3vw, 62px) !important; }
.footer-inner       { padding: 64px clamp(24px, 4.44vw, 62px) !important; }
.footer-legal       { padding-top: 40px !important; }
.footer-contact-btn { padding: 0 24px !important; }

@media (min-width: 835px) and (max-width: 1024px) {
  .header-inner { padding: 12px 40px !important; }
  .footer-inner { padding: 64px 40px !important; }
}

@media (max-width: 767.98px) {
  .header-inner { padding: 8px 16px !important; }
  .footer-inner { padding: 80px 24px !important; }
}

@media (min-width: 577px) and (max-width: 834.98px) {
  .header-inner { padding: 12px 40px !important; }
  .footer-inner { padding-left: 64px !important; padding-right: 64px !important; }
}

/* the theme pins its mount node to 1140px with margin:0 (broken centering);
   on this page the advisor should span the full viewport */
#zoovu-assistant { max-width: none !important; margin: 0 !important; }

/* ============== single-scroll: advisor flows in the page ==============
   The advisor's scroll viewport is `.zv-advisor-view`: a 100vh box with
   overflow-y:auto. Stacked between our header and footer that gave TWO vertical
   scrollbars — the page's and the advisor's inner one.

   We release its fixed viewport height AND open its overflow to `visible`.
   Both are needed:
     - height:auto lets the box grow to its content so it no longer needs to
       scroll internally — only the page (body) scrolls: header → assistant →
       footer, one scrollbar.
     - overflow:visible stops it being a scroll container at all. If it kept
       overflow-y:auto, `position: sticky` panels inside the advisor would
       anchor to this (now non-scrolling) box and never stick. Making it
       visible hands the scroll context back to the document, so sticky works.
   Verified on the live advisor: inner scrollbar removed, no horizontal
   overflow introduced, sticky scroll context restored to the page. */
#zoovu-assistant .zv-advisor-view {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ==================== boot skeleton: no-jump loading ====================
   Until the advisor's js-loader -> bundle -> model chain resolves, the
   content slot is empty, so the footer sat directly under the header and
   jumped down on the advisor's first render. The skeleton reserves the
   first screen's height and mimics its look: the theme sizes its first
   configurator page to ~100dvh (min-height: calc(100dvh - 32px) plus 16px
   gutters) on the #2d2348 page surface with a radial-gradient panel —
   values copied from the theme's tokens (vscan-project variables.css /
   tokens.css).

   Both the height reservation and the skeleton's visibility key off
   ".zv-advisor-view exists" via :has(), so the swap is pure CSS and
   instant; the inline script in index.html only removes the node
   afterwards, covers browsers without :has(), and stops the shimmer after
   20s if the advisor never loads. */

.content-slot {
  position: relative;
}

/* reserve the viewport-high first screen only while the advisor is absent —
   the reservation lifts in the same frame the real view mounts, so no
   leftover empty space remains below the rendered assistant */
.content-slot:not(:has(.zv-advisor-view)) {
  min-height: 100vh; /* fallback for engines without dvh */
  min-height: 100dvh;
}

.slot-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  padding: 16px;
  background: #2d2348; /* theme --zv-bg-page-deep */
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;
}

/* hidden the moment the advisor renders (CSS path) or when the dismissal
   script flags it (JS path — also the fallback for browsers without :has) */
.content-slot:has(.zv-advisor-view) .slot-skeleton,
.slot-skeleton--done {
  opacity: 0;
  visibility: hidden;
}

/* the dark configurator panel (theme --zv-bg-configurator-surface) */
.slot-skeleton__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 24px 16px;
  border-radius: 12px;
  background: radial-gradient(
    ellipse 90% 70% at 50% 30%,
    #3f1966 0%,
    #1f1638 65%,
    #0f001f 100%
  );
  overflow: hidden;
}

/* shimmer primitive */
.slot-skeleton__bar {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.slot-skeleton__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.09),
    transparent
  );
  animation: slot-skeleton-sweep 1.6s ease-in-out infinite;
}

@keyframes slot-skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}

/* rough geometry of the first screen: product nav, two headline lines,
   edit pill, 16:9 canvas (max 1056x583 like the theme), dock bubbles */
.slot-skeleton__nav {
  width: min(320px, 70%);
  height: 40px;
  border-radius: 9999px;
}

.slot-skeleton__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.slot-skeleton__headline {
  height: 48px;
}

.slot-skeleton__headline--long {
  width: min(560px, 78vw);
}

.slot-skeleton__headline--short {
  width: min(420px, 58vw);
}

.slot-skeleton__pill {
  width: 180px;
  height: 32px;
  margin-top: 8px;
  border-radius: 9999px;
}

.slot-skeleton__canvas {
  flex: 1;
  width: min(1056px, 100%);
  min-height: 180px;
  max-height: 583px;
  margin-top: 32px;
  border-radius: 12px;
}

.slot-skeleton__dock {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.slot-skeleton__dot {
  width: 88px;
  height: 44px;
  border-radius: 9999px;
}

/* narrow tiers: the theme drops the headline from 48px to 24px under 835px */
@media (max-width: 834.98px) {
  .slot-skeleton__headline {
    height: 24px;
  }

  .slot-skeleton__hero {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slot-skeleton {
    transition: none;
  }

  .slot-skeleton__bar::after {
    animation: none;
  }
}